/* Onboarding journey overlay — mobile first, RTL via logical properties.
   v0.91.342: reading text follows the chosen text size (--mena-text-scale from
   mena_design.css, set on <html> before first paint); sizes inside are em-based. */
html.menaOnboardingOpen,html.menaOnboardingOpen body{overflow:hidden!important;overscroll-behavior:none}
.menaOnboarding{--ob-bg:#060d22;--ob-card:#0c1736;--ob-line:rgba(140,170,230,.22);--ob-text:#eef3ff;--ob-muted:#a9b6d6;--ob-accent:#7c5cff;--ob-accent2:#38c6ff;--ob-ok:#3ddc97;
 position:fixed;inset:0;z-index:2147483000;overflow-y:auto;-webkit-overflow-scrolling:touch;background:radial-gradient(120% 80% at 50% 0%,#14245a 0%,var(--ob-bg) 60%);color:var(--ob-text);
 font-family:Inter,Tajawal,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:calc(16px * var(--mena-text-scale,1));line-height:1.55;padding:max(12px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom))}
.menaOnboarding[hidden]{display:none!important}
.menaOnboarding[dir="rtl"]{font-family:Tajawal,Inter,system-ui,sans-serif;font-size:calc(17px * var(--mena-text-scale,1))}
.menaOnboarding *{box-sizing:border-box}
.obCard{max-width:720px;margin:0 auto;display:flex;flex-direction:column;min-height:calc(100dvh - 28px)}
.obHead{display:flex;align-items:center;gap:10px;padding:4px 0 14px;position:sticky;top:-12px;background:linear-gradient(var(--ob-bg) 70%,transparent);z-index:2}
.obProgress{flex:1;height:6px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden}
.obProgressBar{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--ob-accent),var(--ob-accent2));transition:width .3s ease}
.menaOnboarding[dir="rtl"] .obProgressBar{background:linear-gradient(270deg,var(--ob-accent),var(--ob-accent2))}
.obBody{flex:1;display:flex;flex-direction:column;gap:14px;padding-block:8px 18px}
.obTitle{font-size:clamp(24px,6.4vw,34px);line-height:1.25;margin:4px 0 0;font-weight:800;letter-spacing:-.01em;outline:none}
.menaOnboarding[dir="rtl"] .obTitle{letter-spacing:0}
.obHint,.obNote{color:var(--ob-muted);margin:0;font-size:.95em}
.obEyebrow{font-size:.78em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ob-accent2)}
.menaOnboarding[dir="rtl"] .obEyebrow{letter-spacing:0}
.obChoices{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.obChoice{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-height:96px;padding:14px;border-radius:16px;border:1px solid var(--ob-line);background:var(--ob-card);color:inherit;font:inherit;text-align:start;cursor:pointer;transition:border-color .15s,transform .15s,background .15s}
.obChoice:hover,.obChoice:focus-visible{border-color:var(--ob-accent2);background:#112150}
.obChoice:focus-visible,.obBtn:focus-visible,.obLink:focus-visible,.obInput:focus-visible{outline:3px solid var(--ob-accent2);outline-offset:2px}
.obChoice.selected{border-color:var(--ob-accent);background:linear-gradient(160deg,rgba(124,92,255,.28),rgba(56,198,255,.1))}
.obChoice:active{transform:scale(.98)}
.obChoices.two .obChoice{min-height:130px}
.obChoiceText b{display:block;font-size:1em}
.obChoiceText small{color:var(--ob-muted)}
.obIcon{display:inline-flex;width:34px;height:34px;color:var(--ob-accent2)}
.obIcon svg{width:100%;height:100%}
.obLabel{font-weight:700;font-size:.92em}
.obInput{width:100%;font:inherit;font-size:calc(18px * var(--mena-text-scale,1));padding:14px 16px;border-radius:14px;border:1px solid var(--ob-line);background:#0a1430;color:var(--ob-text)}
.obInput[aria-invalid="true"]{border-color:#ff7a7a}
.obError{color:#ff9b9b;margin:0;font-weight:600}
.obActions{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.obBtn{font:inherit;font-weight:700;border-radius:14px;padding:13px 20px;min-height:48px;border:1px solid var(--ob-line);background:var(--ob-card);color:var(--ob-text);cursor:pointer}
.obBtn.primary{border:0;background:linear-gradient(90deg,var(--ob-accent),#5b7bff 55%,var(--ob-accent2));color:#fff;box-shadow:0 10px 30px rgba(92,104,255,.35)}
.obBtn.secondary{background:transparent}
.obBtn.wide{width:100%}
.obLink{font:inherit;background:none;border:0;color:var(--ob-muted);padding:8px 6px;min-height:40px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.obBack,.obLang,.obClose{text-decoration:none;white-space:nowrap}
.obClose{font-size:24px;line-height:1;padding-inline:10px}
.obFoot{display:flex;justify-content:center;padding-block:4px 6px}
.obShip{position:relative;height:150px;display:flex;align-items:center;justify-content:center}
.obShipIcon{width:110px;height:110px;color:#dfe8ff;animation:obBob 3.2s ease-in-out infinite}
.obWave{position:absolute;bottom:18px;inset-inline:15%;height:3px;border-radius:3px;background:linear-gradient(90deg,transparent,var(--ob-accent2),transparent)}
@keyframes obBob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-6px) rotate(2deg)}}
.obGoalChip{align-self:flex-start;margin:0;padding:6px 12px;border-radius:999px;background:rgba(56,198,255,.14);color:#bfeaff;font-weight:700;font-size:.9em}
.obTimeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.obTimeline>li{display:flex;flex-direction:column;gap:8px;padding-inline-start:16px;border-inline-start:2px solid var(--ob-line)}
.obTimeline small{color:var(--ob-muted);font-weight:700}
.obBubble{padding:12px 14px;border-radius:14px;background:#13224d;border:1px solid var(--ob-line)}
.obBubble.typed::after{content:"";display:inline-block;width:2px;height:1em;margin-inline-start:3px;vertical-align:-2px;background:var(--ob-accent2);animation:obCaret 1s steps(1) infinite}
@keyframes obCaret{50%{opacity:0}}
.obChips{display:flex;flex-wrap:wrap;gap:8px}
.obChip{padding:6px 10px;border-radius:999px;font-size:.85em;font-weight:700;background:rgba(61,220,151,.14);color:#aef3d2}
.obChip.ok::before{content:"✓ "}
.obReply{display:flex;flex-direction:column;gap:6px}
.obComment,.obAnswer{margin:0;padding:8px 12px;border-radius:12px;max-width:85%;font-size:.92em}
.obComment{background:#1a2758;align-self:flex-start}
.obAnswer{background:rgba(124,92,255,.3);align-self:flex-end}
.obPost,.obCampaignPost{background:#fff;color:#141b2e;border-radius:16px;overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,.35)}
.obPostHead{display:flex;align-items:center;gap:8px;padding:10px 12px}
.obAvatar{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--ob-accent),var(--ob-accent2));color:#fff;font-weight:800;font-size:.85em}
.obPicture{position:relative;overflow:hidden;background:#eef1f8}
.obPicture.square{aspect-ratio:1/1}
.obPicture img{display:block;width:100%;height:100%;object-fit:cover}
.obPlaceholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.7),transparent 45%),linear-gradient(145deg,var(--ob-a,#e3e8f4),color-mix(in srgb,var(--ob-b,#2b3a67) 35%,var(--ob-a,#e3e8f4)))}
.obPhIcon{width:38%;height:38%;color:var(--ob-b,#2b3a67);opacity:.55}
.obOverlayText{position:absolute;inset-inline:10px;bottom:10px;padding:8px 12px;border-radius:12px;background:rgba(10,16,36,.72);color:#fff;font-weight:800;font-size:1.05em;line-height:1.3;backdrop-filter:blur(4px);overflow-wrap:anywhere}
.obCaption{margin:0;padding:10px 12px 14px;font-size:.93em;color:#2a3350;overflow-wrap:anywhere}
.obCampaign{display:grid;grid-template-columns:1fr;gap:14px}
.obDay{display:block;padding:8px 12px 6px;font-weight:800;color:#5b4bd6}
.obStats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.obStat{padding:14px;border-radius:14px;background:var(--ob-card);border:1px solid var(--ob-line);display:flex;flex-direction:column}
.obStat b{font-size:1.5em;direction:ltr;unicode-bidi:isolate;align-self:flex-start}
.obStat small{color:var(--ob-muted)}
.obStat:last-child{grid-column:1/-1;background:linear-gradient(160deg,rgba(124,92,255,.25),rgba(56,198,255,.08))}
.obTrial{display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:16px;border:1px solid var(--ob-accent);background:linear-gradient(160deg,rgba(124,92,255,.22),rgba(56,198,255,.06))}
.obTrial small{color:var(--ob-muted)}
.obRefund{margin:0;color:#c9f5e2;font-size:.92em}
.obRefund a{color:#9fe7ff}
.obSubhead{margin:6px 0 0;font-size:1.05em}
.obPlans{display:grid;grid-template-columns:1fr;gap:10px}
.obPlan{display:flex;flex-direction:column;gap:4px;padding:14px;border-radius:14px;border:1px solid var(--ob-line);background:var(--ob-card)}
.obPlan small{color:var(--ob-muted)}
.obPlan .obBtn{margin-top:8px}
@media(min-width:700px){
 .menaOnboarding{padding-inline:24px}
 .obChoices{grid-template-columns:repeat(3,1fr)}
 .obChoices.two{grid-template-columns:1fr 1fr}
 .obCampaign{grid-template-columns:repeat(3,1fr)}
 .obStats{grid-template-columns:repeat(4,1fr)}
 .obPlans{grid-template-columns:repeat(3,1fr)}
 .obPost{width:100%;max-width:420px;margin-inline:auto}
 .obBtn.wide{width:auto;min-width:320px}
}
@media(prefers-reduced-motion:reduce){.obShipIcon,.obBubble.typed::after{animation:none}.obProgressBar,.obChoice{transition:none}}