/* ========== BOOKING WIDGET ========== */
.booking-widget {
  background: #fff;
  padding: 30px 30px 32px;
  color: #2C3539;
  border-radius: 24px;
  box-shadow: 0 30px 70px rgba(44,53,57,0.22), 0 4px 14px rgba(44,53,57,0.08);
}
.booking-widget-head {
  margin-bottom: 22px;
}
.booking-widget-head h4 {
  font-family: 'Inter', sans-serif;
  font-size: 25px;
  font-weight: 800;
  text-transform: none;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #2C3539;
  margin-bottom: 8px;
}
.booking-widget-head p {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: rgba(44,53,57,0.65);
  line-height: 1.5;
}
.booking-steps {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
.booking-step {
  flex: 1;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(44,53,57,0.12);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(44,53,57,0.4);
  transition: color 0.3s, border-color 0.3s;
}
.booking-step.active {
  border-bottom-color: #f7ca2f;
  color: #2C3539;
}
.booking-step.done {
  border-bottom-color: #2C3539;
  color: #2C3539;
}
.booking-panel {
  display: none;
}
.booking-panel.active {
  display: block;
}

/* Calendar */
.booking-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.booking-cal-title {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: #2C3539;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.booking-cal-nav {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(44,53,57,0.14);
  border-radius: 50%;
  background: #fff;
  color: #2C3539;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.booking-cal-nav:hover {
  background: #f7ca2f;
  border-color: #f7ca2f;
}
.booking-cal-nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.booking-cal-nav svg {
  width: 14px;
  height: 14px;
}
.booking-cal-nav-group {
  display: flex;
  gap: 6px;
}
.booking-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 4px;
}
.booking-cal-weekday {
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: rgba(44,53,57,0.5);
  padding: 8px 0;
}
.booking-cal-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.booking-cal-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #2C3539;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.booking-cal-day.available:hover {
  background: rgba(44,53,57,0.07);
  transform: scale(1.06);
}
.booking-cal-day.other-month {
  color: rgba(44,53,57,0.18);
  cursor: default;
  pointer-events: none;
}
.booking-cal-day.disabled {
  color: rgba(44,53,57,0.25);
  cursor: not-allowed;
  pointer-events: none;
}
.booking-cal-day.fully-booked {
  color: rgba(44,53,57,0.35);
  background: rgba(44,53,57,0.04);
  cursor: not-allowed;
  pointer-events: none;
  text-decoration: line-through;
}
.booking-cal-day.today::after {
  content: '';
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  background: #f7ca2f;
  border-radius: 50%;
}
.booking-cal-day.available {
  font-weight: 800;
}
.booking-cal-day.selected {
  background: #2C3539;
  color: #f7ca2f;
  box-shadow: 0 8px 18px rgba(44,53,57,0.3);
}
.booking-cal-legend {
  display: flex;
  gap: 16px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(44,53,57,0.08);
  flex-wrap: wrap;
}
.booking-cal-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: rgba(44,53,57,0.65);
}
.booking-cal-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(44,53,57,0.3);
}
.booking-cal-legend-dot.available { background: #fff; border-color: #2C3539; }
.booking-cal-legend-dot.booked { background: rgba(44,53,57,0.15); }
.booking-cal-legend-dot.selected { background: #2C3539; border-color: #2C3539; }

/* Slot picker */
.booking-slot-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.booking-back {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(44,53,57,0.14);
  border-radius: 50%;
  background: #fff;
  color: #2C3539;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s, border-color 0.2s;
}
.booking-back:hover {
  background: #f7ca2f;
  border-color: #f7ca2f;
}
.booking-back svg { width: 14px; height: 14px; }
.booking-slot-date {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: #2C3539;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.booking-slot-sub {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: rgba(44,53,57,0.55);
  margin-bottom: 14px;
}
.booking-slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.booking-slot {
  padding: 13px 4px;
  border: 1px solid rgba(44,53,57,0.14);
  border-radius: 10px;
  background: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #2C3539;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.booking-slot:hover {
  background: #2C3539;
  border-color: #2C3539;
  color: #f7ca2f;
}
.booking-slot.booked {
  color: rgba(44,53,57,0.3);
  background: rgba(44,53,57,0.04);
  cursor: not-allowed;
  pointer-events: none;
  text-decoration: line-through;
}

/* Form panel */
.booking-summary {
  padding: 16px 20px;
  background: #f4f4f4;
  border-radius: 14px;
  margin-bottom: 18px;
}
.booking-summary-date {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: #2C3539;
}
.booking-summary-time {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: rgba(44,53,57,0.6);
  margin-top: 4px;
}
.booking-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.booking-form input,
.booking-form textarea {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #2C3539;
  background: #fff;
  border: 1px solid rgba(44,53,57,0.16);
  border-radius: 10px;
  padding: 14px 16px;
  outline: none;
  transition: border-color 0.2s;
}
.booking-form input:focus,
.booking-form textarea:focus {
  border-color: #2C3539;
}
.booking-form input::placeholder,
.booking-form textarea::placeholder {
  color: rgba(44,53,57,0.45);
}
.booking-form textarea {
  resize: vertical;
  min-height: 72px;
}
.booking-submit {
  align-self: flex-start;
  background: #2C3539;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 15px 30px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  margin-top: 4px;
  transition: background 0.2s, color 0.2s;
}
.booking-submit:hover {
  background: #f7ca2f;
  color: #2C3539;
}

/* Gravity Forms — step 3's "Details" panel embeds a real Gravity Form in
   place of the old plain <form>. Re-skin its standard markup to match
   the look above exactly (labels are kept for accessibility but hidden
   visually in favour of placeholder text, matching the previous design).
   Class names below are Gravity Forms' own stable semantic classes;
   re-check against the live rendered form if a future GF update changes
   them. */
#bookingWidget .gform_wrapper {
  margin: 0;
  font-family: 'Inter', sans-serif;
}
#bookingWidget .gform_wrapper .gform_fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
#bookingWidget .gform_wrapper .gfield {
  margin: 0 !important;
}
#bookingWidget .gform_wrapper .gfield_label,
#bookingWidget .gform_wrapper .gform_hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}
#bookingWidget .gform_wrapper input[type="text"],
#bookingWidget .gform_wrapper input[type="email"],
#bookingWidget .gform_wrapper textarea {
  width: 100%;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #2C3539;
  background: #fff;
  border: 1px solid rgba(44,53,57,0.16);
  border-radius: 10px;
  padding: 14px 16px;
  outline: none;
  transition: border-color 0.2s;
}
#bookingWidget .gform_wrapper input[type="text"]:focus,
#bookingWidget .gform_wrapper input[type="email"]:focus,
#bookingWidget .gform_wrapper textarea:focus {
  border-color: #2C3539;
}
#bookingWidget .gform_wrapper input::placeholder,
#bookingWidget .gform_wrapper textarea::placeholder {
  color: rgba(44,53,57,0.45);
}
#bookingWidget .gform_wrapper textarea {
  resize: vertical;
  min-height: 72px;
}
#bookingWidget .gform_wrapper .gfield_validation_message,
#bookingWidget .gform_wrapper .validation_message {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #dd5135;
  margin-top: 2px;
}
#bookingWidget .gform_wrapper .gform_validation_errors {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #dd5135;
  background: rgba(221,81,53,0.08);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 4px;
}
#bookingWidget .gform_wrapper .gform_footer {
  margin: 4px 0 0;
  padding: 0;
}
#bookingWidget .gform_wrapper .gform_button {
  align-self: flex-start;
  background: #2C3539;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 15px 30px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
#bookingWidget .gform_wrapper .gform_button:hover {
  background: #f7ca2f;
  color: #2C3539;
}
#bookingWidget .gform_wrapper .gform_ajax_spinner {
  margin-left: 10px;
  vertical-align: middle;
}
/* Gravity Forms' own confirmation UI is superseded by our own step-4
   panel (booking.js hooks its `gform_confirmation_loaded` event) — hide
   it so it never becomes visible even momentarily. */
#bookingWidget .gform_confirmation_wrapper {
  display: none !important;
}

/* Confirmed */
.booking-confirmed {
  text-align: center;
  padding: 20px 0 8px;
}
.booking-check {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  background: #f7ca2f;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2C3539;
}
.booking-check svg { width: 32px; height: 32px; }
.booking-confirmed h4 {
  font-family: 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #2C3539;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.booking-confirmed p {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: rgba(44,53,57,0.7);
  line-height: 1.55;
  max-width: 320px;
  margin: 0 auto;
}
.booking-confirmed-slot {
  margin: 20px 0 24px;
  padding: 16px 18px;
  background: #f4f4f4;
  border-left: 4px solid #f7ca2f;
  border-radius: 14px;
  text-align: left;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: #2C3539;
}
.booking-reset {
  background: transparent;
  border: 1px solid rgba(44,53,57,0.2);
  border-radius: 100px;
  color: #2C3539;
  padding: 11px 24px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.booking-reset:hover {
  background: #2C3539;
  color: #fff;
  border-color: #2C3539;
}

@media (max-width: 768px) {
  .booking-widget { padding: 22px 20px; }
  .booking-widget-head h4 { font-size: 21px; }
  .booking-steps { gap: 6px; margin-bottom: 16px; }
  .booking-step { font-size: 12px; letter-spacing: 0; }
  .booking-cal-header { margin-bottom: 12px; }
  .booking-cal-title { font-size: 15px; }
  .booking-cal-days { gap: 2px; }
  .booking-cal-day { font-size: 13px; }
  .booking-cal-weekday { font-size: 9px; padding: 6px 0; }
  .booking-slots { grid-template-columns: repeat(3, 1fr); gap: 5px; }
  .booking-slot { padding: 12px 2px; font-size: 12px; }
  /* Prevent iOS Safari auto-zoom on focus, inputs must be >= 16px */
  .booking-form input,
  .booking-form textarea { font-size: 16px; padding: 14px; }
  .booking-submit {
    align-self: stretch;
    text-align: center;
    padding: 16px 28px;
    font-size: 14px;
  }
  .booking-cal-legend { gap: 12px; }
  .booking-cal-legend-item { font-size: 10px; }
}

@media (max-width: 420px) {
  .booking-widget { padding: 20px 16px; }
  .booking-slots { grid-template-columns: repeat(2, 1fr); }
  .booking-slot { font-size: 13px; }
  .booking-cal-days { gap: 1px; }
  .booking-cal-day { font-size: 12px; }
}