/* Bubbli landing page — all styles.
   Split out of index.html so the browser can cache it separately from the
   markup, and so a strict CSP no longer needs to allow inline styles. */

*{margin:0;padding:0;box-sizing:border-box}

  /* ==========================================================
     Bubbli v2
     ========================================================== */
  #bb-root{
    /* official brand colours, taken from the logo lockup */
    --brand-orange:#fc4631;
    --brand-navy:#10276b;

    /* neutrals: cool grey-blue */
    --paper:#f9fafd;
    --card:#ffffff;
    --ink:#232833;
    --muted:#727a88;
    --line:#e0e5ee;
    --wash:#f4f6fa;        /* subtle inset panels (meter, notes, receipt) */

    /* service tints lifted from the app's New Order screen */
    --svc-core:#f6f7fa;
    --svc-luxe:#fdeeeb;
    --svc-express:#fbfbe3;
    --svc-core-line:#b4c1e2;  /* chosen-card border: each tint's own hue, deepened */
    --svc-luxe-line:#f2b6a4;

    --accent:var(--brand-orange);
    --accent-deep:#d8341f;
    --foam:#ffeae4;
    --mint:#0e7d3a;
    --mint-soft:#e7f4ea;
    --danger:#b3261e;
    --r-lg:24px;
    --r-md:16px;
    --shadow:0 10px 30px rgba(35,45,70,.08);

    color-scheme: light;
    background:var(--paper);
    color:var(--ink);
    font-family:Tajawal,-apple-system,"SF Arabic",BlinkMacSystemFont,"Segoe UI","Noto Sans Arabic",sans-serif;
    line-height:1.7;
    min-height:100vh;
    overflow-x:hidden;
    position:relative;
  }
  /* Base layer wrapped in :where() so it carries ZERO specificity — otherwise
     `#bb-root *` (1,0,1) silently beats every component class (0,1,0) and wipes
     out margins, button fills and borders across the whole page. */
  :where(#bb-root) *{box-sizing:border-box;margin:0;font-family:inherit}
  #bb-root ::selection{background:var(--foam)}
  :where(#bb-root) :is(img,svg){max-width:100%;display:block}
  :where(#bb-root) button{cursor:pointer;border:0;background:none;color:inherit;font:inherit}
  :where(#bb-root) :is(input,textarea){font-size:inherit;color:var(--ink)}
  :where(#bb-root) a{color:inherit}
  #bb-root :focus-visible{outline:3px solid rgba(252,70,49,.4);outline-offset:2px;border-radius:6px}
  /* `hidden` must always win. Any component class that sets `display` (e.g.
     .bb-verified{display:flex}) otherwise beats the UA's [hidden]{display:none},
     because author styles outrank UA styles — the element stays visible while
     el.hidden reads true. */
  #bb-root [hidden]{display:none !important}

  /* ---------- ambient bubbles (the one flourish) ---------- */
  .bb-bubbles{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
  .bb-bubble{
    position:absolute;border-radius:50%;
    background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.98), rgba(255,255,255,.30) 42%, rgba(252,70,49,.07) 100%);
    box-shadow:inset 0 0 0 1px rgba(252,70,49,.10);
    opacity:.4;
    animation:bbFloat linear infinite;
  }
  @keyframes bbFloat{
    from{transform:translateY(12vh) translateX(0)}
    to{transform:translateY(-110vh) translateX(24px)}
  }
  @media (prefers-reduced-motion:reduce){ .bb-bubble{animation:none;opacity:.18} }
  /* Nine continuously-animating gradient circles are pure decoration and cost
     real paint work on a phone. Half of them are hidden on small screens. */
  @media (max-width:640px){ .bb-bubble:nth-child(n+5){display:none} }

  .bb-shell{position:relative;z-index:1;max-width:1100px;margin:0 auto;padding:0 18px 90px}

  /* ---------- header ---------- */
  .bb-header{display:flex;align-items:center;padding:20px 2px 4px}
  /* auto margin on the inline-start side (the right, in RTL) pushes the lockup
     to the left edge — stays correct even if the page ever renders LTR */
  .bb-logo{display:flex;align-items:center;margin-inline-start:auto}
  /* official lockup, inlined: mark in brand orange, wordmark in brand navy */
  .bb-logo-mark{
    width:132px;height:auto;display:block;
    animation:bbLogoFloat 5s ease-in-out infinite;will-change:transform;
  }
  @media(max-width:400px){ .bb-logo-mark{width:118px} }
  @keyframes bbLogoFloat{
    0%,100%{transform:translateY(0)}
    50%    {transform:translateY(-7px)}
  }
  @media (prefers-reduced-motion:reduce){ .bb-logo-mark{animation:none} }

  /* ---------- hero: welcome + order ---------- */
  .bb-hero{display:grid;gap:22px;padding:44px 0 10px;align-items:start}
  @media(min-width:980px){
    .bb-hero{grid-template-columns:1fr 1fr;gap:44px;padding-top:56px}
    .bb-hero-copy{position:sticky;top:24px}
  }
  .bb-h1{
    font-size:clamp(2.1rem,6.5vw,3.3rem);font-weight:800;line-height:1.25;
    text-wrap:balance;margin-bottom:10px;margin-top:8px;color:var(--brand-navy);
  }
  .bb-h1 em{font-style:normal;color:var(--accent)}

  /* The real <h1>: the target keyword, set as an eyebrow above the display
     line. Kept smaller so the animated hook stays the visual hero — Google
     weighs the H1's text, not its font-size. Swap the sizes here if the
     keyword should be the big line instead. */
  .bb-h1-seo{
    font-size:clamp(.95rem,2.6vw,1.1rem);font-weight:700;
    color:var(--muted);letter-spacing:.005em;
    margin-top:8px;margin-bottom:2px;
  }

  /* rotating headline — "الكشف بالمسح".
     No overflow:hidden here: the clip-path does the masking, and clipping the box
     would cut Arabic diacritics (the shadda in معطّر / مغلّف sits above the line).
     The word is never split per-letter — that severs Arabic cursive joining. */
  .bb-h1-slot{
    position:relative;display:inline-block;vertical-align:top;
    color:var(--accent);white-space:nowrap;
  }
  .bb-h1-slot i{
    position:absolute;inset-inline-start:0;top:0;
    font-style:normal;white-space:nowrap;opacity:0;
  }
  .bb-h1-slot i.in {animation:bbWipeIn .62s cubic-bezier(.65,0,.35,1) forwards}
  .bb-h1-slot i.out{animation:bbWipeOut .40s cubic-bezier(.65,0,.35,1) forwards}
  @keyframes bbWipeIn {from{opacity:1;clip-path:inset(0 0 0 100%)} to{opacity:1;clip-path:inset(0 0 0 0)}}
  @keyframes bbWipeOut{from{opacity:1;clip-path:inset(0 0 0 0)}    to{opacity:1;clip-path:inset(0 100% 0 0)}}
  @media (prefers-reduced-motion:reduce){
    .bb-h1-slot{width:auto !important}
    .bb-h1-slot i{position:static;animation:none !important;opacity:1;clip-path:none}
    .bb-h1-slot i.out{display:none}
  }
  /* readable by screen readers, invisible on screen */
  .bb-sr{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;
         clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .bb-sub{font-size:clamp(1rem,2.6vw,1.15rem);color:var(--muted);max-width:34ch;margin-bottom:18px}
  .bb-trust-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;margin-top:26px}
  .bb-trust{
    display:inline-flex;align-items:center;gap:6px;font-size:1rem;font-weight:400;
    background:var(--card);border:1px solid var(--line);padding:6px 12px;border-radius:999px;
  }
  .bb-trust svg{width:15px;height:15px;flex:none}
  /* the certification sits in the same row but stays green so it reads as a credential */
  .bb-cert{
    color:var(--mint);background:var(--mint-soft);border-color:transparent;
    text-decoration:none;transition:transform .15s;
  }
  .bb-cert:hover{transform:translateY(-1px)}

  /* ---------- certification popup ---------- */
  /* The chip is a <button> now, so it inherits the :where() button reset; these
     just restore the pill it shares with .bb-trust. */
  .bb-cert{font:inherit;font-size:1rem;text-align:inherit}

  /* `display` MUST stay scoped to [open]. An unscoped display on <dialog> beats
     the UA's `dialog:not([open]){display:none}` and the popup renders
     permanently — the same trap that left the OTP "verified" note visible. */
  .bb-cert-modal{border:0;padding:0;background:transparent;max-width:none;color:var(--ink)}
  .bb-cert-modal[open]{
    display:flex;flex-direction:column;align-items:center;text-align:center;
    /* The global `*{margin:0}` reset kills the UA's `margin:auto`, which is what
       centres a modal dialog inside its `inset:0`. Without this it sticks to the
       top-left corner. */
    margin:auto;
    width:min(340px,calc(100vw - 32px));
    max-height:calc(100dvh - 32px);overflow:auto;
    padding:28px 24px 24px;
    background:var(--card);border-radius:var(--r-lg);
    box-shadow:0 24px 60px rgba(16,39,107,.22);
    animation:bbCertIn .22s ease-out;
  }
  .bb-cert-modal::backdrop{background:rgba(16,39,107,.45)}
  @keyframes bbCertIn{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){ .bb-cert-modal[open]{animation:none} }

  .bb-cert-x{
    position:absolute;top:10px;inset-inline-start:10px;
    width:34px;height:34px;border-radius:50%;color:var(--muted);
    display:flex;align-items:center;justify-content:center;
  }
  .bb-cert-x:hover{background:var(--wash);color:var(--ink)}
  .bb-cert-x svg{width:17px;height:17px}

  .bb-cert-badge{width:168px;height:auto;display:block;margin-bottom:18px}
  .bb-cert-line{font-size:1rem;font-weight:700;line-height:1.65}
  .bb-cert-no{margin-top:8px;font-size:.95rem;color:var(--muted)}
  .bb-cert-no b{color:var(--ink);font-weight:700;unicode-bidi:isolate}
  .bb-cert-verify{
    margin-top:20px;display:inline-flex;align-items:center;gap:7px;
    padding:9px 17px;border-radius:999px;text-decoration:none;
    font-size:.9rem;font-weight:700;
    color:var(--mint);background:var(--mint-soft);transition:transform .15s;
  }
  .bb-cert-verify:hover{transform:translateY(-1px)}
  .bb-cert-verify svg{width:15px;height:15px;flex:none}

  /* social proof + store badge, directly under the order card */
  .bb-app{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:18px}
  .bb-rating{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--muted)}
  .bb-stars{color:#eaa53f;letter-spacing:2px;font-size:.95rem}
  .bb-appstore{display:block;transition:transform .15s}
  .bb-appstore:hover{transform:translateY(-2px)}
  .bb-appstore img{width:200px;height:auto;display:block}

  /* ---------- order card ---------- */
  .bb-order{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden}
  .bb-order-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 20px 0}
  .bb-order-title{font-weight:800;font-size:1.1rem}
  .bb-steps-dots{display:flex;gap:6px}
  .bb-dot{width:22px;height:5px;border-radius:99px;background:var(--line);transition:background .25s}
  .bb-dot.on{background:var(--accent)}
  .bb-order-body{padding:16px 20px 20px}

  .bb-step{animation:stepIn .32s ease both}
  @keyframes stepIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){.bb-step{animation:none}}
  .bb-step[hidden]{display:none}

  .bb-label{font-size:.95rem;font-weight:800;margin:14px 0 8px;display:flex;align-items:center;gap:8px}
  /* step-1 labels sit above centred content (the service grid, the stepper),
     so they centre too rather than hugging the right edge */
  .bb-label--center{justify-content:center}
  .bb-label small{font-weight:500;color:var(--muted)}

  /* service cards — now carrying the real app icons */
  .bb-services{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  /* tinted fills instead of outlined white cards, matching the app's New Order screen */
  .bb-svc{
    position:relative;text-align:center;border:2px solid transparent;border-radius:var(--r-md);
    padding:18px 10px 13px;background:var(--svc-core);
    transition:border-color .2s,transform .12s;
    /* Column + auto margin on the stepper pins both steppers to the bottom of
       their cards. Without it the core card's extra "لفترة محدودة" line pushes
       its stepper ~34px lower than the luxe one. */
    display:flex;flex-direction:column;
  }
  .bb-svc[data-svc="luxe"]{background:var(--svc-luxe)}
  .bb-svc:active{transform:scale(.98)}
  /* Selected = a border in the card's OWN colour family, not the orange accent.
     The accent border plus its 3px ring read as an alert beside two already
     tinted cards; an on-tone border marks the choice without shouting. The
     background never changes, and the 2px transparent border is always there so
     nothing shifts size when a card is picked. */
  .bb-svc.on{border-color:var(--svc-core-line)}
  .bb-svc[data-svc="luxe"].on{border-color:var(--svc-luxe-line)}
  /* The wrapper owns the selected-state scale and the icon owns the idle
     animation. They must be separate elements: a running animation outranks a
     normal declaration, so putting both on one element means the animation
     silently eats the .on scale. */
  .bb-svc-ico{
    display:block;width:54px;height:54px;margin:0 auto 8px;pointer-events:none;
    perspective:420px;                 /* gives the core flip real depth */
    transition:transform .25s ease;
  }
  /* the luxe orbital has more rings, so it needs a touch more room to read */
  .bb-svc[data-svc="luxe"] .bb-svc-ico{width:64px;height:64px;margin-bottom:2px}
  .bb-svc.on .bb-svc-ico{transform:scale(1.08)}
  .bb-svc-icon{width:100%;height:100%;object-fit:contain;display:block}

  /* core: a slow flip that rests, rather than spinning constantly — it should
     catch the eye on a glance, not compete with the price. Held flat for the
     first 55% of the cycle, then one full turn. transform only, so it stays on
     the compositor and costs no layout or paint. */
  .bb-svc[data-svc="core"] .bb-svc-icon{
    animation:bbCoreFlip 7s cubic-bezier(.55,0,.45,1) infinite;
    backface-visibility:visible;
  }
  @keyframes bbCoreFlip{
    0%,55% { transform:rotateY(0deg) }
    100%   { transform:rotateY(360deg) }
  }

  /* luxe: brand-orange gradient drifting through the glyph. The PNG becomes a
     mask so the gradient shows only inside the orbital strokes.
     Guarded by @supports: without mask support the wrapper would paint as a
     solid gradient rectangle, so in that case we leave the plain image alone. */
  @supports ((-webkit-mask-image:url(#m)) or (mask-image:url(#m))){
    .bb-svc[data-svc="luxe"] .bb-svc-ico{
      -webkit-mask:url(/images/service-luxe.png) center/contain no-repeat;
              mask:url(/images/service-luxe.png) center/contain no-repeat;
      /* A highlight sweeping across a solid brand base. Two things were tuned
         by eye and matter: broad orange-to-orange stops are invisible on
         strokes this thin, but a near-white peak washed the whole 64px glyph
         out at mid-sweep. A light-coral peak in a narrow window reads as
         movement while the icon stays legible at every phase. */
      background-image:linear-gradient(105deg,
        var(--accent-deep) 0%,   var(--accent) 38%,
        #ffb08c 47%,             #ffc9b0 50%,   #ffb08c 53%,
        var(--accent) 62%,       var(--accent-deep) 100%);
      background-size:300% 100%;
      animation:bbLuxeShimmer 5s linear infinite;
    }
    /* hidden, not removed — the <img> still reserves the box and still loads,
       which is what the mask is sized against. */
    .bb-svc[data-svc="luxe"] .bb-svc-icon{visibility:hidden}
  }
  @keyframes bbLuxeShimmer{
    from { background-position:0% 50% }
    to   { background-position:-300% 50% }
  }

  @media (prefers-reduced-motion:reduce){
    .bb-svc[data-svc="core"] .bb-svc-icon,
    .bb-svc[data-svc="luxe"] .bb-svc-ico{animation:none}
  }
  .bb-svc-name{font-weight:800;font-size:1.5rem}
  .bb-svc-desc{font-size:.74rem;color:var(--muted);line-height:1.55;margin-top:3px;min-height:2.4em}
  /* flex + gap so the struck-out price never merges with the new one
     (inline margins let "35" and "29" read as one number "3529" in RTL) */
  .bb-svc-price{
    margin-top:7px;font-weight:800;font-size:1.35rem;font-variant-numeric:tabular-nums;
    display:flex;align-items:baseline;justify-content:center;gap:8px;
  }
  .bb-svc-price .now{color:var(--ink)}
  /* The card price is 800-weight, which makes the default .bb-sar (sized for
     body text) read light beside it. A larger ratio here only — the totals and
     receipt keep the global size. */
  .bb-svc-price .bb-sar{height:.82em;width:.734em}

  /* Official Saudi Riyal symbol, replacing the "ر.س" abbreviation everywhere a
     price is shown. Inherits currentColor via <use>, so the same markup works
     on the ink service prices, the orange grand total and the green discount
     row. Width is derived from the 1124.14×1256.39 viewBox (ratio .895) so the
     glyph never distorts. */
  .bb-sar{
    /* Must beat `:where(#bb-root) :is(img,svg){display:block}` above, or the
       glyph becomes a block and drops onto its own line under the number. */
    display:inline-block;
    /* Tajawal's digits carry ~.64em of ink, so .72em makes the symbol read a
       touch larger than the numerals — the usual proportion for a currency
       mark. Width follows the viewBox ratio (.8947) so it never distorts. */
    height:.72em;width:.644em;
    fill:currentColor;
    /* A replaced element's baseline is its bottom edge, and the glyph fills the
       viewBox to the bottom, so `baseline` lands it exactly on the digits'. */
    vertical-align:baseline;
    flex:none;
  }
  .bb-badge{
    position:absolute;top:-9px;inset-inline-start:12px;background:var(--accent);color:#fff;
    font-size:.68rem;font-weight:800;padding:3px 10px;border-radius:999px;box-shadow:0 4px 10px rgba(252,70,49,.35);
  }

  /* per-service qty stepper, inside each card.
     The order carries a quantity per service, so a single shared stepper has no
     meaning any more — each card owns its own count and a card reads as chosen
     when that count is above zero. */
  .bb-svc-qty{
    display:flex;align-items:center;justify-content:center;gap:6px;
    margin-top:auto;background:var(--card);border:1.5px solid var(--line);
    border-radius:999px;padding:4px;
  }
  /* SVG icons, not "+" and "−" text. A glyph is centred on its LINE BOX, not on
     its ink, and Tajawal puts the ink of both symbols ~4.2px above the baseline
     — so the plus visibly sat low inside its circle. An SVG is centred
     geometrically, and both symbols get an identical stroke weight. */
  .bb-svc-qty button{
    width:40px;height:40px;border-radius:50%;border:1.5px solid var(--line);background:#fff;
    color:var(--ink);flex:none;
    display:grid;place-items:center;transition:transform .1s,border-color .2s,opacity .2s;
  }
  .bb-svc-qty button svg{width:18px;height:18px;display:block}
  .bb-svc-qty button:active{transform:scale(.9)}
  .bb-svc-qty button:disabled{opacity:.3;cursor:not-allowed}
  .bb-svc-qty .n{
    min-width:2ch;text-align:center;font-size:1.15rem;font-weight:800;
    font-variant-numeric:tabular-nums;color:var(--ink);
    /* Tajawal reserves a deep descender, so even with line-height:1 the digit's
       ink sits at the TOP of its line box — measured 3.53px above the pill's
       centre at this size. Flexbox centres the box, not the ink, so the only
       fix is to shift the glyph itself. 3.53/18.4 = 0.19em, expressed in em so
       it tracks the font size. transform, so it costs no layout. */
    line-height:1;
    transform:translateY(0.19em);
  }
  /* The pill keeps the neutral border in both states — the card's own accent
     border already signals "chosen", so repeating it inside was one highlight
     too many. A zero stays muted so an untouched card still reads as empty. */
  .bb-svc:not(.on) .bb-svc-qty .n{color:var(--muted)}

  /* free-delivery meter */
  /* No panel around it — the bar and its line of text carry the message, and a
     bordered box competed with the service cards directly above. */
  .bb-meter{margin-top:14px;padding:0 2px}
  .bb-meter-track{height:8px;border-radius:99px;background:var(--line);overflow:hidden}
  .bb-meter-fill{height:100%;border-radius:99px;background:var(--accent);transition:width .35s ease,background .35s}
  .bb-meter.done .bb-meter-fill{background:var(--mint)}
  .bb-meter-txt{font-size:.8rem;font-weight:700;margin-top:7px;color:var(--muted)}
  .bb-meter.done .bb-meter-txt{color:var(--mint)}

  /* express row — light yellow + running glyph, mirroring the app's "Sarie" card */
  /* unlike the service cards this row never takes an accent border — the toggle
     alone carries the on/off state, so the row stays calm either way */
  .bb-express{
    display:flex;align-items:center;gap:12px;margin-top:12px;padding:12px 14px;
    border-radius:var(--r-md);background:var(--svc-express);
  }
  .bb-express-ico{flex:none;width:50px;height:50px;display:grid;place-items:center}
  .bb-express-ico img{width:44px;height:44px;object-fit:contain;pointer-events:none}
  .bb-express-info{flex:1;min-width:0}
  .bb-express-info b{font-size:1rem}
  .bb-express-info small{display:block;color:var(--muted);font-size:.74rem}
  .bb-switch{position:relative;width:48px;height:28px;flex:none}
  .bb-switch input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}
  .bb-switch-ui{position:absolute;inset:0;border-radius:99px;background:var(--line);transition:background .2s;pointer-events:none}
  .bb-switch-ui::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.2);transition:transform .2s}
  .bb-switch input:checked + .bb-switch-ui{background:var(--accent)}
  .bb-switch input:checked + .bb-switch-ui::after{transform:translateX(-20px)}

  /* totals */
  .bb-total{margin-top:16px;border-top:2px dashed var(--line);padding-top:12px;display:flex;flex-direction:column;gap:5px;font-size:.9rem}
  .bb-row{display:flex;justify-content:space-between;gap:10px}
  .bb-row .v{font-variant-numeric:tabular-nums;font-weight:700}
  .bb-row.muted{color:var(--muted);font-weight:400}
  .bb-row.muted .v{font-weight:500}
  .bb-row.free .v{color:var(--mint)}
  .bb-row.grand{font-size:1.15rem;font-weight:800;margin-top:3px}
  .bb-row.grand .v{color:var(--accent-deep)}
  .bb-row.disc .v{color:var(--mint)}

  /* buttons */
  .bb-cta{
    width:100%;margin-top:16px;padding:15px;border-radius:var(--r-md);
    background:var(--accent);color:#fff;font-weight:800;font-size:1.05rem;
    box-shadow:0 8px 20px rgba(252,70,49,.32);transition:transform .12s,box-shadow .2s,opacity .2s;
  }
  .bb-cta:active{transform:scale(.98)}
  .bb-cta:disabled{opacity:.45;box-shadow:none;cursor:not-allowed}
  .bb-cta.secondary{background:#fff;color:var(--ink);border:1.5px solid var(--line);box-shadow:none}
  .bb-back{margin-top:10px;width:100%;padding:10px;font-weight:700;color:var(--muted);font-size:.9rem}
  .bb-back::before{content:"→ ";font-weight:400}

  /* inputs */
  .bb-input{width:100%;border:1.5px solid var(--line);border-radius:var(--r-md);padding:13px 15px;background:#fff;transition:border-color .2s,box-shadow .2s}
  .bb-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(252,70,49,.14)}
  .bb-input.ltr{direction:ltr;text-align:center;letter-spacing:1px}
  .bb-hint{font-size:.74rem;color:var(--muted);margin-top:5px}
  .bb-or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.8rem;margin:13px 0}
  .bb-or::before,.bb-or::after{content:"";flex:1;height:1px;background:var(--line)}

  .bb-locate{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;padding:13px;border:1.5px solid var(--accent);border-radius:var(--r-md);color:var(--accent);font-weight:800;background:#fff;transition:background .2s}
  .bb-locate:hover{background:var(--foam)}

  /* interactive pin, loaded lazily; the fallback overlays it if Maps JS fails to load */
  .bb-map{position:relative;height:200px;border-radius:var(--r-md);overflow:hidden;margin-top:12px;background:var(--wash);border:1px solid var(--line)}
  .bb-map-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;text-align:center;font-size:.82rem;color:var(--muted)}

  /* flex-start + line-height: a geocoded address can wrap to two lines */
  .bb-located{display:flex;align-items:flex-start;gap:9px;background:var(--mint-soft);color:var(--mint);font-weight:700;font-size:.88rem;border-radius:var(--r-md);padding:12px 14px;margin-top:10px;line-height:1.6}
  .bb-located svg{flex:none;margin-top:2px}
  .bb-spin{width:16px;height:16px;border:2px solid currentColor;border-inline-end-color:transparent;border-radius:50%;animation:bbSpin .7s linear infinite;flex:none}
  @keyframes bbSpin{to{transform:rotate(360deg)}}

  /* chips */
  .bb-chips{display:flex;gap:8px;flex-wrap:wrap}
  .bb-chip{padding:9px 16px;border:1.5px solid var(--line);border-radius:999px;background:#fff;font-weight:700;font-size:.85rem;transition:border-color .2s,background .2s}
  .bb-chip.on{border-color:var(--accent);background:var(--foam);color:var(--accent-deep)}
  .bb-note{display:flex;gap:8px;align-items:flex-start;font-size:.78rem;color:var(--muted);background:var(--wash);border-radius:var(--r-md);padding:10px 13px;margin-top:13px}

  /* OTP */
  /* two classes so it outranks `.bb-input.ltr`'s letter-spacing */
  .bb-input.bb-otp-input{font-size:1.5rem;letter-spacing:12px;font-weight:800;font-variant-numeric:tabular-nums;padding-inline-start:27px}
  .bb-verified{display:flex;align-items:center;gap:9px;background:var(--mint-soft);color:var(--mint);font-weight:800;border-radius:var(--r-md);padding:12px 14px}
  .bb-verified svg{flex:none}
  /* escape hatch: locking the number outright would trap anyone who wants to
     order on a different phone */
  .bb-change-phone{
    margin-inline-start:auto;flex:none;background:none;border:0;padding:4px 2px;
    color:var(--mint);font-weight:700;font-size:.78rem;text-decoration:underline;
    text-underline-offset:3px;cursor:pointer;
  }
  /* a verified number is locked — readonly rather than disabled so it stays
     readable and selectable, and still submits with the form */
  .bb-input[readonly]{background:var(--wash);color:var(--muted);cursor:not-allowed}
  .bb-input[readonly]:focus{border-color:var(--line);box-shadow:none}
  .bb-err{color:var(--danger);font-size:.82rem;font-weight:700;margin-top:7px}
  .bb-shake{animation:bbShake .4s}
  @keyframes bbShake{0%,100%{transform:none}25%{transform:translateX(6px)}50%{transform:translateX(-6px)}75%{transform:translateX(4px)}}

  /* fake SMS toast */
  /* Hidden by translating off-screen, but the shadow is offset 16px DOWN with a
     40px blur — so it still painted a dark band across the top of the viewport
     (centred, 380px wide, matching this box). Opacity kills the shadow too;

  /* review receipt */
  .bb-receipt{border:1.5px dashed var(--line);border-radius:var(--r-md);padding:14px 16px;background:var(--wash)}
  .bb-receipt .bb-row{padding:3px 0}
  .bb-edit{font-size:.72rem;color:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:3px}
  /* Centred, with a ticket glyph — as a bare underlined line of text pushed to
     one edge it read as fine print and got missed. */
  .bb-coupon-toggle{
    display:flex;align-items:center;justify-content:center;gap:7px;
    width:100%;margin-top:14px;
    font-size:.92rem;font-weight:700;color:var(--accent);
  }
  .bb-coupon-toggle svg{width:18px;height:18px;flex:none}
  .bb-coupon-toggle span{text-decoration:underline;text-underline-offset:3px}
  .bb-coupon-row{display:flex;gap:8px;margin-top:10px}
  .bb-coupon-row .bb-input{flex:1}
  .bb-coupon-row button{
    padding:0 20px;border-radius:var(--r-md);border:1.5px solid var(--ink);
    font-weight:700;background:var(--ink);color:#fff;flex:none;
    transition:opacity .15s;
  }
  .bb-coupon-row button:disabled{opacity:.45;cursor:not-allowed}
  .bb-coupon-msg{font-size:.8rem;font-weight:700;margin-top:6px}
  .bb-cod-line{display:flex;align-items:center;justify-content:center;gap:7px;font-size:.8rem;color:var(--muted);margin-top:10px}

  /* success */
  .bb-success{text-align:center;padding:10px 0 6px;position:relative}
  .bb-check{width:86px;height:86px;margin:0 auto 14px}
  .bb-check circle{stroke:var(--mint);stroke-width:2.5;fill:var(--mint-soft);stroke-dasharray:290;stroke-dashoffset:290;animation:draw .7s ease forwards}
  .bb-check path{stroke:var(--mint);stroke-width:5;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60;animation:draw .5s .5s ease forwards}
  @keyframes draw{to{stroke-dashoffset:0}}
  @media (prefers-reduced-motion:reduce){.bb-check circle,.bb-check path{animation:none;stroke-dashoffset:0}}
  .bb-order-no{display:inline-block;font-variant-numeric:tabular-nums;background:var(--wash);border:1px solid var(--line);border-radius:999px;padding:5px 16px;font-weight:800;margin-top:8px;direction:ltr}
  .bb-success h3{font-size:1.35rem;font-weight:800}
  .bb-success p{color:var(--muted);font-size:.9rem;max-width:30ch;margin:8px auto 0}
  .bb-confetti{position:absolute;width:8px;height:14px;border-radius:2px;opacity:0;animation:conf 1.6s ease-out forwards;pointer-events:none}
  @keyframes conf{0%{opacity:1;transform:translateY(0) rotate(0)}100%{opacity:0;transform:translateY(130px) rotate(300deg)}}

  /* ---------- sections ---------- */
  .bb-section{margin-top:56px}
  .bb-h2{font-size:clamp(1.4rem,4vw,1.9rem);font-weight:800;text-wrap:balance;margin-bottom:6px}
  .bb-section-sub{color:var(--muted);font-size:.92rem;margin-bottom:22px}

  /* ---------- تجارب عملائنا : YouTube Shorts (live players) ---------- */
  /* Mobile: horizontal swipe strip — full-width 9:16 tiles stacked would add
     ~600px of scrolling each to a page whose whole point is a short path to
     order. Desktop: plain 3-up grid. */
  .bb-yt-grid{
    display:grid;gap:14px;
    grid-auto-flow:column;
    grid-auto-columns:min(62vw,240px);
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    padding-bottom:10px;margin-inline:-18px;padding-inline:18px;
    -webkit-overflow-scrolling:touch;
  }
  .bb-yt-grid::-webkit-scrollbar{height:6px}
  .bb-yt-grid::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
  @media(min-width:760px){
    .bb-yt-grid{
      grid-auto-flow:row;grid-template-columns:repeat(3,1fr);
      overflow:visible;margin-inline:0;padding-inline:0;
    }
  }
  .bb-yt{
    position:relative;aspect-ratio:9/16;border-radius:var(--r-lg);overflow:hidden;
    background:#12151c;border:1px solid var(--line);box-shadow:var(--shadow);
    scroll-snap-align:start;
  }
  .bb-yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
  /* file:// only — YouTube rejects a null origin (error 153), so the tile links
     out instead of embedding a player that could only render an error. */
  .bb-yt-link{
    position:absolute;inset:0;display:grid;place-items:center;padding:16px;
    color:#fff;font-weight:800;font-size:.9rem;text-align:center;text-decoration:none;
    background:linear-gradient(150deg,#1c2130,#8a2f1c 55%,#fc4631);
  }
  .bb-yt-note{font-size:.78rem;color:var(--muted);margin-top:12px;text-align:center}
  .bb-swipe-hint{color:var(--accent);font-weight:700;white-space:nowrap}
  @media(min-width:760px){ .bb-swipe-hint{display:none} }

  /* ---------- how it works ---------- */
  .bb-how{display:grid;gap:12px}
  @media(min-width:760px){.bb-how{grid-template-columns:repeat(3,1fr)}}
  .bb-how-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;display:flex;flex-direction:column;gap:9px}
  .bb-how-ico{width:46px;height:46px;border-radius:14px;background:var(--foam);display:grid;place-items:center;color:var(--accent)}
  .bb-how-ico svg{width:24px;height:24px}
  .bb-how-card b{font-size:1rem}
  .bb-how-card p{font-size:.94rem;color:var(--muted)}

  /* ---------- FAQ ---------- */
  .bb-faq details{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:0 18px;margin-bottom:9px}
  .bb-faq summary{list-style:none;cursor:pointer;font-weight:800;font-size:1rem;padding:14px 0;display:flex;justify-content:space-between;align-items:center;gap:10px}
  .bb-faq summary::-webkit-details-marker{display:none}
  .bb-faq summary::after{content:"+";font-size:1.5rem;color:var(--accent);font-weight:400;transition:transform .2s}
  .bb-faq details[open] summary::after{transform:rotate(45deg)}
  .bb-faq details p{padding:0 0 15px;font-size:.86rem;color:var(--muted)}

  /* ---------- footer ---------- */
  .bb-footer{margin-top:60px;border-top:1px solid var(--line);padding:26px 2px 10px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;font-size:.8rem;color:var(--muted)}
  /* flex-basis:100% keeps the links on their own row above the copyright and
     socials, so the existing two-item space-between layout is untouched. */
  .bb-footer-nav{flex:0 0 100%;display:flex;flex-wrap:wrap;gap:8px 20px;margin-bottom:2px}
  .bb-footer-nav a{color:var(--muted);text-decoration:none;transition:color .18s}
  .bb-footer-nav a:hover{color:var(--accent)}

  .bb-socials{display:flex;gap:10px;align-items:center}
  .bb-socials a{
    width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
    background:var(--card);border:1px solid var(--line);color:var(--brand-navy);
    text-decoration:none;transition:color .18s,border-color .18s,transform .15s;
  }
  .bb-socials a:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-2px)}
  .bb-socials svg{width:18px;height:18px;display:block}

  /* WhatsApp FAB */
  .bb-wa{position:fixed;bottom:18px;inset-inline-end:16px;z-index:50;width:54px;height:54px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 10px 26px rgba(0,0,0,.22);transition:transform .15s}
  .bb-wa:hover{transform:translateY(-2px)}
  .bb-wa svg{width:28px;height:28px;fill:#fff}