/* HotOrder Mall — landing refinement layer.
   Loaded last, after landing.css. Purely additive: it retints and tightens
   existing markup and never changes display/position, so no template is
   rewritten and the layer can be removed without leaving a broken page.

   Palette is the brand sheet's, verbatim:
   #FF6A00  #FF9F1A  #0F1115  #1E232C  #FFFFFF                                */

:root{
  /* the page already ships --primary at #FF6B00; pin it to the brand value */
  --primary:#ff6a00;
  --primary-dark:#d95a00;
  --primary-rgb:255,106,0;

  /* the stock secondary is green, which fights the mark — make it the
     second brand orange so the page reads as one family */
  --secondary:#ff9f1a;
  --secondary-rgb:255,159,26;

  --title:#0f1115;
  --text:#5a626c;

  --hl-ink:#0f1115;
  --hl-ink-soft:#1e232c;
  --hl-line:#e7e9ee;
  --hl-surface:#f6f7f9;
  --hl-grad:linear-gradient(135deg,#ff6a00,#ff9f1a);
  --hl-r:14px;
}

/* ── type ──────────────────────────────────────────────────────────────── */
body{color:var(--text);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6,.sec-header h2,.sec-title{color:var(--title);letter-spacing:0}
/* Arabic is cursive: any positive tracking breaks letter joins */
[dir="rtl"] *,html[lang^="ar"] *{letter-spacing:0 !important}

/* ── hero: the brand's dark disc, so the logo sits in its own world ─────── */
.hero{background:radial-gradient(1200px 600px at 78% 18%,rgba(255,106,0,.16),transparent 60%),var(--hl-ink)}
.hero h1,.hero h2,.hero .hero-title{color:#fff}
.hero p,.hero .hero-sub{color:#aeb5bf}
.hero-logo img{filter:drop-shadow(0 6px 22px rgba(0,0,0,.35))}

/* the two hero actions read as primary / secondary rather than two colours */
.hero-btn--vendor,.btn-join{background:var(--hl-grad);border:0;color:#fff;box-shadow:0 6px 18px rgba(255,106,0,.28)}
.hero-btn--vendor:hover,.btn-join:hover{filter:brightness(.95);color:#fff}
.hero-btn--delivery{background:transparent;border:1.5px solid rgba(255,255,255,.35);color:#fff}
.hero-btn--delivery:hover{border-color:#fff;background:rgba(255,255,255,.08);color:#fff}
.hero-btn,.hero-btn--vendor,.hero-btn--delivery,.btn-join{border-radius:999px;font-weight:700}

/* ── section rhythm ────────────────────────────────────────────────────── */
section{padding-block:clamp(48px,6vw,84px)}
.sec-header{margin-bottom:clamp(24px,3vw,40px)}
.sec-header h2{font-weight:800;line-height:1.3}
.sec-header p{color:var(--text);max-width:62ch;margin-inline:auto}

/* ── cards ─────────────────────────────────────────────────────────────── */
.feat-card,.sp-card{
  background:#fff;border:1px solid var(--hl-line);border-radius:var(--hl-r);
  box-shadow:0 1px 2px rgba(15,17,21,.04);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.feat-card:hover,.sp-card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(15,17,21,.09);
  border-color:rgba(255,106,0,.35);
}
.feat-ico,.sp-ico{
  background:rgba(255,106,0,.10);color:var(--primary);
  border-radius:12px;display:grid;place-items:center;
}
.feat-ico svg,.sp-ico svg,.feat-ico i,.sp-ico i{color:var(--primary)}

/* ── marquee: a thin brand band instead of a loud stripe ───────────────── */
.marquee{background:var(--hl-ink-soft);color:#fff}
.marquee-track{opacity:.92}

/* ── stats ─────────────────────────────────────────────────────────────── */
.stats{background:var(--hl-surface)}
.stats .odometer,.stats h3,.stats .stat-num{
  background:var(--hl-grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;font-weight:800;
}

/* ── call to action ────────────────────────────────────────────────────── */
.cta-manage{background:var(--hl-ink);color:#fff;border-radius:var(--hl-r)}
.cta-manage h2,.cta-manage h3{color:#fff}
.cta-manage p{color:#aeb5bf}

/* ── store badges ──────────────────────────────────────────────────────── */
.app-btn{border-radius:12px;border:1px solid rgba(255,255,255,.22);transition:border-color .18s,transform .12s}
.app-btn:hover{border-color:var(--primary);transform:translateY(-2px)}

/* ── testimonials ──────────────────────────────────────────────────────── */
.testimonials{background:var(--hl-surface)}
.slider-arrow{border:1px solid var(--hl-line);background:#fff;color:var(--title);transition:.18s}
.slider-arrow:hover{background:var(--primary);border-color:var(--primary);color:#fff}

/* ── footer ────────────────────────────────────────────────────────────── */
.footer{background:var(--hl-ink);color:#aeb5bf}
.footer a{color:#c7ccd4}
.footer a:hover{color:var(--primary)}
.footer h4,.footer h5{color:#fff}
.footer-bottom-bar{border-top:1px solid rgba(255,255,255,.08);color:#8b929c}

/* ── generic buttons and links ─────────────────────────────────────────── */
.btn-submit,.btn-browse-web,.btn-home{background:var(--hl-grad);border:0;color:#fff;border-radius:999px;font-weight:700}
.btn-submit:hover,.btn-browse-web:hover,.btn-home:hover{filter:brightness(.95);color:#fff}
a{color:var(--primary-dark)}
a:hover{color:var(--primary)}
::selection{background:rgba(255,106,0,.22)}

/* focus stays visible for keyboard users — the stock page removes it */
a:focus-visible,button:focus-visible,.btn:focus-visible{
  outline:3px solid rgba(255,106,0,.45);outline-offset:2px;
}

/* ── small screens ─────────────────────────────────────────────────────── */
@media (max-width:767px){
  section{padding-block:40px}
  .hero{background-position:center}
  .feat-card:hover,.sp-card:hover{transform:none}
}

/* honour a reduced-motion preference rather than animating regardless */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .marquee-track{animation:none !important}
}


/* ── logo on dark surfaces ──────────────────────────────────────────────
   The wordmark's "Order" is #0F1115, which disappears against the dark hero
   and footer. The same file is used in the light top bar, so it cannot be
   swapped globally — only these two contexts get the light variant.
   `content` on an <img> replaces its rendered image while leaving the src
   (and its alt text) intact for anything that reads the markup.            */
.hero-logo img,
.footer .f-brand .nav-logo img{
  content:url("../img/logo-light-600.png");
  max-width:100%;
  height:auto;
}

/* if a browser ignores `content` on images, at least keep the mark legible */
@supports not (content:url("x.png")){
  .hero-logo img,.footer .f-brand .nav-logo img{
    background:rgba(255,255,255,.92);border-radius:10px;padding:6px 10px;
  }
}


/* ── Cairo, the brand sheet's recommended face ──────────────────────────── */
body,button,input,select,textarea,
h1,h2,h3,h4,h5,h6,.sec-header h2,.hero h1{
  font-family:"Cairo","Tajawal",system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ── mobile bottom bar ──────────────────────────────────────────────────
   Hidden on desktop. The page compensates with padding driven by a custom
   property the bar measures itself into, so nothing is ever covered — a
   hard-coded height breaks the moment the font scale or the iOS home
   indicator changes.                                                       */
.hom-tabbar{display:none}

@media (max-width:991.98px){
  .hom-tabbar{
    display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
    position:fixed;inset-inline:0;bottom:0;z-index:1040;
    background:rgba(15,17,21,.96);
    -webkit-backdrop-filter:saturate(140%) blur(10px);
    backdrop-filter:saturate(140%) blur(10px);
    border-top:1px solid rgba(255,255,255,.09);
    padding-bottom:env(safe-area-inset-bottom,0px);  /* iOS home indicator */
  }
  .hom-tab{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;padding:9px 4px 7px;min-height:56px;
    background:none;border:0;cursor:pointer;
    color:#aeb5bf;font-size:.7rem;font-weight:600;line-height:1.2;
    text-decoration:none;transition:color .16s;
  }
  .hom-tab svg{
    width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;
    stroke-linecap:round;stroke-linejoin:round;
  }
  .hom-tab:hover,.hom-tab:focus-visible{color:#fff}
  .hom-tab.is-active{color:var(--primary)}
  .hom-tab:focus-visible{outline:2px solid rgba(255,106,0,.6);outline-offset:-3px;border-radius:10px}

  /* the only rule that prevents overlap — everything below the fold clears the bar */
  body{padding-bottom:var(--hom-tabbar-h,64px)}

  /* anything else pinned to the bottom has to sit above the bar, not under it */
  .footer-bottom-bar{margin-bottom:0}
  .back-to-top,#back-to-top,.scroll-top,.whatsapp-float,.floating-btn{
    bottom:calc(var(--hom-tabbar-h,64px) + 14px) !important;
  }
  /* toast stacks otherwise land behind the bar */
  #toast-container.toast-bottom-right,#toast-container.toast-bottom-center,
  #toast-container.toast-bottom-left{
    bottom:calc(var(--hom-tabbar-h,64px) + 10px) !important;
  }
}

/* in standalone mode there is no browser chrome, so give the top a little room */
@media (display-mode:standalone){
  body{padding-top:env(safe-area-inset-top,0px)}
}


/* ── horizontal overflow on phones ──────────────────────────────────────
   An oversized hero SVG (513px against a 375px viewport) makes the document
   scroll sideways; every section then reports an 84px offset, which is the
   scroll position, not a layout shift.

   `overflow-x:clip` rather than `hidden`: hidden turns <html> into a scroll
   container and kills the sticky navbar, clip does not.                    */
html{overflow-x:clip}

/* media should never exceed its column, whatever intrinsic size it carries */
img,svg,video,canvas,iframe{max-width:100%;height:auto}
.hero svg,.hero-illustration svg,.hero-illustration img{max-width:100%;height:auto}

/* long unbroken strings (URLs, order ids) are the other common overflow source */
p,li,td,th,h1,h2,h3,h4{overflow-wrap:anywhere}

@media (max-width:575.98px){
  .container{padding-inline:16px}
  .hero h1{font-size:clamp(1.35rem,6.4vw,1.9rem);line-height:1.35}
  .hero-btns{flex-direction:column;align-items:stretch;gap:10px}
  .hero-btn,.hero-btn--vendor,.hero-btn--delivery{width:100%;justify-content:center}
}