/* ===== Simple Booking ===== */

.simple-booking {
  background: #fff;
  padding: 64px 16px;
}
.simple-booking__container {
  max-width: 1200px;
  margin: 0 auto;
}

.simple-booking__panel {
  /* uses --color5 with transparency */
  background: rgb(from var(--color5) r g b / 0.6);
  border-radius: 16px;
  padding: clamp(20px, 2.5vw, 32px);
}

.simple-booking__title {
  text-align: center;
  font-weight: 800;
  font-size: clamp(28px, 3vw, 36px);
  color: var(--text-color-dark, #000);
  margin: 0 0 16px;
}

.simple-booking__coming-soon {
  text-align: center;
  font-weight: 500;
  font-size: clamp(28px, 3vw, 36px);
  color: rgb(255, 255, 255);
  margin: 0 0 16px;
  padding-top: 30px;
}

/* Form base */
.sb-form {
  background: transparent;
  border-radius: 14px;
  padding: 8px;
  box-shadow: none;
}

/* Grid rows */
.sb-row {
  display: flex;
  justify-content: center;
}
.sb-field {
  display: grid;
  gap: 8px;
  position: relative;
  width: 300px;
}

@media (max-width: 900px) {
  .sb-field {
    width: unset;
  }
}

.sb-field > span {
  font-weight: 600;
  color: var(--text-color-dark, #000);
}

.sb-field select,
.sb-field input,
.sb-field textarea {
  background: #fff;
  height: 52px;
  border-radius: 10px;
  border: 1px solid #e6e7eb;
  padding: 0 14px;
  font: inherit;
  box-sizing: border-box;
}
.sb-field textarea {
  min-height: 112px;
  height: auto;
  padding: 12px 14px;
  resize: vertical;
}
.sb-field input:focus,
.sb-field select:focus,
.sb-field textarea:focus {
  outline: 0;
  border-color: var(--color5);
  box-shadow: 0 0 0 3px rgba(29,110,147,0.15);
}

/* --- FLEX layout for time blocks --- */
.sb-slots-wrap { margin-top: 16px; }

.sb-slots__label {
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-color-dark, #000);
}

.sb-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;                     /* requested spacing */
  align-items: stretch;
}

.sb-slots__hint {
  flex: 1 1 100%;
  color: #475569; /* slate-600 */
}

/* Each block grows; max 4 per row.
   4 cols -> 3 gaps of 5px = 15px */
.sb-slot {
  flex: 1 1 calc((100% - 15px) / 4);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  border-radius: 10px;
  border: 1px solid #e6e7eb;
  background: #fff;
  cursor: pointer;
  font-weight: 600;
  transition: transform .1s ease, box-shadow .15s ease, border-color .15s ease;
}
.sb-slot:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(0,0,0,.06);
}
.sb-slot.is-selected {
  border-color: var(--color5);
  box-shadow: 0 0 0 3px rgba(29,110,147,.15);
}
.sb-slot.is-disabled {
  cursor: not-allowed;
  color: #b9bfc6;
  background: #f5f6f7;
  border-style: dashed;
}

/* Details (hidden until slot chosen) */
.sb-details[hidden] { display: none !important; }
.sb-details.is-visible { display: block; margin-top: 16px; }

/* Actions */
.sb-actions {
  margin-top: 18px;
  display: flex;
  justify-content: center;
}
.btn {
  padding: 14px 22px;
  border-radius: 12px;
  font-weight: 700;
  border: 2px solid transparent;
}
.btn--primary {
  background: var(--color5);
  color: #fff;
}
.btn--primary:hover {
  background: var(--primary-color-dark, #005fa3);
}
.btn[disabled] { opacity: .6; cursor: not-allowed; }

/* Responsive */
@media (max-width: 920px) {
  .sb-row { grid-template-columns: 1fr; }
}

/* Mobile: 2 blocks per row (100% - 1 gap) */
@media (max-width: 560px) {
  .sb-slot {
    flex: 1 1 calc((100% - 5px) / 2);
  }
}

/* Flatpickr on top of everything */
.flatpickr-calendar { z-index: 10000; }

/* Grid for booking details (matches estimate form) */
.sb-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.sb-grid .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sb-grid .field label {
  font-weight: 600;
  color: var(--text-color-dark, #000);
  font-size: 0.95rem;
}

.sb-grid .field input,
.sb-grid .field textarea {
  background: #fff;
  height: 52px;
  border-radius: 10px;
  border: 1px solid #e6e7eb;
  padding: 0 14px;
  font: inherit;
  box-sizing: border-box;
}

.sb-grid .field textarea {
  min-height: 112px;
  height: auto;
  padding: 12px 14px;
  resize: vertical;
}

/* Full-width rows */
.sb-grid .field--full {
  grid-column: 1 / -1;
}

/* Focus styles */
.sb-grid .field input:focus,
.sb-grid .field textarea:focus {
  outline: 0;
  border-color: var(--color5);
  box-shadow: 0 0 0 3px rgba(29,110,147,0.15);
}

/* Responsive breakpoints for detail grid */
@media (max-width: 920px) {
  .sb-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .sb-grid {
    grid-template-columns: 1fr;
  }
}

/* Red star for required fields */
label .required {
  color: #e63946; /* red tone */
  margin-left: 4px;
  font-weight: bold;
}

/* ==== Booking Modal (refined) ==== */

/* Hidden by default */
.booking-modal[aria-hidden="true"] { display: none !important; }

/* Overlay container */
.booking-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 24px; /* breathing room on small screens */
}

/* Dimmed backdrop */
.booking-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45); /* slate-ish */
  backdrop-filter: blur(2px);
}

/* Dialog */
.booking-modal__dialog {
  position: relative; /* for absolute close button */
  background: #fff;
  width: min(92vw, 560px);
  border-radius: 16px;
  padding: 24px 24px 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.20);

  /* gentle entrance */
  transform: translateY(6px) scale(0.985);
  opacity: 0;
  transition: transform .2s ease, opacity .2s ease, box-shadow .2s ease;
}

/* When visible (either class or aria-hidden=false) */
.booking-modal.is-open .booking-modal__dialog,
.booking-modal[aria-hidden="false"] .booking-modal__dialog {
  transform: none;
  opacity: 1;
}

/* Accent bar using your brand color */
.booking-modal__dialog::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

/* Close button (top-right) */
.booking-modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  border-radius: 999px;
  font-size: 22px;
  line-height: 1;
  color: #64748b; /* slate-500 */
  cursor: pointer;
}
.booking-modal__close:hover {
  background: #f1f5f9;         /* slate-100 */
  color: #0f172a;              /* slate-900 */
}
.booking-modal__close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(29,110,147,0.35); /* uses your --color5 hue */
}

/* Content */
.booking-modal__title {
  margin: 8px 40px 8px 0; /* leave space for the close button */
  font-weight: 800;
  font-size: clamp(20px, 2.4vw, 24px);
  color: var(--text-color-dark, #000);
}
.booking-modal__body {
  margin: 0 0 16px;
  color: #475569; /* slate-600 */
  line-height: 1.55;
}
.booking-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 8px;
}

/* Small screens */
@media (max-width: 560px) {
  .booking-modal { padding: 16px; }
  .booking-modal__dialog { padding: 20px 20px 16px; }
  .booking-modal__close {
    top: 6px; right: 6px; width: 36px; height: 36px; font-size: 20px;
  }
}

/* Motion preference */
@media (prefers-reduced-motion: reduce) {
  .booking-modal__dialog { transition: none; }
}

.simple-booking__description {
  margin: 12px 0;
  color: #475569; /* slate-600 */
  line-height: 1.55;
  text-align: center;
}