/*
 * ============================================================
 * STELLA CALENDAR
 * ============================================================
 *
 * Shared styling for:
 *
 * 1. Main calendar on /book-now
 * 2. Hero availability popup calendar
 * 3. Interaction behaviour of reusable date triggers
 *
 * Scope
 * -----
 * Main booking calendar:
 * #stella-booking-v3
 *
 * Hero popup:
 * .stella-hero-calendar-overlay
 *
 * Hero search inputs:
 * [data-stella-checkin]
 * [data-stella-checkout]
 *
 * Important
 * ---------
 * - Does NOT visually style the Webflow search bar.
 * - Does NOT alter global buttons, inputs, headings or forms.
 * - Calendar styling is fully component-scoped.
 * - Only body.stella-calendar-open is global.
 *
 * ============================================================
 */


/*
 * ============================================================
 * 1. MAIN CALENDAR ROOT
 * ============================================================
 */

#stella-booking-v3,
#stella-booking-v3 * {
  box-sizing: border-box;
}


#stella-booking-v3 {
  --stella-dark: #183741;
  --stella-gold: #bc9e59;
  --stella-white: #ffffff;

  --stella-range:
    rgba(188, 158, 89, 0.16);

  --stella-muted:
    rgba(24, 55, 65, 0.58);

  --stella-hover:
    rgba(24, 55, 65, 0.06);

  width: 100%;
  min-width: 0;

  color:
    var(--stella-dark);

  font-family:
    "URW Gothic",
    sans-serif;
}


/*
 * ============================================================
 * 2. REUSABLE HERO DATE TRIGGERS
 * ============================================================
 *
 * Visual design remains fully controlled by Webflow.
 * These rules only correct browser interaction behaviour.
 */

[data-stella-checkin],
[data-stella-checkout],
.stella-search-trigger,
.stella-search-trigger[readonly] {
  cursor: pointer !important;

  caret-color: transparent;

  user-select: none;
  -webkit-user-select: none;

  -webkit-user-drag: none;
}


/*
 * Additional safeguard against a browser
 * prohibited / disabled cursor.
 *
 * JavaScript removes disabled anyway.
 */

[data-stella-checkin]:disabled,
[data-stella-checkout]:disabled {
  cursor: pointer !important;
}


/*
 * ============================================================
 * 3. HERO POPUP ROOT
 * ============================================================
 */

.stella-hero-calendar-overlay,
.stella-hero-calendar-overlay * {
  box-sizing: border-box;
}


.stella-hero-calendar-overlay {
  --stella-dark: #183741;
  --stella-gold: #bc9e59;
  --stella-white: #ffffff;

  --stella-range:
    rgba(188, 158, 89, 0.16);

  --stella-muted:
    rgba(24, 55, 65, 0.58);

  --stella-hover:
    rgba(24, 55, 65, 0.06);

  position: fixed;

  inset: 0;

  z-index: 9999;

  display: none;

  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;

  padding: 2em;

  background:
    rgba(8, 18, 21, 0.52);

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);

  color:
    var(--stella-dark);

  font-family:
    "URW Gothic",
    sans-serif;
}


.stella-hero-calendar-overlay.is-open {
  display: flex;
}


/*
 * Only intentionally global rule.
 */

body.stella-calendar-open {
  overflow: hidden;
}


/*
 * ============================================================
 * 4. HERO POPUP PANEL
 * ============================================================
 */

.stella-hero-calendar-overlay
.stella-hero-calendar {
  position: relative;

  width:
    min(
      62em,
      100%
    );

  max-height:
    calc(100dvh - 4em);

  overflow-y: auto;

  padding:
    2.2em
    2.4em
    2.5em;

  border-radius:
    1.25em;

  background:
    #f7f5f1;

  box-shadow:
    0
    2em
    5em
    rgba(0, 0, 0, 0.24);
}


/*
 * ============================================================
 * 5. HERO POPUP HEADER
 * ============================================================
 */

.stella-hero-calendar-overlay
.stella-hero-calendar__header {
  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 2em;

  margin-bottom:
    1.5em;
}


.stella-hero-calendar-overlay
.stella-hero-calendar__eyebrow {
  margin:
    0
    0
    0.65em;

  color:
    var(--stella-gold);

  font-size:
    0.68em;

  font-weight:
    700;

  line-height:
    1.2;

  letter-spacing:
    0.18em;

  text-transform:
    uppercase;
}


.stella-hero-calendar-overlay
.stella-hero-calendar__title {
  margin: 0;

  color:
    var(--stella-dark);

  font-family:
    "URW Gothic",
    sans-serif;

  font-size:
    clamp(
      1.7em,
      3vw,
      2.35em
    );

  font-weight:
    700;

  line-height:
    1.08;

  letter-spacing:
    0;
}


/*
 * CLOSE BUTTON
 */

.stella-hero-calendar-overlay
.stella-hero-calendar__close {
  width:
    2.5em;

  height:
    2.5em;

  flex:
    none;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0;

  border:
    0;

  border-radius:
    0.5em;

  background:
    transparent;

  color:
    var(--stella-dark);

  font-family:
    "URW Gothic",
    sans-serif;

  font-size:
    1.35em;

  font-weight:
    400;

  line-height:
    1;

  cursor:
    pointer;

  transition:
    background-color
    120ms
    ease;
}


.stella-hero-calendar-overlay
.stella-hero-calendar__close:hover {
  background:
    var(--stella-hover);
}


/*
 * HERO POPUP
 */

.stella-hero-calendar-overlay
.stella-hero-calendar__status {
  display:
    none;

  margin:
    1.4em
    0
    0;

  padding:
    0.8em
    1em;

  border-radius:
    0.75em;

  background:
    rgba(188, 158, 89, 0.12);

  color:
    var(--stella-dark);

  font-size:
    0.85em;

  line-height:
    1.4;

  text-align:
    center;
}


.stella-hero-calendar-overlay
.stella-hero-calendar__status.is-visible {
  display:
    block;
}


.stella-hero-calendar-overlay
.stella-hero-calendar__status.is-error {
  background:
    rgba(150, 50, 50, 0.09);

  color:
    #773434;
}

/*
 * ============================================================
 * 7. INSTRUCTION BAR
 * ============================================================
 */


/*
 * MAIN BOOKING CALENDAR
 *
 * The wrapper reserves a fixed amount of
 * vertical space for the instruction.
 *
 * This prevents the calendar below from
 * moving when the instruction changes
 * between one and two lines.
 */

#stella-booking-v3
.stella-booking__instruction-slot {
  width:
    100%;

  height:
    4.0em;

  display:
    flex;

  align-items:
    center;

  margin:
    0
    0
    1.4em;
}


#stella-booking-v3
.stella-booking__instruction {
  width:
    100%;

  box-sizing:
    border-box;

  margin:
    0;

  padding:
    0.9em
    1em;

  border-radius:
    0.7em;

  background:
    var(--stella-dark);

  color:
    var(--stella-white);

  font-family:
    "URW Gothic",
    sans-serif;

  font-size:
    0.78em;

  font-weight:
    700;

  line-height:
    1.35;

  letter-spacing:
    0.06em;

  text-align:
    center;
}


/*
 * HERO CALENDAR
 *
 * Keep existing behaviour unchanged.
 */

.stella-hero-calendar-overlay
.stella-hero-calendar__instruction {
  width:
    100%;

  margin:
    0
    0
    1.4em;

  padding:
    0.9em
    1em;

  border-radius:
    0.7em;

  background:
    var(--stella-dark);

  color:
    var(--stella-white);

  font-family:
    "URW Gothic",
    sans-serif;

  font-size:
    0.78em;

  font-weight:
    700;

  line-height:
    1.35;

  letter-spacing:
    0.06em;

  text-align:
    center;
}

/*
 * ============================================================
 * 8. MAIN CALENDAR NAVIGATION
 * ============================================================
 */

#stella-booking-v3
.stella-booking__navigation {
  display:
    grid;

  grid-template-columns:
    2.5em
    minmax(0, 1fr)
    2.5em;

  align-items:
    center;

  gap:
    1em;

  width:
    100%;

  min-width:
    0;

  margin-bottom:
    1.35em;
}


#stella-booking-v3
.stella-booking__headings {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap:
    2em;

  width:
    100%;

  min-width:
    0;
}


/*
 * MONTH TITLES
 */

#stella-booking-v3
.stella-booking__month-title {
  min-width:
    0;

  overflow:
    hidden;

  color:
    var(--stella-dark);

  font-family:
    "URW Gothic",
    sans-serif;

  font-size:
    clamp(
      0.72em,
      1.25vw,
      0.9em
    );

  font-weight:
    700;

  line-height:
    1.2;

  letter-spacing:
    0.18em;

  text-align:
    center;

  text-transform:
    uppercase;

  white-space:
    nowrap;
}


/*
 * ============================================================
 * 9. MAIN CALENDAR ARROWS
 * ============================================================
 */

#stella-booking-v3
.stella-booking__arrow {
  width:
    2.5em;

  height:
    2.5em;

  padding:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    0;

  border-radius:
    0.5em;

  background:
    transparent;

  color:
    var(--stella-dark);

  cursor:
    pointer;

  transition:
    background-color
    120ms
    ease;
}


#stella-booking-v3
.stella-booking__arrow svg {
  width:
    1.2em;

  height:
    1.2em;

  fill:
    none;

  stroke:
    currentColor;

  stroke-width:
    2;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


#stella-booking-v3
.stella-booking__arrow:hover {
  background:
    var(--stella-hover);
}


/*
 * ============================================================
 * 10. HERO CALENDAR NAVIGATION
 * ============================================================
 */

.stella-hero-calendar-overlay
.stella-hero-calendar__calendar-nav {
  display:
    grid;

  grid-template-columns:
    2.5em
    minmax(0, 1fr)
    2.5em;

  align-items:
    start;

  gap:
    1em;

  width:
    100%;

  min-width:
    0;
}


.stella-hero-calendar-overlay
.stella-hero-calendar__previous,

.stella-hero-calendar-overlay
.stella-hero-calendar__next {
  width:
    2.5em;

  height:
    2.5em;

  padding:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    0;

  border-radius:
    0.5em;

  background:
    transparent;

  color:
    var(--stella-dark);

  font-family:
    "URW Gothic",
    sans-serif;

  font-size:
    1.35em;

  line-height:
    1;

  cursor:
    pointer;

  transition:
    background-color
    120ms
    ease;
}


.stella-hero-calendar-overlay
.stella-hero-calendar__previous:hover,

.stella-hero-calendar-overlay
.stella-hero-calendar__next:hover {
  background:
    var(--stella-hover);
}


/*
 * ============================================================
 * 11. MONTH LAYOUT
 * ============================================================
 */


/*
 * MAIN
 */

#stella-booking-v3
.stella-booking__months {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap:
    2em;

  width:
    100%;

  min-width:
    0;
}


#stella-booking-v3
.stella-booking__month {
  width:
    100%;

  min-width:
    0;
}


/*
 * HERO
 */

.stella-hero-calendar-overlay
.stella-hero-calendar__months {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap:
    2em;

  width:
    100%;

  min-width:
    0;
}


.stella-hero-calendar-overlay
.stella-hero-calendar__month {
  width:
    100%;

  min-width:
    0;
}


.stella-hero-calendar-overlay
.stella-hero-calendar__month-title {
  min-width:
    0;

  overflow:
    hidden;

  margin-bottom:
    1.35em;

  color:
    var(--stella-dark);

  font-family:
    "URW Gothic",
    sans-serif;

  font-size:
    clamp(
      0.72em,
      1.25vw,
      0.9em
    );

  font-weight:
    700;

  line-height:
    1.2;

  letter-spacing:
    0.18em;

  text-align:
    center;

  text-transform:
    uppercase;

  white-space:
    nowrap;
}


/*
 * ============================================================
 * 12. SHARED CALENDAR GRID
 * ============================================================
 */

#stella-booking-v3
.stella-booking__grid,

.stella-hero-calendar-overlay
.stella-booking__grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      7,
      minmax(0, 1fr)
    );

  grid-auto-rows:
    3em;

  width:
    100%;

  min-width:
    0;
}


/*
 * ============================================================
 * 13. SHARED WEEKDAYS
 * ============================================================
 */

#stella-booking-v3
.stella-booking__weekday,

.stella-hero-calendar-overlay
.stella-booking__weekday {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  min-width:
    0;

  color:
    var(--stella-muted);

  font-family:
    "URW Gothic",
    sans-serif;

  font-size:
    0.64em;

  font-weight:
    700;

  line-height:
    1;

  letter-spacing:
    0.08em;

  text-align:
    center;

  text-transform:
    uppercase;
}


/*
 * ============================================================
 * 14. SHARED DAYS
 * ============================================================
 */

#stella-booking-v3
.stella-booking__day,

.stella-hero-calendar-overlay
.stella-booking__day {
  width:
    100%;

  min-width:
    0;

  min-height:
    3em;

  padding:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    0;

  border-radius:
    0;

  background:
    transparent;

  color:
    var(--stella-dark);

  font-family:
    "URW Gothic",
    sans-serif;

  font-size:
    0.9em;

  font-weight:
    500;

  line-height:
    1;

  cursor:
    default;

  transition:
    background-color
    120ms
    ease,
    color
    120ms
    ease;
}


/*
 * AVAILABLE
 */

#stella-booking-v3
.stella-booking__day.is-available,

.stella-hero-calendar-overlay
.stella-booking__day.is-available {
  cursor:
    pointer;
}


#stella-booking-v3
.stella-booking__day.is-available:hover,

.stella-hero-calendar-overlay
.stella-booking__day.is-available:hover {
  background:
    var(--stella-hover);
}


/*
 * TODAY
 */

#stella-booking-v3
.stella-booking__day.is-today,

.stella-hero-calendar-overlay
.stella-booking__day.is-today {
  font-weight:
    700;
}


/*
 * PAST
 */

#stella-booking-v3
.stella-booking__day.is-past,

.stella-hero-calendar-overlay
.stella-booking__day.is-past {
  color:
    rgba(24, 55, 65, 0.20);

  cursor:
    not-allowed;
}


/*
 * UNAVAILABLE
 */

#stella-booking-v3
.stella-booking__day.is-unavailable,

.stella-hero-calendar-overlay
.stella-booking__day.is-unavailable {
  color:
    rgba(24, 55, 65, 0.34);

  cursor:
    not-allowed;

  text-decoration:
    line-through;

  text-decoration-thickness:
    1px;
}


/*
 * CHECKOUT ONLY
 */

#stella-booking-v3
.stella-booking__day.is-checkout-available,

.stella-hero-calendar-overlay
.stella-booking__day.is-checkout-available {
  color:
    var(--stella-dark);

  cursor:
    pointer;

  text-decoration:
    none;
}


#stella-booking-v3
.stella-booking__day.is-checkout-available:hover,

.stella-hero-calendar-overlay
.stella-booking__day.is-checkout-available:hover {
  background:
    var(--stella-hover);
}


/*
 * OUTSIDE MONTH
 */

#stella-booking-v3
.stella-booking__day.is-outside,

.stella-hero-calendar-overlay
.stella-booking__day.is-outside {
  visibility:
    hidden;

  pointer-events:
    none;
}


/*
 * ============================================================
 * 15. SHARED RANGE
 * ============================================================
 */

#stella-booking-v3
.stella-booking__day.is-range,

#stella-booking-v3
.stella-booking__day.is-preview,

.stella-hero-calendar-overlay
.stella-booking__day.is-range,

.stella-hero-calendar-overlay
.stella-booking__day.is-preview {
  background:
    var(--stella-range);
}


/*
 * RANGE START + END
 */

#stella-booking-v3
.stella-booking__day.is-range-start,

#stella-booking-v3
.stella-booking__day.is-range-end,

.stella-hero-calendar-overlay
.stella-booking__day.is-range-start,

.stella-hero-calendar-overlay
.stella-booking__day.is-range-end {
  position:
    relative;

  z-index:
    2;

  background:
    var(--stella-gold);

  color:
    var(--stella-white);

  text-decoration:
    none;
}


/*
 * START
 */

#stella-booking-v3
.stella-booking__day.is-range-start,

.stella-hero-calendar-overlay
.stella-booking__day.is-range-start {
  border-radius:
    0.6em
    0
    0
    0.6em;
}


/*
 * END
 */

#stella-booking-v3
.stella-booking__day.is-range-end,

.stella-hero-calendar-overlay
.stella-booking__day.is-range-end {
  border-radius:
    0
    0.6em
    0.6em
    0;
}


/*
 * START + END SAME CELL
 */

#stella-booking-v3
.stella-booking__day.is-range-start.is-range-end,

.stella-hero-calendar-overlay
.stella-booking__day.is-range-start.is-range-end {
  border-radius:
    0.6em;
}


/*
 * SELECTED HOVER
 */

#stella-booking-v3
.stella-booking__day.is-range-start:hover,

#stella-booking-v3
.stella-booking__day.is-range-end:hover,

.stella-hero-calendar-overlay
.stella-booking__day.is-range-start:hover,

.stella-hero-calendar-overlay
.stella-booking__day.is-range-end:hover {
  background:
    var(--stella-gold);

  color:
    var(--stella-white);
}


/*
 * CHECKOUT DATE USED AS RANGE END
 */

#stella-booking-v3
.stella-booking__day.is-checkout-available.is-range-end,

.stella-hero-calendar-overlay
.stella-booking__day.is-checkout-available.is-range-end {
  background:
    var(--stella-gold);

  color:
    var(--stella-white);

  text-decoration:
    none;
}


/*
 * ============================================================
 * 16. ACCESSIBILITY FOCUS
 * ============================================================
 */

#stella-booking-v3
.stella-booking__day:focus-visible,

#stella-booking-v3
.stella-booking__arrow:focus-visible,

.stella-hero-calendar-overlay
.stella-booking__day:focus-visible,

.stella-hero-calendar-overlay
.stella-hero-calendar__previous:focus-visible,

.stella-hero-calendar-overlay
.stella-hero-calendar__next:focus-visible,

.stella-hero-calendar-overlay
.stella-hero-calendar__close:focus-visible {
  outline:
    2px
    solid
    var(--stella-gold);

  outline-offset:
    2px;
}


/*
 * ============================================================
 * 17. MAIN CALENDAR LEGEND
 * ============================================================
 */

#stella-booking-v3
.stella-booking__legend {
  display:
    flex;

  justify-content:
    center;

  flex-wrap:
    wrap;

  gap:
    0.8em
    1.4em;

  margin-top:
    1.4em;

  color:
    rgba(24, 55, 65, 0.68);

  font-family:
    "Fraunces",
    Georgia,
    serif;

  font-size:
    0.82em;
}


#stella-booking-v3
.stella-booking__legend span {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    0.45em;
}


#stella-booking-v3
.stella-booking__legend-mark {
  width:
    0.75em;

  height:
    0.75em;

  display:
    inline-block;

  flex:
    none;
}


#stella-booking-v3
.stella-booking__legend-mark--available {
  border:
    1px
    solid
    rgba(24, 55, 65, 0.20);

  border-radius:
    0.2em;

  background:
    transparent;
}


#stella-booking-v3
.stella-booking__legend-mark--unavailable {
  position:
    relative;
}


#stella-booking-v3
.stella-booking__legend-mark--unavailable::after {
  content:
    "";

  position:
    absolute;

  top:
    50%;

  left:
    0;

  width:
    100%;

  height:
    1px;

  background:
    rgba(24, 55, 65, 0.45);

  transform:
    translateY(-50%);
}


#stella-booking-v3
.stella-booking__legend-mark--selected {
  border-radius:
    0.2em;

  background:
    var(--stella-gold);
}


/*
 * ============================================================
 * 18. TABLET / MOBILE
 * ============================================================
 */

@media screen and (max-width: 767px) {

  /*
   * MAIN CALENDAR
   */

  #stella-booking-v3
  .stella-booking__navigation {
    gap:
      0.25em;
  }


  #stella-booking-v3
  .stella-booking__headings {
    grid-template-columns:
      1fr;
  }


  #stella-booking-v3
  [data-title-right],

  #stella-booking-v3
  [data-month-right] {
    display:
      none;
  }


  #stella-booking-v3
  .stella-booking__months {
    grid-template-columns:
      1fr;
  }


  #stella-booking-v3
  .stella-booking__month-title {
    font-size:
      0.78em;

    letter-spacing:
      0.14em;
  }


  /*
   * HERO POPUP
   */

  .stella-hero-calendar-overlay {
    align-items:
      flex-end;

    padding:
      0.75em;
  }


  .stella-hero-calendar-overlay
  .stella-hero-calendar {
    width:
      100%;

    max-height:
      calc(100dvh - 1.5em);

    padding:
      1.6em
      1.25em
      1.8em;

    border-radius:
      1.1em;
  }


  .stella-hero-calendar-overlay
  .stella-hero-calendar__header {
    margin-bottom:
      1.2em;
  }


  .stella-hero-calendar-overlay
  .stella-hero-calendar__title {
    font-size:
      1.8em;
  }


  .stella-hero-calendar-overlay
  .stella-hero-calendar__calendar-nav {
    grid-template-columns:
      2.25em
      minmax(0, 1fr)
      2.25em;

    gap:
      0.25em;
  }


  .stella-hero-calendar-overlay
  .stella-hero-calendar__months {
    grid-template-columns:
      1fr;

    gap:
      0;
  }


  .stella-hero-calendar-overlay
  .stella-hero-calendar__month:nth-child(2) {
    display:
      none;
  }


  .stella-hero-calendar-overlay
  .stella-hero-calendar__month-title {
    font-size:
      0.78em;

    letter-spacing:
      0.14em;
  }


  /*
   * SHARED DAY GRID
   */

  #stella-booking-v3
  .stella-booking__grid,

  .stella-hero-calendar-overlay
  .stella-booking__grid {
    grid-auto-rows:
      3em;
  }


  #stella-booking-v3
  .stella-booking__day,

  .stella-hero-calendar-overlay
  .stella-booking__day {
    font-size:
      0.86em;
  }
}


/*
 * ============================================================
 * 19. SMALL MOBILE
 * ============================================================
 */

@media screen and (max-width: 479px) {

  .stella-hero-calendar-overlay {
    align-items:
      stretch;

    padding:
      0;
  }


  .stella-hero-calendar-overlay
  .stella-hero-calendar {
    width:
      100%;

    min-height:
      100dvh;

    max-height:
      100dvh;

    padding:
      1.5em
      1em
      2em;

    border-radius:
      0;
  }


  .stella-hero-calendar-overlay
  .stella-hero-calendar__eyebrow {
    font-size:
      0.6em;
  }


  .stella-hero-calendar-overlay
  .stella-hero-calendar__title {
    font-size:
      1.65em;
  }


  .stella-hero-calendar-overlay
  .stella-hero-calendar__instruction {
    margin-bottom:
      1.1em;

    font-size:
      0.72em;
  }


  .stella-hero-calendar-overlay
  .stella-hero-calendar__calendar-nav {
    grid-template-columns:
      2em
      minmax(0, 1fr)
      2em;
  }


  .stella-hero-calendar-overlay
  .stella-hero-calendar__previous,

  .stella-hero-calendar-overlay
  .stella-hero-calendar__next {
    width:
      2em;

    height:
      2em;
  }


  .stella-hero-calendar-overlay
  .stella-booking__weekday {
    font-size:
      0.58em;
  }


  .stella-hero-calendar-overlay
  .stella-booking__day {
    font-size:
      0.84em;
  }
}