/*
 * AurBoss marketing header (ported from the aurages.sa/aurpos "AuRest-style"
 * header). Ribbon + brand bar + nav. Prefix abh- to avoid collisions.
 */
.abh-header { position:sticky; top:0; left:0; right:0; z-index:100;
  background:rgba(255,255,255,.9); -webkit-backdrop-filter:saturate(180%) blur(14px); backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent; font-family:'Almarai','Segoe UI',sans-serif; }
.abh-header::before { content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,#1c9fce,#067ea5 50%,#1c9fce); background-size:200% 100%;
  animation:abh-grad 6s ease-in-out infinite; z-index:1; }
@keyframes abh-grad { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }

/* Aurages ribbon */
.abh-ribbon { background:#12324f; color:#fff; }
.abh-ribbon-inner { max-width:1500px; margin:0 auto; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:7px 16px; font-size:13px; }
.abh-ribbon a { color:#fff; text-decoration:none; display:inline-flex; align-items:center; gap:7px; font-weight:700; white-space:nowrap; }
.abh-ribbon a:hover { opacity:.85; }
.abh-ribbon span { opacity:.85; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Brand bar */
.abh-topbar { padding:.7rem 1.25rem; border-bottom:1px solid rgba(243,240,237,.7); }
.abh-topbar-inner { max-width:1500px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.abh-brand { display:inline-flex; align-items:center; text-decoration:none; flex-shrink:0; }
.abh-brand img { height:46px; width:auto; display:block; transition:transform .3s ease; }
.abh-brand:hover img { transform:scale(1.04); }
.abh-actions { display:flex; align-items:center; gap:.85rem; }

/* AR | EN pill */
.abh-lang { display:inline-flex; background:#f5f3f0; border-radius:999px; padding:3px; border:1px solid #ebe5dd; }
.abh-lang a { border:none; background:transparent; font-size:.85rem; font-weight:700; color:#5a6273; padding:.3rem .85rem;
  border-radius:999px; cursor:pointer; text-decoration:none; transition:background .2s, color .2s; }
.abh-lang a.active { background:#fff; color:#1e283b; box-shadow:0 2px 6px rgba(15,20,30,.1); }

/* Sign-in text link */
.abh-link { color:#1e283b; font-weight:600; font-size:.92rem; text-decoration:none; padding:.4rem .5rem; white-space:nowrap; transition:color .2s; }
.abh-link:hover { color:#067ea5; }

/* Create-account dark button */
.abh-cta { display:inline-flex; align-items:center; gap:8px; background:#1e283b; color:#fff; font-weight:700; font-size:.92rem;
  padding:.6rem 1.2rem; border-radius:999px; text-decoration:none; border:1.5px solid #1e283b;
  transition:background .25s, transform .25s, box-shadow .25s; white-space:nowrap; }
.abh-cta:hover { background:#1c9fce; border-color:#1c9fce; color:#0b2233; transform:translateY(-1px); box-shadow:0 6px 18px rgba(28,159,206,.4); }
.abh-cta svg { width:14px; height:14px; }

/* Hamburger */
.abh-burger { display:none; width:38px; height:38px; flex-shrink:0; background:transparent; border:1.5px solid #ebe5dd;
  border-radius:8px; padding:0; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:4px; }
.abh-burger span { display:block; width:18px; height:2px; background:#1e283b; border-radius:2px; }

/* Nav bar */
.abh-nav { display:flex; align-items:center; justify-content:center; padding:.3rem 1.5rem; position:relative; }
.abh-nav ul { list-style:none; margin:0; padding:.4rem 0; display:flex; align-items:center; gap:.25rem; flex-wrap:nowrap; justify-content:center; }
.abh-nav li { flex-shrink:0; }
.abh-nav-item { position:relative; display:inline-flex; align-items:center; gap:6px; color:#2d3748; font-size:.92rem; font-weight:600;
  padding:.55rem .95rem; text-decoration:none; white-space:nowrap; transition:color .25s; }
.abh-nav-item::before { content:""; position:absolute; bottom:2px; left:50%; transform:translateX(-50%) scaleX(0);
  width:calc(100% - 1.4rem); height:2.5px; background:linear-gradient(90deg,#1c9fce,#067ea5); border-radius:3px;
  transition:transform .3s cubic-bezier(.4,0,.2,1); transform-origin:center; }
.abh-nav-item:hover { color:#067ea5; }
.abh-nav-item:hover::before { transform:translateX(-50%) scaleX(1); }

@media (max-width:992px){
  .abh-topbar{padding:.55rem .85rem}
  .abh-brand img{height:36px}
  .abh-link{display:none}
  .abh-cta{padding:.4rem .8rem;font-size:.78rem}
  .abh-lang{padding:2px}
  .abh-lang a{padding:.26rem .65rem;font-size:.76rem}
  .abh-burger{display:inline-flex}
  .abh-nav{display:none;padding:0}
  .abh-nav.open{display:block;position:absolute;top:100%;left:0;right:0;background:#fff;box-shadow:0 12px 30px rgba(0,0,0,.12);max-height:calc(100vh - 80px);overflow-y:auto;padding:.5rem 0}
  .abh-nav.open ul{flex-direction:column;align-items:stretch;gap:2px;padding:.25rem 0}
  .abh-nav.open .abh-nav-item{width:100%;border-radius:0;padding:.9rem 1.25rem;border-bottom:1px solid #f3f0ed;font-size:.95rem}
  .abh-nav.open .abh-nav-item::before{display:none}
}
@media (max-width:576px){
  .abh-actions{gap:.5rem}
  .abh-brand img{height:30px}
  .abh-lang a{padding:.18rem .45rem;font-size:.66rem}
  .abh-cta{padding:.34rem .7rem;font-size:.74rem}
  .abh-cta svg{display:none}
  .abh-ribbon span{display:none}
}

/* ==========================================================================
 * Header ↔ page spacing. The auth shell reserves a large top padding to clear
 * the old fixed topbar; that topbar is hidden when this marketing header is
 * present, so collapse the gap and let content sit right under the header.
 * Scoped to .abx-shell--hasheader → never affects login/register/reset.
 * ========================================================================== */
/* Full pages: content panel goes edge-to-edge (padding 0) and the inner column
   drops its max-width so hero/CTA bands can span the full width via width:100%
   (zoom-safe, unlike the old 100vw). Per-page content re-centres itself
   (.abm-section side padding; .abt-page max-width). */
.abx-shell--hasheader.abx-shell--full .abx-content-panel { padding: 0; }
.abx-shell--hasheader.abx-shell--full .abx-content-inner { max-width: none; }
.abx-shell--hasheader.abx-shell--split .abx-content-panel { margin-top: 0; padding-top: 4px; }
.abx-shell--hasheader.abx-shell--split .abx-brand-panel { padding-top: 4px; }

/* Mobile: give the ZATCA badge band breathing room top & bottom so the badge
 * sits centred in its space instead of jammed right under the header. */
@media (max-width: 991px) {
  .abx-shell--hasheader.abx-shell--split .abx-brand-panel {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding-top: 30px; padding-bottom: 22px;
  }
}


/* Vertical scrollbar on the RIGHT (like most sites) on the marketing pages.
 * rtl.css sets html/body to direction:rtl, which parks the browser scrollbar
 * on the left. The viewport scrollbar follows the BODY's direction (overflow
 * propagates from <body> when <html> overflow is visible), so flip both the
 * root and body to ltr — moving the scrollbar right — and restore rtl on the
 * body's children so all content/layout stays fully RTL. Scoped to header
 * pages → the rest of the app and the auth flow are untouched. */
html.mkt-page[lang="ar"], html.mkt-page[lang="ar"] body { direction: ltr; }
html.mkt-page[lang="ar"] body > * { direction: rtl; }

/* Welcome page: the header already shows the AurBoss wordmark, and the hero
 * title/desc live on the content side — so hide the whole brand-panel head
 * (duplicate logo + description) and let the ZATCA badge + product mock rise
 * up. Scoped to header pages → login/register keep their brand head. */
.abx-shell--hasheader .abx-brand-panel .abx-brand-head { display: none; }

/* Welcome page: the full Packages comparison shown BELOW the product mock on
 * mobile only. Hidden on desktop, where the nav already links to Packages. */
.abx-mobile-packages { display: none; }
@media (max-width: 991px) {
  .abx-mobile-packages { display: block; padding: 8px 10px 32px; }
}

/* ==========================================================================
 * Site footer (marketing/welcome pages). Prefix .abf-.
 * ========================================================================== */
.abf { background:#f6f9fb; border-top:1px solid #e7eef4; font-family:'Almarai','Segoe UI',sans-serif; color:#5b6675; margin-top:0; }
.abf-inner { max-width:1500px; margin:0 auto; padding:52px 24px 22px; }
.abf-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr auto; gap:36px; align-items:start; }
.abf-logo { height:40px; width:auto; display:block; margin-bottom:16px; }
.abf-desc { font-size:.92rem; line-height:1.9; margin:0 0 16px; max-width:320px; }
.abf-contact { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.abf-contact li { display:flex; align-items:flex-start; gap:9px; font-size:.9rem; }
.abf-contact a { color:#5b6675; text-decoration:none; transition:color .2s; }
.abf-contact a:hover { color:#067ea5; }
.abf-ic { flex-shrink:0; opacity:.7; }
.abf-col h4 { font-size:1rem; font-weight:800; color:#16233a; margin:0 0 16px; font-family:'Tajawal','Almarai',sans-serif; }
.abf-col a { display:block; font-size:.9rem; color:#5b6675; text-decoration:none; padding:6px 0; transition:color .2s; }
.abf-col a:hover { color:#067ea5; }
.abf-official { background:#fff; border:1px solid #e7eef4; border-radius:16px; padding:18px 20px; min-width:230px; box-shadow:0 14px 30px -24px rgba(15,23,42,.35); }
.abf-official-title { font-weight:800; color:#16233a; margin-bottom:14px; display:flex; align-items:center; gap:8px; font-family:'Tajawal','Almarai',sans-serif; }
.abf-shield { color:#1c9fce; }
.abf-official-row { margin-bottom:12px; }
.abf-official-row:last-child { margin-bottom:0; }
.abf-official-row span { display:block; font-size:.8rem; color:#94a3b8; margin-bottom:3px; }
.abf-official-row b { font-size:.98rem; color:#16233a; font-weight:800; letter-spacing:.3px; }
.abf-bottom { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:34px; padding-top:20px; border-top:1px solid #e7eef4; flex-wrap:wrap; }
.abf-copy { font-size:.85rem; color:#94a3b8; }
.abf-social { display:flex; gap:10px; }
.abf-social a { width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:#eef3f7; color:#5b6675; transition:all .25s; }
.abf-social a:hover { background:linear-gradient(135deg,#1c9fce,#067ea5); color:#fff; transform:translateY(-2px); }
.abf-social svg { width:16px; height:16px; }
@media (max-width:992px){
  .abf-grid { grid-template-columns:1fr 1fr; gap:28px; }
  .abf-brand { grid-column:1 / -1; }
  .abf-official { grid-column:1 / -1; }
}
@media (max-width:560px){
  .abf-grid { grid-template-columns:1fr; }
  .abf-bottom { justify-content:center; text-align:center; }
}