@import url("fonts.css");
@import url("global-shell.css");

/* =========================================================
   Marsam Support — shared English and Arabic presentation
   Header and footer are intentionally modular for later reuse.
   ========================================================= */
:root { color-scheme: light; --ink:#1d1d1f; --muted:#6e6e73; --line:#d2d2d7; --soft:#f5f5f7; --blue:#0066cc; --page:980px; }
* { box-sizing: border-box; }
html { min-width:320px; scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:#fff; font-family:"SF Pro Display","SF Pro Icons","Helvetica Neue",Helvetica,Arial,sans-serif; font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased; }
html[lang="ar"] body { font-family:"SF Arabic","SF Pro AR","Geeza Pro",Tahoma,Arial,sans-serif; }
a { color:var(--blue); }
input, textarea, button { font:inherit; }
.skip-link { position:fixed; inset-block-start:10px; inset-inline-start:10px; z-index:99; padding:10px 16px; border-radius:999px; color:#fff; background:#111; transform:translateY(-150%); }
.skip-link:focus { transform:none; }

/* Temporary product header; ready to be replaced by the future global header. */
.support-header { position:sticky; top:0; z-index:20; border-bottom:1px solid rgba(0,0,0,.12); background:rgba(255,255,255,.88); backdrop-filter:blur(18px) saturate(180%); }
.support-header__inner { width:min(var(--page),calc(100% - 44px)); min-height:58px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:22px; }
.support-brand { color:var(--ink); font-size:21px; font-weight:650; text-decoration:none; }
.support-nav { display:flex; align-items:center; gap:22px; font-size:14px; }
.support-nav a { color:var(--ink); text-decoration:none; }
.support-nav a:hover { color:var(--blue); }

.support-hero { padding:clamp(80px,11vw,140px) 22px clamp(70px,9vw,110px); text-align:center; background:radial-gradient(circle at 20% 10%,#ffe6f0,transparent 32%),radial-gradient(circle at 82% 28%,#e4f3ff,transparent 34%),#fff; }
.support-hero__inner { width:min(860px,100%); margin:auto; }
.support-eyebrow { margin:0 0 14px; color:#7c3aed; font-size:20px; font-weight:650; }
.support-hero h1 { margin:0 0 24px; font-size:clamp(52px,8vw,88px); line-height:.98; letter-spacing:-.055em; }
html[lang="ar"] .support-hero h1 { letter-spacing:0; line-height:1.15; }
.support-hero p:last-child { max-width:720px; margin:auto; color:#424245; font-size:clamp(20px,2.3vw,26px); }

.support-main { width:min(var(--page),calc(100% - 44px)); margin:auto; padding:clamp(74px,10vw,120px) 0; }
.section-heading { margin:0 0 14px; font-size:clamp(38px,5vw,58px); line-height:1.05; letter-spacing:-.04em; }
html[lang="ar"] .section-heading { letter-spacing:0; line-height:1.2; }
.section-intro { max-width:720px; margin:0 0 44px; color:var(--muted); font-size:20px; }
.faq-group + .faq-group { margin-top:72px; }
.faq-group h2 { margin:0 0 24px; font-size:30px; }
.faq-list { border-top:1px solid var(--line); }
.faq-item { border-bottom:1px solid var(--line); }
.faq-item summary { position:relative; padding:25px 48px 25px 0; cursor:pointer; list-style:none; font-size:21px; font-weight:600; }
html[dir="rtl"] .faq-item summary { padding:25px 0 25px 48px; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; position:absolute; inset-inline-end:10px; top:20px; color:var(--blue); font-size:30px; font-weight:300; transition:transform .2s ease; }
.faq-item[open] summary::after { transform:rotate(45deg); }
.faq-answer { max-width:780px; padding:0 0 26px; color:#424245; }
.faq-answer p { margin:0 0 13px; }
.faq-answer ol { margin:10px 0 18px; padding-inline-start:26px; }

.support-contact { margin-top:110px; padding:clamp(34px,6vw,64px); border-radius:32px; background:var(--soft); }
.support-form { display:grid; gap:18px; max-width:760px; }
.field label { display:block; margin:0 0 8px; font-weight:600; }
.field small { display:block; margin-top:7px; color:var(--muted); }
.field input, .field textarea { width:100%; padding:17px 18px; border:1px solid #86868b; border-radius:14px; color:var(--ink); background:#fff; outline:none; }
.field input:focus, .field textarea:focus { border-color:#0071e3; box-shadow:0 0 0 4px rgba(0,113,227,.15); }
.website-field { position:absolute; inset-inline-start:-10000px; width:1px; height:1px; overflow:hidden; }
.form-status { margin:0 0 22px; padding:14px 16px; border-radius:12px; color:#1b5e20; background:#eaf6ec; }
.form-status[data-status="invalid"],.form-status[data-status="error"],.form-status[data-status="security"],.form-status[data-status="rate"] { color:#8a1c13; background:#fff1f0; }
.form-status[data-status="loading"] { color:var(--muted); background:#fff; }
.form-actions { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:8px; }
.turnstile-container { min-height:0; margin:0; }
.submit-button { min-height:48px; padding:0 24px; border:0; border-radius:999px; color:#fff; background:#0071e3; cursor:pointer; }
.submit-button:disabled { cursor:not-allowed; opacity:.55; }
.safety-note { max-width:760px; margin:24px 0 0; color:var(--muted); font-size:14px; }
.useful-links { margin-top:80px; padding-top:36px; border-top:1px solid var(--line); }
.useful-links nav { display:flex; flex-wrap:wrap; gap:12px 26px; }

/* Temporary footer; will be replaced when the global footer is agreed. */
.support-footer { padding:28px 22px; color:var(--muted); background:var(--soft); font-size:13px; }
.support-footer__inner { width:min(var(--page),100%); margin:auto; }
@media (max-width:640px) { .support-nav a:not(.language-link) { display:none; } .support-contact { margin-inline:-10px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .faq-item summary::after { transition:none; } }