html.booking-page {
  --espresso: var(--lv-dashboard-sidebar);
  --workspace: var(--lv-dashboard-workspace);
  --card: var(--lv-dashboard-surface);
  --card-deep: var(--lv-dashboard-surface-strong);
  --feature: var(--lv-dashboard-feature);
  --gold: var(--lv-dashboard-focus);
  --ink: var(--lv-dashboard-text);
  --muted: var(--lv-dashboard-text-muted);
  --line: var(--lv-dashboard-border);
  --line-strong: var(--lv-dashboard-border-strong);
  --on-dark: var(--lv-dashboard-text-on-dark);
  --shadow: var(--lv-dashboard-shadow);
  --radius: var(--lv-radius-bento);
  --radius-sm: var(--lv-radius-card);
  --ease: var(--lv-ease-standard);
  --booking-max: 1200px;
  --form-max: var(--lv-max-form);
}

html.booking-page,
body.booking-page {
  min-height: 100dvh;
  background: var(--workspace);
  color: var(--ink);
  font-family: var(--lv-font-ui);
}

body.booking-page {
  margin: 0;
  overflow-x: hidden;
  padding-bottom: calc(5.5rem + env(safe-area-inset-bottom));
}

@media (min-width: 1024px) {
  body.booking-page {
    padding-bottom: 0;
  }
}

@media (max-height: 650px) {
  body.booking-page {
    padding-bottom: 0;
  }
}

.booking-header {
  background: var(--espresso);
  color: var(--on-dark);
}

.booking-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--lv-space-3);
  max-width: var(--booking-max);
  margin: 0 auto;
  padding: var(--lv-space-4) var(--lv-gutter-mobile);
  min-height: 64px;
}

.booking-header__mark {
  width: 132px;
  height: auto;
}

.booking-header__nav {
  display: none;
  gap: var(--lv-space-6);
  justify-content: center;
}

.booking-header__nav a {
  color: color-mix(in srgb, var(--on-dark) 72%, transparent);
  text-decoration: none;
  font-size: var(--lv-text-nav);
  min-height: var(--lv-target-min);
  display: inline-flex;
  align-items: center;
}

.booking-header__nav a:hover,
.booking-header__nav a:focus-visible {
  color: var(--on-dark);
}

.booking-header__actions {
  display: flex;
  align-items: center;
  gap: var(--lv-space-2);
  justify-self: end;
}

.booking-lang {
  min-width: var(--lv-target-min);
  min-height: var(--lv-target-min);
  border: 1px solid color-mix(in srgb, var(--on-dark) 22%, transparent);
  border-radius: var(--lv-radius-pill);
  color: var(--on-dark);
  background: transparent;
  font-size: 12px;
  font-weight: var(--lv-weight-medium);
}

.booking-header__client {
  display: none;
  min-height: var(--lv-target-min);
  align-items: center;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--on-dark) 22%, transparent);
  border-radius: var(--lv-radius-pill);
  color: var(--on-dark);
  text-decoration: none;
  font-size: 12px;
  font-weight: var(--lv-weight-medium);
}

@media (min-width: 1024px) {
  .booking-header__inner {
    padding-inline: var(--lv-gutter-desktop);
  }

  .booking-header__nav,
  .booking-header__client {
    display: flex;
  }
}

.booking-layout {
  max-width: var(--booking-max);
  margin: 0 auto;
}

@media (min-width: 1024px) {
  .booking-layout {
    display: grid;
    grid-template-columns: minmax(280px, 36%) minmax(0, 1fr);
    min-height: calc(100dvh - 64px);
  }
}

.booking-rail {
  display: none;
  background: var(--feature);
  color: var(--on-dark);
  padding: var(--lv-space-10) var(--lv-space-8);
}

.booking-rail__index {
  margin: 0 0 var(--lv-space-4);
  font-size: 11px;
  font-weight: var(--lv-weight-medium);
  color: var(--lv-color-accent-champagne);
}

html[lang="en"] .booking-rail__index {
  letter-spacing: var(--lv-tracking-eyebrow);
  text-transform: uppercase;
}

.booking-rail h2 {
  margin: 0 0 var(--lv-space-4);
  font-family: var(--lv-font-editorial-en);
  font-weight: 500;
  font-size: clamp(1.75rem, 2.4vw, 2.25rem);
  line-height: var(--lv-leading-heading);
  color: var(--on-dark);
}

html[lang="fa"] .booking-rail h2 {
  font-family: var(--lv-font-editorial-fa);
}

.booking-rail p,
.booking-rail .booking-fact__value {
  color: color-mix(in srgb, var(--on-dark) 72%, transparent);
  font-size: 14px;
}

.booking-facts {
  display: grid;
  gap: var(--lv-space-4);
  margin: var(--lv-space-8) 0 0;
}

.booking-fact {
  padding-block: var(--lv-space-3);
  border-top: 1px solid color-mix(in srgb, var(--on-dark) 14%, transparent);
}

.booking-fact__label {
  display: block;
  margin-bottom: var(--lv-space-1);
  color: var(--lv-color-accent-champagne);
  font-size: 11px;
  font-weight: var(--lv-weight-medium);
}

html[lang="en"] .booking-fact__label {
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (min-width: 1024px) {
  .booking-rail {
    display: block;
  }
}

.booking-workspace {
  padding: var(--lv-space-6) var(--lv-gutter-mobile) var(--lv-space-8);
}

@media (min-width: 1024px) {
  .booking-workspace {
    padding: var(--lv-space-8) var(--lv-space-10) var(--lv-space-16);
  }
}

.booking-progress {
  margin-bottom: var(--lv-space-6);
}

.booking-progress__mobile {
  margin: 0 0 var(--lv-space-3);
  color: var(--muted);
  font-size: 13px;
}

.progress-track {
  display: none;
}

.booking-progress__list {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

html[dir="rtl"] {
  --lv-progress-dir: left;
}

.booking-progress__list li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--lv-space-2);
  min-height: var(--lv-target-min);
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

.booking-progress__label {
  display: block;
  max-width: 100%;
  line-height: 1.25;
}

@media (max-width: 480px) {
  .booking-progress__list li {
    font-size: 9px;
  }
}

.booking-progress__list li:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-block-start: 10px;
  inset-inline-start: calc(50% + 12px);
  width: calc(100% - 24px);
  height: 2px;
  background: var(--line);
  pointer-events: none;
}

.booking-progress__list li.is-done:not(:last-child)::after {
  background: var(--feature);
}

.booking-progress__list li.is-current:not(:last-child)::after {
  background: linear-gradient(to var(--lv-progress-dir, right), var(--gold), var(--line));
}

html[dir="rtl"] .booking-progress__list li.is-current:not(:last-child)::after {
  background: linear-gradient(to left, var(--gold), var(--line));
}

.booking-progress__mark {
  display: grid;
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--card);
  font-size: 10px;
  z-index: 1;
}

.booking-progress__list li.is-done .booking-progress__mark {
  color: var(--card);
  background: var(--feature);
  border-color: var(--feature);
}

.booking-progress__list li.is-current {
  color: var(--ink);
  font-weight: var(--lv-weight-medium);
}

.booking-progress__list li.is-current .booking-progress__mark {
  border: 5px solid var(--gold);
  background: var(--card);
  color: transparent;
}

.booking-shell {
  max-width: var(--form-max);
}

.booking-shell h1 {
  margin: 0 0 var(--lv-space-3);
  font-family: var(--lv-font-editorial-en);
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: var(--lv-leading-heading);
  color: var(--ink);
}

html[lang="fa"] .booking-shell h1 {
  font-family: var(--lv-font-editorial-fa);
}

.booking-shell h2 {
  margin: 0 0 var(--lv-space-3);
  font-family: var(--lv-font-ui);
  font-size: 19px;
  font-weight: var(--lv-weight-medium);
  color: var(--ink);
}

.booking-eyebrow {
  margin: 0 0 var(--lv-space-2);
  color: var(--muted);
  font-size: 11px;
  font-weight: var(--lv-weight-medium);
}

html[lang="en"] .booking-eyebrow {
  letter-spacing: var(--lv-tracking-eyebrow);
  text-transform: uppercase;
}

.booking-lede {
  max-width: 62ch;
  margin: 0 0 var(--lv-space-6);
  color: var(--muted);
  font-size: 15px;
}

.booking-step-body.is-enter {
  animation: booking-step-in var(--lv-duration-fast) var(--ease);
}

@keyframes booking-step-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .booking-step-body.is-enter {
    animation: none;
  }

  .slot-skeleton {
    animation: none;
  }

  .booking-cal__glass {
    backdrop-filter: none;
  }
}

.card {
  position: relative;
  min-width: 0;
  margin-bottom: var(--lv-space-4);
  padding: var(--lv-space-5);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

@media (min-width: 1024px) {
  .card {
    padding: var(--lv-space-6);
  }
}

.card--feature-lite {
  background: var(--card-deep);
}

.booking-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--lv-space-4);
}

.booking-field:last-child {
  margin-bottom: 0;
}

.booking-field > label,
.booking-field > legend,
.field-label {
  color: var(--muted);
  font-size: 11px;
}

.req {
  color: var(--ink);
}

.booking-field input,
.booking-field select,
.booking-field textarea,
.field {
  width: 100%;
  min-height: var(--lv-target-min);
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}

.booking-field textarea,
textarea.field {
  min-height: 96px;
  resize: vertical;
}

.booking-field input:focus,
.booking-field select:focus,
.booking-field textarea:focus,
.field:focus,
.otp-box:focus,
.option-card:focus-within,
.chip:focus-within,
.slot-btn:focus-visible,
.booking-cal__day:focus-visible,
.primary-button:focus-visible,
.quiet-button:focus-visible,
.booking-lang:focus-visible {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent);
}

.field-grid {
  display: grid;
  gap: var(--lv-space-4);
}

@media (min-width: 1024px) {
  .field-grid--2 {
    grid-template-columns: 1fr 1fr;
  }
}

.option-grid,
.choice-grid,
.priority-grid,
.slot-times {
  display: grid;
  gap: var(--lv-space-2);
}

@media (min-width: 640px) {
  .option-grid--2,
  .priority-grid,
  .slot-times {
    grid-template-columns: 1fr 1fr;
  }
}

.option-card,
.chip {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--lv-space-3);
  min-height: var(--lv-target-min);
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
}

.option-card input,
.chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.option-card__mark {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin-top: 2px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--card);
}

.option-card:has(input:checked),
.chip.is-active,
.chip:has(input:checked) {
  border-color: var(--line-strong);
  background: var(--card-deep);
  box-shadow: inset 0 0 0 1px var(--feature);
}

.option-card:has(input:checked) .option-card__mark {
  border: 5px solid var(--feature);
}

.chip {
  align-items: center;
  border-radius: var(--lv-radius-pill);
  font-size: 13px;
}

.chip:has(input:checked) {
  box-shadow: inset 0 -2px var(--gold);
}

.inspiration-chip {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: var(--lv-space-3);
  align-items: center;
}

.inspiration-chip__thumb {
  width: 64px;
  height: 64px;
  border-radius: var(--lv-radius-sm);
  background: var(--feature) center / cover no-repeat;
}

.booking-cal {
  display: grid;
  gap: var(--lv-space-4);
}

@media (min-width: 768px) {
  .booking-cal {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: start;
  }
}

.booking-cal__glass {
  padding: var(--lv-space-4);
  background: color-mix(in srgb, var(--card) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: var(--radius);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
}

.booking-cal__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lv-space-2);
  margin-bottom: var(--lv-space-3);
}

.booking-cal__nav h3,
.booking-cal__title {
  margin: 0;
  font-size: 14px;
  font-weight: var(--lv-weight-medium);
  text-align: center;
  line-height: 1.35;
  max-width: min(280px, 58vw);
}

.booking-cal__week,
.booking-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.booking-cal__week span {
  display: grid;
  min-height: 28px;
  place-items: center;
  color: var(--muted);
  font-size: 10px;
}

.booking-cal__day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: calc(var(--lv-target-min) + 6px);
  padding: 4px 2px;
  border: 1px solid transparent;
  border-radius: var(--lv-radius-sm);
  background: color-mix(in srgb, var(--workspace) 35%, transparent);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.booking-cal__day .cal-day__gregorian,
.booking-cal__day .cal-day__jalali {
  display: block;
}

.booking-cal__day .cal-day__gregorian:first-child,
.booking-cal__day .cal-day__jalali:first-child {
  font-weight: 600;
  line-height: 1.1;
  font-size: inherit;
  color: inherit;
}

.booking-cal__day .cal-day__gregorian:not(:first-child),
.booking-cal__day .cal-day__jalali:not(:first-child) {
  font-size: 10px;
  line-height: 1.1;
  color: var(--muted);
  font-weight: 400;
}

.booking-cal__gregorian {
  font-family: var(--lv-font-ui-en);
  font-variant-numeric: lining-nums tabular-nums;
}
.booking-cal__title [lang="en"] {
  font-family: var(--lv-font-ui-en);
  font-variant-numeric: lining-nums tabular-nums;
}

.booking-cal__jalali {
  font-variant-numeric: tabular-nums;
}

.booking-cal__day.is-selected .cal-day__gregorian:not(:first-child),
.booking-cal__day.is-selected .cal-day__jalali:not(:first-child) {
  color: inherit;
  opacity: 0.85;
}

.booking-cal__status {
  margin: 0 0 var(--lv-space-3);
  font-size: 12px;
  line-height: 1.45;
}

.booking-cal__day.is-muted {
  visibility: hidden;
}

.booking-cal__day:disabled {
  color: var(--muted);
  opacity: 0.4;
  cursor: not-allowed;
  background: transparent;
}

.booking-cal__day.is-available {
  border-color: var(--line);
  background: color-mix(in srgb, var(--card) 88%, transparent);
}

.booking-cal__day.is-selected {
  border-color: var(--feature);
  background: var(--card-deep);
  box-shadow: inset 0 0 0 1px var(--feature);
  font-weight: var(--lv-weight-medium);
}

.booking-cal__day.is-today:not(.is-selected) .cal-day__gregorian:first-child,
.booking-cal__day.is-today:not(.is-selected) .cal-day__jalali:first-child {
  display: grid;
  width: 1.6em;
  height: 1.6em;
  place-items: center;
  margin-inline: auto;
  border-radius: 50%;
  background: color-mix(in srgb, var(--feature) 35%, transparent);
  font-weight: 600;
}

.slot-btn {
  min-height: var(--lv-target-min);
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--lv-radius-pill);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.slot-btn.is-selected {
  border-color: var(--feature);
  background: var(--card-deep);
  box-shadow: inset 0 0 0 1px var(--feature);
  font-weight: var(--lv-weight-medium);
}

.slot-btn.is-selected::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-inline-end: 8px;
  border-radius: 50%;
  background: var(--feature);
}

.slot-skeleton {
  height: 48px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--card-deep) 70%, var(--workspace));
  background-image: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--on-dark) 18%, transparent),
    transparent
  );
  background-size: 200% 100%;
  animation: booking-skel 1.1s linear infinite;
}

@keyframes booking-skel {
  to {
    background-position: -200% 0;
  }
}

.otp-resend-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
  margin: 0.35rem 0 0;
}

.booking-field--otp {
  margin-top: var(--lv-space-8);
}

.otp-resend-timer {
  margin: 0;
  font-size: 0.92rem;
  white-space: nowrap;
}

.otp-row {
  display: flex;
  flex-direction: row;
  gap: var(--lv-space-2);
  justify-content: flex-start;
  direction: ltr;
  unicode-bidi: isolate;
}

.otp-box {
  width: 2.6rem;
  height: 56px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  text-align: center;
  font-size: 1.25rem;
  direction: ltr;
}

.ltr-iso {
  unicode-bidi: isolate;
  direction: ltr;
}

.status {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--lv-space-3);
  padding: 3px 9px;
  color: var(--ink);
  background: color-mix(in srgb, var(--card-deep) 80%, transparent);
  border: 1px solid var(--line-strong);
  border-radius: var(--lv-radius-pill);
  font-size: 11px;
  font-weight: var(--lv-weight-medium);
}

.status--success {
  color: var(--feature);
  background: color-mix(in srgb, var(--feature) 8%, var(--card));
  border-color: color-mix(in srgb, var(--feature) 32%, transparent);
}

.status--action {
  background: color-mix(in srgb, var(--gold) 16%, var(--card));
  border-color: color-mix(in srgb, var(--gold) 72%, transparent);
}

.status--blocked {
  background: color-mix(in srgb, var(--espresso) 8%, var(--card));
  border-color: color-mix(in srgb, var(--espresso) 50%, transparent);
  border-style: double;
}

.booking-page .form-errors {
  max-width: var(--form-max);
  margin-bottom: var(--lv-space-4);
  padding: var(--lv-space-4);
  color: var(--ink);
  background: var(--card-deep);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}

.booking-summary {
  margin: 0;
}

.booking-summary dt {
  font-size: 11px;
  color: var(--muted);
}

html[lang="en"] .booking-summary dt {
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.booking-summary dd {
  margin: 0 0 var(--lv-space-4);
  color: var(--ink);
}

.consent-row {
  display: flex;
  gap: var(--lv-space-3);
  align-items: flex-start;
  margin-bottom: var(--lv-space-3);
}

.consent-row input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  flex: 0 0 auto;
}

.primary-button,
.quiet-button {
  display: inline-flex;
  min-height: var(--lv-target-min);
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  border-radius: var(--lv-radius-pill);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: var(--lv-weight-medium);
  text-decoration: none;
}

.primary-button {
  color: var(--card);
  background: var(--feature);
  border: 1px solid var(--feature);
}

.primary-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.quiet-button {
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line-strong);
}

.booking-actions {
  display: flex;
  gap: var(--lv-space-2);
  max-width: var(--form-max);
  margin-top: var(--lv-space-6);
}

.booking-actions .primary-button {
  flex: 1;
}

.booking-actions[data-terminal="true"] {
  display: none;
}

@media (max-width: 1023px) {
  .booking-actions {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 20;
    max-width: none;
    margin: 0;
    padding: 0.75rem var(--lv-gutter-mobile) calc(0.75rem + env(safe-area-inset-bottom));
    background: var(--workspace);
    border-top: 1px solid var(--line);
  }

  .booking-shell {
    scroll-margin-bottom: 6rem;
  }
}

@media (max-height: 650px) {
  .booking-actions {
    position: static;
    padding: 0;
    border: 0;
    background: transparent;
  }
}