/* ============================================
   Booking Modal Reskin — Privát Hudec
   Overrides booking-private plugin's modal CSS to match the booking-flow
   design reference. Plugin's HTML/JS untouched. The 3-dot step indicator
   is injected by booking-modal-enhance.js and watched via MutationObserver.

     plugin                             →  reference (booking-flow.html)
     ───────────────────────────────────────────────────────────────────
     #phb-booking-modal-overlay         →  .modal-bg
     .phb-booking-modal                 →  .modal
     .phb-modal-header                  →  .modal-head
     .phb-modal-close                   →  .modal-head .x
     .phb-modal-body                    →  .modal-body
     .phb-step-indicator (injected)     →  .steps
     .modern-calendar                   →  .cal-wrap
     .date-range-display                →  .cal-dates
     .selected-dates                    →  .cal-date-box
     .month-navigation                  →  .cal-nav
     .calendar-grid                     →  .cal-grid
     .day-number                        →  .cal-grid .d
     .calendar-footer                   →  .cal-actions
     .phb-selected-dates-summary        →  .summary-box (top)
     .phb-options-title                 →  .sec-label
     .phb-persons-selector              →  .guest-picker
     .phb-person-option                 →  .guest-pick
     .phb-extra-services                →  .extras
     .phb-service-option                →  .ex
     .phb-form-group                    →  .field
     .phb-form-submit                   →  .modal-foot .primary
     .phb-back-btn                      →  .modal-foot .secondary
     .phb-success-icon                  →  .success .check
     .phb-success-title                 →  .success h3
     .phb-booking-summary               →  .success .recap
     .phb-close-success                 →  .modal-foot .primary
   ============================================ */

/* ---- CSS variables scoped to the modal ---- */
#phb-booking-modal-overlay {
  /* Aligned with booking-flow.html design reference (Palette D — navy + gold
     + cream). Previously these were bright Material blues (#2A6FDB) which
     clashed with the rest of the landing. The variable names stay `--pbk-blue*`
     so existing rules keep working; only their values are remapped. */
  --pbk-blue:        #0E2949;   /* primary = deep navy           (was #2A6FDB) */
  --pbk-blue-dark:   #1a3a60;   /* primary hover                 (was #1F58B5) */
  --pbk-blue-darker: #051a31;   /* gradient endpoint / pressed   (was #174593) */
  --pbk-navy:        #0E2949;   /* alias                         */
  --pbk-gold:        #b8946a;   /* secondary accent (NEW)        */
  --pbk-gold-soft:   #d4b58a;   /* secondary hover (NEW)         */
  --pbk-cream:       #f5efe4;   /* warm bg (NEW)                 */
  --pbk-cream-2:     #ebe2d2;   /* deeper cream (NEW)            */
  --pbk-ink:         #0E2949;   /* primary text — now matches navy */
  --pbk-ink-2:       #3a4659;   /* secondary text (was #4a5263)  */
  --pbk-ink-3:       #7a8395;   /* hint text     (was #8a93a2)   */
  --pbk-line:        #e0d9c8;   /* cream-tinted line (was #e8e9ec) */
  --pbk-line-2:      #ece5d5;   /* lighter cream line (was #f0f1f4) */
  --pbk-r-md:        10px;
  --pbk-r-lg:        16px;
  --pbk-shadow-lg:   0 30px 60px rgba(15, 41, 73, 0.18), 0 8px 16px rgba(15, 41, 73, 0.08);
}

/* ---- Overlay ---- */
#phb-booking-modal-overlay {
  position: fixed !important; inset: 0 !important; z-index: 10000 !important;
  background: rgba(14, 41, 73, .55) !important;
  backdrop-filter: blur(6px) !important;
  display: grid !important; place-items: center !important;
  padding: 20px !important;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif !important;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
#phb-booking-modal-overlay.active {
  opacity: 1; pointer-events: auto;
}
#phb-booking-modal-overlay:not(.active) { display: none !important; }

/* ---- Modal container ----
   Overlay uses `place-items: center` (== align+justify center) so grid items
   shrink to content width. Force the modal to stretch within the grid track
   so width:100% + max-width:540px actually produce a consistent 540px width
   across all 3 steps (calendar vs. form vs. success). */
#phb-booking-modal-overlay .phb-booking-modal {
  width: 100% !important; max-width: 540px !important;
  justify-self: center !important;
  margin: 0 auto !important;
  background: #fff !important; border-radius: var(--pbk-r-lg) !important;
  box-shadow: var(--pbk-shadow-lg) !important;
  max-height: calc(100vh - 40px) !important;
  overflow: hidden !important;
  display: flex !important; flex-direction: column !important;
  transform: scale(.96) translateY(20px);
  transition: transform .25s cubic-bezier(.32,.72,.4,1);
}
/* Make the grid track itself stretch to overlay width so width:100% on the
   modal can resolve against the full overlay (not shrink-to-content). */
#phb-booking-modal-overlay {
  grid-template-columns: minmax(0, 1fr) !important;
}
#phb-booking-modal-overlay.active .phb-booking-modal {
  transform: scale(1) translateY(0);
}

/* ---- Header (modal-head) ---- */
#phb-booking-modal-overlay .phb-modal-header {
  background: linear-gradient(135deg, var(--pbk-blue), var(--pbk-blue-darker)) !important;
  color: #fff !important;
  padding: 20px 24px !important;
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  flex-shrink: 0 !important;
}
#phb-booking-modal-overlay .phb-modal-title {
  margin: 0 0 2px !important; font-size: 19px !important; font-weight: 700 !important;
  letter-spacing: -.01em !important; color: #fff !important;
}
#phb-booking-modal-overlay .phb-modal-subtitle {
  margin: 0 !important;
  font-size: 12px !important; opacity: .85 !important; letter-spacing: .04em !important;
  color: rgba(255,255,255,.9) !important;
}
#phb-booking-modal-overlay .phb-modal-close {
  width: 36px !important; height: 36px !important; border-radius: 50% !important;
  background: rgba(255,255,255,.18) !important; color: #fff !important;
  border: 0 !important; display: grid !important; place-items: center !important;
  font-size: 18px !important; cursor: pointer; flex-shrink: 0;
  transition: background .15s;
}
#phb-booking-modal-overlay .phb-modal-close:hover { background: rgba(255,255,255,.28) !important; }

/* ---- Body ---- */
#phb-booking-modal-overlay .phb-modal-body {
  padding: 22px 24px 24px !important;
  overflow-y: auto !important; flex: 1 !important;
  background: #fff !important;
}

/* ---- Step indicator (3 dots, injected by JS) ---- */
.phb-step-indicator {
  display: flex; gap: 6px;
  margin: 0 0 18px;
  padding: 0; list-style: none;
}
.phb-step-indicator .phb-step-dot {
  flex: 1; height: 4px; border-radius: 2px;
  background: var(--pbk-line);
  transition: background .25s;
}
.phb-step-indicator .phb-step-dot.active,
.phb-step-indicator .phb-step-dot.done {
  background: var(--pbk-blue);
}

/* ---- Popup steps ---- */
#phb-booking-modal-overlay .phb-popup-step { display: none !important; }
#phb-booking-modal-overlay .phb-popup-step.active { display: block !important; }

/* ============================================
   STEP 1 — Calendar
   Blue gradient extends edge-to-edge of modal body via negative margins.
   ============================================ */

/* Step indicator — pull flush to top of body (no gap above calendar) */
.phb-step-indicator {
  margin-top: -22px !important;
  margin-left: -24px !important;
  margin-right: -24px !important;
  margin-bottom: 0 !important;
  padding: 14px 24px 12px !important;
  background: linear-gradient(135deg, var(--pbk-blue), var(--pbk-blue-darker)) !important;
  border-radius: 0 !important;
}
.phb-step-indicator .phb-step-dot {
  background: rgba(255,255,255,.3) !important;
}
.phb-step-indicator .phb-step-dot.active,
.phb-step-indicator .phb-step-dot.done {
  background: #fff !important;
}

/* Extend calendar edge-to-edge: width:100% on the inner container resolves
   against the modal-body content area (540 − 48 = 492px). The negative
   horizontal margins shift the box left/right but don't enlarge it, so on
   their own they leave a 48px white gap on the right. We compensate by
   widening the element to 100% + 48px so the box truly spans the full modal. */
#phb-booking-modal-overlay .phb-calendar-container {
  width: calc(100% + 48px) !important;
  max-width: none !important;
  margin: 0 -24px 18px !important;
}
/* The popup-step that wraps the calendar centers its children by default;
   force it to stretch so width:100% + negative margins above land flush. */
#phb-booking-modal-overlay .phb-calendar-step {
  align-items: stretch !important;
  padding: 0 !important;
}
#phb-booking-modal-overlay .modern-calendar {
  background: linear-gradient(135deg, var(--pbk-blue), var(--pbk-blue-darker)) !important;
  color: #fff !important;
  padding: 18px 24px 18px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
  /* Kill the slideInUp that reveals the white body background */
  animation: none !important;
}

/* Calendar header — date display + month nav */
#phb-booking-modal-overlay .modern-calendar .calendar-header {
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
}
#phb-booking-modal-overlay .modern-calendar .date-range-display {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  gap: 12px !important; align-items: center !important;
  margin-bottom: 16px !important;
}
#phb-booking-modal-overlay .modern-calendar .selected-dates {
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: var(--pbk-r-md) !important;
  padding: 10px 14px !important;
  text-align: center !important;
}
#phb-booking-modal-overlay .modern-calendar .date-label {
  font-size: 10px !important; letter-spacing: .1em !important; text-transform: uppercase !important;
  opacity: .7 !important; margin-bottom: 2px !important; color: #fff !important;
}
#phb-booking-modal-overlay .modern-calendar .date-value {
  font-size: 16px !important; font-weight: 700 !important; color: #fff !important;
}
#phb-booking-modal-overlay .modern-calendar .date-separator {
  font-size: 18px !important; opacity: .7 !important; color: #fff !important;
  text-align: center !important;
}

/* Month navigation */
#phb-booking-modal-overlay .modern-calendar .month-navigation {
  display: flex !important; justify-content: space-between !important; align-items: center !important;
  margin-bottom: 14px !important;
  background: transparent !important;
}
#phb-booking-modal-overlay .modern-calendar .current-month {
  text-align: center !important; flex: 1 !important;
}
#phb-booking-modal-overlay .modern-calendar .month-name {
  font-size: 17px !important; font-weight: 700 !important; color: #fff !important;
}
#phb-booking-modal-overlay .modern-calendar .year {
  display: block !important;
  font-size: 12px !important; opacity: .7 !important; color: #fff !important; font-weight: 400 !important;
}
#phb-booking-modal-overlay .modern-calendar .month-navigation button {
  width: 32px !important; height: 32px !important; border-radius: 50% !important;
  background: rgba(255,255,255,.1) !important; color: #fff !important; border: 0 !important;
  display: grid !important; place-items: center !important;
  transition: background .15s; cursor: pointer;
}
#phb-booking-modal-overlay .modern-calendar .month-navigation button:hover {
  background: rgba(255,255,255,.2) !important;
}
#phb-booking-modal-overlay .modern-calendar .month-navigation button:disabled {
  opacity: .3 !important; cursor: not-allowed;
}

/* Calendar grid — weekdays + day cells */
#phb-booking-modal-overlay .modern-calendar .calendar-grid {
  background: transparent !important;
  padding: 0 !important;
}
#phb-booking-modal-overlay .modern-calendar .weekdays {
  display: grid !important; grid-template-columns: repeat(7, 1fr) !important;
  gap: 2px !important; margin-bottom: 4px !important;
}
#phb-booking-modal-overlay .modern-calendar .weekday {
  font-size: 10px !important; letter-spacing: .08em !important; text-transform: uppercase !important;
  opacity: .6 !important; text-align: center !important; padding: 6px 0 !important;
  color: #fff !important;
}
#phb-booking-modal-overlay .modern-calendar .days-grid {
  display: grid !important; grid-template-columns: repeat(7, 1fr) !important;
  gap: 2px !important;
}

/* Base day cell — each day is a .day div (state classes on the div, not the inner span) */
#phb-booking-modal-overlay .modern-calendar .day {
  aspect-ratio: 1 !important;
  display: grid !important; place-items: center !important;
  font-size: 13px !important; border-radius: 6px !important;
  cursor: pointer !important; color: rgba(255,255,255,.92) !important;
  background: transparent !important; border: 2px solid transparent !important;
  transition: background .12s, border-color .12s; transform: none !important;
}
#phb-booking-modal-overlay .modern-calendar .day:hover:not(.disabled):not(.unavailable):not(.selected) {
  background: rgba(255,255,255,.15) !important;
  transform: none !important;
}

/* Past / out-of-range dates */
#phb-booking-modal-overlay .modern-calendar .day.disabled {
  color: rgba(255,255,255,.25) !important;
  cursor: not-allowed !important;
  opacity: 1 !important; text-decoration: none !important;
}
#phb-booking-modal-overlay .modern-calendar .day.disabled:hover {
  background: transparent !important;
}

/* Booked / unavailable dates — clearly marked red */
#phb-booking-modal-overlay .modern-calendar .day.unavailable {
  color: #ffb4b4 !important;
  background: rgba(231,76,60,.18) !important;
  text-decoration: line-through !important;
  cursor: not-allowed !important;
  opacity: .85 !important;
}
#phb-booking-modal-overlay .modern-calendar .day.unavailable:hover {
  background: rgba(231,76,60,.18) !important;
  transform: none !important;
}

/* Other-month dates (greyed out) */
#phb-booking-modal-overlay .modern-calendar .day.other-month {
  opacity: .35 !important;
}

/* Today marker */
#phb-booking-modal-overlay .modern-calendar .day.today:not(.selected):not(.disabled) {
  border-color: rgba(255,255,255,.55) !important;
}

/* Selected start / end dates */
#phb-booking-modal-overlay .modern-calendar .day.selected {
  background: #fff !important;
  color: var(--pbk-blue-darker) !important;
  font-weight: 700 !important;
  border-color: transparent !important;
}

/* Dates within selected range */
#phb-booking-modal-overlay .modern-calendar .day.in-range {
  background: rgba(255,255,255,.25) !important;
  color: #fff !important;
  border-radius: 0 !important;
}

/* Hover-preview range while dragging second date */
#phb-booking-modal-overlay .modern-calendar .day.hover-range {
  background: rgba(255,255,255,.15) !important;
  border-color: rgba(255,255,255,.3) !important;
}

/* The inner .day-number span — just carries the text; don't style it as a cell */
#phb-booking-modal-overlay .modern-calendar .day-number {
  font-size: inherit !important; color: inherit !important;
  background: transparent !important; border: 0 !important;
  padding: 0 !important; line-height: 1 !important;
}

/* Calendar footer — actions */
#phb-booking-modal-overlay .modern-calendar .calendar-footer {
  display: flex !important; gap: 10px !important; margin-top: 14px !important;
  background: transparent !important; padding: 0 !important;
  border-top: 0 !important;
}
#phb-booking-modal-overlay .modern-calendar .calendar-footer button {
  flex: 1 !important;
  padding: 10px !important; border: 0 !important; border-radius: var(--pbk-r-md) !important;
  font-size: 12px !important; font-weight: 700 !important;
  letter-spacing: .06em !important; text-transform: uppercase !important;
  background: rgba(255,255,255,.12) !important; color: #fff !important;
  cursor: pointer; transition: background .15s, transform .1s;
  font-family: inherit !important;
}
#phb-booking-modal-overlay .modern-calendar .calendar-footer button:hover {
  background: rgba(255,255,255,.2) !important;
}
#phb-booking-modal-overlay .modern-calendar .calendar-footer .apply-dates {
  background: #fff !important; color: var(--pbk-blue-darker) !important;
}
#phb-booking-modal-overlay .modern-calendar .calendar-footer .apply-dates:hover {
  background: var(--pbk-cream) !important;
}
#phb-booking-modal-overlay .modern-calendar .calendar-footer button:disabled {
  opacity: .5 !important; cursor: not-allowed !important;
}

/* Hint text below calendar (injected by enhance.js) */
.phb-calendar-hint {
  text-align: center;
  font-size: 12px;
  color: var(--pbk-ink-3);
  margin-top: 0;
  padding: 0 4px;
  line-height: 1.5;
}

/* ============================================
   STEP 2 — Details form
   ============================================ */

/* Back button — pill above summary */
#phb-booking-modal-overlay .phb-step-navigation {
  margin-bottom: 14px !important;
}
#phb-booking-modal-overlay .phb-back-btn {
  background: var(--pbk-line-2) !important;
  color: var(--pbk-ink-2) !important;
  border: 0 !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
  font-size: 13px !important; font-weight: 600 !important;
  display: inline-flex !important; align-items: center !important; gap: 6px !important;
  cursor: pointer; transition: background .15s;
  font-family: inherit !important;
}
#phb-booking-modal-overlay .phb-back-btn:hover {
  background: var(--pbk-line) !important; color: var(--pbk-ink) !important;
}
#phb-booking-modal-overlay .phb-back-btn svg {
  width: 14px !important; height: 14px !important;
}

/* Summary box at top of form step — cream-tinted card to match navy/cream
   palette (was light Material-blue, clashed with the rest of the landing). */
#phb-booking-modal-overlay .phb-selected-dates-summary {
  background: var(--pbk-cream) !important;
  border: 1px solid var(--pbk-line) !important;
  border-radius: var(--pbk-r-md) !important;
  padding: 14px 16px !important;
  margin-bottom: 18px !important;
  display: flex !important; flex-direction: column !important; gap: 8px !important;
}
#phb-booking-modal-overlay .phb-dates-info {
  display: flex !important; flex-direction: column !important; gap: 4px !important;
  font-size: 13px !important;
}
#phb-booking-modal-overlay .phb-dates-text {
  font-weight: 600 !important; color: var(--pbk-navy) !important;
}
#phb-booking-modal-overlay .phb-nights-text {
  font-size: 12px !important; color: var(--pbk-ink-2) !important;
}
#phb-booking-modal-overlay .phb-total-price {
  display: flex !important; justify-content: space-between !important; align-items: baseline !important;
  font-size: 22px !important; font-weight: 700 !important;
  color: var(--pbk-blue) !important; letter-spacing: -.02em !important;
  padding-top: 10px !important; border-top: 1px dashed var(--pbk-line) !important;
  background: none !important; border-radius: 0 !important;
}

/* Guest options block — force light theme regardless of system dark mode */
#phb-booking-modal-overlay .phb-guest-options {
  background: var(--pbk-line-2) !important;
  border: 1px solid var(--pbk-line) !important;
  border-radius: var(--pbk-r-md) !important;
  padding: 14px 14px 6px !important;
  margin-bottom: 16px !important;
  color: var(--pbk-ink) !important;
}

/* Section labels — small uppercase headings */
#phb-booking-modal-overlay .phb-options-title {
  font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: .1em !important; text-transform: uppercase !important;
  color: var(--pbk-ink-3) !important;
  margin: 0 0 10px !important;
}
#phb-booking-modal-overlay .phb-guest-options {
  margin-bottom: 6px !important;
}
#phb-booking-modal-overlay .phb-guest-options .phb-options-title + .phb-extra-services {
  margin-top: 0 !important;
}
#phb-booking-modal-overlay .phb-guest-options .phb-persons-selector + .phb-options-title {
  margin-top: 18px !important;
}

/* Persons selector — toggle cards (1 / 2 / 3 osoby) */
#phb-booking-modal-overlay .phb-persons-selector {
  display: flex !important; gap: 8px !important;
  margin-bottom: 18px !important;
}
#phb-booking-modal-overlay .phb-person-option {
  flex: 1 !important;
  border: 1.5px solid var(--pbk-line) !important;
  background: #fff !important;
  border-radius: var(--pbk-r-md) !important;
  padding: 14px 8px !important;
  display: flex !important; flex-direction: column !important;
  align-items: center !important; gap: 6px !important;
  cursor: pointer !important; transition: all .15s;
}
#phb-booking-modal-overlay .phb-person-option:hover {
  border-color: var(--pbk-blue) !important; background: var(--pbk-cream) !important;
}
#phb-booking-modal-overlay .phb-person-option:has(input:checked),
#phb-booking-modal-overlay .phb-person-option.selected {
  border-color: var(--pbk-blue) !important; background: var(--pbk-cream-2) !important;
}
#phb-booking-modal-overlay .phb-person-option input {
  position: absolute !important; opacity: 0 !important; pointer-events: none !important;
  width: 1px !important; height: 1px !important;
}
#phb-booking-modal-overlay .phb-person-icon {
  display: flex !important; gap: 2px !important;
  color: var(--pbk-ink-3) !important;
}
#phb-booking-modal-overlay .phb-person-option:has(input:checked) .phb-person-icon,
#phb-booking-modal-overlay .phb-person-option.selected .phb-person-icon {
  color: var(--pbk-blue) !important;
}
#phb-booking-modal-overlay .phb-person-icon i {
  font-size: 14px !important;
}
/* Auto-generate label from title attribute */
#phb-booking-modal-overlay .phb-person-option::after {
  content: attr(title);
  font-size: 12px; font-weight: 600;
  color: var(--pbk-ink-2);
}
#phb-booking-modal-overlay .phb-person-option:has(input:checked)::after,
#phb-booking-modal-overlay .phb-person-option.selected::after {
  color: var(--pbk-blue) !important;
}

/* Extra services — pill chips (Pes, Prístelka) */
#phb-booking-modal-overlay .phb-extra-services {
  display: flex !important; gap: 8px !important; flex-wrap: wrap !important;
  margin-bottom: 18px !important;
}
#phb-booking-modal-overlay .phb-service-option {
  display: inline-flex !important; align-items: center !important; gap: 8px !important;
  padding: 9px 14px !important;
  border: 1.5px solid var(--pbk-line) !important;
  border-radius: 999px !important;
  font-size: 13px !important; font-weight: 600 !important;
  color: var(--pbk-ink-2) !important; background: #fff !important;
  cursor: pointer !important; transition: all .15s;
  position: relative;
}
#phb-booking-modal-overlay .phb-service-option:hover {
  border-color: var(--pbk-blue) !important; color: var(--pbk-blue) !important;
}
#phb-booking-modal-overlay .phb-service-option:has(input:checked),
#phb-booking-modal-overlay .phb-service-option.selected {
  border-color: var(--pbk-blue) !important;
  background: var(--pbk-cream-2) !important;
  color: var(--pbk-blue) !important;
}
#phb-booking-modal-overlay .phb-service-option input {
  position: absolute !important; opacity: 0 !important; pointer-events: none !important;
  width: 1px !important; height: 1px !important;
}
#phb-booking-modal-overlay .phb-service-icon i {
  font-size: 13px !important;
}

/* Form fields */
#phb-booking-modal-overlay .phb-form-group {
  margin-bottom: 14px !important;
}
#phb-booking-modal-overlay .phb-input-with-icon {
  position: relative !important;
}
#phb-booking-modal-overlay .phb-input-icon {
  position: absolute !important;
  left: 14px !important; top: 14px !important;
  color: var(--pbk-ink-3) !important;
  width: 18px !important; height: 18px !important;
  pointer-events: none !important;
}
#phb-booking-modal-overlay .phb-form-group input,
#phb-booking-modal-overlay .phb-form-group textarea,
#phb-booking-modal-overlay .phb-form-group select {
  width: 100% !important;
  border: 1px solid var(--pbk-line) !important;
  border-radius: var(--pbk-r-md) !important;
  padding: 12px 14px !important;
  font-size: 14px !important;
  font-family: inherit !important;
  color: var(--pbk-ink) !important;
  background: #fff !important;
  transition: border-color .15s, box-shadow .15s !important;
}
#phb-booking-modal-overlay .phb-input-with-icon input,
#phb-booking-modal-overlay .phb-input-with-icon textarea {
  padding-left: 42px !important;
}
#phb-booking-modal-overlay .phb-input-with-icon textarea {
  padding-top: 12px !important;
  min-height: 70px !important; resize: vertical !important;
}
#phb-booking-modal-overlay .phb-form-group input:focus,
#phb-booking-modal-overlay .phb-form-group textarea:focus,
#phb-booking-modal-overlay .phb-form-group select:focus {
  outline: none !important;
  border-color: var(--pbk-blue) !important;
  box-shadow: 0 0 0 3px rgba(14, 41, 73, .12) !important;
}
#phb-booking-modal-overlay .phb-input-with-icon:focus-within .phb-input-icon {
  color: var(--pbk-blue) !important;
}

/* Phone container */
#phb-booking-modal-overlay .phb-phone-input-container {
  position: relative !important;
}
#phb-booking-modal-overlay .phb-phone-input-container .iti {
  width: 100% !important;
}
#phb-booking-modal-overlay .phb-error-message,
#phb-booking-modal-overlay .phb-phone-error {
  margin-top: 4px !important;
  font-size: 12px !important;
  color: #dc2626 !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
}

/* Form submit button */
#phb-booking-modal-overlay .phb-form-submit {
  width: 100% !important;
  padding: 14px !important;
  border: 0 !important; border-radius: var(--pbk-r-md) !important;
  font-size: 14px !important; font-weight: 700 !important;
  letter-spacing: .06em !important; text-transform: uppercase !important;
  background: var(--pbk-blue) !important; color: #fff !important;
  cursor: pointer; transition: background .15s, transform .1s;
  margin-top: 6px !important;
  font-family: inherit !important;
}
#phb-booking-modal-overlay .phb-form-submit:hover {
  background: var(--pbk-blue-dark) !important;
}
#phb-booking-modal-overlay .phb-form-submit:active:not(:disabled) {
  transform: scale(.98);
}
#phb-booking-modal-overlay .phb-form-submit:disabled {
  background: var(--pbk-line) !important; color: var(--pbk-ink-3) !important;
  cursor: not-allowed !important;
}

/* ============================================
   STEP 3 — Success
   ============================================ */
#phb-booking-modal-overlay .phb-success-content {
  text-align: center !important; padding: 12px 0 !important;
}
#phb-booking-modal-overlay .phb-success-icon {
  width: 72px !important; height: 72px !important; border-radius: 50% !important;
  background: #e6f9f0 !important; color: #14b87a !important;
  display: grid !important; place-items: center !important;
  margin: 0 auto 16px !important;
}
#phb-booking-modal-overlay .phb-success-icon svg {
  width: 36px !important; height: 36px !important;
  stroke: #14b87a !important; fill: none !important; stroke-width: 2.5 !important;
}
#phb-booking-modal-overlay .phb-success-title {
  margin: 0 0 6px !important;
  font-size: 22px !important; font-weight: 700 !important;
  color: var(--pbk-navy) !important; letter-spacing: -.01em !important;
}

/* Success recap (summary populated by JS) */
#phb-booking-modal-overlay .phb-booking-summary {
  background: var(--pbk-cream) !important;
  border: 1px solid var(--pbk-line) !important;
  border-radius: var(--pbk-r-md) !important;
  padding: 16px 18px !important;
  margin: 16px 0 !important;
  text-align: left !important;
  font-size: 13px !important;
}
#phb-booking-modal-overlay .phb-booking-summary .summary-item {
  display: flex !important; justify-content: space-between !important;
  padding: 4px 0 !important;
  color: var(--pbk-ink-2) !important;
}
#phb-booking-modal-overlay .phb-booking-summary .summary-item strong,
#phb-booking-modal-overlay .phb-booking-summary .summary-item b {
  font-weight: 600 !important; color: var(--pbk-navy) !important;
}
#phb-booking-modal-overlay .phb-booking-summary .summary-item.total {
  border-top: 1px dashed var(--pbk-line) !important;
  margin-top: 8px !important; padding-top: 12px !important;
  font-size: 18px !important;
}
#phb-booking-modal-overlay .phb-booking-summary .summary-item.total strong {
  color: var(--pbk-blue) !important;
  font-size: 22px !important; font-weight: 700 !important; letter-spacing: -.02em !important;
}

/* Close success button */
#phb-booking-modal-overlay .phb-close-success {
  background: var(--pbk-blue) !important; color: #fff !important;
  border: 0 !important; border-radius: var(--pbk-r-md) !important;
  padding: 14px 28px !important;
  font-size: 14px !important; font-weight: 700 !important;
  letter-spacing: .06em !important; text-transform: uppercase !important;
  cursor: pointer; transition: background .15s, transform .1s;
  font-family: inherit !important;
  width: 100% !important;
  margin-top: 8px !important;
}
#phb-booking-modal-overlay .phb-close-success:hover {
  background: var(--pbk-blue-dark) !important;
}
#phb-booking-modal-overlay .phb-close-success:active {
  transform: scale(.98);
}

/* WhatsApp/Telegram hint at the bottom of success step (injected by enhance.js) */
.phb-success-contact-hint {
  margin-top: 18px;
  font-size: 13px;
  color: var(--pbk-ink-3);
  text-align: center;
}

/* ---- Force light theme even if user system is dark ---- */
@media (prefers-color-scheme: dark) {
  #phb-booking-modal-overlay .phb-booking-modal { background: #fff !important; color: var(--pbk-ink) !important; }
  #phb-booking-modal-overlay .phb-form-group input,
  #phb-booking-modal-overlay .phb-form-group select,
  #phb-booking-modal-overlay .phb-form-group textarea {
    background: #fff !important; color: var(--pbk-ink) !important; border-color: var(--pbk-line) !important;
  }
}

/* ---- Mobile breakpoint ---- */
@media (max-width: 480px) {
  #phb-booking-modal-overlay { padding: 0 !important; }
  #phb-booking-modal-overlay .phb-booking-modal {
    max-width: 100% !important; max-height: 100vh !important;
    border-radius: 0 !important; height: 100vh !important;
  }
  #phb-booking-modal-overlay .phb-modal-header { padding: 16px 18px !important; }
  #phb-booking-modal-overlay .phb-modal-title { font-size: 17px !important; }
  #phb-booking-modal-overlay .phb-modal-body { padding: 18px 18px 22px !important; }
  #phb-booking-modal-overlay .phb-calendar-container { width: calc(100% + 36px) !important; margin: 0 -18px 14px !important; }
  .phb-step-indicator { margin-left: -18px !important; margin-right: -18px !important; margin-top: -18px !important; padding-left: 18px !important; padding-right: 18px !important; }
  #phb-booking-modal-overlay .modern-calendar { padding: 18px !important; }
  #phb-booking-modal-overlay .phb-persons-selector { flex-wrap: wrap !important; }
  #phb-booking-modal-overlay .phb-person-option { min-width: calc(33% - 6px) !important; }
}

/* ============ CALENDAR SKELETON (booking modal — first paint) ============
   Overrides the plugin's default gray skeleton with a calendar-shaped layout
   that matches the loaded ModernCalendar 1:1, so the modal doesn't reflow
   when data arrives. Palette: white-on-navy gradient (same as the calendar
   surface), shimmer = brighter white pass. */

#phb-booking-modal-overlay .phb-calendar-skeleton {
  width: 100% !important;
  max-width: none !important;
  padding: 16px 24px 18px !important;
  background: linear-gradient(135deg, var(--pbk-blue), var(--pbk-blue-darker)) !important;
  border-radius: 0 !important;
  display: flex; flex-direction: column; gap: 14px;
  color: #fff;
}

/* Date-range row (CHECK-IN / arrow / CHECK-OUT) */
#phb-booking-modal-overlay .phb-calendar-skeleton .cs-range {
  display: grid; grid-template-columns: 1fr 28px 1fr;
  gap: 12px; align-items: center;
}
#phb-booking-modal-overlay .phb-calendar-skeleton .cs-range-card {
  height: 64px; border-radius: 10px;
}
#phb-booking-modal-overlay .phb-calendar-skeleton .cs-arrow {
  height: 24px; width: 24px; border-radius: 6px; margin: 0 auto;
}

/* Month header — prev / Month YYYY / next */
#phb-booking-modal-overlay .phb-calendar-skeleton .cs-month {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 4px 2px;
}
#phb-booking-modal-overlay .phb-calendar-skeleton .cs-nav {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
}
#phb-booking-modal-overlay .phb-calendar-skeleton .cs-title {
  height: 22px; width: 110px; border-radius: 6px;
}

/* Weekdays row */
#phb-booking-modal-overlay .phb-calendar-skeleton .cs-weekdays {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}
#phb-booking-modal-overlay .phb-calendar-skeleton .cs-wd {
  height: 12px; width: 60%; justify-self: center;
  border-radius: 4px; opacity: .7;
}

/* 6 × 7 day cells */
#phb-booking-modal-overlay .phb-calendar-skeleton .cs-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
#phb-booking-modal-overlay .phb-calendar-skeleton .cs-cell {
  aspect-ratio: 1; border-radius: 6px;
  min-height: 32px;
}

/* Footer (Clear / Apply) */
#phb-booking-modal-overlay .phb-calendar-skeleton .cs-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-top: 4px;
}
#phb-booking-modal-overlay .phb-calendar-skeleton .cs-btn {
  height: 40px; border-radius: 8px;
}

/* Shimmer surface — light-on-navy so the sweep is visible on dark bg */
#phb-booking-modal-overlay .phb-calendar-skeleton .sh {
  display: block;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.06) 0%,
      rgba(255,255,255,.22) 50%,
      rgba(255,255,255,.06) 100%
    ),
    rgba(255,255,255,.10);
  background-size: 200% 100%, 100% 100%;
  background-position: -150% 0, 0 0;
  background-repeat: no-repeat, no-repeat;
  animation: phb-cal-skel 1.6s ease-in-out infinite;
}
@keyframes phb-cal-skel {
  0%   { background-position: -150% 0, 0 0; }
  100% { background-position:  150% 0, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  #phb-booking-modal-overlay .phb-calendar-skeleton .sh { animation: none; }
}

/* Kill the plugin's old gray block / shimmer inside the modal so we never
   see the legacy state if it ever leaks through. */
#phb-booking-modal-overlay .phb-skeleton-block,
#phb-booking-modal-overlay .phb-skeleton-shimmer { display: none !important; }