/* ============ Theme ============ */
:root{
  --white:#fff;
  --primary:#090A1A;     /* page/background */
  --secondary:#14111F;   /* inner surfaces/containers */
  --helping:rgba(255,255,255,.08);  /* subtle borders */
  --text:#D6D6D6;        /* primary text */
  --muted:#858585;       /* secondary text */
  --accent:#999EE7;      /* hover/focus accent */
  --focus:#7AA2FF66;     /* focus ring shadow */
  --radius:14px;
  --container:1200px;
}

/* ============ Base / Reset ============ */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:"Cairo",system-ui,-apple-system,"Segoe UI",Roboto,"Noto Kufi Arabic","Noto Sans Arabic",Arial,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  background:var(--primary); color:var(--text); line-height:1.6;
}
a{ color:inherit; text-decoration:none; }
a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* Utility */
.container{ max-width:var(--container); margin-inline:auto; padding:24px; }

/* Demo (remove later) */
.page-demo{ min-height:50vh; display:grid; place-items:center; }
.placeholder-content{ opacity:.5; text-align:center; }

/* ================= Header ================= */
.shebak-header{
  position:sticky; top:0; z-index:1000;
  background:rgba(255,255,255,.02);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--helping);
}
.shebak-header .container{ padding-block:10px; padding-inline:20px; }
@media (min-width:721px){ .shebak-header .container{ padding-inline:24px; } }

.header-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; }

/* Brand (same structure as footer, but smaller) */
.shebak-header .brand-row{ display:flex; align-items:center; gap:6px; }
.shebak-header .brand-mark{ width:34px; height:34px; }
.shebak-header .brand-text-stacked{ line-height:1; }
.shebak-header .brand-name-ar{ font-size:22px; font-weight:800; color:var(--white); }
.shebak-header .brand-name-en{ font-size:12px; font-weight:700; color:var(--white); opacity:1; }

/* Primary nav */
.main-nav{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.main-nav a{
  padding:8px 12px; border-radius:10px; color:var(--text);
  border:1px solid transparent; transition:background .2s,border-color .2s,color .2s;
}
.main-nav a:hover{ color:var(--white); background:rgba(255,255,255,.04); border-color:var(--helping); }
.main-nav a.active{ color:var(--white); background:rgba(255,255,255,.06); border-color:var(--helping); }

/* Header actions (icons) */
.header-actions{ display:flex; align-items:center; gap:8px; }
.icon-btn{
  color:var(--text); width:36px; height:36px; display:grid; place-items:center;
  border-radius:999px; background:#0B1020; border:1px solid var(--helping);
  transition:transform .15s,border-color .2s,background .2s,color .2s;
}
.icon-btn:hover{ transform:translateY(-1px); border-color:rgba(255,255,255,.18); background:#0E1530; color:var(--white); }
.icon{ width:18px; height:18px; display:block; }
.social-btn .icon-yt{ width:22px; height:16px; } 


/* Focus ring (header) */
.main-nav a:focus-visible, .icon-btn:focus-visible, .brand:focus-visible{ box-shadow:0 0 0 6px var(--focus); }

/* Mobile menu */
.menu-toggle{ display:none; }
@media (max-width:720px){
  .menu-toggle{ display:grid; }
  .main-nav{ display:none; }
  .shebak-header.menu-open .main-nav{
    display:flex; flex-direction:column; position:absolute; inset-inline:0; top:100%;
    background:rgba(9,10,26,.98); padding:12px 16px; border-bottom:1px solid var(--helping); gap:6px;
  }
}

/* If the header brand is not a link, keep cursor normal */
.shebak-header .brand{ cursor:default; }

/* ================= Footer ================= */
.shebak-footer{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border-top:1px solid var(--helping);
}

/* Top bar (badges + social) */
.footer-top{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  border:1px solid var(--helping); background:rgba(255,255,255,.02);
  padding:16px 20px; border-radius:var(--radius);
}
.store-badges{ display:flex; flex-wrap:wrap; gap:12px; }
.store-badge{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:12px; border:1px solid var(--helping); background:#0B1020; padding:6px;
  transition:transform .15s,border-color .2s,background .2s;
}
.store-badge:hover{ transform:translateY(-1px); border-color:rgba(255,255,255,.18); background:#0E1530; }
.store-badge img{ display:block; height:44px; width:auto; }

.social{ display:flex; align-items:center; gap:10px; }
.social-btn{
  width:40px; height:40px; display:grid; place-items:center;
  border-radius:999px; background:#0B1020; border:1px solid var(--helping);
  transition:transform .15s,border-color .2s,background .2s;
}
.social-btn:hover{ transform:translateY(-1px); border-color:rgba(255,255,255,.18); background:#0E1530; }
.social-btn img{ width:20px; height:20px; display:block; }
.social-btn.raw{ width:auto; height:auto; padding:0; background:transparent; border:0; }
.social-btn.raw img{ height:28px; width:auto; }

/* Divider */
.divider{ height:1px; border:0; margin:20px 0; background:linear-gradient(90deg,transparent,var(--helping),transparent); }

/* Footer main grid */
.footer-main{
  display:grid; align-items:start; gap:24px;
  grid-template-columns:auto 1fr 1fr; /* brand fits content; 2 equal cols */
  column-gap:40px;
}
.brand{ display:flex; flex-direction:column; gap:12px; }
.brand-horizontal .brand-row{ display:flex; align-items:center; gap:30px; direction:ltr; }
.brand-text-stacked{ line-height:1.1; direction:rtl; }
.brand-mark{ width:62px; height:62px; object-fit:contain; image-rendering:-webkit-optimize-contrast; }
.brand-name-ar{ font-weight:700; font-size:48px; color:var(--white); }
.brand-name-en{ font-weight:700; font-size:24px; color:var(--white); opacity:1; }

/* Footer: brand order opposite to header, brand pinned left; other columns centered */
.shebak-footer .brand-horizontal .brand-row{ flex-direction:row-reverse; gap:18px; }
.shebak-footer .brand{ justify-self:start; }
.shebak-footer .column{ justify-self:center; text-align:center; }

/* Footer columns */
.column h3{
  margin:0 0 10px 0; font-size:14px; font-weight:800; letter-spacing:.3px;
  color:var(--white); text-shadow:0 0 18px rgba(255,255,255,.1);
}
.column ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.column a{ color:var(--text); opacity:.9; font-size:14px; padding:6px 0; border-radius:8px; }
.column a:hover{ opacity:1; text-decoration:underline; text-decoration-color:rgba(255,255,255,.5); }

/* Focus ring (footer links/buttons) */
.store-badge:focus-visible, .social-btn:focus-visible, .column a:focus-visible{ box-shadow:0 0 0 6px var(--focus); }

/* ================= Responsive ================= */
@media (max-width:990px){
  .footer-main{ grid-template-columns:1fr 1fr; }
  .shebak-footer .brand{ grid-column:1 / -1; justify-self:center; text-align:center; }
}
@media (max-width:720px){
  .footer-top{ flex-direction:column; align-items:stretch; }
  .social{ justify-content:center; }

  .footer-main{ grid-template-columns:1fr; gap:18px; }
  .brand{ align-items:center; text-align:center; }
  .brand-name-ar{ font-size:36px; }
  .brand-name-en{ font-size:18px; }
  .brand-mark{ width:56px; height:56px; }

  .store-badge img{ height:36px; }
}