/* ============================================================================
   BOSCH · PREDICT & WIN — static styles (framework-free, WordPress-ready)
   Brand: white background · Bosch red · black. Clean & technical.
   ========================================================================== */

:root {
  color-scheme:light;
  /* Bosch red — replace with the official brand hex if your guidelines differ */
  --red:#ED0007; --red-dark:#c00006; --red-tint:#fff2f3;
  --ink:#111315; --black:#0a0a0a;
  --gray-900:#1a1d1f; --gray-700:#3a4045; --gray-600:#525a60; --gray-500:#6b7378;
  --gray-400:#9aa1a6; --gray-300:#c9ced2; --gray-200:#e4e7e9; --gray-100:#f1f3f4; --gray-50:#f8f9fa;
  --line:#e1e4e6;
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --shadow-sm:0 1px 2px rgba(10,12,14,.05);
  --shadow:0 1px 2px rgba(10,12,14,.05), 0 16px 36px -22px rgba(10,12,14,.3);
  --shadow-lg:0 2px 6px rgba(10,12,14,.06), 0 30px 60px -28px rgba(10,12,14,.35);
}

*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { margin:0; font-family:var(--font); color:var(--gray-700); background:#fff;
  -webkit-font-smoothing:antialiased; line-height:1.55; }
h1,h2,h3,h4 { margin:0; color:var(--ink); letter-spacing:-.02em; line-height:1.1; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
button { font-family:inherit; cursor:pointer; }
.hidden { display:none !important; }
.container { max-width:920px; margin:0 auto; padding:0 24px; }

/* ---- Buttons ---- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.55rem; border:0;
  border-radius:6px; font-weight:700; font-size:.95rem; padding:.9rem 1.7rem; transition:.15s;
  letter-spacing:.01em; }
.btn-red { background:var(--red); color:#fff; }
.btn-red:hover { background:var(--red-dark); }
.btn-red:disabled { background:var(--gray-300); color:#fff; cursor:not-allowed; }
.btn-dark { background:var(--ink); color:#fff; }
.btn-dark:hover { background:#000; }
.btn-outline { background:#fff; color:var(--ink); border:1.5px solid var(--gray-300); }
.btn-outline:hover { border-color:var(--gray-500); }
.btn.full { width:100%; }
.btn.lg { padding:1rem 2rem; font-size:1rem; }

/* ---- Top accent: official Bosch SuperGraphic (crisp segments, exact brand hexes) ---- */
.topbar { height:6px; background:linear-gradient(90deg,
  #2e3236 0%,    #2e3236 4.5%,    /* charcoal   */
  #51585f 4.5%,  #51585f 9%,      /* grey       */
  #ED0007 9%,    #ED0007 20.4%,   /* red        */
  #B90276 20.4%, #B90276 31.8%,   /* magenta    */
  #50237F 31.8%, #50237F 43.2%,   /* purple     */
  #005691 43.2%, #005691 54.6%,   /* dark blue  */
  #008ECF 54.6%, #008ECF 66%,     /* blue       */
  #00A8B0 66%,   #00A8B0 77.4%,   /* turquoise  */
  #00884A 77.4%, #00884A 88.7%,   /* green      */
  #78BE20 88.7%, #78BE20 100%);   /* light green */ }
.header { border-bottom:1px solid var(--line); background:#fff; position:sticky; top:0; z-index:40; }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:1rem;
  max-width:920px; margin:0 auto; padding:16px 24px; }
.brand { display:inline-flex; align-items:center; }
.brand-logo { height:32px; width:auto; display:block; }
.brand .wordmark { font-weight:800; font-size:1.55rem; letter-spacing:.04em; color:var(--ink); }
.brand .reg { font-size:.7rem; color:var(--gray-500); font-weight:600; }
.brand .bar { display:inline-block; width:30px; height:6px; background:var(--red); border-radius:1px;
  margin-right:.55rem; transform:translateY(-3px); }
.header-tag { font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em;
  color:var(--gray-500); }

/* ---- Hero ---- */
.hero { padding:3rem 0 1rem; }
.hero-eyebrow { display:inline-flex; align-items:center; gap:.5rem; font-size:.78rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.14em; color:var(--red); }
.hero-eyebrow::before { content:""; width:22px; height:3px; background:var(--red); }
.hero h1 { margin-top:1rem; font-size:clamp(2.1rem,6vw,3.3rem); font-weight:800; color:var(--ink); }
.hero h1 .red { color:var(--red); }
.hero p { margin-top:1rem; max-width:34rem; font-size:1.1rem; color:var(--gray-600); }
.steps-dots { display:flex; gap:.5rem; margin-top:1.5rem; }
.steps-dots span { font-size:.72rem; font-weight:700; color:var(--gray-500);
  border:1px solid var(--line); border-radius:999px; padding:.35rem .8rem; }
.steps-dots b { color:var(--red); }

/* ---- Section / step ---- */
.step { padding:1.5rem 0 0; }
.section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem;
  margin-bottom:1.25rem; }
.section-head h2 { font-size:clamp(1.5rem,4.5vw,2rem); font-weight:800; }
.section-head .sub { font-size:.9rem; color:var(--gray-500); margin-top:.25rem; }
.counter { flex-shrink:0; text-align:center; border:1.5px solid var(--gray-200); border-radius:10px;
  padding:.5rem .9rem; }
.counter b { font-size:1.4rem; font-weight:800; color:var(--red); line-height:1; display:block; }
.counter span { font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gray-500); }
.progress { height:6px; border-radius:999px; background:var(--gray-100); overflow:hidden; }
.progress-fill { height:100%; width:0; background:var(--red); transition:width .4s ease; }

/* ---- Match cards (winner-only) ---- */
.matches { margin-top:1.5rem; display:flex; flex-direction:column; gap:1rem; }
.match { border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow:var(--shadow-sm);
  overflow:hidden; transition:box-shadow .2s, border-color .2s; }
.match.done { border-color:var(--red); box-shadow:0 0 0 1px var(--red) inset, var(--shadow); }
.match-meta { display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.7rem 1.1rem; background:var(--gray-50); border-bottom:1px solid var(--line);
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--gray-500); }
.match-meta .q { color:var(--red); }
.picks { display:grid; grid-template-columns:1fr auto 1fr; gap:.6rem; padding:1.1rem; }
.pick { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.55rem;
  border:2px solid var(--gray-200); border-radius:12px; padding:1rem .6rem; background:#fff; cursor:pointer;
  transition:.15s; position:relative; text-align:center; min-width:0; }
.pick:hover { border-color:var(--gray-400); }
.pick.selected { border-color:var(--red); background:var(--red-tint); }
.pick.selected::after { content:"✓"; position:absolute; top:6px; right:8px; width:18px; height:18px;
  display:grid; place-items:center; border-radius:50%; background:var(--red); color:#fff; font-size:11px;
  font-weight:800; }
.pick-name { font-weight:800; font-size:.9rem; color:var(--ink); text-transform:uppercase;
  letter-spacing:.01em; word-break:break-word; line-height:1.1; }
.pick.draw { justify-content:center; padding:1rem .4rem; }
.pick.draw .draw-mark { font-size:1.3rem; line-height:1; }
.pick.draw .pick-name { font-size:.78rem; color:var(--gray-600); }
.pick-label { font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gray-400); }

/* Flag — clean circle */
.flag { width:clamp(46px,12vw,58px); height:clamp(46px,12vw,58px); border-radius:50%; object-fit:cover;
  border:1px solid var(--line); box-shadow:0 2px 6px rgba(10,12,14,.15); background:var(--gray-100); }
.flag.sm { width:24px; height:24px; }

/* ---- Continue area (in-flow: helper text on top, button centered below) ---- */
.actionbar { background:var(--gray-50); border-top:1px solid var(--line); margin-top:1.75rem; }
.actionbar-inner { max-width:920px; margin:0 auto; padding:2rem 24px 2.4rem; display:flex;
  flex-direction:column; align-items:center; gap:1rem; text-align:center; }
.actionbar .note { font-size:.8rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gray-500); }
.actionbar .note-m { display:none; }
.actionbar #continueBtn { min-width:260px; padding:1rem 2.4rem; font-size:1.05rem; }

/* ---- Forms ---- */
.panel { max-width:560px; margin:0 auto; }
.card { background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); }
.card.pad { padding:1.9rem; }
.card.accent { border-top:4px solid var(--red); }
.back-link { display:inline-block; margin-bottom:1rem; background:none; border:0; font-size:.9rem;
  font-weight:600; color:var(--gray-500); }
.back-link:hover { color:var(--ink); }
.form { margin-top:1.4rem; display:flex; flex-direction:column; gap:1rem; }
.form label { display:block; font-size:.85rem; font-weight:700; color:var(--gray-700); }
.form input[type=text],.form input[type=email],.form input[type=tel] { margin-top:.4rem; width:100%;
  border:1.5px solid var(--gray-300); border-radius:8px; padding:.85rem 1rem; font-size:1rem;
  color:var(--ink); outline:none; transition:.15s; }
.form input::placeholder { color:var(--gray-400); }
.form input:focus { border-color:var(--red); box-shadow:0 0 0 3px rgba(226,0,26,.15); }
.form .check { display:flex; align-items:flex-start; gap:.6rem; font-weight:500; font-size:.9rem;
  color:var(--gray-600); }
.form .check input { margin-top:3px; width:16px; height:16px; accent-color:var(--red); }
.form .check a { color:var(--red); font-weight:700; text-decoration:underline; }
.input-error { border-color:var(--red) !important; }
.err { margin:.3rem 0 0; font-size:.78rem; font-weight:600; color:var(--red); }
.form-error { margin-top:1rem; padding:.75rem 1rem; border-radius:8px; text-align:center; font-size:.9rem;
  font-weight:600; color:var(--red); border:1px solid rgba(226,0,26,.3); background:var(--red-tint); }

/* Recap of picks */
.recap { display:flex; flex-direction:column; gap:.5rem; margin-top:1.25rem; }
.recap-row { display:flex; align-items:center; gap:.7rem; border:1px solid var(--line); border-radius:9px;
  padding:.6rem .85rem; background:var(--gray-50); }
.recap-row .who { font-weight:700; color:var(--ink); font-size:.9rem; }
.recap-row .vs { margin-left:auto; font-size:.78rem; color:var(--gray-500); }
.recap-row .pickwin { color:var(--red); font-weight:800; }

/* ---- Coupon ---- */
.center { text-align:center; }
.coupon-badge { width:74px; height:74px; margin:0 auto 1.25rem; border-radius:50%; display:grid;
  place-items:center; background:var(--red); color:#fff; font-size:2rem; box-shadow:0 14px 34px -12px rgba(226,0,26,.6); }
.coupon-img { display:block; width:100%; max-width:340px; height:auto; margin:0 auto 1.4rem;
  border-radius:18px; box-shadow:0 16px 40px -14px rgba(10,20,40,.28); }
.dl-hint { margin:.7rem 0 0; color:var(--red); font-weight:600; font-size:.92rem; }
.dl-hint:empty { display:none; }
.btn.disabled { opacity:.5; pointer-events:none; }
.confirm-note { margin:1rem auto 0; max-width:30rem; font-size:.86rem; color:var(--gray-600); text-align:center; line-height:1.55; }
.verify-fail { margin:.9rem auto 0; max-width:30rem; font-size:.9rem; font-weight:700; color:var(--red); text-align:center; }
.verify-fail[hidden] { display:none; }
.coupon-title { font-size:clamp(1.8rem,5vw,2.4rem); font-weight:800; }
.coupon-sub { margin-top:.7rem; color:var(--gray-700); font-size:1.125rem; font-weight:500; line-height:1.65; max-width:32rem; margin-left:auto; margin-right:auto; }
.coupon { position:relative; margin:1.75rem auto 0; max-width:420px; border:2px dashed var(--red);
  border-radius:14px; background:var(--red-tint); padding:1.5rem 1.25rem; }
.coupon .lbl { font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--red); }
.coupon .code { margin-top:.5rem; font-family:"Courier New",monospace; font-weight:800; font-size:1.9rem;
  letter-spacing:.12em; color:var(--ink); }
.coupon .copy { margin-top:1rem; }
.coupon .copied { color:var(--red); font-size:.82rem; font-weight:700; margin-top:.6rem; min-height:1em; }
.coupon-note { margin-top:1.5rem; font-size:.85rem; color:var(--gray-500); }

/* ---- Aggregators ---- */
.store-grid { margin:1.75rem auto 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,300px));
  justify-content:center; gap:1rem; }
.store { display:flex; flex-direction:column; border:1px solid var(--line); border-radius:12px;
  background:#fff; box-shadow:var(--shadow-sm); overflow:hidden; transition:box-shadow .2s, transform .2s; }
.store:hover { box-shadow:var(--shadow); transform:translateY(-2px); }
.store-logo { height:88px; display:flex; align-items:center; justify-content:center;
  background:var(--gray-50); border-bottom:1px solid var(--line); padding:16px 20px; }
.store-logo img { max-height:42px; max-width:80%; width:auto; object-fit:contain; }
.store-body { padding:1rem 1.1rem 1.2rem; display:flex; flex-direction:column; gap:.45rem;
  align-items:center; text-align:center; flex:1; }
.store .btn { margin-top:auto; width:100%; }
.store-name { font-weight:800; color:var(--ink); }
.store-desc { font-size:.82rem; color:var(--gray-500); }
.banner-strip { margin-top:1.5rem; border:1px solid var(--line); border-radius:12px; background:var(--gray-50);
  padding:1rem 1.25rem; display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; font-size:.9rem;
  color:var(--gray-600); }
.banner-strip b { color:var(--ink); }
.banner-strip .chip { margin-left:auto; font-family:"Courier New",monospace; font-weight:800;
  color:var(--red); border:1px dashed var(--red); border-radius:6px; padding:.3rem .7rem; letter-spacing:.06em; }

/* ---- Footer ---- */
.footer { border-top:1px solid var(--line); margin-top:2rem; }
.footer-inner { max-width:920px; margin:0 auto; padding:1.75rem 24px; display:flex; flex-wrap:wrap;
  gap:.5rem 1rem; align-items:center; justify-content:space-between; font-size:.78rem; color:var(--gray-500); }

/* ---- Responsive ---- */
@media (max-width:560px) {
  .container { padding:0 16px; }
  .picks { gap:.4rem; padding:.9rem; }
  .pick { padding:.8rem .35rem; border-radius:10px; }
  .pick-name { font-size:.72rem; }
  .actionbar-inner { padding:1.6rem 16px 1.9rem; }
  .actionbar #continueBtn { width:100%; min-width:0; }
  .header-tag { display:none; }
  .store-grid { grid-template-columns:repeat(auto-fit,minmax(200px,300px)); }
}

/* ---- Hero banner carousel ---- */
.hero-banner { position:relative; overflow:hidden; height:clamp(340px,44vw,460px);
  border-bottom:1px solid var(--line); background:var(--gray-100); }
.hero-slides { position:absolute; inset:0; }
.hero-slide { position:absolute; inset:0; background-size:cover; background-position:center right;
  opacity:0; transition:opacity 1s ease; will-change:opacity; }
.hero-slide.active { opacity:1; }
.hero-scrim { position:absolute; inset:0; pointer-events:none; z-index:1;
  background:linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.93) 30%, rgba(255,255,255,.55) 56%, rgba(255,255,255,0) 82%); }
.hero-banner-content { position:relative; z-index:2; height:100%; display:flex; flex-direction:column;
  justify-content:center; padding-top:1rem; padding-bottom:1rem; }
.hero-banner .hero-eyebrow { color:var(--red); }
.hero-banner h1 { margin-top:1rem; font-size:clamp(2rem,5vw,3.1rem); font-weight:800; color:var(--ink); }
.hero-banner h1 .red { color:var(--red); }
.hero-banner p { margin-top:1rem; max-width:30rem; font-size:1.05rem; color:var(--gray-600); }
.hero-banner .steps-dots { margin-top:1.5rem; }
.hero-dots { position:absolute; z-index:3; bottom:14px; left:50%; transform:translateX(-50%);
  display:flex; gap:8px; }
.hero-dots button { width:9px; height:9px; border-radius:999px; border:0; background:rgba(10,12,14,.22);
  cursor:pointer; padding:0; transition:.25s; }
.hero-dots button.active { background:var(--red); width:26px; }
@media (max-width:560px) {
  .hero-banner { height:clamp(440px,108vw,560px); }
  .hero-slide { background-position:center; }
  .hero-scrim { background:linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.9) 50%, rgba(255,255,255,.68) 100%); }
  .hero-banner p { font-size:.98rem; }
}

/* ---- Language switch ---- */
.header-right { display:flex; align-items:center; gap:.85rem; }
.lang-switch { font-size:.82rem; font-weight:700; color:var(--ink); border:1px solid var(--gray-300);
  border-radius:6px; padding:.35rem .7rem; white-space:nowrap; }
.lang-switch:hover { border-color:var(--red); color:var(--red); }

/* ---- RTL (Arabic) overrides — only apply on the Arabic page (dir="rtl") ---- */
[dir="rtl"] body { font-family:"Tajawal","Inter",system-ui,sans-serif; }
[dir="rtl"] .wordmark,[dir="rtl"] .store-logo,[dir="rtl"] .coupon .code { font-family:"Inter",sans-serif; }
[dir="rtl"] .brand { direction:ltr; }
[dir="rtl"] .hero-slide { transform:scaleX(-1); }
[dir="rtl"] .hero-scrim {
  background:linear-gradient(270deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.93) 30%, rgba(255,255,255,.55) 56%, rgba(255,255,255,0) 82%); }
@media (max-width:560px) {
  [dir="rtl"] .hero-slide { background-position:center; }
  [dir="rtl"] .hero-scrim {
    background:linear-gradient(270deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.9) 50%, rgba(255,255,255,.68) 100%); }
}

/* ============================================================================
   CO-BRANDING (Bosch + Al-Juffali / JTECO), legal pages, cookie/terms consent
   ========================================================================== */

/* ---- Header co-brand lockup ---- */
.cobrand { display:flex; align-items:center; gap:.8rem; }
.cobrand .brand { flex-shrink:0; }
.cb-div { width:1px; height:26px; background:var(--line); flex-shrink:0; }
.cb-by { display:flex; flex-direction:column; gap:2px; line-height:1; }
.cb-by small { font-size:7.5px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--gray-400); }
/* white-on-transparent logo rendered dark for the light header */
.brand-juffali { height:29px; width:auto; filter:brightness(0); opacity:.85; }
@media (max-width:560px){ .cb-by small { display:none; } .brand-juffali { height:24px; } .cb-div { height:24px; } .cobrand { gap:.6rem; } }

/* ---- Dark co-brand footer ---- */
.footer { border-top:0; margin-top:3.5rem; background:var(--black); color:#fff; }
.footer-top { max-width:920px; margin:0 auto; padding:2.4rem 24px 1.6rem; display:flex; flex-wrap:wrap;
  align-items:center; justify-content:space-between; gap:1.4rem; }
.foot-brands { display:flex; align-items:center; gap:1.1rem; }
.foot-brands img { width:auto; }
.foot-brands .bosch-w { height:30px; }
.foot-brands .juffali-w { height:26px; }
.foot-brands .cb-div { background:rgba(255,255,255,.22); height:30px; }
.foot-links { display:flex; gap:1.4rem; flex-wrap:wrap; align-items:center; }
.foot-links a { font-size:.85rem; font-weight:600; color:rgba(255,255,255,.82); }
.foot-links a:hover { color:#fff; text-decoration:underline; }
.footer-legal { border-top:1px solid rgba(255,255,255,.12); }
.footer-legal-inner { max-width:920px; margin:0 auto; padding:1.2rem 24px 2.2rem;
  font-size:.72rem; line-height:1.65; color:rgba(255,255,255,.46); display:flex; flex-direction:column; gap:.45rem; }
@media (max-width:560px){ .footer-top { gap:1rem; } .foot-brands { gap:.8rem; } }

/* ---- Cookie / Terms consent ---- */
.consent-overlay { position:fixed; inset:0; z-index:100; display:grid; align-items:end; justify-items:center;
  padding:0 16px 18px; background:linear-gradient(to top, rgba(10,12,14,.5), rgba(10,12,14,.14) 42%, rgba(10,12,14,0) 72%);
  animation:consentIn .35s ease; }
@keyframes consentIn { from { opacity:0; } to { opacity:1; } }
html.consent-ok .consent-overlay { display:none; }
.consent-card { width:100%; max-width:580px; background:#fff; border:1px solid var(--line); border-top:4px solid var(--red);
  border-radius:14px; box-shadow:var(--shadow-lg); padding:1.35rem 1.5rem 1.45rem; }
.consent-card h3 { font-size:1.02rem; font-weight:800; color:var(--ink); display:flex; align-items:center; gap:.5rem; }
.consent-card h3 .ic { color:var(--red); }
.consent-card p { margin:.5rem 0 0; font-size:.85rem; color:var(--gray-600); line-height:1.6; }
.consent-card a { color:var(--red); font-weight:700; text-decoration:underline; }
.consent-actions { margin-top:1.1rem; display:flex; align-items:center; gap:.85rem; flex-wrap:wrap; }
.consent-actions .btn { padding:.7rem 1.5rem; font-size:.9rem; }
.consent-actions .links { display:flex; gap:1.1rem; margin-inline-start:auto; }
.consent-actions .links a { font-size:.82rem; font-weight:700; }
@media (max-width:560px){ .consent-actions .btn.full-m { width:100%; } .consent-actions .links { margin-inline-start:0; order:3; } }

/* ---- Eligibility line under the form checkbox ---- */
.form .check.legal span { font-size:.84rem; }
.form .eligibility { font-size:.74rem; color:var(--gray-500); margin:.1rem 0 0; line-height:1.5; }

/* ---- Legal pages (privacy / terms) ---- */
.legal-wrap { max-width:820px; margin:0 auto; padding:2.4rem 24px 4.5rem; }
.legal-back { display:inline-flex; align-items:center; gap:.4rem; font-size:.85rem; font-weight:700;
  color:var(--gray-500); margin-bottom:1.25rem; }
.legal-back:hover { color:var(--red); }
.legal-doc { background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow);
  padding:2.5rem 2.6rem 2.8rem; }
.legal-doc .eyebrow { font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--red); }
.legal-doc h1 { margin-top:.55rem; font-size:clamp(1.6rem,4.5vw,2.2rem); font-weight:800; }
.legal-doc .meta { margin-top:.7rem; font-size:.82rem; color:var(--gray-500); }
.legal-doc h2 { margin-top:2rem; font-size:1.05rem; font-weight:800; color:var(--ink); }
.legal-doc h2 .num { color:var(--red); margin-inline-end:.45rem; }
.legal-doc p { margin:.55rem 0 0; font-size:.92rem; color:var(--gray-700); line-height:1.75; }
.legal-doc ul { margin:.55rem 0 0; padding-inline-start:1.35rem; }
.legal-doc li { font-size:.92rem; color:var(--gray-700); line-height:1.7; margin:.3rem 0; }
.legal-doc li ul { margin-top:.3rem; }
.legal-doc strong { color:var(--ink); }
.legal-doc a { color:var(--red); font-weight:700; }
.legal-doc .contact { margin-top:1.6rem; padding:1rem 1.2rem; background:var(--gray-50); border:1px solid var(--line);
  border-radius:10px; font-size:.9rem; color:var(--gray-700); }
.legal-doc .intro { margin-top:1rem; font-size:.98rem; color:var(--gray-600); }
@media (max-width:560px){ .legal-doc { padding:1.6rem 1.35rem 2rem; } .legal-wrap { padding:1.6rem 16px 3rem; } }

/* legal lists read right-aligned in Arabic */
[dir="rtl"] .legal-doc ul { padding-inline-start:0; padding-inline-end:1.35rem; }
[dir="rtl"] .foot-links, [dir="rtl"] .footer-legal-inner { text-align:right; }

/* ---- Campaign hero banner (full-width, full-bleed; cropped short to minimise height) ---- */
.hero-campaign { background:#0a1626; line-height:0; border-bottom:1px solid var(--line); }
.hero-campaign-img { display:block; width:100%; height:auto; }

/* ---- Step indicator (mirrors the banner's 5 steps) ---- */
.stepbar { border-bottom:1px solid var(--line); background:#fff; position:sticky; top:0; z-index:20; }
/* padding tuned so the 4 evenly-spaced dots line up under the banner's 4 step-cards */
.stepbar-inner { margin:0 auto; padding:1rem 19% 1rem 13%; display:flex; list-style:none; }
.stepdot { flex:1; position:relative; display:flex; flex-direction:column; align-items:center; gap:.4rem; min-width:0; }
.stepdot .n { position:relative; z-index:1; width:30px; height:30px; border-radius:50%; display:grid;
  place-items:center; font-weight:800; font-size:.82rem; background:var(--gray-100); color:var(--gray-500);
  border:2px solid var(--gray-200); transition:.2s; }
.stepdot .t { font-size:10.5px; font-weight:800; letter-spacing:.02em; text-transform:uppercase;
  color:var(--gray-400); text-align:center; line-height:1.2; }
.stepdot:not(:last-child)::after { content:""; position:absolute; top:14px; left:50%; width:100%;
  height:2px; background:var(--gray-200); z-index:0; }
.stepdot.done .n { background:var(--red); color:#fff; border-color:var(--red); }
.stepdot.done .t { color:var(--gray-600); }
.stepdot.done:not(:last-child)::after { background:var(--red); }
.stepdot.active .n { background:#fff; color:var(--red); border-color:var(--red); box-shadow:0 0 0 4px var(--red-tint); }
.stepdot.active .t { color:var(--red); }
[dir="rtl"] .stepdot:not(:last-child)::after { left:auto; right:50%; }
/* AR banner cards sit slightly differently — align the RTL dots to them */
[dir="rtl"] .stepbar-inner { padding-left:15.5%; padding-right:13%; }
@media (max-width:560px){
  .stepbar-inner { padding-block:.7rem; }
  .stepdot .n { width:25px; height:25px; font-size:.72rem; }
  .stepdot .t { font-size:8px; letter-spacing:0; }
  .stepdot:not(:last-child)::after { top:11.5px; }
}

/* win trophy badge */
.coupon-badge.win-badge { background:linear-gradient(135deg,#f4b40a,#d68f00);
  box-shadow:0 14px 34px -12px rgba(214,143,0,.6); }

/* ---- 5% code: copy + PDF-voucher buttons ---- */
.coupon-btns { margin-top:1rem; display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; }
.coupon-btns .btn { margin-top:0; }

/* ---- Off-screen voucher template (captured into the downloadable PDF) ---- */
/* clipped to 0×0 so it's invisible, but the captured node itself has NO off-screen
   transform/position (html2canvas clones it and would otherwise render blank). */
.voucher-clip { position:fixed; left:0; top:0; width:0; height:0; overflow:hidden; pointer-events:none; z-index:-1; }
/* during capture the template is rendered at real size on-screen (html2canvas needs it),
   hidden from the user behind the .bmp-pdf-overlay */
.voucher-clip.capturing { width:1000px; height:560px; overflow:visible; z-index:1; }
.voucher-tpl { position:relative; width:1000px; height:560px; background:#fff;
  font-family:"Inter",Arial,sans-serif; color:var(--ink); overflow:hidden; }
.bmp-pdf-overlay { position:fixed; inset:0; z-index:100000; background:rgba(255,255,255,.97);
  display:flex; align-items:center; justify-content:center; }
.bmp-pdf-overlay span { font-weight:800; font-size:1rem; color:var(--ink); }
.voucher-tpl .v-strip { height:10px; background:linear-gradient(90deg,
  #2e3236 0%,#2e3236 4.5%,#51585f 9%,#ED0007 9%,#ED0007 20.4%,#B90276 20.4%,#B90276 31.8%,
  #50237F 31.8%,#50237F 43.2%,#005691 43.2%,#005691 54.6%,#008ECF 54.6%,#008ECF 66%,
  #00A8B0 66%,#00A8B0 77.4%,#00884A 77.4%,#00884A 88.7%,#78BE20 88.7%,#78BE20 100%); }
.voucher-tpl .v-head { height:150px; background:#0a1c33;
  background-image:radial-gradient(120% 200% at 50% 0,#17426f 0,#0a1c33 70%);
  display:flex; align-items:center; justify-content:center; gap:46px; }
.voucher-tpl .v-head img { height:50px; width:auto; }
.voucher-tpl .v-head .vd { width:2px; height:48px; background:rgba(255,255,255,.3); }
/* Simple voucher: logos band + campaign message + code — content centered in the card */
.voucher-tpl .v-body { height:400px; padding:0 60px; text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center; }
.voucher-tpl .v-kick { font-size:19px; font-weight:800; letter-spacing:.26em; color:var(--red); text-transform:uppercase; }
.voucher-tpl .v-big { margin-top:10px; font-size:68px; font-weight:900; color:var(--ink); line-height:1; }
.voucher-tpl .v-big small { font-size:32px; font-weight:800; vertical-align:7px; letter-spacing:.02em; }
.voucher-tpl .v-codewrap { margin:30px auto 0; min-width:480px; border:3px dashed var(--red); border-radius:14px;
  background:var(--red-tint); padding:18px 36px; }
.voucher-tpl .v-code { font-family:"Courier New",monospace; font-size:48px; font-weight:800;
  letter-spacing:.1em; color:var(--ink); direction:ltr; }

/* ---- Kickoff status / lock (predictions stay open until kickoff, then close) ---- */
.match-status { display:flex; align-items:center; gap:.45rem; padding:.6rem 1.1rem;
  border-top:1px dashed var(--line); background:var(--gray-50);
  font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--gray-600); }
.match-status .ic { font-size:.95em; }
.match.locked { border-color:var(--gray-200); box-shadow:var(--shadow-sm); }
.match-status .score { font-weight:900; font-size:13px; letter-spacing:.02em; margin-left:.1rem; }
/* LIVE (kicked off, still playing) — keep the shaded/locked look */
.match.locked:not(.finished) .match-status { color:var(--red); background:var(--red-tint); border-top-color:rgba(237,0,7,.28); }
.match.locked:not(.finished) .picks { opacity:.42; pointer-events:none; filter:grayscale(.5); }
.match.locked:not(.finished) .match-meta { color:var(--gray-400); }
/* FINISHED — clean result, NO shade: winner highlighted green, score shown */
.match.finished { border-color:#cfe8d6; }
.match.finished .picks { pointer-events:none; }
.match.finished .pick { opacity:1; filter:none; }
.match.finished .pick::after { display:none !important; }   /* hide the prediction tick */
.match.finished .pick.result-other { opacity:.5; }
.match.finished .pick.result-win { border-color:#0f7a37; background:#e9f6ee; }
.match.finished .pick.result-win .pick-name,
.match.finished .pick.result-win .pick-label { color:#0f7a37; }
.match.finished .match-status { color:#0f7a37; background:#eef7f0; border-top-color:#cfe8d6; }

/* ---- Full World Cup schedule page (schedule.html / schedule-ar.html) ---- */
.sched-head { display:flex; align-items:flex-end; justify-content:space-between; gap:1.25rem;
  flex-wrap:wrap; padding:2.25rem 0 1rem; }
.sched-h1 { font-size:clamp(1.6rem,5vw,2.3rem); font-weight:800; }
.sched-sub { margin:.6rem 0 0; color:var(--gray-700); font-size:1.02rem; line-height:1.6; max-width:38rem; }
.sched-h2 { font-size:1.25rem; font-weight:800; color:var(--ink); margin:2.2rem 0 .4rem;
  padding-bottom:.45rem; border-bottom:3px solid var(--red); display:inline-block; }
.sched-section { margin-bottom:.75rem; }
.sched-day { font-size:.8rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gray-500); margin:1.2rem 0 .55rem; }
.sched-row { display:grid; grid-template-columns:92px minmax(0,1fr) 232px; gap:.9rem; align-items:center; min-height:71px;
  border:1px solid var(--line); border-radius:10px; background:#fff; padding:.65rem 1rem;
  margin-bottom:.5rem; box-shadow:var(--shadow-sm); }
.sched-row.past { opacity:.55; }
.sched-row.today { border-color:var(--red); box-shadow:0 0 0 1px var(--red) inset, var(--shadow-sm); }
.sched-when { display:flex; flex-direction:column; gap:.25rem; align-items:flex-start; min-height:40px; justify-content:center; }
.sched-when b { font-size:1.02rem; color:var(--ink); direction:ltr; }
.sched-chip { display:inline-block; border-radius:999px; padding:.1rem .55rem; font-size:.62rem;
  font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.sched-chip.live { background:var(--red); color:#fff; }
.sched-chip.done { background:var(--gray-200); color:var(--gray-600); }
.sched-chip.tbdchip { background:var(--gray-100); color:var(--gray-600); border:1px dashed var(--gray-300); }
.sched-teams { display:flex; align-items:center; justify-content:center; gap:.7rem; min-width:0; }
.sched-team { display:flex; align-items:center; gap:.5rem; min-width:0; flex:1; }
.sched-team.home { justify-content:flex-end; text-align:end; }
.sched-team.away { flex-direction:row-reverse; justify-content:flex-end; text-align:start; }
.sched-team-name { font-weight:800; font-size:.92rem; color:var(--ink); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.sched-team.tbd .sched-team-name { color:var(--gray-500); font-weight:600; }
.sched-vs { color:var(--gray-400); font-weight:800; width:18px; text-align:center; flex-shrink:0; }
/* Actual scoreline (finished / live matches) — sits where the × was */
.sched-score { flex-shrink:0; min-width:54px; text-align:center; font-weight:800; font-size:1.02rem;
  color:var(--ink); background:var(--gray-100); border-radius:6px; padding:.18rem .5rem; letter-spacing:.02em; }
.sched-score.livescore { background:var(--red-tint); color:var(--red); }
.sched-row.hasscore .sched-team.win .sched-team-name { color:var(--ink); font-weight:800; }
.sched-row.hasscore .sched-team:not(.win) .sched-team-name { color:var(--gray-500); }
.sched-chip.ft { background:var(--ink); color:#fff; }
.flag.sm2 { width:30px; height:30px; flex-shrink:0; }
.flag-tbd { display:inline-flex; align-items:center; justify-content:center; background:var(--gray-100);
  color:var(--gray-400); font-weight:800; font-size:.85rem; border:1px dashed var(--gray-300); }
.sched-meta { display:flex; flex-direction:column; gap:.2rem; align-items:flex-end; text-align:end; min-width:0; }
.sched-stage { font-size:.68rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--red); max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sched-venue { font-size:.72rem; color:var(--gray-500); max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sched-cta { text-align:center; padding:2.25rem 0 2.75rem; }
.sched-link { font-size:.85rem; font-weight:700; color:var(--gray-700); border:1.5px solid var(--gray-300);
  border-radius:8px; padding:.5rem .9rem; transition:.15s; white-space:nowrap; }
.sched-link:hover { border-color:var(--red); color:var(--red); }
@media (max-width:680px) {
  .sched-row { grid-template-columns:64px minmax(0,1fr); min-height:0; }
  .sched-meta { grid-column:1 / -1; flex-direction:row; justify-content:space-between; align-items:center;
    border-top:1px dashed var(--gray-200); padding-top:.45rem; }
  .sched-team-name { font-size:.8rem; white-space:normal; line-height:1.15; }
  .flag.sm2 { width:24px; height:24px; }
}

/* ---- WP nav menu in header ---- */
.header-nav-menu { display:flex; gap:.5rem; list-style:none; margin:0; padding:0; align-items:center; }
.header-nav-menu li a { font-size:.85rem; font-weight:700; color:var(--gray-700);
  border:1.5px solid var(--gray-300); border-radius:8px; padding:.5rem .9rem;
  transition:.15s; white-space:nowrap; text-decoration:none; }
.header-nav-menu li a:hover { border-color:var(--red); color:var(--red); }