:root{--brand:#0f6b52;--brand-dark:#0a4a3a;--brand-light:#e6f2ee;--paper:#fff;--ink:#16231e;--muted:#60746c;--line:#e1eae6;--bg:#f3f8f6;--danger:#c0392b;--danger-bg:#fdeeec;--success-bg:#e8f7f0;--success-ink:#1a6b4f;--radius-lg:20px;--radius-md:14px;--radius-sm:10px;--shadow:0 14px 34px rgba(11,45,35,.10)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:16px;line-height:1.45}
body.rtl{direction:rtl}
a{color:inherit}

/* header */
.top{position:sticky;top:0;z-index:30;background:rgba(243,248,246,.92);backdrop-filter:saturate(160%) blur(10px);padding:calc(10px + env(safe-area-inset-top)) 14px 10px;border-bottom:1px solid var(--line)}
.top-row{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:8px;max-width:620px;margin:auto}
.icon-btn{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:var(--paper);color:var(--brand-dark);text-decoration:none;box-shadow:0 2px 6px rgba(11,45,35,.06)}
.icon-btn:active{transform:scale(.92)}
.icon-btn.spacer{visibility:hidden;border:0;box-shadow:none}
.brand{text-align:center;font-weight:800;font-size:13px;color:var(--brand-dark);letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lang-switch{display:flex;gap:2px;padding:3px;background:var(--paper);border:1px solid var(--line);border-radius:99px}
.lang-switch a{padding:5px 8px;border-radius:99px;color:var(--muted);text-decoration:none;font-size:10px;font-weight:800}
.lang-switch a.on{background:var(--brand);color:#fff}
.progress{display:flex;gap:5px;max-width:620px;margin:12px auto 0}
.progress span{height:4px;flex:1;border-radius:9px;background:var(--line)}
.progress span.on{background:var(--brand)}

/* layout */
.shell{width:min(620px,100%);margin:auto;padding:18px 16px calc(28px + env(safe-area-inset-bottom))}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(20px,5.5vw,34px);box-shadow:var(--shadow)}
h1{font-size:clamp(24px,7vw,34px);line-height:1.16;margin:0 0 10px;letter-spacing:-.02em}
h2{margin:0 0 4px;font-size:clamp(19px,5vw,23px);letter-spacing:-.01em}
p.muted,.muted{color:var(--muted)}
p{margin:8px 0 0}

/* hero / home */
.hero{text-align:center;padding-block:20px 8px}
.seal{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;margin:0 auto 18px;background:var(--brand);color:#fff;font-size:30px;box-shadow:0 10px 24px rgba(15,107,82,.35)}

/* buttons */
.actions{display:grid;gap:10px;margin-top:26px}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:var(--radius-md);min-height:52px;padding:12px 18px;background:var(--brand);color:#fff;text-align:center;text-decoration:none;font:inherit;font-size:16px;font-weight:750;cursor:pointer;width:100%;transition:transform .1s ease,opacity .15s ease}
.btn:active{transform:scale(.98)}
.btn.secondary{background:var(--brand-light);color:var(--brand-dark)}
.btn:disabled{opacity:.6;cursor:default;transform:none}
.btn .spinner{width:16px;height:16px;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .7s linear infinite}
.btn.secondary .spinner{border-color:rgba(10,74,58,.25);border-top-color:var(--brand-dark)}
@keyframes spin{to{transform:rotate(360deg)}}

/* forms */
label{display:block;font-weight:700;font-size:13px;margin:18px 0 7px;color:var(--ink)}
input,select,textarea{width:100%;padding:14px 15px;border:1.5px solid #c3d3cd;border-radius:var(--radius-md);background:#fff;font:inherit;font-size:16px;color:var(--ink)}
input::placeholder{color:#8a9c94}
textarea{min-height:96px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-light)}
input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--brand);transform:scale(1.25);margin-inline-end:8px}
.check-row{display:flex;align-items:center;margin-top:18px}
.check-row label{margin:0;font-weight:600}

/* dynamic field wrapper */
.dynamic-field{margin-bottom:2px}
.dynamic-field.hint{margin-top:10px;padding:12px 14px;background:var(--brand-light);border-radius:var(--radius-sm);color:var(--brand-dark);font-size:13px}

/* file upload */
.upload{display:block;margin-top:6px;border:1.6px dashed #b7cbc3;border-radius:var(--radius-md);padding:18px;text-align:center;background:#fafdfc;cursor:pointer;transition:border-color .15s ease,background .15s ease}
.upload:active{background:var(--brand-light)}
.upload input{display:none}
.upload-empty{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--muted)}
.upload-empty svg{color:var(--brand)}
.upload-empty b{color:var(--ink);font-size:14px}
.upload-empty small{font-size:12px}
.upload-preview{display:none;align-items:center;gap:12px;text-align:start}
.upload.has-file .upload-empty{display:none}
.upload.has-file .upload-preview{display:flex}
.upload-preview img{width:56px;height:56px;border-radius:10px;object-fit:cover;border:1px solid var(--line);background:#fff}
.upload-preview .file-icon{display:grid;place-items:center;width:56px;height:56px;border-radius:10px;background:var(--brand-light);color:var(--brand-dark);font-size:22px;flex:none}
.upload-preview-name{min-width:0;font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upload-preview-change{display:block;margin-top:2px;color:var(--brand);font-size:12px;font-weight:800}

/* day strip */
.day-strip{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;padding:2px 2px 8px;margin:0 -2px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.day-strip::-webkit-scrollbar{display:none}
.day{flex:0 0 auto;scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;gap:1px;min-width:62px;padding:10px 8px;border:1.5px solid #c3d3cd;border-radius:var(--radius-md);background:#fff;color:var(--ink);text-decoration:none;transition:transform .1s ease,border-color .15s ease}
.day small{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
.day b{font-size:20px;font-weight:800;line-height:1.15}
.day span{font-size:11px;font-weight:700;color:var(--muted)}
.day:active{transform:scale(.95)}
.day.on{border-color:var(--brand);background:var(--brand);color:#fff;box-shadow:0 6px 16px rgba(15,107,82,.28)}
.day.on small,.day.on span{color:rgba(255,255,255,.85)}
.day.off{background:var(--bg);border-style:dashed;border-color:var(--line);color:#a3b3ac;cursor:not-allowed}
.day.off small,.day.off span{color:#a3b3ac}

/* hour slots */
.slot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.slot-grid[aria-busy=true]{opacity:.45}
.slot{position:relative;display:flex;flex-direction:column;gap:2px;margin:0;padding:12px 13px;border:1.5px solid #c3d3cd;border-radius:var(--radius-md);background:#fff;font-weight:inherit;cursor:pointer;transition:transform .1s ease,border-color .15s ease}
/* The radio covers the chip at zero opacity rather than being hidden: a display:none or
   zero-size required control makes Chrome refuse to submit instead of prompting. */
.slot input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;appearance:none;-webkit-appearance:none;transform:none;cursor:pointer}
.slot b{font-size:14px;font-weight:750;letter-spacing:-.01em;white-space:nowrap}
.slot small{font-size:11px;font-weight:700;color:var(--muted)}
.slot:active{transform:scale(.97)}
.slot:has(input:checked){border-color:var(--brand);background:var(--brand-light);box-shadow:0 0 0 3px var(--brand-light)}
.slot:has(input:checked) small{color:var(--brand-dark)}
.slot:has(input:focus-visible){outline:2px solid var(--brand);outline-offset:2px}
.slot.full{background:var(--bg);border-style:dashed;border-color:var(--line);color:#a3b3ac;cursor:not-allowed}
.slot.full small{color:#a3b3ac}

/* messages */
.error,.notice{padding:13px 15px;border-radius:var(--radius-sm);margin-bottom:16px;font-size:14px}
.error{background:var(--danger-bg);color:var(--danger)}
.notice{background:var(--success-bg);color:var(--success-ink)}

/* confirmation */
.queue-badge{display:inline-block;margin:14px 0 4px;padding:6px 16px;border-radius:99px;background:var(--success-bg);color:var(--success-ink);font-size:12px;font-weight:800;letter-spacing:.03em;text-transform:uppercase}
.queue{font-size:44px;font-weight:900;color:var(--brand);letter-spacing:1px;line-height:1.1}
.qr-frame{width:min(240px,72%);margin:20px auto 4px;padding:14px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow)}
.qr{display:block;width:100%}
.qr-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px auto 22px}
.details{display:grid;grid-template-columns:1fr 1fr;gap:10px;text-align:start}
.detail{background:var(--bg);border-radius:var(--radius-sm);padding:13px 14px}
.detail small{display:block;color:var(--muted);margin-bottom:3px;font-size:11px;text-transform:uppercase;letter-spacing:.03em}

/* suggestion */
.suggestion{text-align:center;padding:24px 16px;background:var(--brand-light);border-radius:var(--radius-md)}
.suggestion strong{display:block;margin-top:4px;font-size:32px;color:var(--brand-dark)}

/* appointment list card */
.appointment-item{margin-bottom:14px;padding:16px;background:var(--bg);border-radius:var(--radius-md);border:1px solid var(--line)}
.appointment-item .queue-number{font-weight:900;font-size:16px;color:var(--brand-dark)}
.status-pill{display:inline-block;margin-top:6px;padding:3px 10px;border-radius:99px;background:#fff;border:1px solid var(--line);font-size:11px;font-weight:800;text-transform:capitalize}

@media(max-width:420px){.qr-actions{grid-template-columns:1fr}.details{grid-template-columns:1fr}}