/* =================================================================
   Digital Fin Serve — Responsive Stylesheet
   Breakpoints:
     - <= 1199px  Laptop / small desktop
     - <= 991px   Tablet
     - <= 767px   Large mobile
     - <= 575px   Mobile
   ================================================================= */

/* ============================= LAPTOP (<=1199px) ============================= */
@media (max-width: 1199.98px) {
    :root { --section-pad: 80px; }

    .container { max-width: 1140px; }

    .hero__title { font-size: clamp(2.2rem, 4vw, 3rem); }

    .float-card--approved { left: 0; }
    .float-pill--green { left: 2%; }
    .float-pill--gold { left: 34%; }
    .float-card--rating { right: 0; }
}

/* ============================= TABLET (<=991px) ============================= */
@media (max-width: 991.98px) {
    :root { --section-pad: 64px; }

    /* Kill horizontal scroll site-wide */
    html, body { overflow-x: hidden; max-width: 100%; }
    section, main, .hero, .footer, .cta, .pl-hero, .emi-page, .bn-page, .ty-page { max-width: 100%; overflow-x: clip; }
    img, svg, video, canvas { max-width: 100%; }
    .brand-logo { max-width: min(180px, 58vw); height: auto; }

    /* Navigation collapses */
    .mainnav__list {
        margin: var(--sp-16) 0;
        gap: 2px;
        align-items: flex-start;
    }
    .mainnav .nav-link { padding: 10px 4px; }
    .mainnav .nav-link::after { left: 4px; right: auto; width: 22px; }
    .mainnav .nav-link.active::after,
    .mainnav .nav-link:hover::after { transform: scaleX(1); }
    .mainnav .dropdown-menu { box-shadow: none; border: none; padding-left: 12px; margin-top: 0; }
    .btn-login { width: fit-content; }

    /* Hero — mobile order: service select → content → image */
    .hero { padding-top: 44px; padding-bottom: 52px; overflow: hidden; }
    .hero .container { overflow: hidden; padding-left: 16px; padding-right: 16px; }
    .hero .row {
        display: flex; flex-direction: column;
        margin-left: 0; margin-right: 0; --bs-gutter-x: 0; max-width: 100%;
    }
    .hero [class*="col-"] { padding-left: 0; padding-right: 0; max-width: 100%; width: 100%; }
    .hero__left {
        padding-right: 0; text-align: center;
        display: flex; flex-direction: column; order: 1;
        max-width: 100%;
    }
    .hero__left > .apply-card { order: 1; margin: 0 auto 28px; width: 100%; max-width: 460px; }
    .hero__left > .eyebrow,
    .hero__left > .hero__title,
    .hero__left > .hero__desc,
    .hero__left > .hero__features { order: 2; max-width: 100%; }
    .hero__title, .hero__desc {
        max-width: 100%;
        overflow-wrap: break-word;
        word-wrap: break-word;
    }
    .hero__right { order: 2; max-width: 100%; }
    .eyebrow, .hero__features { justify-content: center; }
    .hero__desc { margin-left: auto; margin-right: auto; }
    .apply-card__form { flex-direction: column; }
    .apply-card__form .btn-primary-gd { width: 100%; justify-content: center; white-space: normal; }
    .hero__media {
        max-width: min(540px, 100%); height: 460px; margin: 30px auto 0;
        overflow: hidden;
    }
    .float-card--approved { left: 2%; }
    .float-pill--green { left: 2%; }
    .float-pill--gold { left: 36%; }
    .float-card--rating { right: 2%; }

    /* Topbar simplifies */
    .topbar { overflow: hidden; }
    .topbar__inner { justify-content: center; text-align: center; }

    /* About single column */
    .about__media { max-width: 560px; margin: 0 auto; }
    .section-eyebrow--left,
    .section-title--left { text-align: left; }
    .about__cta-row { gap: var(--sp-24); }
    .mission-card { max-width: 100%; }

    /* Common page overflow guards */
    .pl-hero, .pl-hero__panel, .emi-page, .bn-page, .ty-page { overflow-x: clip; }
    .pl-hero__shape--3 { right: -80px; width: 320px; height: 320px; }
    .breadcrumb-hero__banner { overflow: hidden; }
}

/* ============================= LARGE MOBILE (<=767px) ============================= */
@media (max-width: 767.98px) {
    :root { --section-pad: 52px; }

    .topbar { font-size: 0.72rem; }
    .topbar__right { gap: var(--sp-16); }

    .hero__title { font-size: clamp(2rem, 8vw, 2.6rem); }
    .hero__features { gap: var(--sp-24); }
    .apply-card__form { flex-direction: column; }
    .apply-card__form .btn-primary-gd { width: 100%; justify-content: center; }

    /* Feature/service cards two-per-row already via col-6; tighten spacing */
    .feature-card, .service-card { padding: 20px 18px; }

    /* Stats: keep icon+text centered, two columns */
    .stat { justify-content: flex-start; }

    /* CTA stacks */
    .cta__inner { flex-direction: column; align-items: flex-start; text-align: left; padding: 24px; }
    .btn-lg-cta { width: 100%; justify-content: center; }

    /* Footer */
    .footer { padding-top: 44px; }
    .footer__about { max-width: 100%; }
}

/* ============================= MOBILE (<=575px) ============================= */
@media (max-width: 575.98px) {
    .apply-card__form { flex-direction: column; }
    .apply-card__form .btn-primary-gd { width: 100%; justify-content: center; }

    .hero__features { flex-direction: column; align-items: center; gap: var(--sp-16); }
    .hero__features li { width: 100%; max-width: 220px; }

    /* Compact oval hero on mobile — cards tucked inside, no side overflow */
    .hero__media { max-width: 400px; height: 400px; margin: 16px auto 0; width: 100%; }
    .float-card, .float-pill { animation: none; }
    .float-pill { padding: 11px 15px; }
    .float-pill strong { font-size: 1rem; }
    .float-card--approved { top: 8%; left: 4%; transform: scale(0.78); transform-origin: top left; }
    .float-card--rating { top: 8%; right: 4%; bottom: auto; transform: scale(0.78); transform-origin: top right; }
    .float-pill--green { bottom: 7%; left: 4%; transform: scale(0.8); transform-origin: bottom left; }
    .float-pill--gold { bottom: 7%; left: auto; right: 4%; transform: scale(0.8); transform-origin: bottom right; }

    .section-head .section-eyebrow::before,
    .section-head .section-eyebrow::after { display: none; }

    .stat { justify-content: center; }
    .stat__value { font-size: 1.3rem; }

    .testimonial-card__stars { margin-left: 0; width: 100%; }
}

/* ============================= EXTRA SMALL (<=400px) ============================= */
@media (max-width: 400px) {
    .brand-logo { height: 42px; }
    .hero__media { max-width: 320px; height: 360px; }
    .float-card--approved { transform: scale(0.72); }
    .float-card--rating { transform: scale(0.72); }
    .float-pill--green { transform: scale(0.76); }
    .float-pill--gold { transform: scale(0.76); }
}

/* =================================================================
   ABOUT PAGE — responsive
   ================================================================= */

/* Laptop */
@media (max-width: 1199.98px) {
    .stat-float--a { left: 0; }
    .stat-float--b { left: 0; }
    .stat-float--c { right: 0; }
}

/* Tablet — stack two-column sections, timeline becomes vertical */
@media (max-width: 991.98px) {
    .breadcrumb-hero__banner { padding: 56px var(--sp-24); }

    .abouthero__media { max-width: 560px; margin: 8px auto 0; padding: 0 16px 36px 0; }
    .abouthero__actions { justify-content: flex-start; }

    .journey__media { max-width: 560px; margin: 0 auto 32px; padding: 0 0 30px 16px; }

    /* Vertical timeline */
    .timeline { flex-direction: column; gap: var(--sp-24); padding-left: 6px; }
    .timeline::before {
        top: 6px;
        bottom: 6px;
        left: 27px;
        right: auto;
        width: 2px;
        height: auto;
        background: linear-gradient(180deg, transparent, var(--gold), transparent);
    }
    .timeline__item {
        display: flex;
        align-items: center;
        gap: var(--sp-16);
        text-align: left;
        flex: none;
        padding: 0;
    }
    .timeline__dot { margin: 0; }
}

/* Mobile */
@media (max-width: 575.98px) {
    .breadcrumb-hero { padding-top: 24px; }
    .breadcrumb-hero__banner { padding: 44px 20px; }

    .abouthero__actions { flex-direction: column; }
    .abouthero__actions .btn-primary-gd,
    .abouthero__actions .btn-outline-gd { width: 100%; justify-content: center; }

    /* Floating stat cards scale down so they never overflow */
    .stat-float { animation: none; padding: 11px 14px; }
    .stat-float__value { font-size: 1rem; }
    .stat-float--a { top: 4%; left: 0; transform: scale(0.86); transform-origin: top left; }
    .stat-float--b { bottom: 2%; left: 0; transform: scale(0.86); transform-origin: bottom left; }
    .stat-float--c { top: auto; bottom: 2%; right: 0; transform: scale(0.86); transform-origin: bottom right; }

    .journey__badge { padding: 14px 18px; }
    .journey__badge strong { font-size: 1.3rem; }

    .emi-results { grid-template-columns: 1fr; gap: 12px; }
    .emi-chart-wrap { height: 200px; }
}

/* =================================================================
   PERSONAL SERVICE CARD PAGE — responsive
   ================================================================= */
@media (max-width: 991.98px) {
    .psc-hero__media { max-width: 560px; margin: 8px auto 0; padding: 12px 14px 14px 0; }
    /* Timeline step text aligns nicely in vertical mode */
    .timeline__desc { margin-top: 2px; }
}

@media (max-width: 575.98px) {
    .psc-hero__media { padding: 10px 10px 10px 0; }
    .psc-hero__leaf { font-size: 1.4rem; right: 20px; }

    .psc-price { gap: var(--sp-16); }
    .psc-price__validity { padding-right: var(--sp-16); border-right: none; padding-bottom: var(--sp-16); border-bottom: 1px solid var(--border); width: 100%; }
    .psc-price__amount { width: 100%; }
    .psc-price__off { margin-left: 0; }

    .psc-buy .btn-primary-gd { width: 100%; justify-content: center; }

    .psc-contact { gap: 12px; }

    .psc-accordion .accordion-button { padding: 14px 16px; font-size: 0.9rem; }
    .psc-accordion .accordion-body { padding: 0 16px 16px; }
}

/* =================================================================
   CONTACT US PAGE — responsive
   ================================================================= */
@media (max-width: 991.98px) {
    .map-embed iframe { height: 360px; }
    .contact-info { margin-top: var(--sp-32); }
}

@media (max-width: 575.98px) {
    .contact-form-card,
    .contact-info { padding: var(--sp-24); }
    .map-embed iframe { height: 280px; }
    .contact-form .btn-primary-gd { width: 100%; justify-content: center; }
}

/* =================================================================
   PERSONAL LOAN LANDING — responsive
   ================================================================= */
@media (max-width: 991.98px) {
    .pl-hero { padding: 20px 0 48px; }
    .pl-hero__panel { padding: 40px 28px 0; }
    .pl-hero__content { text-align: center; padding-bottom: 8px; }
    .pl-hero__feats { justify-content: center; }
    .pl-lead { margin: 0 auto; }
    .pl-hero__figure { justify-content: center; margin-top: 8px; }
    .pl-hero__person { max-height: 440px; }
    .pl-hero__wave { display: none; }
    .pl-amount-card { margin-bottom: var(--sp-32); }
}

@media (max-width: 575.98px) {
    .pl-hero__panel { padding: 32px 18px 0; border-radius: 22px; }
    .pl-hero__person { max-height: 360px; }
    .pl-lead { padding: var(--sp-24) var(--sp-16); }
    .pl-otp { gap: 6px; }
    .pl-otp__digit { max-width: 46px; height: 48px; font-size: 1.1rem; }
    .pl-hero__panel--info { padding: 28px 16px 32px; }
    .pl-info { padding: var(--sp-24) var(--sp-16); }
    .pl-info__title { font-size: 1.3rem; }
    .pl-footer__inner { flex-direction: column; text-align: center; }
}

/* =================================================================
   EMI OPTION PAGE — responsive
   ================================================================= */
@media (max-width: 991.98px) {
    .emi-plans { grid-template-columns: repeat(3, 1fr); }
    .emi-summary__main { border-right: none; padding-right: 0; width: 100%; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
    .emi-summary__list { justify-content: flex-start; gap: 14px 18px; width: 100%; }
}

@media (max-width: 767.98px) {
    .emi-container { padding: 0 14px; }
    .emi-page { padding: 20px 0 48px; }

    /* Summary card — keep side inset + top overlap */
    .emi-summary {
        margin-top: -22px;
        margin-left: 12px;
        margin-right: 12px;
        padding: 16px;
        gap: 14px;
        border-radius: 16px;
    }
    .emi-summary__icon { width: 48px; height: 48px; border-radius: 12px; font-size: 1.15rem; }
    .emi-summary__amount { font-size: 1.35rem; }
    .emi-summary__list { gap: 10px 14px; }
    .emi-summary__item { gap: 10px; min-width: calc(50% - 8px); }
    .emi-summary__item-icon { width: 34px; height: 34px; font-size: 0.85rem; }
    .emi-summary__item strong { font-size: 0.78rem; }
    .emi-summary__item > div span { font-size: 0.68rem; }

    /* Compact 2-column EMI cards */
    .emi-select { margin-top: 28px; }
    .emi-select__head { margin-bottom: 18px; }
    .emi-select__title { font-size: 1.35rem; }
    .emi-select__sub { font-size: 0.8rem; margin-top: 8px; }
    .emi-plans { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .emi-plan { padding: 14px 10px 12px; border-radius: 14px; }
    .emi-plan:hover { transform: translateY(-3px); }
    .emi-plan__cal { width: 38px; height: 38px; margin-bottom: 8px; font-size: 0.95rem; }
    .emi-plan__months { font-size: 1.25rem; }
    .emi-plan__months-label { font-size: 0.68rem; margin-bottom: 8px; }
    .emi-plan__row { padding-top: 8px; }
    .emi-plan__row-label { font-size: 0.62rem; }
    .emi-plan__emi { font-size: 0.88rem; margin-bottom: 6px; }
    .emi-plan__total { font-size: 0.78rem; }
    .emi-plan__radio { width: 18px; height: 18px; margin-top: 10px; }
    .emi-plan__radio::after { inset: 2px; }
    .emi-plan__badge { font-size: 0.58rem; padding: 3px 9px; top: -10px; }
    .emi-plan.is-selected { transform: translateY(-3px) scale(1.01); box-shadow: 0 12px 24px rgba(0, 50, 36, 0.12); }

    .emi-tip { margin-top: 18px; padding: 12px 14px; gap: 10px; }
    .emi-tip__icon { width: 34px; height: 34px; font-size: 0.85rem; }
    .emi-tip__text { font-size: 0.78rem; }
    .emi-continue { margin-top: 18px; padding: 14px; font-size: 0.92rem; border-radius: 14px; }
    .emi-trust { margin-top: 16px; font-size: 0.72rem; gap: 6px 12px; }

    .emi-progress__top { flex-wrap: wrap; }
    .emi-steps { padding: 4px 0 0; }
    .emi-step__name { font-size: 0.62rem; padding: 0 2px; }
    .emi-step__dot { width: 36px; height: 36px; font-size: 0.8rem; }
    .emi-step:not(:first-child)::before {
        top: 17px;
        left: calc(-50% + 18px);
        right: calc(50% + 18px);
    }
}

@media (max-width: 460px) {
    .emi-progress { padding: 18px 14px 22px; }
    .emi-summary {
        margin-top: -20px;
        margin-left: 10px;
        margin-right: 10px;
        padding: 14px;
    }
    .emi-summary__item { min-width: 100%; }
    .emi-plans { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .emi-plan { padding: 12px 8px 10px; }
    .emi-plan__months { font-size: 1.15rem; }
    .emi-plan__emi { font-size: 0.8rem; }
    .emi-plan__total { font-size: 0.72rem; }
    .emi-plan.is-selected { transform: translateY(-2px) scale(1); }
    .emi-step__name { font-size: 0.58rem; }
}

/* =================================================================
   BUY NOW / CONFIRMATION PAGE — responsive
   ================================================================= */
@media (max-width: 991.98px) {
    body.bn-body {
        height: auto !important;
        overflow: auto !important;
    }
    body.bn-body .bn-page {
        height: auto !important;
        display: block !important;
        padding: 22px 0 110px !important;
        overflow: visible !important;
        align-items: stretch !important;
    }
    body.bn-body .bn-wrap {
        max-width: 560px;
        padding: 0 14px;
    }
    body.bn-body .bn-card {
        padding: 24px 18px 22px;
        border-radius: 18px;
    }
    body.bn-body .bn-success__icon {
        width: 56px;
        height: 56px;
        font-size: 1.25rem;
        margin-bottom: 10px;
    }
    body.bn-body .bn-success__congrats { font-size: 0.95rem; }
    body.bn-body .bn-success__lead { font-size: 1rem; }
    body.bn-body .bn-success__amount {
        font-size: clamp(1.7rem, 8vw, 2.2rem);
        margin: 2px 0 6px;
    }
    body.bn-body .bn-success__tag { font-size: 0.85rem; }
    body.bn-body .bn-success__desc {
        font-size: 0.8rem;
        margin-top: 8px;
        max-width: none;
    }
    body.bn-body .bn-divider { margin: 14px 0; }

    /* Force single column — beats .bn-body .bn-grid desktop rule */
    body.bn-body .bn-grid {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        align-items: start;
    }

    body.bn-body .bn-fincard {
        width: 100%;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: 1.68 / 1;
        padding: 16px 16px 14px !important;
        border-radius: 16px;
        box-shadow: 0 12px 28px rgba(0, 50, 36, 0.22);
    }
    body.bn-body .bn-fincard__logo-img {
        height: 34px;
        max-width: 140px;
    }
    body.bn-body .bn-fincard__chip {
        width: 34px;
        height: 26px;
        margin: 4px 0 2px;
    }
    body.bn-body .bn-fincard__number {
        font-size: 0.95rem;
        gap: 7px;
        letter-spacing: 0.08em;
        margin: 2px 0 6px;
    }
    body.bn-body .bn-fincard__holder strong,
    body.bn-body .bn-fincard__expiry strong {
        font-size: 0.74rem;
    }
    body.bn-body .bn-fincard__meta {
        font-size: 0.58rem;
    }

    body.bn-body .bn-summary {
        width: 100%;
        padding: 14px 16px;
        border-radius: 14px;
        position: relative;
        z-index: 1;
    }
    body.bn-body .bn-summary__title { font-size: 0.92rem; }
    body.bn-body .bn-summary__hint { margin: 2px 0 8px; font-size: 0.72rem; }
    body.bn-body .bn-summary__row { padding: 7px 0; }
    body.bn-body .bn-summary__total {
        margin-top: 8px;
        padding: 10px 12px;
    }
    body.bn-body .bn-summary__total strong { font-size: 1rem; }

    .bn-actions,
    body.bn-body .bn-actions {
        display: block !important;
        margin-top: 14px;
    }
    body.bn-body .bn-info {
        padding: 12px 14px;
        gap: 10px;
        margin-bottom: 0;
    }
    body.bn-body .bn-info__icon {
        width: 34px;
        height: 34px;
        font-size: 0.85rem;
        flex-shrink: 0;
    }
    body.bn-body .bn-info > div strong { font-size: 0.82rem; }
    body.bn-body .bn-info > div span {
        font-size: 0.7rem;
        line-height: 1.35;
    }

    /* Sticky Get Funds Now — outside card, above confetti */
    body.bn-body .bn-cta-bar--desk {
        display: none !important;
    }
    body.bn-body .bn-cta-bar--mob {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10050;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: 0 -10px 28px rgba(0, 50, 36, 0.16);
        border-top: 1px solid rgba(0, 50, 36, 0.08);
    }
    body.bn-body .bn-cta-bar--mob .bn-cta {
        width: 100%;
        padding: 15px 16px !important;
        font-size: 0.95rem !important;
        border-radius: 12px !important;
        margin: 0 !important;
        box-shadow: 0 8px 18px rgba(0, 50, 36, 0.22);
    }
    body.bn-body .bn-trust--mobile {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 16px;
        margin-bottom: 8px;
        font-size: 0.72rem;
        gap: 8px 12px;
    }
}

@media (max-width: 460px) {
    body.bn-body .bn-card { padding: 20px 14px 18px; }
    body.bn-body .bn-success__icon {
        width: 52px;
        height: 52px;
        font-size: 1.15rem;
    }
    body.bn-body .bn-fincard {
        aspect-ratio: 1.58 / 1;
        padding: 14px 14px 12px !important;
    }
    body.bn-body .bn-fincard__number {
        font-size: 0.88rem;
        gap: 5px;
    }
    body.bn-body .bn-fincard__logo-img {
        height: 30px;
        max-width: 120px;
    }
    .bn-trust__sep { display: none; }
    body.bn-body .bn-trust--mobile {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }
}

/* Thank you page */
@media (max-width: 575.98px) {
    .ty-card { padding: 32px 20px 26px; }
    .ty-title { font-size: 1.2rem; }
    .ty-notice { padding: 14px; }
    .ty-notice__en { font-size: 0.84rem; }
    .ty-notice__hi { font-size: 0.8rem; }
}