/* ==========================================================================
   FAQ Page — Premium Theme (Ninico)
   platform/themes/ninico/public/css/faqs.css
   Scoped entirely under .fq-page. Safe to enqueue only on this page.
   ========================================================================== */

.fq-page {
    --fq-primary: #d51243;
    --fq-primary-dark: #a80d34;
    --fq-primary-soft: rgba(213, 18, 67, 0.08);
    --fq-ink: #16151a;
    --fq-slate: #4b4b52;
    --fq-muted: #7a7a82;
    --fq-bg: #ffffff;
    --fq-bg-soft: #f8f8f8;
    --fq-border: #ececec;
    --fq-success: #16a34a;
    --fq-success-bg: #f0fdf4;
    --fq-radius-lg: 24px;
    --fq-radius-md: 20px;
    --fq-radius-sm: 14px;
    --fq-shadow-sm: 0 4px 20px rgba(20, 20, 20, 0.05);
    --fq-shadow-md: 0 14px 40px rgba(20, 20, 20, 0.08);
    --fq-shadow-lg: 0 26px 64px rgba(20, 20, 20, 0.12);
    --fq-ease: cubic-bezier(.22, .61, .36, 1);

    position: relative;
    background: var(--fq-bg);
    color: var(--fq-slate);
    font-family: 'Jost', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.7;
    overflow-x: clip;
}

.fq-page * { box-sizing: border-box; }
.fq-page h1, .fq-page h2, .fq-page h3 { color: var(--fq-ink); font-weight: 600; margin: 0; letter-spacing: 0.1px; }
.fq-page svg { display: block; }
.fq-page mark { background: rgba(213, 18, 67, 0.18); color: inherit; border-radius: 3px; padding: 0 1px; }

.fq-container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.fq-container--narrow { max-width: 860px; }
.fq-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.fq-section { padding: 76px 0; position: relative; }
.fq-section--soft { background: var(--fq-bg-soft); }
.fq-section__head { text-align: center; max-width: 640px; margin: 0 auto 44px; }
.fq-eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    font-weight: 600; font-size: 12px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--fq-primary); margin-bottom: 12px;
}
.fq-section__head h2 { font-size: clamp(26px, 3.2vw, 36px); margin-bottom: 10px; }
.fq-section__head p { color: var(--fq-muted); font-size: 15.5px; margin: 0; }

/* ---------- Scroll progress ---------- */
.fq-progress {
    position: fixed; top: 0; left: 0; height: 3px; width: 0%;
    background: linear-gradient(90deg, var(--fq-primary), #ff6b8b);
    z-index: 9999; transition: width .1s linear;
}

/* ---------- Buttons ---------- */
.fq-btn {
    position: relative; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 15px 32px; border-radius: 999px;
    font-weight: 600; font-size: 14.5px; letter-spacing: 0.02em;
    text-decoration: none; border: 1px solid transparent; cursor: pointer;
    white-space: nowrap;
    transition: transform .35s var(--fq-ease), box-shadow .35s var(--fq-ease), background-color .35s var(--fq-ease), color .35s var(--fq-ease);
}
.fq-btn svg { width: 17px; height: 17px; }
.fq-btn--primary { background: var(--fq-primary); color: #fff; }
.fq-btn--primary:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(213, 18, 67, 0.3); background: var(--fq-primary-dark); }
.fq-ripple { position: absolute; border-radius: 50%; transform: scale(0); animation: fq-ripple .6s var(--fq-ease); background: rgba(255, 255, 255, 0.45); pointer-events: none; }
@keyframes fq-ripple { to { transform: scale(3); opacity: 0; } }

/* ---------- Hero ---------- */
.fq-hero { position: relative; overflow: hidden; padding: 108px 0 70px; text-align: center; background: linear-gradient(180deg, #fff7f9 0%, #ffffff 75%); }
.fq-hero__blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.35; animation: fq-blob-float 16s ease-in-out infinite; pointer-events: none; }
.fq-hero__blob--1 { width: 380px; height: 380px; background: var(--fq-primary); top: -140px; left: -100px; }
.fq-hero__blob--2 { width: 300px; height: 300px; background: #ffb6c8; bottom: -120px; right: -80px; animation-delay: -6s; }
.fq-hero__blob--3 { width: 220px; height: 220px; background: #ffe1e8; top: 40%; left: 55%; animation-delay: -10s; }
@keyframes fq-blob-float { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(3%, -4%, 0) scale(1.08); } }
.fq-hero__inner { position: relative; z-index: 1; }

.fq-hero__mark {
    position: relative; width: 78px; height: 78px; margin: 0 auto 22px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 22px; background: var(--fq-ink); color: var(--fq-primary);
    animation: fq-float 4s ease-in-out infinite;
}
.fq-hero__mark svg { width: 34px; height: 34px; }
@keyframes fq-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-10px) rotate(-4deg); } }

.fq-hero__floaters { position: absolute; inset: 0; pointer-events: none; }
.fq-hero__floater {
    position: absolute; display: flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 14px;
    background: #fff; border: 1px solid var(--fq-border); box-shadow: var(--fq-shadow-sm);
    color: var(--fq-primary); animation: fq-float 5s ease-in-out infinite;
}
.fq-hero__floater svg { width: 20px; height: 20px; }
.fq-hero__floater--1 { top: 18%; left: 10%; animation-delay: -1s; }
.fq-hero__floater--2 { top: 28%; right: 12%; animation-delay: -2.4s; }
.fq-hero__floater--3 { bottom: 20%; left: 16%; animation-delay: -3.6s; }
.fq-hero__floater--4 { bottom: 14%; right: 18%; animation-delay: -0.6s; }

.fq-hero__title { font-size: clamp(34px, 5.4vw, 54px); margin-bottom: 14px; }
.fq-hero__subtitle { max-width: 600px; margin: 0 auto 34px; font-size: 16px; color: var(--fq-muted); }

/* ---------- Search box ---------- */
.fq-search {
    position: relative; max-width: 560px; margin: 0 auto;
    display: flex; align-items: center; gap: 10px;
    background: #fff; border: 1px solid var(--fq-border); border-radius: 999px;
    padding: 8px 8px 8px 22px; box-shadow: var(--fq-shadow-md);
    transition: box-shadow .35s var(--fq-ease), border-color .35s var(--fq-ease);
}
.fq-search:focus-within { border-color: var(--fq-primary); box-shadow: 0 16px 40px rgba(213, 18, 67, 0.16); }
.fq-search svg { width: 19px; height: 19px; color: var(--fq-muted); flex-shrink: 0; }
.fq-search input {
    flex: 1; border: none; outline: none; background: none;
    font-family: inherit; font-size: 15px; color: var(--fq-ink); padding: 10px 0;
}
.fq-search input::placeholder { color: #b6b6bd; }
.fq-search__clear {
    display: none; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--fq-bg-soft); color: var(--fq-muted); flex-shrink: 0;
    transition: background .25s var(--fq-ease);
}
.fq-search__clear svg { width: 15px; height: 15px; }
.fq-search__clear:hover { background: var(--fq-border); }
.fq-search.has-value .fq-search__clear { display: flex; }
.fq-search__count { text-align: center; margin-top: 14px; font-size: 13px; color: var(--fq-muted); min-height: 18px; }

/* Sticky search (mobile) */
.fq-sticky-search {
    position: sticky; top: 0; z-index: 40;
    background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--fq-border);
    padding: 12px 0; display: none;
}
.fq-sticky-search .fq-search { box-shadow: var(--fq-shadow-sm); }

/* ---------- Grids ---------- */
.fq-grid { display: grid; gap: 22px; }
.fq-grid--6 { grid-template-columns: repeat(6, 1fr); }
.fq-grid--5 { grid-template-columns: repeat(5, 1fr); }
.fq-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- Category cards (sticky nav pills too) ---------- */
.fq-cat {
    position: relative; isolation: isolate; overflow: hidden;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--fq-border); border-radius: var(--fq-radius-md);
    padding: 24px 16px; text-align: center; cursor: pointer;
    box-shadow: var(--fq-shadow-sm);
    transition: transform .4s var(--fq-ease), box-shadow .4s var(--fq-ease), border-color .4s var(--fq-ease);
}
.fq-cat::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
    background: linear-gradient(135deg, var(--fq-primary), transparent 40%, transparent 60%, var(--fq-primary));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0; transition: opacity .4s var(--fq-ease); z-index: -1;
}
.fq-cat:hover, .fq-cat.is-active { transform: translateY(-5px); box-shadow: var(--fq-shadow-md); border-color: rgba(213, 18, 67, 0.3); }
.fq-cat:hover::before, .fq-cat.is-active::before { opacity: 1; }
.fq-cat__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; margin: 0 auto 12px; border-radius: 14px;
    background: linear-gradient(135deg, var(--fq-primary), #ff6b8b); color: #fff;
    transition: transform .4s var(--fq-ease);
}
.fq-cat:hover .fq-cat__icon { transform: scale(1.1) rotate(-4deg); }
.fq-cat__icon svg { width: 22px; height: 22px; }
.fq-cat span { display: block; font-size: 13.5px; font-weight: 600; color: var(--fq-ink); }
.fq-cat small { display: block; font-size: 11.5px; color: var(--fq-muted); margin-top: 2px; }

/* ---------- Sticky category nav ---------- */
.fq-catnav { position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--fq-border); }
.fq-catnav__inner { display: flex; gap: 10px; overflow-x: auto; padding: 14px 0; scrollbar-width: none; }
.fq-catnav__inner::-webkit-scrollbar { display: none; }
.fq-catnav__pill {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 18px; border-radius: 999px; border: 1px solid var(--fq-border);
    background: #fff; color: var(--fq-slate); font-size: 13.5px; font-weight: 600;
    cursor: pointer; white-space: nowrap;
    transition: background .3s var(--fq-ease), color .3s var(--fq-ease), border-color .3s var(--fq-ease);
}
.fq-catnav__pill svg { width: 15px; height: 15px; }
.fq-catnav__pill:hover { border-color: var(--fq-primary); color: var(--fq-primary); }
.fq-catnav__pill.is-active { background: var(--fq-primary); border-color: var(--fq-primary); color: #fff; }

/* ---------- Popular questions ---------- */
.fq-popular-card {
    background: #fff; border: 1px solid var(--fq-border); border-radius: var(--fq-radius-md);
    padding: 24px; box-shadow: var(--fq-shadow-sm);
    transition: transform .4s var(--fq-ease), box-shadow .4s var(--fq-ease);
    display: flex; flex-direction: column; gap: 10px;
}
.fq-popular-card:hover { transform: translateY(-6px); box-shadow: var(--fq-shadow-md); }
.fq-popular-card__badge {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px; border-radius: 999px; background: var(--fq-primary-soft); color: var(--fq-primary);
    font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.fq-popular-card__badge svg { width: 12px; height: 12px; }
.fq-popular-card h3 { font-size: 15.5px; line-height: 1.5; }
.fq-popular-card p { margin: 0; font-size: 13.5px; color: var(--fq-muted); }

/* ---------- Premium FAQ accordion ---------- */
.fq-group { margin-bottom: 48px; }
.fq-group:last-child { margin-bottom: 0; }
.fq-group__title { display: flex; align-items: center; gap: 10px; font-size: 19px; margin-bottom: 20px; }
.fq-group__title svg { width: 20px; height: 20px; color: var(--fq-primary); }

.fq-list { display: flex; flex-direction: column; gap: 16px; }
.fq-item {
    position: relative;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--fq-border); border-radius: var(--fq-radius-md);
    box-shadow: var(--fq-shadow-sm);
    overflow: hidden;
    transition: box-shadow .35s var(--fq-ease), border-color .35s var(--fq-ease), transform .3s var(--fq-ease);
}
.fq-item:hover { box-shadow: var(--fq-shadow-md); border-color: rgba(213, 18, 67, 0.25); }
.fq-item.is-hidden { display: none; }
.fq-item__trigger {
    width: 100%; display: flex; align-items: center; gap: 16px;
    background: none; border: none; cursor: pointer; text-align: left;
    padding: 22px 24px; font-family: inherit;
}
.fq-item__icon {
    flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 12px;
    background: var(--fq-primary-soft); color: var(--fq-primary);
}
.fq-item__icon svg { width: 19px; height: 19px; }
.fq-item__q { flex: 1; font-size: 16px; font-weight: 600; color: var(--fq-ink); }
.fq-item__chevron { width: 20px; height: 20px; flex-shrink: 0; color: var(--fq-primary); transition: transform .35s var(--fq-ease); }
.fq-item.is-open .fq-item__chevron { transform: rotate(180deg); }
.fq-item__panel { max-height: 0; overflow: hidden; transition: max-height .45s var(--fq-ease); }
.fq-item__body { padding: 0 24px 22px 80px; font-size: 14.5px; color: var(--fq-slate); }
.fq-item__body p { margin: 0; }

/* Helpful voting */
.fq-vote { display: flex; align-items: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.fq-vote__label { font-size: 12.5px; color: var(--fq-muted); }
.fq-vote__btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: 999px; border: 1px solid var(--fq-border);
    background: #fff; color: var(--fq-slate); font-size: 12.5px; font-weight: 600; cursor: pointer;
    transition: background .25s var(--fq-ease), color .25s var(--fq-ease), border-color .25s var(--fq-ease);
}
.fq-vote__btn svg { width: 14px; height: 14px; }
.fq-vote__btn:hover { border-color: var(--fq-primary); color: var(--fq-primary); }
.fq-vote__btn.is-selected { background: var(--fq-primary); border-color: var(--fq-primary); color: #fff; }
.fq-vote__thanks { display: none; font-size: 12.5px; color: var(--fq-success); font-weight: 600; align-items: center; gap: 6px; }
.fq-vote__thanks svg { width: 14px; height: 14px; }
.fq-vote.is-voted .fq-vote__thanks { display: inline-flex; }
.fq-vote.is-voted .fq-vote__buttons { display: none; }

/* Empty state */
.fq-empty { text-align: center; padding: 60px 20px; color: var(--fq-muted); display: none; }
.fq-empty.is-visible { display: block; }
.fq-empty svg { width: 46px; height: 46px; color: var(--fq-border); margin: 0 auto 16px; }

/* ---------- Help / support cards ---------- */
.fq-help-card {
    background: #fff; border: 1px solid var(--fq-border); border-radius: var(--fq-radius-md);
    padding: 26px 20px; text-align: center; box-shadow: var(--fq-shadow-sm);
    text-decoration: none; display: block; cursor: pointer;
    transition: transform .4s var(--fq-ease), box-shadow .4s var(--fq-ease);
}
.fq-help-card:hover { transform: translateY(-6px); box-shadow: var(--fq-shadow-md); }
.fq-help-card__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 50px; height: 50px; margin: 0 auto 14px; border-radius: 50%;
    background: var(--fq-primary-soft); color: var(--fq-primary);
}
.fq-help-card__icon svg { width: 22px; height: 22px; }
.fq-help-card h3 { font-size: 14.5px; margin-bottom: 4px; }
.fq-help-card p { margin: 0; font-size: 12.5px; color: var(--fq-muted); }

/* ---------- CTA ---------- */
.fq-cta {
    position: relative; overflow: hidden;
    background: linear-gradient(155deg, var(--fq-ink) 0%, #2a2730 100%);
    border-radius: var(--fq-radius-lg); padding: 56px 40px; text-align: center; color: #fff;
}
.fq-cta__glow { position: absolute; inset: 0; background: radial-gradient(circle at 25% 30%, rgba(213, 18, 67, 0.35) 0%, transparent 45%); pointer-events: none; }
.fq-cta__inner { position: relative; z-index: 1; }
.fq-cta h2 { color: #fff; font-size: clamp(26px, 3.4vw, 34px); margin-bottom: 12px; }
.fq-cta p { color: rgba(255, 255, 255, 0.65); margin: 0 0 30px; font-size: 15px; }
.fq-cta .fq-btn--primary { background: var(--fq-primary); }

/* ---------- Back to top ---------- */
.fq-top {
    position: fixed; right: 26px; bottom: 26px; z-index: 999;
    width: 46px; height: 46px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--fq-primary); color: #fff; border: none; cursor: pointer;
    box-shadow: var(--fq-shadow-md);
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: opacity .3s var(--fq-ease), transform .3s var(--fq-ease), background .3s var(--fq-ease), visibility .3s;
}
.fq-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.fq-top:hover { background: var(--fq-primary-dark); }
.fq-top svg { width: 20px; height: 20px; }

/* ---------- Scroll-reveal + stagger ---------- */
[data-fq-anim] {
    opacity: 0; transform: translate3d(0, 24px, 0); will-change: transform, opacity;
    transition: opacity .8s var(--fq-ease), transform .8s var(--fq-ease);
}
[data-fq-anim="fade-left"] { transform: translate3d(-26px, 0, 0); }
[data-fq-anim="fade-right"] { transform: translate3d(26px, 0, 0); }
[data-fq-anim="zoom-in"] { transform: scale3d(0.92, 0.92, 1); }
[data-fq-anim].is-visible { opacity: 1; transform: translate3d(0, 0, 0) scale3d(1, 1, 1); }
[data-fq-delay="1"] { transition-delay: .06s; }
[data-fq-delay="2"] { transition-delay: .12s; }
[data-fq-delay="3"] { transition-delay: .18s; }
[data-fq-delay="4"] { transition-delay: .24s; }
[data-fq-delay="5"] { transition-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
    [data-fq-anim] { opacity: 1; transform: none; transition: none; }
    .fq-page * { animation: none !important; transition: none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .fq-grid--6 { grid-template-columns: repeat(3, 1fr); }
    .fq-grid--5 { grid-template-columns: repeat(3, 1fr); }
    .fq-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .fq-section { padding: 52px 0; }
    .fq-hero { padding: 84px 0 56px; }
    .fq-grid--6 { grid-template-columns: repeat(2, 1fr); }
    .fq-grid--5 { grid-template-columns: repeat(2, 1fr); }
    .fq-grid--4 { grid-template-columns: 1fr 1fr; }
    .fq-item__body { padding-left: 24px; }
    .fq-hero__floater { display: none; }
    .fq-sticky-search { display: block; }
}

@media (max-width: 560px) {
    .fq-grid--6, .fq-grid--5, .fq-grid--4 { grid-template-columns: 1fr 1fr; }
    .fq-cta { padding: 36px 24px; }
}