/* --- Fee & Hadiya Section (Updated for Responsiveness) --- */

.hadiya-payment-container {
    padding: 30px 15px;
    display: flex;
    justify-content: center;
    background: #f9f9f9;
}
.hadiya-card {
    background: #ffffff;
    max-width: 450px;
    width: 100%;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    text-align: center;
    border: 1px solid #eee;
    box-sizing: border-box; /* Taki padding width se bahar na jaye */
}

.hadiya-header h2 {
    color: #333;
    margin: 10px 0;
    font-size: 1.5rem;
}

.hadiya-header p {
    color: #666;
    font-size: 14px;
}

.account-details-box {
    text-align: left;
    margin-top: 20px;
}

.detail-item {
    margin-bottom: 15px;
}

.detail-item label {
    font-size: 12px;
    color: #27ae60;
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
}

.detail-value {
    background: #f4f4f4;
    padding: 12px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    color: #000;
}

.iban-field {
    display: flex;
    align-items: center;
    background: #eafaf1;
    border: 2px solid #27ae60;
    border-radius: 8px;
    padding: 10px;
    gap: 10px;
}

#ibanDisplay {
    flex: 1;
    font-family: monospace;
    font-weight: bold;
    font-size: 14px; /* Mobile par thoda chota */
    word-break: break-all; /* Long text mobile screen par break ho jayega */
}

.iban-field button {
    background: #27ae60;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    white-space: nowrap;
}

.payment-instructions {
    margin-top: 20px;
    font-size: 13px;
    color: #444;
    background: #fff8e1;
    padding: 12px;
    border-radius: 8px;
    text-align: left;
}

/* --- Pricing Grid Updates --- */
.pricing-grid {
    display: flex;
    flex-wrap: wrap; /* Takay cards niche aa jayein mobile par */
    justify-content: center;
    gap: 20px;
    padding: 20px;
}

.card {
    background: white;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    flex: 1;
    min-width: 300px; /* Mobile par width manage karega */
    max-width: 400px;
    text-align: center;
    box-sizing: border-box;
}

/* --- Responsive Media Queries --- */
@media (max-width: 768px) {
    .pricing-grid {
        flex-direction: column;
        align-items: center;
    }

    .card {
        width: 100%;
        min-width: unset;
    }

    .hadiya-card {
        padding: 20px 15px;
    }

    .iban-field {
        flex-direction: column; /* IBAN aur Copy button upar niche */
        text-align: center;
    }

    .iban-field button {
        width: 100%;
    }

    .support-container {
        grid-template-columns: 1fr; /* Support page responsive fix */
    }
}

/* --- Baqi Purana Code (Waisa hi hai) --- */
body { font-family: 'Segoe UI', Arial, sans-serif; background: #f0f4f8; margin: 0; padding: 0; color: #333; overflow-x: hidden; }

.notice-section, .complaint-section { background: white; padding: 30px; border-radius: 20px; box-shadow: 0 10px 25px rgba(0,0,0,0.05); }
.header { text-align: center; margin-bottom: 30px; }
.header i { font-size: 40px; color: #27ae60; margin-bottom: 10px; }
.header h1 { font-size: 24px; margin: 0; color: #2c3e50; }

.notice-item { background: #f9fdfb; border-left: 5px solid #27ae60; padding: 15px; border-radius: 8px; margin-bottom: 15px; }
.notice-date { font-size: 12px; color: #27ae60; font-weight: bold; }
.notice-title { font-weight: bold; margin: 5px 0; display: block; }
.notice-text { font-size: 14px; color: #666; }

.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 8px; font-weight: 600; font-size: 14px; }
.form-group input, .form-group select, .form-group textarea {
    width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 10px; font-size: 14px; box-sizing: border-box;
}

.submit-btn {
    width: 100%; background: #27ae60; color: white; border: none; padding: 15px;
    border-radius: 10px; font-size: 16px; font-weight: bold; cursor: pointer; transition: 0.3s;
}

.ramadan-notice-card {
    background: #ffffff;
    border-radius: 15px;
    border-left: 5px solid #27ae60;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    overflow: hidden;
    margin-bottom: 20px;
    font-family: 'Poppins', sans-serif;
    transition: 0.3s;
}

.schedule-item {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    border-bottom: 1px solid #e0e0e0;
}
/* ... Baqi animations and styles ... */
@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* Default state: Loader chupa hua ho */
.btn-loader {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Jab button par 'is-loading' class aaye tab text chupe aur loader dikhe */
.submit-btn.is-loading .btn-text {
    display: none !important;
}

.submit-btn.is-loading .btn-loader {
    display: flex !important;
}

/* Button disabled look */
.submit-btn:disabled {
    background-color: #95a5a6 !important;
    cursor: not-allowed;
    opacity: 0.8;
}

.latest{
    /* background-color: #27ae60; */
    padding: 0.8rem;
    font-weight: bold;
    font-size: larger;
    border-radius: 1rem;
    
    
}
.homebtn{
        background-color: #27ae60;
    padding: 0.8rem;
    font-weight: bold;
    font-size: larger;
    border-radius: 1rem;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    border: none;
    font-weight: bold;
    color: #fff;


 }