/* ============================================
   FAQ Page Styles (FAQ.cshtml)
   2026 UI/UX — mobile + desktop, RTL-first
   Palette aligned with the site indigo identity
   ============================================ */

:root {
    --faq-primary: #6366f1;
    --faq-primary-2: #818cf8;
    --faq-deep: #4338ca;
    --faq-ink: #0f172a;
    --faq-muted: #64748b;
    --faq-border: #e6ebf2;
    --faq-surface: #ffffff;
    --faq-bg: #f6f7fb;
    --faq-radius: 1rem;
    --faq-radius-lg: 1.35rem;
    --faq-shadow-sm: 0 1px 2px rgba(15,23,42,.05), 0 4px 14px rgba(15,23,42,.05);
    --faq-shadow: 0 18px 50px -18px rgba(99,102,241,.3);
    --faq-shadow-lg: 0 28px 70px -24px rgba(79,70,229,.45);
}

* {
    font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, Arial, sans-serif !important;
}

body {
    background: var(--faq-bg);
}

/* ================= Hero ================= */
.faq-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(2.4rem, 6vw, 4.2rem) 1rem;
    background:
        radial-gradient(900px 420px at 85% -10%, rgba(129,140,248,.55), transparent 60%),
        radial-gradient(700px 380px at 8% 115%, rgba(244,114,182,.25), transparent 60%),
        linear-gradient(135deg, #312e81 0%, var(--faq-deep) 45%, var(--faq-primary) 100%);
    color: #fff;
    text-align: center;
    border-radius: 1.5rem;
    margin-bottom: 2.5rem;
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.08), 0 24px 60px -30px rgba(79,70,229,.5);
}

.faq-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .5;
    pointer-events: none;
}
.faq-orb-1 { width: 300px; height: 300px; top: -130px; right: -90px; background: rgba(165,180,252,.55); }
.faq-orb-2 { width: 250px; height: 250px; bottom: -140px; left: -70px; background: rgba(244,114,182,.35); }
.faq-orb-3 { width: 130px; height: 130px; top: 38%; left: 16%; background: rgba(252,211,77,.3); }

.faq-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 46rem;
    margin-inline: auto;
}

.faq-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.3);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
    padding: .5rem 1.25rem;
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(0,0,0,.16);
}

.faq-hero-title {
    font-weight: 800;
    font-size: clamp(1.8rem, 5vw, 2.7rem);
    line-height: 1.5;
    margin: 1.1rem 0 .7rem;
    text-shadow: 0 4px 24px rgba(0,0,0,.22);
}

.faq-hero-sub {
    color: rgba(255,255,255,.86);
    font-size: 1.02rem;
    max-width: 38rem;
    margin: 0 auto 1.9rem;
    line-height: 1.9;
}

/* ================= Search ================= */
.faq-search { max-width: 40rem; margin-inline: auto; }

.faq-search-inner {
    display: flex;
    align-items: center;
    gap: .4rem;
    background: #fff;
    border-radius: 1.1rem;
    padding: .45rem .55rem .45rem .5rem;
    box-shadow: 0 24px 60px -18px rgba(15,23,42,.45);
    border: 1px solid rgba(255,255,255,.6);
    transition: box-shadow .2s ease;
}
.faq-search-inner:focus-within {
    box-shadow: 0 0 0 4px rgba(255,255,255,.28), 0 24px 60px -18px rgba(15,23,42,.45);
}

.faq-search-icon { color: #94a3b8; font-size: 1.1rem; padding: 0 .45rem 0 .55rem; flex-shrink: 0; }

.faq-search-input {
    flex: 1 1 0;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    padding: .7rem .35rem;
    font-size: 1rem;
    color: var(--faq-ink);
}
.faq-search-input::placeholder { color: #94a3b8; }
.faq-search-input::-webkit-search-cancel-button,
.faq-search-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

.faq-search-clear {
    border: 0;
    background: #eef2ff;
    color: var(--faq-primary);
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}
.faq-search-clear:hover { background: #e0e7ff; transform: scale(1.06); }
.faq-search-clear:focus-visible { outline: 3px solid rgba(255,255,255,.5); outline-offset: 2px; }

.faq-search-meta {
    margin-top: .6rem;
    color: rgba(255,255,255,.82);
    font-size: .85rem;
    min-height: 1.3em;
}

/* ================= List ================= */
.faq-body-wrap {
    max-width: 860px;
    margin-inline: auto;
    padding-bottom: 1rem;
}

.faq-container { max-width: 860px; margin-inline: auto; }

.faq-item { margin-bottom: 1rem; }
.faq-item-hidden { display: none !important; }

.faq-item .card {
    border: 1px solid var(--faq-border);
    border-radius: var(--faq-radius-lg);
    background: var(--faq-surface);
    box-shadow: var(--faq-shadow-sm);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.faq-item .card:hover {
    transform: translateY(-3px);
    box-shadow: var(--faq-shadow);
    border-color: rgba(99,102,241,.25);
}

/* Header / question button */
.faq-header {
    background: #fff;
    border: none !important;
    padding: 1.15rem 1.25rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--faq-ink);
    width: 100%;
    display: flex;
    align-items: center;
    gap: .9rem;
    text-align: right;
    cursor: pointer;
    transition: background .25s ease, color .25s ease;
}
.faq-header:focus { box-shadow: none; outline: none; }
.faq-header:focus-visible { outline: 3px solid rgba(99,102,241,.5); outline-offset: -3px; }

.faq-header .question-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(99,102,241,.14), rgba(124,58,237,.14));
    color: var(--faq-primary);
    font-size: 1.3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .25s ease, color .25s ease;
}

.faq-header .question-text {
    flex: 1 1 0;
    min-width: 0;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.faq-header .faq-chevron {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #f1f5f9;
    color: var(--faq-muted);
    font-size: .95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .3s ease, background .25s ease, color .25s ease;
}

/* Open state */
.faq-header:not(.collapsed) {
    background: linear-gradient(135deg, var(--faq-primary), var(--faq-primary-2));
    color: #fff;
}
.faq-header:not(.collapsed) .question-icon { background: rgba(255,255,255,.22); color: #fff; }
.faq-header:not(.collapsed) .faq-chevron { transform: rotate(180deg); background: rgba(255,255,255,.22); color: #fff; }
.faq-header:not(.collapsed):focus-visible { outline-color: rgba(255,255,255,.6); }

/* Body */
.faq-body {
    background: #fff;
    border-top: 1px solid #f1f5f9;
    padding: 1.1rem 1.35rem 1.4rem;
    font-size: .98rem;
    line-height: 2;
    color: #475569;
}
.faq-body p { margin-bottom: .9rem; }
.faq-body p:last-child { margin-bottom: 0; }
.faq-body strong { color: var(--faq-ink); font-weight: 700; }

/* ================= Empty state ================= */
.faq-empty {
    text-align: center;
    padding: 3rem 1.5rem;
    border: 1.5px dashed #cbd5e1;
    border-radius: var(--faq-radius-lg);
    background: #fff;
    color: var(--faq-muted);
    margin-top: .5rem;
}
.faq-empty i { display: block; font-size: 2.4rem; color: #c7d2fe; margin-bottom: .8rem; }
.faq-empty h3 { font-weight: 800; color: var(--faq-ink); margin-bottom: .4rem; }
.faq-empty p { margin-bottom: 1.2rem; }
.faq-empty-btn {
    border: 0;
    cursor: pointer;
    background: linear-gradient(135deg, var(--faq-primary), var(--faq-primary-2));
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
    padding: .7rem 1.6rem;
    border-radius: 999px;
    transition: transform .2s ease, box-shadow .2s ease;
    box-shadow: 0 10px 24px -10px rgba(99,102,241,.6);
}
.faq-empty-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(99,102,241,.7); }
.faq-empty-btn:focus-visible { outline: 3px solid rgba(99,102,241,.5); outline-offset: 2px; }

/* ================= CTA ================= */
.contact-cta {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--faq-deep) 0%, var(--faq-primary) 55%, var(--faq-primary-2) 100%);
    color: #fff;
    padding: clamp(2.4rem, 6vw, 3.4rem) clamp(1.2rem, 4vw, 2.5rem);
    text-align: center;
    border-radius: var(--faq-radius-lg);
    box-shadow: var(--faq-shadow-lg);
    margin-top: 2rem;
}
.contact-cta::before {
    content: '';
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    filter: blur(40px);
    top: -120px;
    right: -80px;
}
.contact-cta::after {
    content: '';
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(255,255,255,.07);
    filter: blur(30px);
    bottom: -90px;
    left: -60px;
}

.contact-cta-content { position: relative; z-index: 1; max-width: 40rem; margin-inline: auto; }
.contact-cta h3 { font-weight: 800; font-size: clamp(1.4rem, 4vw, 1.9rem); margin-bottom: .7rem; }
.contact-cta p { color: rgba(255,255,255,.92); line-height: 1.9; margin-bottom: 1.6rem; }

.faq-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; }

.faq-cta-btn-primary,
.faq-cta-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    text-decoration: none;
    font-weight: 700;
    padding: .85rem 1.6rem;
    border-radius: 999px;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.faq-cta-btn-primary {
    background: #fff;
    color: var(--faq-deep);
    font-weight: 800;
    box-shadow: 0 10px 26px -10px rgba(0,0,0,.35);
}
.faq-cta-btn-primary:hover { color: var(--faq-deep); transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(0,0,0,.4); }

.faq-cta-btn-ghost {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.38);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
}
.faq-cta-btn-ghost:hover { background: rgba(255,255,255,.22); color: #fff; transform: translateY(-2px); }

.faq-cta-btn-primary:focus-visible,
.faq-cta-btn-ghost:focus-visible { outline: 3px solid rgba(255,255,255,.5); outline-offset: 2px; }

/* ================= Responsive ================= */
@media (max-width: 767.98px) {
    .faq-hero { border-radius: 1.25rem; }
}

@media (max-width: 575.98px) {
    .faq-hero {
        padding: 2rem .9rem;
        margin-bottom: 1.5rem;
        border-radius: 1.1rem;
    }
    .faq-hero-pill { font-size: .78rem; padding: .42rem 1rem; }
    .faq-hero-sub { font-size: .95rem; margin-bottom: 1.4rem; }

    .faq-search-inner { border-radius: .9rem; padding: .35rem .45rem; }
    .faq-search-input { font-size: .95rem; padding: .6rem .25rem; }

    .faq-header { padding: .95rem 1rem; gap: .7rem; font-size: .97rem; }
    .faq-header .question-icon { width: 36px; height: 36px; font-size: 1.15rem; }
    .faq-body { padding: .9rem 1rem 1.1rem; font-size: .92rem; }

    .faq-cta-actions { flex-direction: column; }
    .faq-cta-btn-primary,
    .faq-cta-btn-ghost { width: 100%; }

    .faq-empty { padding: 2.2rem 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
    .faq-hero,
    .faq-item .card,
    .faq-header,
    .faq-header .faq-chevron,
    .faq-search-inner,
    .faq-search-clear,
    .faq-empty-btn,
    .faq-cta-btn-primary,
    .faq-cta-btn-ghost {
        transition: none !important;
        transform: none !important;
    }
    .faq-item .card:hover { transform: none; }
}