/* Form controls shared by the blocks and the booking module (handle
   azul-forms): fields, guest counters, the availability calendar, the date
   popover, chips, selection marks, the spinner, the step bar and the
   segmented control. Generic only: the booking widget of the package hero
   that uses them is in hero/package.css.

   Used by the package hero (hero/package.php, view.js), the availability
   calendar (availability-calendar/render.php and package.php, calendar.js,
   the counters of core.js) and the booking flow (booking-flow/render.php,
   flow.js). The defaults are the booking flow's; another place sets the
   custom properties of a control on its own element (booking-flow.css,
   availability-calendar/package.css, hero/package.css). A property
   with no default, left unset, takes the inherited value (font size, line
   height, weight). */

/* Fields: a label over its control. */
.azul-field { display: grid; align-content: start; gap: 8px; }
.azul-field label, .azul-field__label { color: var(--azul-ink); font-size: var(--azul-text-sm); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.azul-field label span { color: var(--azul-coral); }
.azul-field :is(input[type="date"], input[type="text"], input[type="email"], input[type="tel"], select, textarea) { box-sizing: border-box; width: 100%; min-height: 50px; padding: 12px 14px; border: 1.5px solid var(--azul-line); border-radius: var(--azul-radius-s); background: #fff; color: var(--azul-ink); font: inherit; font-size: var(--azul-text-lg); line-height: 1.3; }
.azul-field textarea { resize: vertical; }
.azul-field.is-invalid :is(input, select, textarea) { border-color: var(--azul-coral); background: var(--azul-coral-tint); }

/* Guest counters: a label, then minus, the figure and plus. --count-*:
   the row (display, cols, justify, gap, pad, bleed, rule, bg), the label
   (label-color, label-fs, label-fw, label-lh, small-fs, icon-color), the
   control (ctl-gap, ctl-pad, ctl-border, ctl-radius, ctl-bg), its buttons
   (btn-display, btn-place, btn-w, btn-h, btn-border, btn-bg, btn-color, btn-fs, btn-lh,
   hover-bg, hover-color, off) and the figure (out-w, out-fs, out-color). */
.azul-count { display: var(--count-display, flex); grid-template-columns: var(--count-cols, none); align-items: center; justify-content: var(--count-justify, space-between); gap: var(--count-gap, 16px); margin-inline: var(--count-bleed, 0); padding: var(--count-pad, 0); border-top: var(--count-rule, 0); background: var(--count-bg, none); }
.azul-count > .icon { width: 22px; height: 22px; color: var(--count-icon-color); }
.azul-count__label { display: grid; color: var(--count-label-color, var(--azul-ink)); font-size: var(--count-label-fs, var(--azul-text-lg)); font-weight: var(--count-label-fw, 600); line-height: var(--count-label-lh, 1.3); }
.azul-count__label small { color: var(--azul-ink-soft); font-size: var(--count-small-fs, var(--azul-text-sm)); font-weight: 400; }
.azul-count__ctl { display: inline-flex; align-items: center; gap: var(--count-ctl-gap, 4px); padding: var(--count-ctl-pad, 0); border: var(--count-ctl-border, 0); border-radius: var(--count-ctl-radius, 0); background: var(--count-ctl-bg, none); }
.azul-count__ctl button { display: var(--count-btn-display, grid); place-items: var(--count-btn-place, center); width: var(--count-btn-w, 40px); height: var(--count-btn-h, 40px); padding: 0; border: var(--count-btn-border, 1.5px solid var(--azul-line)); border-radius: var(--azul-radius-s); background: var(--count-btn-bg, #fff); color: var(--count-btn-color, var(--azul-ink)); font-size: var(--count-btn-fs, 1.25rem); line-height: var(--count-btn-lh, 1); }
.azul-count__ctl button:not(:disabled):hover { border-color: var(--azul-coral); background: var(--count-hover-bg, var(--count-btn-bg, #fff)); color: var(--count-hover-color, var(--azul-coral)); }
.azul-count__ctl button:disabled { opacity: var(--count-off, .35); }
.azul-count__ctl output { min-width: var(--count-out-w, 36px); color: var(--count-out-color, var(--azul-ink)); font-size: var(--count-out-fs, var(--azul-text-xl)); font-weight: 700; text-align: center; }

/* Availability calendar (calendar.js; the month of the hero widget takes
   the same element classes): the head with the month arrows and the
   status, the months, the legend. --cal-*: layout of the root (display,
   position), the head (head-display, head-position, head-inset, head-z,
   head-gap, head-mb, head-events), the arrows (nav-position, nav-top,
   nav-edge, nav-z, nav-size, nav-border, nav-bg, nav-color, nav-fs, nav-lh,
   nav-hover-bg, nav-hover-color, nav-off), the months (months-order,
   months-gap), the month name (title-*), the grid (grid-gap), the weekdays
   (dow-pad, dow-fs, dow-ls), the days
   (day-h, day-radius, day-inset, day-color, day-fs, day-fw, today-fw,
   today-dot), their states (open, ring, closed, full-color, full-line,
   full-bg, past, range, range-inset, pick, hover-bg), the status, the picked stay
   and the legend (status-*, picked-*, legend-*, open-line, closed-swatch,
   full-swatch, full-dash). */
.azul-cal { position: var(--cal-position, static); display: var(--cal-display, block); flex-direction: column; transition: opacity .2s ease; }
.azul-cal.is-loading .azul-cal__months { opacity: .55; }
.azul-cal__head { position: var(--cal-head-position, static); inset: var(--cal-head-inset, auto); z-index: var(--cal-head-z, auto); display: var(--cal-head-display, flex); align-items: center; justify-content: space-between; gap: var(--cal-head-gap, 16px); margin: 0 0 var(--cal-head-mb, 18px); pointer-events: var(--cal-head-events, auto); }
.azul-cal__nav { position: var(--cal-nav-position, static); top: var(--cal-nav-top, auto); z-index: var(--cal-nav-z, auto); display: grid; flex: none; place-items: center; width: var(--cal-nav-size, 42px); height: var(--cal-nav-size, 42px); padding: 0; border: var(--cal-nav-border, 1.5px solid var(--azul-line)); border-radius: var(--azul-radius-s); background: var(--cal-nav-bg, #fff); color: var(--cal-nav-color, var(--azul-ink)); font-size: var(--cal-nav-fs); line-height: var(--cal-nav-lh); cursor: pointer; pointer-events: auto; }
.azul-cal__nav[data-cal-nav="-1"] { left: var(--cal-nav-edge, auto); }
.azul-cal__nav[data-cal-nav="1"] { right: var(--cal-nav-edge, auto); }
.azul-cal__nav:not(:disabled):hover { border-color: var(--azul-coral); background: var(--cal-nav-hover-bg, var(--cal-nav-bg, #fff)); color: var(--cal-nav-hover-color, var(--azul-coral)); }
.azul-cal__nav:disabled { opacity: var(--cal-nav-off, .3); }
.azul-cal__status { display: var(--cal-status-display, block); order: var(--cal-status-order, 0); margin: var(--cal-status-mt, 0) 0 0; color: var(--azul-ink-soft); font-size: var(--cal-status-fs, var(--azul-text-base)); font-weight: 600; text-align: center; }
.azul-cal__status:empty { display: var(--cal-status-empty, var(--cal-status-display, block)); }
.azul-cal__status.is-error { display: block; color: var(--azul-coral-dark); }
.azul-cal__months { display: grid; order: var(--cal-months-order, 0); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cal-months-gap, 40px); }
.azul-cal__title { margin: 0 0 var(--cal-title-mb, 12px); color: var(--cal-title-color, var(--azul-ink)); font-family: var(--cal-title-font, var(--azul-font-display)); font-size: var(--cal-title-fs, 1.25rem); font-weight: var(--cal-title-fw, 400); line-height: var(--cal-title-lh); text-align: var(--cal-title-align, center); text-transform: var(--cal-title-case, capitalize); }
.azul-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--cal-grid-gap, 4px 0); }
.azul-cal__dow { padding: var(--cal-dow-pad, 4px 0 8px); color: var(--azul-ink-soft); font-size: var(--cal-dow-fs, var(--azul-text-xs)); font-weight: 700; letter-spacing: var(--cal-dow-ls, .04em); text-align: center; text-transform: uppercase; }
/* A day: its ground is the ::before, inset in its cell. */
.azul-cal__day { position: relative; isolation: isolate; height: var(--cal-day-h, 46px); padding: 0; border: 0; border-radius: var(--cal-day-radius, 0); background: none; color: var(--cal-day-color, var(--azul-ink)); font: inherit; font-size: var(--cal-day-fs); font-weight: var(--cal-day-fw); cursor: pointer; }
.azul-cal__day::before { content: ""; position: absolute; inset: var(--cal-day-inset, 2px 3px); z-index: -1; border-radius: var(--azul-radius-s); }
.azul-cal__day.is-open::before { background: var(--cal-open, #eef6f0); }
.azul-cal__day.is-open:hover::before { background: var(--cal-hover-bg, #fff); box-shadow: inset 0 0 0 2px var(--cal-ring, var(--azul-coral)); }
.azul-cal__day.is-closed { color: #a59383; }
.azul-cal__day.is-closed::before { background: var(--cal-closed, repeating-linear-gradient(135deg, transparent 0 5px, rgba(138, 90, 60, .12) 5px 6px)); }
.azul-cal__day:is(.is-full, .is-off) { color: var(--cal-full-color, #b9aa9c); text-decoration: var(--cal-full-line, line-through); }
.azul-cal__day:is(.is-full, .is-off)::before { background: var(--cal-full-bg, none); }
.azul-cal__day:is(.is-past, .is-wait) { color: var(--cal-past, #cfc3b8); }
.azul-cal__day.is-short { color: var(--azul-ink-soft); cursor: help; }
.azul-cal__day.is-short::before { background: var(--cal-short, repeating-linear-gradient(135deg, color-mix(in srgb, var(--azul-coral) 5%, #fff) 0 4px, color-mix(in srgb, var(--azul-coral) 22%, #fff) 4px 5px)); }
.azul-cal__day.is-short::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 2px); left: 50%; z-index: 2; padding: 5px 8px; border-radius: var(--azul-radius-xs); background: var(--azul-ink); color: #fff; font-size: var(--azul-text-xs); font-weight: 600; line-height: 1.3; white-space: nowrap; opacity: 0; transform: translateX(-50%); visibility: hidden; pointer-events: none; }
.azul-cal__day.is-short.is-tip-start::after { left: 0; transform: none; }
.azul-cal__day.is-short.is-tip-end::after { right: 0; left: auto; transform: none; }
.azul-cal__day.is-short:is(:hover, :focus-visible, .is-tip) { z-index: 2; }
.azul-cal__day.is-short:is(:hover, :focus-visible, .is-tip)::after { opacity: 1; visibility: visible; }
.azul-cal__status.is-min { color: var(--azul-ink); }
.azul-cal__day.is-range { border-radius: 0; }
.azul-cal__day.is-range::before, .azul-cal__day.is-range:hover::before { inset: var(--cal-range-inset, 2px 0); border-radius: 0; background: var(--cal-range, var(--azul-sand-2)); }
.azul-cal__day:is(.is-start, .is-end, .is-on) { color: #fff; }
.azul-cal__day:is(.is-start, .is-end, .is-on)::before, .azul-cal__day:is(.is-start, .is-end, .is-on):hover::before { background: var(--cal-pick, var(--azul-coral)); }
.azul-cal__day.is-today { font-weight: var(--cal-today-fw, var(--cal-day-fw)); }
.azul-cal__day.is-today::after { content: var(--cal-today-dot, ""); position: absolute; bottom: 7px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 1px; background: currentColor; }
.azul-cal__picked { display: var(--cal-picked-display, flex); order: var(--cal-picked-order, 0); flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: var(--cal-picked-mt, 22px) 0 0; padding: var(--cal-picked-pad, 14px 18px); border-radius: var(--azul-radius); background: var(--azul-sand); color: var(--azul-ink); font-size: var(--cal-picked-fs, .97rem); }
.azul-cal__picked span { padding: 2px 10px; border-radius: var(--azul-radius-xs); background: var(--azul-sea); color: #fff; font-size: var(--azul-text-sm); font-weight: 700; }
.azul-cal__reset { margin-left: auto; padding: 0; border: 0; background: none; color: var(--azul-coral-dark); text-decoration: underline; cursor: pointer; }
.azul-cal__legend { display: flex; order: var(--cal-legend-order, 0); flex-wrap: wrap; justify-content: var(--cal-legend-justify, normal); gap: var(--cal-legend-gap, 8px 22px); margin: var(--cal-legend-mt, 20px) 0 0; padding: var(--cal-legend-pt, 16px) 0 0; border-top: 1px solid var(--azul-line); font-size: var(--cal-legend-fs); list-style: none; }
.azul-cal__legend li { display: flex; align-items: center; gap: 8px; color: var(--azul-ink-soft); font-size: .844rem; }
.azul-cal__legend span { position: relative; width: 16px; height: 16px; border-radius: var(--azul-radius-xs); }
.azul-cal__legend .is-open { background: var(--cal-open, #eef6f0); box-shadow: inset 0 0 0 1px var(--cal-open-line, #cfe3d5); }
.azul-cal__legend .is-closed { background: var(--cal-closed-swatch, repeating-linear-gradient(135deg, #fff 0 3px, rgba(138, 90, 60, .25) 3px 4px)); box-shadow: inset 0 0 0 1px var(--azul-line); }
.azul-cal__legend .is-full { background: var(--cal-full-swatch, #fff); box-shadow: inset 0 0 0 1px var(--azul-line); }
.azul-cal__legend .is-full::after { content: var(--cal-full-dash, ""); display: block; width: 12px; height: 1.5px; margin: 7px auto 0; background: var(--cal-full-color, #b9aa9c); }
.azul-cal__legend .is-start { background: var(--cal-pick, var(--azul-coral)); }
.azul-cal__legend .is-short { background: var(--cal-short-swatch, repeating-linear-gradient(135deg, #fff 0 3px, color-mix(in srgb, var(--azul-coral) 40%, #fff) 3px 4px)); box-shadow: inset 0 0 0 1px var(--azul-line); }

/* Date popover: a panel under its field, over the page and the fixed
   header (the place that holds it must not open a stacking context). */
.azul-datepop { position: absolute; z-index: var(--z-popover); top: calc(100% + 8px); left: 0; width: min(580px, 100%); padding: 14px 16px 12px; border: 1px solid var(--azul-line); border-radius: var(--azul-radius); background: var(--azul-surface); box-shadow: var(--azul-shadow-pop); }
.azul-datepop[hidden] { display: none; }
/* An open menu of the header (mega panel, phone menu) stays over it. */
body:has(.site-header:is(.is-mega, .is-open)) .azul-datepop { z-index: calc(var(--z-header) - 1); }

/* Chips: one choice among a few (who takes a room or a package, a room
   filter, a time slot); .is-on marks the chosen one. --large: the filters,
   in the body type; --solid: the time slots, filled once chosen. */
.azul-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 14px; border: 1.5px solid var(--azul-line); border-radius: var(--azul-radius-s); background: #fff; color: var(--azul-ink); font: inherit; font-size: var(--azul-text-md); font-weight: 600; line-height: 1.2; cursor: pointer; }
.azul-chip:not(:disabled):hover { border-color: var(--azul-coral); }
.azul-chip.is-on { border-color: var(--azul-coral); background: var(--azul-coral-tint); color: var(--azul-coral-dark); }
.azul-chip:disabled { opacity: .35; text-decoration: line-through; }
.azul-chip .icon { width: 15px; height: 15px; stroke-width: 2.6; }
.azul-chip--large { gap: 10px; min-height: 44px; padding: 8px 20px; background: var(--azul-surface); font: inherit; }
.azul-chip--large .icon { width: 20px; height: 20px; stroke-width: 1.6; }
.azul-chip--solid { display: inline-block; align-items: normal; gap: normal; min-height: auto; padding: 7px 12px; font-size: .844rem; }
.azul-chip--solid.is-on { background: var(--azul-coral); color: #fff; }

/* Selection mark of an option: a box, filled when its card is .is-on. */
.azul-check { display: grid; place-items: center; width: 26px; height: 26px; border: 1.5px solid #cdb9a6; border-radius: var(--azul-radius-s); background: #fff; color: transparent; }
.is-on .azul-check { border-color: var(--azul-coral); background: var(--azul-coral); color: #fff; }
.azul-check .icon { width: 16px; height: 16px; stroke-width: 2.6; }
.azul-check .icon rect { display: none; }

/* Spinner. --spinner-*: size, line, track, color, radius, slow (duration
   with reduced motion). */
.azul-spinner { width: var(--spinner-size, 20px); height: var(--spinner-size, 20px); border: var(--spinner-line, 2px) solid var(--spinner-track, var(--azul-line)); border-top-color: var(--spinner-color, var(--azul-coral)); border-radius: var(--spinner-radius, var(--azul-radius-s)); animation: azul-spin .8s linear infinite; }
@keyframes azul-spin { to { transform: rotate(360deg); } }

/* Step bar: numbers on brush strokes joined by the dashed wave of the
   arrival steps. */
.azul-steps-bar { display: flex; align-items: center; gap: 14px; margin: 0 0 36px; padding: 0; list-style: none; }
.azul-steps-bar__item { display: flex; flex: 1 1 auto; align-items: center; gap: 14px; min-width: 0; }
.azul-steps-bar__item:last-child { flex: none; }
.azul-steps-bar__item:not(:last-child)::after { content: ""; flex: 1; min-width: 16px; height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='12' viewBox='0 0 120 12'%3E%3Cpath d='M0 6 C30 2.5 30 2.5 60 6 S90 9.5 120 6' fill='none' stroke='%23c9532c' stroke-width='1.5' stroke-dasharray='6 6'/%3E%3C/svg%3E") left center / 120px 12px repeat-x; opacity: .45; }
.azul-steps-bar__item.is-done::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='12' viewBox='0 0 120 12'%3E%3Cpath d='M0 6 C30 2.5 30 2.5 60 6 S90 9.5 120 6' fill='none' stroke='%237fb6dc' stroke-width='1.5' stroke-dasharray='6 6'/%3E%3C/svg%3E"); opacity: .55; }
.azul-steps-bar__item button { display: flex; flex: none; align-items: center; gap: 10px; padding: 0; border: 0; background: none; color: var(--azul-ink-soft); font: inherit; font-size: var(--azul-text-xl); font-weight: 600; text-align: left; white-space: nowrap; cursor: pointer; }
.azul-steps-bar__item button:disabled { cursor: default; }
.azul-steps-bar__num { --brush-color: #ece2d4; display: inline-grid; flex: none; place-items: center; width: 46px; height: 36px; color: var(--azul-ink-soft); font-size: 1.125rem; font-weight: 700; font-variant-numeric: lining-nums tabular-nums; transition: color var(--azul-t) ease; }
.azul-steps-bar__num::before { transition: background-color var(--azul-t) ease; }
.azul-steps-bar__item:is(.is-done, .is-current) button, .azul-steps-bar__item.is-done .azul-steps-bar__num { color: var(--azul-ink); }
.azul-steps-bar__item.is-done .azul-steps-bar__num { --brush-color: var(--azul-sky-tint); }
.azul-steps-bar__item.is-done button:hover .azul-steps-bar__label { text-decoration: underline; }
.azul-steps-bar__item.is-current .azul-steps-bar__num { color: #fff; }
.azul-steps-bar__item.is-current .azul-steps-bar__num { --brush-color: var(--azul-coral); }

/* Segmented control: one choice among a few, the chosen one raised. */
.azul-segmented { display: inline-flex; padding: 4px; border-radius: var(--azul-radius); background: var(--azul-sand); }
.azul-segmented button { padding: 10px 18px; border: 0; border-radius: var(--azul-radius-s); background: none; color: var(--azul-ink-soft); font: inherit; font-size: var(--azul-text-base); font-weight: 700; cursor: pointer; }
.azul-segmented button.is-on { background: #fff; color: var(--azul-ink); box-shadow: 0 1px 3px var(--azul-hairline); }

@media (max-width: 760px) {
  .azul-steps-bar, .azul-steps-bar__item { gap: 8px; }
  .azul-steps-bar__label { display: none; }
  .azul-steps-bar__item.is-current .azul-steps-bar__label { display: inline; }
  .azul-cal__months { grid-template-columns: minmax(0, 1fr); }
  .azul-cal__day { height: var(--cal-day-h, 42px); }
}
@media (prefers-reduced-motion: reduce) {
  .azul-spinner { animation-duration: var(--spinner-slow, 2s); }
}