/* Element defaults that every guest page shares. Keep this minimal: anything more specific
   belongs in a layout, typography or component class. */
body {
  color: var(--color-text);
  font-family: var(--font-body);
}
/* Headings often hold prices, totals and dates, so themes' heading fonts with old-style
   numerals (e.g. Playfair Display) get full-height ones. */
.t-heading-primary-01, .t-heading-primary-02, .t-heading-primary-03, .t-heading-primary-04,
.t-heading-secondary-01, .t-heading-secondary-02, .t-heading-secondary-03,
.t-heading-secondary-04 {
  font-variant-numeric: lining-nums;
}

.t-heading-primary-01, .t-heading-primary-02, .t-heading-primary-03, .t-heading-primary-04 {
  font-family: var(--font-primary-heading);
  font-weight: var(--heading-primary-font-weight);
  letter-spacing: var(--heading-primary-letter-spacing);
}

.t-heading-primary-01 {
  font-size: 48px;
  line-height: 56px;
}

.t-heading-primary-02 {
  font-size: 32px;
  line-height: 40px;
}

.t-heading-primary-03 {
  font-size: 24px;
  line-height: 32px;
}

.t-heading-primary-04 {
  font-size: 18px;
  line-height: 24px;
}

.t-heading-secondary-01, .t-heading-secondary-02, .t-heading-secondary-03, .t-heading-secondary-04 {
  font-family: var(--font-secondary-heading);
  font-weight: var(--font-weight-semibold);
}

.t-heading-secondary-01 {
  font-size: 20px;
  line-height: 24px;
}

.t-heading-secondary-02 {
  font-size: 16px;
  line-height: 24px;
}

.t-heading-secondary-03 {
  font-size: 14px;
  line-height: 20px;
}

.t-heading-secondary-04 {
  font-size: 12px;
  line-height: 16px;
}

.t-body-01, .t-body-02, .t-body-03 {
  font-weight: var(--font-weight-regular);
}

.t-body-01 {
  font-size: 16px;
  line-height: 24px;
}

.t-body-02 {
  font-size: 14px;
  line-height: 20px;
}

.t-body-03 {
  font-size: 12px;
  line-height: 16px;
}

.t-label-01, .t-label-02, .t-label-03 {
  font-weight: var(--font-weight-medium);
}

.t-label-01 {
  font-size: 16px;
  line-height: 24px;
}

.t-label-02 {
  font-size: 14px;
  line-height: 20px;
}

.t-label-03 {
  font-size: 12px;
  line-height: 16px;
}

.t-price {
  font-family: var(--font-body);
}

.t-subdued {
  color: var(--color-text-subdued);
}

.t-success {
  color: var(--color-success);
}

.t-bullets {
  list-style: disc;
  padding-left: var(--spacing-05);
}

/* Text written by facilities (names, descriptions), which can hold long words or URLs. Breaks
   them rather than overflowing. */
.t-break-words {
  overflow-wrap: anywhere;
}

.t-nowrap {
  white-space: nowrap;
}
/* Layout options are set per element (e.g. style="--stack-gap: ..."). They must not inherit,
   or a nested stack would pick up its parent's gap instead of its own default. */
@property --stack-gap { syntax: '*'; inherits: false; }
@property --stack-align { syntax: '*'; inherits: false; }
@property --cluster-gap { syntax: '*'; inherits: false; }
@property --cluster-align { syntax: '*'; inherits: false; }
@property --spread-align { syntax: '*'; inherits: false; }
@property --spread-gap { syntax: '*'; inherits: false; }
@property --with-icon-gap { syntax: '*'; inherits: false; }
@property --with-icon-align { syntax: '*'; inherits: false; }
@property --grid-columns { syntax: '*'; inherits: false; }
@property --grid-gap { syntax: '*'; inherits: false; }
@property --grid-min-width { syntax: '*'; inherits: false; }
@property --center-width { syntax: '*'; inherits: false; }
@property --sidebar-width { syntax: '*'; inherits: false; }
@property --sidebar-main-min-width { syntax: '*'; inherits: false; }

/* Page shell filling the space below the top bar. The main area scrolls, so anything placed
   after it (e.g. an action bar) stays at the bottom of the viewport. */
.l-page {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  background-color: var(--color-page);
}

.l-page__main {
  flex-grow: 1;
  overflow-y: auto;
  padding-block: var(--spacing-08);

  @media (max-width: 639px) {
    padding-block: var(--spacing-06);
  }
}

.l-stack {
  display: flex;
  flex-direction: column;
  align-items: var(--stack-align, stretch);
  gap: var(--stack-gap, var(--spacing-04));
}

/* Gap steps, smallest first. Default (spacing-04) is for items in a group. */
.l-stack--tighter {
  --stack-gap: var(--spacing-02);
}

.l-stack--tight {
  --stack-gap: var(--spacing-03);
}

.l-stack--loose {
  --stack-gap: var(--spacing-05);
}

.l-stack--looser {
  --stack-gap: var(--spacing-06);
}

.l-stack--loosest {
  --stack-gap: var(--spacing-07);
}

/* A line between each child, with the stack gap on both sides of it. Hidden children take up
   no space, and a visible child after one still gets its line. */
.l-stack--divided {
  --divider-space: var(--stack-gap, var(--spacing-04));
}

.l-stack--divided > * + * {
  border-top: var(--border-width-01) solid var(--border-subtle-00);
  padding-top: var(--divider-space);
}

.l-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: var(--cluster-align, center);
  gap: var(--cluster-gap, var(--spacing-04));
}

.l-cluster--tight {
  --cluster-gap: var(--spacing-03);
}

.l-cluster--loose {
  --cluster-gap: var(--spacing-05);
}

/* Lists used as layout never want bullets or indentation. Zero specificity so themes can
   still override. Safari drops list semantics with list-style: none, so add role="list". */
:where(ul, ol):where(.l-stack, .l-cluster, .l-grid) {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* An icon followed by text. Doesn't wrap, so long text wraps next to the icon instead of
   dropping below it. */
.l-with-icon {
  display: flex;
  align-items: var(--with-icon-align, center);
  gap: var(--with-icon-gap, var(--spacing-02));
}

/* Sits in a line of text, so a parent's text-align positions it. */
.l-with-icon--inline {
  display: inline-flex;
}

/* Equal columns that collapse to a single column on small screens. */
.l-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns, 2), minmax(0, 1fr));
  gap: var(--grid-gap, var(--spacing-05));

  @media (max-width: 639px) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* As many columns as fit, each at least --grid-min-width wide (e.g. a list of cards). */
.l-grid--auto {
  grid-template-columns: repeat(auto-fill, minmax(min(var(--grid-min-width, 280px), 100%), 1fr));
}

.l-grid__full {
  grid-column: 1 / -1;
}

.l-spread {
  display: flex;
  justify-content: space-between;
  align-items: var(--spread-align, center);
  gap: var(--spread-gap, var(--spacing-04));
}

/* Lets the items wrap when they don't fit, e.g. a heading with filters next to it. Without it,
   the items shrink and their text wraps instead. */
.l-spread--wrap {
  flex-wrap: wrap;
}

.l-center {
  width: min(var(--center-width, 794px), 100% - 2 * var(--spacing-05));
  margin-left: auto;
  margin-right: auto;
}

/* For pages with a sidebar next to the main content. */
.l-center--wide {
  --center-width: 1400px;
}

/* Main content with a fixed-width sidebar next to it. When there isn't room for both, the
   sidebar wraps below the main content. The main content wraps when it would get narrower than
   --sidebar-main-min-width (on .l-sidebar__main, default half the width). */
.l-sidebar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--spacing-08);
}

/* When stacked, the sidebar goes above the main content instead of below it (e.g. a summary
   the guest should see before confirming). wrap-reverse flips the cross axis, so flex-end keeps
   both columns top-aligned when side by side. */
.l-sidebar--aside-first {
  flex-wrap: wrap-reverse;
  align-items: flex-end;
}

.l-sidebar__main {
  flex-basis: 0;
  flex-grow: 999;
  min-width: min(var(--sidebar-main-min-width, 50%), 100%);
}

.l-sidebar__aside {
  flex-basis: var(--sidebar-width, 328px);
  flex-grow: 1;
}
/* Page-level actions below the scrolling main area (e.g. cancel link and save button). On small
   screens the actions stack full width, with the last one (the primary action) on top. */
.c-action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-06);
  padding: var(--spacing-06) var(--spacing-07);
  border-top: var(--border-width-01) solid var(--border-subtle-00);

  @media (max-width: 639px) {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: var(--spacing-03);
    padding: var(--spacing-05);
    text-align: center;
  }
}
.c-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-01);
  font-size: 14px;
  line-height: 20px;
  font-weight: var(--font-weight-medium);

  a, [aria-current] {
    padding: var(--spacing-01) var(--spacing-02);
    border-radius: var(--radius-sm);
  }

  a {
    color: var(--breadcrumb-link-color);

    &:hover {
      color: var(--breadcrumb-link-hover-color);
      background-color: var(--breadcrumb-link-hover-background);
    }

    &:focus-visible {
      outline: var(--border-width-02) solid var(--breadcrumb-link-focus-color);
    }
  }

  [aria-current] {
    color: var(--color-text);
  }
}
/* Output by Themed::ButtonComponent, and by Themed::LinkButtonComponent for links. Primary for
   the main action, secondary for other actions and tertiary (text only) for minor actions such
   as toggles. */
.c-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-03);
  padding: var(--spacing-03) var(--spacing-06);
  border-radius: var(--button-radius);
  font-size: 16px;
  line-height: 24px;
  font-weight: var(--button-font-weight);
  text-decoration: none;
  cursor: pointer;

  &:disabled {
    cursor: default;
  }

  /* Pulls the icon towards the edge, so the button looks balanced. */
  .icon {
    margin-left: calc(-1 * var(--spacing-02));
  }
}

/* Links stay in the text flow like before (a flex link would fill the width of a block). */
a.c-button {
  display: inline-flex;
}

/* Tertiary buttons read as text, so they keep the case and spacing of the text around them. */
.c-button--primary, .c-button--secondary {
  letter-spacing: var(--button-letter-spacing);
  text-transform: var(--button-text-transform);
}

.c-button--primary {
  color: var(--button-primary-color);
  background-color: var(--button-primary-background);

  &:disabled {
    color: var(--button-primary-disabled-color);
    background-color: var(--button-primary-disabled-background);
  }

  &.c-button--critical {
    background-color: var(--color-interactive-critical);
  }
}

.c-button--secondary {
  color: var(--button-secondary-color);
  background-color: var(--button-secondary-background);
  outline: var(--button-secondary-border-width) solid currentColor;

  &:focus {
    outline-width: var(--border-width-02);
  }

  &:disabled {
    color: var(--button-secondary-disabled-color);
    background-color: var(--button-secondary-disabled-background);
  }

  &.c-button--critical {
    color: var(--color-interactive-critical);
  }
}

.c-button--tertiary {
  justify-content: flex-start;
  padding-left: 0;
  padding-right: 0;
  color: var(--button-tertiary-color);

  &:disabled {
    color: var(--button-tertiary-disabled-color);
  }

  &.c-button--critical {
    color: var(--color-interactive-critical);
  }
}

.c-button--selected {
  color: var(--color-selected);
  background-color: var(--color-selected-subtle);
}

/* A large tap target, e.g. the guest count buttons, or a button with two lines of text. */
.c-button--large {
  min-height: 60px;
}

/* Output by Themed::IconButtonComponent: an icon only button, e.g. remove or +/-. Give it an
   aria-label. */
.c-icon-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--icon-button-color);
  cursor: pointer;

  &:disabled {
    color: var(--icon-button-disabled-color);
    cursor: default;
  }
}

.c-icon-button--small {
  width: 24px;
  height: 24px;
}

/* Themed::ButtonComponent with two icons or texts shows the second pair inside an expanded
   element (`data-expanded`, e.g. set by the expander controller). */
[data-expanded] .c-button .not-expanded {
  display: none;
}

[data-expanded] .c-button .expanded {
  display: block;
}
/* The date picker's calendar panel (date_fetchers/show_themed, guests/hotel_bookings/calendar),
   loaded into the picker's turbo frame. Floats below the input on large screens (the calendar
   controller positions it); covers the screen on small screens, where the months scroll. */
.c-calendar-panel {
  z-index: 10;
  padding: var(--spacing-03);
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-overlay);

  @media (max-width: 639px) {
    position: fixed;
    /* Beat the position set inline by the calendar controller. */
    top: 0 !important;
    left: 0 !important;
    right: 0;
    height: 100dvh;
  }

  @media (min-width: 640px) {
    position: absolute;
    inset: auto;
    margin-top: var(--spacing-02);
    width: -moz-fit-content;
    width: fit-content;
    height: -moz-fit-content;
    height: fit-content;
  }
}

/* Output by Themed::DatePickerCalendarComponent: one or more months of days to pick a date or a
   range from. Days carry their state as data attributes (data-today, data-disabled,
   data-selected). --availability (Themed::AvailabilityCalendarComponent) colours each day by
   availability instead, with a legend below. */
.c-calendar {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;

  @media (min-width: 640px) {
    width: -moz-fit-content;
    width: fit-content;
    height: -moz-fit-content;
    height: fit-content;
  }
}

.c-calendar__months {
  position: relative;
  display: flex;
  justify-content: center;
  gap: var(--spacing-06);
  width: 100%;
  overflow: auto;
}

/* Previous and next month links, level with the month titles. Hidden on small screens, where
   the months scroll instead. */
.c-calendar__nav {
  position: absolute;
  top: 0;
  display: none;

  @media (min-width: 640px) {
    display: flex;
  }
}

.c-calendar__nav--previous {
  left: 0;
}

.c-calendar__nav--next {
  right: 0;
}

.c-calendar__sections {
  display: flex;
  flex-direction: column;
  justify-content: start;
  gap: var(--spacing-05) var(--spacing-06);

  @media (min-width: 640px) {
    flex-direction: row;
    justify-content: center;
  }
}

.c-calendar__month {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  row-gap: var(--spacing-02);
}

.c-calendar__month-title {
  grid-column: 1 / -1;
  margin-bottom: var(--spacing-02);
  text-align: center;
}

.c-calendar__weekday {
  margin-bottom: var(--spacing-03);
  text-align: center;
  color: var(--calendar-weekday-color);
}

.c-calendar__day {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;

  button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }

  &[data-today] {
    outline: var(--border-width-01) solid var(--calendar-today-border-color);
    outline-offset: calc(-1 * var(--spacing-02));
    border-radius: calc(var(--calendar-day-radius) + var(--spacing-02));
  }

  &[data-disabled],
  &[data-temporary-disabled] {
    color: var(--calendar-disabled-color);
    pointer-events: none;
  }

  &[data-selected='begin'],
  &[data-selected='end'],
  &[data-selected='single'] {
    color: var(--calendar-selected-color);
    background-color: var(--calendar-selected-background);
  }

  &[data-selected='begin'] {
    border-radius: var(--calendar-selected-radius) 0 0 var(--calendar-selected-radius);
  }

  &[data-selected='end'] {
    border-radius: 0 var(--calendar-selected-radius) var(--calendar-selected-radius) 0;
  }

  &[data-selected='single'] {
    border-radius: var(--calendar-selected-radius);
  }

  &[data-selected='between'] {
    background-color: var(--calendar-range-background);
  }
}

.c-calendar--availability {
  [data-availability='full'] {
    color: var(--calendar-availability-full-color);
    background-color: var(--calendar-availability-full-background);
  }

  [data-availability='some'] {
    color: var(--color-text);
    background-color: var(--calendar-availability-some-background);
  }

  [data-availability='free'] {
    color: var(--color-text);
    background-color: var(--calendar-availability-free-background);
  }

  .c-calendar__months {
    flex-wrap: wrap;
    padding: var(--spacing-03);
    border: var(--border-width-01) solid var(--border-subtle-00);
    border-radius: var(--radius-md);
  }

  .c-calendar__month {
    gap: var(--spacing-04) var(--spacing-03);
  }

  .c-calendar__day {
    width: 24px;
    height: 24px;
    border-radius: var(--calendar-day-radius);
  }
}

.c-calendar__legend {
  width: 100%;
  margin-top: var(--spacing-05);
}

/* A day-sized swatch in the legend, coloured by its data-availability. */
.c-calendar__marker {
  width: 24px;
  height: 24px;
  border-radius: var(--calendar-day-radius);
}
.c-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--spacing-03);
  padding: var(--spacing-04) var(--spacing-05);
  border: var(--border-width-01) solid var(--callout-border-color);
  border-radius: var(--radius-md);
  font-size: 16px;
  line-height: 24px;
  color: var(--callout-color);
  background-color: var(--callout-color-subtle);
}

.c-callout--centered {
  justify-content: center;
  text-align: center;
}

.c-callout--critical {
  --callout-color: var(--color-critical);
  --callout-color-subtle: var(--color-critical-subtle);
  --callout-border-color: var(--color-critical-border);
}

.c-callout--warning {
  --callout-color: var(--color-warning);
  --callout-color-subtle: var(--color-warning-subtle);
  --callout-border-color: var(--color-warning-border);
}

.c-callout--success {
  --callout-color: var(--color-success);
  --callout-color-subtle: var(--color-success-subtle);
  --callout-border-color: var(--color-success-border);
}

.c-callout--info {
  --callout-color: var(--color-info);
  --callout-color-subtle: var(--color-info-subtle);
  --callout-border-color: var(--color-info-border);
}

.c-callout--neutral {
  --callout-color: var(--color-neutral);
  --callout-color-subtle: var(--color-neutral-subtle);
  --callout-border-color: var(--color-neutral-border);
}

/* Same height as a line of text, so the icon stays aligned with the first line when the
   text wraps. */
.c-callout__icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  height: 24px;
}

.c-callout__text {
  flex: 1;
}

.c-callout__title {
  display: block;
  font-weight: var(--font-weight-semibold);
}

.c-callout__action {
  align-self: center;
  display: flex;
  flex-direction: column;
  text-align: center;

  /* Full-width action on its own row, so it's easy to tap. */
  @media (max-width: 639px) {
    flex-basis: 100%;
  }
}
@property --card-padding { syntax: '*'; inherits: false; }
@property --image-url { syntax: '*'; inherits: false; }

.c-card {
  background-color: var(--card-background);
  border: var(--border-width-01) solid var(--border-subtle-00);
  border-radius: var(--radius-md);
}

/* Rounds the corners of a photo. Not overflow: hidden, which would cut off dropdowns opened
   from inside the card. */
.c-card > :first-child {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

.c-card > :last-child {
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

.c-card--selected {
  border-color: var(--color-selected-border);
}

.c-card__section {
  display: flex;
  flex-direction: column;
  padding: var(--card-padding, var(--spacing-05));
}

.c-card__section--condensed {
  --card-padding: var(--spacing-04);
}

.c-card__section + .c-card__section {
  border-top: var(--border-width-01) solid var(--border-subtle-00);
}

/* Cover photo at the top of a card, set with style="--image-url: url(/...)". Shows a grey
   placeholder when there's no photo. */
.c-card__media {
  aspect-ratio: 16 / 9;
  background-color: var(--border-subtle-00);
  background-image: var(--image-url);
  background-size: cover;
  background-position: center;
}

/* Fills its container's height (e.g. an l-grid item), so the cards in a grid row are equally
   tall. The last section takes the extra height: give what should line up across the row (e.g.
   the buttons) margin-block-start: auto. */
.c-card--fill {
  display: flex;
  flex-direction: column;
  height: 100%;

  > .c-card__section:last-child {
    flex-grow: 1;
  }
}

/* The photo (a first c-card__media) beside the content instead of above it: on all screens with
   --media-aside, on small screens only with --media-aside-small. */
.c-card--media-aside {
  display: grid;
  grid-template-columns: 1fr 2fr;

  > .c-card__media {
    aspect-ratio: auto;
    min-height: 140px;
    border-top-right-radius: 0;
    border-bottom-left-radius: inherit;
  }
}

@media (max-width: 639px) {
  .c-card--media-aside-small {
    display: grid;
    grid-template-columns: 1fr 2fr;

    > .c-card__media {
      aspect-ratio: auto;
      min-height: 140px;
      border-top-right-radius: 0;
      border-bottom-left-radius: inherit;
    }
  }
}
/* A vertical line between the items of a row layout (l-spread, l-cluster), as its own
   aria-hidden element. Horizontal lines come from l-stack--divided and card sections. */
.c-divider {
  align-self: stretch;
  width: var(--border-width-01);
  background-color: var(--border-subtle-00);
}
@property --dropdown-min-width { syntax: '*'; inherits: false; }

/* A panel opened from a trigger, e.g. a picker for rooms and guests. Put the c-dropdown right
   after the trigger. On large screens the panel floats below the trigger; on small screens it
   covers the screen, with the header at the top (only shown there, e.g. a title and a close
   button) and the footer at the bottom. Show and hide it with the `hidden` class (expander
   controller). */
.c-dropdown {
  position: relative;
}

.c-dropdown__panel {
  position: absolute;
  top: var(--spacing-02);
  left: 0;
  /* Above selects. */
  z-index: 30;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: var(--dropdown-min-width, auto);
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-overlay);

  @media (max-width: 639px) {
    position: fixed;
    inset: 0;
    min-width: 0;
    height: 100dvh;
    border-radius: 0;
  }
}

.c-dropdown__header {
  display: none;

  @media (max-width: 639px) {
    display: flex;
    flex-direction: column;
    padding: var(--spacing-03) var(--spacing-05);
    border-bottom: var(--border-width-01) solid var(--border-subtle-00);
  }
}

.c-dropdown__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-05);
}

.c-dropdown__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-03);
  padding: 0 var(--spacing-05) var(--spacing-05);

  @media (max-width: 639px) {
    flex-direction: column;
    padding-top: var(--spacing-05);
    border-top: var(--border-width-01) solid var(--border-subtle-00);
  }
}
.c-label {
  display: block;
  margin-bottom: var(--spacing-02);
  font-size: var(--label-font-size);
  line-height: 20px;
  font-weight: var(--label-font-weight);
  color: var(--label-color);
}

.c-label--invalid {
  color: var(--label-invalid-color);
}

.c-label--required::after {
  content: '*';
  margin-left: var(--spacing-01);
  color: var(--label-required-color);
}

/* Validation message below a field (ThemedFormBuilder#error_message). */
.c-field-error {
  display: flex;
  gap: var(--spacing-01);
  margin-top: var(--spacing-02);
  font-size: 14px;
  line-height: 20px;
  color: var(--label-invalid-color);
}

.c-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-03);

  input {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: var(--spacing-02);
    border: var(--border-width-01) solid var(--checkbox-border-color);
    border-radius: var(--checkbox-radius);

    &:checked, &:indeterminate {
      color: var(--checkbox-checked-color);
    }

    &:focus-visible {
      outline: var(--border-width-02) solid var(--checkbox-checked-color);
      outline-offset: var(--border-width-01);
    }
  }

  label {
    font-size: 16px;
    line-height: 24px;
    color: var(--checkbox-label-color);
  }
}

.c-checkbox--invalid label {
  color: var(--checkbox-label-invalid-color);
}

.c-checkbox--disabled input {
  border-color: var(--checkbox-disabled-border-color);
  background-color: var(--checkbox-disabled-background);
}

.c-checkbox--required label::after {
  content: '*';
  color: var(--checkbox-label-invalid-color);
}
/* The bar at the bottom of a guest page, with the facility logo (set by the theme) and contact
   details. Put the content in an l-center. */
.c-footer {
  padding-block: var(--spacing-06);
  color: var(--footer-color);
  background-color: var(--footer-background);
  border-top: var(--border-width-01) solid var(--footer-border-color);
}
/* Output by Themed::ImagesSliderComponent: one photo at a time, with arrows and dots to move
   between them. --expandable opens the photo full screen when clicked (the slider gets
   data-full), --full-width makes the photos fill the slider's width. */
.c-images-slider {
  position: relative;
}

.c-images-slider__slide {
  display: none;

  &[data-selected] {
    display: flex;
    justify-content: center;
  }
}

/* Wide photos in a narrow slider are cropped rather than squashed. */
.c-images-slider__image {
  height: 288px;
  max-width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  margin: auto;
  border-radius: var(--radius-md);
}

.c-images-slider--full-width .c-images-slider__image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 540px;
  aspect-ratio: 16 / 9;
  -o-object-fit: cover;
     object-fit: cover;
  margin: 0;
  border-radius: 0;
}

.c-images-slider--expandable .c-images-slider__image {
  cursor: pointer;
}

.c-images-slider__full-image,
.c-images-slider__close,
.c-images-slider__counter {
  display: none;
}

.c-images-slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border-radius: var(--radius-full);
  background-color: var(--images-slider-control-background);
}

.c-images-slider__arrow--previous {
  left: var(--spacing-03);
}

.c-images-slider__arrow--next {
  right: var(--spacing-03);
}

.c-images-slider__dots {
  position: absolute;
  bottom: var(--spacing-05);
  display: flex;
  justify-content: center;
  gap: var(--spacing-03);
  width: 100%;
}

.c-images-slider__dot {
  padding: 0;
  width: var(--spacing-03);
  height: var(--spacing-03);
  border-radius: var(--radius-full);
  background-color: var(--images-slider-dot-color);
  box-shadow: var(--images-slider-dot-shadow);
  cursor: pointer;

  &[data-selected] {
    background-color: var(--images-slider-dot-selected-color);
  }
}

/* The selected photo full screen, in its large variant. */
.c-images-slider[data-full] {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-surface);

  .c-images-slider__image {
    display: none;
  }

  .c-images-slider__full-image {
    display: block;
    max-width: 80vw;
    max-height: 80vh;
    margin: auto;
  }

  .c-images-slider__close {
    display: flex;
    position: absolute;
    top: var(--spacing-03);
    right: var(--spacing-03);
  }

  .c-images-slider__counter {
    display: block;
    position: absolute;
    top: var(--spacing-04);
    left: 50%;
    transform: translateX(-50%);
    padding: var(--spacing-02) var(--spacing-04);
    border-radius: var(--radius-md);
    color: var(--label-color);
    background-color: var(--images-slider-control-background);
  }
}
/* Output by Themed::TextFieldComponent, TextFieldButtonComponent (a button that looks like a
   field, e.g. the rooms & guests picker) and SelectComponent. The wrapper draws the border,
   the control inside it is borderless. State is set with data-disabled and data-invalid. */
.c-input {
  display: flex;
  align-items: center;
  gap: var(--spacing-04);
  padding: 0 var(--spacing-04);
  border-radius: var(--input-radius);
  outline: var(--input-border-width) solid var(--input-border-color);
  background-color: var(--input-background);
  overflow: clip;

  &:hover {
    outline-color: var(--input-hover-border-color);
  }

  &:focus-within {
    outline: var(--input-focus-border-width) solid var(--input-focus-border-color);
  }

  &[data-invalid] {
    outline-color: var(--input-invalid-border-color);
  }

  &[data-disabled] {
    outline: var(--input-disabled-border-width) solid var(--input-disabled-border-color);

    .icon {
      color: var(--input-disabled-color);
    }
  }

  .icon {
    color: var(--input-icon-color);
  }

  :where(input, button, textarea, .c-select__value) {
    flex: 1;
    width: 100%;
    padding: var(--input-padding-y) 0;
    border: none;
    font-size: 16px;
    line-height: 24px;
    text-align: left;
    color: inherit;
    background-color: transparent;

    &:focus {
      border: none;
      box-shadow: none;
      outline: none;
    }

    &:disabled {
      color: var(--input-disabled-color);
    }
  }

  textarea {
    resize: none;
  }
}

.c-input--borderless,
.c-input--borderless[data-disabled] {
  outline: none;
  background-color: transparent;
}

/* Textareas grow with their content: an invisible copy of the text (set by the
   autogrowing-text-area controller) sizes the grid cell the textarea sits in. */
.c-input--multiline {
  display: grid;
  align-items: stretch;

  &::after {
    content: attr(data-replicated-value) " ";
    visibility: hidden;
    white-space: pre-wrap;
    padding: var(--input-padding-y) 0;
    font-size: 16px;
    line-height: 24px;
  }

  textarea, &::after {
    grid-area: 1 / 1 / 2 / 2;
    min-height: calc(3 * 24px + 2 * var(--input-padding-y));
  }
}

/* A native select laid transparently over a c-input showing the selected option, so the
   select keeps the platform's option picker. */
.c-select {
  position: relative;

  &:focus-within .c-input {
    outline: var(--input-focus-border-width) solid var(--input-focus-border-color);
  }

  select {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    opacity: 0;
  }

  .c-input {
    min-height: calc(24px + 2 * var(--input-padding-y));
  }
}

.c-select__flag {
  width: 20px;
  height: 20px;
}

/* Themed::NumberInputComponent: minus button, a narrow field and plus button. */
.c-number-input {
  display: flex;
  align-items: center;
  gap: var(--spacing-02);

  .c-input {
    width: calc(24px + 2 * var(--input-padding-y));
    padding: 0;

    input {
      text-align: center;
    }
  }
}
/* Output by Themed::NavLinkComponent. The default link is a standalone label (e.g. "Edit"). Inline
   links take their size from the surrounding text and are always underlined, so they stand out
   from it. Critical links are for destructive actions, e.g. cancelling a booking. */
.c-link {
  font-size: 14px;
  line-height: 20px;
  font-weight: var(--font-weight-medium);
  color: var(--link-color);
  -webkit-text-decoration: var(--link-decoration);
          text-decoration: var(--link-decoration);
  cursor: pointer;

  &:hover {
    -webkit-text-decoration: var(--link-hover-decoration);
            text-decoration: var(--link-hover-decoration);
  }
}

.c-link--inline {
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  text-decoration: underline;
}

.c-link--critical {
  color: var(--color-interactive-critical);
}
@property --modal-width { syntax: '*'; inherits: false; }

/* A dialog over the page (partials/themed/_modal). Centered on large screens, a sheet at the
   bottom of the screen on small screens. The panel never grows past the viewport: its body
   scrolls instead. The content partial's root is a c-modal__inner, holding a c-modal__header (a
   title, clear of the close button), c-modal__content and c-modal__footer (actions). */
.c-modal {
  position: fixed;
  inset: 0;
  z-index: 50;

  &.transition-enter {
    transition: opacity 300ms cubic-bezier(0, 0, 0.2, 1);
  }

  &.transition-leave {
    transition: opacity 200ms cubic-bezier(0.4, 0, 1, 1);
  }

  &.transition-enter-start,
  &.transition-leave-end {
    opacity: 0;
  }
}

.c-modal__backdrop {
  position: fixed;
  inset: 0;
  background-color: var(--color-backdrop);
}

.c-modal__container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100dvh;
  padding: var(--spacing-07) var(--spacing-05);

  @media (max-width: 639px) {
    align-items: flex-end;
    padding: 0;
  }
}

.c-modal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  background-color: var(--modal-background);
  border-radius: var(--modal-radius);
  box-shadow: var(--shadow-overlay);
  transition: opacity 150ms, transform 150ms;

  &.transition-enter-start,
  &.transition-leave-end {
    opacity: 0;
    transform: scale(0.95);
  }

  @media (max-width: 639px) {
    width: 100%;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;

    &.transition-enter-start,
    &.transition-leave-end {
      transform: translateY(var(--spacing-05));
    }
  }
}

.c-modal__close {
  position: absolute;
  top: var(--spacing-04);
  right: var(--spacing-04);
  z-index: 1;
}

.c-modal__body {
  display: block;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* Sets the width of the modal, which otherwise takes the width of its content. On small screens
   the modal is always full width. */
.c-modal__inner {
  width: var(--modal-width, 548px);
  max-width: 100%;

  @media (max-width: 639px) {
    width: 100%;
  }
}

/* Fills the screen on small screens instead of sitting at the bottom of it, for long content
   such as package details. */
.c-modal__panel:has(> .c-modal__body > .c-modal__inner--fill) {
  @media (max-width: 639px) {
    height: 100%;
    border-radius: 0;
  }
}

/* The title row. Leaves room for the close button on the right, and lines the title up with
   it. */
.c-modal__header {
  display: flex;
  align-items: center;
  min-height: calc(var(--spacing-04) + var(--spacing-08));
  padding: var(--spacing-04) calc(2 * var(--spacing-04) + var(--spacing-08)) 0 var(--spacing-06);
}

.c-modal__content {
  padding: var(--spacing-04) var(--spacing-06) var(--spacing-06);
}

/* Actions, right-aligned on large screens. On small screens they stack full width, with the
   last one (the primary action) on top. */
.c-modal__footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--spacing-05);
  padding: var(--spacing-05) var(--spacing-06);
  border-top: var(--border-width-01) solid var(--border-subtle-00);

  @media (max-width: 639px) {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: var(--spacing-03);
    padding: var(--spacing-05);
    text-align: center;
  }
}
.c-progress-bar {
  width: 100%;
  height: var(--spacing-04);
  border-radius: var(--radius-full);
  background-color: var(--progress-bar-background);
}

.c-progress-bar__fill {
  height: 100%;
  border-radius: var(--radius-full);
  background-color: var(--progress-bar-color);
  transition: width 1s linear;
}
/* The steps of a booking flow (partials/themed/_stepper). Each step has a number (a check mark
   once completed) and its title, which links back to it when it can be revisited. Each item
   holds the separator before its step, outside the step's underline. */
.c-stepper {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-04);
  border-bottom: var(--border-width-01) solid var(--border-subtle-00);
  white-space: nowrap;
}

.c-stepper__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-04);
}

.c-stepper__separator {
  position: relative;
  bottom: var(--spacing-02);
}

.c-stepper__step {
  display: flex;
  align-items: center;
  gap: var(--spacing-03);
  padding: 0 var(--spacing-03) var(--spacing-03) 0;
  border-bottom: var(--border-width-02) solid transparent;
  font-size: 16px;
  line-height: 24px;
  font-weight: var(--font-weight-medium);
}

.c-stepper__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: var(--border-width-01) solid;
  border-radius: var(--radius-full);
  font-size: 12px;
  line-height: 16px;

  .icon {
    display: none;
  }
}

.c-stepper__step--selected {
  border-bottom-color: var(--stepper-selected-color);

  .c-stepper__number {
    color: var(--stepper-selected-color);
  }
}

.c-stepper__step--completed .c-stepper__number {
  color: var(--stepper-completed-color);

  .icon {
    display: block;
  }

  .value {
    display: none;
  }
}

.c-stepper__step--disabled {
  color: var(--stepper-disabled-color);
}
/* Output by Themed::TabsComponent, e.g. switching between the rooms of a booking. */
.c-tabs {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-04);
}

.c-tabs__tab {
  padding: var(--spacing-03) var(--spacing-05);
  border: var(--border-width-01) solid var(--tabs-border-color);
  border-radius: var(--tabs-radius);
  font-size: 16px;
  line-height: 24px;
  font-weight: var(--font-weight-medium);
  color: var(--tabs-color);
  background-color: var(--tabs-background);
}

.c-tabs__tab--selected {
  border-color: var(--tabs-selected-border-color);
  color: var(--tabs-selected-color);
  background-color: var(--tabs-selected-background);
}

.c-tabs__tab--disabled {
  border-color: var(--tabs-disabled-border-color);
  color: var(--tabs-disabled-color);
  background-color: var(--tabs-disabled-background);
}
.c-tag {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-02) var(--spacing-04);
  border-radius: var(--radius-sm);
  font-size: 16px;
  line-height: 24px;
  font-weight: var(--font-weight-medium);
  color: var(--tag-color);
  background-color: var(--tag-background);
  gap: var(--spacing-02);
}

.c-tag--critical {
  --tag-color: var(--tag-critical-color);
  --tag-background: var(--tag-critical-background);
}

.c-tag--warning {
  --tag-color: var(--tag-warning-color);
  --tag-background: var(--tag-warning-background);
}

.c-tag--success {
  --tag-color: var(--tag-success-color);
  --tag-background: var(--tag-success-background);
}

.c-tag--neutral {
  --tag-color: var(--tag-neutral-color);
  --tag-background: var(--tag-neutral-background);
}

.c-tag__icon {
  display: inline-block;
  width: 16px;
  height: 16px;
}
/* Output by Themed::NotificationComponent: a short message (e.g. "Saved") at the bottom of the
   screen, from guests/partials/_flash_messages. The region is fixed over the page and ignores
   clicks outside its toasts. */
.c-toast-region {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: var(--spacing-03);
  padding: var(--spacing-06) var(--spacing-05);
  pointer-events: none;
}

.c-toast {
  display: flex;
  align-items: center;
  gap: var(--spacing-05);
  width: min(42rem, 100%);
  min-height: 4rem;
  padding: var(--spacing-05);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 8px 0 var(--toast-shadow-color);
  color: var(--toast-color);
  background-color: var(--toast-background);
  pointer-events: auto;
  transition: opacity 100ms, transform 300ms cubic-bezier(0, 0, 0.2, 1);

  /* Enter and leave transitions, set by the element-remover controller. */
  &.transition-enter-start {
    opacity: 0;
    transform: translate(var(--spacing-03), var(--spacing-03));
  }

  &.transition-leave-end {
    opacity: 0;
  }
}

.c-toast__message {
  flex-grow: 1;
  display: flex;
  align-items: center;
  gap: var(--spacing-03);
  font-size: 16px;
  line-height: 24px;
  font-weight: var(--font-weight-medium);
}

.c-toast__icon--success {
  color: var(--toast-success-color);
}

.c-toast__icon--error {
  color: var(--toast-error-color);
}

.c-toast__close {
  color: inherit;
  cursor: pointer;
}

.c-toast__action {
  padding: 0 var(--spacing-05);
  border-radius: var(--radius-md);
  font-size: 16px;
  line-height: 24px;
  color: var(--toast-color);
  background-color: var(--toast-action-background);
  cursor: pointer;
}
/* The bar at the top of every guest page, with the facility logo (set by the theme) and the
   language selector. Put the content in a c-topbar__content l-center l-spread. */
.c-topbar {
  color: var(--topbar-color);
  background-color: var(--topbar-background);
  border-bottom: var(--border-width-01) solid var(--topbar-border-color);
}

.c-topbar__content {
  padding-block: var(--spacing-04);
}

/* The link around the logo, when the facility has a website to link to. Lets the logo itself
   be the layout item, so themes can size it relative to the bar. */
.c-topbar__logo-link {
  display: contents;
}
/*
 * The tokens aren't included: they're defined in ThemeToken and rendered inline by
 * `theme_tokens_style_tag`.
 *























 */