:root{
  --navy:#1b3a5c;
  --blue:#2a6da3;
  --blue-light:#e8f1f8;
  --ink:#14202b;
  --muted:#6b7c8c;
  --line:#e3e9ef;
  --bg:#f4f7fa;
  --ok:#1f9d63;
  --err:#d23b3b;
  --radius:16px;
  --shadow:0 6px 24px rgba(27,58,92,.08);
  --grad:linear-gradient(135deg,#1b3a5c 0%,#2a6da3 100%);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Tajawal',system-ui,Segoe UI,Tahoma,sans-serif;
  background:var(--bg); color:var(--ink);
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
h1,h3{margin:0 0 8px}
h1{font-size:1.5rem}
h3{font-size:1.05rem}
.muted{color:var(--muted)}
.small{font-size:.82rem}
.mt{margin-top:18px}

/* ===== Topbar ===== */
.topbar{
  background:var(--grad); color:#fff;
  padding:14px 18px calc(14px + env(safe-area-inset-top,0));
  display:flex; align-items:center; justify-content:space-between;
}
.brand{display:flex; align-items:flex-start; gap:2px}
.brand-logo{display:inline-flex; height:48px; width:155px; background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.12)}
.brand-logo img{width:100%; height:100%; object-fit:cover; object-position:center}
.brand-fallback{font-weight:800; font-size:1.7rem; letter-spacing:1px; color:#fff}
.brand-r{font-size:.7rem; margin-inline-start:2px; transform:translateY(2px); font-weight:700; color:#fff}
.topbar-tag{font-size:.85rem; opacity:.9}

/* ===== Steps ===== */
.steps{
  display:flex; gap:6px; padding:12px 14px; background:#fff;
  border-bottom:1px solid var(--line); overflow-x:auto;
}
.step{
  display:flex; align-items:center; gap:6px; white-space:nowrap;
  font-size:.8rem; color:var(--muted); font-weight:500;
}
.step span{
  width:22px; height:22px; border-radius:50%; background:var(--line);
  display:grid; place-items:center; font-size:.78rem; color:var(--muted);
}
.step.is-active{color:var(--navy); font-weight:700}
.step.is-active span{background:var(--blue); color:#fff}
.step.is-done span{background:var(--ok); color:#fff}

/* ===== Layout ===== */
.container{max-width:560px; margin:0 auto; padding:18px 14px 40px}
.screen{display:none; animation:fade .25s ease}
.screen.is-active{display:block}
@keyframes fade{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}

.hero{margin-bottom:14px}
.hero h1{color:var(--navy)}
.hero p{color:var(--muted); margin:0}

.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; margin-bottom:14px; box-shadow:var(--shadow);
}

/* Includes list */
.includes h3{color:var(--navy)}
.includes ul{margin:0; padding:0; list-style:none; display:grid; gap:8px}
.includes li{position:relative; padding-inline-start:26px; color:#33485a}
.includes li::before{
  content:"✓"; position:absolute; inset-inline-start:0; top:0;
  width:18px; height:18px; background:var(--blue-light); color:var(--blue);
  border-radius:50%; display:grid; place-items:center; font-size:.7rem; font-weight:700;
}

/* Fields */
.field{display:block; margin-bottom:14px}
.field>span{display:block; font-size:.85rem; font-weight:500; margin-bottom:6px; color:#33485a}
input,select{
  width:100%; padding:13px 14px; border:1.5px solid var(--line);
  border-radius:12px; font:inherit; background:#fff; color:var(--ink);
  transition:border-color .15s, box-shadow .15s;
}
input:focus,select:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(42,109,163,.15)}
.hint{display:block; color:var(--muted); font-size:.78rem; margin-top:5px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:10px}

/* Buttons */
.btn{
  appearance:none; border:none; cursor:pointer; font:inherit; font-weight:700;
  padding:14px 18px; border-radius:12px; transition:transform .05s, opacity .15s, background .15s;
}
.btn:active{transform:scale(.985)}
.btn-primary{background:var(--grad); color:#fff}
.btn-ghost{background:#fff; color:var(--navy); border:1.5px solid var(--line)}
.btn-block{width:100%}
.btn:disabled{opacity:.55; cursor:not-allowed}
.actions{display:flex; gap:10px}
.actions .btn{flex:1}

.form-error{
  background:#fdeaea; color:var(--err); border:1px solid #f5c2c2;
  padding:10px 12px; border-radius:10px; font-size:.85rem; margin:4px 0 12px;
}

/* Result */
.result{text-align:center}
.result-badge{
  display:inline-block; background:var(--blue-light); color:var(--blue);
  padding:5px 14px; border-radius:999px; font-weight:700; font-size:.85rem; margin-bottom:14px;
}
.result-rows{display:grid; gap:10px; text-align:start}
.r-row{display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px dashed var(--line)}
.r-row:last-child{border-bottom:none}
.r-row .lbl{color:var(--muted)}
.r-row .val{font-weight:700}
.r-row.total{background:var(--blue-light); margin:6px -8px 0; padding:14px 16px; border-radius:12px; border:none}
.r-row.total .val{color:var(--navy); font-size:1.25rem}
.price-sar{font-size:.8em; font-weight:500; color:var(--muted)}

.note{
  background:#fff7e6; border:1px solid #ffe2a8; color:#8a6310;
  padding:12px 14px; border-radius:12px; font-size:.88rem; margin-bottom:14px;
}

/* Days & slots */
.days{display:flex; gap:8px; overflow-x:auto; padding-bottom:6px}
.day{
  flex:0 0 auto; min-width:64px; text-align:center; padding:10px 6px;
  border:1.5px solid var(--line); border-radius:12px; cursor:pointer; background:#fff;
  transition:.15s;
}
.day .dow{font-size:.72rem; color:var(--muted)}
.day .dnum{font-size:1.15rem; font-weight:700; color:var(--navy)}
.day .dmon{font-size:.7rem; color:var(--muted)}
.day.is-selected{border-color:var(--blue); background:var(--blue-light)}
.day.is-closed{opacity:.4; cursor:not-allowed}

.slots{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.slot{
  padding:12px 4px; text-align:center; border:1.5px solid var(--line); border-radius:12px;
  cursor:pointer; background:#fff; font-weight:600; transition:.15s;
}
.slot.is-selected{border-color:var(--blue); background:var(--grad); color:#fff}
.slot.is-taken{opacity:.4; cursor:not-allowed; text-decoration:line-through}

/* Payment */
.pay-summary{display:grid; gap:8px}
.pay-summary .r-row{padding:8px 0}
.demo-badge{
  background:var(--blue-light); color:var(--blue); font-size:.8rem; font-weight:600;
  padding:8px 12px; border-radius:10px; text-align:center; margin-bottom:14px;
}

/* Invoice */
.invoice{text-align:center}
.invoice .ic{
  width:64px; height:64px; margin:0 auto 12px; border-radius:50%;
  background:var(--ok); color:#fff; display:grid; place-items:center; font-size:2rem;
}
.invoice h2{margin:0 0 4px; color:var(--navy)}
.invoice .ref{font-size:1.1rem; font-weight:800; letter-spacing:1px; color:var(--blue)}
.invoice .lines{text-align:start; margin-top:16px; border-top:1px solid var(--line); padding-top:14px; display:grid; gap:8px}

/* Overlay / spinner */
.overlay{position:fixed; inset:0; background:rgba(27,58,92,.35); display:grid; place-items:center; z-index:50}
.overlay[hidden]{display:none}
.spinner{width:44px; height:44px; border:4px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Footer */
.footer{
  text-align:center; padding:22px 14px calc(22px + env(safe-area-inset-bottom,0));
  color:var(--muted); font-size:.85rem; border-top:1px solid var(--line); background:#fff;
}

@media (max-width:360px){
  .grid-3{grid-template-columns:1fr 1fr}
}

/* ===== Admin ===== */
.tabs{display:flex; gap:6px; overflow-x:auto; margin:16px 0; padding-bottom:4px}
.tab{
  flex:0 0 auto; appearance:none; border:1.5px solid var(--line); background:#fff;
  color:var(--muted); font:inherit; font-weight:600; padding:9px 16px; border-radius:999px; cursor:pointer;
}
.tab.is-active{background:var(--grad); color:#fff; border-color:transparent}
.tabpane{display:none}
.tabpane.is-active{display:block}

.ok-msg{
  background:#e7f7ee; color:var(--ok); border:1px solid #b7e6cc;
  padding:10px 12px; border-radius:10px; font-size:.88rem; text-align:center; margin-top:12px;
}

.tier-row{
  border:1.5px solid var(--line); border-radius:12px; padding:12px; margin-bottom:10px;
}
.tier-row .tier-label{margin-bottom:8px}
.tier-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.tier-grid label{font-size:.72rem; color:var(--muted); display:block}
.tier-grid input{padding:9px 8px; font-size:.95rem}
.tier-del{margin-top:8px; color:var(--err); background:none; border:none; font:inherit; cursor:pointer; font-size:.85rem}

.chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px}
.chip{
  display:inline-flex; align-items:center; gap:8px; background:var(--blue-light); color:var(--navy);
  padding:7px 12px; border-radius:999px; font-weight:600; font-size:.9rem;
}
.chip button{appearance:none; border:none; background:none; color:var(--err); cursor:pointer; font-size:1.05rem; line-height:1; padding:0}
.add-row{display:flex; gap:8px}
.add-row input{flex:1}

.days-pick{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.day-toggle{
  text-align:center; padding:10px 4px; border:1.5px solid var(--line); border-radius:10px;
  cursor:pointer; font-weight:600; font-size:.88rem; background:#fff; color:var(--muted);
}
.day-toggle.on{background:var(--blue-light); color:var(--navy); border-color:var(--blue)}

.area-row{display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid var(--line)}
.area-row span{flex:1}
.area-row button{color:var(--err); background:none; border:none; cursor:pointer; font:inherit}

.bk-card{border:1.5px solid var(--line); border-radius:12px; padding:12px; margin-bottom:10px}
.bk-card .bk-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px}
.bk-card .bk-ref{font-weight:800; color:var(--blue)}
.bk-card .bk-line{font-size:.88rem; color:#33485a}
.bk-card .bk-del{color:var(--err); background:none; border:none; cursor:pointer; font:inherit; font-size:.82rem; margin-top:6px}