/* ===============================
   Cava Top – Electronic Menu (RTL)
   ألوان وهوية قابلة للتعديل من :root أو من BRAND.colors عبر JS
   =============================== */
:root{
  --brand-primary: #5a2b0c;   /* بني شوكولاتة */
  --brand-accent:  #d4a017;   /* ذهبي من حافة الشعار */
  --ink: #1f1f1f;
  --muted: #6b6b6b;
  --bg: #f5ede6;
  --card: #ffffff;
  --radius: 18px;
  --shadow: 0 10px 25px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Tajawal","Cairo","Noto Kufi Arabic","Segoe UI",Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.7;
}

.container{width:min(1100px, 92%); margin-inline:auto}

.hero{
  position:relative;
  min-height: 46vh;
  background:url('assets/hero.jpg') center / cover no-repeat;
  display:grid;
  place-items:end center;
  border-bottom:6px solid var(--brand-accent);
}
.hero .brand-logo{
  position:absolute; inset-inline-start:18px; top:18px;
  width:86px; height:auto; z-index:2;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.35));
}
.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.55));
}
.hero-content{
  position:relative; z-index:1;
  text-align:center; color:#fff; padding-block: 26px 18px;
}
.hero h1{
  margin:0 0 6px;
  font-size: clamp(28px, 5vw, 44px);
  letter-spacing:.5px;
  text-shadow: 0 2px 18px rgba(0,0,0,.25);
}
.subtitle{
  margin:0 0 14px;
  opacity:.9; font-size:clamp(14px, 2.4vw, 18px);
}

.tabs{
  display:flex; flex-wrap:wrap; gap:10px;
  justify-content:center;
}
.tabs a{
  --outline: rgba(255,255,255,.7);
  color:#fff; text-decoration:none;
  border:1.5px solid var(--outline);
  padding:.45rem .8rem; border-radius:999px;
  backdrop-filter: blur(6px);
  background:rgba(0,0,0,.25);
  transition:.2s ease;
  font-size:14px;
}
.tabs a:hover, .tabs a.is-active{
  background:var(--brand-accent); border-color:var(--brand-accent); color:#111;
}

.toolbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:16px 0;
}
.search{
  position:relative; display:flex; align-items:center; width:min(420px, 100%);
}
.search input{
  width:100%; padding:12px 42px 12px 14px; border-radius:999px; border:1.5px solid #ddd;
  background:#fff; outline:none; box-shadow: var(--shadow);
}
.search svg{
  position:absolute; inset-inline-end:12px; width:22px; height:22px; fill:#777;
}

.social{display:flex; gap:10px; flex-wrap:wrap}
.social a{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px; border-radius:999px; background:#fff; border:1px solid #eee;
  box-shadow: var(--shadow); color:var(--ink); text-decoration:none; font-size:14px;
}
.social svg{width:18px; height:18px}

#menu{display:grid; gap:22px; padding-bottom:40px}

.section{
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
  overflow:hidden; border:1px solid #eee;
}
.section-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 18px; background:linear-gradient(90deg, var(--brand-primary), var(--brand-accent));
  color:#fff;
}
.section-header h2{margin:0; font-size: clamp(18px, 2.4vw, 22px)}
.section-header img{
  width:42px; height:42px; object-fit:cover; border-radius:10px; border:2px solid rgba(255,255,255,.8);
}

.section-body{
  padding: 12px 14px 18px;
}
.items{
  display:grid; grid-template-columns: repeat(2, 1fr);
  gap:8px 16px;
}
@media (max-width: 720px){
  .items{ grid-template-columns: 1fr; }
}
.item{
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
  padding:10px 12px; border-bottom:1px dashed #e9e0d9;
}
.item:last-child{border-bottom:0}
.item .title{font-weight:600}
.item .variants{color:var(--muted); font-size:.95rem}
.price{color:var(--brand-primary); font-weight:700}

.badge{
  display:inline-block; padding:2px 8px; border-radius:99px; font-size:.75rem; background:rgba(255,255,255,.35);
  border:1px solid rgba(255,255,255,.6);
}

.footer{background:#fff; border-top:1px solid #eee}
.footer .container{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:16px 0;
}
.footer .to-top{
  text-decoration:none; background:var(--brand-accent); color:#111; padding:.5rem .8rem; border-radius:12px; font-weight:700;
}

/* Print-friendly */
@media print{
  .hero, .toolbar, .footer, .tabs{ display:none !important; }
  body{ background:#fff }
  .section{ break-inside: avoid; box-shadow:none; border-color:#ccc }
}


.footer .container {
  flex-direction: column;
  text-align: center;
}
.contact-info {
  margin-bottom: 14px;
  line-height: 1.8;
}
.contact-info p { margin: 4px 0; }
.social-icons {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: #fff;
  text-decoration: none;
  font-size: 20px;
  transition: background .2s;
}
.social-icons a:hover {
  background: var(--brand-accent);
  color: #111;
}

/* === Footer contact & social === */
.footer .container{flex-direction:column; align-items:stretch}
.footer .stack{display:grid; gap:8px; padding:10px 0; color:var(--ink);}
.footer .stack p{margin:0}
.footer .social-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:6px}
.footer .pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px; background:#fff; border:1px solid #eee;
  border-radius:999px; text-decoration:none; color:var(--ink);
  box-shadow: var(--shadow); font-size:14px;
}
.footer .pill svg{width:18px; height:18px}
.footer .split{display:flex; justify-content:space-between; align-items:center; gap:10px}
@media (max-width:720px){ .footer .split{flex-direction:column; align-items:flex-start} }

/* === Polished Social Icon Buttons === */
.social-icons{display:flex;gap:14px;justify-content:center;margin-top:14px}
.social-icons a{
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:#fff;border:2px solid var(--brand-accent);
  box-shadow: var(--shadow);transition:transform .2s, background .2s;
}
.social-icons a:hover{transform:scale(1.15);background:var(--brand-accent)}
.social-icons svg{width:22px;height:22px;fill:var(--brand-primary)}

/* === Circle Social Buttons === */
.social-circle {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-top: 14px;
  flex-wrap: wrap;
}
.social-circle a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  text-decoration: none;
  font-weight: bold;
  transition: transform 0.2s, opacity 0.2s;
}
.social-circle a:hover {
  transform: scale(1.1);
  opacity: 0.9;
}
.social-circle .whatsapp { background-color: #25d366; }
.social-circle .instagram { background: radial-gradient(circle at 30% 30%, #feda75, #d62976, #962fbf, #4f5bd5); }
.social-circle .facebook { background-color: #1877f2; }
.social-circle .tiktok { background: linear-gradient(45deg, #000000, #25f4ee, #fe2c55); }

/* === Unified Site Footer === */
.site-footer {
  background: #fff;
  border-top: 2px solid var(--brand-accent);
  padding: 20px 0;
  margin-top: 30px;
}
.site-footer .footer-container {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
  color: var(--ink);
}
.site-footer p { margin: 4px 0; }
.footer-social {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-top: 12px;
  flex-wrap: wrap;
}
.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  text-decoration: none;
  font-weight: bold;
  transition: transform 0.2s, opacity 0.2s;
}
.footer-social a:hover {
  transform: scale(1.1);
  opacity: 0.9;
}
.footer-social .whatsapp { background-color: #25d366; }
.footer-social .instagram { background: radial-gradient(circle at 30% 30%, #feda75, #d62976, #962fbf, #4f5bd5); }
.footer-social .facebook { background-color: #1877f2; }
.footer-social .tiktok { background: linear-gradient(45deg, #000000, #25f4ee, #fe2c55); }

/* === Responsive Brand Logo Fix (by ChatGPT) === */
.hero .brand-logo{
  position:absolute;
  top:12px;
  inset-inline-start:12px; /* يدعم RTL/LTR */
  width: clamp(60px, 18vw, 90px);
  height:auto;
  max-width:25%;
  object-fit:contain;
  z-index:2;
}

/* === Ensure overlay layering so logo/content appears above === */
.landing::after{ z-index: 1; }
.landing .wrap{ position: relative; z-index: 2; }
.hero-cat .wrap{ position: relative; z-index: 2; }

/* === Universal responsive logo for hero/landing/hero-cat === */
.hero .brand-logo,
.landing .brand-logo,
.hero-cat .brand-logo{
  position: absolute;
  top: 12px;
  inset-inline-start: 12px; /* RTL/LTR */
  width: clamp(56px, 18vw, 90px);
  height: auto;
  max-width: 25%;
  object-fit: contain;
  z-index: 3; /* above overlays */
}

/* === Logo Alone, No Background Overlay === */
.hero .brand-logo,
.landing .brand-logo,
.hero-cat .brand-logo {
  position: absolute;
  top: 14px;
  inset-inline-start: 14px;
  width: clamp(60px, 20vw, 100px);
  height: auto;
  max-width: 28%;
  object-fit: contain;
  z-index: 5;
  background: none !important;
  box-shadow: none !important;
}
.hero-overlay, .landing::after { background: none !important; }

/* === Remove floating top-corner logo === */
.hero .brand-logo,
.landing .brand-logo,
.hero-cat .brand-logo {
  display: none !important;
}