/* ==========================================================
   Online booking wizard  (dialog.bk)
   Ivory work surface + emerald summary pane + gold accents
   ========================================================== */
.bk { --ivory: #F7F2E2; --ivory-2: #EFE8D1; --paper: #FFFDF6; --ink: #2b2412; --ink-2: #6d6446; --line: #DDD2B0; --ok: #1d7a43;
  border: 0; padding: 0; background: transparent; color: var(--ink); max-width: none; max-height: none; width: 100%; height: 100%; overflow: hidden; }
.bk::backdrop { background: rgb(14 10 3 / .72); backdrop-filter: blur(5px); }
.bk[open] { display: grid; place-items: center; }
.bk-shell { width: min(1040px, 96vw); height: min(740px, 94dvh); display: grid; grid-template-columns: 330px minmax(0, 1fr); background: var(--ivory); border-radius: 26px; overflow: hidden;
  box-shadow: 0 40px 120px rgb(0 0 0 / .6), 0 0 0 1px rgb(212 172 82 / .4); animation: bkIn .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes bkIn { from { opacity: 0; transform: translateY(24px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---- side summary ---- */
.bk-side { background: radial-gradient(600px 380px at 0% 0%, rgb(255 255 255 / .08), transparent 60%), linear-gradient(170deg, var(--emerald-deep, #0f3d26), var(--emerald, #1A5B38)); color: #f4eed3; padding: 28px 26px 22px; display: flex; flex-direction: column; gap: 22px; border-right: 3px solid var(--gold); overflow-y: auto; }
.bk-brand { display: flex; align-items: center; gap: 12px; }
.bk-brand img { width: 52px; height: 52px; object-fit: contain; background: #fff; border-radius: 50%; padding: 3px; }
.bk-brand b { font: 600 1.35rem/1.05 var(--serif); color: #FDFACD; display: block; }
.bk-brand span { font-size: .78rem; opacity: .7; }
.bk-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; counter-reset: s; }
.bk-steps li { display: flex; align-items: center; gap: 12px; padding: 8px 4px; color: rgb(244 238 211 / .6); font-size: .92rem; position: relative; }
.bk-steps li::before { counter-increment: s; content: counter(s); width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid currentColor; display: grid; place-items: center; font-size: .8rem; font-weight: 700; flex: none; transition: all .3s; }
.bk-steps li.on { color: #fff; font-weight: 700; } .bk-steps li.on::before { background: var(--gold); border-color: var(--gold); color: #1b1608; }
.bk-steps li.done { color: #bfe9cd; } .bk-steps li.done::before { content: '\f00c'; font-family: 'Font Awesome 6 Free', 'Font Awesome 7 Free'; font-weight: 900; font-size: .7rem; background: rgb(126 214 160 / .25); border-color: #7ED6A0; }
.bk-summary { background: rgb(0 0 0 / .2); border: 1px solid rgb(212 172 82 / .28); border-radius: 16px; padding: 16px 16px 14px; font-size: .9rem; }
.bk-summary h4 { font: 600 1.15rem/1 var(--serif); color: var(--gold); margin: 0 0 10px; letter-spacing: .02em; }
.sum-empty { color: rgb(244 238 211 / .6); margin: 0; }
.sum-item { display: flex; align-items: flex-start; gap: 8px; padding: 7px 0; border-bottom: 1px dashed rgb(255 255 255 / .14); }
.sum-item > div { flex: 1; min-width: 0; } .sum-item b { display: block; font-weight: 600; line-height: 1.3; } .sum-item small { color: rgb(244 238 211 / .65); }
.sum-x { width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgb(255 255 255 / .1); color: #f4eed3; display: grid; place-items: center; font-size: .7rem; flex: none; }
.sum-x:hover { background: rgb(255 120 110 / .35); }
.sum-line { display: flex; gap: 10px; align-items: flex-start; padding-top: 10px; color: #f4eed3; } .sum-line i { color: var(--gold); width: 16px; margin-top: .3em; text-align: center; }
.sum-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgb(212 172 82 / .35); }
.sum-total b { font: 600 1.35rem/1 var(--serif); color: #FDFACD; font-variant-numeric: lining-nums; }
.bk-help { margin: auto 0 0; font-size: .85rem; color: rgb(244 238 211 / .75); } .bk-help a { color: var(--gold-bright, #EBCE27); text-decoration: none; font-weight: 700; } .bk-help i { margin-right: 6px; }

/* ---- main column ---- */
.bk-main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--ivory); }
.bk-top { display: flex; align-items: center; gap: 14px; padding: 20px 24px 14px; }
.bk-title { flex: 1; min-width: 0; } .bk-title small { display: block; color: var(--ink-2); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
.bk-title h2 { font: 600 clamp(1.6rem, 3vw, 2.15rem)/1.1 var(--serif); color: var(--emerald-deep, #0f3d26); margin-top: 2px; font-variant-numeric: lining-nums; }
.bk-iconbtn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); color: var(--ink); display: grid; place-items: center; flex: none; transition: background .2s, border-color .2s; }
.bk-iconbtn:hover { border-color: var(--emerald); background: #fff; } .bk-iconbtn[hidden] { display: none; }
.bk-progress { height: 3px; background: var(--ivory-2); margin: 0 24px; border-radius: 3px; overflow: hidden; } .bk-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #B07614, #E9CD72); border-radius: 3px; transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.bk-body { flex: 1; overflow-y: auto; padding: 18px 24px 24px; outline: none; scroll-behavior: smooth; animation: bkFade .35s ease; overscroll-behavior: contain; }
@keyframes bkFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.bk-intro { color: var(--ink-2); margin: 0 0 16px; max-width: 38rem; }
.bk-foot { display: flex; align-items: center; gap: 16px; padding: 14px 24px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--paper); }
.bk-mini { flex: 1; min-width: 0; font-size: .9rem; color: var(--ink-2); } .bk-mini b { color: var(--ink); display: block; font-size: 1rem; }
.bk .btn { width: auto; }
.bk-foot[hidden] { display: none; }
.bk-foot .btn { min-width: 170px; } .bk-foot .btn[disabled] { opacity: .45; }
.bk-err { background: #fbe4e1; color: #8a1a12; border: 1px solid #efb8b2; border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; font-size: .94rem; display: flex; gap: 10px; align-items: flex-start; } .bk-err i { margin-top: .25em; }
.bk-note { background: #fff6dc; color: #6b5006; border: 1px solid #ecd58a; border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; font-size: .92rem; }

/* ---- step 1: services ---- */
.bk-search { position: relative; margin-bottom: 12px; } .bk-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-2); }
.bk-search input { width: 100%; padding: 12px 14px 12px 40px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--paper); font: inherit; font-size: 1rem; min-height: 46px; color: var(--ink); }
.bk-search input:focus, .bkf input:focus, .bkf textarea:focus { outline: none; border-color: var(--emerald); box-shadow: 0 0 0 3px color-mix(in srgb, var(--emerald) 22%, transparent); }
.bk-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 12px; margin-bottom: 4px; scrollbar-width: none; } .bk-chips::-webkit-scrollbar { display: none; }
.chip { flex: none; border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 999px; padding: 8px 16px; font-size: .88rem; font-weight: 500; min-height: 38px; transition: all .2s; }
.chip:hover { border-color: var(--emerald); } .chip.on { background: var(--emerald); border-color: var(--emerald); color: #FDFACD; font-weight: 700; }
.bk-grp { margin: 14px 0 8px; font: 600 1.25rem/1 var(--serif); color: var(--emerald-deep, #0f3d26); display: flex; align-items: center; gap: 10px; } .bk-grp::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.bsvc { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 13px 14px; margin-bottom: 8px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--paper); transition: border-color .2s, box-shadow .2s, transform .15s; }
.bsvc:hover { border-color: var(--emerald); transform: translateY(-1px); box-shadow: 0 6px 16px rgb(60 50 20 / .08); }
.svc-main { flex: 1; min-width: 0; } .svc-main b { display: block; font-weight: 600; color: var(--ink); } .svc-main small { color: var(--ink-2); font-size: .82rem; }
.svc-price { font: 600 1.15rem/1 var(--serif); color: var(--bronze, #B07614); white-space: nowrap; font-variant-numeric: lining-nums; text-align: right; }
.svc-tick { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--line-2, #bfb283); display: grid; place-items: center; color: var(--emerald); flex: none; font-size: .8rem; transition: all .2s; background: #fff; }
.bsvc.on { border-color: var(--emerald); background: #fff; box-shadow: inset 4px 0 0 var(--gold), 0 6px 16px rgb(26 91 56 / .1); }
.bsvc.on .svc-tick { background: var(--emerald); border-color: var(--emerald); color: #FDFACD; }
.bk-none { text-align: center; color: var(--ink-2); padding: 34px 10px; border: 2px dashed var(--line); border-radius: 14px; }

/* ---- step 2: date & time ---- */
.bk-staff { margin-bottom: 18px; } .bk-lab { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 8px; }
.staff-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; } .staff-row::-webkit-scrollbar { display: none; }
.stf { flex: none; display: flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border: 1.5px solid var(--line); background: var(--paper); border-radius: 999px; min-height: 48px; font-weight: 500; transition: all .2s; }
.stf .av { width: 36px; height: 36px; border-radius: 50%; background: var(--ivory-2) center/cover; display: grid; place-items: center; color: var(--emerald); font-weight: 700; font-size: .85rem; } .stf small { display: block; font-size: .72rem; color: var(--ink-2); font-weight: 400; line-height: 1.1; }
.stf.on { border-color: var(--emerald); background: var(--emerald); color: #FDFACD; } .stf.on small { color: #cfe3d6; } .stf.on .av { background-color: var(--gold); color: #1b1608; }
.bk-time { display: grid; grid-template-columns: 310px minmax(0, 1fr); gap: 26px; align-items: start; }
.cal { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 14px 14px 10px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .cal-head b { font: 600 1.3rem/1 var(--serif); color: var(--emerald-deep, #0f3d26); }
.cal-head button { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink); display: grid; place-items: center; font-size: .8rem; } .cal-head button:disabled { opacity: .3; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; } .cal-grid .dow { font-size: .7rem; font-weight: 700; color: var(--ink-2); padding: 6px 0; letter-spacing: .06em; text-transform: uppercase; }
.day { aspect-ratio: 1; border-radius: 50%; border: 0; background: transparent; color: var(--ink); font: 600 .95rem/1 var(--sans); display: grid; place-items: center; position: relative; min-height: 38px; transition: background .15s, color .15s; font-variant-numeric: lining-nums; }
.day:not(:disabled):not(.sel):hover { background: #E4EFE7; } .day:disabled { color: #b9ae8c; font-weight: 400; cursor: default; }
.day.has::after { content: ''; position: absolute; bottom: 5px; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); }
.day.today { box-shadow: inset 0 0 0 1.5px var(--gold); } .day.sel, .day.sel:hover { background: var(--emerald); color: #FDFACD; } .day.sel::after { background: var(--gold-bright, #EBCE27); }
.cal.loading .day { animation: pulse 1.1s ease infinite; } @keyframes pulse { 50% { opacity: .45; } }
.slots h3 { font: 600 1.45rem/1.1 var(--serif); color: var(--emerald-deep, #0f3d26); } .slots > p { color: var(--ink-2); margin: 2px 0 14px; font-size: .9rem; }
.slot-grp { margin-bottom: 14px; } .slot-grp h4 { font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 8px; display: flex; align-items: center; gap: 8px; } .slot-grp h4 i { color: var(--gold); }
.slot-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.slot { padding: 11px 6px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--paper); font-weight: 600; font-size: .92rem; min-height: 46px; color: var(--ink); transition: all .15s; font-variant-numeric: lining-nums; }
.slot:hover { border-color: var(--emerald); background: #fff; transform: translateY(-1px); } .slot.on { background: var(--emerald); border-color: var(--emerald); color: #FDFACD; box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 55%, transparent); }
.skel { height: 46px; border-radius: 12px; background: linear-gradient(90deg, var(--ivory-2), #f7f1de, var(--ivory-2)); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; } @keyframes shimmer { to { background-position: -200% 0; } }
.slots-empty { text-align: center; padding: 28px 12px; border: 2px dashed var(--line); border-radius: 14px; color: var(--ink-2); } .slots-empty i { font-size: 1.6rem; color: var(--gold); display: block; margin-bottom: 8px; } .slots-empty .btn { margin-top: 14px; }

/* ---- step 3: details ---- */
.bk-recap { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; margin-bottom: 20px; }
.bk-recap div small { display: block; font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); font-weight: 700; } .bk-recap div b { font-weight: 600; } .bk-recap .wide { grid-column: 1 / -1; }
.bkf { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } .bkf .full { grid-column: 1 / -1; }
.bkf label.f { display: block; margin-bottom: 16px; } .bkf label.f > span { display: block; font-weight: 700; font-size: .84rem; margin-bottom: 6px; color: #3c3520; } .bkf label.f > span em { font-style: normal; font-weight: 400; color: var(--ink-2); }
.bkf input[type=text], .bkf input[type=email], .bkf input[type=tel], .bkf textarea { width: 100%; padding: 13px 14px; font: inherit; font-size: 1rem; border: 1.5px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); min-height: 48px; }
.bkf textarea { min-height: 92px; resize: vertical; }
.bkf .bad input, .bkf .bad textarea { border-color: #b3261e; } .bkf .e { color: #b3261e; font-size: .8rem; margin-top: 4px; display: none; } .bkf .bad .e { display: block; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: .9rem; color: var(--ink-2); margin: 0 0 6px; cursor: pointer; } .consent input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--emerald); flex: none; } .consent a { color: var(--emerald); font-weight: 700; }
.bk-policy { font-size: .84rem; color: var(--ink-2); margin: 12px 0 0; display: flex; gap: 10px; } .bk-policy i { color: var(--gold); margin-top: .25em; }

/* ---- success + manage ---- */
.bk-done { text-align: center; padding: 6px 0 4px; }
.check { width: 92px; height: 92px; margin: 4px auto 14px; } .check circle { fill: none; stroke: var(--gold); stroke-width: 3; stroke-dasharray: 189; stroke-dashoffset: 189; animation: draw .8s ease forwards; } .check path { fill: none; stroke: var(--emerald); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 48; stroke-dashoffset: 48; animation: draw .5s .6s ease forwards; } @keyframes draw { to { stroke-dashoffset: 0; } }
.bk-done h3 { font: 600 clamp(1.9rem, 4vw, 2.5rem)/1.1 var(--serif); color: var(--emerald-deep, #0f3d26); } .bk-done > p { color: var(--ink-2); max-width: 30rem; margin: 8px auto 18px; }
.ref { display: inline-block; background: var(--paper); border: 1.5px dashed var(--gold); border-radius: 14px; padding: 10px 22px; margin-bottom: 18px; } .ref small { display: block; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); font-weight: 700; } .ref b { font: 700 1.6rem/1.2 var(--sans); letter-spacing: .12em; color: var(--emerald-deep, #0f3d26); }
.bk-card { text-align: left; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 6px 18px; max-width: 520px; margin: 0 auto 18px; }
.bk-card .r { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); } .bk-card .r:last-child { border: 0; } .bk-card .r i { color: var(--gold); width: 18px; text-align: center; margin-top: .3em; } .bk-card .r small { display: block; color: var(--ink-2); font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; }
.bk-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.btn.light { background: var(--paper); color: var(--ink); border: 1.5px solid var(--line); box-shadow: none; } .btn.light:hover { border-color: var(--emerald); background: #fff; }
.btn.danger { background: #fff; color: #b3261e; border: 1.5px solid #e3b9b5; box-shadow: none; } .btn.danger:hover { background: #fdf0ee; }
.status-pill { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 5px 14px; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 12px; }
.status-pill.confirmed { background: #cfe9d6; color: #14562f; } .status-pill.pending { background: #fbe9b0; color: #6f4d00; } .status-pill.cancelled, .status-pill.declined { background: #f3d6d2; color: #7a1812; } .status-pill.completed { background: #e4e1d5; color: #4a4530; }
.cancel-box { text-align: left; max-width: 520px; margin: 0 auto 16px; background: #fdf0ee; border: 1px solid #efb8b2; border-radius: 14px; padding: 16px; } .cancel-box textarea { width: 100%; margin: 8px 0 12px; padding: 12px; border: 1.5px solid var(--line); border-radius: 10px; font: inherit; min-height: 70px; }

/* ---- toast inside wizard ---- */
.bk-toast { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); background: #2b2412; color: #fdfacd; padding: 10px 18px; border-radius: 999px; font-size: .9rem; box-shadow: 0 10px 30px rgb(0 0 0 / .4); animation: bkFade .25s ease; z-index: 3; }

/* ---- phones: full-screen sheet ---- */
@media (max-width: 900px) {
  .bk[open] { place-items: stretch; }
  .bk-shell { width: 100%; height: 100dvh; grid-template-columns: 1fr; border-radius: 0; box-shadow: none; animation: bkUp .4s cubic-bezier(.2, .8, .2, 1); }
  @keyframes bkUp { from { transform: translateY(100%); } to { transform: none; } }
  .bk-side { display: none; }
  .bk-top { padding: calc(14px + env(safe-area-inset-top)) 16px 10px; background: var(--emerald); } .bk-top .bk-title small { color: #cfe3d6; } .bk-top .bk-title h2 { color: #FDFACD; font-size: 1.5rem; }
  .bk-top .bk-iconbtn { background: rgb(0 0 0 / .2); border-color: rgb(212 172 82 / .5); color: var(--gold-bright, #EBCE27); }
  .bk-progress { margin: 0; border-radius: 0; height: 4px; background: var(--emerald-deep, #0f3d26); }
  .bk-body { padding: 16px 16px 20px; } .bk-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); gap: 12px; box-shadow: 0 -8px 24px rgb(60 50 20 / .08); } .bk-foot .btn { min-width: 0; padding-inline: 22px; }
  .bk-time { grid-template-columns: 1fr; gap: 18px; }
  .bk-recap { grid-template-columns: 1fr; } .bkf { grid-template-columns: 1fr; }
  .bsvc { padding: 12px; } .svc-price { font-size: 1.05rem; }
  .bk-toast { bottom: 84px; }
}
@media (min-width: 901px) and (max-width: 1060px) { .bk-time { grid-template-columns: 1fr; } .cal { max-width: 380px; } }
@media (prefers-reduced-motion: reduce) { .bk-shell, .bk-body, .check circle, .check path, .skel { animation-duration: .01ms !important; } .check circle, .check path { stroke-dashoffset: 0; } }