/* EFB iPhone/Safari performance guardrails.
   This file is intentionally loaded AFTER page-specific CSS. */

html,
body {
    -webkit-overflow-scrolling: touch;
}

/* Never use scroll-triggered hiding/reveal transforms for server-rendered content. */
.reveal,
.reveal-left,
.reveal-right,
.reveal-on-scroll,
.reveal.active,
.reveal-left.active,
.reveal-right.active,
.reveal-active,
.is-visible {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
}

img {
    max-width: 100%;
}

.loan-pie-chart {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: conic-gradient(#0f4c81 0 var(--principal-pct, 50%), #e11d48 var(--principal-pct, 50%) 100%);
    position: relative;
    flex: 0 0 auto;
}

.loan-pie-chart::after {
    content: "";
    position: absolute;
    inset: 24%;
    border-radius: 50%;
    background: #fff;
}

@media (max-width: 767px) {

    /* Remove every known Safari-expensive filter/compositing effect. */
    [class*="backdrop-blur"],
    .glass-card,
    .glass-modal-box,
    .glass-popup-box,
    [style*="backdrop-filter"] {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    [class*="blur-"],
    [style*="filter"],
    .ambient-glow,
    .ambient-glows,
    .navbar-ambient-glow {
        filter: none !important;
        -webkit-filter: none !important;
    }

    /* Large decorative blur layers should not be painted at all on phones. */
    [class*="blur-[120px]"],
    [class*="blur-[100px]"],
    [class*="blur-[80px]"] {
        display: none !important;
    }

    /* No fixed/parallax backgrounds on iPhone. */
    *,
    *::before,
    *::after {
        background-attachment: scroll !important;
        animation: none !important;
        transition: none !important;
        will-change: auto !important;
    }

    html {
        scroll-behavior: auto !important;
    }

    /* Do not promote decorative layers into permanent GPU surfaces. */
    [style*="will-change"],
    .will-change-transform,
    .will-change-auto {
        will-change: auto !important;
    }

    /* Mobile menu overlay must be opaque/flat rather than blurred. */
    #mobile-overlay {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        background: rgba(0, 0, 0, .65) !important;
    }

    /* Floating widgets are static until the user interacts with them. */
    .whatsapp-button,
    .whatsapp-tooltip,
    .calculator-floating-btn,
    .calculator-tooltip {
        animation: none !important;
        transition: none !important;
    }

    /* Keep calculator popup functional, but never blur its backdrop on iPhone. */
    .calculator-popup-card {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    /* Disable touch hover transforms that can create extra compositing work. */
    .group:hover img,
    .group:hover .group-hover\:scale-110,
    .hover\:scale-105:hover,
    .hover\:scale-110:hover {
        transform: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* Functional controls: allow only the small accordion interaction to animate. */
.accordion-content {
    transition: max-height .25s ease !important;
}

.accordion-item>button i,
.accordion-item>button svg,
.accordion-chevron,
.chevron-icon {
    transition: transform .2s ease !important;
}

.bdp-guides-page-header {
    padding-top: 7rem !important;
}

/* -------------------------------------------------------------------------
   Final mobile UI normalization
   These rules are intentionally narrow: they fix only controls that became
   oversized after local SVG replacement. They do not re-enable expensive
   page-wide animation, blur, fixed backgrounds, or GPU promotion.
   ------------------------------------------------------------------------- */

/* Local SVG icons must never inherit an unconstrained browser SVG viewport. */
[data-lucide] {
    flex: 0 0 auto;
}

@media (max-width: 767px) {

    /* Product FAQ/accordion chevrons: match the compact BDP Guides control.
       BDP Guides already has its own 32px circular wrapper; these rules make
       the direct chevrons on the other product pages use the same footprint. */
    button[onclick="toggleAccordion(this)"]>svg[data-lucide="chevron-down"],
    button[onclick="toggleAccordion(this)"]>i[data-lucide="chevron-down"],
    button[onclick="toggleAccordion(this)"]>.chevron-icon,
    .accordion-item>button>svg[data-lucide="chevron-down"],
    .accordion-item>button>i[data-lucide="chevron-down"],
    .accordion-item>button>.chevron-icon {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        flex: 0 0 32px !important;
        box-sizing: border-box !important;
        padding: 8px !important;
        border-radius: 9999px !important;
    }

    /* Keep accordion headers visually consistent without changing their content. */
    button[onclick="toggleAccordion(this)"] {
        min-height: 64px;
    }

    /* BDP Guides uses entrance animations that intentionally start at opacity:0.
       The iPhone performance guard disables animations, so those elements would
       otherwise remain invisible forever. Reveal them directly on phones. */
    .animate-slide-left,
    .animate-slide-right {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        visibility: visible !important;
    }

    /* Keep the BDP Guides accordion trigger footprint identical to its icon
       wrapper even though global mobile transitions are disabled. */
    .accordion-trigger>span:last-child {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        flex: 0 0 32px !important;
    }

    .accordion-trigger>span:last-child>i.fa-chevron-down {
        font-size: 12px !important;
        line-height: 1 !important;
    }
}

/* =========================================================
   MOBILE REVIEWS MARQUEE
   Restore only the lightweight reviews animation.
   Do NOT re-enable animations globally.
   ========================================================= */

@keyframes efb-mobile-review-marquee {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-50%, 0, 0);
    }
}

@media (max-width: 768px) {
    .marquee-track {
        animation: efb-mobile-review-marquee 35s linear infinite !important;
        transform: translate3d(0, 0, 0);
    }
}

/* =========================================================
   BDP TERMS & CONDITIONS TABLE
   Allow horizontal scrolling on narrow screens.
   Desktop remains unchanged.
   ========================================================= */

.terms-table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.terms-table-scroll .legal-table {
    min-width: 620px;
}