/* Custom CSS variables (for reference, colors are in Tailwind config) */
:root {
  --white: #ffffff;
  --black: #000000;
  --gray: #f9f9f9;
  --gray-dark: #333333;
  --background: #ffffff;
  --foreground: #000000;
  --font-outfit: "Inter", sans-serif;
  --font-brygada-1918: "Brygada 1918", serif;
  --color-primary: #DBA958;
  --color-secondary: #28382E;
  --color-primary-dark: #C5913C;
  --color-secondary-dark: #151B12;
}

/* Custom utility classes not in Tailwind */
.glass-background {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 15px;
}

.section-background {
  background: linear-gradient(90deg, #28382E 0%, #173120 100%);
}

/* Button Component Styles */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 400;
  border-radius: 15px;
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
  text-decoration: none;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Button Variants */
.btn-primary {
  background: var(--color-primary);
  color: black;
}

.btn-primary:hover:not(:disabled) {
  background: var(--color-primary-dark);
}

.btn-secondary {
  background-color: var(--color-secondary);
  color: white;
}

.btn-secondary:hover:not(:disabled) {
  background-color: var(--color-secondary-dark);
}

.btn-outline {
  background-color: transparent;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
}

.btn-outline:hover:not(:disabled) {
  background-color: var(--color-primary);
  color: #111827;
  transform: translateY(-2px);
}

.btn-outline-light {
  background-color: transparent;
  border: 2px solid white;
  color: white;
}

.btn-outline-light:hover:not(:disabled) {
  background-color: white;
  color: var(--color-secondary);
}

.btn-outline-secondary-dark {
  background-color: transparent;
  border: 2px solid var(--color-secondary-dark);
  color: var(--color-secondary-dark);
}

.btn-outline-secondary-dark:hover:not(:disabled) {
  background-color: var(--color-secondary-dark);
  color: white;
}

.btn-ghost {
  background-color: transparent;
  color: var(--color-primary);
}

.btn-ghost:hover:not(:disabled) {
  background-color: rgba(219, 169, 88, 0.1);
}

/* Button Sizes */
.btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}

.btn-md {
  padding: 11px 28px;
  font-size: 1rem;
}

.btn-lg {
  padding: 1rem 2rem;
  font-size: 1.125rem;
}

/* Booking Form Input Button */
.booking-input-button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
  /* Named properties rather than "all": transitioning all made the browser watch
     every animatable property on a control that is tapped constantly. */
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
  cursor: pointer;
  text-align: left;
  overflow: hidden;
}

.booking-input-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: var(--color-primary);
  transform: translateY(-2px);
}

.booking-input-button:active {
  transform: translateY(0);
}

.booking-input-button .text-container {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.booking-input-button .text-display {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The date and time controls share a row on phones, leaving each about half the
   width the address controls get. Tightening the padding buys back the space
   their placeholder needs so it reads "Select date" rather than "Select d...". */
@media (max-width: 1023px) {
  .booking-input-button {
    gap: 0.5rem;
    padding: 0.875rem 0.75rem;
  }

  .booking-input-button .text-display {
    font-size: 0.9375rem;
  }
}

/* Limit text to 28 characters on larger screens */
@media (min-width: 1024px) {
  .booking-input-button .text-display {
    max-width: 28ch;
  }
}

/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.75);
  /* No backdrop-filter here on purpose. It made the browser re-composite the
     whole page behind the overlay every frame, and that page contains another
     backdrop-filter (the glass booking bar) plus an infinite animation, so the
     cost compounded. At 75% black the blur was barely visible anyway. */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 1rem;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.modal-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.modal-container {
  background: linear-gradient(135deg, rgba(40, 56, 46, 0.95) 0%, rgba(21, 27, 18, 0.95) 100%);
  border: 1px solid rgba(219, 169, 88, 0.2);
  border-radius: 1rem;
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  transform: scale(1);
  transition: transform 0.3s ease;
}

.modal-overlay.hidden .modal-container {
  transform: scale(0.9);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: white;
  font-family: var(--font-brygada-1918);
}

.modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  background-color: rgba(255, 255, 255, 0.05);
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
}

.modal-close:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--color-primary);
}

.modal-body {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-input {
  width: 100%;
  padding: 0.875rem 1rem;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
  color: white;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.modal-input:focus {
  outline: none;
  border-color: var(--color-primary);
  background-color: rgba(255, 255, 255, 0.08);
}

.modal-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

/* Address Suggestions */
.suggestions-list {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.suggestion-item {
  padding: 0.875rem 1rem;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
}

.suggestion-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: var(--color-primary);
  transform: translateX(4px);
}

.suggestion-item .suggestion-main {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.suggestion-item .suggestion-secondary {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .modal-container {
    max-height: 85vh;
  }

  .modal-header,
  .modal-body,
  .modal-footer {
    padding: 1rem;
  }
}

/* Hero Section Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideInFromBottom {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Animation Classes */
.animate-fade-in-up {
  animation: fadeInUp 0.8s ease-out forwards;
  opacity: 0;
}

.animate-fade-in {
  animation: fadeIn 0.8s ease-out forwards;
  opacity: 0;
}

.animate-slide-in-bottom {
  animation: slideInFromBottom 1s ease-out forwards;
  opacity: 0;
}

.animate-scale-in {
  animation: scaleIn 0.8s ease-out forwards;
  opacity: 0;
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

/* Nothing behind an open modal is visible, and an infinite animation there just
   keeps the compositor busy under the overlay. */
body.modal-open .animate-float {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .animate-float {
    animation: none;
  }
}

/* Animation Delays */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }
.delay-700 { animation-delay: 0.7s; }
.delay-800 { animation-delay: 0.8s; }

/* Google Maps Autocomplete Dropdown Styling */
.pac-container {
  background-color: rgba(40, 56, 46, 0.98) !important;
  border: 1px solid rgba(219, 169, 88, 0.3) !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
  margin-top: 0.5rem !important;
  padding: 0.5rem !important;
  font-family: var(--font-outfit) !important;
  z-index: 99999 !important;
}

.pac-container:after {
  display: none !important;
}

.pac-item {
  border: none !important;
  padding: 0.75rem 1rem !important;
  cursor: pointer !important;
  color: white !important;
  border-radius: 0.5rem !important;
  margin-bottom: 0.25rem !important;
  transition: all 0.2s ease !important;
  line-height: 1.5 !important;
}

.pac-item:hover,
.pac-item-selected {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-color: var(--color-primary) !important;
}

.pac-item-query {
  color: white !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
}

.pac-matched {
  color: var(--color-primary) !important;
  font-weight: 700 !important;
}

.pac-icon {
  display: none !important;
}

.pac-item .pac-icon-marker {
  display: inline-block !important;
  width: 18px !important;
  height: 18px !important;
  margin-right: 0.5rem !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23DBA958' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C7.802 0 4 3.403 4 7.602C4 11.8 7.469 16.812 12 24C16.531 16.812 20 11.8 20 7.602C20 3.403 16.199 0 12 0zM12 11C10.343 11 9 9.657 9 8C9 6.343 10.343 5 12 5C13.657 5 15 6.343 15 8C15 9.657 13.657 11 12 11z'/%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .pac-container {
    max-width: calc(100vw - 2rem) !important;
    left: 1rem !important;
    right: 1rem !important;
  }
}

/* ==============================================
   CUSTOM DATE PICKER STYLES
   ============================================== */

.date-picker-modal .modal-container {
  max-width: 420px;
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding: 0.5rem;
}

.calendar-month-year {
  font-size: 1.125rem;
  font-weight: 600;
  color: white;
  font-family: var(--font-brygada-1918);
  letter-spacing: 0.5px;
}

.calendar-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  background-color: rgba(255, 255, 255, 0.05);
  color: white;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.calendar-nav-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: scale(1.05);
}

.calendar-nav-btn:active {
  transform: scale(0.95);
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
  margin-bottom: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.calendar-weekday {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.25rem;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.375rem;
  min-height: 280px;
}

.calendar-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: white;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
}

.calendar-day::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, var(--color-primary) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.calendar-day:hover:not(.disabled):not(.other-month) {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(219, 169, 88, 0.3);
  transform: scale(1.05);
}

.calendar-day:hover:not(.disabled):not(.other-month)::before {
  opacity: 0.1;
}

.calendar-day.today {
  color: var(--color-primary);
  font-weight: 700;
  border-color: var(--color-primary);
  background-color: rgba(219, 169, 88, 0.1);
}

.calendar-day.selected {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: black;
  font-weight: 700;
  border-color: var(--color-primary);
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(219, 169, 88, 0.4);
}

.calendar-day.selected::before {
  opacity: 0;
}

.calendar-day.disabled {
  color: rgba(255, 255, 255, 0.2);
  cursor: not-allowed;
  background-color: transparent;
}

.calendar-day.other-month {
  color: rgba(255, 255, 255, 0.25);
  background-color: transparent;
}

.calendar-day:active:not(.disabled):not(.other-month) {
  transform: scale(0.95);
}

/* Date picker animations */
@keyframes slideInCalendar {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.calendar-grid {
  animation: slideInCalendar 0.3s ease-out;
}

/* ==============================================
   CUSTOM TIME PICKER STYLES (iOS-inspired)
   ============================================== */

.time-picker-modal .modal-container {
  max-width: 380px;
}

.time-presets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.625rem;
  margin-bottom: 1.25rem;
}

.time-preset-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  padding: 0.875rem 0.75rem;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.875rem;
  color: white;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.time-preset-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.time-preset-btn > * {
  position: relative;
  z-index: 1;
}

.time-preset-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: var(--color-primary);
  transform: translateY(-2px);
}

.time-preset-btn:hover::before {
  opacity: 0.15;
}

.time-preset-btn:active {
  transform: translateY(0) scale(0.98);
}

.time-preset-btn.active {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border-color: var(--color-primary);
  color: black;
  font-weight: 600;
}

.time-preset-btn.active::before {
  opacity: 0;
}

.time-preset-btn svg {
  flex-shrink: 0;
}

.time-preset-btn span:nth-child(2) {
  font-size: 0.8125rem;
  font-weight: 500;
}

.time-preset-value {
  font-size: 0.75rem;
  opacity: 0.7;
  font-family: 'Courier New', monospace;
  letter-spacing: 0.5px;
}

.time-preset-btn.active .time-preset-value {
  opacity: 0.9;
  font-weight: 700;
}

.time-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.5rem 0;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.time-divider::before,
.time-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.time-picker-container {
  display: flex;
  gap: 1rem;
  justify-content: center;
  position: relative;
  padding: 1rem 0;
}

.time-picker-indicator {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 2rem);
  height: 44px;
  background: linear-gradient(135deg, rgba(219, 169, 88, 0.15) 0%, rgba(219, 169, 88, 0.08) 100%);
  border: 1px solid rgba(219, 169, 88, 0.3);
  border-radius: 0.75rem;
  pointer-events: none;
  z-index: 1;
  margin-top: 12px;
}

.time-scroll-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.time-scroll-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.time-scroll {
  height: 176px;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  position: relative;
  width: 100%;

  /* Hide scrollbar but keep functionality */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.time-scroll::-webkit-scrollbar {
  display: none;
}

.time-scroll-padding {
  height: 66px;
  flex-shrink: 0;
}

.time-item {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  scroll-snap-align: center;
  transition: all 0.2s ease;
  position: relative;
  z-index: 2;
}

.time-item:hover {
  color: rgba(255, 255, 255, 0.7);
}

.time-item.selected {
  color: var(--color-primary);
  font-weight: 700;
  font-size: 1.375rem;
  transform: scale(1.05);
}

/* Mobile adjustments */
@media (max-width: 640px) {
  .time-presets {
    grid-template-columns: 1fr;
  }

  .calendar-day {
    font-size: 0.875rem;
  }

  .time-picker-container {
    gap: 0.5rem;
  }

  .time-item {
    font-size: 1.125rem;
  }

  .time-item.selected {
    font-size: 1.25rem;
  }
}

/* Disabled time items (6 hour minimum rule) */
.time-item.disabled {
  color: rgba(255, 255, 255, 0.15);
  cursor: not-allowed;
  pointer-events: none;
}

.time-item.disabled:hover {
  color: rgba(255, 255, 255, 0.15);
}

/* Floating contact actions
   Collapsed to a circle by default and widening to show the label on hover or
   keyboard focus. The label is always in the DOM so screen readers and the
   accessible name never depend on the hover state. */
.contact-float-btn {
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 3rem;
  width: 3rem;
  padding: 0 0.875rem;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
  overflow: hidden;
  white-space: nowrap;
  transition: width 0.25s ease, gap 0.25s ease, box-shadow 0.25s ease;
}

.contact-float-btn svg {
  flex-shrink: 0;
}

.contact-float-btn .contact-float-label {
  font-size: 0.875rem;
  font-weight: 600;
  max-width: 0;
  opacity: 0;
  transition: max-width 0.25s ease, opacity 0.2s ease;
}

.contact-float-btn:hover,
.contact-float-btn:focus-visible {
  width: auto;
  gap: 0.5rem;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.36);
}

.contact-float-btn:hover .contact-float-label,
.contact-float-btn:focus-visible .contact-float-label {
  max-width: 8rem;
  opacity: 1;
}

/* A touch screen has no hover, so the label would never appear. Showing it
   permanently there costs nothing and makes the target easier to hit. */
@media (hover: none) {
  .contact-float-btn {
    width: auto;
    gap: 0.5rem;
  }

  .contact-float-btn .contact-float-label {
    max-width: 8rem;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-float-btn,
  .contact-float-btn .contact-float-label {
    transition: none;
  }
}

/* Booking progress
   Stage 1 is always complete by the time this page renders: the visitor cannot
   arrive without a route. The remaining two reflect which section is showing. */
.booking-progress {
  max-width: 42rem;
  margin: 0 auto 2rem;
  padding: 0 1rem;
}

.booking-progress-list {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  counter-reset: step;
}

.booking-progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  flex: 1;
  position: relative;
  text-align: center;
}

/* The connector is drawn from each step towards the previous one, so it never
   trails off the right-hand edge after the last step. */
.booking-progress-step + .booking-progress-step::before {
  content: "";
  position: absolute;
  top: 0.9rem;
  right: 50%;
  left: -50%;
  height: 2px;
  background: #e2e2e2;
  z-index: 0;
}

.booking-progress-marker {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 999px;
  background: #fff;
  border: 2px solid #dcdcdc;
  color: #9a9a9a;
  font-size: 0.8rem;
  font-weight: 600;
}

.booking-progress-label {
  font-size: 0.75rem;
  color: #8a8a8a;
  line-height: 1.2;
}

.booking-progress-step.is-complete .booking-progress-marker {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #1b1b1b;
}

.booking-progress-step.is-complete + .booking-progress-step::before {
  background: var(--color-primary);
}

.booking-progress-step.is-current .booking-progress-marker {
  border-color: var(--color-primary);
  color: var(--color-secondary);
}

.booking-progress-step.is-current .booking-progress-label,
.booking-progress-step.is-complete .booking-progress-label {
  color: var(--color-secondary);
  font-weight: 600;
}

@media (min-width: 640px) {
  .booking-progress-label {
    font-size: 0.85rem;
  }
}