/* Olympia Help & FAQ Centre — all selectors scoped to #olympia-faq */
html,body{margin:0;padding:0}
body{background:var(--of-ground)}

#olympia-faq *,#olympia-faq *::before,#olympia-faq *::after{box-sizing:border-box}
:root{
  --of-ground:#EFF2F3;--of-surface:#FFFFFF;--of-raised:#F6F8F9;--of-sunk:#E7EBED;
  --of-ink:#0F1518;--of-ink-2:#516067;--of-ink-3:#7A888F;
  --of-line:#D7DFE2;--of-line-soft:#E6EBED;
  --of-accent:#C8102E;--of-accent-2:#9C0C23;--of-accent-wash:rgba(200,16,46,.075);
  --of-flag:#8A6100;--of-flag-bg:rgba(214,158,20,.14);--of-flag-line:rgba(160,116,10,.35);
  --of-shadow:0 1px 2px rgba(15,21,24,.05),0 10px 28px -16px rgba(15,21,24,.24);
  --of-focus:#C8102E;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --of-ground:#0B1013;--of-surface:#131A1E;--of-raised:#182126;--of-sunk:#0F171A;
  --of-ink:#E7EDEF;--of-ink-2:#96A5AC;--of-ink-3:#77858C;
  --of-line:#212C32;--of-line-soft:#1A242A;
  --of-accent:#FF5468;--of-accent-2:#FF8A96;--of-accent-wash:rgba(255,84,104,.13);
  --of-flag:#E7C15A;--of-flag-bg:rgba(231,193,90,.12);--of-flag-line:rgba(231,193,90,.32);
  --of-shadow:0 1px 2px rgba(0,0,0,.45),0 10px 28px -16px rgba(0,0,0,.7);
  --of-focus:#FF8A96;
}}
:root[data-theme="dark"]{
  --of-ground:#0B1013;--of-surface:#131A1E;--of-raised:#182126;--of-sunk:#0F171A;
  --of-ink:#E7EDEF;--of-ink-2:#96A5AC;--of-ink-3:#77858C;
  --of-line:#212C32;--of-line-soft:#1A242A;
  --of-accent:#FF5468;--of-accent-2:#FF8A96;--of-accent-wash:rgba(255,84,104,.13);
  --of-flag:#E7C15A;--of-flag-bg:rgba(231,193,90,.12);--of-flag-line:rgba(231,193,90,.32);
  --of-shadow:0 1px 2px rgba(0,0,0,.45),0 10px 28px -16px rgba(0,0,0,.7);
  --of-focus:#FF8A96;
}

#olympia-faq{
  background:var(--of-ground);color:var(--of-ink);
  font-family:"IBM Plex Sans Arabic","Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;padding-bottom:3rem;
}
#olympia-faq h1,#olympia-faq h2,#olympia-faq h3,#olympia-faq .of-brand{
  font-family:"Rubik","IBM Plex Sans Arabic","Segoe UI",system-ui,sans-serif;
  margin:0;text-wrap:balance;
}
#olympia-faq p{margin:0}
#olympia-faq a{color:inherit}
#olympia-faq :focus-visible{outline:2px solid var(--of-focus);outline-offset:2px;border-radius:6px}
#olympia-faq .of-shell{max-width:1140px;margin:0 auto;padding:0 1.1rem}
@media (min-width:720px){#olympia-faq .of-shell{padding:0 1.6rem}}
#olympia-faq .of-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* language visibility (bilingual preview build only) */
#olympia-faq[data-lang="ar"] .of-en{display:none}
#olympia-faq[data-lang="en"] .of-ar{display:none}

/* ---------- bar ---------- */
#olympia-faq .of-bar{position:sticky;top:0;z-index:30;background:var(--of-surface);border-bottom:1px solid var(--of-line)}
#olympia-faq .of-bar-in{display:flex;align-items:center;gap:.75rem;min-height:56px}
#olympia-faq .of-brand{display:flex;align-items:center;gap:.5rem;font-weight:700;font-size:1rem;text-decoration:none;letter-spacing:-.01em}
#olympia-faq .of-dot{width:9px;height:9px;border-radius:50%;background:var(--of-accent);flex:none}
#olympia-faq .of-bar-sp{flex:1}
#olympia-faq .of-bar-link{font-size:.85rem;font-weight:600;text-decoration:none;color:var(--of-ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}
#olympia-faq .of-bar-link:hover{color:var(--of-accent)}
@media (max-width:600px){#olympia-faq .of-bar-tel{display:none}}
#olympia-faq .of-lang{display:inline-flex;border:1px solid var(--of-line);border-radius:999px;overflow:hidden;background:var(--of-raised)}
#olympia-faq .of-lang button,#olympia-faq .of-lang a{font:inherit;font-size:.78rem;font-weight:600;border:0;background:transparent;color:var(--of-ink-2);padding:.34rem .78rem;cursor:pointer;text-decoration:none;line-height:1.6}
#olympia-faq .of-lang button[aria-pressed="true"]{background:var(--of-ink);color:var(--of-surface)}

/* ---------- hero ---------- */
#olympia-faq .of-hero{padding:2.2rem 0 1.6rem;border-bottom:1px solid var(--of-line)}
@media (min-width:720px){#olympia-faq .of-hero{padding:3.4rem 0 2.2rem}}
#olympia-faq .of-eyebrow{font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--of-accent);margin-bottom:.8rem}
#olympia-faq h1{font-size:clamp(1.75rem,1.15rem + 2.7vw,2.9rem);font-weight:700;letter-spacing:-.022em;line-height:1.18}
#olympia-faq .of-lede{margin-top:.85rem;color:var(--of-ink-2);max-width:60ch;font-size:1rem}
#olympia-faq .of-search{position:relative;margin-top:1.5rem;max-width:560px}
#olympia-faq .of-search input{
  width:100%;font:inherit;font-size:1rem;color:var(--of-ink);background:var(--of-surface);
  border:1px solid var(--of-line);border-radius:12px;box-shadow:var(--of-shadow);
  padding-block:.85rem;padding-inline-start:1rem;padding-inline-end:2.9rem;
  appearance:none;-webkit-appearance:none;
}
#olympia-faq .of-search input::-webkit-search-cancel-button,#olympia-faq .of-search input::-webkit-search-decoration{display:none}
#olympia-faq .of-search input::placeholder{color:var(--of-ink-3)}
#olympia-faq .of-search input:focus{outline:2px solid var(--of-focus);outline-offset:1px;border-color:transparent}
#olympia-faq .of-search .of-mag{position:absolute;top:50%;transform:translateY(-50%);inset-inline-end:1rem;width:18px;height:18px;color:var(--of-ink-3);pointer-events:none}
#olympia-faq .of-hits{margin-top:.55rem;font-size:.82rem;color:var(--of-ink-3);min-height:1.25em;font-variant-numeric:tabular-nums}
#olympia-faq .of-stats{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;margin-top:1.4rem}
#olympia-faq .of-stat{display:flex;align-items:baseline;gap:.4rem;font-size:.85rem;color:var(--of-ink-2)}
#olympia-faq .of-stat b{font-family:"Rubik",system-ui,sans-serif;font-size:1.05rem;color:var(--of-ink);font-variant-numeric:tabular-nums}

/* ---------- popular ---------- */
#olympia-faq .of-pop{padding:2rem 0 .5rem}
#olympia-faq .of-h2{font-size:1.15rem;font-weight:600;letter-spacing:-.01em}
#olympia-faq .of-pop-grid{display:grid;grid-template-columns:1fr;gap:.5rem;margin-top:1rem}
@media (min-width:600px){#olympia-faq .of-pop-grid{grid-template-columns:1fr 1fr}}
@media (min-width:960px){#olympia-faq .of-pop-grid{grid-template-columns:1fr 1fr 1fr}}
#olympia-faq .of-pop-card{
  display:flex;align-items:center;gap:.7rem;text-decoration:none;background:var(--of-surface);
  border:1px solid var(--of-line);border-radius:11px;padding:.85rem 1rem;font-size:.94rem;font-weight:500;
  min-height:56px;
}
#olympia-faq .of-pop-card:hover{border-color:var(--of-accent);color:var(--of-accent)}
#olympia-faq .of-pop-card .of-arrow{flex:none;width:15px;height:15px;color:var(--of-ink-3);margin-inline-start:auto}
#olympia-faq[dir="rtl"] .of-pop-card .of-arrow,#olympia-faq[data-lang="ar"] .of-pop-card .of-arrow{transform:scaleX(-1)}
#olympia-faq .of-pop-card:hover .of-arrow{color:var(--of-accent)}

/* ---------- category rail ---------- */
#olympia-faq .of-rail{position:sticky;top:56px;z-index:20;background:var(--of-ground);border-bottom:1px solid var(--of-line);margin-top:1.5rem}
#olympia-faq .of-rail-in{display:flex;gap:.4rem;overflow-x:auto;scrollbar-width:none;padding:.7rem 0;-webkit-overflow-scrolling:touch}
#olympia-faq .of-rail-in::-webkit-scrollbar{display:none}
#olympia-faq .of-chip{
  flex:none;display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;white-space:nowrap;
  border:1px solid var(--of-line);background:var(--of-surface);border-radius:999px;
  padding:.5rem .9rem;font-size:.85rem;font-weight:500;color:var(--of-ink-2);min-height:42px;
}
#olympia-faq .of-chip:hover{color:var(--of-ink);border-color:var(--of-ink-3)}
#olympia-faq .of-chip.is-active{background:var(--of-accent);border-color:var(--of-accent);color:#fff}
#olympia-faq .of-chip .of-n{font-size:.75rem;opacity:.7;font-variant-numeric:tabular-nums}
@media (min-width:1000px){
  #olympia-faq .of-rail{display:none}
}

/* ---------- layout ---------- */
#olympia-faq .of-body{display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem;padding-top:1.6rem}
@media (min-width:1000px){#olympia-faq .of-body{grid-template-columns:236px minmax(0,1fr);gap:3rem;padding-top:2.4rem}}
#olympia-faq .of-side{display:none}
@media (min-width:1000px){#olympia-faq .of-side{display:block;position:sticky;top:76px;align-self:start;max-height:calc(100vh - 96px);overflow-y:auto}}
#olympia-faq .of-side-t{font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--of-ink-3);margin-bottom:.7rem}
#olympia-faq .of-side ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
#olympia-faq .of-side a{display:flex;align-items:baseline;gap:.5rem;text-decoration:none;padding:.34rem .55rem;border-radius:7px;font-size:.88rem;color:var(--of-ink-2)}
#olympia-faq .of-side a:hover{background:var(--of-raised);color:var(--of-ink)}
#olympia-faq .of-side a.is-active{color:var(--of-accent);background:var(--of-accent-wash);font-weight:600}
#olympia-faq .of-side .of-n{margin-inline-start:auto;font-size:.74rem;color:var(--of-ink-3);font-variant-numeric:tabular-nums}

/* ---------- review toggle ---------- */
#olympia-faq .of-review{display:flex;align-items:flex-start;gap:.6rem;background:var(--of-flag-bg);border:1px solid var(--of-flag-line);border-radius:10px;padding:.7rem .85rem;font-size:.85rem;color:var(--of-ink-2);margin-bottom:1.6rem}
#olympia-faq .of-review input{margin:.35rem 0 0;accent-color:var(--of-accent);width:16px;height:16px;flex:none}
#olympia-faq .of-review label{cursor:pointer}

/* ---------- sections ---------- */
#olympia-faq .of-cat{margin-bottom:2.4rem;scroll-margin-top:118px}
@media (min-width:1000px){#olympia-faq .of-cat{scroll-margin-top:84px}}
#olympia-faq .of-cat-h{display:flex;align-items:baseline;gap:.7rem;padding-bottom:.6rem;border-bottom:2px solid var(--of-ink)}
#olympia-faq .of-cat-h .of-n{margin-inline-start:auto;font-size:.78rem;color:var(--of-ink-3);font-variant-numeric:tabular-nums}
#olympia-faq .of-qa{list-style:none;margin:0;padding:0}
#olympia-faq .of-item{border-bottom:1px solid var(--of-line-soft);scroll-margin-top:118px}
@media (min-width:1000px){#olympia-faq .of-item{scroll-margin-top:84px}}
#olympia-faq summary{
  display:flex;align-items:flex-start;gap:.8rem;cursor:pointer;list-style:none;
  padding:.95rem .1rem;min-height:56px;
}
#olympia-faq summary::-webkit-details-marker{display:none}
#olympia-faq summary h3{font-size:1rem;font-weight:500;line-height:1.55;letter-spacing:0}
#olympia-faq summary:hover h3{color:var(--of-accent)}
#olympia-faq .of-chev{flex:none;width:18px;height:18px;margin-top:.35rem;margin-inline-start:auto;color:var(--of-ink-3);transition:transform .2s ease,color .2s ease}
#olympia-faq details[open] summary h3{color:var(--of-accent);font-weight:600}
#olympia-faq details[open] .of-chev{transform:rotate(180deg);color:var(--of-accent)}
#olympia-faq .of-ans{padding:0 .1rem 1.35rem;max-width:72ch}
#olympia-faq details[open] .of-ans{animation:of-in .2s ease both}
@keyframes of-in{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#olympia-faq details[open] .of-ans{animation:none}#olympia-faq .of-chev{transition:none}}
#olympia-faq .of-lead{color:var(--of-ink);font-size:.98rem}
#olympia-faq .of-ans ul,#olympia-faq .of-ans ol{margin:.7rem 0 0;padding-inline-start:1.25rem;color:var(--of-ink-2);font-size:.95rem;display:flex;flex-direction:column;gap:.3rem}
#olympia-faq .of-ans li::marker{color:var(--of-ink-3)}
#olympia-faq .of-note{margin-top:.8rem;font-size:.88rem;color:var(--of-ink-2);border-inline-start:2px solid var(--of-line);padding-inline-start:.75rem}
#olympia-faq .of-note b{color:var(--of-ink);font-weight:600}
#olympia-faq .of-cta{display:inline-flex;align-items:center;gap:.35rem;margin-top:1rem;font-size:.88rem;font-weight:600;color:var(--of-accent);text-decoration:none}
#olympia-faq .of-cta:hover{text-decoration:underline}
#olympia-faq .of-cta .of-arrow{width:14px;height:14px}
#olympia-faq[dir="rtl"] .of-cta .of-arrow,#olympia-faq[data-lang="ar"] .of-cta .of-arrow{transform:scaleX(-1)}
#olympia-faq .of-rel{margin-top:1.1rem;padding-top:.85rem;border-top:1px dashed var(--of-line)}
#olympia-faq .of-rel-t{font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--of-ink-3);margin-bottom:.5rem}
#olympia-faq .of-rel ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
#olympia-faq .of-rel a{display:inline-block;font-size:.85rem;text-decoration:none;background:var(--of-raised);border:1px solid var(--of-line);border-radius:8px;padding:.35rem .7rem;color:var(--of-ink-2)}
#olympia-faq .of-rel a:hover{color:var(--of-accent);border-color:var(--of-accent)}
#olympia-faq .of-flag{
  display:inline-flex;align-items:center;gap:.35rem;font-size:.7rem;font-weight:600;letter-spacing:.04em;
  background:var(--of-flag-bg);color:var(--of-flag);border:1px solid var(--of-flag-line);
  border-radius:999px;padding:.12rem .55rem;margin-inline-start:.5rem;vertical-align:middle;white-space:nowrap;
}
#olympia-faq .of-token{background:var(--of-flag-bg);color:var(--of-flag);border:1px dashed var(--of-flag-line);border-radius:5px;padding:0 .3rem;font-size:.85em;font-weight:600}
#olympia-faq[data-review="off"] .of-item[data-conf="1"]{display:none}
#olympia-faq .of-item[hidden],#olympia-faq .of-cat[hidden]{display:none}

/* ---------- empty + cta ---------- */
#olympia-faq .of-empty{display:none;border:1px dashed var(--of-line);border-radius:12px;padding:2.4rem 1.4rem;text-align:center}
#olympia-faq .of-empty.is-on{display:block}
#olympia-faq .of-empty h3{font-size:1.05rem;font-weight:600;margin-bottom:.4rem}
#olympia-faq .of-empty p{color:var(--of-ink-2);font-size:.94rem}
#olympia-faq .of-contact{background:var(--of-surface);border:1px solid var(--of-line);border-radius:14px;padding:1.5rem;box-shadow:var(--of-shadow);margin-top:1rem}
#olympia-faq .of-contact h2{font-size:1.1rem;font-weight:600;margin-bottom:.4rem}
#olympia-faq .of-contact p{color:var(--of-ink-2);font-size:.94rem;max-width:60ch}
#olympia-faq .of-btns{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.1rem}
#olympia-faq .of-btn{display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;font-size:.9rem;font-weight:600;padding:.65rem 1.05rem;border-radius:10px;border:1px solid var(--of-line);background:var(--of-raised);min-height:44px}
#olympia-faq .of-btn:hover{border-color:var(--of-ink-3)}
#olympia-faq .of-btn.of-pri{background:var(--of-accent);border-color:var(--of-accent);color:#fff}
#olympia-faq .of-btn.of-pri:hover{background:var(--of-accent-2);border-color:var(--of-accent-2)}
#olympia-faq .of-disc{margin-top:1.6rem;font-size:.8rem;line-height:1.65;color:var(--of-ink-3);max-width:76ch}
#olympia-faq mark{background:var(--of-accent-wash);color:inherit;border-radius:3px;padding:0 .12em}

@media print{
  #olympia-faq .of-bar,#olympia-faq .of-rail,#olympia-faq .of-side,#olympia-faq .of-search,
  #olympia-faq .of-btns,#olympia-faq .of-pop,#olympia-faq .of-review{display:none}
  #olympia-faq .of-ans{display:block !important}
  #olympia-faq{background:#fff;color:#000;font-size:11pt}
  #olympia-faq .of-item{break-inside:avoid}
}

/* ---------- v2: skip link ---------- */
#olympia-faq .of-skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:60;background:var(--of-accent);color:#fff;padding:.6rem 1rem;border-radius:0 0 8px 8px;font-weight:600;text-decoration:none}
#olympia-faq .of-skip:focus{inset-inline-start:1rem}

/* ---------- v2: search suggestions ---------- */
#olympia-faq .of-sug{
  position:absolute;top:calc(100% + .4rem);inset-inline:0;z-index:40;
  background:var(--of-surface);border:1px solid var(--of-line);border-radius:12px;
  box-shadow:var(--of-shadow);overflow:hidden;display:none;
}
#olympia-faq .of-sug.is-on{display:block}
#olympia-faq .of-sug ul{list-style:none;margin:0;padding:.3rem;display:flex;flex-direction:column;gap:1px}
#olympia-faq .of-sug button{
  width:100%;text-align:start;font:inherit;font-size:.92rem;line-height:1.5;color:var(--of-ink-2);
  background:transparent;border:0;border-radius:8px;padding:.55rem .7rem;cursor:pointer;display:block;
}
#olympia-faq .of-sug button:hover,#olympia-faq .of-sug button.is-cur{background:var(--of-raised);color:var(--of-ink)}
#olympia-faq .of-sug .of-sug-cat{display:block;font-size:.7rem;color:var(--of-ink-3);margin-top:.15rem}
#olympia-faq .of-sug mark{background:var(--of-accent-wash);color:var(--of-accent);font-weight:600}
#olympia-faq .of-sug-more{border-top:1px solid var(--of-line-soft);padding:.5rem .8rem;font-size:.8rem;color:var(--of-ink-3)}

/* ---------- v2: per-question toolbar ---------- */
#olympia-faq .of-tools{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;margin-top:1.1rem;padding-top:.85rem;border-top:1px dashed var(--of-line)}
#olympia-faq .of-tool{
  display:inline-flex;align-items:center;gap:.35rem;font:inherit;font-size:.8rem;font-weight:500;
  color:var(--of-ink-2);background:var(--of-raised);border:1px solid var(--of-line);
  border-radius:8px;padding:.35rem .7rem;cursor:pointer;min-height:34px;
}
#olympia-faq .of-tool:hover{color:var(--of-accent);border-color:var(--of-accent)}
#olympia-faq .of-tool[aria-pressed="true"]{background:var(--of-accent);border-color:var(--of-accent);color:#fff}
#olympia-faq .of-tool svg{width:14px;height:14px;flex:none}
#olympia-faq .of-vote-label{font-size:.8rem;color:var(--of-ink-3);margin-inline-end:.2rem}
#olympia-faq .of-thanks{font-size:.8rem;color:var(--of-ink-2)}
#olympia-faq .of-thanks a{color:var(--of-accent);font-weight:600}

/* ---------- v2: section footer cta ---------- */
#olympia-faq .of-sec-cta{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-top:1.1rem;
  background:var(--of-raised);border:1px solid var(--of-line);border-radius:10px;padding:.75rem 1rem;
  font-size:.88rem;color:var(--of-ink-2);
}
#olympia-faq .of-sec-cta a{margin-inline-start:auto;font-weight:600;color:var(--of-accent);text-decoration:none;white-space:nowrap}
#olympia-faq .of-sec-cta a:hover{text-decoration:underline}

/* ---------- v2: toast ---------- */
#olympia-faq .of-toast{
  position:fixed;inset-inline:0;bottom:1.2rem;margin:0 auto;width:max-content;max-width:90vw;z-index:80;
  background:var(--of-ink);color:var(--of-ground);font-size:.86rem;font-weight:500;
  padding:.6rem 1.1rem;border-radius:999px;opacity:0;transform:translateY(8px);
  transition:opacity .18s ease,transform .18s ease;pointer-events:none;
}
#olympia-faq .of-toast.is-on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){#olympia-faq .of-toast{transition:none}}

/* ---------- v2: breadcrumb (section pages) ---------- */
#olympia-faq .of-crumb{display:flex;flex-wrap:wrap;gap:.4rem;font-size:.82rem;color:var(--of-ink-3);margin-bottom:1rem}
#olympia-faq .of-crumb a{text-decoration:none;color:var(--of-ink-2)}
#olympia-faq .of-crumb a:hover{color:var(--of-accent)}
#olympia-faq .of-sib{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.6rem}
#olympia-faq .of-sib a{font-size:.85rem;text-decoration:none;background:var(--of-surface);border:1px solid var(--of-line);border-radius:999px;padding:.35rem .8rem;color:var(--of-ink-2)}
#olympia-faq .of-sib a:hover{color:var(--of-accent);border-color:var(--of-accent)}
