/* VAZIN-UI 1.0.0 — personal consultation, shared tokens and logical layout. */
.booking {
  --v-ui-primary: var(--creator-forest, #173d31);
  --v-ui-success: #276245;
  --v-ui-warning: #775515;
  --v-ui-danger: #a32d24;
  --booking-soft: #f0f4ee;
  --booking-border: #c6d0c7;
  --booking-focus: var(--creator-coral-dark, #a4412a);
  background: var(--creator-cream, #f7f5ef);
  border-block-start: 1px solid var(--v-ui-border);
}
.booking [hidden] { display: none !important; }
.booking-intro { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .75fr); align-items: center; gap: var(--v-ui-space-16); margin-block-end: var(--v-ui-space-8); }
.booking-lead { max-inline-size: 630px; margin-block: var(--v-ui-space-6) 0; color: var(--v-ui-muted); font-size: 17px; line-height: 1.95; }
.booking-price-card { position: relative; overflow: hidden; padding: var(--v-ui-space-8); border: 1px solid var(--v-ui-primary); border-radius: var(--v-ui-radius-xl); background: var(--v-ui-primary); color: #fff; }
.booking-price-kicker { display: block; font-size: 14px; font-weight: 600; }
.booking-price-card p { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--v-ui-space-3); margin-block: var(--v-ui-space-4) var(--v-ui-space-6); }
.booking-price-card p strong { font-size: clamp(40px, 4vw, 56px); line-height: 1.25; font-weight: 750; }
.booking-price-card p span { font-size: 15px; font-weight: 500; }
.booking-price-divider { block-size: 1px; background: #ffffff38; margin-block-end: var(--v-ui-space-4); }
.booking-price-card > span:last-of-type { display: block; font-size: 14px; line-height: 1.8; }
.booking-price-card > small { display: block; margin-block-start: var(--v-ui-space-3); color: #dce8dc; font-size: 12px; }
.booking-credit { margin-block: var(--v-ui-space-6); color: var(--v-ui-muted); font-size: 13px; }
.booking-credit a { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--booking-border); }
.booking-credit a:hover { color: var(--v-ui-primary); }

.consultation-guide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--v-ui-space-3); margin-block-end: var(--v-ui-space-8); }
.consultation-guide details { min-inline-size: 0; padding: var(--v-ui-space-4) var(--v-ui-space-6); border: 1px solid var(--v-ui-border); border-radius: var(--v-ui-radius-md); background: var(--v-ui-surface); box-shadow: none; }
.consultation-guide summary { display: flex; align-items: center; justify-content: space-between; gap: var(--v-ui-space-4); min-block-size: 44px; color: var(--v-ui-text); font-size: 14px; font-weight: 650; list-style: none; cursor: pointer; }
.consultation-guide summary::-webkit-details-marker { display: none; }
.consultation-guide summary::after { content: "+"; display: grid; flex: 0 0 24px; place-items: center; inline-size: 24px; block-size: 24px; color: var(--v-ui-primary); font-size: 22px; line-height: 1; font-weight: 400; transition: transform .18s ease; }
.consultation-guide details[open] summary::after { transform: rotate(45deg); }
.consultation-guide p { margin-block: var(--v-ui-space-3) var(--v-ui-space-2); color: var(--v-ui-muted); font-size: 14px; line-height: 1.9; }
.consultation-guide .text-link { font-size: 13px; }

.booking-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: start; gap: var(--v-ui-space-6); }
.booking-layout.has-reservation { grid-template-columns: minmax(0, 1fr); max-inline-size: 720px; margin-inline: auto; }
.booking-layout.has-reservation .booking-summary { display: none; }
.booking-picker { min-inline-size: 0; padding: var(--v-ui-space-8); border: 1px solid var(--v-ui-border); border-radius: var(--v-ui-radius-xl); background: var(--v-ui-surface); }
.booking-block { min-inline-size: 0; padding: 0; margin: 0; border: 0; }
.booking-block + .booking-block { margin-block-start: var(--v-ui-space-8); padding-block-start: var(--v-ui-space-8); border-block-start: 1px solid var(--v-ui-border); }
.booking-block legend { display: flex; align-items: center; gap: var(--v-ui-space-3); inline-size: 100%; padding: 0; margin-block-end: var(--v-ui-space-4); color: var(--v-ui-text); font-size: 17px; font-weight: 700; }
.booking-step { display: grid; flex: none; place-items: center; inline-size: 32px; block-size: 32px; border: 1px solid var(--booking-border); border-radius: 50%; background: var(--booking-soft); color: var(--v-ui-primary); font-size: 13px; font-weight: 650; }
.booking-duration-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--v-ui-space-3); }
.booking-duration-option, .booking-slot { position: relative; min-inline-size: 0; cursor: pointer; }
.booking-duration-option input, .booking-slot input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.booking-duration-option > span { display: flex; flex-direction: column; gap: var(--v-ui-space-2); block-size: 100%; min-block-size: 152px; padding: var(--v-ui-space-4); border: 1px solid var(--booking-border); border-radius: var(--v-ui-radius-md); background: var(--v-ui-surface); transition: border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.booking-duration-option strong { color: var(--v-ui-text); font-size: 20px; font-weight: 700; line-height: 1.55; }
.booking-duration-option strong b { display: block; color: var(--v-ui-muted); font-size: 12px; font-weight: 500; }
.booking-duration-option small { margin-block-start: auto; color: var(--v-ui-primary); font-size: 15px; font-weight: 700; }
.booking-duration-option em { color: var(--v-ui-muted); font-size: 12px; font-style: normal; line-height: 1.7; }
.booking-duration-option input:checked + span { border-color: var(--v-ui-primary); background: var(--booking-soft); box-shadow: inset 0 0 0 1px var(--v-ui-primary); }
.booking-duration-option:hover > span { border-color: var(--v-ui-primary); }
.booking-duration-option input:focus-visible + span, .booking-slot input:focus-visible + span { outline: 3px solid var(--booking-focus); outline-offset: 3px; }
.booking-duration-option input:disabled + span { opacity: .6; cursor: not-allowed; }

.booking-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--v-ui-space-2); margin-block-end: var(--v-ui-space-4); }
.booking-day { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--v-ui-space-1); min-inline-size: 0; min-block-size: 96px; padding: var(--v-ui-space-3) var(--v-ui-space-1); border: 1px solid var(--v-ui-border); border-radius: var(--v-ui-radius-md); background: var(--v-ui-surface); color: var(--v-ui-text); font-family: var(--v-ui-font); cursor: pointer; transition: border-color .18s ease, background .18s ease, color .18s ease; }
.booking-day span, .booking-day small { font-size: 12px; line-height: 1.5; }
.booking-day strong { font-size: 23px; font-weight: 700; line-height: 1.3; }
.booking-day:hover:enabled { border-color: var(--v-ui-primary); }
.booking-day[aria-pressed=true] { border-color: var(--v-ui-primary); background: var(--v-ui-primary); color: #fff; }
.booking-day:disabled { background: var(--v-ui-bg); color: var(--v-ui-muted); opacity: .6; cursor: not-allowed; }
.booking-date-row { display: flex; justify-content: space-between; align-items: center; gap: var(--v-ui-space-4); }
.booking-date-row label { color: var(--v-ui-muted); font-size: 13px; }
.booking input:not([type=radio]), .booking select, .booking textarea { inline-size: 100%; min-inline-size: 0; min-block-size: 52px; padding: var(--v-ui-space-3) var(--v-ui-space-4); border: 1px solid var(--booking-border); border-radius: var(--v-ui-radius-sm); background: var(--v-ui-surface); color: var(--v-ui-text); font-family: var(--v-ui-font); font-size: 16px; line-height: 1.5; transition: border-color .18s ease, box-shadow .18s ease; }
.booking input:not([type=radio]):hover, .booking select:hover { border-color: var(--v-ui-primary); }
.booking input::placeholder { color: var(--v-ui-muted); opacity: 1; font-size: 13px; }
.booking input[aria-invalid=true], .booking select[aria-invalid=true] { border-color: var(--v-ui-danger); background: #fff7f4; }
.booking-date-row input { max-inline-size: 200px; unicode-bidi: isolate; }
.booking-hint { display: block; color: var(--v-ui-muted); font-size: 12px; line-height: 1.9; margin-block: var(--v-ui-space-3) 0; }
.booking-slots-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--v-ui-space-3); margin-block-end: var(--v-ui-space-4); }
.booking-slots-heading p { margin: 0; font-size: 14px; font-weight: 600; }
.booking-zone { padding: var(--v-ui-space-1) var(--v-ui-space-2); border: 1px solid var(--v-ui-border); border-radius: var(--v-ui-radius-sm); color: var(--v-ui-muted); font-size: 12px; }
.booking-zone-picker { display: flex; align-items: center; gap: var(--v-ui-space-2); min-inline-size: 0; color: var(--v-ui-muted); font-size: 12px; }
.booking-zone-picker span { flex: none; }
.booking-zone-picker select { inline-size: auto; max-inline-size: 220px; min-block-size: 44px; padding: var(--v-ui-space-2) var(--v-ui-space-3); font-size: 14px; }
.booking-slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--v-ui-space-2); }
.booking-slots[aria-busy=true] { min-block-size: 128px; border: 1px solid var(--v-ui-border); border-radius: var(--v-ui-radius-md); background: linear-gradient(100deg, var(--booking-soft) 25%, var(--v-ui-surface) 50%, var(--booking-soft) 75%); background-size: 200% 100%; animation: booking-loading 1.6s ease-in-out infinite; }
.booking-slot > span { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--v-ui-space-1); min-block-size: 70px; block-size: 100%; padding: var(--v-ui-space-2); border: 1px solid var(--booking-border); border-radius: var(--v-ui-radius-sm); background: var(--v-ui-surface); color: var(--v-ui-text); font-size: 16px; font-weight: 650; text-align: center; transition: border-color .18s ease, background .18s ease; }
.booking-slot b { unicode-bidi: isolate; font-weight: 700; }
.booking-slot small { max-inline-size: 100%; font-size: 11px; font-weight: 400; line-height: 1.5; overflow-wrap: anywhere; }
.booking-slot:hover input:enabled + span { border-color: var(--v-ui-primary); background: var(--booking-soft); }
.booking-slot input:checked + span, .booking-slot:hover input:checked + span { border-color: var(--v-ui-primary); background: var(--v-ui-primary); color: #fff; }
.booking-slot input:disabled + span { border-color: var(--v-ui-border); background: var(--v-ui-bg); color: var(--v-ui-muted); opacity: .6; cursor: not-allowed; }
.booking-schedule-note { padding: var(--v-ui-space-3) var(--v-ui-space-4); margin-block-start: var(--v-ui-space-4); border-radius: var(--v-ui-radius-sm); background: var(--v-ui-bg); }
.booking-details-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--v-ui-space-4); }
.booking-details-grid > div { min-inline-size: 0; }
.booking-details-grid > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.booking-details-grid label { display: block; margin-block-end: var(--v-ui-space-2); color: var(--v-ui-text); font-size: 13px; font-weight: 650; }

.booking-summary-column { position: sticky; inset-block-start: 112px; min-inline-size: 0; }
.booking-summary { padding: var(--v-ui-space-8); border: 1px solid var(--booking-border); border-radius: var(--v-ui-radius-xl); background: var(--v-ui-surface); box-shadow: 0 16px 48px #173d3109; }
.booking-summary-kicker { color: var(--booking-focus); font-size: 13px; font-weight: 650; }
.booking-summary h3 { margin-block: var(--v-ui-space-2) var(--v-ui-space-6); font-size: 26px; font-weight: 700; line-height: 1.5; }
.booking-summary dl, .booking-reservation dl { margin: 0; }
.booking-summary dl > div, .booking-reservation dl > div { display: flex; justify-content: space-between; gap: var(--v-ui-space-4); padding-block: var(--v-ui-space-3); border-block-end: 1px solid var(--v-ui-border); font-size: 13px; }
.booking-summary dt, .booking-reservation dt { flex: none; color: var(--v-ui-muted); }
.booking-summary dd, .booking-reservation dd { min-inline-size: 0; margin: 0; text-align: end; font-weight: 600; overflow-wrap: anywhere; }
.booking-total { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--v-ui-space-2); margin-block: var(--v-ui-space-6); }
.booking-total > span { color: var(--v-ui-muted); font-size: 13px; }
.booking-total > strong { color: var(--v-ui-primary); font-size: 34px; line-height: 1.3; font-weight: 750; }
.booking-total small { font-size: 14px; font-weight: 500; }
.booking-wallet-label { display: flex; align-items: center; gap: var(--v-ui-space-2); margin-block: 0 var(--v-ui-space-4); color: var(--v-ui-text); font-size: 12px; line-height: 1.8; }
.booking-wallet-label span { display: grid; flex: none; place-items: center; inline-size: 28px; block-size: 28px; border-radius: var(--v-ui-radius-sm); background: var(--booking-soft); color: var(--v-ui-primary); font-size: 18px; }
.booking-checkout, .booking-secondary-button { display: flex; align-items: center; justify-content: center; gap: var(--v-ui-space-3); inline-size: 100%; min-block-size: 56px; padding: var(--v-ui-space-3) var(--v-ui-space-4); border: 1px solid transparent; border-radius: var(--v-ui-radius-md); background: var(--v-ui-primary); color: #fff; font-family: var(--v-ui-font); font-size: 14px; line-height: 1.7; font-weight: 650; text-align: center; text-decoration: none; cursor: pointer; transition: background .18s ease, box-shadow .18s ease; }
.booking-checkout { margin-block-start: var(--v-ui-space-4); }
.booking-checkout > span { font-size: 20px; }
.booking-checkout:hover { background: #102d24; box-shadow: 0 6px 20px #173d311a; }
.booking-checkout:disabled { background: #e7ebe5; color: #536256; box-shadow: none; cursor: not-allowed; }
.booking-secondary-button { margin-block-start: var(--v-ui-space-3); border-color: var(--booking-border); background: var(--v-ui-surface); color: var(--v-ui-primary); }
.booking-secondary-button:hover:enabled { border-color: var(--v-ui-primary); background: var(--booking-soft); }
.booking-secondary-button:disabled { opacity: .65; cursor: wait; }
.booking-text-button { display: inline-flex; align-items: center; gap: var(--v-ui-space-2); min-block-size: 44px; padding: var(--v-ui-space-2) 0; border: 0; background: transparent; color: var(--booking-focus); font-family: var(--v-ui-font); font-size: 13px; font-weight: 650; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.booking-feedback { padding: var(--v-ui-space-3) var(--v-ui-space-4); margin-block: var(--v-ui-space-3); border: 1px solid var(--booking-border); border-radius: var(--v-ui-radius-sm); background: var(--booking-soft); color: var(--v-ui-text); font-size: 13px; line-height: 1.9; overflow-wrap: anywhere; }
.booking-feedback-error { border-color: #e1bcb3; background: #fff4ef; color: var(--v-ui-danger); }
.booking-reservation { margin-block-start: var(--v-ui-space-4); padding: var(--v-ui-space-8); border: 1px solid var(--booking-border); border-radius: var(--v-ui-radius-xl); background: var(--v-ui-surface); box-shadow: var(--v-ui-shadow); }
.booking-reservation-icon { display: grid; place-items: center; inline-size: 56px; block-size: 56px; border-radius: 50%; background: var(--booking-soft); color: var(--v-ui-primary); font-size: 28px; }
.booking-reservation h3 { margin-block: var(--v-ui-space-4) var(--v-ui-space-2); color: var(--v-ui-text); font-size: 24px; font-weight: 700; line-height: 1.55; }
.booking-reservation p { color: var(--v-ui-muted); font-size: 14px; line-height: 1.9; }
.booking-reservation .booking-hold { padding: var(--v-ui-space-3) var(--v-ui-space-4); border-radius: var(--v-ui-radius-sm); background: #fbf3e4; color: var(--v-ui-warning); font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }
.booking-reservation dl { margin-block-end: var(--v-ui-space-4); }
.booking-reservation.is-confirmed { border-color: #8db39c; }
.booking-reservation.is-confirmed .booking-reservation-icon { background: #e4f1e6; color: var(--v-ui-success); }
.booking-reservation.is-expired { border-color: #dbcbaa; }
.booking-reservation.is-expired .booking-reservation-icon { background: #fbf3e4; color: var(--v-ui-warning); }
.booking input:focus-visible, .booking select:focus-visible, .booking textarea:focus-visible, .booking button:focus-visible, .booking a:focus-visible, .consultation-guide summary:focus-visible { outline: 3px solid var(--booking-focus); outline-offset: 3px; }
@keyframes booking-loading { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }

@media (max-width: 1100px) {
  .booking-intro { gap: var(--v-ui-space-8); }
  .booking-picker, .booking-summary { padding: var(--v-ui-space-6); }
  .booking-days { gap: var(--v-ui-space-1); }
  .booking-day span, .booking-day small { font-size: 11px; }
  .booking-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .booking-intro, .booking-layout { grid-template-columns: minmax(0, 1fr); gap: var(--v-ui-space-6); }
  .booking-price-card { max-inline-size: none; }
  .booking-summary-column { position: static; }
  .booking-days { gap: var(--v-ui-space-2); }
  .booking-day span, .booking-day small { font-size: 12px; }
  .booking-slots { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .consultation-guide { grid-template-columns: minmax(0, 1fr); }
  .consultation-guide details { padding: var(--v-ui-space-3) var(--v-ui-space-4); }
  .booking-price-card, .booking-picker, .booking-summary, .booking-reservation { padding: var(--v-ui-space-6); }
  .booking-lead { font-size: 16px; }
  .booking-block + .booking-block { margin-block-start: var(--v-ui-space-6); padding-block-start: var(--v-ui-space-6); }
  .booking-block legend { font-size: 16px; }
  .booking-duration-grid { gap: var(--v-ui-space-2); }
  .booking-duration-option > span { min-block-size: 156px; padding: var(--v-ui-space-3); }
  .booking-duration-option strong { font-size: 18px; }
  .booking-duration-option small { font-size: 14px; }
  .booking-duration-option strong b, .booking-duration-option em { font-size: 12px; }
  .booking-days { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(66px, 1fr); gap: var(--v-ui-space-2); padding: var(--v-ui-space-1); margin-inline: calc(-1 * var(--v-ui-space-1)); overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--booking-border) transparent; }
  .booking-day { min-block-size: 92px; scroll-snap-align: start; }
  .booking-date-row { flex-direction: column; align-items: stretch; gap: var(--v-ui-space-2); }
  .booking-date-row input { max-inline-size: none; }
  .booking-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .booking-slots-heading { align-items: flex-start; flex-direction: column; }
  .booking-zone-picker { inline-size: 100%; }
  .booking-zone-picker select { flex: 1; max-inline-size: none; font-size: 16px; }
  .booking-details-grid { grid-template-columns: minmax(0, 1fr); }
  .booking-summary h3 { font-size: 24px; }
  .booking-total > strong { font-size: 32px; }
  .booking-summary dl > div, .booking-reservation dl > div { font-size: 13px; }
}
@media (max-width: 359px) {
  .booking-duration-grid { grid-template-columns: minmax(0, 1fr); }
  .booking-duration-option > span { min-block-size: 140px; }
  .booking-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .booking *, .booking *::before, .booking *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}