/* ===================================
   DONATION PAGE STYLES
   =================================== */

/* Hero Section */
/* Hero Section */
/* Donation Section (Now Hero) */
.donation-section {
    background: var(--bg-cream);
    /* Navbar is sticky (in flow) on sub-pages, so no fixed-bar clearance */
    padding-top: 28px;
    padding-bottom: 48px;
}

/* Header Grouping */
.donate-header-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    margin-bottom: 26px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.donate-mascot-hero {
    width: 150px;
    /* Reduced from 250px as per user feedback */
    height: auto;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.15));
    animation: float 5s ease-in-out infinite;
    flex-shrink: 0;
}

.donate-header-text {
    text-align: left;
    max-width: 500px;
}

.donate-main-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2.2rem, 4.5vw, 3rem);
    line-height: 1.1;
    color: var(--text-dark);
    margin-bottom: 15px;
}

.donate-subtext {
    font-size: 1.1rem;
    color: #3F6272;
    line-height: 1.65;
    font-weight: 400;
}

@media (max-width: 768px) {
    .donate-header-group {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .donate-header-text {
        text-align: center;
    }

    .donate-main-title {
        font-size: 2.5rem;
    }

    .donate-mascot-hero {
        width: 150px;
    }
}

/* Tab Navigation */
/* --- Folder Style Tabs --- */
.donation-tabs {
    display: flex;
    gap: 10px;
    /* Slight gap between tabs */
    margin-bottom: 0;
    /* No margin bottom to connect with content */
    padding-left: 20px;
    /* Tabs indented slightly */
    position: relative;
    z-index: 10;
    /* Above the content box border */
    top: 2px;
    /* Slight overlap to hide bottom border of active tab */
    justify-content: flex-start;
    /* Align left for folder look */
}

.tab-btn {
    background: #F2F8F6;
    /* Inactive tab color - lighter */
    border: 2px solid var(--primary);
    /* Soft mango border */
    border-bottom: none;
    /* Connect to content */
    padding: 12px 25px;
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: #6B8793;
    cursor: pointer;
    border-radius: 15px 15px 0 0;
    /* Soft rounded top corners */
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    top: 2px;
    /* Push down to meet border */
    box-shadow: none;
}

.tab-btn:hover {
    background: var(--tint-aqua);
    color: #2A4E5D;
    transform: none;
    box-shadow: none;
}

.tab-btn.active {
    background: #fff;
    /* Active tab matches content background */
    color: var(--primary-deep);
    /* Toasted mango text */
    border-color: var(--primary);
    z-index: 11;
    padding-bottom: 15px;
    /* Extend slightly to cover border */
    margin-bottom: -2px;
    /* Overlap border */
    box-shadow: none;
    transform: none;
}

.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -3px;
    /* Cover the border line */
    left: 0;
    width: 100%;
    height: 5px;
    background: #fff;
    z-index: 12;
}

/* Tab Content */
/* --- Tab Content Wrapper --- */
.tab-content-wrapper {
    background: #fff;
    border: 2px solid var(--primary);
    /* Soft mango border */
    border-radius: 20px;
    /* All edges rounded soft */
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    /* Subtle shadow */
    position: relative;
    z-index: 5;
    min-height: 400px;
}

.tab-content {
    display: none;
    animation: fadeIn 0.3s ease-out;
}

.tab-content.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Payment Grid */
.payment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 30px;
}

/* Payment Cards */
.payment-card {
    background: white;
    padding: 35px;
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.payment-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

.payment-card h3 {
    font-size: 1.3rem;
    margin-bottom: 25px;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 10px;
}

.payment-card h3 i {
    color: var(--primary-deep);
}

/* QR Code Card */
.qr-card {
    text-align: center;
}

.qr-code-wrapper {
    background: white;
    padding: 20px;
    border-radius: 12px;
    display: inline-block;
    margin: 20px 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.qr-code {
    width: 250px;
    height: 250px;
    display: block;
}

.qr-instruction {
    font-size: 1rem;
    color: #53707C;
    line-height: 1.6;
}

.qr-instruction span {
    font-size: 0.9rem;
    color: #7C949E;
}

/* Payment Options */
.payment-option {
    margin-bottom: 25px;
}

.payment-option label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-dark);
}

.copy-field {
    display: flex;
    gap: 10px;
}

.copy-field input {
    flex: 1;
    padding: 12px 15px;
    border: 2px solid #DCEBE7;
    border-radius: 8px;
    font-size: 1rem;
    font-family: var(--font-body);
    background: #F4FAF8;
}

.copy-btn {
    padding: 12px 20px;
    background: var(--primary);
    color: var(--text-dark);
    border: none;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 700;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
}

.copy-btn:hover {
    background: var(--primary-dark);
    transform: scale(1.05);
}

.copy-btn.copied {
    background: var(--leaf);
    color: #fff;
}

.copy-btn.copied i::before {
    content: '\f00c';
}

/* Payment Method Buttons */
.payment-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.payment-method-btn {
    padding: 15px 25px;
    border: 2px solid #DCEBE7;
    border-radius: 10px;
    background: white;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-body);
}

.payment-method-btn:hover {
    transform: translateX(5px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.payment-method-btn.gpay {
    border-color: #4285F4;
    color: #4285F4;
}

.payment-method-btn.gpay:hover {
    background: #4285F4;
    color: white;
}

.payment-method-btn.phonepe {
    border-color: #5F259F;
    color: #5F259F;
}

.payment-method-btn.phonepe:hover {
    background: #5F259F;
    color: white;
}

.payment-method-btn.paytm {
    border-color: #00BAF2;
    color: #00BAF2;
}

.payment-method-btn.paytm:hover {
    background: #00BAF2;
    color: white;
}

/* Bank Details */
/* Bank Details */
/* Bank Details Grid Placement (if needed) */

/* Compact Bank Info */
.bank-info-compact {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bank-row-compact {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    border-bottom: 1px solid #E8F1EE;
    padding-bottom: 4px;
}

.bank-row-compact:last-child {
    border-bottom: none;
}

.bank-row-compact .label {
    font-weight: 600;
    color: #476876;
}

.bank-row-compact .value {
    color: #2A4E5D;
    font-family: 'Courier New', monospace;
    font-weight: 600;
    text-align: right;
}

/* Overseas Layout */
.overseas-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 30px;
}

@media (max-width: 900px) {
    .overseas-grid {
        grid-template-columns: 1fr;
    }
}

.wire-transfer-stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.paypal-card-large {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    text-align: center;
    background: linear-gradient(135deg, #ffffff 0%, var(--tint-sky) 100%);
    border: 1px solid #D5E7F3;
}

.paypal-card-large h3 {
    font-size: 1.8rem;
    margin-bottom: 30px;
}

.paypal-card-large .paypal-btn {
    font-size: 1.4rem;
    padding: 20px 50px;
}

.wire-card-compact {
    padding: 20px;
}

.wire-card-compact h3 {
    font-size: 1.1rem;
    margin-bottom: 15px;
}

/* PayPal Card */
.paypal-card {
    text-align: center;
}

.paypal-wrapper {
    margin-top: 20px;
}

.paypal-btn {
    background: #0070BA;
    color: white;
    border: none;
    padding: 18px 40px;
    border-radius: 50px;
    font-size: 1.2rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    font-family: var(--font-body);
}

.paypal-btn:hover {
    background: #005A94;
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0, 112, 186, 0.4);
}

.payment-note {
    font-size: 0.95rem;
    color: #53707C;
    line-height: 1.6;
}

.payment-note span {
    font-size: 0.85rem;
    color: #7C949E;
}

/* Info Box */
/* Info Box */
.info-box {
    background: var(--tint-peach);
    /* Soft peach panel */
    padding: 15px 20px;
    /* Reduced padding */
    border-radius: 12px;
    /* Slightly less rounded for compact feel */
    border-left: 4px solid var(--primary);
    /* Reduced border width */
    display: flex;
    gap: 15px;
    /* Reduced gap */
    margin: 20px 0 20px 0;
    /* Aligned left */
    align-items: flex-start;
    max-width: 100%;
    /* Full width */
    font-size: 0.95rem;
    /* Slightly smaller text */
    text-align: left;
    /* Force left text alignment */
}

.info-box i {
    font-size: 1.5rem;
    /* Smaller icon */
    color: var(--primary-deep);
    flex-shrink: 0;
    margin-top: 2px;
}

.info-box strong {
    display: block;
    margin-bottom: 5px;
    /* Reduced margin */
    font-size: 1rem;
    /* Standard size */
}

.info-box ul {
    margin: 5px 0 10px;
    /* Compact margins */
    padding-left: 20px;
    text-align: left;
    /* Ensure left alignment */
}

.info-box li {
    margin: 3px 0;
    /* Tighter list */
}

.info-box a {
    color: var(--primary-deep);
    /* Toasted mango link */
    text-decoration: underline;
    font-weight: 600;
}

/* Trust Elements */
.trust-elements {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 40px;
}

.trust-item {
    background: var(--tint-aqua);
    padding: 20px;
    border-radius: 12px;
    display: flex;
    gap: 15px;
    align-items: flex-start;
    transition: transform 0.3s ease;
}

.trust-item:hover {
    transform: translateY(-3px);
}

.trust-item i {
    font-size: 1.8rem;
    color: var(--accent);
    flex-shrink: 0;
}

.trust-item strong {
    display: block;
    margin-bottom: 5px;
    color: var(--text-dark);
}

.trust-item p {
    font-size: 0.9rem;
    color: #53707C;
    margin: 0;
}

/* Impact Breakdown Section */
.impact-breakdown-section {
    background: white;
}

.section-subtitle {
    text-align: center;
    font-size: 1.2rem;
    color: #53707C;
    margin-top: -30px;
    margin-bottom: 50px;
}

/* Breakdown Grid */
.breakdown-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin-bottom: 60px;
}

.breakdown-card {
    background: white;
    padding: 35px;
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

.breakdown-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--card-color) 0%, var(--card-color) 100%);
}

.breakdown-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

.breakdown-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--card-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    color: white;
    margin-bottom: 20px;
    flex-shrink: 0;
}

.breakdown-percentage {
    font-size: 3.5rem;
    font-weight: 800;
    font-family: var(--font-display);
    color: var(--card-color);
    line-height: 1;
    margin-bottom: 15px;
}

.breakdown-category {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 12px;
    line-height: 1.3;
}

.breakdown-description {
    font-size: 0.95rem;
    color: #53707C;
    line-height: 1.6;
}

/* Impact Tiers */
.impact-tiers {
    margin-top: 60px;
}

.tiers-title {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 40px;
    color: var(--text-dark);
}

.tiers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 25px;
}

.tier-card {
    background: var(--tint-aqua);
    padding: 30px 25px;
    border-radius: var(--radius);
    text-align: center;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.tier-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary);
    box-shadow: 0 10px 30px rgba(249, 160, 63, 0.2);
}

.tier-card.featured {
    background: linear-gradient(135deg, var(--accent) 0%, var(--leaf) 100%);
    color: white;
    position: relative;
}

.tier-badge {
    background: rgba(255, 255, 255, 0.3);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-block;
    margin-bottom: 15px;
}

.tier-amount {
    font-size: 2.2rem;
    font-weight: 800;
    font-family: var(--font-display);
    margin-bottom: 15px;
    color: var(--primary-deep);
}

.tier-card.featured .tier-amount {
    color: white;
}

.tier-card p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #53707C;
}

.tier-card.featured p {
    color: white;
}

/* Transparency Section */
.transparency-section {
    background: var(--tint-leaf);
}

.transparency-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.transparency-card {
    background: white;
    padding: 35px;
    border-radius: var(--radius);
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease;
}

.transparency-card:hover {
    transform: translateY(-5px);
}

.transparency-card i {
    font-size: 3rem;
    color: var(--leaf);
    margin-bottom: 20px;
}

.transparency-card h3 {
    font-size: 1.4rem;
    margin-bottom: 15px;
    color: var(--text-dark);
}

.transparency-card p {
    color: #53707C;
    line-height: 1.6;
}

.transparency-card a {
    color: #1E7E50;
    text-decoration: underline;
}

/* =========================================
   MOBILE DONATION WIDGET FIXES
   ========================================= */

@media (max-width: 768px) {

    /* Donation Header */
    .donate-header-group {
        flex-direction: column;
        text-align: center;
    }

    .donate-mascot-hero {
        width: 140px;
        margin: 0 auto;
    }

    .donate-main-title {
        font-size: 2rem;
    }

    /* Tabs - Folder Style Fix */
    .donation-tabs {
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 0;
        margin-bottom: 0;
        -webkit-overflow-scrolling: touch;
        /* Smooth scroll on iOS */
        justify-content: flex-start;
        /* Ensure start alignment for scrolling */
    }

    .tab-btn {
        font-size: 1rem;
        padding: 10px 15px;
        flex-shrink: 0;
        /* Prevent squishing */
    }

    .tab-content-wrapper {
        padding: 20px;
        border-radius: 10px;
        /* Slightly less rounded on small screens to save space */
    }

    /* Payment Buttons */
    .payment-buttons {
        width: 100%;
    }

    .payment-method-btn {
        font-size: 0.95rem;
        padding: 12px;
    }

    /* Copy Field */
    .copy-field {
        flex-direction: column;
        gap: 10px;
    }

    .copy-btn {
        width: 100%;
        justify-content: center;
    }

    .copy-field input {
        width: 100%;
    }

    /* Overseas Grid */
    .overseas-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    /* QR Code */
    .qr-code {
        width: 100%;
        max-width: 200px;
        height: auto;
    }

    /* Trust Elements */
    .trust-elements {
        grid-template-columns: 1fr;
    }

    /* Tier Cards */
    .tiers-grid {
        grid-template-columns: 1fr;
    }
}

/* FAQ Section */
.faq-donate-section {
    background: linear-gradient(180deg, #FFFFFF 0%, var(--bg-cream) 100%);
}

.faq-donate-section .section-title::after {
    background-image: url('../assets/images/accents/damaru.png');
}

/* Scoped to .faq-donate-section — index.html's FAQ look lives in style.css
   scoped to .faq-section; both files load on both pages. */
.faq-donate-section .faq-search {
    max-width: 600px;
    margin: 0 auto 50px;
    position: relative;
}

.faq-donate-section .faq-search i {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #7C949E;
    font-size: 1.2rem;
}

.faq-donate-section .faq-search input {
    width: 100%;
    padding: 18px 20px 18px 55px;
    border: 2px solid #DCEBE7;
    border-radius: 50px;
    font-size: 1rem;
    font-family: var(--font-body);
    transition: all 0.3s ease;
}

.faq-donate-section .faq-search input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 4px 15px rgba(249, 160, 63, 0.2);
}

.faq-categories {
    max-width: 900px;
    margin: 0 auto;
}

.faq-category {
    margin-bottom: 50px;
}

.category-title {
    font-size: 1.8rem;
    margin-bottom: 25px;
    color: var(--primary-deep);
    padding-bottom: 10px;
    border-bottom: 3px solid var(--primary);
}

.faq-donate-section .faq-item {
    background: white;
    margin-bottom: 15px;
    border: 1px solid #E8F1EE;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-donate-section .faq-item:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.faq-donate-section .faq-item.hidden {
    display: none;
}

.faq-donate-section .faq-question {
    padding: 20px 25px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--text-dark);
    transition: background 0.3s ease;
}

.faq-donate-section .faq-question:hover {
    background: #F4FAF8;
}

.faq-donate-section .faq-question i {
    color: var(--primary);
    transition: transform 0.3s ease;
    font-size: 1.2rem;
}

.faq-donate-section .faq-item.active .faq-question i {
    transform: rotate(180deg);
}

.faq-donate-section .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
    padding: 0 25px;
}

.faq-donate-section .faq-item.active .faq-answer {
    max-height: 500px;
    padding: 0 25px 20px;
}

.faq-donate-section .faq-answer p {
    color: #53707C;
    line-height: 1.8;
    margin: 0;
}

/* FAQ Contact Card */
.faq-donate-section .faq-contact-card {
    background: var(--tint-peach);
    max-width: 800px;
    padding: 40px;
    border-radius: var(--radius);
    text-align: center;
    margin: 50px auto 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.faq-donate-section .faq-contact-card h3 {
    font-size: 2rem;
    margin-bottom: 15px;
    color: var(--text-dark);
}

.faq-donate-section .faq-contact-card p {
    font-size: 1.1rem;
    color: #53707C;
    margin-bottom: 25px;
}

.contact-options {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.contact-btn {
    padding: 15px 30px;
    background: var(--primary);
    color: var(--text-dark);
    border-radius: 999px;
    font-weight: 700;
    box-shadow: 0 4px 0 var(--primary-deep);
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.contact-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 7px 0 var(--primary-deep);
}

.contact-btn.whatsapp {
    background: #25D366;
    box-shadow: 0 4px 0 #1CA851;
}

.contact-btn.whatsapp:hover {
    box-shadow: 0 7px 0 #1CA851;
}

.response-time {
    font-size: 0.9rem;
    color: #7C949E;
    font-style: italic;
}

/* Trust Badges Section */
.trust-badges-section {
    background: white;
}

.badges-grid {
    display: grid;
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}

/* Row 1: the three chapter logos. Row 2: the certification badges. */
.badges-logos {
    grid-template-columns: repeat(3, 1fr);
}

.badges-certs {
    grid-template-columns: repeat(3, 1fr);
    margin-top: 30px;
}

/* Pure white tiles — the logos are white-background JPGs, so any tint
   behind them reads as a clipped rectangle. */
.badge-item {
    text-align: center;
    padding: 25px;
    background: white;
    border-radius: 12px;
    transition: transform 0.3s ease;
}

.badge-item:hover {
    transform: translateY(-5px);
}

.badge-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 84px;
    margin-bottom: 15px;
}

@media (max-width: 820px) {
    .badges-logos {
        grid-template-columns: 1fr;
    }

    .badges-certs {
        grid-template-columns: repeat(2, 1fr);
    }
}

.badge-item img {
    max-height: 60px;
    max-width: 100%;
    object-fit: contain;
}

.badge-item p {
    font-size: 0.9rem;
    color: #53707C;
    margin: 0;
}

.text-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.text-badge i {
    font-size: 2.5rem;
    color: var(--primary-deep);
}

.text-badge strong {
    font-size: 1rem;
    color: var(--text-dark);
}

.text-badge span {
    font-size: 0.85rem;
    color: #7C949E;
}

/* Final CTA Section — the deep peacock moment before the footer */
.final-cta-section {
    background: linear-gradient(140deg, var(--lagoon) 0%, var(--accent) 65%, #1C8F74 100%);
    padding: 56px 0;
    text-align: center;
    color: white;
}

.cta-content h2 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2rem, 4vw, 2.6rem);
    color: white;
    margin-bottom: 20px;
}

.cta-message {
    font-size: 1.3rem;
    margin-bottom: 15px;
    opacity: 0.95;
}

.cta-vision {
    font-size: 1.25rem;
    margin-bottom: 24px;
    line-height: 1.6;
}

/* The CTA keeps the standard mango gumdrop look — only sized up */
.final-cta-section .btn {
    font-size: 1.3rem;
    padding: 18px 45px;
}

/* Footer Adjustments */
.footer-tagline {
    margin-top: 15px;
    font-size: 1rem;
    opacity: 0.9;
}

/* Responsive Design */
@media (max-width: 768px) {
    .donation-tabs {
        flex-direction: column;
        gap: 15px;
    }

    .tab-btn {
        width: 100%;
        justify-content: center;
    }

    .payment-grid {
        grid-template-columns: 1fr;
    }

    .qr-code {
        width: 200px;
        height: 200px;
    }

    .breakdown-grid {
        grid-template-columns: 1fr;
    }

    .breakdown-percentage {
        font-size: 2.5rem;
    }

    .tiers-grid {
        grid-template-columns: 1fr;
    }

    .contact-options {
        flex-direction: column;
    }

    .cta-content h2 {
        font-size: 2rem;
    }

    .cta-message {
        font-size: 1.1rem;
    }

    .cta-vision {
        font-size: 1.2rem;
    }
}

@media (max-width: 480px) {
    .payment-card {
        padding: 25px;
    }

    .breakdown-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }

    .tier-amount {
        font-size: 1.8rem;
    }
}
/* ===================================
   DONATION WIZARD
   =================================== */

.donation-wizard {
    max-width: 900px;
    margin: 0 auto;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);
    padding: 28px;
    scroll-margin-top: 120px;
}

/* Step indicator */
.wizard-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 22px;
}

.wizard-step-dot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #9FB3BB;
}

.wizard-step-dot span {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #EAF4F1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-family: var(--font-display);
    transition: all 0.3s ease;
}

.wizard-step-dot small {
    font-size: 0.75rem;
    font-weight: 600;
}

.wizard-step-dot.active span {
    background: var(--primary);
    color: var(--text-dark);
    box-shadow: 0 4px 12px rgba(249, 160, 63, 0.4);
}

.wizard-step-dot.active {
    color: var(--primary-deep);
}

.wizard-step-dot.done span {
    background: var(--leaf);
    color: #fff;
}

.wizard-step-line {
    flex: 0 1 60px;
    height: 3px;
    border-radius: 2px;
    background: #EAF4F1;
    margin-bottom: 18px;
}

/* Panels */
.wizard-panel {
    display: none;
}

.wizard-panel.active {
    display: block;
    animation: wizardFadeIn 0.35s ease;
}

@keyframes wizardFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.wizard-title {
    font-family: var(--font-display);
    color: var(--accent);
    margin-bottom: 16px;
    text-align: center;
}

/* Form */
.wizard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
}

.wizard-field-full {
    grid-column: 1 / -1;
}

.wizard-field label {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 6px;
    color: #3A5D6C;
}

.wizard-field input,
.wizard-field select,
.wizard-field textarea,
.wizard-resume-box input,
#proof-message textarea {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #E2EFEA;
    border-radius: 12px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    transition: border-color 0.2s ease;
    background: #fff;
}

.wizard-field input:focus,
.wizard-field select:focus,
.wizard-field textarea:focus,
#proof-message textarea:focus {
    outline: none;
    border-color: var(--primary);
}

.wizard-amount-row {
    display: flex;
    gap: 10px;
}

/* Static currency badge — the currency is decided by the country picker, so
   there is nothing to choose here; it just shows what the donation is stamped in. */
.wizard-currency-prefix {
    flex-shrink: 0;
    width: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    border: 2px solid #E2EFEA;
    border-radius: 12px;
    background: var(--tint-aqua);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-dark);
    white-space: nowrap;
}

/* Country picker (step 1) — three flag cards, one active */
.wizard-country-field label {
    margin-bottom: 8px;
}

.country-picker {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.country-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 8px;
    border: 2px solid #E2EFEA;
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
    font-family: var(--font-body);
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.08s ease;
}

.country-option:hover {
    border-color: var(--primary);
}

.country-option:active {
    transform: scale(0.98);
}

.country-option.active {
    border-color: var(--primary);
    background: var(--tint-peach);
    box-shadow: 0 4px 14px rgba(249, 160, 63, 0.18);
}

.country-flag {
    font-size: 1.9rem;
    line-height: 1;
}

.country-name {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--text-dark);
    line-height: 1.2;
    text-align: center;
}

/* India reads "भारतम् (India)" on ONE line — the Devanagari needs the display
   face (Nunito has no Devanagari glyphs), and the tile must stay exactly as
   tall as USA / Canada / Australia, so no second line and no extra leading. */
.country-option[data-country="IN"] .country-name {
    font-family: var(--font-display);
    font-size: 0.98rem;
    white-space: nowrap;
}

.country-name-en {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.8rem;
    color: #53707C;
}

.wizard-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.9rem;
    color: #476876;
    cursor: pointer;
}

/* `.wizard-field label` (0,1,1) outranks a bare `.wizard-check` (0,1,0), so
   inside the form grid the flex row silently fell back to block — harmless
   while the label was one line, but it drops any second line to the far left. */
.wizard-field label.wizard-check {
    display: flex;
    margin-bottom: 0;
}

.wizard-check input {
    width: auto;
    margin-top: 3px;
}

.wizard-check small {
    display: block;
    margin-top: 2px;
    font-size: 0.78rem;
    color: #7C949E;
}

/* Opt-in panel (the 80G tick). It sits at the very bottom of step 1, where a
   bare checkbox read as a stray line of text under the form rather than an
   offer — the quiet panel gives it an edge to sit in. */
.wizard-optin {
    background: var(--tint-aqua);
    border: 1px solid #E2EFEA;
    border-radius: 14px;
    padding: 12px 14px;
}

/* Errors */
.wizard-error {
    background: #fff3f0;
    border: 1px solid #ffc9bc;
    color: #c0392b;
    border-radius: 12px;
    padding: 12px 16px;
    margin-top: 18px;
    font-size: 0.9rem;
}

/* Nav row */
.wizard-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 18px;
    gap: 15px;
}

.wizard-back-btn {
    background: none;
    border: none;
    color: #6B8793;
    font-family: var(--font-body);
    font-weight: 600;
    cursor: pointer;
    padding: 10px;
}

.wizard-back-btn:hover {
    color: var(--accent);
}

/* Step 1 is the only step with no Back button. It used to reuse the
   space-between nav with an empty spacer, which pinned the action to the far
   right against a lone checkbox on the left and left a void between them. */
.wizard-nav-center {
    justify-content: center;
}

.wizard-nav-center .btn {
    min-width: 260px;
    justify-content: center;
}

/* Quiet escape hatch under the step-1 action — hairline-separated so it reads
   as a footer rather than as more form to fill in. */
.wizard-resume-link {
    text-align: center;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #E9F3F0;
    font-size: 0.85rem;
    color: #6B8793;
}

.wizard-resume-link a {
    color: var(--accent);
    font-weight: 600;
}

.wizard-resume-box {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
}

/* display:flex above would otherwise defeat the hidden attribute */
.wizard-resume-box[hidden] {
    display: none;
}

/* Reference banner (step 2) */
.wizard-ref-banner {
    background: var(--tint-peach);
    border: 2px dashed var(--primary);
    border-radius: 16px;
    padding: 14px 18px;
    text-align: center;
    margin-bottom: 16px;
}

.wizard-ref-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--primary-deep);
    font-weight: 700;
}

.wizard-ref-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 6px 0;
}

.wizard-ref-row strong {
    font-family: var(--font-display);
    font-size: 1.8rem;
    color: var(--accent);
    letter-spacing: 2px;
}

.wizard-ref-banner p {
    font-size: 0.85rem;
    color: #8A6A45;
    margin: 0;
}

.wizard-understand-check {
    margin-top: 25px;
    background: #F4FAF8;
    border-radius: 12px;
    padding: 14px 16px;
}

.wizard-ref-reminder {
    text-align: center;
    color: #6B8793;
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.wizard-ref-reminder strong {
    color: var(--accent);
}

/* Hint line under a step title */
.wizard-step-hint {
    text-align: center;
    color: #6B8793;
    font-size: 0.92rem;
    margin: -10px 0 18px;
}

/* Always-visible "how it works" strip (step 2) */
.wizard-howto {
    list-style: none;
    display: grid;
    gap: 8px;
    background: var(--tint-sky);
    border: 1px solid #CFE3EE;
    border-radius: 14px;
    padding: 12px 14px;
    margin: 0 0 16px;
    font-size: 0.92rem;
    color: #3A5D6C;
}

.wizard-howto li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.wizard-howto li span {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

/* Payment options accordion (step 2) */
.pay-accordion {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
}

.pay-option {
    border: 2px solid #E2EFEA;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* wizard.js hides the options that don't match the donor's country */
.pay-option[hidden] {
    display: none;
}

.pay-option[open] {
    border-color: var(--primary);
    box-shadow: 0 6px 18px rgba(249, 160, 63, 0.12);
}

.pay-option summary {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.pay-option summary::-webkit-details-marker {
    display: none;
}

.pay-option-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--tint-peach);
    color: var(--primary-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.pay-option[id^="pay-paypal"] .pay-option-icon {
    color: #0070BA;
    background: #eaf4fb;
}

#pay-official-us .pay-option-icon,
#pay-official-au .pay-option-icon {
    color: var(--accent);
    background: var(--tint-sky);
}

/* Keep the donate buttons inside the accordion tidy on narrow screens */
.pay-option-body .paypal-btn {
    max-width: 100%;
    font-size: 1.05rem;
    padding: 16px 28px;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
}

/* USA official donation portal — distinct from the PayPal blue button */
.official-btn {
    background: var(--accent);
}

.official-btn:hover {
    background: var(--lagoon);
    box-shadow: 0 6px 20px rgba(15, 122, 141, 0.4);
}

.pay-option-title {
    flex: 1;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.3;
}

.pay-option-title small {
    display: block;
    font-weight: 400;
    color: #6B8793;
    font-size: 0.8rem;
}

.pay-option-region {
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--accent);
    background: var(--tint-sky);
    border-radius: 999px;
    padding: 4px 10px;
}

.pay-chevron {
    color: #9FB3BB;
    transition: transform 0.25s ease;
}

.pay-option[open] .pay-chevron {
    transform: rotate(180deg);
}

.pay-option-body {
    padding: 12px 16px 16px;
    border-top: 1px dashed #E2EFEA;
}

.pay-upi-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 24px;
    align-items: center;
}

.pay-qr {
    text-align: center;
}

.pay-qr img {
    width: 170px;
    height: 170px;
    border-radius: 12px;
    border: 1px solid #E2EFEA;
}

.pay-qr p {
    font-size: 0.85rem;
    color: #5E7B87;
    margin-top: 8px;
}

.pay-upi-copy label {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 8px;
    color: #3A5D6C;
}

.pay-note {
    font-size: 0.87rem;
    color: #5E7B87;
    margin-top: 12px;
    line-height: 1.5;
}

.pay-note strong {
    color: var(--accent);
}

.bank-detail-list {
    border: 1px solid #E8F1EE;
    border-radius: 12px;
    overflow: hidden;
}

.bank-detail-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid #F2F8F6;
    font-size: 0.92rem;
}

.bank-detail-row:last-child {
    border-bottom: none;
}

.bank-detail-row:nth-child(even) {
    background: #FBFDFC;
}

.bank-detail-row .label {
    width: 130px;
    flex-shrink: 0;
    color: #6B8793;
    font-size: 0.82rem;
}

.bank-detail-row .value {
    flex: 1;
    font-weight: 600;
    color: var(--text-dark);
    word-break: break-word;
}

.copy-btn.copy-mini {
    padding: 6px 10px;
    font-size: 0.8rem;
    border-radius: 6px;
}

.wizard-help-line {
    text-align: center;
    font-size: 0.88rem;
    color: #5E7B87;
    margin-bottom: 10px;
}

.wizard-help-line i {
    color: #25D366;
}

.wizard-help-line a {
    color: var(--accent);
    font-weight: 600;
}

/* Step-2 footer: sticks to the bottom of the screen while the payment
   options are scrolled, so "what do I do next" is never out of sight */
.wizard-sticky-footer {
    position: sticky;
    bottom: 0;
    background: #fff;
    margin: 10px -28px -28px;
    padding: 6px 28px 18px;
    border-radius: 0 0 20px 20px;
    box-shadow: 0 -10px 18px -12px rgba(0, 0, 0, 0.18);
}

.wizard-sticky-footer .wizard-understand-check {
    margin-top: 8px;
}

.wizard-sticky-footer .wizard-nav {
    margin-top: 14px;
}

/* Proof (step 3) */
.proof-toggle {
    display: flex;
    gap: 12px;
    margin: 20px 0;
}

.proof-toggle-btn {
    flex: 1;
    padding: 14px;
    border: 2px solid #E2EFEA;
    border-radius: 12px;
    background: #fff;
    font-family: var(--font-body);
    font-weight: 600;
    color: #5E7B87;
    cursor: pointer;
    transition: all 0.2s ease;
}

.proof-toggle-btn.active {
    border-color: var(--primary);
    color: var(--primary-deep);
    background: var(--tint-peach);
}

.wizard-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    border: 2px dashed #B3C6CC;
    border-radius: 16px;
    padding: 35px 20px;
    cursor: pointer;
    color: #6B8793;
    transition: all 0.2s ease;
    text-align: center;
}

.wizard-dropzone:hover {
    border-color: var(--primary);
    color: var(--primary-deep);
    background: #FFF9F0;
}

.wizard-dropzone i {
    font-size: 2rem;
}

#wizard-file-preview[hidden] {
    display: none;
}

#wizard-file-preview {
    display: block;
    max-width: 240px;
    max-height: 320px;
    margin: 15px auto 0;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}

.turnstile-slot {
    margin-top: 15px;
    display: flex;
    justify-content: center;
}

/* Turnstile only injects its widget when a site key is configured — until
   then the slot is empty and its margin was silently padding the gap above
   the Continue button. */
.turnstile-slot:empty {
    margin-top: 0;
}

/* Result (step 4) — a shared header, then two stacked cards: "what happens
   next", then "spread the word". Deliberately one column at every width: side
   by side, the two cards ran to different heights and read as competing for
   attention instead of as one thing after another. Capped narrow so the lines
   stay readable rather than spanning the full wizard; the share buttons sit
   two-up inside that. */
.wizard-result {
    padding: 26px 2px 8px;
}

.wizard-result-head {
    text-align: center;
    margin-bottom: 22px;
}

.wizard-result-head i {
    display: block;
    font-size: 3rem;
    margin-bottom: 12px;
}

.wizard-result.success .wizard-result-head i {
    color: var(--accent-pink);
}

.wizard-result.notice .wizard-result-head i {
    color: var(--accent);
}

.wizard-result-head h2 {
    font-family: var(--font-display);
    color: var(--accent);
    margin: 0;
}

.wizard-result-cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 560px;
    margin: 0 auto;
}

.wizard-result-col {
    border-radius: 18px;
    padding: 20px 22px;
    text-align: left;
}

.wizard-confirm-card {
    background: var(--tint-aqua);
}

.wizard-result-col h3 {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--accent);
    margin: 0 0 10px;
}

.wizard-col-lead {
    margin: 0 0 14px;
    font-size: 0.95rem;
    line-height: 1.55;
    color: #40616D;
}

.wizard-col-lead strong {
    color: var(--text-dark);
}

.wizard-result-ref {
    margin: 0 0 6px;
    font-size: 0.9rem;
    color: #40616D;
}

.wizard-result-ref strong {
    color: var(--accent);
    letter-spacing: 0.5px;
}

.wizard-track-line {
    margin: 0;
    font-size: 0.84rem;
    color: #5E7B87;
}

/* The share card is a poster, not a form: mascot, headline, one line, buttons.
   The note itself never appears here — each button carries it into the app the
   donor sends from, where they can read and edit it. */
.wizard-share-card {
    background: var(--tint-peach);
    text-align: center;
}

/* Block, not flex: this heading carries no icon and runs to two lines, so it
   needs to wrap and centre as ordinary text. */
.wizard-share-card h3 {
    display: block;
    max-width: 360px;
    font-size: 1.22rem;
    line-height: 1.3;
    color: var(--primary-deep);
    margin: 0 auto 8px;
}

.share-mascot {
    display: block;
    width: 116px;
    height: auto;
    margin: 2px auto 10px;
    filter: drop-shadow(0 8px 16px rgba(22, 62, 79, 0.16));
    animation: float 5s ease-in-out infinite;
}

.wizard-share-card .wizard-col-lead {
    max-width: 340px;
    margin: 0 auto 16px;
}

/* All four share targets sit in a single row at every width. */
.share-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 8px;
    border: none;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 700;
    color: #fff;
    background: var(--accent);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.15s ease;
}

.share-btn i,
.share-btn svg {
    flex-shrink: 0;
}

.share-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.07);
}

.share-copy {
    background: var(--accent);
}

.share-whatsapp {
    background: #25D366;
}

.share-facebook {
    background: #1877F2;
}

.share-x {
    background: #000000;
}

/* The X button carries no text label, so its mark is sized up to sit level
   with the labelled pills beside it. */
.share-x svg {
    width: 17px;
    height: 17px;
}

.share-btn.copied {
    background: var(--leaf);
}

/* Icon-only below 640px, where four labelled pills will not fit. The tick
   stands in for the "Copied!" text the hidden label would have shown. */
@media (max-width: 640px) {
    .share-btn span {
        display: none;
    }

    .share-btn {
        padding: 13px 8px;
        font-size: 0.95rem;
    }

    .share-copy.copied i::before {
        content: '\f00c';
    }
}

/* Soft, in-flow reassurance under the step-2 how-to. Quiet by design —
   a single muted line, not the old shouting banner. */
.wizard-howto-after {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: -6px 2px 16px;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #5E7B87;
}

.wizard-howto-after i {
    color: var(--accent);
    margin-top: 2px;
    flex-shrink: 0;
}

/* Reassurance line above the step-3 submit button. */
.wizard-reassure {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    background: #F4FAF8;
    border-radius: 12px;
    padding: 12px 15px;
    margin: 4px 0 16px;
    font-size: 0.88rem;
    line-height: 1.5;
    color: #40616D;
}

.wizard-reassure i {
    color: var(--leaf);
    margin-top: 2px;
    flex-shrink: 0;
}

/* Step-4 "you've done your part, now it's up to us" checklist, inside the
   confirmation card. */
.wizard-handoff {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: grid;
    gap: 10px;
}

.wizard-handoff li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.88rem;
    line-height: 1.45;
    color: #40616D;
}

.wizard-handoff li i {
    font-size: 1rem;
    margin: 2px 0 0;
    color: var(--leaf);
    flex-shrink: 0;
}

/* Mobile */
@media (max-width: 640px) {
    .donation-wizard {
        padding: 24px 18px;
        border-radius: 18px;
    }

    .wizard-grid {
        grid-template-columns: 1fr;
    }

    /* Four countries would be too cramped in a row on a phone. */
    .country-picker {
        grid-template-columns: repeat(2, 1fr);
    }

    .wizard-result-col {
        padding: 18px;
    }

    .wizard-step-line {
        flex-basis: 24px;
    }

    .wizard-step-dot small {
        display: none;
    }

    .wizard-nav {
        flex-direction: column-reverse;
    }

    .wizard-nav .btn {
        width: 100%;
    }

    .proof-toggle {
        flex-direction: column;
    }

    .wizard-sticky-footer {
        margin: 10px -18px -24px;
        padding: 6px 18px 16px;
        border-radius: 0 0 18px 18px;
    }

    .pay-upi-grid {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .pay-upi-copy {
        width: 100%;
    }

    .pay-option summary {
        padding: 12px 14px;
        gap: 10px;
    }

    .pay-option-region {
        display: none;
    }

    .bank-detail-row {
        flex-wrap: wrap;
        row-gap: 4px;
    }

    .bank-detail-row .label {
        width: 100%;
    }
}

/* ============================================
   Donation status page (status.html)
   ============================================ */

.status-result {
    margin-top: 30px;
}

.status-card {
    background: var(--tint-aqua);
    border-radius: 16px;
    padding: 28px 24px;
    text-align: center;
}

.status-greeting {
    font-size: 1.05rem;
    margin-bottom: 14px;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 22px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 1.05rem;
}

.status-badge.confirmed {
    background: var(--tint-leaf);
    color: #1E7E50;
}

.status-badge.verifying {
    background: #fff3cd;
    color: #9a6a00;
}

.status-badge.under_review {
    background: #e3f2fd;
    color: var(--accent);
}

.status-badge.awaiting_proof {
    background: var(--tint-peach);
    color: var(--primary-deep);
}

.status-badge.attention {
    background: #fce4ec;
    color: #c2185b;
}

.status-note {
    margin: 16px auto 0;
    max-width: 480px;
    color: #53707C;
}

.status-details {
    margin: 22px auto 0;
    max-width: 420px;
    background: #fff;
    border-radius: 12px;
    padding: 8px 18px;
    text-align: left;
}

.status-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 9px 0;
    border-bottom: 1px dashed #E2EFEA;
    font-size: 0.92rem;
}

.status-detail-row:last-child {
    border-bottom: none;
}

.status-detail-row span {
    color: #6B8793;
}

.status-detail-row strong {
    text-align: right;
}

.status-action {
    margin-top: 22px;
}

@media (max-width: 640px) {
    .status-detail-row {
        flex-direction: column;
        gap: 2px;
    }

    .status-detail-row strong {
        text-align: left;
    }
}