/* =============================================================
   ATHANELEON — faq.css  (Συχνές Ερωτήσεις)
   prefix .fq-  ·  design tokens του global.css
   ============================================================= */

/* ---------------- HERO + ΑΝΑΖΗΤΗΣΗ ---------------- */
.fq-hero { background: radial-gradient(120% 90% at 80% 0%, rgba(196,162,78,.10), transparent 55%), var(--bg); padding-block: clamp(7rem, 6rem + 8vw, 10rem) var(--space-xl); border-bottom: 1px solid var(--line); text-align: center; }
.fq-hero-inner { max-width: 64ch; margin-inline: auto; }
.fq-hero-title { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--fs-800); line-height: 1.03; letter-spacing: -0.02em; margin-top: var(--space-xs); opacity: 0; transform: translateY(22px); animation: fqRise .9s cubic-bezier(.22,1,.36,1) .05s forwards; }
.fq-hero-sub { color: var(--text-muted); font-size: var(--fs-500); margin: var(--space-md) auto 0; opacity: 0; transform: translateY(22px); animation: fqRise .9s ease .2s forwards; }
.fq-hero-sub a { color: var(--accent-bright); }
.fq-search { display: flex; align-items: center; gap: .6em; max-width: 480px; margin: var(--space-lg) auto 0; background: var(--bg-alt); border: 1px solid var(--line); border-radius: 999px; padding: .7em 1.2em; color: var(--text-muted); }
.fq-search input { border: 0; background: none; outline: none; color: var(--text); font-family: var(--font-body); font-size: var(--fs-400); width: 100%; }
@keyframes fqRise { to { opacity: 1; transform: translateY(0); } }

/* ---------------- ΦΙΛΤΡΑ ---------------- */
.fq-body { background: var(--bg-alt); }
.fq-filters { display: flex; flex-wrap: wrap; gap: var(--space-2xs); justify-content: center; margin-bottom: var(--space-2xl); }
.fq-filter { border: 1.5px solid var(--line); background: var(--bg); color: var(--text-muted); font-family: var(--font-body); font-size: var(--fs-300); padding: .5em 1.1em; border-radius: 999px; cursor: pointer; transition: all var(--dur-fast) var(--ease); }
.fq-filter:hover { color: var(--text); border-color: var(--accent); }
.fq-filter.is-active { background: var(--accent); border-color: var(--accent); color: var(--c-black); font-weight: var(--weight-medium); }

/* ---------------- ΛΙΣΤΑ / ACCORDION ---------------- */
.fq-list { max-width: 78ch; margin: 0 auto; }
.fq-cat-title { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--fs-500); color: var(--accent); letter-spacing: var(--tracking-caps); text-transform: uppercase; margin: var(--space-xl) 0 var(--space-xs); }
.fq-cat-title:first-child { margin-top: 0; }
.fq-cat-title.is-hidden { display: none; }
.fq-item { border-bottom: 1px solid var(--line); }
.fq-item.is-hidden { display: none; }
.fq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); background: none; border: 0; cursor: pointer; text-align: left; color: var(--text); font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--fs-500); padding: var(--space-md) 0; transition: color var(--dur-fast) var(--ease); }
.fq-q:hover { color: var(--accent-bright); }
.fq-ic { position: relative; flex-shrink: 0; width: 18px; height: 18px; }
.fq-ic::before, .fq-ic::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: var(--accent); }
.fq-ic::before { width: 16px; height: 2px; }
.fq-ic::after { width: 2px; height: 16px; transition: transform var(--dur) var(--ease); }
.fq-q[aria-expanded="true"] .fq-ic::after { transform: translate(-50%,-50%) scaleY(0); }
.fq-a { overflow: hidden; max-height: 0; transition: max-height var(--dur) var(--ease); }
.fq-a > div { padding-bottom: var(--space-md); }
.fq-a p { color: var(--text-muted); font-size: var(--fs-400); line-height: 1.6; max-width: 68ch; }
.fq-a a { color: var(--accent-bright); }
.fq-a strong { color: var(--text); }
.fq-empty { text-align: center; color: var(--text-muted); margin-top: var(--space-xl); }

/* ---------------- CTA ---------------- */
.fq-cta { max-width: 60ch; margin: var(--space-2xl) auto 0; text-align: center; padding: var(--space-xl); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg); }
.fq-cta h2 { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--fs-600); }
.fq-cta p { color: var(--text-muted); margin: var(--space-2xs) 0 var(--space-lg); }

@media (prefers-reduced-motion: reduce) {
  .fq-hero-title, .fq-hero-sub { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   ΝΕΑ SECTIONS (Batch 5) — Δημοφιλείς ερωτήσεις · WhatsApp widget
   ============================================================ */
.fq-top { background: var(--bg); padding-block: var(--space-2xl) 0; }
.fq-top-title { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--fs-500); color: var(--accent); letter-spacing: var(--tracking-caps); text-transform: uppercase; text-align: center; margin-bottom: var(--space-lg); }
.fq-top-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-sm); max-width: 80ch; margin: 0 auto; }
@media (min-width: 40em) { .fq-top-grid { grid-template-columns: repeat(2, 1fr); } }
.fq-top-card { text-align: left; cursor: pointer; padding: var(--space-md) var(--space-lg); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-alt); color: var(--text); font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--fs-400); transition: all var(--dur-fast) var(--ease); }
.fq-top-card::after { content: " →"; color: var(--accent); }
.fq-top-card:hover { border-color: var(--accent); color: var(--accent-bright); transform: translateY(-3px); }

.fq-cta-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: center; }
.fq-wa { display: inline-flex; align-items: center; gap: .5em; }
@media (prefers-reduced-motion: reduce) { .fq-top-card:hover { transform: none; } }