.booking-customer {
  --paper:#f7f4ee;
  --panel:#fffdf9;
  --ink:#302720;
  --muted:#635348;
  --line:#ded0c2;
  --wash:#f0e4d8;
  --accent:#76533f;
  --flow-coffee:#4c3529;
  --flow-radius:14px;
}
.booking-customer .frame {width:min(calc(100% - 64px),1336px);margin:clamp(20px,3.4vw,48px) auto;min-height:0}
.booking-customer .footer {width:min(calc(100% - 64px),1336px);margin-top:22px}
.booking-customer:has(.booking-loading) {
  display:flex;flex-direction:column;min-height:100vh;min-height:100svh;
}
.booking-customer .frame:has(> .booking-loading) {flex:1 0 auto}
.booking-loading {
  display:grid;place-items:center;
  min-height:clamp(180px,48vh,420px);min-height:clamp(180px,48svh,420px);
  padding:24px;border:1px solid var(--line);border-radius:var(--flow-radius);
  background:var(--panel);box-shadow:0 18px 44px #4c35290e;
}
.booking-loading p {display:flex;align-items:center;gap:12px;color:var(--accent);font-weight:600}
.booking-loading p::before {
  content:"";flex:0 0 auto;width:1.1em;height:1.1em;border:2px solid var(--line);
  border-top-color:var(--accent);border-radius:50%;animation:booking-load-spin .9s linear infinite;
}
@keyframes booking-load-spin {to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce) {.booking-loading p::before{animation:none}}
.flow-layout {
  display:grid;grid-template-columns:minmax(236px,1fr) minmax(0,2.85fr);min-height:620px;
  border:1px solid var(--line);border-radius:var(--flow-radius);background:var(--panel);
  box-shadow:0 18px 44px #4c35290e;overflow:clip;
}
.flow-sidebar {
  display:flex;flex-direction:column;align-items:flex-start;gap:26px;min-width:0;
  padding:clamp(22px,3.2vw,47px) clamp(18px,2.9vw,37px) 23px;
  background:linear-gradient(150deg,#694d3c,#453228 80%);color:#fff9f0;
}
.flow-sidebar .eyebrow {color:#efd0b9}
.flow-intro h2 {font-size:clamp(32px,3.35vw,52px);line-height:1;letter-spacing:-.027em;margin:11px 0 12px}
.flow-intro-copy {color:#f6e3d3;font-size:13px;line-height:1.55;max-width:20ch}
.flow-aside-summary {display:grid;gap:12px;width:100%;padding-top:22px;border-top:1px solid #e4c7ad55}
.flow-aside-service,.flow-aside-person,.flow-selected-person {display:flex;gap:9px;align-items:center;min-width:0}
.flow-aside-service img {width:49px;height:49px;border-radius:7px;flex:none}
.flow-aside-person,.flow-selected-person {--staff-avatar-size:49px}
.flow-aside-service strong,.flow-aside-person strong {display:block;font-size:13px;line-height:1.25}
.flow-sidebar small {color:#f2dcca;display:block;font-size:11px;margin-top:3px}
.flow-aside-date {display:flex;gap:7px;align-items:flex-start;font-size:12px;color:#f6e3d3}
.flow-legal {display:grid;align-self:center;justify-items:center;grid-template-columns:max-content max-content;gap:9px 18px;margin-top:auto;padding-top:10px;color:#f6e3d3;font-size:12px}
.flow-legal a {outline-color:#fff9f0}
.flow-sidebar svg {flex:none;color:#edcdb3}
.flow-content {display:flex;flex-direction:column;align-items:stretch;min-width:0;padding:clamp(20px,3.3vw,42px);gap:15px}
.flow-content .compact {gap:5px}
.flow-content h1 {font-size:clamp(35px,4.4vw,65px);letter-spacing:-.035em}
.flow-content h1:focus {outline:none}
.flow-content header .muted {max-width:60ch}
.flow-progress {display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);align-items:center;gap:4px;list-style:none;margin:0 0 7px;padding:0 0 15px;border-bottom:1px solid var(--line)}
.flow-progress li {display:flex;align-items:center;justify-content:center;text-align:center;gap:6px;min-width:0;color:var(--muted);font-size:12px;font-weight:600}
.flow-progress b {display:grid;place-items:center;width:25px;height:25px;flex:none;border:1px solid var(--line);border-radius:50%;font-size:11px}
.flow-progress [aria-current] {color:var(--ink);font-weight:700}
.flow-progress [aria-current] b {background:var(--flow-coffee);border-color:var(--flow-coffee);color:#fff}
.flow-progress .done b {background:var(--wash);color:var(--accent)}
.flow-progress b svg {width:13px;height:13px}
.flow-layout .btn.primary,.flow-calendar .btn.primary {color:#fff;background:var(--flow-coffee);border-color:var(--flow-coffee)}
.flow-layout .btn.primary:hover,.flow-calendar .btn.primary:hover {background:#674937;border-color:#674937}
.flow-categories {display:flex;flex-wrap:wrap;gap:6px}
.flow-categories .btn {border-radius:30px;min-height:37px;padding:7px 13px;font-size:12px}
.flow-categories [aria-pressed=true] {background:var(--wash);border-color:#9b725b;color:#4f3425}
.flow-services,.flow-team {display:grid;gap:7px}
.flow-service,.flow-team .person {
  display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:9px;align-items:center;
  width:100%;min-width:0;min-height:62px;padding:6px 9px 6px 6px;text-align:left;
  background:var(--panel);border:1px solid var(--line);border-radius:8px;
}
.flow-service img {width:49px;height:49px;border-radius:5px}
.flow-service strong,.flow-team .person strong {display:block;font-size:13px;line-height:1.24}
.flow-service small,.flow-team .person small {display:block;margin-top:3px;font-size:11px;line-height:1.3}
.flow-service .flow-price {white-space:nowrap;font-size:12px}
.flow-service:hover,.flow-service[aria-pressed=true],.flow-team .person[aria-pressed=true] {background:var(--wash);border-color:#9b725b}
.flow-radio {width:17px;height:17px;display:grid;place-items:center;border:1px solid #bda691;border-radius:50%}
.flow-radio svg {display:none;width:12px;height:12px}
[aria-pressed=true]>.flow-radio {color:#fff;background:#694735;border-color:#694735}
[aria-pressed=true]>.flow-radio svg {display:block}
.flow-team {grid-template-columns:repeat(2,minmax(0,1fr))}
.flow-team .person {grid-template-columns:auto minmax(0,1fr) auto;padding:8px}
.flow-team .person {--staff-avatar-size:46px}
.flow-selected-person {align-self:flex-start;padding:4px 9px 4px 4px;border-radius:7px;background:var(--wash);font-size:13px}
.flow-selected-person small {display:none}
.flow-selected-person {--staff-avatar-size:27px}
.flow-date-section {display:grid;gap:7px;min-width:0}
.flow-week-nav {display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:7px;text-align:center}
.flow-week-nav .btn {padding:3px;font-size:22px;line-height:1}
.flow-week-nav strong {font-size:13px}
.flow-days {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;touch-action:pan-y pinch-zoom}
.flow-days .chip {display:grid;justify-items:center;gap:0;padding:6px 4px;min-height:65px}
.flow-days .chip:disabled {pointer-events:none}
.flow-days .chip strong {font-size:22px}
.flow-days .chip small {font-size:11px}
#flow-week-status:empty {display:none}
.flow-times {grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.flow-times .chip {min-height:42px;padding:5px;white-space:nowrap}
.flow-days [aria-pressed=true],.flow-times [aria-pressed=true],.flow-month [aria-pressed=true] {
  background:#6b4936;color:#fff;border-color:#6b4936;
}
.flow-days [aria-pressed=true] small {color:#fff4e7}
.flow-time-day {font-size:12px;margin-bottom:5px}
.flow-back.btn {align-self:flex-start;justify-self:start;background:transparent;border-color:transparent;padding-inline:3px;color:#684936}
.flow-back.btn:hover {text-decoration:underline;text-underline-offset:4px}
.flow-actions {
  margin-top:auto;padding-top:13px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.flow-actions .primary {margin-inline-start:auto}
.flow-selection {min-width:0;overflow-wrap:anywhere;font-size:13px;color:#684936}
.flow-contact {gap:12px}
.flow-contact .field {gap:4px}
.flow-contact .error:empty {display:none}
.flow-review,.flow-confirmed .flow-summary {background:var(--wash);border:1px solid #dfc8b6;border-radius:8px;padding:12px}
.flow-review h3 {display:flex;align-items:center;gap:6px;font-size:12px;color:#684936;margin-bottom:6px}
.flow-summary {display:flex;justify-content:space-between;gap:10px;font-size:15px}
.flow-summary>strong {white-space:nowrap}
.flow-summary small {display:block;font-size:12px}
.flow-confirmed {justify-content:center;align-items:center;text-align:center}
.flow-confirmed .flow-summary {width:min(100%,420px);min-height:86px;align-items:center;text-align:left}
.flow-confirmed .flow-summary > div:first-child {display:grid;gap:2px;min-width:0;line-height:1.4}
.flow-summary-side {display:flex;flex-direction:column;align-items:center;gap:5px;line-height:19px;white-space:nowrap;--staff-avatar-size:36px}
.flow-content.flow-confirmed {gap:22px;padding-block:26px}
.flow-confirmed > .compact {gap:9px}
.flow-confirmed > .compact > .muted {margin-top:3px;line-height:1.55;text-wrap:balance}
.flow-confirm-actions {display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.flow-seal {display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--wash);color:#674937}
.flow-seal svg {width:25px;height:25px}
.flow-calendar {width:min(100% - 24px,460px)}
.flow-calendar .dialog-head {align-items:center;margin-bottom:14px}
.flow-month-nav {display:flex;align-items:center;justify-content:space-between;gap:8px;border-block:1px solid var(--line);padding:7px 0}
.flow-month-nav .btn {padding:4px 10px}
.flow-month {display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin-top:8px}
.flow-month>span {font-size:11px;text-align:center;color:var(--muted)}
.flow-month .btn {padding:3px;min-height:40px}
.flow-month .btn:disabled {border-color:transparent;background:transparent}
.flow-month .btn:not(:disabled):not([aria-pressed=true]) {background:var(--wash)}
.flow-calendar-status {font-size:12px;margin:12px 0}
.flow-calendar #accept-date {width:100%}
@media (min-width:761px) {
  .booking-customer:has(.flow-legal) .footer {display:none}
}
@media (min-width:761px) and (max-height:880px) {
  .booking-customer .frame {margin-block:16px}
  .flow-layout {min-height:min(600px,calc(100svh - 144px))}
  .flow-content,.flow-sidebar {padding-block:20px;gap:10px}
  .flow-content h1 {font-size:clamp(34px,4vw,54px)}
  .flow-progress {margin-bottom:0;padding-bottom:8px}
  .flow-aside-summary {padding-top:12px}
  .flow-service {min-height:52px}
  .flow-service img,.flow-aside-service img {width:42px;height:42px}
  .flow-aside-person {--staff-avatar-size:42px}
}
@media (max-width:760px) {
  .booking-customer .frame,.booking-customer .footer {width:calc(100% - 24px);margin-top:12px}
  .flow-layout {display:flex;flex-direction:column;min-height:0}
  .flow-sidebar {display:grid;align-items:start;gap:9px;padding:11px 13px}
  .flow-intro h2 {font-size:21px;margin:0;letter-spacing:-.025em}
  .flow-intro h2 br,.flow-sidebar .eyebrow,.flow-intro-copy,.flow-aside-person,.flow-legal,.flow-aside-date {display:none}
  .flow-aside-summary {gap:0;padding:0;border:0}
  .flow-aside-service {gap:8px}
  .flow-aside-service img {width:32px;height:32px}
  .flow-aside-service strong {font-size:12px}
  .flow-aside-service small {font-size:11px}
  .flow-sidebar .flow-service-detail {display:none}
  .flow-content {padding:13px 12px;gap:12px;min-height:min(640px,calc(100svh - 145px))}
  .flow-progress {margin-bottom:0;padding-bottom:9px}
  .flow-progress li {font-size:10px;gap:4px}
  .flow-progress b {width:19px;height:19px;font-size:9px}
  .flow-content .compact .muted {font-size:13px}
  .flow-categories {gap:5px}
  .flow-categories .btn {padding-inline:8px;font-size:11px}
  .flow-team {grid-template-columns:minmax(0,1fr)}
  .flow-contact .fields {grid-template-columns:minmax(0,1fr);gap:10px}
  .flow-actions {position:sticky;bottom:0;background:var(--panel);padding-bottom:max(4px,env(safe-area-inset-bottom));z-index:1}
  .flow-contact .flow-actions {position:static}
  .flow-actions .btn {padding-inline:8px;font-size:12px}
  .flow-calendar {margin:auto auto max(10px,env(safe-area-inset-bottom));padding:13px}
}
@media (max-width:480px) {
  .flow-progress:has(li:nth-child(4)) li {flex-direction:column;line-height:1.2}
}
@media (max-width:360px) {
  .flow-progress li {flex-direction:column;line-height:1.2}
  .flow-service {grid-template-columns:34px minmax(0,1fr) auto auto;gap:6px}
  .flow-service img {width:34px;height:40px}
  .flow-service strong {font-size:12px}
  .flow-service .flow-price {font-size:11px}
  .flow-radio {width:14px;height:14px}
  .flow-days,.flow-times {gap:5px}
}


.flow-service-choice .flow-service {width:100%;height:100%}
.flow-service-choice:has(.flow-selected-detail) .flow-service {height:auto;min-height:100%}
.flow-service .flow-card-detail {color:var(--muted);overflow-wrap:anywhere}
.flow-service-detail {padding-top:9px;border-top:1px solid #fff3;font-size:12px}
.flow-service-detail small,.flow-selected-detail p {white-space:pre-line;overflow-wrap:anywhere}
.flow-selected-detail {display:none}
@media (max-width:760px) {
  .flow-service-choice:has(.flow-selected-detail) .flow-service {min-height:0}
  .flow-selected-detail {display:block;margin:0 5px;padding:8px 12px;background:#f0e7dc;border-radius:0 0 6px 6px;font-size:12px}
  .flow-selected-detail p {margin:3px 0 0}
}