/* صفحة حجز الزبون: عمود واحد، مريحة على الموبايل، وشريط ملخص ثابت تحت */
.wrap { max-width: 600px; margin: 0 auto; padding: 0 16px 120px; }
.bhead { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; }
.bhead .wordmark { font-size: 17px; color: var(--muted); }
.hero { padding: 18px 0 8px; }
.hero h1 { font-size: 28px; margin-bottom: 4px; }
.live { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 13.5px; color: var(--muted); margin-top: 10px; }
.live .chairs { display: inline-flex; gap: 5px; align-items: center; }
.live .chairs i { width: 12px; height: 12px; }
.tabsw { display: flex; gap: 6px; margin: 18px 0 6px; }
.step { margin-top: 26px; }
.step h2 { font-size: 16px; display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.step h2 .n { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.svcs { display: grid; gap: 8px; }
.svc { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.svc input { flex: none; }
.svc .nm { font-weight: 500; }
.svc .mt { font-size: 13px; color: var(--muted); }
.svc .pr { margin-inline-start: auto; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.svc:has(input:checked) { border-color: var(--accent); }
.pills { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.pill { flex: none; font: inherit; font-size: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 10px; padding: 8px 14px; cursor: pointer; text-align: center; min-width: 64px; }
.pill small { display: block; color: var(--muted); font-size: 12px; }
.pill.on { border-color: var(--accent); background: var(--accent); color: var(--onAccent); }
.pill.on small { color: inherit; opacity: .85; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.slots button { font: inherit; font-size: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 10px; padding: 9px 4px; cursor: pointer; font-variant-numeric: tabular-nums; }
.slots button.on { background: var(--accent); color: var(--onAccent); border-color: var(--accent); }
.dock { position: fixed; inset-inline: 0; bottom: 0; background: var(--surface); border-top: 1px solid var(--line); padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); z-index: 20; }
.dock .in { max-width: 600px; margin: 0 auto; display: flex; align-items: center; gap: 12px; }
.dock .sum { flex: 1; min-width: 0; font-size: 13.5px; color: var(--muted); }
.dock .sum b { display: block; color: var(--ink); font-size: 17px; font-variant-numeric: tabular-nums; }
.done { text-align: center; padding: 30px 20px; }
.done .ref { font-size: 34px; letter-spacing: 4px; font-weight: 600; direction: ltr; margin: 10px 0; font-variant-numeric: tabular-nums; }
.done .ok-ic { width: 52px; height: 52px; border-radius: 50%; background: var(--okBg); color: var(--ok); display: inline-flex; align-items: center; justify-content: center; }
.done .ok-ic svg { width: 26px; height: 26px; }
.foot { text-align: center; font-size: 12.5px; color: var(--muted); margin-top: 40px; }
.foot .wordmark { color: var(--ink); }
.lq { margin-top: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.lq-h { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); font-weight: 500; margin-bottom: 4px; }
.lq-h .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); animation: lqp 1.6s ease-in-out infinite; }
@keyframes lqp { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .lq-h .pulse { animation: none; } }
.lq-r { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 14px; flex-wrap: wrap; }
.lq-r:first-of-type { border-top: 0; }
.lq-r .nm { font-weight: 600; }
.lq-r .tx { margin-inline-start: auto; color: var(--muted); }
.lq-r .tx b { color: var(--ink); font-weight: 600; }
.lq-r .free { color: var(--ok); font-weight: 600; }

/* الهيدر بلون الثيم بعرض الشاشة كلها (زمرد أخضر وتحته عمود الكوافير، كريستال أزرق، أونيكس لمعة دهبي) */
.bhead, .hero { position: relative; }
:root[data-theme="emerald"] .bhead, :root[data-theme="emerald"] .hero { background: var(--headerBg); box-shadow: 0 0 0 100vmax var(--headerBg); clip-path: inset(0 -100vmax); color: var(--headerInk); }
:root[data-theme="emerald"] .hero { padding-bottom: 26px; margin-bottom: 18px; clip-path: inset(0 -100vmax -7px); }
:root[data-theme="emerald"] .hero::after { content: ''; position: absolute; left: calc(50% - 50vw); width: 100vw; bottom: -7px; height: 7px; background: var(--pole); }
:root[data-theme="emerald"] .bhead .wordmark { color: var(--headerInk); }
:root[data-theme="emerald"] .hero .muted, :root[data-theme="emerald"] .hero .live { color: var(--headerMuted); }
:root[data-theme="emerald"] .bhead .theme-btn { background: transparent; color: var(--headerInk); border-color: var(--headerLine); }
:root[data-theme="emerald"] .hero h1 { font-size: 32px; }
:root[data-theme="crystal"] .bhead, :root[data-theme="crystal"] .hero { background: var(--hero); box-shadow: 0 0 0 100vmax var(--hero); clip-path: inset(0 -100vmax); color: var(--heroText); }
:root[data-theme="crystal"] .hero { padding-bottom: 24px; margin-bottom: 18px; }
:root[data-theme="crystal"] .bhead .wordmark { color: var(--heroInk); }
:root[data-theme="crystal"] .hero .muted, :root[data-theme="crystal"] .hero .live { color: var(--heroMuted); }
:root[data-theme="crystal"] .bhead .theme-btn { background: var(--heroSoft); color: var(--heroInk); border-color: transparent; }
:root[data-theme="crystal"] .hero .chip.ref-ok, :root[data-theme="crystal"] .hero .ref-ok { background: var(--surface); }
:root[data-theme="onyx"] body { background: radial-gradient(ellipse 900px 420px at 50% -80px, rgba(201, 163, 91, .16), transparent 70%) no-repeat, var(--bg); }
:root[data-theme="onyx"] .bhead .wordmark { color: var(--accentInk); }
.svc, .lq, .pill, .slots button { border-radius: var(--r-sm); }
:root[data-theme="crystal"] .svc, :root[data-theme="crystal"] .lq { border-color: transparent; box-shadow: var(--shadow); }
.svc:has(input:checked) { background: var(--accentSoft); }
.dock { box-shadow: 0 -10px 30px -20px rgba(0, 0, 0, .35); }
.step h2 .n { border-color: var(--accent); color: var(--accentInk); }
.hero .lq { color: var(--ink); text-align: start; }