/* --- Global Styles --- */
body { 
    font-family: 'Inter', sans-serif; 
    background: linear-gradient(135deg, #1e5aa3, #0d2b4a); 
    min-height: 100vh; 
    padding: 40px 20px; 
    margin: 0; 
}

.container { 
    max-width: 650px; 
    margin: 0 auto; 
}

.card { 
    background: white; 
    border-radius: 32px; 
    overflow: hidden; 
    box-shadow: 0 25px 50px rgba(0,0,0,0.25); 
}

.card-header { 
    background: linear-gradient(135deg, #1e5aa3, #0e3a6b); 
    padding: 30px; 
    text-align: center; 
    color: white; 
}

.card-header h2 { 
    font-size: 28px; 
    margin-bottom: 5px; 
    margin-top: 0; 
}

.card-header p { 
    font-size: 14px; 
    opacity: 0.9; 
    margin: 0; 
}

.card-body { 
    padding: 35px; 
}

/* --- Form Elements --- */
.form-group { 
    margin-bottom: 22px; 
}

.form-group label { 
    display: block; 
    margin-bottom: 8px; 
    font-weight: 600; 
    color: #333; 
    font-size: 14px; 
}

.form-group input, .form-group select { 
    width: 100%; 
    padding: 14px; 
    border: 1px solid #e2e8f0; 
    border-radius: 14px; 
    font-size: 14px; 
    background: white; 
    box-sizing: border-box; 
}

.btn-primary { 
    background: #e05a2a; 
    color: white; 
    width: 100%; 
    padding: 16px; 
    border: none; 
    border-radius: 50px; 
    font-size: 16px; 
    font-weight: 700; 
    cursor: pointer; 
    transition: 0.3s; 
}

.btn-primary:hover { 
    background: #c04e1a; 
}

/* --- Step Indicator --- */
.step-indicator { 
    display: flex; 
    justify-content: center; 
    margin-bottom: 30px; 
    gap: 15px; 
}

.step-circle { 
    width: 45px; 
    height: 45px; 
    background: #e2e8f0; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-weight: 700; 
    color: #4a5568; 
}

.step-circle.active { 
    background: #e05a2a; 
    color: white; 
}

/* --- WhatsApp Toggle --- */
.whatsapp-options { 
    display: flex; 
    gap: 15px; 
    margin-top: 10px; 
}

.whatsapp-option { 
    flex: 1; 
    padding: 12px; 
    border: 2px solid #e2e8f0; 
    background: white; 
    border-radius: 50px; 
    cursor: pointer; 
    text-align: center; 
    font-weight: 600; 
    color: #4a5568; 
}

.whatsapp-option.active { 
    background: #e05a2a; 
    border-color: #e05a2a; 
    color: white; 
}

.whatsapp-field { 
    margin-top: 15px; 
    display: none; 
}

/* --- Step 2 Elements --- */
.subscription-line { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 8px; 
    margin-top: 8px; 
    background: #f8f9fc; 
    padding: 6px; 
    border-radius: 60px; 
    border: 1px solid #e2e8f0; 
}

.sub-option { 
    flex: 1; 
    text-align: center; 
    padding: 10px 16px; 
    border-radius: 50px; 
    font-size: 13px; 
    font-weight: 600; 
    cursor: pointer; 
    color: #4a5568; 
}

.sub-option.active { 
    background: linear-gradient(135deg, #e05a2a, #c04e1a); 
    color: white; 
}

.amount-preset { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 10px; 
    margin-top: 10px; 
}

.amount-btn { 
    background: #f1f5f9; 
    padding: 10px 20px; 
    border-radius: 40px; 
    cursor: pointer; 
    font-size: 14px; 
    font-weight: 600; 
    border: 1px solid #e2e8f0; 
    color: #333; 
}

.amount-btn.selected { 
    background: #e05a2a; 
    color: white; 
    border-color: #e05a2a; 
}

/* --- Zakat Calculator --- */
.zakat-calculator { 
    background: linear-gradient(135deg, #f0f9ff, #e8f5e9); 
    border: 2px solid #2e7d32; 
    border-radius: 20px; 
    padding: 20px; 
    margin-bottom: 25px; 
    display: none; 
}

.zakat-calculator h4 { 
    color: #2e7d32; 
    margin-bottom: 15px; 
    margin-top: 0; 
}

.wealth-row { 
    display: flex; 
    gap: 15px; 
    margin-bottom: 15px; 
    flex-wrap: wrap; 
}

.wealth-row input { 
    flex: 1; 
    padding: 10px; 
    border-radius: 8px; 
    border: 1px solid #ccc; 
}

.zakat-result { 
    background: #e8f5e9; 
    padding: 15px; 
    border-radius: 12px; 
    margin: 15px 0; 
    text-align: center; 
}

.zakat-amount { 
    font-size: 24px; 
    font-weight: bold; 
    color: #e05a2a; 
}

.apply-zakat-btn { 
    background: #2e7d32; 
    color: white; 
    padding: 12px; 
    border: none; 
    border-radius: 50px; 
    cursor: pointer; 
    width: 100%; 
    font-weight: 600; 
}

/* --- Payment Methods (Step 3) --- */
.payment-methods { 
    display: flex; 
    gap: 15px; 
    flex-wrap: wrap; 
    margin-top: 10px; 
}

.payment-option { 
    position: relative; 
    flex: 1; 
    min-width: 100px; 
    background: #f8f9fc; 
    border: 2px solid #e2e8f0; 
    border-radius: 16px; 
    padding: 15px 10px; 
    text-align: center; 
    cursor: pointer; 
    transition: all 0.3s ease; 
}

.payment-option img { 
    width: 50px; 
    height: auto; 
    margin-bottom: 8px; 
}

.payment-option span { 
    display: block; 
    font-size: 13px; 
    font-weight: 600; 
    color: #4a5568; 
}

.payment-option.active { 
    border-color: #e05a2a; 
    background: #fff5f0; 
    box-shadow: 0 4px 15px rgba(224, 90, 42, 0.2); 
}

.payment-option.active span { 
    color: #e05a2a; 
}

/* --- Recommended Badge Animation --- */
.recommended-badge { 
    position: absolute; 
    top: -12px; 
    left: 50%; 
    transform: translateX(-50%); 
    background: linear-gradient(45deg, #ff416c, #ff4b2b); 
    color: white; 
    font-size: 10px; 
    font-weight: bold; 
    padding: 3px 8px; 
    border-radius: 20px; 
    text-transform: uppercase; 
    letter-spacing: 0.5px; 
    box-shadow: 0 0 10px rgba(255, 75, 43, 0.6); 
    animation: pulse 1.5s infinite; 
    white-space: nowrap; 
    z-index: 10; 
}

@keyframes pulse { 
    0% { transform: translateX(-50%) scale(1); box-shadow: 0 0 0 0 rgba(255, 75, 43, 0.7); } 
    70% { transform: translateX(-50%) scale(1.05); box-shadow: 0 0 0 8px rgba(255, 75, 43, 0); } 
    100% { transform: translateX(-50%) scale(1); box-shadow: 0 0 0 0 rgba(255, 75, 43, 0); } 
}

/* --- Manual Payment Details --- */
.bank-details { 
    background: #f0f9ff; 
    border: 1px solid #bae6fd; 
    border-radius: 16px; 
    padding: 18px; 
    margin-top: 15px; 
}

.bank-row { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 8px 0; 
    border-bottom: 1px solid #e0f2fe; 
    font-size: 13px; 
}

.copy-btn { 
    background: #e05a2a; 
    color: white; 
    border: none; 
    padding: 5px 12px; 
    border-radius: 30px; 
    cursor: pointer; 
    font-size: 12px; 
}