:root{
  --bg:#0b1220;
  --card:#0f172a;
  --muted:#94a3b8;
  --text:#e2e8f0;
  --line:rgba(148,163,184,.18);
  --accent:#22c55e;
  --accent2:#38bdf8;
  --danger:#ef4444;
  --shadow: 0 18px 60px rgba(0,0,0,.35);
  --radius: 18px;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f6f7fb;
    --card:#ffffff;
    --muted:#64748b;
    --text:#0f172a;
    --line:rgba(100,116,139,.18);
    --shadow: 0 18px 60px rgba(2,6,23,.12);
  }
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:"Noto Sans Arabic", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(900px 500px at 85% 0%, rgba(56,189,248,.18), transparent 60%),
    radial-gradient(700px 450px at 20% 10%, rgba(34,197,94,.14), transparent 55%),
    var(--bg);
  color:var(--text);
  line-height:1.75;
}

.wrap{max-width:920px;margin:0 auto;padding:22px 14px 44px;}
header{display:flex;gap:14px;align-items:center;justify-content:space-between;margin-bottom:18px;}
.brand{display:flex;gap:12px;align-items:center;}

.logo{
  width:44px;height:44px;border-radius:14px;
  background:linear-gradient(135deg, rgba(34,197,94,.92), rgba(56,189,248,.92));
  box-shadow:0 10px 30px rgba(34,197,94,.18);
  display:grid;place-items:center;color:#06121f;font-weight:900;letter-spacing:.5px;
}

.title h1{margin:0;font-size:18px;font-weight:800;line-height:1.2;}
.title p{margin:4px 0 0;color:var(--muted);font-size:13px;font-weight:500;}

.pill{
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  padding:9px 12px;
  border-radius:999px;
  color:var(--muted);
  font-size:12px;
  white-space:nowrap;
}

.grid{display:grid;grid-template-columns:1.15fr .85fr;gap:16px;align-items:start;}
@media (max-width:860px){ .grid{grid-template-columns:1fr;} .pill{display:none;} }

.card{
  background:rgba(255,255,255,.02);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}

.card-inner{padding:16px;}

.section-title{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.04), transparent);
}
.section-title h2{margin:0;font-size:15px;font-weight:800;}
.section-title span{color:var(--muted);font-size:12px;font-weight:600;}

.section-split{margin:16px -16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.section-topline{border-top:1px solid var(--line);}

.row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media (max-width:560px){ .row{grid-template-columns:1fr;} }

label{display:block;margin:12px 0 6px;font-weight:700;font-size:13px;}
.hint{margin-top:4px;color:var(--muted);font-size:12px;font-weight:500;}

input{
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:var(--text);
  font-size:15px;
  outline:none;
  transition:border-color .15s ease, transform .08s ease;
}
#phone{font-size:16px;}
input:focus{border-color:rgba(56,189,248,.6);box-shadow:0 0 0 4px rgba(56,189,248,.12);}
input:active{transform:scale(0.997);}

/* Categories */
.cat{
  padding:14px;
  border-radius:16px;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(148,163,184,.14);
  margin:12px 0;
}
.cat__title{
  font-weight:800;
  font-size:16px;
  margin-bottom:10px;
  display:flex;
  align-items:baseline;
  justify-content:flex-start;
  gap:8px;
  flex-wrap:wrap;
}
.cat__price{font-weight:600;font-size:12px;opacity:.7;}

/* Stepper */
.stepper{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  border-radius:999px;padding:8px;border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(10px);
}

.stepper__btn{
  width:52px;height:46px;border-radius:16px;border:1px solid var(--line);
  font-size:22px;font-weight:900;cursor:pointer;color:var(--text);
  background:rgba(255,255,255,.06);
  box-shadow:0 10px 24px rgba(0,0,0,.12);
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  transition:transform .08s ease, filter .15s ease, opacity .15s ease;
}
.stepper__btn:hover{opacity:.95;}
.stepper__btn:active{transform:scale(.96);filter:brightness(1.05);}
.stepper__btn[data-stepper="plus"]{border-color:rgba(34,197,94,.35);background:linear-gradient(135deg, rgba(34,197,94,.28), rgba(56,189,248,.22));}
.stepper__btn[data-stepper="minus"]{border-color:rgba(148,163,184,.25);background:rgba(255,255,255,.04);}

/* Prevent double tap zoom on controls */
.stepper__btn, #submit, button, a{touch-action:manipulation;}

.stepper__value{
  width:92px;height:46px;border-radius:16px;border:1px solid var(--line);
  text-align:center;font-size:18px;font-weight:900;background:rgba(255,255,255,.03);
  color:var(--text);outline:none;
}
.stepper__value.bump{animation:bump .16s ease-out;}
@keyframes bump{0%{transform:scale(1)}50%{transform:scale(1.06)}100%{transform:scale(1)}}

/* Summary */
.mini{color:var(--muted);font-size:12px;font-weight:600;}
.summary{position:sticky;top:14px;}
@media (max-width:860px){ .summary{position:static;} }

.totalBox{padding:16px;}
.total{font-size:34px;font-weight:900;margin:6px 0 4px;letter-spacing:.2px;}
.breakdown{
  color:var(--muted);
  font-size:12px;
  font-weight:600;
  border-top:1px solid var(--line);
  margin-top:12px;
  padding-top:12px;
  white-space:pre-wrap;
}

/* Button */
.actions{margin:16px 0 0;display:flex;justify-content:center;}

.btnPrimary{
  width:min(92vw, 520px);
  height:58px;
  border-radius:18px;
  font-size:18px;
  font-weight:900;
  background:linear-gradient(135deg, rgba(34,197,94,.95), rgba(56,189,248,.95));
  color:#05121f;
  box-shadow:0 18px 40px rgba(0,0,0,.22), 0 10px 30px rgba(56,189,248,.18);
  border:0;
  cursor:pointer;
  transition:transform .08s ease, opacity .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.btnPrimary:active{transform:scale(.99);}
.btnPrimary:disabled{opacity:.55;cursor:not-allowed;}

.warn{display:none;margin-top:10px;color:rgba(239,68,68,.95);font-size:12px;font-weight:800;}
footer{margin-top:14px;color:var(--muted);font-size:12px;font-weight:600;text-align:center;}

/* Disable UI while loading */
.isLoading{pointer-events:none;opacity:.75;filter:saturate(.9);}

/* -----------------------------
   Right column wrapper
------------------------------ */
.rightCol{
  display:flex;
  flex-direction:column;
  gap: 14px;
}

/* -----------------------------
   Lunch Question (compact + centered labels)
------------------------------ */
.qWrap{padding-top:10px;}

.qBox{
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(148,163,184,.14);
  margin:10px 0;
}

.qTitle{
  font-weight:900;
  font-size:13px;
  margin:0 0 8px;
  line-height:1.45;
}

.qOptions{display:flex;flex-direction:column;gap:8px;}

.qOpt{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}

/* Center text, keep radio on the right */
.qOpt.qCenter{
  position: relative;
}

.qOpt.qCenter input{
  position:absolute;
  right:14px;
  width:auto;
  margin:0;
  accent-color: var(--accent);
  transform: scale(1.05);
}

.qOpt.qCenter .qMid{
  width:100%;
  text-align:center;
  font-size:14px;
  font-weight:1000;
  padding-right:40px; /* space for radio */
  padding-left:12px;
  line-height:1.4;
}

/* Selected highlight (Safari iOS supports :has) */
.qOpt.qCenter:has(input:checked){
  border-color: rgba(34,197,94,.35);
  background: linear-gradient(135deg, rgba(34,197,94,.18), rgba(56,189,248,.12));
}

.qWarn{
  display:none;
  margin-top:8px;
  color: rgba(239,68,68,.95);
  font-size:12px;
  font-weight:900;
}

/* -----------------------------
   Loading Overlay (iOS-safe center)
------------------------------ */
.loadingOverlay{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  height: 100vh;

  display:none;
  align-items:center;
  justify-content:center;

  background: rgba(255,255,255,.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  z-index: 2147483647;
  padding: 18px;

  /* iOS safe areas */
  padding-top: calc(18px + env(safe-area-inset-top));
  padding-bottom: calc(18px + env(safe-area-inset-bottom));
  padding-left: calc(18px + env(safe-area-inset-left));
  padding-right: calc(18px + env(safe-area-inset-right));

  overscroll-behavior: none;
}

.loadingCard{
  width: min(420px, 100%);
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 18px;
  padding: 18px 16px;
  box-shadow: 0 18px 60px rgba(0,0,0,.12);

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;

  text-align:center;
  min-height:150px;

  transform: translateZ(0);
}

.spinner{
  width:44px;
  height:44px;
  border-radius:999px;
  border:4px solid rgba(34,197,94,.25);
  border-top-color:rgba(34,197,94,.95);
  margin:0;
  animation:spin .9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.loadingText{
  font-weight:900;
  color:rgba(15,23,42,.85);
  margin:0;
  line-height:1.4;
}