/* ===== Luxury Boltholes skin for the Booking Brain calendar =====
   Scoped to #bb-cal-root; loaded AFTER the bundle CSS so it wins.
   Tokens pulled from LB main.css: body Avenir, headings Domaine (wt400),
   ink #494748, unavailable #b0b1b3, selection #cfe1e3, cell border #c7c6c5, 135deg diagonals. */

#bb-cal-root, #bb-cal-root *, #bb-cal-root *::before, #bb-cal-root *::after { box-sizing: border-box; }

#bb-cal-root {
  font-family: Avenir, Arial, Helvetica, sans-serif !important;
  color: #494748 !important;
  line-height: 1.7142857143 !important;
  background: #ffffff !important;
  /* neutralise BB's green brand variables -> LB charcoal (catches all var-based greens: dots, borders, focus rings) */
  --bofe-primary: #494748; --bofe-primary-dark: #2b2a26; --bofe-primary-lighter: #e8e6e2;
  --bofe-button-primary: #2b2a26; --bofe-button-hover: #000000;
  /* centre the widget in the section instead of hard-left */
  max-width: 680px; margin: 0 auto;
}

#bb-cal-root h1, #bb-cal-root h2, #bb-cal-root h3,
#bb-cal-root .h1, #bb-cal-root .h2, #bb-cal-root .h3 {
  font-family: Domaine, Georgia, "Times New Roman", Times, serif !important;
  font-weight: 400 !important;
  color: #2b2a26 !important;
}

/* --- weekday headers --- */
#bb-cal-root .react-datepicker__day-name {
  font-family: Avenir, Arial, sans-serif !important;
  font-size: .75rem !important; text-transform: uppercase; letter-spacing: .125rem;
  font-weight: 400; color: #494748 !important; background: transparent !important;
}

/* --- day cells: square, LB border, kill BB's radius/size --- */
#bb-cal-root .react-datepicker__day {
  width: auto !important; aspect-ratio: 1 / 1; line-height: 1.2 !important;
  display: flex !important; align-items: center; justify-content: center;
  border: 1px solid #c7c6c5 !important; border-radius: 0 !important; margin: 2px !important;
  background: #fafafa !important; color: #494748 !important;
  font-family: Avenir, Arial, sans-serif !important;
  font-size: .75rem !important; text-transform: uppercase; letter-spacing: .08rem; font-weight: 400;
  position: relative;
}
#bb-cal-root .react-datepicker__day:hover { background: #f0efee !important; border-radius: 0 !important; }

/* --- booked / unavailable → LB grey --- */
#bb-cal-root .react-datepicker__day.unavailabled,
#bb-cal-root .react-datepicker__day--disabled.unavailabled,
#bb-cal-root .react-datepicker__day.fully-booked,
#bb-cal-root .react-datepicker__day--excluded {
  background: #b0b1b3 !important; color: #6f6e6f !important;
}

/* --- existing-booking check-in/out diagonals (BB green 128deg → LB grey 135deg) --- */
#bb-cal-root .react-datepicker__day.prop_start_date { background: linear-gradient(135deg,#fafafa 50%,#b0b1b3 0) !important; }
#bb-cal-root .react-datepicker__day.prop_end_date   { background: linear-gradient(135deg,#b0b1b3 50%,#fafafa 0) !important; color:#494748 !important; }

/* --- user selection → LB pale teal (NOT green) --- */
#bb-cal-root .react-datepicker__day.user-selected-checkin  { background: linear-gradient(135deg,#fafafa 50%,#cfe1e3 0) !important; color:#494748 !important; box-shadow:none !important; }
#bb-cal-root .react-datepicker__day.user-selected-checkout { background: linear-gradient(135deg,#cfe1e3 50%,#fafafa 0) !important; color:#494748 !important; }
#bb-cal-root .react-datepicker__day.user-selected-range,
#bb-cal-root .react-datepicker__day--in-selecting-range,
#bb-cal-root .react-datepicker__day--in-range,
#bb-cal-root .react-datepicker__day--selected,
#bb-cal-root .react-datepicker__day--keyboard-selected { background:#cfe1e3 !important; color:#494748 !important; border-radius:0 !important; }

/* --- preferred check-in ring → LB change-over dash --- */
#bb-cal-root .react-datepicker__day.datepicker_circle::after {
  content:""; position:absolute; width:auto; height:1px; top:auto; bottom:18%; left:30%; right:30%;
  transform:none; border:0 !important; background:#595959 !important; border-radius:0 !important;
}
#bb-cal-root .react-datepicker__day:focus,
#bb-cal-root .react-datepicker__day:focus-visible { outline:2px solid #595959 !important; outline-offset:-2px; }

/* --- month header + calendar frame --- */
#bb-cal-root .react-datepicker,
#bb-cal-root .react-datepicker__header { background: transparent !important; border: 0 !important; font-family: Avenir, Arial, sans-serif !important; }
#bb-cal-root .react-datepicker__current-month { font-family: Avenir, Arial, sans-serif !important; text-transform: uppercase; letter-spacing:.12rem; font-weight:600; color:#494748 !important; }

/* --- primary "Book" button → LB charcoal solid, square --- */
#bb-cal-root .btn-primary, #bb-cal-root button[type="submit"],
#bb-cal-root .book-now, #bb-cal-root .bofe-book, #bb-cal-root .btn-book {
  background:#2b2a26 !important; border-color:#2b2a26 !important; color:#fff !important;
  border-radius:0 !important; letter-spacing:.1em; text-transform:uppercase; font-size:.8rem !important;
  font-family: Avenir, Arial, sans-serif !important; box-shadow:none !important; padding:.85rem 1.25rem !important;
}
#bb-cal-root .btn-primary:hover, #bb-cal-root button[type="submit"]:hover { background:#000 !important; }

/* --- form controls (nights/guests) → LB restrained --- */
#bb-cal-root .form-select, #bb-cal-root .form-control, #bb-cal-root select, #bb-cal-root input {
  border-radius:0 !important; border:1px solid #e2ded6 !important; font-family:Avenir,Arial,sans-serif !important;
  color:#2b2a26 !important; box-shadow:none !important;
}

/* --- price / labels → LB ink; strip BB green text --- */
#bb-cal-root .text-success, #bb-cal-root .available, #bb-cal-root [class*="green"] { color:#494748 !important; }

/* --- confirmation screen --- */
#bb-cal-root .lb-confirm { text-align:center; padding:48px 20px; max-width:520px; margin:0 auto; }
#bb-cal-root .lb-confirm__tick { width:56px; height:56px; border-radius:50%; background:#eef3ec; color:#3d5a37;
  display:flex; align-items:center; justify-content:center; font-size:28px; margin:0 auto 18px; }
#bb-cal-root .lb-confirm .h2 { font-size:1.875rem !important; margin-bottom:10px; }
#bb-cal-root .lb-confirm__line { font-size:1.05rem; color:#2b2a26; }
#bb-cal-root .lb-confirm__sub { color:#9a9184; font-size:.85rem; margin-top:8px; }

/* ===== specificity win: doubled-id (2 ids) beats BB's deep :not() chains (~190) + hardcoded #15803d greens ===== */
#bb-cal-root#bb-cal-root .react-datepicker__day { color:#494748 !important; background:#fafafa !important; }
#bb-cal-root#bb-cal-root .react-datepicker__day.unavailabled,
#bb-cal-root#bb-cal-root .react-datepicker__day--disabled.unavailabled,
#bb-cal-root#bb-cal-root .react-datepicker__day.fully-booked { color:#6f6e6f !important; background:#b0b1b3 !important; }
#bb-cal-root#bb-cal-root .react-datepicker__day.prop_start_date { color:#494748 !important; background:linear-gradient(135deg,#fafafa 50%,#b0b1b3 0) !important; }
#bb-cal-root#bb-cal-root .react-datepicker__day.prop_end_date,
#bb-cal-root#bb-cal-root .react-datepicker__day.prop_end_date.datepicker_circle { color:#494748 !important; background:linear-gradient(135deg,#b0b1b3 50%,#fafafa 0) !important; }
#bb-cal-root#bb-cal-root .react-datepicker__day.user-selected-checkin { color:#494748 !important; background:linear-gradient(135deg,#fafafa 50%,#cfe1e3 0) !important; }
#bb-cal-root#bb-cal-root .react-datepicker__day.user-selected-checkout { color:#494748 !important; background:linear-gradient(135deg,#cfe1e3 50%,#fafafa 0) !important; }
#bb-cal-root#bb-cal-root .react-datepicker__day.user-selected-range,
#bb-cal-root#bb-cal-root .react-datepicker__day--in-range,
#bb-cal-root#bb-cal-root .react-datepicker__day--selected { color:#494748 !important; background:#cfe1e3 !important; }
/* kill any remaining green info dot / success text */
#bb-cal-root#bb-cal-root [class*="circle"], #bb-cal-root#bb-cal-root .text-success { background-color:#494748 !important; color:#494748 !important; }

/* ===== guest dropdown: its Tailwind utility classes aren't bundled -> restyle the essentials ===== */
#bb-cal-root [class*="top-full"][class*="absolute"] {
  position:absolute !important; top:100% !important; left:0; margin-top:.5rem; z-index:9999;
  background:#fff !important; border:1px solid #e2ded6 !important; border-radius:0 !important;
  box-shadow:0 14px 34px -10px rgba(0,0,0,.28) !important; padding:1.1rem 1.25rem !important; width:100%; max-width:320px;
}
/* each guest row: label left, stepper right */
#bb-cal-root [class*="justify-between"][class*="items-center"] { display:flex !important; justify-content:space-between !important; align-items:center !important; margin-bottom:1rem; gap:.75rem; }
/* stepper cluster */
#bb-cal-root [class*="items-center"][class*="gap-"] { display:flex !important; align-items:center !important; gap:.65rem !important; }
/* the − / + buttons: circular, spaced, charcoal (kill the green hover) */
#bb-cal-root [class*="rounded-full"][class*="border"] {
  width:2rem !important; height:2rem !important; min-width:2rem; border-radius:9999px !important;
  border:1px solid #c7c6c5 !important; background:#fff !important; color:#494748 !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  flex:0 0 auto !important; font-size:1.05rem !important; line-height:1 !important; padding:0 !important;
}
#bb-cal-root [class*="rounded-full"][class*="border"]:hover { border-color:#595959 !important; }
/* the count number between the buttons */
#bb-cal-root [class*="text-center"] { min-width:1.6rem; text-align:center !important; color:#494748 !important; }
#bb-cal-root [class*="font-semibold"] { font-weight:600 !important; color:#2b2a26 !important; }

/* ===== selected check-in/out days: kill react-datepicker's green outline/ring -> LB teal border ===== */
#bb-cal-root#bb-cal-root .react-datepicker__day.user-selected-checkin,
#bb-cal-root#bb-cal-root .react-datepicker__day.user-selected-checkout,
#bb-cal-root#bb-cal-root .react-datepicker__day--selected,
#bb-cal-root#bb-cal-root .react-datepicker__day--keyboard-selected,
#bb-cal-root#bb-cal-root .react-datepicker__day--range-start,
#bb-cal-root#bb-cal-root .react-datepicker__day--range-end {
  border:1px solid #9fc0c4 !important; outline:0 !important; box-shadow:none !important;
}

/* ===== Mobile: reclaim the dead side margins (Chris, 10 Jul) =====
   LB's .c-content-block is width:72.27% -> 54px dead space each side at 390px.
   On phones give content the screen minus a 20px gutter. Desktop untouched. */
@media (max-width: 640px) {
  .c-content-block, .l-container, .l-container-s, .l-container-m, .l-container-text,
  .c-section__columns-d, .c-section__columns-heading {
    width: calc(100% - 40px) !important;
    max-width: none !important;
  }
  .c-property-header__main { width: 100% !important; max-width: none !important; padding-right: 0 !important; }
}

/* ===== Issue #9: the form-mode date input opened an unstyled, clipped popup calendar.
   The popup is suppressed — the LB 3-month calendar below is THE date picker; clicking
   the input scrolls there (script in the page) and pulses it so guests see where to look. */
#bb-cal-root .react-datepicker-popper,
#bb-cal-root .react-datepicker__portal { display: none !important; }
.bb-cal-pulse { animation: bbcalpulse 1.1s ease-in-out 2; }
@keyframes bbcalpulse { 50% { box-shadow: 0 0 0 5px rgba(43,42,38,.22); } }

/* ===== Issue #10: the widget's inline calendar is BACK (BoE-style, right-hand side).
   On phones only, it stays hidden — the LB 3-month calendar below is the picker there
   (Chris, 10 Jul: no double calendar on mobile). */
@media (max-width: 640px) {
  #bb-cal-root .react-datepicker--inline,
  #bb-cal-root .react-datepicker__month-container,
  #bb-cal-root .cal-legend, #bb-cal-root [class*="calendar-legend"] { display: none !important; }
}

/* ===== Issue #12: tighter mobile widget. The hidden inline calendar's wrapper (and the
   month-jump dropdown that serves it) still reserved blank space on phones — collapse
   them fully and trim the card padding so the booking form starts immediately. */
@media (max-width: 640px) {
  #bb-cal-root div:has(> .react-datepicker--inline) { display: none !important; }
  #bb-cal-root [class*="month-dropdown"], #bb-cal-root select[id*="month"] { display: none !important; }
  #bb-cal-root .card { padding-top: 14px !important; }
  #bb-cal-root .card > h3:empty { display: none !important; }
}

/* ===== Issue #13: at larger phone widths the menu drawer's lower content (Property
   shortlist, Follow us, Find property by name) sat below the fold with NO way to
   scroll to it (drawer overflow was 'visible' while body scroll is locked). */
.c-drawer { overflow-y: auto !important; -webkit-overflow-scrolling: touch; }