@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@600;700;800&family=Tajawal:wght@400;500;700&display=swap");

:root{
  --bg: #1C1917;
  --surface: #242020;
  --surface-2: #2C2724;
  --border: #3A332E;
  --text: #F5EFE6;
  --text-muted: #B3A99C;
  --flame: #E8A33D;
  --flame-deep: #C9762F;
  --stone: #8FA089;
  --stone-deep: #64735F;
  --danger: #C9584F;
  --radius: 14px;
  --font-display: "Cairo", sans-serif;
  --font-body: "Tajawal", sans-serif;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}

*{ box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.7;
  overflow-x: hidden;
  width: 100%;
}

a{ color: inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

h1,h2,h3{ font-family: var(--font-display); margin: 0 0 .5em; }

button, .btn{
  font-family: var(--font-body);
  cursor:pointer;
  border:none;
  border-radius: 999px;
  padding: .8em 1.6em;
  font-weight: 700;
  font-size: .95rem;
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
}
.btn:active{ transform: scale(.97); }

.btn-flame{
  background: linear-gradient(135deg, var(--flame), var(--flame-deep));
  color: #1C1917;
  box-shadow: 0 6px 20px -6px rgba(232,163,61,.6);
}
.btn-flame:hover{ box-shadow: 0 8px 26px -6px rgba(232,163,61,.8); }

.btn-outline{
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-outline:hover{ border-color: var(--flame); color: var(--flame); }

.btn-danger{ background: var(--danger); color:#fff; }
.btn-stone{ background: linear-gradient(135deg, var(--stone), var(--stone-deep)); color:#12160f; }

.btn-outline.selected{ border-color: var(--flame); color: var(--flame); background: rgba(232,163,61,.12); }
.btn-block{ width:100%; }
.btn-sm{ padding: .5em 1.1em; font-size:.82rem; }

input, textarea, select{
  font-family: var(--font-body);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: .8em 1em;
  border-radius: 10px;
  width: 100%;
  font-size: 16px; /* لمنع تكبير الصفحة تلقائيًا عند التركيز على الحقول في آيفون/آيباد */
}
input:focus, textarea:focus, select:focus{
  outline: 2px solid var(--flame);
  outline-offset: 1px;
}
label{ font-size:.85rem; color: var(--text-muted); display:block; margin-bottom:.35em; }
.field{ margin-bottom: 1.1em; }

.container{ max-width: 1160px; margin: 0 auto; padding: 0 20px; width: 100%; }

/* ---------- Nav ---------- */
.nav{
  position: sticky; top:0; z-index: 50;
  background: rgba(28,25,23,.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap: 12px; padding: 14px 20px; max-width:1160px; margin:0 auto; flex-wrap: wrap; }
.brand{ display:flex; align-items:center; gap:.6em; font-family: var(--font-display); font-weight:800; font-size:1.15rem; white-space:nowrap; }
.brand-mark{ width:34px; height:34px; flex-shrink:0; }
.nav-links{ display:flex; align-items:center; gap:1.4em; }
.nav-links a{ color: var(--text-muted); font-weight:500; font-size:.95rem; }
.nav-links a:hover{ color: var(--flame); }
.nav-actions{ display:flex; align-items:center; gap:.6em; flex-wrap: wrap; justify-content:flex-end; }
.icon-btn{ position:relative; background:var(--surface-2); border:1px solid var(--border); border-radius:999px; width:42px; height:42px; min-width:42px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.icon-btn:hover{ border-color: var(--flame); }
.badge{ position:absolute; top:-6px; left:-6px; background:var(--flame); color:#1C1917; font-size:.7rem; font-weight:800; min-width:18px; height:18px; border-radius:999px; display:flex; align-items:center; justify-content:center; }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  padding: 90px 20px 70px;
  overflow:hidden;
  text-align:center;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(ellipse 60% 50% at 50% 30%, rgba(232,163,61,.25), transparent 70%);
  filter: blur(10px);
  animation: flicker 6s ease-in-out infinite;
}
@keyframes flicker{
  0%,100%{ opacity: 1; transform: scale(1); }
  50%{ opacity: .82; transform: scale(1.04); }
}
.hero-content{ position:relative; max-width: 720px; margin:0 auto; }
.eyebrow{ color: var(--flame); font-weight:700; letter-spacing:.08em; font-size:.85rem; margin-bottom: .8em; display:inline-block; }
.hero h1{ font-size: clamp(2rem, 5vw, 3.2rem); line-height:1.25; }
.hero p{ color: var(--text-muted); font-size:1.05rem; max-width:520px; margin:0 auto 1.8em; }
.hero-actions{ display:flex; gap:1em; justify-content:center; flex-wrap:wrap; }

/* ---------- Section ---------- */
.section{ padding: 60px 0; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom: 2em; flex-wrap:wrap; gap:1em; }
.section-head h2{ font-size:1.7rem; }
.tabs{ display:flex; gap:.5em; }
.tab{ padding:.5em 1.2em; border-radius:999px; border:1px solid var(--border); color:var(--text-muted); font-weight:700; font-size:.88rem; background:transparent; }
.tab.active{ background: var(--flame); color:#1C1917; border-color: var(--flame); }

/* ---------- Product grid ---------- */
.grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 22px; }
.card{
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition: transform .2s ease, border-color .2s ease;
}
.card:hover{ transform: translateY(-4px); border-color: var(--flame); }
.card-media{
  height:170px;
  background: linear-gradient(145deg, var(--surface-2), var(--surface));
  display:flex; align-items:center; justify-content:center;
  position:relative;
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 60% 60% / var(--radius) var(--radius) 30px 30px;
}
.card-media svg{ width:56px; height:56px; opacity:.85; }
.chip{
  position:absolute; top:10px; inset-inline-start:10px;
  font-size:.72rem; font-weight:800; padding:.3em .7em; border-radius:999px;
}
.chip-candle{ background: rgba(232,163,61,.18); color: var(--flame); border:1px solid rgba(232,163,61,.4); }
.chip-stone{ background: rgba(143,160,137,.18); color: var(--stone); border:1px solid rgba(143,160,137,.4); }
.card-body{ padding: 16px; display:flex; flex-direction:column; gap:.5em; flex:1; }
.card-body h3{ font-size:1.02rem; }
.card-body p{ color:var(--text-muted); font-size:.86rem; margin:0; flex:1; }
.card-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:.6em; }
.price{ font-weight:800; color: var(--flame); font-family: var(--font-display); }
.stock-low{ color: var(--danger); font-size:.75rem; }

/* ---------- Auth pages ---------- */
.auth-wrap{ min-height: 80vh; display:flex; align-items:center; justify-content:center; padding: 40px 20px; }
.auth-card{ width:100%; max-width: 420px; background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding: 32px; }
.auth-card h1{ font-size:1.5rem; text-align:center; }
.auth-sub{ text-align:center; color:var(--text-muted); font-size:.88rem; margin-bottom:1.8em; }
.divider{ display:flex; align-items:center; gap:1em; color:var(--text-muted); font-size:.8rem; margin: 1.4em 0; }
.divider::before, .divider::after{ content:""; flex:1; height:1px; background: var(--border); }
.google-btn{
  display:flex; align-items:center; justify-content:center; gap:.7em;
  background:#fff; color:#1f1f1f; border-radius:10px; padding:.75em 1em; font-weight:700; width:100%;
}
.foot-link{ text-align:center; margin-top:1.4em; font-size:.9rem; color:var(--text-muted); }
.error-msg{ background: rgba(201,88,79,.15); border:1px solid rgba(201,88,79,.4); color:#f2b3ae; padding:.7em 1em; border-radius:10px; font-size:.85rem; margin-bottom:1em; display:none; }
.success-msg{ background: rgba(143,160,137,.15); border:1px solid rgba(143,160,137,.4); color: var(--stone); padding:.7em 1em; border-radius:10px; font-size:.85rem; margin-bottom:1em; display:none; }

/* ---------- Cart drawer ---------- */
.overlay{ position:fixed; inset:0; background: rgba(0,0,0,.55); z-index:90; display:none; }
.overlay.open{ display:block; }
.drawer{
  position:fixed; top:0; bottom:0; inset-inline-end:0; width: min(400px, 92vw);
  background: var(--surface); border-inline-start: 1px solid var(--border);
  z-index:95; transform: translateX(105%); transition: transform .25s ease;
  display:flex; flex-direction:column;
}
[dir="rtl"] .drawer{ transform: translateX(-105%); }
.drawer.open{ transform: translateX(0); }
.drawer-head{ padding: 18px 20px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
.drawer-body{ padding: 16px 20px; overflow-y:auto; flex:1; }
.drawer-foot{ padding: 18px 20px; border-top:1px solid var(--border); }
.cart-item{ display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--border); }
.cart-item-info{ flex:1; }
.qty-controls{ display:flex; align-items:center; gap:.6em; margin-top:.4em; }
.qty-controls button{ width:26px; height:26px; padding:0; border-radius:999px; background:var(--surface-2); color:var(--text); border:1px solid var(--border); }

/* ---------- Admin ---------- */
.admin-shell{ display:flex; min-height:100vh; }
.admin-sidebar{ width:230px; background: var(--surface); border-inline-end: 1px solid var(--border); padding: 20px; flex-shrink:0; }
.admin-sidebar h2{ font-size:1.1rem; }
.admin-sidebar nav{ display:flex; flex-direction:column; gap:.3em; margin-top:1.5em; }
.admin-sidebar nav a{ padding:.7em 1em; border-radius:10px; color:var(--text-muted); font-weight:600; }
.admin-sidebar nav a.active, .admin-sidebar nav a:hover{ background: var(--surface-2); color: var(--flame); }
.admin-main{ flex:1; padding: 30px; max-width: 1100px; }
.stat-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px; margin-bottom:2em; }
.stat{ background:var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding:18px; }
.stat b{ font-family: var(--font-display); font-size:1.6rem; display:block; }
.table{ width:100%; border-collapse: collapse; background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); overflow:hidden; min-width: 520px; }
.table-wrap{ width:100%; overflow-x:auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); }
.table th, .table td{ padding: 12px 14px; text-align: right; border-bottom:1px solid var(--border); font-size:.88rem; }
.table th{ color: var(--text-muted); font-weight:700; background: var(--surface-2); }
.status-pill{ padding:.3em .8em; border-radius:999px; font-size:.75rem; font-weight:800; }
.modal-bg{ position:fixed; inset:0; background:rgba(0,0,0,.6); display:none; align-items:center; justify-content:center; z-index:100; padding:16px; }
.modal-bg.open{ display:flex; }
.modal{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding: 26px; width:100%; max-width:480px; max-height:calc(90vh - var(--safe-bottom) - var(--safe-top)); overflow-y:auto; -webkit-overflow-scrolling: touch; }
.row-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
/* ================= أشكال/ستايلات بديلة للموقع (تُبدَّل من لوحة الإدمن ← المظهر) ================= */

/* ---- شكل "حاد وعصري": زوايا حادة، حدود أوضح، بدون ظلال ناعمة ---- */
html[data-style="sharp"] .card,
html[data-style="sharp"] .modal,
html[data-style="sharp"] .stat,
html[data-style="sharp"] .policy-card,
html[data-style="sharp"] .auth-card,
html[data-style="sharp"] .card-media,
html[data-style="sharp"] input,
html[data-style="sharp"] textarea,
html[data-style="sharp"] select{
  border-radius: 2px !important;
  border-width: 2px;
}
html[data-style="sharp"] .btn{ border-radius: 4px; letter-spacing: .03em; }
html[data-style="sharp"] .card:hover{ transform: none; box-shadow: 4px 4px 0 0 var(--flame); }
html[data-style="sharp"] .icon-btn{ border-radius: 4px; }
html[data-style="sharp"] .chip{ border-radius: 4px; }
html[data-style="sharp"] .status-pill{ border-radius: 4px; }

/* ---- شكل "دائري ناعم": زوايا مدوّرة كبيرة، إحساس أكثر نعومة ---- */
html[data-style="soft"] .card,
html[data-style="soft"] .modal,
html[data-style="soft"] .stat,
html[data-style="soft"] .policy-card,
html[data-style="soft"] .auth-card{
  border-radius: 28px !important;
}
html[data-style="soft"] .card-media{
  border-radius: 28px 28px 55% 55% / 28px 28px 34px 34px !important;
}
html[data-style="soft"] input,
html[data-style="soft"] textarea,
html[data-style="soft"] select{
  border-radius: 20px !important;
}
html[data-style="soft"] .card:hover{ transform: translateY(-6px) scale(1.01); }
html[data-style="soft"] .btn-flame{ box-shadow: 0 10px 26px -6px rgba(232,163,61,.65); }

/* ---- شكل "زجاجي شفاف": بطاقات شبه شفافة بتمويه خلفي (Glassmorphism) ---- */
html[data-style="glass"] .card,
html[data-style="glass"] .modal,
html[data-style="glass"] .stat,
html[data-style="glass"] .policy-card,
html[data-style="glass"] .auth-card,
html[data-style="glass"] .nav{
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
}
html[data-style="glass"] .card-media{
  background: color-mix(in srgb, var(--surface-2) 60%, transparent);
}
html[data-style="glass"] .icon-btn,
html[data-style="glass"] input,
html[data-style="glass"] textarea,
html[data-style="glass"] select{
  background: color-mix(in srgb, var(--surface-2) 60%, transparent);
  backdrop-filter: blur(8px);
}

.lang-switch{ position:relative; }
.lang-menu{
  position:absolute; top:calc(100% + 8px); inset-inline-end:0; z-index:60;
  background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:6px;
  min-width:130px; box-shadow:0 10px 30px -8px rgba(0,0,0,.5);
  display:none; flex-direction:column; gap:2px;
}
.lang-menu.open{ display:flex; }
.lang-menu button{
  background:transparent; border:none; text-align:start; padding:.6em .8em; border-radius:8px;
  color:var(--text); font-weight:600; font-size:.88rem;
}
.lang-menu button:hover{ background:var(--surface-2); }
.lang-menu button.active{ color:var(--flame); }
.theme-presets{ display:flex; flex-wrap:wrap; gap:12px; }
.preset-swatch{
  display:flex; flex-direction:column; align-items:center; gap:.5em;
  background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:10px 14px;
  cursor:pointer; transition: border-color .15s;
}
.preset-swatch:hover, .preset-swatch.selected{ border-color: var(--flame); }
.preset-swatch .dots{ display:flex; gap:4px; }
.preset-swatch .dot{ width:18px; height:18px; border-radius:50%; border:1px solid rgba(255,255,255,.2); }
.preset-swatch span{ font-size:.78rem; color:var(--text-muted); }
.media-preview{ display:flex; align-items:center; gap:10px; margin-bottom:.6em; }
.media-preview img{ width:64px; height:64px; object-fit:cover; border-radius:8px; border:1px solid var(--border); }
.media-preview video{ width:110px; border-radius:8px; border:1px solid var(--border); }
.media-preview span{ font-size:.8rem; color:var(--text-muted); }
.admin-gate{ min-height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:20px; }

.icon-svg{ width:20px; height:20px; flex-shrink:0; vertical-align:middle; }
.feedback-icon{ width:16px; height:16px; vertical-align:-3px; display:inline-block; color:var(--flame); }
footer{ border-top:1px solid var(--border); padding: 30px 0; text-align:center; color:var(--text-muted); font-size:.85rem; }
.social-links{ display:flex; justify-content:center; gap:1.4em; margin:.7em 0; flex-wrap:wrap; }
.social-links a{ color:var(--text-muted); font-weight:600; font-size:.92rem; display:inline-flex; align-items:center; gap:.35em; }
.social-links a:hover{ color:var(--flame); }
.dev-credit{ margin-top:.9em; font-size:.78rem; color:var(--text-muted); opacity:.75; }
.dev-credit code{ background:var(--surface-2); padding:.15em .55em; border-radius:5px; color:var(--flame); font-family: monospace; font-style:normal; }

/* ---------- Floating order button ---------- */
.fab-order{
  position: fixed; bottom: calc(24px + var(--safe-bottom)); inset-inline-start: 24px; z-index: 80;
  display:flex; align-items:center; gap:.6em;
  box-shadow: 0 10px 30px -8px rgba(232,163,61,.7);
  white-space: nowrap;
}
.fab-support{
  bottom: calc(88px + var(--safe-bottom));
  background: var(--surface);
  box-shadow: 0 10px 24px -10px rgba(0,0,0,.6);
}

/* ---------- Ticket flow modals ---------- */
.step-title{ font-size:1.05rem; margin-bottom:.3em; }
.step-sub{ color:var(--text-muted); font-size:.85rem; margin-bottom:1.4em; }
.choice-row{ display:flex; gap:12px; flex-wrap: wrap; }
.choice-card{
  flex:1; min-width: 120px; background:var(--surface-2); border:1px solid var(--border); border-radius: var(--radius);
  padding: 20px; text-align:center; cursor:pointer; transition: border-color .15s, transform .15s;
}
.choice-card:hover{ border-color: var(--flame); transform: translateY(-2px); }
.choice-card.selected{ border-color: var(--flame); background: rgba(232,163,61,.1); }
.choice-card .emoji{ font-size:2rem; display:block; margin-bottom:.3em; }

.phone-field{ display:flex; align-items:stretch; gap:0; }
.phone-prefix{
  display:flex; align-items:center; gap:.4em; background:var(--surface-2); border:1px solid var(--border);
  border-inline-end:none; border-radius:10px 0 0 10px; padding:0 .9em; color:var(--text-muted); font-weight:700; white-space:nowrap;
}
[dir="rtl"] .phone-prefix{ border-radius:0 10px 10px 0; border-inline-end:1px solid var(--border); border-inline-start:none; }
.phone-field input{ border-radius:0 10px 10px 0; }
[dir="rtl"] .phone-field input{ border-radius:10px 0 0 10px; }
.field-error{ color: var(--danger); font-size:.78rem; margin-top:.4em; display:none; }

.map-box{ height: 260px; border-radius: 10px; overflow:hidden; border:1px solid var(--border); margin-bottom: .8em; }
.location-summary{ background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:.8em 1em; font-size:.85rem; color: var(--text-muted); margin-bottom: 1em; min-height: 2.4em; }
.location-summary b{ color: var(--text); }

.step-actions{ display:flex; gap:.7em; margin-top:1.2em; }
.step-actions .btn{ flex:1; }

/* ---------- Chat ---------- */
.chat-wrap{ display:flex; flex-direction:column; height: min(62vh, 480px); }
.chat-messages{ flex:1; overflow-y:auto; padding: 6px 2px; display:flex; flex-direction:column; gap:10px; -webkit-overflow-scrolling: touch; }
.msg-row{ display:flex; width:100%; }
.msg-row-customer{ justify-content:flex-start; }
.msg-row-admin{ justify-content:flex-end; }
.msg-row-system{ justify-content:center; }
.msg{ max-width: 78%; padding:.6em .9em; border-radius: 14px; font-size:.88rem; line-height:1.5; }
.msg-customer{ background: var(--surface-2); border:1px solid var(--border); border-start-start-radius:4px; }
.msg-admin{ background: linear-gradient(135deg, var(--flame), var(--flame-deep)); color:#1C1917; border-start-end-radius:4px; }
.msg-system{ color: var(--text-muted); font-size:.78rem; background:transparent; padding:.2em .6em; }
.msg-sender-label{ display:block; font-size:.72rem; font-weight:700; margin-bottom:.2em; opacity:.75; }
.msg-time{ display:block; font-size:.68rem; opacity:.7; margin-top:.25em; }
.chat-input-row{ display:flex; gap:.6em; margin-top: 12px; }
.chat-input-row input{ flex:1; }
.ticket-meta{ display:flex; flex-wrap:wrap; gap:.6em; margin-bottom: 1em; }
.ticket-meta span{ background:var(--surface-2); border:1px solid var(--border); border-radius:999px; padding:.3em .9em; font-size:.78rem; color: var(--text-muted); }

/* ---------- Ticket list (customer + admin) ---------- */
.ticket-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px; background:var(--surface); border:1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; cursor:pointer; flex-wrap: wrap; }
.ticket-row:hover{ border-color: var(--flame); }
.status-pending{ background: rgba(232,163,61,.18); color: var(--flame); }
.status-accepted{ background: rgba(143,160,137,.18); color: var(--stone); }
.status-delivering{ background: rgba(120,150,220,.18); color:#8faee0; }
.status-rejected{ background: rgba(201,88,79,.18); color: var(--danger); }
.status-completed{ background: rgba(150,150,150,.2); color:#c9c4bb; }
.status-open{ background: rgba(232,163,61,.18); color: var(--flame); }
.status-in_progress{ background: rgba(120,150,220,.18); color:#8faee0; }
.status-resolved{ background: rgba(143,160,137,.18); color: var(--stone); }
.status-closed{ background: rgba(150,150,150,.2); color:#c9c4bb; }

/* ================= استجابة الأجهزة: تابلت ================= */
@media (max-width: 900px){
  .nav-links{ display:none; }
  .hero{ padding: 70px 20px 50px; }
}

/* ================= استجابة الأجهزة: جوال كبير / تابلت عمودي ================= */
@media (max-width: 720px){
  .admin-shell{ flex-direction:column; }
  .admin-sidebar{ width:100%; border-inline-end:none; border-bottom:1px solid var(--border); position: sticky; top: 0; z-index: 40; }
  .admin-sidebar nav{ flex-direction:row; overflow-x:auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .admin-sidebar nav a{ white-space: nowrap; }
  .admin-main{ padding: 20px 16px; }

  .section{ padding: 40px 0; }
  .section-head{ flex-direction:column; align-items:flex-start; }

  .choice-row{ flex-direction: column; }
  .choice-card{ min-width: 0; }

  .fab-order{ inset-inline-start: 16px; font-size: .88rem; padding: .7em 1.2em; }
  .fab-support{ bottom: calc(78px + var(--safe-bottom)); }
}

/* ================= استجابة الأجهزة: جوال ================= */
@media (max-width: 560px){
  .container{ padding: 0 16px; }
  .nav-inner{ padding: 12px 16px; }
  .brand{ font-size: 1rem; }
  .hero{ padding: 56px 16px 40px; }
  .hero p{ font-size: .95rem; }
  .hero-actions{ flex-direction: column; align-items: stretch; }
  .hero-actions .btn{ width: 100%; }

  .stat-row{ grid-template-columns: 1fr 1fr; }
  .stat-row .stat:last-child{ grid-column: span 2; }

  .grid{ grid-template-columns: 1fr 1fr; gap: 12px; }
  .card-media{ height: 130px; }
  .card-body{ padding: 12px; }

  .modal{ padding: 20px; border-radius: 12px; }
  .auth-card{ padding: 22px; }

  .drawer{ width: 100vw; }

  .step-actions{ flex-direction: column; }
  .step-actions .btn{ width: 100%; }

  .fab-order{ padding: .65em 1.1em; font-size: .85rem; }
}

/* ================= استجابة الأجهزة: جوال صغير جدًا ================= */
@media (max-width: 380px){
  .grid{ grid-template-columns: 1fr; }
  .stat-row{ grid-template-columns: 1fr; }
  .stat-row .stat:last-child{ grid-column: auto; }
  .hero h1{ font-size: 1.6rem; }
}

/* ================= تابلت أفقي وشاشات كبيرة ================= */
@media (min-width: 1400px){
  .container{ max-width: 1320px; }
}

/* دعم الأجهزة اللي فيها إشارة hover حقيقية بس (فرق بين لمس وماوس) */
@media (hover: none){
  .card:hover{ transform:none; }
}