/*
 * Booking V2 Design System -> "Universal Concierge" v6 Mobile
 */

:root {
  /* Core Surface Colors */
  --v6-surface: #f7f9fb;
  --v6-on-surface: #2a3439;
  --v6-surface-variant: #d9e4ea;
  --v6-on-surface-variant: #566166;

  /* Containers */
  --v6-surface-lowest: #ffffff;
  --v6-surface-low: #f0f4f7;
  --v6-surface-high: #e1e9ee;
  --v6-surface-highest: #d9e4ea;

  /* Primary (Action) Colors */
  --v6-primary: #5f5e5e;
  --v6-on-primary: #faf7f6;

  /* Outline */
  --v6-outline: #717c82;
  --v6-outline-variant: #a9b4b9;

  /* Tertiary / Secondary */
  --v6-tertiary-container: #d0ecff;
  --v6-on-tertiary-container: #3e5868;
  --v6-tertiary: #486272;
}

/* Base layout */
body.v6-layout {
  background-color: var(--v6-surface);
  color: var(--v6-on-surface);
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
}

body.v6-layout * {
  border-color: var(--v6-outline-variant);
}

/* Utility Classes */
.bg-v6-surface { background-color: var(--v6-surface); }
.text-v6-on-surface { color: var(--v6-on-surface); }

.bg-v6-surface-lowest { background-color: var(--v6-surface-lowest); }
.bg-v6-surface-low { background-color: var(--v6-surface-low); }
.bg-v6-surface-high { background-color: var(--v6-surface-high); }
.bg-v6-surface-highest { background-color: var(--v6-surface-highest); }

.bg-v6-primary { background-color: var(--v6-primary); }
.text-v6-primary { color: var(--v6-primary); }
.text-v6-on-primary { color: var(--v6-on-primary); }

.text-v6-on-surface-variant { color: var(--v6-on-surface-variant); }
.border-v6-primary { border-color: var(--v6-primary); }
.border-v6-outline { border-color: var(--v6-outline); }
.border-v6-outline-variant { border-color: var(--v6-outline-variant); }

/* Material Symbols */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Service/Specialist/TimeSlot Cards */
body.v6-layout .service-card,
body.v6-layout .specialist-card {
  background-color: var(--v6-surface-low);
  border: 2px solid var(--v6-outline-variant);
}

body.v6-layout .service-card:hover,
body.v6-layout .specialist-card:hover {
  background-color: var(--v6-surface-high);
}

body.v6-layout .service-card.selected,
body.v6-layout .specialist-card.selected {
  background-color: var(--v6-surface-high);
  border-color: var(--v6-primary);
}

body.v6-layout .service-card .check-icon,
body.v6-layout .specialist-card .check-icon {
  color: var(--v6-primary);
}

/* Time slot pills */
body.v6-layout .time-slot {
  background-color: var(--v6-surface-low);
  border: 2px solid var(--v6-outline-variant);
}

body.v6-layout .time-slot:hover {
  background-color: var(--v6-surface-high);
}

body.v6-layout .time-slot.border-v6-primary {
  background-color: var(--v6-surface-high);
  border-color: var(--v6-primary);
}

/* Form inputs focus state */
body.v6-layout input:focus,
body.v6-layout textarea:focus,
body.v6-layout select:focus {
  border-color: var(--v6-primary) !important;
  box-shadow: 0 0 0 1px var(--v6-primary);
  outline: none;
}

/* Form input backgrounds */
body.v6-layout input,
body.v6-layout textarea,
body.v6-layout select {
  background-color: var(--v6-surface-low);
  border-color: var(--v6-outline-variant);
  color: var(--v6-on-surface);
}

/* Checkbox custom styling */
body.v6-layout input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--v6-outline-variant);
  border-radius: 4px;
  background-color: var(--v6-surface-low);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}

body.v6-layout input[type="checkbox"]:checked {
  background-color: var(--v6-surface-high);
  border-color: var(--v6-primary);
}

body.v6-layout input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid var(--v6-on-surface);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Footer/Bottom bar */
body.v6-layout footer,
body.v6-layout .fixed.bottom-0 {
  background-color: var(--v6-surface-lowest);
}

/* Flatpickr Calendar Styling */
.v6-theme {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: 100% !important;
}
.v6-theme .flatpickr-month {
  color: var(--v6-on-surface);
  fill: var(--v6-on-surface-variant);
}
.v6-theme .flatpickr-weekday {
  color: rgba(86, 97, 102, 0.6);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.v6-theme .flatpickr-day {
  color: var(--v6-on-surface);
  border-radius: 0.5rem;
  font-weight: 500;
}
.v6-theme .flatpickr-day.hover {
  background-color: var(--v6-surface-high);
}
.v6-theme .flatpickr-day.selected {
  background-color: var(--v6-primary);
  color: var(--v6-on-primary);
  border-color: transparent;
  font-weight: 700;
}
.v6-theme .flatpickr-day.flatpickr-disabled {
  color: var(--v6-outline);
  opacity: 0.5;
}
.v6-theme .flatpickr-prev-month,
.v6-theme .flatpickr-next-month {
  color: var(--v6-on-surface);
  fill: var(--v6-on-surface);
}
.v6-theme .flatpickr-prev-month:hover,
.v6-theme .flatpickr-next-month:hover {
  color: var(--v6-primary);
  fill: var(--v6-primary);
}
.v6-theme .flatpickr-monthDropdown-months,
.v6-theme .flatpickr-current-month input.cur-year {
  color: var(--v6-on-surface);
  font-weight: 600;
}

/* Hide utilities */
@media (max-width: 640px) {
  .hide-on-small { display: none; }
}
@media (max-width: 1023px) {
  .hide-on-medium { display: none; }
}