/*
  Grand Country Booking Bar (Spring 2027 Family Package Variant)
  Companion stylesheet for booking-bar-spring.html.

  Updated 2026-05-18: typography baselines bumped on desktop (label 14,
  input/select/stepper-value 16). Fluid `clamp(MIN, calc(BASE_PX + N*vw), MAX)`
  scaling added at the 991/767/479 px breakpoints across font-size,
  padding, margin, gap, and height per Skills/frontend-framework.md.
  Input font-size stays at 16px floor on every breakpoint so iOS Safari
  does not auto-zoom on focus. Layout structure unchanged (column-stacked
  at every breakpoint, max-width 480px, no container background, #2a72c2
  pill Reserve button).

  Kept as its own file so the Spring package can diverge visually later
  (different brand accents, promo banners, etc.) without affecting other
  seasonal variants.
*/

.gc-booking-bar,
.gc-booking-bar * {
  box-sizing: border-box;
}
.gc-booking-bar {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #1a1a1a;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 35px;
}
.gc-booking-bar__row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 25px;
  flex: 1 1 100%;
  min-width: 0;
}
.gc-booking-bar__reserve-wrap {
  flex: 1 1 100%;
  display: flex;
  align-items: stretch;
}
.gc-booking-bar__field {
  display: flex;
  flex-direction: column;
  flex: 1 1 100%;
  min-width: 0;
}
.gc-booking-bar__label {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #1a1a1a;
}
.gc-booking-bar__required {
  color: #c0392b;
  margin-left: 2px;
}
.gc-booking-bar__input,
.gc-booking-bar__select {
  font-family: inherit;
  font-size: 16px;
  color: #1a1a1a;
  background: #ffffff;
  border: 1px solid #c8c8c8;
  border-radius: 8px;
  padding: 10px 12px;
  height: 44px;
  width: 100%;
  line-height: 1.2;
  appearance: none;
  -webkit-appearance: none;
}
.gc-booking-bar__input:focus,
.gc-booking-bar__select:focus {
  outline: none;
  border-color: #1a1a1a;
}
.gc-booking-bar__input[readonly] {
  background: #ffffff;
  cursor: pointer;
}
.gc-booking-bar__stepper {
  display: flex;
  align-items: center;
  border: 1px solid #c8c8c8;
  border-radius: 8px;
  height: 44px;
  overflow: hidden;
  background: #ffffff;
}
.gc-booking-bar__stepper-btn {
  font-family: inherit;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  width: 40px;
  height: 100%;
  border: none;
  background: transparent;
  color: #1a1a1a;
  cursor: pointer;
}
.gc-booking-bar__stepper-btn:disabled {
  color: #c8c8c8;
  cursor: not-allowed;
}
.gc-booking-bar__stepper-value {
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  user-select: none;
}
.gc-booking-bar__reserve {
  font-family: inherit;
  font-size: 20px;
  font-weight: 600;
  color: #ffffff;
  background: #2a72c2;
  border: none;
  border-radius: 999px;
  height: 52px;
  padding: 0 32px;
  cursor: pointer;
  white-space: nowrap;
  width: 100%;
}
.gc-booking-bar__reserve:hover {
  background: #1d5fa5;
}

.gc-booking-bar__ages {
  position: static;
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gc-booking-bar__ages:empty {
  display: none;
}
.gc-booking-bar__age-field {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.gc-booking-bar__error {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 100%;
  background: #c0392b;
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 999px;
  margin-top: 12px;
}
.gc-booking-bar__error::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='12'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>");
  background-size: 16px 16px;
  background-repeat: no-repeat;
}
.gc-booking-bar__error:empty {
  display: none;
}

.flatpickr-calendar,
.flatpickr-calendar input,
.flatpickr-calendar .flatpickr-month,
.flatpickr-calendar .flatpickr-weekday,
.flatpickr-calendar .flatpickr-day,
.flatpickr-calendar .flatpickr-current-month,
.flatpickr-calendar .flatpickr-current-month input.cur-year,
.flatpickr-calendar .flatpickr-monthDropdown-months {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}
.flatpickr-calendar {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28) !important;
}
.flatpickr-calendar .flatpickr-current-month,
.flatpickr-calendar .flatpickr-current-month input.cur-year,
.flatpickr-calendar .flatpickr-monthDropdown-months,
.flatpickr-calendar .flatpickr-day {
  font-weight: 700 !important;
}

/*
  Tablet (<=991px). Mild fluid scaling on typography, padding, gap, and
  control heights. Layout already column-stacked at desktop, so no
  layout shift; only the values breathe with viewport.
*/
@media (max-width: 991px) {
  .gc-booking-bar {
    gap: clamp(30px, calc(28px + 0.4vw), 36px);
    padding: clamp(14px, calc(12px + 0.4vw), 18px);
  }
  .gc-booking-bar__row {
    gap: clamp(24px, calc(22px + 0.4vw), 28px);
  }
  .gc-booking-bar__label {
    font-size: clamp(16px, calc(14.5px + 0.25vw), 17.5px);
    margin-bottom: clamp(5px, calc(4px + 0.2vw), 7px);
  }
  .gc-booking-bar__input,
  .gc-booking-bar__select {
    font-size: clamp(16px, calc(14.5px + 0.25vw), 17.5px);
    height: clamp(44px, calc(38px + 0.8vw), 50px);
    padding: clamp(8px, calc(7px + 0.3vw), 12px) clamp(10px, calc(9px + 0.3vw), 14px);
  }
  .gc-booking-bar__stepper {
    height: clamp(44px, calc(38px + 0.8vw), 50px);
  }
  .gc-booking-bar__stepper-btn {
    font-size: clamp(17px, calc(15px + 0.4vw), 20px);
    width: clamp(38px, calc(32px + 1vw), 46px);
  }
  .gc-booking-bar__stepper-value {
    font-size: clamp(16px, calc(14.5px + 0.25vw), 17.5px);
  }
  .gc-booking-bar__reserve {
    font-size: clamp(20px, calc(18px + 0.4vw), 22px);
    height: clamp(52px, calc(46px + 0.8vw), 58px);
    padding: 0 clamp(24px, calc(20px + 1vw), 36px);
  }
  .gc-booking-bar__ages {
    gap: clamp(14px, calc(12px + 0.4vw), 18px);
  }
  .gc-booking-bar__error {
    font-size: clamp(13px, calc(12px + 0.2vw), 15px);
    padding: clamp(7px, calc(6px + 0.2vw), 10px) clamp(12px, calc(10px + 0.4vw), 16px);
  }
}

/*
  Phone horizontal (<=767px). Bigger fluid jump. Bigger gaps for the
  vertical rhythm between stacked fields.
*/
@media (max-width: 767px) {
  .gc-booking-bar {
    gap: clamp(20px, calc(14px + 1.5vw), 28px);
    padding: clamp(14px, calc(12px + 1vw), 20px);
  }
  .gc-booking-bar__row {
    gap: clamp(20px, calc(14px + 1.5vw), 28px);
  }
  .gc-booking-bar__label {
    font-size: clamp(17px, calc(14px + 1vw), 20px);
    margin-bottom: clamp(5px, calc(3px + 0.6vw), 8px);
  }
  .gc-booking-bar__input,
  .gc-booking-bar__select {
    font-size: clamp(16px, calc(13px + 1vw), 19px);
    height: clamp(46px, calc(40px + 1.4vw), 54px);
    padding: clamp(10px, calc(8px + 0.6vw), 14px) clamp(12px, calc(10px + 0.6vw), 16px);
  }
  .gc-booking-bar__stepper {
    height: clamp(46px, calc(40px + 1.4vw), 54px);
  }
  .gc-booking-bar__stepper-btn {
    font-size: clamp(19px, calc(15px + 1.2vw), 22px);
    width: clamp(44px, calc(36px + 1.6vw), 52px);
  }
  .gc-booking-bar__stepper-value {
    font-size: clamp(16px, calc(13px + 1vw), 19px);
  }
  .gc-booking-bar__reserve {
    font-size: clamp(20px, calc(17px + 1vw), 24px);
    height: clamp(54px, calc(48px + 1.4vw), 60px);
    padding: 0 clamp(28px, calc(24px + 1vw), 36px);
  }
  .gc-booking-bar__ages {
    gap: clamp(20px, calc(14px + 1.5vw), 28px);
  }
  .gc-booking-bar__error {
    font-size: clamp(13px, calc(11px + 0.6vw), 16px);
    padding: clamp(8px, calc(6px + 0.6vw), 12px) clamp(12px, calc(10px + 0.6vw), 16px);
    gap: clamp(8px, calc(6px + 0.3vw), 10px);
  }
  .gc-booking-bar__error::before {
    width: clamp(16px, calc(14px + 0.6vw), 20px);
    height: clamp(16px, calc(14px + 0.6vw), 20px);
    background-size: contain;
  }
}

/*
  Phone vertical (<=479px). Smaller caps for narrow screens.
*/
@media (max-width: 479px) {
  .gc-booking-bar {
    gap: clamp(30px, calc(26px + 1.5vw), 36px);
    padding: clamp(12px, calc(8px + 1.5vw), 16px);
  }
  .gc-booking-bar__row {
    gap: clamp(28px, calc(24px + 1.5vw), 34px);
  }
  .gc-booking-bar__label {
    font-size: clamp(17px, calc(13px + 1.6vw), 19px);
    margin-bottom: clamp(4px, calc(2px + 0.8vw), 7px);
  }
  .gc-booking-bar__input,
  .gc-booking-bar__select {
    font-size: clamp(16px, calc(13px + 1.2vw), 18px);
    height: clamp(46px, calc(38px + 2.5vw), 52px);
    padding: clamp(10px, calc(7px + 1vw), 13px) clamp(12px, calc(9px + 1vw), 15px);
  }
  .gc-booking-bar__stepper {
    height: clamp(46px, calc(38px + 2.5vw), 52px);
  }
  .gc-booking-bar__stepper-btn {
    font-size: clamp(19px, calc(15px + 1.4vw), 22px);
    width: clamp(44px, calc(36px + 2.4vw), 50px);
  }
  .gc-booking-bar__stepper-value {
    font-size: clamp(16px, calc(13px + 1.2vw), 18px);
  }
  .gc-booking-bar__reserve {
    font-size: clamp(20px, calc(15px + 2vw), 22px);
    padding: clamp(15px, calc(11px + 1.4vw), 18px) 0;
  }
  .gc-booking-bar__error {
    font-size: clamp(13px, calc(11px + 0.6vw), 15px);
  }
}

/* ============================================================
   TEMPORARY HOST-SITE OVERRIDE — DELETE WHEN GLOBAL LABEL FIXED

   The host Webflow site has a global label class that is bleeding
   into the booking bar's labels. The block below force-applies
   the booking bar's intended label styles with !important so the
   host CSS cannot override them.

   When the global label class is fixed on the host site, delete
   this entire block (everything between the two long comment bars).
   The cascade above will continue to render correctly on its own.
   ============================================================ */
.gc-booking-bar__label {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  margin-bottom: 6px !important;
  color: #1a1a1a !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  line-height: 1.2 !important;
}
.gc-booking-bar__required {
  color: #c0392b !important;
}
/* ============================================================
   END TEMPORARY HOST-SITE OVERRIDE
   ============================================================ */