/* ------------------------------------------------------------------
   bridge.css
   Reconciles the v2 theme with the Bootstrap 4 sheet the site still
   loads (legacy pages + the login / enquiry modals), and adds the few
   pieces the static reference had no markup for: the Services
   dropdown, product ribbons, the eligibility badge and empty states.
   Loaded last, after style.css / services.css.
   ------------------------------------------------------------------ */

/* -- Bootstrap leaks into the v2 header ---------------------------- */
/* bootstrap's .navbar is display:flex, which would collapse the
   centred .nav-container; its .nav-link adds .5rem padding. */
header.navbar {
    position: static;
    display: block;
    flex-wrap: nowrap;
}

header.navbar .nav-link {
    display: inline-block;
    border: 0;
}

/* ...but the active pill keeps the padding style.css gives it. */
header.navbar .nav-link:not(.active) {
    padding: 0;
}

/* -- Services dropdown (the reference shows only the caret) -------- */
.nav-item-dropdown {
    position: relative;
}

.nav-dropdown {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    min-width: 210px;
    padding: 8px;
    margin: 0;
    list-style: none;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(16, 16, 64, 0.14);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    z-index: 60;
}

.nav-dropdown::before {
    content: "";
    position: absolute;
    top: -14px;
    left: 0;
    right: 0;
    height: 14px;
}

.nav-item-dropdown:hover .nav-dropdown,
.nav-item-dropdown:focus-within .nav-dropdown,
.nav-dropdown.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.nav-dropdown a {
    display: block;
    padding: 9px 14px;
    border-radius: 8px;
    color: #2d3748;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.nav-dropdown a:hover,
.nav-dropdown a.is-current {
    background: #f2f2fd;
    color: #3b37d4;
}

/* -- Ribbons / eligibility on product cards ------------------------ */
.card-ribbons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.card-ribbon {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: #ecebfb;
    color: #3b37d4;
    font-size: 11px;
    font-weight: 600;
}

.card-ribbon-featured {
    background: #fff3d6;
    color: #a06d00;
}

.badge-eligible {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    padding: 4px 12px;
    border-radius: 999px;
    background: #10b981;
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
}

/* -- Empty states -------------------------------------------------- */
.v2-empty {
    padding: 48px 24px;
    border: 1px dashed #d9d9ec;
    border-radius: 16px;
    background: #fafaff;
    color: #6b7280;
    font-size: 15px;
    text-align: center;
}

/* -- Filter chips are real links on the wired-up pages ------------- */
a.filter-btn {
    text-decoration: none;
    display: inline-block;
}

/* -- The loan amount / tenure filter form -------------------------- */
.loan-filter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 20px;
    width: 100%;
}

.loan-filter-field {
    flex: 1 1 220px;
    min-width: 200px;
}

.loan-filter-field label {
    display: block;
    margin-bottom: 6px;
    color: #4b5563;
    font-size: 13px;
    font-weight: 600;
}

.loan-filter-field output {
    color: #3b37d4;
    font-weight: 700;
}

.loan-filter-actions {
    display: flex;
    gap: 10px;
}

.loan-filter-submit,
.loan-filter-reset {
    padding: 10px 22px;
    border: 1px solid #3b37d4;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.loan-filter-submit {
    background: #3b37d4;
    color: #ffffff;
}

.loan-filter-reset {
    background: #ffffff;
    color: #3b37d4;
}

.loan-filter-note {
    width: 100%;
    margin-top: 14px;
    color: #4b5563;
    font-size: 14px;
    text-align: center;
}

/* -- Load more ----------------------------------------------------- */
.v2-load-more-wrap {
    margin-top: 28px;
    text-align: center;
}

.v2-load-more {
    display: inline-block;
    padding: 11px 30px;
    border: 0;
    border-radius: 8px;
    background: #3b37d4;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

/* Rows past the first page start hidden; the script reveals them. */
.credit-result-card.is-hidden {
    display: none;
}

/* ------------------------------------------------------------------
   Typography
   website.css forces "MabryPro" onto body, a, p, h1-h6 and span with
   !important, which overrides the v2 sheets' * rule. Put the reference
   typefaces back: everywhere on the ported pages, and on the shared
   header / footer / promo banner even on pages still using the old
   body layout.
   ------------------------------------------------------------------ */
header.navbar a,
header.navbar span,
.site-footer a,
.site-footer p,
.site-footer h4,
.site-footer span,
.banner-promo-section a,
.banner-promo-section p,
.banner-promo-section h2,
.banner-promo-section span,
body.v2-page h1,
body.v2-page h2,
body.v2-page h3,
body.v2-page h4,
body.v2-page h5,
body.v2-page h6,
body.v2-page p,
body.v2-page a,
body.v2-page span {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* The service pages ship their own sheet, which sets Poppins. */
body.v2-services h1,
body.v2-services h2,
body.v2-services h3,
body.v2-services h4,
body.v2-services h5,
body.v2-services h6,
body.v2-services p,
body.v2-services a,
body.v2-services span {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* website.css also drops the base size to 15px; the reference was drawn
   against the browser default. */
body.v2-page {
    font-size: 16px;
}

/* The loan amount / tenure sliders get the same treatment services.css
   gives the credit-score slider. */
.loan-filter-field input[type="range"] {
    width: 100%;
    height: 13px;
    appearance: none;
    -webkit-appearance: none;
    background: linear-gradient(to right, #3935d5 0%, #3935d5 50%, #eeeeff 50%, #eeeeff 100%);
    border-radius: 20px;
    outline: none;
    cursor: pointer;
}

.loan-filter-field input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: #3935d5;
    border: 3px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.loan-filter-field input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: #3935d5;
    border: 3px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* -- Services dropdown inside the mobile menu panel ---------------- */
@media (max-width: 768px) {
    .nav-dropdown {
        position: static;
        transform: none;
        min-width: 0;
        margin: 4px 0 0 12px;
        padding: 0;
        border-left: 2px solid #ecebfb;
        border-radius: 0;
        box-shadow: none;
        display: none;
        opacity: 1;
        visibility: visible;
    }

    .nav-item-dropdown:hover .nav-dropdown,
    .nav-item-dropdown:focus-within .nav-dropdown {
        transform: none;
    }

    .nav-dropdown.is-open {
        display: block;
        transform: none;
    }
}