/* Cream + Blue theme — scoped to the public booking document. */
:root {
  --primary: #2563EB;
  --primary-dark: #1D4ED8;
  --primary-light: #DBEAFE;
  --deep: #1F2937;
  --text-primary: #1F2937;
  --text-secondary: #7C756B;
  --text-muted: #7C756B;
  --border: #E5DED2;
  --background: #F7F3EA;
  --bg: #F7F3EA;
  --surface: #FFFDF8;
  --white: #FFFDF8;
  --soft: #DBEAFE;
  --shadow-soft: 0 2px 12px rgba(31, 41, 55, 0.045);
  --shadow: 0 3px 18px rgba(31, 41, 55, 0.055);
}

html,
body {
  background: #F7F3EA;
  color: #1F2937;
}

::selection { background: #DBEAFE; }
*:focus-visible { outline-color: rgba(37, 99, 235, 0.32); }

.public-nav {
  background: rgba(255, 253, 248, 0.88);
  border-bottom-color: #E5DED2;
}
.brand-logo { background: #2563EB; box-shadow: 0 5px 14px rgba(37, 99, 235, 0.14); }

.card,
.choice-card,
.service-card,
.time-slot,
.calendar-dialog,
.date-state {
  background: #FFFDF8;
  border-color: #E5DED2;
}
.card { box-shadow: 0 3px 18px rgba(31, 41, 55, 0.055); }

.btn-primary {
  background: #2563EB;
  box-shadow: 0 5px 14px rgba(37, 99, 235, 0.16);
}
.btn-primary:hover:not(:disabled) { background: #1D4ED8; }
.btn-secondary,
.badge-info { background: #DBEAFE; color: #1D4ED8; }
.btn-secondary:hover:not(:disabled) { background: #DBEAFE; }
.btn-ghost,
.icon-btn,
.calendar-close {
  background: #FFFDF8;
  border-color: #E5DED2;
}
.btn-ghost:hover:not(:disabled),
.icon-btn:hover:not(:disabled),
.calendar-close:hover:not(:disabled) {
  background: #FFFDF8;
  border-color: #2563EB;
}

.step-dot { color: #7C756B; }
.step-dot:not(:last-child)::after { background: #E5DED2; }
.step-indicator { background: #FFFDF8; border-color: #E5DED2; }
.step-dot.active,
.step-dot.done { color: #2563EB; }
.step-dot.active .step-indicator,
.step-dot.done .step-indicator { background: #2563EB; border-color: #2563EB; }
.step-dot.active .step-indicator { box-shadow: 0 0 0 4px #DBEAFE; }
.step-dot.done:not(:last-child)::after { background: #2563EB; }

.calendar-trigger,
.choice-card .date-status,
.calendar-head span,
.next-step-note > span { color: #2563EB; }
.calendar-trigger:hover,
.calendar-day:hover:not(:disabled) { background: #DBEAFE; }
.choice-card:hover:not(:disabled),
.service-card:hover,
.time-slot:hover:not(:disabled) { border-color: #2563EB; }
.choice-card.selected,
.service-card.selected {
  background: #DBEAFE;
  border-color: #2563EB;
  box-shadow: 0 0 0 1px #2563EB, 0 8px 20px rgba(37, 99, 235, 0.09);
}
.calendar-day.selected {
  background: #DBEAFE;
  color: #2563EB;
  border-color: #2563EB;
}
.time-slot.selected { background: #2563EB; border-color: #2563EB; }

.choice-card .today-badge { background: #DBEAFE; color: #1D4ED8; }
.choice-card.unavailable:disabled,
.calendar-day:disabled,
.mobile-booking-bar .btn-primary:disabled {
  background: #E8E4DD;
  border-color: #E5DED2;
  color: #7C756B;
}
.next-step-note,
.success-details { background: #EFE7D8; }
.next-step-note > span { background: #FFFDF8; }

.input,
.select,
.textarea {
  background: #FFFDF8;
  border-color: #E5DED2;
  color: #1F2937;
}
.input:hover,
.select:hover,
.textarea:hover { border-color: #2563EB; }
.input:focus,
.select:focus,
.textarea:focus {
  background: #FFFDF8;
  border-color: #2563EB;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

.upload-box { background: #EFE7D8; border-color: #2563EB; }
.bank-card { background: #2563EB; box-shadow: 0 14px 30px rgba(37, 99, 235, 0.18); }
.bank-card::after { opacity: 0.14; }
.mobile-booking-bar {
  background: rgba(255, 253, 248, 0.9);
  border-top-color: #E5DED2;
}
.mini-footer { border-top-color: #E5DED2; }
.calendar-handle { background: #E5DED2; }

/* Payment controls: clear hierarchy with comfortable touch targets. */
#copy-card {
  min-height: 48px;
  padding-inline: 14px;
  border-radius: 14px;
  background: #DBEAFE;
  color: #2563EB;
  box-shadow: none;
  font-size: 13px;
  font-weight: 750;
  transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}
#copy-card::before { content: "⧉"; font-size: 17px; line-height: 1; }
#copy-card:hover:not(:disabled) { background: #DBEAFE; color: #1D4ED8; }
#copy-card:active:not(:disabled) { transform: scale(0.97); }
#copy-card:focus-visible { outline: 3px solid rgba(37, 99, 235, 0.32); outline-offset: 3px; }
#copy-card.is-copied::before { content: "✓"; }

.booking-controls { gap: 12px; }
.booking-controls .btn {
  min-height: 48px;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
}
.booking-controls #prev-btn {
  min-width: 132px;
  background: transparent;
  border-color: #E5DED2;
  color: #7C756B;
  box-shadow: none;
}
.booking-controls #prev-btn::before { content: "→"; font-size: 18px; font-weight: 400; }
.booking-controls #prev-btn:hover:not(:disabled) { border-color: #2563EB; color: #2563EB; }
.booking-controls #prev-btn:active:not(:disabled) { transform: scale(0.97); }
.booking-controls #next-btn {
  min-width: 55%;
  min-height: 52px;
  border-radius: 16px;
  background: #2563EB;
  color: #FFFDF8;
  font-weight: 800;
  box-shadow: 0 3px 10px rgba(37, 99, 235, 0.13);
}
.booking-controls #next-btn:hover:not(:disabled) { background: #1D4ED8; }
.booking-controls #next-btn:active:not(:disabled) { transform: scale(0.98); }
.booking-controls #next-btn:focus-visible,
.booking-controls #prev-btn:focus-visible,
#mobile-next:focus-visible,
#mobile-prev:focus-visible { outline: 3px solid rgba(37, 99, 235, 0.32); outline-offset: 3px; }
.booking-controls #next-btn:disabled,
#mobile-next:disabled {
  background: #E8E4DD;
  border-color: #E8E4DD;
  color: #9A958C;
  box-shadow: none;
  opacity: 1;
}

@media (max-width: 820px) {
  .mobile-booking-bar { gap: 12px; }
  #mobile-next {
    min-height: 52px;
    border-radius: 16px;
    background: #2563EB;
    color: #FFFDF8;
    font-weight: 800;
    box-shadow: 0 3px 10px rgba(37, 99, 235, 0.13);
    transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
  }
  #mobile-next:hover:not(:disabled) { background: #1D4ED8; }
  #mobile-next:active:not(:disabled) { transform: scale(0.98); }
  #mobile-prev {
    min-height: 48px;
    background: transparent;
    border-color: #E5DED2;
    color: #7C756B;
    box-shadow: none;
    transition: border-color 150ms ease, color 150ms ease, transform 150ms ease;
  }
  #mobile-prev:hover:not(:disabled) { border-color: #2563EB; color: #2563EB; }
  #mobile-prev:active:not(:disabled) { transform: scale(0.94); }
}