/* ============================================================
   EverGrace — Mobile Pass (Round 21 — CLEAN REWRITE)
   ============================================================
   Single coherent block of mobile-only CSS. Consolidates the
   prior Rounds 1-20 of layered overrides into one tidy file
   that is much easier to maintain.

   Loaded site-wide via inc/links.php.
   Desktop (>=992px) is NOT affected by anything in this file
   except for two clearly-marked footer-spacing rules.

   Table of contents:
     1.  Typography scale
     2.  Header (single-row: hamburger | logo | login icon)
     3.  Section + container padding
     4.  Buttons + form inputs
     5.  Hero subtitle safety net
     6.  V/S/T trio (white pill, tight)
     7.  Fundraisers section color rhythm
         (dark green section with sand band wrapping FIRST
          card only, per Mark's spec)
     8.  Filter chips
     9.  Fundraiser cards (light green body, drop shadow)
    10.  How It Works steps
    11.  FAQ
    12.  Get Started Today CTA
    13.  Footer
    14.  Misc legibility (modal, dropdowns, wizard)

   Color palette:
     #C1D0D1  Dark green   — Fundraisers section background
     #D8E2E3  Light green  — Fundraiser card body (style.css default)
     #FDF3E7  Sand         — band around first card; hero/FAQ bg
     #2f4f4f  Dark teal    — text & buttons
   ============================================================ */


/* ================ 1. Typography ================ */
@media (max-width: 991px) {
    .Top_heading {
        font-size: clamp(26px, 5.2vw, 42px) !important;
        line-height: 1.2;
    }
    h1.signup_h4,
    .signup_h4 {
        font-size: clamp(22px, 4.6vw, 30px);
        line-height: 1.2;
    }
    .section-title    { font-size: clamp(24px, 5.4vw, 38px) !important; }
    .section-subtitle { font-size: clamp(15px, 3.6vw, 19px) !important; }
}
@media (max-width: 768px) {
    h1 { font-size: clamp(22px, 6vw, 32px); line-height: 1.2; }
    h2 { font-size: clamp(20px, 5vw, 28px); line-height: 1.25; }
    h3, h4 { font-size: clamp(17px, 4vw, 22px); line-height: 1.3; }
    p, li, label, .signin_p { font-size: clamp(14px, 3.6vw, 16px); line-height: 1.5; }
}
/* Force neutral grey on subtitle paragraphs site-wide (kill any
   inherited green that crept in from other rules). */
.top_heading_section .top_paragraph,
.fundraisers_spacing .top_paragraph,
.top_heading_section .top_paragraph p,
.top_paragraph {
    color: #353535 !important;
}


/* ================ 2. Header ================ */
/* Single-row layout: [☰ hamburger] [EverGrace logo CENTERED] [👤 login icon] */
@media (max-width: 768px) {
    header,
    .header_wrapper,
    .navbar {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }
    #main_header {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
    #main_header > .container-xl,
    #main_header > .container-xl > .row {
        align-items: center !important;
    }
    #main_header > .container-xl > .row {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        gap: 8px;
    }
    #main_header > .container-xl > .row > [class*="col-"] {
        flex: 0 0 auto !important;
        max-width: none !important;
        width: auto !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
    #main_header > .container-xl > .row > [class*="col-"]:nth-child(1) {
        flex: 1 1 auto !important;
        text-align: center !important;
    }
    #main_header > .container-xl > .row > [class*="col-"]:nth-child(2) {
        order: -1;
        padding-left: 14px !important;
    }
    #main_header > .container-xl > .row > [class*="col-"]:nth-child(3) {
        text-align: right;
        padding-right: 22px !important;
    }

    /* Logo */
    #main_header .main-logo,
    .navbar-brand img,
    .logo img,
    header img.logo,
    .header_logo img {
        max-height: 32px !important;
        width: auto !important;
        height: auto !important;
        display: inline-block;
    }
    #main_header .logo_wrapper { margin: 0 !important; line-height: 0; }
    #main_header .logo_wrapper a { display: inline-block; line-height: 0; }

    /* Hamburger: tight, no border */
    .navbar-toggler,
    #main_header .navbar-toggler {
        padding: 4px 9px !important;
        border: none !important;
        background: transparent !important;
        font-size: 22px !important;
        line-height: 1 !important;
        box-shadow: none !important;
        color: #2f4f4f !important;
    }
    .navbar-toggler:focus { box-shadow: none !important; outline: none !important; }

    /* Login: icon only, no border */
    .login-btn,
    a.login-btn,
    .login-button {
        padding: 4px 8px !important;
        font-size: 0 !important;
        font-weight: 600 !important;
        border: none !important;
        background: transparent !important;
        border-radius: 0 !important;
        line-height: 1 !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        color: #2f4f4f !important;
    }
    .login-btn i,
    .login-button i { font-size: 22px !important; margin: 0 !important; }
    .login-btn.dropdown-toggle::after { display: none !important; }
}


/* ================ 3. Section + container padding ================ */
@media (max-width: 768px) {
    section,
    .container-xl,
    .container-fluid {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    section {
        padding-top: 18px !important;
        padding-bottom: 18px !important;
    }
    .top_heading_section {
        padding-top: 18px !important;
        padding-bottom: 14px !important;
    }
    .padding_top { padding-top: 28px !important; }
}


/* ================ 4. Buttons + form inputs ================ */
@media (max-width: 768px) {
    .donate-share-btn,
    .signup_btn,
    .btn-primary,
    .btn-outline-primary,
    .btn-success,
    .btn-warning {
        font-size: 15px !important;
        padding: 11px 18px !important;
        border-radius: 10px !important;
    }
    .fundraiser_profile_sticky_sidebar a.donate-share-btn,
    .fundraiser_sticky_sidebar a.donate-share-btn {
        width: 100% !important;
        text-align: center;
    }
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    select,
    textarea,
    .form-control {
        font-size: 16px !important;   /* 16px prevents iOS Safari zoom on focus */
        padding: 10px 14px !important;
        border-radius: 10px !important;
    }
}


/* ================ 5. Hero subtitle — safety net ================ */
/* The banner crop and hero title font sizes live in index.php's inline
   <style> block because they're homepage-specific. The rules below are
   defensive: if any old markup still injects <br> or <span class="mobile-space">
   between the two subtitle sentences, hide them so the paragraph flows as one. */
@media (max-width: 768px) {
    .home_banner_section + .top_heading_section .top_paragraph br,
    .home_banner_section + .top_heading_section .top_paragraph .mobile-space,
    .top_heading_section .top_paragraph br,
    .top_heading_section .top_paragraph .mobile-space {
        display: none !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    /* Title centered, subtitle LEFT-aligned (Mark's spec) */
    .home_banner_section + .top_heading_section .Top_heading,
    .home_banner_section + .top_heading_section .Top_heading.ms-left-text {
        text-align: center !important;
    }
    .home_banner_section + .top_heading_section .top_paragraph,
    .home_banner_section + .top_heading_section .top_paragraph.ms-left-text {
        text-align: center !important;
        margin-top: 10px !important;
        margin-bottom: 8px !important;
    }
}


/* ================ 6. V/S/T trio (white pill) ================ */
/* Tight, edge-to-edge connected row. Icon + label stacked, equal
   vertical padding so spacing above the icon matches spacing below
   the label. The Secure icon's white background was flood-filled to
   transparent in the source PNG, so the icons sit clean on the pill. */
@media (max-width: 768px) {
    .Crowd_funding_three_grid_section {
        padding: 4px 0 4px 0 !important;
    }
    .Crowd_funding_three_grid_section .container-xl {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
    }
    .Crowd_funding_three_grid_section .row {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        margin: 0 !important;
        background: #ffffff !important;
        border-radius: 0 !important;
        box-shadow: 0 2px 8px rgba(95, 143, 132, 0.10);
        overflow: hidden;
    }
    .Crowd_funding_three_grid_section [class*="col-"] {
        flex: 1 1 33.3333% !important;
        max-width: 33.3333% !important;
        padding: 0 !important;
        margin: 0 !important;
        border-right: 1px solid #ece6dc;
    }
    .Crowd_funding_three_grid_section [class*="col-"]:last-child {
        border-right: none;
    }
    /* Wrapper is a flex column that vertically AND horizontally centers
       the icon+label as a single unit. align-items: center handles the
       cross axis (horizontal); justify-content: center handles the main
       axis (vertical).
       Round 25 fix: height: 100% so the wrapper fills the column box
       (cols stretch to row's tallest child). Without this the wrapper
       stayed at natural content height, sat at the TOP of the column,
       and the icon visually floated above the label. With height: 100%
       plus justify-content: center, the icon+label pair becomes a true
       centered unit inside the cell. */
    .Crowd_funding_three_grid_section .grid-item-wrapper {
        padding: 4px 4px !important;         /* Round 25: leaner pill (was 12px) */
        text-align: center !important;
        cursor: pointer;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        min-height: 56px !important;         /* Round 25: was 88px */
        height: 100% !important;
        box-shadow: none !important;
        line-height: 1 !important;
        display: flex !important;
        flex-direction: column;
        align-items: center;                 /* horizontal centering */
        justify-content: center;             /* vertical centering */
        gap: 4px;                            /* Round 25: was 5px */
        width: 100%;
        box-sizing: border-box;
    }
    .Crowd_funding_three_grid_section .grid-item-wrapper img {
        height: 32px !important;
        width: auto !important;
        max-width: 44px !important;
        min-width: 22px !important;          /* defensive: prevent collapse */
        margin: 0 auto !important;           /* center horizontally */
        padding: 0 !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        background: transparent !important;
        object-fit: contain;
        flex: 0 0 auto;                      /* don't grow/shrink */
    }
    .Crowd_funding_three_grid_section .grid-item-wrapper h3 {
        font-size: 12.5px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        margin: 0 auto !important;           /* center horizontally */
        padding: 0 !important;
        color: #2f4f4f;
        text-align: center !important;
        width: auto;
        flex: 0 0 auto;                      /* don't grow/shrink */
    }
    /* Hidden by default; tap-to-reveal adds .eg-trio-open */
    .Crowd_funding_three_grid_section .grid-item-wrapper p { display: none; }
    .Crowd_funding_three_grid_section .grid-item-wrapper.eg-trio-open {
        background: #f7f3eb !important;
    }
    .Crowd_funding_three_grid_section .grid-item-wrapper.eg-trio-open p {
        display: block;
        font-size: 11.5px !important;
        line-height: 1.45 !important;
        margin: 6px 0 0 0 !important;
        color: #555;
        text-align: center;
        padding: 0 4px;
    }
}


/* ================ 7. Fundraisers section — color rhythm ================ */
/* Mark's spec (confirmed in the locked-in mockup):
   - The "Fundraisers" heading section + the fund_raisers_section
     (filter chips + cards) both get DARK GREEN (#C1D0D1) background,
     edge-to-edge on mobile.
   - The FIRST card only gets a SAND (#FDF3E7) band that wraps the
     SIDES of the card from roughly Sam's hairline (28% down the
     card) to just above the View button (15% from the bottom). The
     band is painted by a ::before pseudo on the first card's column
     and extends to full viewport width so it shows on both sides.
   - Cards 2..N stay fully on dark green. */
@media (max-width: 768px) {

    /* Heading section ("Fundraisers" + Customize subtitle).
       TIGHTER rhythm per Mark: top-of-green sits closer to title, title
       sits closer to subtitle, subtitle sits closer to filter chips.
       Subtitle hidden by default on mobile — caret next to title toggles it. */
    .top_heading_section.fundraisers_spacing {
        background-color: #C1D0D1 !important;
        padding-top: 20px !important;        /* breathing room above title */
        padding-bottom: 12px !important;     /* breathing room below title */
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: 0 !important;
    }
    .top_heading_section.fundraisers_spacing .Top_heading {
        margin: 0 !important;                /* tight to subtitle (was 14px) */
    }
    .top_heading_section.fundraisers_spacing .top_paragraph {
        color: #353535 !important;
        margin: 0 !important;
        position: relative;
    }
    /* Caret button — mobile only. Inline with the title text, small, tappable. */
    .top_heading_section.fundraisers_spacing .eg-subtitle-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        padding: 4px 6px;
        margin-left: 6px;
        cursor: pointer;
        color: inherit;
        vertical-align: middle;
        line-height: 1;
    }
    .top_heading_section.fundraisers_spacing .eg-caret {
        display: inline-block;
        font-size: 0.7em;
        line-height: 1;
        transition: transform 0.18s ease;
    }
    .top_heading_section.fundraisers_spacing.eg-subtitle-open .eg-caret {
        transform: rotate(180deg);
    }
    /* Subtitle hidden by default on mobile; shown when section has .eg-subtitle-open */
    .top_heading_section.fundraisers_spacing .eg-fundraisers-subtitle {
        display: none !important;
    }
    .top_heading_section.fundraisers_spacing.eg-subtitle-open .eg-fundraisers-subtitle {
        display: block !important;
        margin: 4px 0 0 0 !important;        /* tight under title */
    }

    /* Fund-raisers section (filters + cards) — SOLID dark green */
    .fund_raisers_section.fundraiser_bg,
    .fundraiser_bg,
    .fund_raisers_section {
        background: #C1D0D1 !important;
        background-color: #C1D0D1 !important;
        background-image: none !important;
        padding-top: 4px !important;         /* chips up close (was 14px) */
        padding-bottom: 14px !important;     /* trim bottom (was 26px) */
    }

    /* SAND BAND around the FIRST CARD ONLY.
       The first card is the first .col- child of .fund_raisers_grid .row.
       Establish a stacking context on it, then a ::before pseudo paints
       sand edge-to-edge in the viewport behind the card body. */
    .fund_raisers_grid > .row > [class*="col-"]:first-child {
        position: relative;
        isolation: isolate;
    }
    .fund_raisers_grid > .row > [class*="col-"]:first-child::before {
        content: '';
        position: absolute;
        top: 22%;        /* Top of Sam's photo (was 28% / hairline — moved up) */
        bottom: 15%;     /* Just above the View button */
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        background: #FDF3E7;
        z-index: -1;
        pointer-events: none;
    }

    /* Spacing between fund-raisers section and How It Works.
       Give the next section a SAND background so the gap below the dark
       green doesn't show body-white. Mark wanted that thin transition
       strip to be sand colored, preserving the breathing room. */
    .fund_raisers_section + .top_heading_section {
        background-color: #FDF3E7 !important;
        padding-top: 28px !important;
        margin-top: 0 !important;            /* was 4px — that was the white gap */
    }
    /* Carry sand through the steps too so there's no white showing
       between any of the How It Works blocks. */
    .how_it_works_steps_section {
        background-color: #FDF3E7 !important;
    }
}


/* ================ 8. Filter chips ================ */
@media (max-width: 768px) {
    .search_filters {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 6px !important;                  /* tighter (was 8px) */
        padding: 2px 0 !important;            /* tighter (was 8px) */
        margin-top: 0 !important;             /* tighter (was 4px) */
    }
    .reset_filters,
    .search_filters > a,
    .search_filters > .area_wrapper,
    .search_filters > div {
        flex: 0 0 auto !important;
    }
    .fund_raise_filter {
        background: #ffffff !important;
        border: 1px solid #e3ddd1 !important;
        border-radius: 999px !important;
        padding: 8px 14px !important;
        font-size: 13px !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
    }
    .fund_raise_filter span { font-size: 13px !important; }
    .fund_raise_filter i { font-size: 10px !important; }
    .reset_filters { font-size: 13px !important; }
}


/* ================ 9. Fundraiser cards ================ */
/* Card body stays light green #D8E2E3 (style.css default). Soft drop
   shadow so the card pops 3D against the dark green section. */
@media (max-width: 768px) {
    .fund_raisers_grid_item {
        background-color: #D8E2E3 !important;
        background-image: none !important;
        margin: 0 0 14px !important;          /* tighter card spacing (was 24px) */
        padding: 16px !important;
        border-radius: 18px !important;
        border: none !important;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18) !important;
    }
    .fund_raisers_grid_item .grid_image_wrapper {
        background: transparent !important;
    }
    .fund_raisers_grid_item .grid_image_wrapper img {
        height: clamp(180px, 50vw, 260px) !important;
        object-fit: cover !important;
        border-radius: 14px !important;
    }
    .fund_raisers_grid_item_title,
    .fund_raisers_grid_item_heading {
        font-size: 17px !important;
        line-height: 1.3 !important;
    }
    .fund_raisers_grid_item_donate_btn {
        font-size: 14px !important;
        padding: 9px 18px !important;
    }
}


/* ================ 10. How It Works steps ================ */
@media (max-width: 768px) {
    .how_it_works_steps_section {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        margin-bottom: 0 !important;
    }
    .how_it_works_steps_section:last-of-type { padding-bottom: 14px !important; }
    .last_View_more_link_wrapper {
        padding: 0 !important;
        margin: 0 !important;
        min-height: 0 !important;
    }
    /* Main "How It Works" section title */
    .fund_raisers_section + .top_heading_section .Top_heading {
        font-size: 30px !important;
        font-weight: 800 !important;
        line-height: 1.15 !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
    }
    /* Each step title (Step 1 - Upload, etc.) — subhead size */
    .how_it_works_steps_section .step_left_content h1 {
        font-size: 17px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        margin: 0 0 4px 0 !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        color: #2f4f4f !important;
    }
    .how_it_works_steps_section .step_left_content p {
        font-size: 14px !important;
        line-height: 1.5 !important;
        margin: 0 !important;
    }
}


/* ================ 11. FAQ ================ */
/* Desktop and mobile both keep title bigger than the question text. */
.top_heading_section.faq_spacing .Top_heading,
.eg-faq-heading-section .Top_heading,
.helpful-tips-section .Top_heading {
    font-size: 34px !important;
}
.top_heading_section.faq_spacing .top_paragraph,
.eg-faq-heading-section .top_paragraph {
    font-size: 16px !important;
}
@media (max-width: 768px) {
    .top_heading_section.faq_spacing .Top_heading,
    .eg-faq-heading-section .Top_heading,
    .helpful-tips-section .Top_heading {
        font-size: 30px !important;
        font-weight: 800 !important;
        line-height: 1.15 !important;
    }
    .top_heading_section.faq_spacing .top_paragraph,
    .eg-faq-heading-section .top_paragraph {
        font-size: 14px !important;
    }
    .accordion-button,
    .accordion-item button,
    .faq-section .accordion-button,
    .helpful-tips-section .accordion-button,
    .faq-section .accordion-button h5,
    .accordion-button h5 {
        font-size: 15px !important;
        line-height: 1.35 !important;
        padding: 10px 12px !important;
    }
    .accordion-body,
    .faq-section .accordion-body {
        font-size: 14px !important;
        padding: 8px 12px 12px !important;
        line-height: 1.45 !important;
    }
    .top_heading_section.faq_spacing { padding-top: 22px !important; padding-bottom: 18px !important; }
    .faq-section { padding-top: 6px !important; padding-bottom: 22px !important; }
    .helpful-tips-section { padding-top: 16px !important; padding-bottom: 16px !important; }
    .helpful-tips-section .top_heading_section { padding-bottom: 8px !important; }
    .helpful-tips-section .accordion-item { margin-bottom: 8px !important; }
}


/* ================ 12. Get Started Today CTA ================ */
@media (max-width: 768px) {
    /* Tighten the dark-green band on mobile — less vertical padding around
       the section, less space between heading and buttons. Desktop is
       unaffected (this whole block is inside the ≤768px media query). */
    .footer_cta_section {
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }
    .footer_cta_section .container-xl,
    .footer_cta_section_content {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    .footer_cta_section_content {
        text-align: center;
        gap: 10px !important;   /* tighten internal flex gap (default was 20px) */
    }
    .footer_cta_section_content h1 {
        font-size: clamp(22px, 6vw, 32px) !important;
        margin: 0 0 8px 0 !important;   /* heading sits closer to buttons */
    }
    /* Hide body paragraph on mobile (cleaner CTA) */
    .footer_cta_section .top_paragraph,
    .footer_cta_section_content p {
        display: none !important;
    }
    .footer_cta_section_btn_wrapper {
        display: flex;
        justify-content: center;
        gap: 12px !important;
        margin: 0 !important;
        flex-wrap: wrap;
    }
    .footer_cta_section_btn_wrapper a {
        padding: 11px 30px !important;
        font-size: 15px !important;
    }
}


/* ================ 13. Footer ================ */
@media (max-width: 768px) {
    footer,
    .footer,
    footer .container {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
    footer h5, footer h4 { font-size: 16px !important; margin-bottom: 8px !important; }
    footer a, footer li { font-size: 14px !important; line-height: 1.6 !important; }

    /* Footer logo on mobile — smaller */
    footer .footer_logo img,
    footer img.footer-logo,
    .footer img[src*="logo"],
    footer img[src*="logo"] {
        max-height: 26px !important;
        width: auto !important;
        height: auto !important;
    }

    /* Spacing between Get-Started band and footer logo */
    #Main_footer_one { padding-top: 16px !important; }
    #Main_footer_one .top-section { padding-top: 10px !important; }
    #Main_footer_one .footer_logo_wrapper {
        margin-top: 4px !important;
        margin-bottom: 10px !important;
        padding-top: 0 !important;
    }
    #Main_footer_one .footer-main-logo { margin-top: 0 !important; }
}

/* Footer copyright spacing — applies on DESKTOP AND MOBILE
   (intentional carry-over from prior rounds). */
#Main_footer_one .top-section { padding-bottom: 6px !important; }
#Main_footer_one .bottom-section {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    margin-top: 0 !important;
}
#Main_footer_one .bottom-section .copy_right_text,
#Main_footer_one .bottom-section .footer_bottom_menu_items {
    margin: 0 !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}
@media (max-width: 768px) {
    #Main_footer_one .top-section { padding-bottom: 4px !important; }
    #Main_footer_one .bottom-section {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }
    #Main_footer_one .bottom-section .copy_right_text {
        font-size: 12px !important;
        margin: 0 !important;
    }
}


/* ================ 14. Misc legibility ================ */
@media (max-width: 768px) {
    body { overflow-x: hidden; }
    img, video, svg { max-width: 100%; height: auto; }
    table { font-size: 13px; }

    /* Profile dropdown */
    .dropdown-menu { font-size: 14px !important; }
    .dropdown-item { padding: 8px 14px !important; }

    /* Donee / My Fundraisers wizard */
    .donee_section {
        padding: 14px !important;
        border-radius: 16px !important;
    }
    .sign_in_button_wrapper a,
    .step_buttons {
        padding: 10px 18px !important;
        font-size: 14px !important;
    }

    /* Donations modal */
    .eg-modal-card {
        max-width: 95vw !important;
        max-height: 88vh !important;
        border-radius: 16px !important;
    }
    .eg-modal-header { padding: 16px 18px 4px !important; }
    .eg-modal-title  { font-size: 19px !important; }
    .eg-modal-tabs   { padding: 4px 18px 10px !important; }
    .eg-modal-body   { padding: 6px 18px 16px !important; }
    .eg-tab-btn      { padding: 5px 14px !important; font-size: 14px !important; }
}
@media (max-width: 991px) {
    /* Individual Fundraiser page sticky sidebar */
    .fundraiser_profile_sticky_sidebar,
    .fundraiser_sticky_sidebar {
        margin-top: 18px;
        padding: 18px !important;
        border-radius: 18px !important;
    }
    .goal_5000        { font-size: clamp(26px, 7vw, 36px) !important; }
    .see_all_top_btn a { font-size: 13px !important; padding: 8px 14px !important; }
}

/* ================ 15. How It Works mobile slider (Swiper) ================
   Every selector in this block is prefixed with .hiw-slider so it CANNOT
   leak into the banner, fundraiser cards, FAQ, footer, or any other
   section. The desktop bypass at the bottom of this block neutralizes
   Swiper's default flex layout so >768px renders identically to before. */
@media (max-width: 768px) {
    .hiw-slider {
        padding: 8px 0 24px;
        overflow: hidden;
    }
    .hiw-slider .swiper-slide {
        height: auto;
        display: flex;
        align-items: stretch;
    }
    .hiw-slider .swiper-slide > .how_it_works_steps_section {
        width: 100%;
        margin: 0 !important;
        padding: 0 12px;
    }
    .hiw-slider .swiper-pagination {
        position: relative;
        margin-top: 14px;
        text-align: center;
    }
    .hiw-slider .swiper-pagination-bullet {
        background: #284B63;
        opacity: 0.35;
        width: 9px;
        height: 9px;
        margin: 0 5px !important;
    }
    .hiw-slider .swiper-pagination-bullet-active {
        opacity: 1;
    }
    /* Make each mobile slider card a single vertical column.
       The original section HTML is unchanged — these rules only re-arrange
       things INSIDE .hiw-slider on mobile. Scoped to .hiw-slider — cannot
       affect any other section. */
    .hiw-slider .step_right_side_image {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px;
    }
    .hiw-slider .step_right_side_image > .col-md-3 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding: 0 !important;
    }
    /* Hide the decorative SVG stripe + finish-line image inside slider cards. */
    .hiw-slider .step_right_side_image > .right_side_image,
    .hiw-slider .step_right_side_image > .left_side_image,
    .hiw-slider .step_right_side_image > .last_step_image {
        display: none !important;
    }
    /* Center the step text and image inside slider cards. */
    .hiw-slider .step_left_content {
        text-align: center;
    }
    .hiw-slider .step_left_content h1 {
        margin: 0 0 6px;
    }
    .hiw-slider .step_left_content p {
        margin: 0;
    }
    .hiw-slider .step_right_side_image img {
        display: block;
        margin: 0 auto;
        max-width: 100%;
        height: auto;
    }
}
@media (min-width: 769px) {
    /* Desktop bypass — keep the 5 steps stacked exactly as before. */
    .hiw-slider.swiper { overflow: visible !important; }
    .hiw-slider .swiper-wrapper {
        display: block !important;
        transform: none !important;
    }
    .hiw-slider .swiper-slide {
        width: auto !important;
        flex-shrink: 1 !important;
    }
    .hiw-slider .swiper-pagination { display: none !important; }
}

/* ================ 16. Hide Fundraisers caret on desktop ================
   The "Customize the fundraisers..." caret/toggle button is rendered in
   index.php on every viewport, but its existing styles only apply on
   mobile (≤768px). On desktop the button was visible with the default
   ▾ glyph. This rule hides it only on desktop — mobile behavior is
   unchanged. Scoped tightly to .eg-subtitle-toggle inside the Fundraisers
   heading; cannot affect any other section. */
@media (min-width: 769px) {
    .top_heading_section.fundraisers_spacing .eg-subtitle-toggle {
        display: none !important;
    }
}