/* ==========================================================
   Booking flow + booking status page
   ========================================================== */
.book-page { padding: calc(var(--nav-h) + 20px) 0 140px; min-height: 100svh; }
.book-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.book-head h1 { font-family: var(--f-display); font-weight: 500; font-size: clamp(2.2rem, 7vw, 3.6rem); line-height: 1; margin: 0; }
.book-head h1 em { color: var(--pink); }
.help-link { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--muted); text-decoration: none; }
.help-link svg { width: 16px; height: 16px; color: var(--pink-soft); }
.help-link:hover { color: var(--white); }

/* Progress */
.progress { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.progress li { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.progress li::before { content: ""; display: block; height: 3px; border-radius: 2px; background: var(--line-2); margin-bottom: 8px; transition: background .3s; }
.progress li.done::before { background: var(--pink-soft); }
.progress li.current { color: var(--white); }
.progress li.current::before { background: var(--pink); }
@media (max-width: 420px) { .progress li span { display: none; } .progress li.current span { display: inline; } }

.book-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
.book-layout > form, .field, .form-grid > * { min-width: 0; }
@media (min-width: 1000px) { .book-layout { grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; } }

.step { display: none; }
.step.active { display: block; animation: stepIn .45s var(--ease); }
@keyframes stepIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .step.active { animation: none; } }
.step-title { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.7rem, 5vw, 2.3rem); line-height: 1.05; margin: 0 0 6px; }
.step-title:focus { outline: none; }
.step-sub { color: var(--muted); margin: 0 0 24px; }
.back-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 2px; margin-bottom: 8px; background: none; border: 0; color: var(--muted); font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.back-btn svg { width: 18px; height: 18px; }
.back-btn:hover { color: var(--pink-soft); }

.alert { border: 1px solid var(--danger); background: rgba(255, 107, 138, .08); color: #FFD1DC; padding: 12px 14px; border-radius: var(--radius); font-size: 15px; font-weight: 600; margin: 0 0 18px; }
.alert[hidden] { display: none; }
.note { border-left: 2px solid var(--pink); background: var(--panel); padding: 12px 16px; color: var(--muted); font-size: 14.5px; margin: 0 0 18px; border-radius: 0 var(--radius) var(--radius) 0; }
.note b { color: var(--white); }

/* Service chooser */
.svc-group { margin-bottom: 28px; }
.svc-group-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.svc-group-h h3 { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--pink-soft); }
.svc-group-h span { font-size: 12.5px; color: var(--dim); }
.opt-grid { display: grid; gap: 8px; }
.opt-grid.thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt-card { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--panel); cursor: pointer; transition: border-color .2s, background .2s; }
.opt-card:hover { border-color: #5a5a5a; }
.opt-card .o-txt { flex: 1; min-width: 0; }
.opt-card .o-name { display: block; font-weight: 700; color: var(--white); }
.opt-card .o-desc { display: block; font-size: 13px; color: var(--dim); }
.opt-card .o-price { font-weight: 800; font-variant-numeric: tabular-nums; }
.opt-card .o-box { width: 24px; height: 24px; border-radius: 4px; border: 1.5px solid #666; display: grid; place-items: center; flex: none; transition: all .2s; }
.opt-card .o-box svg { width: 14px; height: 14px; color: #000; opacity: 0; }
.opt input:checked + .opt-card { border-color: var(--pink); background: #1a0c16; }
.opt input:checked + .opt-card .o-box { background: var(--pink); border-color: var(--pink); }
.opt input:checked + .opt-card .o-box svg { opacity: 1; }
.opt input:focus-visible + .opt-card { outline: 2px solid var(--pink-soft); outline-offset: 2px; }
.opt-grid.thumbs .opt-card { flex-direction: column; align-items: stretch; padding: 0; gap: 0; overflow: hidden; min-height: 0; }
.opt-grid.thumbs .opt-card img { width: 100%; aspect-ratio: 1 / 1.05; object-fit: cover; }
.opt-grid.thumbs .o-meta { padding: 10px 10px 12px; display: grid; gap: 2px; }
.opt-grid.thumbs .o-name { font-size: 14px; }
.opt-grid.thumbs .o-price { font-size: 14px; color: var(--pink-soft); }
.opt-grid.thumbs .o-box { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,.45); border-color: rgba(255,255,255,.85); border-radius: 50%; }
.opt-thumb-row { display: flex; align-items: center; gap: 14px; }
.opt-thumb-row img { width: 52px; height: 52px; object-fit: cover; border-radius: 3px; flex: none; }

/* Calendar */
.cal { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; background: var(--panel); max-width: 520px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cal-head h3 { margin: 0; font-family: var(--f-display); font-weight: 500; font-size: 24px; }
.cal-head .icon-btn { width: 44px; height: 44px; border-radius: var(--radius); }
.cal-head .icon-btn[disabled] { opacity: .3; pointer-events: none; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow { text-align: center; font-size: 11px; font-weight: 800; letter-spacing: .1em; color: var(--dim); padding: 6px 0; text-transform: uppercase; }
.day { aspect-ratio: 1; min-height: 42px; display: grid; place-items: center; border-radius: var(--radius); border: 1px solid transparent; background: none; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; position: relative; color: var(--white); }
.day.open { background: #1f1f1f; border-color: #333; }
.day.open:hover { border-color: var(--pink-soft); }
.day.open::after { content: ""; position: absolute; bottom: 6px; width: 4px; height: 4px; border-radius: 50%; background: var(--pink-soft); }
.day.selected { background: var(--pink); border-color: var(--pink); color: #000; }
.day.selected::after { background: #000; }
.day.today { box-shadow: inset 0 0 0 1px var(--white); }
.day.full, .day.blocked { color: #6b666a; text-decoration: line-through; cursor: not-allowed; }
.day.closed { color: #4f4b4e; cursor: not-allowed; }
.day.past, .day.out { color: #3d3a3c; cursor: not-allowed; }
.day.empty { visibility: hidden; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 14px; font-size: 12.5px; color: var(--muted); }
.cal-legend span { display: inline-flex; align-items: center; gap: 7px; }
.cal-legend i { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }
.lg-open { background: #1f1f1f; border: 1px solid #333; } .lg-sel { background: var(--pink); } .lg-un { background: transparent; border: 1px dashed #555; } .lg-closed { background: transparent; border: 1px solid #333; opacity: .5; }
.cal-loading { opacity: .5; pointer-events: none; }

/* Slots */
.slot-date { font-weight: 700; margin: 0 0 16px; color: var(--pink-soft); }
.slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 560px; }
.slot { min-height: 54px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--panel); font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; display: grid; place-items: center; line-height: 1.15; transition: all .2s; }
.slot small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.slot:hover:not([disabled]) { border-color: var(--pink-soft); }
.slot[aria-pressed="true"] { background: var(--pink); border-color: var(--pink); color: #000; }
.slot[disabled] { color: #5a5659; background: transparent; border-style: dashed; cursor: not-allowed; }
.empty-state { border: 1px dashed var(--line-2); border-radius: var(--radius); padding: 28px 20px; text-align: center; color: var(--muted); max-width: 560px; }
.empty-state b { display: block; color: var(--white); font-size: 17px; margin-bottom: 6px; }
@media (min-width: 560px) { .slots { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Forms (booking) */
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 16px; max-width: 620px; }
@media (min-width: 640px) { .form-grid.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .form-grid .full { grid-column: 1 / -1; } }

.dropzone { position: relative; display: grid; place-items: center; text-align: center; gap: 8px; padding: 26px 18px; min-height: 170px; border: 1.5px dashed #555; border-radius: var(--radius); background: var(--panel); cursor: pointer; transition: border-color .2s, background .2s; }
.dropzone:hover, .dropzone.drag { border-color: var(--pink); background: #170b14; }
.dropzone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.dropzone input:focus-visible ~ .dz-inner { outline: 2px solid var(--pink-soft); outline-offset: 6px; border-radius: 2px; }
.dropzone svg { display: block; width: 30px; height: 30px; color: var(--pink-soft); margin: 0 auto 10px; }
.dz-title { font-weight: 700; color: var(--white); }
.dz-sub { font-size: 13px; color: var(--dim); }
.preview { display: none; align-items: center; gap: 14px; padding: 12px; border: 1px solid var(--pink); border-radius: var(--radius); background: #140a11; }
.preview.show { display: flex; }
.preview img { width: 76px; height: 76px; object-fit: cover; border-radius: 3px; flex: none; background: #222; }
.preview .pv-doc { width: 76px; height: 76px; display: grid; place-items: center; background: #222; border-radius: 3px; font-weight: 800; font-size: 13px; letter-spacing: .1em; flex: none; }
.preview .pv-txt { flex: 1; min-width: 0; }
.preview .pv-name { display: block; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.preview .pv-size { font-size: 13px; color: var(--dim); }
.preview button { background: none; border: 1px solid var(--line-2); color: var(--text); border-radius: var(--radius); min-height: 40px; padding: 0 14px; font-size: 13px; font-weight: 700; }
.preview button:hover { border-color: var(--danger); color: var(--danger); }

/* Review */
.review { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); max-width: 640px; }
.review section { padding: 18px 18px; border-bottom: 1px solid var(--line); }
.review section:last-child { border-bottom: 0; }
.review h3 { display: flex; justify-content: space-between; align-items: center; margin: 0 0 10px; font-size: 11px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--pink-soft); }
.review h3 button { background: none; border: 0; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-decoration: underline; text-underline-offset: 3px; padding: 6px 0; text-transform: none; }
.review h3 button:hover { color: var(--white); }
.review dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; }
.review dt { color: var(--dim); font-size: 14px; }
.review dd { margin: 0; text-align: right; font-weight: 600; overflow-wrap: anywhere; }
.review .insp { width: 64px; height: 64px; object-fit: cover; border-radius: 3px; margin-left: auto; }

.lines { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.lines td { padding: 7px 0; }
.lines td:last-child { text-align: right; font-weight: 700; }
.lines tr.sep td { border-top: 1px solid var(--line); padding-top: 12px; }
.lines tr.total td { font-size: 18px; font-weight: 800; color: var(--white); }
.lines tr.dep td { color: var(--pink-soft); font-weight: 700; }
.lines tr.bal td { color: var(--muted); }

/* Payment */
.pay-card { border: 1px solid var(--pink); border-radius: var(--radius); background: linear-gradient(160deg, #1f0b19, #0f0a0d 70%); padding: 22px 20px; margin-bottom: 26px; max-width: 620px; }
.pay-card .pc-lead { margin: 0 0 16px; color: var(--text); }
.pay-card .pc-amount { font-family: var(--f-display); font-size: 44px; line-height: 1; margin: 0 0 18px; color: var(--pink); }
.pay-card dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; margin: 0; align-items: center; }
.pay-card dt { font-size: 11px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.pay-card dd { margin: 0; font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.copy-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--radius); background: rgba(0,0,0,.3); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text); }
.copy-btn svg { width: 14px; height: 14px; }
.copy-btn:hover { border-color: var(--pink-soft); color: var(--pink-soft); }
.pay-card .pc-foot { margin: 16px 0 0; font-size: 13.5px; color: var(--muted); }

/* Summary sidebar */
.summary { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 20px; }
.summary h2 { margin: 0 0 14px; font-size: 11px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--pink-soft); }
.summary .s-empty { color: var(--dim); font-size: 14.5px; margin: 0; }
.summary .s-when { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14.5px; }
.summary .s-when b { color: var(--white); }
.side { display: none; }
@media (min-width: 1000px) { .side { display: block; position: sticky; top: calc(var(--nav-h) + 20px); } }

/* Desktop step actions */
.step-actions { display: none; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
@media (min-width: 1000px) { .step-actions { display: flex; } }

/* Mobile action bar */
.action-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: rgba(12,12,12,.96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 14px; }
.action-bar .ab-total { flex: 1; min-width: 0; line-height: 1.25; }
.action-bar .ab-total span { display: block; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.action-bar .ab-total b { font-size: 19px; font-variant-numeric: tabular-nums; }
.action-bar .btn { min-width: 150px; }
.action-bar[hidden] { display: none; }
@media (min-width: 1000px) { .action-bar { display: none; } .book-page { padding-bottom: 80px; } }

/* Confirmation */
.confirm { max-width: 640px; }
.confirm .tick { width: 64px; height: 64px; border-radius: 50%; background: var(--pink); display: grid; place-items: center; margin-bottom: 20px; }
.confirm .tick svg { width: 30px; height: 30px; color: #000; }
.confirm h2 { font-family: var(--f-display); font-weight: 500; font-size: clamp(2.2rem, 7vw, 3.4rem); line-height: 1; margin: 0 0 12px; }
.badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; border: 1px solid currentColor; }
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge.s-verify, .badge.s-pending { color: #FFD27A; }
.badge.s-confirmed { color: var(--ok); }
.badge.s-completed { color: #9FB8FF; }
.badge.s-cancelled { color: var(--danger); }
.badge.s-rescheduled { color: var(--pink-soft); }
.confirm .link-box { display: flex; gap: 8px; align-items: center; border: 1px solid var(--line-2); border-radius: var(--radius); padding: 8px 8px 8px 14px; background: var(--panel); margin: 10px 0 0; }
.confirm .link-box code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--muted); }
.confirm .actions { display: grid; gap: 10px; margin-top: 28px; }
@media (min-width: 560px) { .confirm .actions { grid-template-columns: auto auto; justify-content: start; } }

.spinner { width: 18px; height: 18px; border: 2px solid rgba(0,0,0,.25); border-top-color: #000; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Booking policy inside "Your details" */
.pol-mini { border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--panel); padding: 0 16px; }
.pol-mini summary { cursor: pointer; list-style: none; min-height: 48px; display: flex; align-items: center; justify-content: space-between; font-weight: 700; color: var(--pink-soft); }
.pol-mini summary::-webkit-details-marker { display: none; }
.pol-mini summary::after { content: "+"; font-size: 22px; color: var(--pink); transition: transform .3s; }
.pol-mini[open] summary::after { transform: rotate(45deg); }
.pol-mini ol { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 10px; color: var(--muted); font-size: 14.5px; }
.pol-mini ol b { color: var(--white); }
.pol-mini li::marker { color: var(--pink); font-weight: 700; }
.pol-mini[open] { padding-bottom: 14px; }
#agree-field .agree-check { margin-top: 4px; }