/* ══════════════════════════════════════════════════════════════════
   SpinFood — Shared Design System
   ══════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

/* ── Tokens ─────────────────────────────────────────────────────── */
:root {
  --pr:   #FF6B35;  --prd:  #E55A25;
  --sc:   #4ECDC4;  --ac:   #FFE66D;
  --dg:   #ff2d55;  --wa:   #25D366;
  --bg:   #0D0D1A;  --bg2:  #14142B;
  --bgc:  #1A1A35;  --bgh:  #222244;
  --tx:   #F0F0F8;  --tx2:  #9090B0;
  --bd:   rgba(255,255,255,.09);
  --sh:   rgba(0,0,0,.55);
  --gl:   rgba(255,255,255,.05);
  --r:    14px;
  --fnt:  'Poppins', sans-serif;
}
[data-theme=light] {
  --bg:  #F4F6FF; --bg2: #EAECF8; --bgc: #FFFFFF; --bgh: #F0F2FF;
  --tx:  #12122A; --tx2: #6060A0;
  --bd:  rgba(0,0,0,.09); --sh: rgba(0,0,0,.12); --gl: rgba(0,0,0,.03);
}

/* ── Reset ───────────────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:var(--fnt); background:var(--bg); color:var(--tx);
       min-height:100vh; transition:background .3s,color .3s; overflow-x:hidden; }

/* ── Typography ──────────────────────────────────────────────────── */
h1,h2,h3,h4 { font-weight:800; line-height:1.15; }
a { color:var(--pr); text-decoration:none; }
a:hover { text-decoration:underline; }

/* ── Header / Nav ────────────────────────────────────────────────── */
.navbar {
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:.85rem 2rem; background:var(--bg); border-bottom:1px solid var(--bd);
  backdrop-filter:blur(20px);
}
.nav-brand { display:flex; align-items:center; gap:.5rem;
             font-size:1.4rem; font-weight:900; color:var(--pr); text-decoration:none; }
.nav-brand-spin { display:inline-block; animation:spin-s 5s linear infinite; }
@keyframes spin-s { to { transform:rotate(360deg); } }

.nav-links { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.nav-link { font-size:.82rem; font-weight:600; color:var(--tx2); padding:.4rem .8rem;
            border-radius:8px; transition:all .2s; text-decoration:none; border:none;
            background:none; cursor:pointer; font-family:var(--fnt); }
.nav-link:hover { color:var(--tx); background:var(--gl); text-decoration:none; }
.nav-link.active { color:var(--pr); }

.nav-btn { padding:.45rem 1rem; border-radius:10px; border:none; cursor:pointer;
           font-family:var(--fnt); font-size:.82rem; font-weight:700; transition:all .2s; }
.nav-btn-outline { background:transparent; border:1px solid var(--pr); color:var(--pr); }
.nav-btn-outline:hover { background:var(--pr); color:#fff; }
.nav-btn-solid  { background:var(--pr); color:#fff; }
.nav-btn-solid:hover  { background:var(--prd); transform:translateY(-1px); }

.icon-btn { width:36px; height:36px; border-radius:50%; border:1px solid var(--bd);
            background:var(--gl); color:var(--tx); cursor:pointer;
            display:flex; align-items:center; justify-content:center;
            font-size:1rem; transition:all .2s; position:relative; }
.icon-btn:hover { background:var(--pr); color:#fff; transform:scale(1.08); }

/* ── Page wrapper ────────────────────────────────────────────────── */
.page { padding-top:72px; min-height:100vh; }
.container { max-width:1100px; margin:0 auto; padding:0 1.25rem; }
.container-sm { max-width:520px; margin:0 auto; padding:0 1.25rem; }

/* ── Flash messages ──────────────────────────────────────────────── */
.flashes { list-style:none; padding:.5rem 0; }
.flash { display:flex; align-items:center; gap:.6rem; padding:.75rem 1rem;
         border-radius:10px; font-size:.85rem; font-weight:500; margin-bottom:.5rem;
         animation:fade-in .3s ease-out; }
@keyframes fade-in { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:none} }
.flash-success { background:rgba(46,204,113,.15); border:1px solid #2ecc71; color:#2ecc71; }
.flash-danger  { background:rgba(255,45,85,.15);  border:1px solid var(--dg); color:var(--dg); }
.flash-warning { background:rgba(255,230,109,.15);border:1px solid var(--ac); color:#c9a700; }
.flash-info    { background:rgba(78,205,196,.15); border:1px solid var(--sc); color:var(--sc); }

/* ── Cards ───────────────────────────────────────────────────────── */
.card {
  background:var(--bgc); border-radius:var(--r); border:1px solid var(--bd);
  box-shadow:0 8px 32px var(--sh); transition:transform .3s,box-shadow .3s,border-color .3s;
}
.card:hover { transform:translateY(-4px); box-shadow:0 20px 56px var(--sh);
              border-color:rgba(255,107,53,.3); }
.card-body { padding:1.25rem; }

/* ── Stat cards ──────────────────────────────────────────────────── */
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1rem; }
.stat-card { background:var(--bgc); border-radius:var(--r); padding:1.25rem 1.5rem;
             border:1px solid var(--bd); position:relative; overflow:hidden; }
.stat-card::before { content:''; position:absolute; inset:0;
                     background:linear-gradient(135deg,var(--c,var(--pr))18,transparent 70%);
                     opacity:.08; }
.stat-val  { font-size:2rem; font-weight:900; color:var(--c,var(--pr)); }
.stat-lbl  { font-size:.75rem; color:var(--tx2); text-transform:uppercase; letter-spacing:.7px; margin-top:.2rem; }
.stat-ico  { position:absolute; right:1rem; top:50%; transform:translateY(-50%);
             font-size:2.5rem; opacity:.2; }

/* ── Tables ──────────────────────────────────────────────────────── */
.tbl-wrap { overflow-x:auto; border-radius:var(--r); border:1px solid var(--bd); }
table { width:100%; border-collapse:collapse; font-size:.83rem; }
thead th { padding:.8rem 1rem; text-align:left; font-weight:700; color:var(--tx2);
           text-transform:uppercase; letter-spacing:.5px; font-size:.72rem;
           background:var(--bg2); border-bottom:1px solid var(--bd); white-space:nowrap; }
tbody td { padding:.75rem 1rem; border-bottom:1px solid var(--bd); vertical-align:middle; }
tbody tr:last-child td { border:none; }
tbody tr:hover td { background:var(--bgh); }

/* ── Badges ──────────────────────────────────────────────────────── */
.badge { display:inline-flex; align-items:center; gap:.25rem; padding:.25rem .7rem;
         border-radius:20px; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.4px; }
.badge-pending    { background:rgba(255,230,109,.2); color:#c9a700; }
.badge-confirmed  { background:rgba(78,205,196,.2);  color:var(--sc); }
.badge-preparing  { background:rgba(142,68,173,.2);  color:#8e44ad; }
.badge-delivering { background:rgba(255,107,53,.2);  color:var(--pr); }
.badge-delivered  { background:rgba(46,204,113,.2);  color:#2ecc71; }
.badge-cancelled  { background:rgba(255,45,85,.2);   color:var(--dg); }
.badge-admin      { background:rgba(255,107,53,.2);  color:var(--pr); }
.badge-guest      { background:var(--gl); color:var(--tx2); }

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; gap:.35rem; padding:.6rem 1.1rem;
       border-radius:10px; border:none; cursor:pointer; font-family:var(--fnt);
       font-size:.82rem; font-weight:600; transition:all .2s; text-decoration:none; }
.btn:hover { text-decoration:none; }
.btn-primary   { background:var(--pr); color:#fff; }
.btn-primary:hover   { background:var(--prd); transform:translateY(-1px); }
.btn-secondary { background:var(--gl); color:var(--tx); border:1px solid var(--bd); }
.btn-secondary:hover { background:var(--bgh); }
.btn-danger    { background:rgba(255,45,85,.15); color:var(--dg); border:1px solid rgba(255,45,85,.3); }
.btn-danger:hover    { background:var(--dg); color:#fff; }
.btn-sm { padding:.35rem .75rem; font-size:.75rem; border-radius:7px; }
.btn-full { width:100%; justify-content:center; padding:.8rem; font-size:.92rem; font-weight:700; }
.btn-wa { background:#25D366; color:#fff; }
.btn-wa:hover { background:#1fa855; }

/* ── Forms ───────────────────────────────────────────────────────── */
.form-card { background:var(--bgc); border-radius:20px; padding:2rem;
             border:1px solid var(--bd); box-shadow:0 20px 60px var(--sh);
             position:relative; overflow:hidden; }
.form-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px;
                     background:linear-gradient(90deg,var(--pr),var(--sc),var(--ac)); }
.form-group  { display:flex; flex-direction:column; gap:.35rem; margin-bottom:.9rem; }
.form-label  { font-size:.72rem; font-weight:700; color:var(--tx2);
               text-transform:uppercase; letter-spacing:.5px; }
.form-input, .form-select, .form-textarea {
  padding:.72rem 1rem; border-radius:10px; border:1px solid var(--bd);
  background:var(--bg); color:var(--tx); font-family:var(--fnt);
  font-size:.9rem; outline:none; transition:border .2s,box-shadow .2s; width:100%;
}
.form-input:focus,.form-select:focus,.form-textarea:focus {
  border-color:var(--pr); box-shadow:0 0 0 3px rgba(255,107,53,.18);
}
.form-input::placeholder, .form-textarea::placeholder { color:var(--tx2); }
.form-select option { background:var(--bgc); }
.form-textarea { resize:vertical; min-height:80px; }
.form-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
@media(max-width:480px) { .form-grid-2 { grid-template-columns:1fr; } }
.field-error { font-size:.72rem; color:var(--dg); margin-top:.2rem; display:none; }
.form-group.err .form-input, .form-group.err .form-select { border-color:var(--dg); }
.form-group.err .field-error { display:block; }

/* ── Auth pages ──────────────────────────────────────────────────── */
.auth-wrap { min-height:calc(100vh - 72px); display:flex; align-items:center;
             justify-content:center; padding:2rem 1rem; }
.auth-card { width:100%; max-width:440px; }
.auth-title { font-size:1.6rem; font-weight:900; margin-bottom:.3rem; }
.auth-sub   { font-size:.85rem; color:var(--tx2); margin-bottom:1.5rem; }
.auth-footer { text-align:center; margin-top:1rem; font-size:.82rem; color:var(--tx2); }
.auth-footer a { color:var(--pr); font-weight:600; }

/* social buttons */
.soc-btn { width:100%; padding:.72rem; border-radius:10px; border:1px solid var(--bd);
           background:var(--bg); color:var(--tx); font-family:var(--fnt);
           font-size:.85rem; font-weight:600; cursor:pointer; display:flex;
           align-items:center; justify-content:center; gap:.6rem; margin-bottom:.55rem;
           transition:all .2s; }
.soc-btn:hover { border-color:var(--pr); background:var(--bgh); transform:translateY(-1px); }
.sep { display:flex; align-items:center; gap:.75rem; margin:.9rem 0;
       color:var(--tx2); font-size:.78rem; }
.sep::before,.sep::after { content:''; flex:1; height:1px; background:var(--bd); }

/* ── Dashboard page ──────────────────────────────────────────────── */
.dash-header { padding:2rem 0 1.5rem; }
.dash-title  { font-size:1.5rem; font-weight:800; }
.dash-sub    { font-size:.85rem; color:var(--tx2); margin-top:.25rem; }
.section-title { font-size:1rem; font-weight:700; margin-bottom:1rem;
                 display:flex; align-items:center; gap:.5rem; }
.tabs { display:flex; gap:.3rem; padding:.3rem; background:var(--bg2);
        border-radius:12px; width:fit-content; margin-bottom:1.5rem; }
.tab { padding:.5rem 1.1rem; border-radius:9px; border:none; background:transparent;
       color:var(--tx2); font-family:var(--fnt); font-size:.82rem; font-weight:600;
       cursor:pointer; transition:all .2s; }
.tab.on { background:var(--bgc); color:var(--tx);
          box-shadow:0 2px 8px var(--sh); }

/* ── WhatsApp floating button ────────────────────────────────────── */
.wa-float { position:fixed; bottom:1.75rem; right:1.75rem; z-index:150;
            width:54px; height:54px; border-radius:50%;
            background:var(--wa); color:#fff; border:none; cursor:pointer;
            display:flex; align-items:center; justify-content:center; font-size:1.6rem;
            box-shadow:0 4px 20px rgba(37,211,102,.45); transition:all .25s; }
.wa-float:hover { transform:scale(1.1); box-shadow:0 6px 28px rgba(37,211,102,.6); }
.wa-float-tooltip { position:absolute; right:65px; bottom:50%; transform:translateY(50%);
                    background:var(--bgc); color:var(--tx); font-size:.75rem; font-weight:600;
                    padding:.3rem .8rem; border-radius:8px; white-space:nowrap;
                    border:1px solid var(--bd); pointer-events:none;
                    opacity:0; transition:opacity .2s; }
.wa-float:hover .wa-float-tooltip { opacity:1; }

/* ── Footer ──────────────────────────────────────────────────────── */
footer { background:var(--bg2); border-top:1px solid var(--bd);
         padding:1.5rem 2rem; text-align:center; font-size:.8rem; color:var(--tx2); }
footer strong { color:var(--pr); }

/* ── Scrollbar ───────────────────────────────────────────────────── */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--pr); border-radius:3px; }

/* ── Responsive ──────────────────────────────────────────────────── */
@media(max-width:640px) {
  .navbar { padding:.7rem 1rem; }
  .nav-links { gap:.25rem; }
  .stat-grid { grid-template-columns:1fr 1fr; }
  .form-card { padding:1.25rem; }
}
@media(max-width:400px) {
  .nav-btn { display:none; }
}

/* ══ ARABIC FONT ════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@400;500;700;900&display=swap');
body.lang-ar,
body.lang-ar input,
body.lang-ar select,
body.lang-ar textarea,
body.lang-ar button { font-family:'Noto Kufi Arabic','Poppins',sans-serif; }

/* ══ LANGUAGE SWITCHER ══════════════════════════════════════════════ */
.lang-switch {
  display:flex; gap:.2rem; padding:.2rem .3rem;
  background:var(--gl); border-radius:8px; border:1px solid var(--bd);
}
.lang-btn {
  padding:.18rem .5rem; border-radius:5px; border:none;
  background:transparent; color:var(--tx2); cursor:pointer;
  font-size:.7rem; font-weight:700; transition:all .18s;
  font-family:inherit; line-height:1.5;
}
.lang-btn:hover { color:var(--tx); background:var(--bgh); }
.lang-btn.on    { background:var(--pr); color:#fff; }

/* ══ RTL LAYOUT OVERRIDES ═══════════════════════════════════════════ */
[dir=rtl] { text-align:right; }
[dir=rtl] .navbar  { flex-direction:row-reverse; }
[dir=rtl] .nav-links { flex-direction:row-reverse; }
[dir=rtl] .nav-brand { flex-direction:row-reverse; }

/* Favorites panel slides from left in RTL */
[dir=rtl] .fpanel {
  right:auto; left:0;
  border-left:none; border-right:1px solid var(--bd);
  transform:translateX(-100%);
  box-shadow:10px 0 40px var(--sh);
}
[dir=rtl] .fpanel.on { transform:translateX(0); }

/* WhatsApp button on the left in RTL */
[dir=rtl] .wa-float { right:auto; left:1.75rem; }
[dir=rtl] .wa-float-tooltip { right:auto; left:65px; }

/* Form fields align right */
[dir=rtl] .form-input,
[dir=rtl] .form-select,
[dir=rtl] .form-textarea { text-align:right; }

/* Chips + stat row reverse order */
[dir=rtl] .chips     { flex-direction:row-reverse; flex-wrap:wrap-reverse; }
[dir=rtl] .stat-row  { flex-direction:row-reverse; }

/* Card layout */
[dir=rtl] .card-body { text-align:right; }
[dir=rtl] .modal-box { text-align:right; }
[dir=rtl] .om-prev   { flex-direction:row-reverse; }
[dir=rtl] .om-tabs   { flex-direction:row-reverse; }

/* Auth forms */
[dir=rtl] .auth-card  { text-align:right; }
[dir=rtl] .form-label { text-align:right; }

/* Dashboard tabs */
[dir=rtl] .tabs       { flex-direction:row-reverse; }

/* Flash messages */
[dir=rtl] .flash { flex-direction:row-reverse; }