/* ==========================================================
   zxacc — FAQ "path" section (Step 4), "Blur Focus" mood
   [UPGRADE] Replaces the old click-accordion FAQ with a scroll-driven
   zigzag path (inspired by a project-timeline pattern), recolored to
   the site's own sky-blue / cream / navy / gold palette. Each question
   starts blurred + slightly enlarged and snaps into sharp focus right
   when the growing line reaches it (see theme-faq-path.js). Account-
   brand icon chips (14-icon pack, cycled per item) float along the
   path the same way, then settle once the line moves past.
   Old .faq-item/.faq-question/.faq-answer markup + its CSS in
   theme-scroll-fx.css and JS in theme-scroll-fx.js are left on disk,
   inert — this file introduces new selectors only (.faqpath-*).
   Loaded last in the chain (after theme-product-request.css).
   ========================================================== */

.faq-section { background: var(--bg-primary, #fff); }
.faq-section { background-image:
    radial-gradient(circle at 25% 10%, rgba(82,132,176,.09), transparent 45%),
    radial-gradient(circle at 78% 82%, rgba(255,197,61,.08), transparent 45%);
}

.faqpath-wrap { position: relative; max-width: 860px; margin: 0 auto; padding-block: 10px 20px; }
.faqpath-svg-holder { position: absolute; inset-block-start: 0; inset-inline-start: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.faqpath-svg { width: 100%; height: 100%; display: block; }
.faqpath-line { transition: stroke-dashoffset .1s linear; }
.faqpath-dot { fill: #FFC53D; filter: drop-shadow(0 0 6px rgba(255,197,61,.65)); transition: opacity .3s; }

.faqpath-items { position: relative; z-index: 2; display: flex; flex-direction: column; }
.faqpath-item { min-height: 210px; display: flex; align-items: center; position: relative; }

/* ---- cards ("Blur Focus" mood): start out-of-focus and slightly
   enlarged, snap into sharp focus the instant the line reaches them —
   like a camera racking focus onto the question. ---- */
.faqpath-card {
    position: relative; z-index: 3; max-width: 320px; padding: 24px 22px 20px;
    background: rgba(255,255,255,.6); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.8); border-radius: 22px;
    box-shadow: 0 22px 44px -26px rgba(53,94,136,.32), inset 0 1px 0 rgba(255,255,255,.9);
    opacity: 0; filter: blur(9px); transform: scale(1.06);
    transition: opacity .6s ease, filter .6s ease, transform .6s ease;
}
.faqpath-item.is-visible .faqpath-card { opacity: 1; filter: blur(0); transform: scale(1); }
.faqpath-card.side-r { margin-inline-start: auto; margin-inline-end: calc(50% + 56px); text-align: start; }
.faqpath-card.side-l { margin-inline-end: auto; margin-inline-start: calc(50% + 56px); text-align: end; }

.faqpath-card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-block-end: 12px; }
.faqpath-card.side-l .faqpath-card-top { flex-direction: row-reverse; }
.faqpath-tag { font-size: 10.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: #355E88; }
.faqpath-num { font-family: 'Estedad', 'Vazirmatn', Tahoma, sans-serif; font-weight: 900; font-size: 22px; color: #5284B0; opacity: .22; }
.faqpath-q { font-family: 'Estedad', 'Vazirmatn', Tahoma, sans-serif; font-weight: 800; font-size: 16.5px; line-height: 1.6; margin: 0 0 8px; color: #173350; }
.faqpath-a { font-size: 12.5px; line-height: 1.9; margin: 0; color: #4d6883; }

/* ---- floating account-icon chips — same blur-focus entrance as the card ---- */
.faqpath-icons {
    position: absolute; z-index: 3; display: flex; gap: 9px; align-items: center;
    opacity: 0; filter: blur(7px); transform: scale(.7);
    transition: opacity .55s ease .05s, filter .55s ease .05s, transform .55s ease .05s;
}
.faqpath-item.is-visible .faqpath-icons { opacity: 1; filter: blur(0); transform: scale(1); }
.faqpath-icons.side-r { inset-inline-start: 50%; margin-inline-start: 34px; }
.faqpath-icons.side-l { inset-inline-end: 50%; margin-inline-end: 34px; }

.faqpath-icon-chip {
    width: 50px; height: 50px; border-radius: 15px; display: flex; align-items: center; justify-content: center;
    padding: 9px; background: rgba(255,255,255,.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.85); box-shadow: 0 12px 24px -12px rgba(53,94,136,.35);
}
.faqpath-icon-chip:nth-child(2) { transform: translateY(10px); }
.faqpath-icon-chip:nth-child(3) { transform: translateY(-6px); }
.faqpath-icon-chip img { width: 100%; height: 100%; object-fit: contain; }

/* float while scrolling through the item, then settle (freeze) once passed */
@keyframes faqpath-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-9px); }
}
.faqpath-item.is-visible:not(.is-settled) .faqpath-icon-chip { animation: faqpath-float 2.6s ease-in-out infinite; }
.faqpath-item.is-visible:not(.is-settled) .faqpath-icon-chip:nth-child(1) { animation-delay: 0s; }
.faqpath-item.is-visible:not(.is-settled) .faqpath-icon-chip:nth-child(2) { animation-delay: .28s; transform: translateY(10px); }
.faqpath-item.is-visible:not(.is-settled) .faqpath-icon-chip:nth-child(3) { animation-delay: .55s; transform: translateY(-6px); }
.faqpath-item.is-settled .faqpath-icon-chip { animation: none; transform: none; transition: transform .5s cubic-bezier(.2,.8,.2,1); }

/* ---------------------------------------------------------------
   Mobile — single column: icons flow above the card, line hugs the
   inline-start edge as a simple straight guide (no zigzag; the JS
   collapses to a fixed near-edge x on narrow viewports).
--------------------------------------------------------------- */
@media (max-width: 680px) {
    .faqpath-wrap { padding-inline-start: 50px; }
    /* .faqpath-svg-holder stays full-width (its base rule) — the SVG's
       viewBox is computed from the wrap's full width in JS, so the line
       (drawn near x=25) must live in that same coordinate space, not a
       CSS-narrowed box, or it gets horizontally squashed to a sliver. */
    .faqpath-item { min-height: 0; display: block; padding-block: 20px; }
    .faqpath-item:first-child { padding-block-start: 4px; }

    .faqpath-icons {
        position: static; inset-inline-start: auto; inset-inline-end: auto;
        margin: 0 0 12px !important; justify-content: flex-start; transform: scale(.5);
    }
    .faqpath-item.is-visible .faqpath-icons { transform: scale(1); }
    .faqpath-icon-chip { width: 42px; height: 42px; border-radius: 12px; }

    .faqpath-card,
    .faqpath-card.side-r,
    .faqpath-card.side-l {
        max-width: none; margin: 0; text-align: start; padding: 20px 18px 18px;
    }
    .faqpath-card.side-l .faqpath-card-top { flex-direction: row; }
}

/* ---- reduced motion: keep the scroll-linked reveal + path (it tracks the
   visitor's own scroll, it isn't an autoplaying loop) — only drop the small
   continuous icon-bob, which IS a looping animation. ---- */
@media (prefers-reduced-motion: reduce) {
    .faqpath-icon-chip { animation: none !important; }
}