/* ============================================================
   LOANS.CSS — EG-BANK Loans & Financing Page
   Prefix: loans-
   ============================================================ */

/* ── CSS Custom Properties ── */
:root {
    --loans-teal: #1bbcbc;
    --loans-teal-dark: #0e8f8f;
    --loans-teal-light: #e8f9f9;
    --loans-teal-bg: #1ab5b5;
    --loans-white: #ffffff;
    --loans-off-white: #f5f8fa;
    --loans-text-dark: #003B70;
    --loans-text-mid: #6A7282;
    --loans-text-light: rgba(255,255,255,0.82);
    --loans-border: #dce8f0;
    --loans-shadow-sm: 0 2px 12px rgba(13,43,78,0.08);
    --loans-shadow-md: 0 6px 28px rgba(13,43,78,0.13);
    --loans-shadow-lg: 0 12px 48px rgba(13,43,78,0.18);
    --loans-radius-sm: 8px;
    --loans-radius-md: 14px;
    --loans-radius-lg: 20px;
    --loans-radius-xl: 28px;
    --loans-transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    --loans-section-pad: 40px 0;
    --loans-inner-pad: 0 30px;
}

/* ============================================================
   HERO BANNER
   ============================================================ */
.loans-hero__title {
    font-family: 'Co Headline', sans-serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 400;
    color: var(--loans-white);
    line-height: 1.15;
    margin: 12px 0 16px;
}

.loans-hero__title--accent {
    display: block;
    color: var(--loans-teal);
}

.loans-hero__desc {
    font-family: 'Co Headline', sans-serif;
    font-size: 24px;
    color: var(--loans-text-light);
    line-height: 1.6;
    margin: 0 0 28px;
}

/* ============================================================
   BADGE
   ============================================================ */
.loans-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255,255,255,0.12);
    border: none;
    border-radius: 100px;
    padding: 5px 14px 5px 10px;
}

.loans-badge--outline {
    background: rgba(0, 196, 179, 0.08);
    color: var(--loans-text-dark);
}

.loans-badge--white {
    background: rgba(255,255,255,0.24);
}

.loans-badge--teal {
    background: rgba(0, 196, 179, 0.08);
}

.loans-badge__dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--loans-teal);
    flex-shrink: 0;
    display: none !important;
}

#surrogatePrograms .loans-badge__dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #ffffff;
}

.loans-badge__text {
    font-family: 'Co Headline', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: var(--loans-white);
}

.loans-badge--outline .loans-badge__text {
    color: #00C4B3;
}

.loans-badge--teal .loans-badge__text {
    color: var(--loans-teal);
}

.loans-section__inner > .loans-badge {
    display: flex;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.loans-btn {
    width: 230px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Co Headline', sans-serif;
    font-weight: 400;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    cursor: pointer;
    border-radius: 100px;
    transition: var(--loans-transition);
    padding: 14px 36px;
}

.loans-btn--primary {
    background: var(--loans-teal);
    color: var(--loans-white);
}

    .loans-btn--primary:hover {
        background: var(--loans-teal-dark);
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(27,188,188,0.35);
    }

    .loans-btn--primary:active {
        transform: translateY(0);
    }

/* ============================================================
   HORIZONTAL TAB NAV

   Row height, font size and weight live in GeneralStyle.css under "TAB BAR
   ROW", shared with .channels-tabs, .segment-tabs and .fi-tabs, so this bar
   cannot drift back to a different height than the others.
   ============================================================ */
.loans-tabs {
    align-items: center !important;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    padding: 0 30px 0px;
    gap: 24px;
    background: var(--loans-white);
    position: sticky;
    top: 62px;
    z-index: 100;
    border-bottom: 1px solid var(--loans-border);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

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

.loans-tabs__toggle {
    display: none;
}

.loans-tabs__toggle-text {
    font-family: 'Co Headline', sans-serif;
}

.loans-tabs__menu {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 24px;
}

.loans-tabs--fixed {
    display: none;
}

.loans-tabs__item {
    font-family: 'Co Headline', sans-serif;
    text-transform: capitalize;
    color: var(--loans-text-dark);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color 0.25s, border-color 0.25s;
    white-space: nowrap;
}

    .loans-tabs__item:hover {
        color: var(--loans-teal);
    }

.loans-tabs__item--active {
    color: var(--loans-teal);
    border-bottom-color: var(--loans-teal);
}

/* ============================================================
   SECTION WRAPPER
   ============================================================ */
.loans-section {
    padding: 20px 30px;
}

.loans-section--light {
    background: #FFFFFF;
}

.loans-section--teal {
    background: linear-gradient(180deg, #009CAD, #00AFB0, #00C4B3);
}

.loans-section--dark-navy {
    background: #FFFFFF;
}

.loans-section__inner {
    margin: 0 auto;
    /*padding: var(--loans-inner-pad);*/
}

.loans-section__title {
    font-family: 'Co Headline', sans-serif;
    font-size: 32px;
    font-weight: 400;
    color: var(--loans-text-dark);
    margin: 16px 0 16px;
    line-height: 100%;
    text-align: center;
}

#autoLoan .loans-section__subtitle {
    max-width: 828px;
    font-family: 'Co Headline', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    text-align: center;
    color: #6A7282;
    margin: 16px auto 16px;
}

.loans-section__subtitle--light {
    max-width: 828px;
    font-family: 'Co Headline', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    text-align: center;
    color: #6A7282;
    margin: 16px auto 16px;
}

/* ============================================================
   ACCORDION — Personal Loan Section
   ============================================================ */
.loans-accordion {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-radius: var(--loans-radius-lg);
    overflow: visible;
}

.loans-accordion__item {
    background: #F8FAFB;
    border: 1px solid #EBEBEB;
    border-radius: 16px ;
    overflow: hidden;
}

.loans-accordion__trigger {
    height: 70px;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    /* min-height: 54px; */
    padding: 16px;
    background: #F8FAFB;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: 'Co Headline', sans-serif;
    transition: background var(--loans-transition);
}

    .loans-accordion__trigger:hover {
        background: var(--loans-teal-light);
    }

.loans-accordion__item--open .loans-accordion__trigger {
    border-bottom: 1px solid var(--loans-border);
}

.loans-accordion__icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--loans-radius-sm);
    flex-shrink: 0;
    color: var(--loans-white);
}

.loans-accordion__icon-wrap--doc {
    background: var(--loans-teal);
}

.loans-accordion__label {
    flex: 1;
    font-family: 'Co Headline', sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: var(--loans-text-dark);
    line-height: 1.3;
}

.loans-accordion__chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--loans-teal);
    transform: rotate(180deg);
    transition: transform var(--loans-transition);
}

.loans-accordion__item--open .loans-accordion__chevron {
    transform: rotate(0deg);
}

.loans-accordion__body {
    display: none;
    padding: 24px 24px 28px;
    animation: loansAccordionOpen 0.25s ease;
    background-color: #FFFFFF;
}

.loans-accordion__item--open .loans-accordion__body {
    display: block;
}

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

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

.loans-accordion__desc {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 16px;
    width: 100%;
    min-height: 56px;
    background: linear-gradient(135deg, #F9FAFB 0%, #FFFFFF 100%);
    border: 0.666667px solid #F3F4F6;
    border-radius: 16px;
    font-family: 'Co Headline', sans-serif;
    font-size: 14px;
    color: var(--loans-text-mid);
    line-height: 1.6;
    margin: 0 0 24px;
}

/* Detail grid inside accordion */
.loans-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.loans-detail-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 20px;
    border: 1px solid var(--loans-border);
    border-radius: var(--loans-radius-md);
}

.loans-detail-card__icon {
    color: var(--loans-teal);
    display: flex;
}

.loans-detail-card__label {
    font-family: 'Co Headline', sans-serif;
    font-size: 16px;
    color: var(--loans-text-mid);
}
.Img_Icon_Width {
    width: 24px;
    height: 24px;
}
.loans-detail-card__value {
    font-family: 'Co Headline', sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: #003B70;
}

/* ============================================================
   PRODUCT CARDS GRID — Surrogate & HNW
   ============================================================ */
.loans-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
   /* margin-top: 40px;*/
}
.loans-cards-grid-oneInRow {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;

}
.loans-product-card {
    border-radius: var(--loans-radius-lg);
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: transform var(--loans-transition), box-shadow var(--loans-transition);
}

    .loans-product-card:hover {
        transform: none;
        box-shadow: none;
    }

.loans-product-card--teal-dark {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.22);
    backdrop-filter: blur(8px);
}

#surrogatePrograms .loans-cards-grid > .loans-product-card--teal-dark:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: calc((100% - 20px) / 2);
    width: 100%;
    justify-self: center;
}

.loans-product-card--dark-navy {
    background: #003B70;
    border: 1px solid rgba(255,255,255,0.1);
}

.loans-product-card__header {
    display: flex;
    align-items: center;
    gap: 14px;
}

.loans-product-card__icon-wrap {
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--loans-radius-sm);
    flex-shrink: 0;
    background: #8BDC64;
    color: var(--loans-white);
}

.loans-product-card__icon-wrap--teal-light {
    background: #00C4B3;
}

.loans-product-card__title {
    font-family: 'Co Headline', sans-serif;
    font-size: 22px;
    font-weight: 400;
    color: var(--loans-white);
    line-height: 1.4;
    margin: 0px 0 0;
}

.loans-product-card__title--light {
    color: var(--loans-white);
}

.loans-product-card__desc {
    font-family: 'Co Headline';
    font-size: 14px;
    font-weight: 400;
    margin: 6px 0px;
    color: #FFFFFF;
    line-height: 2;
}

.loans-product-card__desc--light {
    color: #FFFFFF;
}

/* Loan Details box inside product card */
.loans-product-card__details {
    margin-top:auto;
    border-radius: var(--loans-radius-md);
    padding: 18px 20px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    color: #FFFFFF;
}

.loans-product-card__details--dark {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.27);
    margin-top: auto;
}

.loans-product-card__details-title {
    font-family: 'Co Headline', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #FFFFFF;
    letter-spacing: 0.08em;
    margin: 0 0 18px;
}

.loans-product-card__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .loans-product-card__list li {
        display: flex;
        align-items: center;
        gap: 10px;
        font-family: 'Co Headline', sans-serif;
        font-size: 0.88rem;
        color: #FFFFFF;
    }

        .loans-product-card__list li span {
            font-size:16px;
            flex: 1;
        }

        .loans-product-card__list li strong {
            color: var(--loans-white);
            font-weight: 400;
            margin-left: auto;
            text-align: right;
            font-size:16px;
        }

.loans-product-card__list--light li {
    color: #FFFFFF;
}

    .loans-product-card__list--light li strong {
        color: var(--loans-white);
    }

/* ============================================================
   AUTO LOAN LAYOUT
   ============================================================ */
.loans-auto-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(400px, 0.95fr);
    gap: 16px;
    align-items: start;
    width: 100%;
    margin: 0 auto;
    padding: 24px;
    background: linear-gradient(180deg, #00C4B3 0%, #00B4AB 33.96%, #00AEA8 57.82%, #00A8A5 81.68%);
    border-radius: 16px;
}

.loans-auto-promo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

#autoLoan .loans-drive-card {
    width: 100%;
    border-radius: 16px;
    padding: 16px;
    height: 320px;
}

.loans-auto-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-content: start;
}

.loans-auto-details {
    grid-column: 1 / -1;
    background: rgba(255, 255, 255, 0.18);
    border: 0.666667px solid rgba(255, 255, 255, 0.2);
    color: var(--loans-white);
}

.loans-stat-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 25px;
    min-height: 150px;
    border-radius: 16px;
}

.loans-stat-card--teal {
    width: 100%;
    flex-grow: 1;
    background: rgba(255, 255, 255, 0.1);
    border: 0.666667px solid rgba(255, 255, 255, 0.2);
    color: var(--loans-white);
}

.loans-stat-card__icon {
    display: flex;
    color: rgba(255,255,255,0.8);
}

.loans-stat-card__value {
    font-family: 'Co Headline', sans-serif;
    font-size: 30px;
    font-weight: 400;
    color: var(--loans-white);
    line-height: 1;
}

.loans-stat-card__label {
    font-family: 'Co Headline', sans-serif;
    font-size: 14px;
    color: white;
    font-weight: 400;
}

/* Drive Now promo card */
.loans-drive-card {
    background: var(--loans-white);
    border-radius: var(--loans-radius-xl);
    padding: 20px;
    box-shadow: var(--loans-shadow-md);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.loans-drive-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.loans-drive-card__meta strong {
    font-family: 'Co Headline', sans-serif;
    display: block;
    font-size: 18px;
    font-weight: 400;
    color: var(--loans-text-dark);
}

.loans-drive-card__meta span {
    font-family: 'Co Headline', sans-serif;
    font-size: 12px;
    color: #838C9A;
}

.loans-drive-card__plus {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--loans-teal);
    padding: 4px;
    border-radius: 50%;
    transition: background var(--loans-transition);
}

    .loans-drive-card__plus:hover {
        background: var(--loans-teal-light);
    }

.loans-drive-card__img-wrap {
    position: relative;
    border-radius: var(--loans-radius-lg);
    overflow: hidden;
    flex: 1;
    min-height: 0;
    background: linear-gradient(135deg, var(--loans-teal-light) 0%, #b2e8e8 100%);
}

.loans-drive-card__img-circle {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(27,188,188,0.15);
    top: -40px;
    left: -40px;
}

.loans-drive-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

/* ============================================================
   RTL SUPPORT
   ============================================================ */
[dir="rtl"] .loans-tabs {
}

[dir="rtl"] .loans-tabs__toggle {
    text-align: right;
    flex-direction: row;
}

[dir="rtl"] .loans-accordion__trigger {
    text-align: right;
}

[dir="rtl"] .loans-product-card__list li strong {
    margin-left: 0;
    margin-right: auto;
    text-align: left;
}

[dir="rtl"] .loans-drive-card__top {
}

/* ============================================================
   LOAN CALCULATOR
   ============================================================ */
/* White card inside the mint panel. The glass border and backdrop blur this
   used to carry belonged to the old teal-section context and are gone. */
.loans-auto-calculator {
    grid-column: 1 / -1;
    background: #FFFFFF;
    border-radius: 16px;
    padding: 32px;
}

.loans-auto-calculator__title {
    font-family: 'Co Headline', sans-serif;
    font-size: 22px;
    font-weight: 400;
    color: #003B70;
    margin: 0 0 28px;
}

.loans-calc-inner {
    display: flex;
    gap: 32px;
    align-items: stretch;
    background: #FFFFFF;
}

.loans-calc-controls {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: auto 1fr auto 200px;
    column-gap: 16px;
    row-gap: 28px;
    align-items: center;
}

/* ── Results box (dark navy, right column) ── */
.loans-calc-result-box {
    flex: 0 0 322px;
    background: #003B70;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    padding: 24px;
    align-self: stretch;
}

.loans-calc-result-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}

.loans-calc-result__title {
    font-family: 'Co Headline', sans-serif;
    font-size: 22px;
    font-weight: 400;
    color: #fff;
    line-height: 38px;
}

.loans-calc-result__val {
    font-family: 'Co Headline', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: white;
    line-height: 42px;
}

    /* Both figures are teal; only the EGP unit stays white */
    #calc-emi-display,
    #calc-max-install-display {
        color: #00C4B3;
    }

.loans-calc-label {
    font-family: 'Co Headline', sans-serif;
    font-size: 16px;
    color: #003B70;
    white-space: nowrap;
}

/* ── Loan Type tabs ── */
.loans-calc-types {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Loan Type tabs span cols 2+3+4 */
.loans-calc-types--full {
    grid-column: span 3;
}

/* "Salary :" sits in col3, same font as other labels */
.loans-calc-sublabel {
    font-family: 'Co Headline', sans-serif;
    font-size: 16px;
    color: #003B70;
    white-space: nowrap;
    align-self: center;
}

/* Value block in col4 — fixed width so all three align; clip long Arabic text */
.loans-calc-controls > .loans-calc-output__inner {
    width: 200px;
    max-width: 200px;
    overflow: hidden;
    align-self: center;
}

/* Age row spans cols 2+3+4 */
.loans-calc-age-wrap--span {
    grid-column: span 3;
}

/* The age row is commented out in _LoanCalculator.cshtml — the design has no age
   field. Loans.js now treats #calc-age as optional, so uncommenting that markup
   is all it takes to bring the row (and the age eligibility check) back. */

.loans-calc-type-btn {
    font-family: 'Co Headline', sans-serif;
    font-size: 14px;
    padding: 10px 18px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid #00C4B3;
    background: #FFFFFF;
    color: #00C4B3;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    line-height: 24px;
}

/*    .loans-calc-type-btn:hover {
        background: rgba(0, 196, 179, 0.08);
    }*/

.loans-calc-type-btn--active {
    background: #00C4B3;
    color: #FFFFFF;
    border-color: #00C4B3;
}

/* ── Program select ── */
.loans-calc-select-wrap {
    position: relative;
    min-width: 0;
}

.loans-calc-select {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    background: #F3F3F3C9;
    border: 1px solid #00C4B361;
    border-radius: 8px;
    padding: 12px 36px 12px 12px;
    font-family: 'Co Headline', sans-serif;
    font-size: 14px;
    color: #003B70;
    cursor: pointer;
    line-height: 24px;
}

.loans-calc-select__chevron {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #003B70;
}

/* ── Sliders ──
   Min/max sit on a row ABOVE the track, which spans the full width beneath
   them. Grid placement rather than DOM order does that, so the markup (edge,
   track, edge) is untouched and RTL flips the two labels automatically. */
.loans-calc-slider-wrap {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas:
        "min max"
        "track track";
    align-content: center;
    row-gap: 2px;
    min-width: 0;
}

    .loans-calc-slider-wrap > .loans-calc-slider__edge:nth-child(1) {
        grid-area: min;
        justify-self: start;
    }

    .loans-calc-slider-wrap > .loans-calc-slider__edge:nth-child(3) {
        grid-area: max;
        justify-self: end;
    }

.loans-calc-slider-wrap--stepped {
    grid-template-areas: "track track";
    row-gap: 4px;
}

.loans-calc-track-wrap {
    grid-area: track;
    position: relative;
    min-width: 0;
}

/* Teal up to the thumb, navy after it. Loans.js keeps --slider-pct in sync. */
.loans-calc-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 3px;
    border-radius: 400px;
    outline: none;
    cursor: pointer;
    background: linear-gradient(to right,
        #00C4B3 0%, #00C4B3 var(--slider-pct, 40%),
        #003B70 var(--slider-pct, 40%), #003B70 100%);
}

/* Duration runs on a plain teal line — the dots mark the steps */
.loans-calc-slider--stepped {
    background: #00C4B3;
}

.loans-calc-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #00C4B3;
    cursor: pointer;
}

.loans-calc-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #00C4B3;
    border: none;
    cursor: pointer;
}

html[dir="rtl"] .loans-calc-slider {
    background: linear-gradient(to left,
        #00C4B3 0%, #00C4B3 var(--slider-pct, 40%),
        #003B70 var(--slider-pct, 40%), #003B70 100%);
}

html[dir="rtl"] .loans-calc-slider--stepped {
    background: #00C4B3;
}
.loans-calc-ticks {
    display: flex;
    justify-content: space-between;
    /* padding matches half-thumb-width (16px/2) so dots align with track endpoints */
    padding: 0 8px;
    margin-top: 4px;
    pointer-events: none;
}

.loans-calc-ticks span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    font-family: 'Co Headline', sans-serif;
    font-size: 11px;
    color: #00C4B3;
    line-height: 1;
}

/* ── Dot on the line ── */
.loans-calc-ticks span::before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00C4B3;
    flex-shrink: 0;
    transition: background 0.15s;
}

/* Steps up to the current value: same teal, the thumb marks the position */
.loans-calc-ticks span.tick--active::before {
    background: #00C4B3;
}

/* Half-year ticks: smaller dot only, no year label */
.loans-calc-ticks .loans-calc-tick--half {
    font-size: 0;
}
.loans-calc-ticks .loans-calc-tick--half::before {
    width: 5px;
    height: 5px;
    /* nudge down 1.5px so 5px-dot centre aligns with 8px-dot centre */
    margin-top: 1.5px;
}

.loans-calc-slider__edge {
    font-family: 'Co Headline', sans-serif;
    font-size: 13px;
    color: #003B70;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Age input ── */
.loans-calc-age-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.loans-calc-age-input {
    width: 80px;
    background: rgba(253,253,253,0.41);
    border: none;
    border-bottom: 2px solid #fff;
    border-radius: 0;
    padding: 4px 8px;
    font-family: 'Co Headline', sans-serif;
    font-size: 16px;
    color: #003B70;
    text-align: center;
    -moz-appearance: textfield;
}

.loans-calc-age-input::-webkit-inner-spin-button,
.loans-calc-age-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

.loans-calc-age-input:focus {
    outline: none;
    border-bottom-color: #003B70;
}

.loans-calc-age-unit {
    font-family: 'Co Headline', sans-serif;
    font-size: 12px;
    color: #003B70;
}

/* ── Output fields ── */

.loans-calc-output__inner {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.loans-calc-output__row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    overflow: hidden;
    white-space: nowrap;
}

.loans-calc-output__unit {
    font-family: 'Co Headline', sans-serif;
    font-size: 12px;
    color: #003B70;
    white-space: nowrap;
    flex-shrink: 0;
}

.loans-calc-output__val,
.loans-calc-output__input {
    font-family: 'Co Headline', sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: #003B70;
    background: none;
    border: none;
    padding: 2px 0;
    flex: 1;
    text-align: right;
    line-height: 28px;
    min-width: 0;
}

.loans-calc-output__input:focus {
    outline: none;
}

.loans-calc-output__input::-webkit-inner-spin-button,
.loans-calc-output__input::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

.loans-calc-output__line {
    height: 2px;
    background: #003B70;
    border-radius: 400px;
    width: 100%;
    margin-top: 4px;
}
.loans-calc-output__val {
    color: #00C4B3 !important;
}
/* ── Validation error bar (dark text: it sits on the white card now) ── */
.loans-calc-error {
    margin-top: 12px;
    padding: 10px 14px;
    background: rgba(220,50,50,0.08);
    border: 1px solid rgba(220,50,50,0.35);
    border-radius: 8px;
    font-family: 'Co Headline', sans-serif;
    font-size: 14px;
    color: #B02A2A;
}

/* ── RTL ── */
[dir="rtl"] .loans-calc-row {
    flex-direction: row-reverse;
}

[dir="rtl"] .loans-calc-row--type {
    flex-direction: row-reverse;
}

[dir="rtl"] .loans-calc-label {
    text-align: right;
}

[dir="rtl"] .loans-calc-select {
    padding: 12px 12px 12px 36px;
    text-align: right;
}

[dir="rtl"] .loans-calc-select__chevron {
    right: auto;
    left: 10px;
}

/* RTL slider flip is handled via JS (scaleX(-1) applied directly on the input elements) */

/* [dir="rtl"] .loans-calc-types: no override needed — direction:rtl inherited
   from the section naturally flows buttons right-to-left */

[dir="rtl"] .loans-calc-slider-wrap {
    flex-direction: row-reverse;
}

/* RTL: output values right-align within their cell */
[dir="rtl"] .loans-calc-output__val,
[dir="rtl"] .loans-calc-output__input {
    text-align: left;
}

/* RTL: sublabel ("Salary :") aligns right */
[dir="rtl"] .loans-calc-sublabel {
    text-align: right;
}

/* RTL: result box text */
[dir="rtl"] .loans-calc-result__title,
[dir="rtl"] .loans-calc-result__val {
    direction: rtl;
}

/* RTL: age unit appears before the input (flex row-reverse handles it) */
[dir="rtl"] .loans-calc-age-wrap {
    flex-direction: row;
}

/* RTL: select mobile padding swap */
@media (max-width: 768px) {
    [dir="rtl"] .loans-calc-select {
        padding: 6px 10px 6px 30px;
    }
    [dir="rtl"] .loans-calc-select__chevron {
        right: auto;
        left: 10px;
    }
}

/* ============================================================
   RESPONSIVE — Tablet
   ============================================================ */
@media (max-width: 1024px) {
    .loans-auto-layout {
        grid-template-columns: 1fr;
    }

    .loans-auto-promo {
        max-width: 400px;
    }
}

@media (max-width: 900px) {
/*    .Hero_Section {
        height: 50vh;
       
    }*/
    .loans-product-card__list li span {
        font-size: 14px;
        flex: 1;
    }

    .loans-product-card__list li strong {
        color: var(--loans-white);
        font-weight: 400;
        margin-left: auto;
        text-align: right;
        font-size: 12px;
    }

    .loans-hero__desc {
        padding: 0 32px;
    }

    .loans-tabs {
        padding: 0 30px 20px;
    }

    .loans-cards-grid {
        grid-template-columns: 1fr;
    }

    #surrogatePrograms .loans-cards-grid > .loans-product-card--teal-dark:last-child:nth-child(odd) {
        grid-column: auto;
        max-width: 100%;
        justify-self: stretch;
    }

    .loans-detail-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ── Mobile Dropdown Tabs (≤ 768px) ── */
@media (max-width: 768px) {
    .loans-tabs {
        height: auto;
        padding: 0;
        gap: 0;
        justify-content: flex-start;
        align-items: stretch;
        overflow-x: visible;
        flex-direction: column;
        position: relative;
        top: auto;
        z-index: 10;
        border-bottom: 2px solid #e0e8ef;
        box-shadow: 0 2px 8px rgba(13, 31, 45, 0.05);
    }

    .loans-tabs--fixed {
        position: fixed;
        top: 70px;
        left: 0;
        width: 100%;
        z-index: 900;
        display: none;
    }

        .loans-tabs--fixed.is-visible {
            display: flex;
        }

    /* Islamic Banking is the only page still on this class; the other page navs
       use nav.mobile-tabs in GeneralStyle.css. Same line art at the end edge, so
       the collapsed bar matches them. */
    .loans-tabs__toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 14px 16px;
        border: none;
        background: transparent url('/assets/NewFolder/mobileNav.svg') no-repeat right center;
        background-size: auto 100%;
        color: var(--loans-teal);
        font-family: 'Co Headline', sans-serif;
        font-size: 15px;
        font-weight: 500;
        line-height: 1;
        cursor: pointer;
        text-align: left;
    }

    /* The art follows the chevron to the other edge in Arabic */
    [dir="rtl"] .loans-tabs__toggle {
        background-position: left center;
    }

    .loans-tabs--open .loans-tabs__toggle .Personal_Segment_TabsMobile_Chevron svg {
        transform: rotate(180deg);
    }

    .loans-tabs__menu {
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        border-top: 0.5px solid #e0e8ef;
        background: #fff;
    }

    .loans-tabs--open .loans-tabs__menu {
        width: 100% !important;
        display: flex;
    }
    .loans-product-card__list li span {
        font-size: 10px;
    }
    .loans-product-card__list li strong {
      
        font-size: 10px;
    }
        .loans-tabs__item {
            font-size: 14px;
            padding: 13px 16px;
            border-bottom: 0.5px solid #f0f5f9;
            border-right: 0;
            border-left: 0;
        }

        .loans-tabs__menu .loans-tabs__item:last-child {
            border-bottom: 0;
        }

        .loans-tabs__item--active {
            color: var(--loans-teal);
            font-weight: 500;
            border-bottom-color: #f0f5f9;
        }

        [dir="rtl"] .loans-tabs__toggle {
            text-align: right;
            flex-direction: row;
        }

    /* Calculator responsive — ≤768px */

    /* Drive Now card moves below the calculator */
    .loans-auto-stats      { order: 1; }
    .loans-auto-calculator { order: 2; padding: 16px; }
    .loans-auto-promo      { order: 3; }

    .loans-auto-layout {
        padding: 16px;
        gap: 16px;
    }

    .loans-calc-inner {
        flex-direction: column;
        gap: 20px;
    }

    /* Switch 4-col grid → 2-col on mobile; top-align rows with wrapped content */
    .loans-calc-controls {
        grid-template-columns: auto 1fr;
        column-gap: 12px;
        row-gap: 16px;
        align-items: start;
    }

    /* Loan Type / Program / Amount / Duration labels: each takes a full row,
       control sits below it. Salary + Your Age labels stay inline (2-col). */
    .loans-calc-controls > :nth-child(1),
    .loans-calc-controls > :nth-child(3),
    .loans-calc-controls > :nth-child(7),
    .loans-calc-controls > :nth-child(11) {
        grid-column: 1 / -1;
    }

    /* Type buttons, Program select, Amount + Duration sliders: full width below label */
    .loans-calc-types--full,
    .loans-calc-select-wrap,
    .loans-calc-slider-wrap {
        grid-column: 1 / -1;
    }

    /* Age input: was span 3 on desktop, stays in col 2 on mobile */
    .loans-calc-age-wrap--span {
        grid-column: span 1;
    }

    .loans-calc-label {
        font-size: 14px;
    }

    .loans-calc-sublabel {
        font-size: 14px;
        align-self: center;
    }

    .loans-calc-type-btn {
        font-size: 12px;
        padding: 4px 12px;
        border-radius: 4px;
        min-height: 32px;
        line-height: 22px;
    }

    .loans-calc-select {
        padding: 6px 30px 6px 10px;
        font-size: 13px;
    }

    /* Min/max stay on their own row above the track (they no longer squeeze it),
       so they can keep showing on mobile — just smaller. */
    .loans-calc-slider__edge {
        font-size: 11px;
    }

    /* Empty grid spacer spans: hide but keep grid flow intact for following items */
    .loans-calc-spacer {
        display: none;
    }

    /* Amount/Duration value displays: full width below the slider */
    .loans-calc-inline-val {
        grid-column: 1 / -1;
        width: auto;
    }

    /* The 200px above is a desktop measure that keeps the three value blocks in
       one column. On mobile it must go fluid, and it needs the same child
       selector to do it: `.loans-calc-inline-val { width: auto }` alone loses to
       `.loans-calc-controls > .loans-calc-output__inner` on specificity.

       This is what broke below ~360px. The Salary row is "Salary :" (nowrap) +
       12px + a rigid 200px block = ~264px, against 254px of usable width at
       340px once the section (15px), panel (12px) and calculator (16px) padding
       are taken off each side — so the block pushed out of the panel. */
    .loans-calc-controls > .loans-calc-output__inner {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    /* Result box: full-width, compact on mobile */
    .loans-calc-result-box {
        flex: none;
        width: 100%;
        border-radius: 8px;
        gap: 20px;
        padding: 20px 24px;
        min-height: unset;
    }

    .loans-calc-result__title {
        font-size: 14px;
        line-height: 1.4;
    }

    .loans-calc-result__val {
        font-size: 16px;
        line-height: 1.4;
    }

    .loans-calc-output__line {
        width: 100%;
    }
}

/* ============================================================
   RESPONSIVE — Mobile
   ============================================================ */
@media (max-width: 640px) {
   
        .loans-product-card__desc {
          
            margin: 15px 15px;

    }
    .loans-section {
        padding: 20px 15px;
    }
    :root {
        --loans-section-pad: 20px 0;
    }

    .loans-section__title {
        font-size: 24px;
        line-height: 1.4;
    }

    .loans-section__subtitle,
    #autoLoan .loans-section__subtitle,
    .loans-section__subtitle--light {
        font-size: 16px;
        line-height: 1.5;
    }

    .Hero_Section {
        align-items: flex-end !important;
        padding: 0 20px 28px !important;
      /*  min-height: 100svh !important;*/
    }

    .Hero_Content {
        width: 100%;
        margin-top: 0 !important;
        padding: 0 !important;
    }

    /*[dir="rtl"] .Hero_ImgWrapper img {
        transform: scaleX(-1);
        transform-origin: center;
    }*/

    .loans-hero__title {
        font-size: 24px !important;
        line-height: 120% !important;
        margin: 0 0 12px !important;
    }

    .loans-hero__title--accent {
        display: inline !important;
    }

    .loans-hero__desc {
        font-size: 16px !important;
        line-height: 1.5 !important;
        padding: 0;
        margin: 0 0 16px !important;
    }

    .loans-btn.loans-btn--primary {
        width: 116px !important;
        height: 38px !important;
        padding: 0 !important;
        font-size: 0.75rem;
    }

    .loans-section__inner {
        padding: 0px 0px;
    }

    .loans-accordion__trigger {
        padding: 16px;
        gap: 12px;
    }

    .loans-accordion__body {
        padding: 16px 16px 20px;
    }

    .loans-accordion__desc {
        text-align:center;
        font-size: 13px;
    }

    .loans-accordion__label {
        font-size: 13px;
        color: #003B70;
    }

    .loans-detail-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .loans-auto-stats {
        grid-template-columns: 1fr 1fr;
    }

    .loans-auto-details {
        grid-column: 1 / -1;
    }

    /* Calculator — ≤640px tweaks */
    .loans-auto-calculator__title {
        font-size: 20px;
        margin-bottom: 16px;
    }

    .loans-calc-controls {
        row-gap: 14px;
    }

    .loans-calc-type-btn {
        font-size: 11px;
        padding: 4px 10px;
    }

    .loans-calc-result-box {
        gap: 16px;
        padding: 16px 20px;
    }

    .loans-stat-card__value {
        font-size: 30px;
        line-height: 100%;
    }

    .loans-stat-card__label {
        font-size: 14px;
        line-height: 100%;
    }

    .loans-drive-card__meta strong {
        font-size: 18px;
        line-height: 100%;
    }

    .loans-drive-card__meta span {
        font-size: 12px;
        line-height: 100%;
    }

    .loans-product-card {
        padding: 20px;
    }

    .loans-product-card__title {
        font-size: 16px;
        line-height: 1.5;
    }

    .loans-product-card__desc {
        text-align:start;
        font-size: 13px;
    }

    .loans-product-card__details-title {
        font-size: 16px;
    }

    .loans-product-card__list {
        font-size: 14px;
        line-height: 100%;
    }
}

/* ============================================================
   APPLY NOW FORM
   ============================================================ */
.loans-apply {
    padding: 60px 0;
    background: linear-gradient(180deg, #002e5f 0%, #005a9c 100%);
}

.loans-apply__inner {
    max-width: 972px;
    margin: 0 auto;
    padding: 0 40px;
}

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

.loans-apply__alert {
    margin-bottom: 20px;
    padding: 14px 18px;
    border-radius: var(--loans-radius-sm);
    font-size: 14px;
}

.loans-apply .text-danger {
    color: #ffd6d6;
    font-size: 12px;
    margin-top: 4px;
    display: block;
}

.loans-apply__fields {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.loans-apply__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.loans-apply__row--full {
    grid-template-columns: 1fr;
}

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

.loans-apply__row input[type="text"],
.loans-apply__row input[type="email"],
.loans-apply__row input[type="tel"],
.loans-apply__row input[type="date"],
.loans-apply__row input[type="number"],
.loans-apply__row select {
    width: 100%;
    height: 50px;
    padding: 0 16px;
    border: 1px solid #CDCDCD;
    border-radius: 8px;
    background: #FFFFFF;
    color: var(--loans-text-dark);
    font-family: 'Co Headline', sans-serif;
    font-size: 12px;
    outline: none;
    transition: border-color var(--loans-transition);
    appearance: none;
    -webkit-appearance: none;
}

.loans-apply__row input::placeholder {
    color: #9D9D9D;
    font-family: 'Co Headline', sans-serif;
    font-size: 12px;
}

.loans-apply__row input:focus,
.loans-apply__row select:focus {
    border-color: #00C4B3;
    box-shadow: 0 0 0 3px rgba(0, 196, 179, 0.15);
}

.loans-apply__row select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%239D9D9D' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
    cursor: pointer;
    color: #9D9D9D;
}

[dir="rtl"] .loans-apply__row select {
    background-position: left 16px center;
    padding-right: 16px;
    padding-left: 40px;
}

.loans-apply__radio-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
}

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

.loans-apply__radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}

.loans-apply__radio {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: #FFFFFF;
    font-family: 'Co Headline', sans-serif;
    font-size: 12px;
    font-weight: 400;
}

.loans-apply__radio input[type="radio"] {
    width: 14px;
    height: 14px;
    min-width: 14px;
    accent-color: #00C4B3;
    cursor: pointer;
}

.loans-apply__textarea {
    width: 100%;
    min-height: 87px;
    padding: 16px;
    border: 1px solid #CDCDCD;
    border-radius: 8px;
    background: #FFFFFF;
    color: var(--loans-text-dark);
    font-family: 'Co Headline', sans-serif;
    font-size: 12px;
    resize: vertical;
    outline: none;
    transition: border-color var(--loans-transition);
}

.loans-apply__textarea::placeholder {
    color: #9D9D9D;
    font-family: 'Co Headline', sans-serif;
    font-size: 12px;
}

.loans-apply__textarea:focus {
    border-color: #00C4B3;
    box-shadow: 0 0 0 3px rgba(0, 196, 179, 0.15);
}

.loans-apply__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
}

.loans-apply__recaptcha {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.loans-apply__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 70px;
    padding: 21px 37px;
    background: #00C4B3;
    color: #FFFFFF;
    font-family: 'Co Headline', sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
    border: none;
    border-radius: 100px;
    cursor: pointer;
    transition: background var(--loans-transition), transform var(--loans-transition);
    min-width: 268px;
}

.loans-apply__submit:hover {
    background: #00aaa0;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 196, 179, 0.35);
}

.loans-apply__submit:active {
    transform: translateY(0);
}

.loans-apply__note {
    color: #FFFFFF;
    font-family: 'Co Headline', sans-serif;
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    line-height: 100%;
}

@media (max-width: 768px) {
    .loans-apply {
        padding: 40px 0;
    }

    .loans-apply__inner {
        padding: 0 20px;
    }

    .loans-apply__title {
        font-size: 24px;
    }

    .loans-apply__row {
        grid-template-columns: 1fr;
    }

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

    .loans-apply__submit {
        width: 100%;
        min-width: unset;
    }
}

@media (max-width: 400px) {
    .loans-auto-stats {
        grid-template-columns: 1fr;
    }
    #surrogatePrograms .loans-badge__dot {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #FFFFFF;
        flex-shrink: 0;
        display: none !important;
    }

    .loans-product-card__icon-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: var(--loans-radius-sm);
        flex-shrink: 0;
        background: #8BDC64;
        color: var(--loans-white);
    }

    [dir="rtl"] .loans-product-card__icon-wrap {
        width: 32px;
        height: 32px;
    }
    .loans-accordion__icon-wrap {
        width: 32px;
        height: 32px;
    }
}

/* ============================================================
   AUTO LOAN CARDS  (Auto Loans page)

   The design is the Accounts page product card, restated here under the
   autoloan-* prefix with literal values instead of linking accounts.css —
   that file carries a global reset (* , body, h1-h6, img) and re-declares
   :root tokens (--color-primary, --radius-*, --shadow-*, --transition-*)
   that are also defined by the globally loaded stylesheets, so loading it
   here would restyle the header, footer and the rest of this page.

   Values mirror .accounts-card* in accounts.css: 1px #CBCBCB border, 24px
   radius, image 320 / 280 >=768 / 227 >=1024, 22px/400 #003B70 title,
   #F9FAFB toggle at 11px radius with a 14px/400 #003B70 label, points at
   300 weight #6A7282 with the 18px teal check circle. Keep the two in sync
   by hand if that design changes.
   ============================================================ */
.autoloan-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

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

.autoloan-card {
    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);
}
    .autoloan-card:last-child:nth-child(odd) {
        max-width: calc((100% - 20px) / 2);
        width: 100%;
        justify-self: center;
        grid-column: 1 / -1;
    }
.autoloan-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) {
  
    .autoloan-card__image {
        height: 280px;
    }
}

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

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

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

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

.autoloan-card__title {
    margin: 0;
    font-family: 'Co Headline', sans-serif;
    font-size: 22px;
    font-weight: 400;
    color: #003B70;
}

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

.autoloan-card__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px;
    background: #F0F0F0;
    border: none;
    border-radius: 11px;
    cursor: pointer;
    font-family: 'Co Headline', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #003B70;
    text-align: start;
    transition: background-color 300ms ease-in-out;
}

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

    .autoloan-card__toggle:focus-visible {
        outline: 2px solid #00C4B3;
        outline-offset: -2px;
    }

.autoloan-card__toggle-label {
    font-family: 'Co Headline', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0px;
    color: #003B70;
}

.autoloan-card__toggle-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: #003B70;
    transition: transform 300ms ease-in-out;
}

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

.autoloan-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;
}

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

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

.autoloan-card__list-text {
    font-family: 'Co Headline', sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 20px;
    color: #6A7282;
}

    /* A point may carry a nested list or a link */
    .autoloan-card__list-text ul {
        margin: 6px 0 0;
        padding-inline-start: 18px;
    }

    .autoloan-card__list-text a {
        color: #003B70;
        text-decoration: underline;
    }

.autoloan-card__list-icon {
    position: relative;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 4px;
    background-color: #00C4B3;
    border-radius: 50%;
}

    .autoloan-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);
    }

@media (max-width: 768px) {
    .autoloan-card:last-child:nth-child(odd) {
        max-width: 100%;
    }  
    .autoloan-card__list.is-expanded {
        padding: 5px;
    }

    .autoloan-card__list-text {
        font-size: 14px;
        padding-inline-start: 6px;
    }
}

/* Green APPLY NOW pill — reveals the shared apply form */
.autoloan-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40%;
    margin: auto;
    margin-bottom: 20px;
    padding: 10px 30px;
    background-color: #8BDC64;
    color: #F7FAFA;
    border: none;
    border-radius: 9999px;
    font-family: 'Co Headline', sans-serif;
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 300ms ease-in-out, transform 300ms ease-in-out;
}

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

@media (max-width: 768px) {
    .autoloan-card__content {
        padding: 20px 16px !important;
        margin-top: 0px
    }
    .autoloan-btn {
        width: auto;
    }
}

/* ============================================================
   LOAN CALCULATOR SECTION  (both loan pages)

   The calculator itself is unchanged; it used to sit inside the auto section
   and its controls are styled white-on-teal, so the panel below reproduces
   that teal gradient context now that it stands on its own.
   ============================================================ */
.loans-calc-section {
    padding: 20px 30px;
    background: var(--loans-white);
}

.loans-calc-section__title {
    margin: 0 0 20px;
    font-family: 'Co Headline', sans-serif;
    font-size: 32px;
    font-weight: 400;
    line-height: 1.2;
    text-align: center;
    color: var(--loans-text-dark);
}

/* Mint panel framing the white card, with the EG BANK line art faint along the
   bottom edge. The art is an ::after overlay because opacity cannot be applied
   to a background layer on its own. */
.loans-calc-section__panel {
    position: relative;
    background: #A7DCD9;
    border-radius: 20px;
    padding: 30px;
    overflow: hidden;
}

    .loans-calc-section__panel::after {
        content: '';
        position: absolute;
        inset: auto 0 0 0;
        height: 96px;
        background-image: url("/assets/NewFolder/EG_BANK_LINES.svg");
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: 100% 100%;
        opacity: 0.35;
        pointer-events: none;
        z-index: 0;
    }

    .loans-calc-section__panel > * {
        position: relative;
        z-index: 1;
    }

@media (max-width: 768px) {
    .loans-calc-section {
        padding: 20px 15px;
    }

    .loans-calc-section__title {
        font-size: 24px;
    }

    .loans-calc-section__panel {
        padding: 12px;
    }
}
.loans-product-card_padding {
    padding: 0px 20px 20px 20px;
}
/* Image on the teal personal-loan cards (surrogate programs) */
.loans-product-card--teal-dark .loans-product-card__img {
    display: block;
    width: 100%;
    height: 250px;
    margin-bottom: 16px;
    border-radius: 12px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    object-fit: cover;
}

@media (max-width: 768px) {
    .loans-product-card--teal-dark .loans-product-card__img {
        height: 150px;
    }
}

/* ============================================================
   CALCULATOR — very narrow phones (=<360px)
   At this width a two column grid cannot hold a nowrap label beside a control,
   whatever the control is, so every label and control takes its own full-width
   row. Nothing can overflow the panel from here down.
   ============================================================ */
@media (max-width: 360px) {
    .loans-calc-controls {
        grid-template-columns: 1fr;
        row-gap: 12px;
    }

        .loans-calc-controls > * {
            grid-column: 1 / -1;
            min-width: 0;
        }

    /* Sub-labels lose their inline partner, so they read as their own row */
    .loans-calc-sublabel {
        align-self: start;
    }

    /* Min / max edges of the amount slider */
    .loans-calc-slider__edge {
        font-size: 10px;
    }

    .loans-calc-result-box {
        padding: 16px;
    }
}