/* ============================================================
   FINANCIAL INCLUSION — FinancialConclusion.cshtml only
   Prefix: fi-

   One vertical scale throughout, matching the Cards and segment pages:
   40px between sections, 24px from a heading to its content, 16px between
   cards in a row.

   The product cards restate the Accounts card design with literal values rather
   than linking accounts.css: that file carries a global reset (*, body, h1-h6,
   img) and redefines :root tokens the globally loaded sheets also define, so
   loading it here would repaint the header and footer. Values mirror
   .accounts-card* — 1px #CBCBCB border, 24px radius, image 320 / 280 >=768 /
   227 >=1024, 22px/400 #003B70 title, #F9FAFB toggle at 11px radius with a
   14px/400 label, rows at 300 weight #6A7282 with the 18px teal check.
   ============================================================ */
.fi-page {
    --fi-section-gap: 0px;
    --fi-heading-gap: 16px;   /* one gap under every section title */
    --fi-card-gap: 16px;
    --fi-navy: #003B70;
    --fi-teal: #00C4B3;
    --fi-green: #8BDC64;
    --fi-body: #6A7282;
    display: flex;
    flex-direction: column;
    gap: var(--fi-section-gap);
  /*  padding: 20px 30px;*/
    background: #FFFFFF;
}

.fi-section {
    display: flex;
    flex-direction: column;
    gap: var(--fi-heading-gap);
}

/* ── Hero wash ── */
.fi-hero__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(0, 59, 112, 0.82) 0%, rgba(0, 148, 168, 0.55) 55%, rgba(0, 196, 179, 0.35) 100%);
    opacity: 0.5;
}

[dir="rtl"] .fi-hero__overlay {
    background: linear-gradient(270deg, rgba(0, 59, 112, 0.82) 0%, rgba(0, 148, 168, 0.55) 55%, rgba(0, 196, 179, 0.35) 100%);
}

/* ── Page nav ──
   Same bar as the Accounts / Cards pages, restated here for the same reason as
   the cards below. Row height, font size and weight live in GeneralStyle.css
   under "TAB BAR ROW", shared with .channels-tabs, .loans-tabs and
   .segment-tabs, so those cannot drift even if this positioning/color block does. */
.fi-tabs {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 0 32px;
    background: #FFFFFF;
    position: sticky;
    top: 62px;
    scroll-margin-top: 70px;
    z-index: 50;
    border-bottom: 1px solid #EBEBEB;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .fi-tabs::-webkit-scrollbar {
        display: none;
    }

.fi-tabs__item {
    font-family: 'Co Headline', sans-serif;
    /*text-transform: capitalize;*/
    color: #003B70;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color 0.3s, border-color 0.3s;
}

    .fi-tabs__item:hover {
        color: #00C4B3;
    }

.fi-tabs__item--active {
    color: #00C4B3;
    border-bottom-color: #00C4B3;
}

/* ── Headings and copy ── */
.fi-heading {
    margin: 0;
    font-family: 'Co Headline', sans-serif;
    font-size: 32px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--fi-navy);
}

.fi-text {
    margin: 0;
    font-family: 'Co Headline', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--fi-body);
}

/* The two intro sections sit closer together than the card sections */
.fi-section:has(> .fi-text) {
    gap: 12px;
}

/* ============================================================
   1 — LINK CARDS
   ============================================================ */
/* Three fit the row exactly; a fourth and beyond scroll sideways. No arrows and
   no visible scrollbar, so the strip drag-scrolls with a pointer as well as with
   touch and shift+wheel. */
.fi-link-grid {
    display: flex;
    gap: var(--fi-card-gap);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .fi-link-grid::-webkit-scrollbar {
        display: none;
    }

    /* Mid-drag: suppress the snap, the text selection and any hover feedback, so a
       drag never leaves a card looking half-pressed or a paragraph highlighted. */
    .fi-link-grid.is-dragging {
        scroll-snap-type: none;
        scroll-behavior: auto;
        cursor: grabbing;
        user-select: none;
    }

        .fi-link-grid.is-dragging * {
            pointer-events: none;
        }

.fi-link-card {
    /* Three per view; the rest scroll */
    flex: 0 0 calc((100% - (var(--fi-card-gap) * 2)) / 3);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: var(--fi-card-gap);
    min-height: 180px;
    padding: 24px;
    border-radius: 16px;
    background-color: var(--fi-navy);
    background-image: url("/assets/NewFolder/CardsPage.svg");
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: auto 55%;
    color: #FFFFFF;
}

.fi-link-card__title {
    margin: 0;
    font-family: 'Co Headline', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.35;
    color: #FFFFFF;
}

/* margin-top:auto keeps every button on the same baseline when a title wraps */
.fi-link-card__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    margin-top: auto;
    padding: 10px 26px;
    border-radius: 9999px;
    background: var(--fi-green);
    color: #F7FAFA;
    font-family: 'Co Headline', sans-serif;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 300ms ease-in-out, transform 300ms ease-in-out;
}

    .fi-link-card__btn:hover {
        background: #7ACF52;
        color: #F7FAFA;
        transform: translateY(-2px);
    }

/* ============================================================
   2 — PRODUCT CARDS (Accounts design)
   ============================================================ */
.fi-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--fi-card-gap);
    align-items: start;
}

/* A lone card on the last row sits centred rather than stranded left */
    .fi-card-grid > .fi-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        width: calc(50% - 8px);
        margin-inline: auto;
    }

.fi-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    background-color: #FFFFFF;
    border: 1px solid #CBCBCB;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.08);
}

.fi-card__image {
    position: relative;
    width: 100%;
    height: 320px;
    background-color: #F9FAFB;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    overflow: hidden;
}

@media (min-width: 768px) {
    .fi-card__image {
        height: 280px;
    }
}

@media (min-width: 1024px) {
    .fi-card__image {
        height: 227px;
        border-top-left-radius: 23px;
        border-top-right-radius: 23px;
    }
}

.fi-card__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
    margin-top: 10px;
}

@media (min-width: 768px) {
    .fi-card__content {
        padding: 15px;
    }
}

.fi-card__header {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fi-card__title {
    margin: 0;
    font-family: 'Co Headline', sans-serif;
    font-size: 22px;
    font-weight: 400;
    color: var(--fi-navy);
}

.fi-card__details {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fi-card__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px;
    background: #F9FAFB;
    border: none;
    border-radius: 11px;
    cursor: pointer;
    font-family: 'Co Headline', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color: var(--fi-navy);
    text-align: start;
    transition: background-color 300ms ease-in-out;
}

    .fi-card__toggle:hover {
        background-color: #F1F4F7;
    }

    .fi-card__toggle:focus-visible {
        outline: 2px solid var(--fi-teal);
        outline-offset: -2px;
    }

.fi-card__toggle-label {
    flex: 1;
    min-width: 0;
}

.fi-card__toggle-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--fi-navy);
    transition: transform 300ms ease-in-out;
}

.fi-card__toggle[aria-expanded="true"] .fi-card__toggle-icon {
    transform: rotate(180deg);
}

.fi-card__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 0;
    padding: 0 24px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out, padding 0.3s ease-in-out;
}

    .fi-card__list.is-expanded {
        max-height: 1500px;
        opacity: 1;
        padding: 10px;
    }

.fi-card__list-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.fi-card__list-text {
    font-family: 'Co Headline', sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 20px;
    color: var(--fi-body);
}

/* Teal disc with a white tick, drawn the same way as on the Accounts cards */
.fi-card__list-icon {
    position: relative;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 4px;
    background-color: var(--fi-teal);
    border-radius: 50%;
}

    .fi-card__list-icon::after {
        content: '';
        position: absolute;
        top: 5px;
        left: 3px;
        width: 8px;
        height: 5px;
        border: solid #FFFFFF;
        border-width: 0 0 1px 1px;
        transform: rotate(-45deg);
    }

/* Info note under the groups */
.fi-card__note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    margin-top: auto;
    padding: 16px;
    border-radius: 12px;
    background: #EAF2F8;
    font-family: 'Co Headline', sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.5;
    color: var(--fi-body);
}

.fi-card__note-icon {
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 16px;
    color: var(--fi-teal);
}

/* Green pill, sized and centred like the Accounts card button */
.fi-card__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40%;
    margin: auto;
    margin-bottom: 20px;
    padding: 10px 30px;
    border-radius: 9999px;
    background: var(--fi-green);
    color: #F7FAFA;
    font-family: 'Co Headline', sans-serif;
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 300ms ease-in-out, transform 300ms ease-in-out;
}

    .fi-card__btn:hover {
        background: #7ACF52;
        color: #F7FAFA;
        transform: translateY(-2px);
    }

/* ── Carousel: arrows and swiping are mobile only ── */
.fi-carousel__controls {
    display: none;
}

.fi-carousel__nav {
    width: 35px;
    height: 35px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    background: var(--fi-navy);
    color: #FFFFFF;
    cursor: pointer;
}

    .fi-carousel__nav:disabled {
        background: #DDDDDD;
        cursor: not-allowed;
    }

    [dir="rtl"] .fi-carousel__nav i {
        transform: scaleX(-1);
    }

/* ============================================================
   3 — VIDEO CARDS
   ============================================================ */
.fi-video-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--fi-card-gap);
}

.fi-video-card {
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.08);
    transition: transform 300ms ease-in-out;
}

    .fi-video-card:hover {
        transform: translateY(-2px);
    }

.fi-video-card__media {
    height:300px;
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: #EEF3F7;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.fi-video-card__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #FFFFFF;
    color: var(--fi-navy);
    font-size: 18px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    transition: transform 300ms ease-in-out;
}

.fi-video-card:hover .fi-video-card__play {
    transform: translate(-50%, -50%) scale(1.06);
}

.fi-video-card__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 20px 18px;
    background: var(--fi-navy);
}

.fi-video-card__eyebrow {
    font-family: 'Co Headline', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fi-green);
}

.fi-video-card__title {
    font-family: 'Co Headline', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: #FFFFFF;
}

/* ============================================================
   4 — INFO PANEL (Financial Literacy's three pillars) and RESOURCE
   CARD (Educational Hubs & Portals) — same navy shell as Dryv Now's
   .dn-section, restated under the fi- prefix for this family.
   ============================================================ */
.fi-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 30px;
    border-radius: 24px;
    background: var(--fi-navy);
}

.fi-panel__head {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.fi-panel__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    flex-shrink: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.16);
    color: #FFFFFF;
    font-size: 22px;
}

    .fi-panel__icon img {
        width: 28px;
        height: 28px;
        object-fit: contain;
    }

.fi-panel__title {
    margin: 0;
    font-family: 'Co Headline', sans-serif;
    font-size: 28px;
    font-weight: 400;
    line-height: 1.3;
    color: #FFFFFF;
}

.fi-panel__intro {
    margin: 0;
    font-family: 'Co Headline', sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
}

.fi-panel__groups {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.fi-panel__group {
    padding: 20px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.14);
}

.fi-panel__group-title {
    margin: 0 0 16px;
    font-family: 'Co Headline', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.3;
    color: #FFFFFF;
}

.fi-panel__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
}

.fi-panel__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

/* White disc with a white centre, drawn the same way as Dryv Now's .dn-part__bullet */
.fi-panel__bullet {
    position: relative;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
}

    .fi-panel__bullet::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 7px;
        height: 7px;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        background: #FFFFFF;
    }

.fi-panel__text {
    font-family: 'Co Headline', sans-serif;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
}

/* Educational Hubs & Portals — same navy shell, a single resource link
   instead of the three pillars above */
.fi-resource {
    padding: 30px;
    border-radius: 24px;
    background-color: var(--fi-navy);
    background-image: url('/assets/NewFolder/CardsPage.svg');
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 40% 80%;
}

.fi-resource__title {
    margin: 0 0 16px;
    font-family: 'Co Headline', sans-serif;
    font-size: 22px;
    font-weight: 400;
    color: #FFFFFF;
}

/* Free-form body — educationalSubTitle is authored with the link title,
   description and URL together (often as a pasted <a>), same pattern as
   cardTitle above, rather than three separate structured fields */
.fi-resource__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-family: 'Co Headline', sans-serif;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8);
}

    .fi-resource__body a {
        color: var(--fi-green);
        font-weight: 400;
        text-decoration: underline;
        word-break: break-all;
    }

    .fi-resource__body strong,
    .fi-resource__body b {
        color: #FFFFFF;
        font-weight: 400;
    }

/* Core topic cards — bright teal, underlined title + description */
.fi-topic-grid {
    display: flex;
    flex-direction: column;
    gap: var(--fi-card-gap);
}

@media (min-width: 768px) {
    .fi-topic-grid {
        flex-direction: row;
        align-items: stretch;
    }
}

.fi-topic-card {
    flex: 1;
    padding: 24px;
    border-radius: 16px;
    background: var(--fi-teal);
}

.fi-topic-card__title {
    display: inline-block;
    margin: 0 0 12px;
    font-family: 'Co Headline', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #FFFFFF;
    text-decoration: underline;
}

/* cardTitle can be authored as a pasted <a>, so it needs to inherit the
   card's white/underlined look instead of the browser's default blue link */
.fi-topic-card__title a {
    color: inherit;
    font: inherit;
    text-decoration: inherit;
}

.fi-topic-card__desc {
    margin: 0;
    font-family: 'Co Headline', sans-serif;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
}

/* An intro paragraph that stays centered at every width, unlike .fi-text
   which only centers below 768px */
.fi-text--center {
    text-align: center;
}

/* ============================================================
   5 — GALLERY (People With Determination) — image tiles with a small
   play badge in the corner, no caption underneath
   ============================================================ */
.fi-gallery-grid {
    display: flex;
    flex-direction: column;
    gap: var(--fi-card-gap);
}

@media (min-width: 768px) {
    .fi-gallery-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fi-gallery-grid > .fi-gallery-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        width: calc(50% - 8px);
        margin-inline: auto;
    }
}

.fi-gallery-card {
    position: relative;
    display: block;
    border-radius: 12px;
    overflow: hidden;
    background-color: #EEF3F7;
    aspect-ratio: 16 / 10;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-decoration: none;
}

.fi-gallery-card__play {
    position: absolute;
    top: 12px;
    inset-inline-end: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--fi-teal);
    color: #FFFFFF;
    font-size: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

/* ============================================================
   6 — CTA BANNER (Find a branch near you) — same corner artwork
   treatment as .fi-link-card
   ============================================================ */
.fi-cta {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 30px;
    border-radius: 24px;
    background-color: var(--fi-navy);
    background-image: url('/assets/NewFolder/CardsPage.svg');
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: auto 55%;
}

.fi-cta__title,
.fi-cta__text,
.fi-cta__btn {
    position: relative;
    z-index: 1;
}

.fi-cta__title {
    margin: 0;
    font-family: 'Co Headline', sans-serif;
    font-size: 22px;
    font-weight: 400;
    color: #FFFFFF;
}

.fi-cta__text {
    margin: 0;
    max-width: 640px;
    font-family: 'Co Headline', sans-serif;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
}

.fi-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 32px;
    border-radius: 9999px;
    background: var(--fi-green);
    color: #F7FAFA;
    font-family: 'Co Headline', sans-serif;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 300ms ease-in-out, transform 300ms ease-in-out;
}

    .fi-cta__btn:hover {
        background: #7ACF52;
        color: #F7FAFA;
       /* transform: translateY(-2px);*/
    }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991.98px) {
    /* Two per view, the rest still scroll */
    .fi-link-card {
        flex-basis: calc((100% - var(--fi-card-gap)) / 2);
    }
}

@media (max-width: 768px) {
    .fi-cta {
     
        background-position: left bottom;
      
    }
    .fi-cta__btn:hover {
       font-size:13px;
    }
    .fi-page {
        --fi-section-gap: 28px;
        --fi-heading-gap: 16px;
        padding: 28px 16px;
    }

    .fi-tabs {
        gap: 16px;
        padding: 0 16px;
        top: 56px;
    }

    .fi-heading {
        font-size: 24px;
        text-align: center;
    }

    .fi-text {
        text-align: center;
    }

    /* Stacked on mobile, as drawn — nothing scrolls sideways here */
    .fi-link-grid {
        flex-direction: column;
        overflow-x: visible;
    }

        .fi-link-card {
            flex-basis: auto;
        }

    .fi-video-grid {
        grid-template-columns: 1fr;
    }

    .fi-gallery-grid {
        grid-template-columns: 1fr;
    }

    .fi-panel,
    .fi-resource,
    .fi-cta {
        padding: 20px;
        border-radius: 16px;
    }

    .fi-panel__title {
        font-size: 22px;
    }

    .fi-link-card {
        align-items: center;
        text-align: center;
    }

        .fi-link-card__btn {
            align-self: center;
        }

    /* One card per swipe, scrollbar hidden — arrows do the paging */
    .fi-carousel .fi-card-grid[data-fi-carousel-track] {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 100%;
        grid-template-columns: none;
        gap: 15px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 10px;
        scrollbar-width: none;
    }

        .fi-carousel .fi-card-grid[data-fi-carousel-track]::-webkit-scrollbar {
            display: none;
        }

        .fi-carousel .fi-card-grid[data-fi-carousel-track] .fi-card {
            scroll-snap-align: start;
        }

    .fi-card-grid > .fi-card:last-child:nth-child(odd) {
        width: auto;
        margin-inline: 0;
    }

    .fi-carousel__controls {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-top: 16px;
    }
}

/* ============================================================
   APPLY NOW FORM — page-scoped, does not depend on
   accounts-form.css. Same visual as the Accounts/Cards apply
   form, kept as an independent copy so editing one never
   affects the other.
   ============================================================ */
.fi-apply {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px;
    gap: 32px;
    /* Decorative line art pinned to the bottom-right corner.
       background-color is the fallback if the image fails to paint. */
    background-color: #003B70;
    background-image: url("/assets/NewFolder/FormBg.svg");
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: auto;
    scroll-margin-top: 80px;
}

.fi-apply__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
   /* gap: 24px;*/
    width: 100%;
    max-width: 972px;
}

.fi-apply__title {
    font-family: 'Co Headline', sans-serif;
    font-weight: 400;
    font-size: 32px;
    line-height: 120%;
    text-align: center;
    color: #ffffff;
    margin: 0;
}

/* ── Alerts ── */
.fi-apply__alert {
    width: 100%;
    padding: 14px 20px;
    border-radius: 8px;
    font-family: 'Co Headline', sans-serif;
    font-size: 14px;
    text-align: center;
}

.fi-apply__alert--success {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #ffffff;
}

.fi-apply__alert--error {
    background: rgba(220, 53, 69, 0.15);
    border: 1px solid rgba(220, 53, 69, 0.5);
    color: #fff;
}

/* ── Form layout ── */
.fi-apply__form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    margin-top: 20px;
}

.fi-apply__row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 15px;
    width: 100%;
}

.fi-apply__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

/* ── Inputs & selects ── */
.fi-apply__input,
.fi-apply__select {
    box-sizing: border-box;
    width: 100%;
    height: 50px;
    padding: 10px;
    background: #ffffff;
    border: 1px solid #cdcdcd;
    border-radius: 8px;
    font-family: 'Co Headline', sans-serif;
    font-size: 16px;
    color: #333333;
    outline: none;
    transition: border-color 0.2s;
    appearance: none;
    -webkit-appearance: none;
}

.fi-apply__input::placeholder,
.fi-apply__select.placeholder-shown {
    color: #9d9d9d;
}

.fi-apply__select:invalid,
.fi-apply__select:has(option[value=""]:checked),
.fi-apply__select option[value=""] {
    color: #9d9d9d;
}

.fi-apply__select option {
    color: #333333;
}

.fi-apply__input:focus,
.fi-apply__select:focus {
    border-color: #00C4B3;
}

.fi-apply__select-wrap {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fi-apply__select-wrap::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 25px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid #9d9d9d;
    pointer-events: none;
}

[dir='rtl'] .fi-apply__select-wrap::after {
    right: auto;
    left: 16px;
}

.fi-apply__textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 87px;
    padding: 16px;
    background: #ffffff;
    border: 1px solid #cdcdcd;
    border-radius: 8px;
    font-family: 'Co Headline', sans-serif;
    font-size: 12px;
    color: #333333;
    resize: vertical;
    outline: none;
    transition: border-color 0.2s;
}

.fi-apply__textarea::placeholder {
    color: #9d9d9d;
}

.fi-apply__textarea:focus {
    border-color: #00C4B3;
}

.fi-apply__note {
    font-family: 'Co Headline', sans-serif;
    font-size: 13px;
    color: #ffffff;
    text-align: right;
}

.fi-apply__error {
    font-family: 'Co Headline', sans-serif;
    font-size: 11px;
    color: red;
    margin: 0;
}

/* ── Radio groups ── */
.fi-apply__radio-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 40px;
    width: 100%;
}

.fi-apply__radio-label {
    font-family: 'Co Headline', sans-serif;
    font-size: 12px;
    color: #ffffff;
    white-space: nowrap;
}

.fi-apply__radio-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
}

.fi-apply__radio-option {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.fi-apply__radio-option span {
    font-family: 'Co Headline', sans-serif;
    font-size: 12px;
    color: #ffffff;
}

.fi-apply__radio-option input[type='radio'] {
    appearance: none;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    min-width: 14px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.8);
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.fi-apply__radio-option input[type='radio']:checked {
    background: #00C4B3;
    border-color: #00C4B3;
}

/* ── Submit area ── */
.fi-apply__submit-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.fi-apply__submit-btn {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 10px 25px;
    background: #00C4B3;
    border: none;
    border-radius: 100px;
    font-family: 'Co Headline', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    color: #ffffff;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    text-decoration: none;
}

.fi-apply__submit-btn:hover {
    background: #00b0a0;
    transform: translateY(-1px);
    color: #ffffff;
}

.fi-apply__hint {
    font-family: 'Co Headline', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    text-align: center;
    color: #ffffff;
    margin: 0;
}

/* ── reCAPTCHA ── */
.fi-apply__recaptcha-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.fi-apply__recaptcha-error {
    font-family: 'Co Headline', sans-serif;
    font-size: 12px;
    color: #ffcccc;
}

/* ── RTL ── */
[dir='rtl'] .fi-apply__input,
[dir='rtl'] .fi-apply__textarea {
    text-align: right;
}

[dir='rtl'] .fi-apply__select {
    text-align: right;
    direction: rtl;
    padding-right: 10px;
    padding-left: 40px;
}

.fi-apply__select {
    padding-right: 40px;
    padding-left: 16px;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .fi-apply__radio-label {
        text-align: start;
        width: 100%;
       
    }
    .fi-apply {
        padding: 40px 16px;
        gap: 15px;
        background-size: contain;
    }

    .fi-apply__title {
        font-size: 28px;
        line-height: 32px;
    }

    .fi-apply__row {
        flex-direction: column;
        gap: 15px;
    }

    .fi-apply__field,
    .fi-apply__select-wrap {
        width: 100%;
        flex: unset;
    }

    .fi-apply__radio-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    [dir='rtl'] .fi-apply__radio-row {
        align-items: flex-end;
    }

    .fi-apply__radio-group {
        width: 100%;
        flex-wrap: wrap;
        gap: 16px;
    }

    .fi-apply__radio-option {
        width: calc(50% - 8px);
    }

    .fi-apply__textarea {
        min-height: 144px;
    }

    .fi-apply__submit-btn {
        padding: 16px 24px;
        font-size: 18px;
        line-height: 18px;
    }
}