/*
 * Hospitality UI - front office components (DESIGN_SYSTEM §6)
 * Brand block, buttons (Bootstrap + theme .button / .exclusive variants), form controls, select,
 * uniform.js wrappers (checkbox, radio, select, file), chosen, input groups, dropdowns, tabs,
 * pills, cards / boxes / panels, tables (base), badges / labels / status, alerts, modals + fancybox
 * skin, pagination, tooltips, jQuery UI datepicker, progress.
 * FO minimums: 48px controls, 44px touch targets, 16px body text (13px floor).
 * Booking bar = 20-booking*.css, pages = 30-pages*.css (later work packages).
 *
 * @license https://opensource.org/license/osl-3-0-php Open Software License version 3.0
 */

/* =================================================================== 1. brand block (§4.1, §6.27) */

html.hsp-ui-fo .hsp-ui-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--hsp-space-2);
  max-inline-size: 100%;
  color: var(--hsp-color-text-strong);
  text-decoration: none;
  white-space: nowrap;
}

html.hsp-ui-fo .hsp-ui-brand--on-dark {
  color: var(--hsp-color-text-inverse);
}

html.hsp-ui.hsp-ui-fo a:hover .hsp-ui-brand {
  text-decoration: none;
}

html.hsp-ui-fo .hsp-ui-brand__logo {
  display: block;
  inline-size: auto;
  block-size: auto;
  max-block-size: 4rem;
  max-inline-size: min(24rem, 60vw);
  object-fit: contain;
}

html.hsp-ui-fo .hsp-ui-brand--on-dark .hsp-ui-brand__logo--default,
html.hsp-ui-fo .hsp-ui-brand:not(.hsp-ui-brand--on-dark) .hsp-ui-brand__logo--inverse {
  display: none;
}

html.hsp-ui-fo .hsp-ui-brand__mark {
  display: inline-flex;
  flex: none;
  color: var(--hsp-color-brand-accent);
}

html.hsp-ui-fo .hsp-ui-brand--on-dark .hsp-ui-brand__mark {
  color: var(--hsp-color-brand-accent-on-dark);
}

html.hsp-ui-fo .hsp-ui-brand__mark-svg {
  inline-size: 3.2rem;
  block-size: 3.2rem;
}

html.hsp-ui-fo .hsp-ui-brand__name {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 2rem;
  line-height: 1.2;
  font-weight: var(--hsp-fw-semibold);
}

/* =================================================================== 2. buttons (§6.1) */

/* compact theme controls (occupancy steppers, quantity +/-) keep their own box until the booking layer restyles them */
html.hsp-ui.hsp-ui-fo :is(.btn, .button, .exclusive:where(a, button, input, span), input.button, button.button):where(:not(.occupancy_quantity_up, .occupancy_quantity_down, .button-plus, .button-minus, .qty_direction a)) {
  --hsp-ui-btn-h: var(--hsp-fo-control-md);
  --hsp-ui-btn-px: var(--hsp-space-5);
  --hsp-ui-btn-fs: var(--hsp-fs-body);
  --hsp-ui-btn-bg: var(--hsp-color-surface);
  --hsp-ui-btn-fg: var(--hsp-color-text);
  --hsp-ui-btn-bd: var(--hsp-color-border-control);
  --hsp-ui-btn-bg-hover: var(--hsp-color-surface-hover);
  --hsp-ui-btn-fg-hover: var(--hsp-color-text-strong);
  --hsp-ui-btn-bd-hover: var(--hsp-color-border-strong);
  --hsp-ui-btn-bg-active: var(--hsp-color-surface-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hsp-space-2);
  min-block-size: var(--hsp-ui-btn-h);
  padding-block: var(--hsp-space-1);
  padding-inline: var(--hsp-ui-btn-px);
  font-family: var(--hsp-font);
  font-size: var(--hsp-ui-btn-fs);
  font-weight: var(--hsp-fw-semibold);
  line-height: 1.25;
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
  text-decoration: none;
  text-shadow: none;
  white-space: nowrap;
  vertical-align: middle;
  color: var(--hsp-ui-btn-fg);
  background-color: var(--hsp-ui-btn-bg);
  background-image: none;
  border: var(--hsp-border-w) solid var(--hsp-ui-btn-bd);
  border-radius: var(--hsp-radius-md);
  box-shadow: none;
  filter: none;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--hsp-dur-fast) var(--hsp-ease-standard),
    border-color var(--hsp-dur-fast) var(--hsp-ease-standard),
    color var(--hsp-dur-fast) var(--hsp-ease-standard),
    box-shadow var(--hsp-dur-fast) var(--hsp-ease-standard);
}

html.hsp-ui.hsp-ui-fo :is(.btn, .button, .exclusive:where(a, button, input, span)):where(:not(.occupancy_quantity_up, .occupancy_quantity_down, .button-plus, .button-minus, .qty_direction a)):is(:hover, .hover) {
  color: var(--hsp-ui-btn-fg-hover);
  background-color: var(--hsp-ui-btn-bg-hover);
  background-image: none;
  border-color: var(--hsp-ui-btn-bd-hover);
  text-decoration: none;
  box-shadow: none;
}

html.hsp-ui.hsp-ui-fo :is(.btn, .button, .exclusive:where(a, button, input, span)):where(:not(.occupancy_quantity_up, .occupancy_quantity_down, .button-plus, .button-minus, .qty_direction a)):is(:active, .active) {
  background-color: var(--hsp-ui-btn-bg-active);
  background-image: none;
  box-shadow: none;
}

html.hsp-ui.hsp-ui-fo :is(.btn, .button, .exclusive:where(a, button, input, span)):focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

html.hsp-ui.hsp-ui-fo :is(.btn, .button, .exclusive:where(a, button, input, span)):focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--hsp-focus-ring);
}

/* theme buttons draw their box on an inner <span>: the outer element is the box now */
html.hsp-ui.hsp-ui-fo :is(.button, .exclusive:where(a, button, input, span), .btn) > span:not(.caret):not(.badge):not(.sr-only):not([class*="hsp-"]) {
  display: inline-flex;
  align-items: center;
  gap: var(--hsp-space-2);
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  box-shadow: none;
  filter: none;
}

html.hsp-ui.hsp-ui-fo :is(.button, .exclusive:where(a, button, input, span), .btn) :is(i, .icon):not([class*="text-"]) {
  margin: 0;
  font-size: 1.6rem;
  color: inherit;
  vertical-align: middle;
}

html.hsp-ui.hsp-ui-fo :is(.btn, .button) .caret {
  border-block-start-color: currentColor;
}

/* primary: search, book now, add to cart, continue (one per region) */
html.hsp-ui.hsp-ui-fo :is(.btn-primary, .btn-success, .button-medium, .button.button-small, .exclusive:where(a, button, input, span),
  .ajax_add_to_cart_button, .hsp-ui-btn--primary),
html.hsp-ui.hsp-ui-fo .btn.btn-default.button-medium {
  --hsp-ui-btn-bg: var(--hsp-color-action);
  --hsp-ui-btn-fg: var(--hsp-color-on-action);
  --hsp-ui-btn-bd: var(--hsp-color-action);
  --hsp-ui-btn-bg-hover: var(--hsp-color-action-hover);
  --hsp-ui-btn-fg-hover: var(--hsp-color-on-action);
  --hsp-ui-btn-bd-hover: var(--hsp-color-action-hover);
  --hsp-ui-btn-bg-active: var(--hsp-color-action-active);
}

/* secondary */
html.hsp-ui.hsp-ui-fo :is(.btn-default, .btn-info, .btn-warning, .exclusive-medium, .lnk_view, .button.button-default, .hsp-ui-btn--secondary):not(.button-medium) {
  --hsp-ui-btn-bg: var(--hsp-color-surface);
  --hsp-ui-btn-fg: var(--hsp-color-text);
  --hsp-ui-btn-bd: var(--hsp-color-border-control);
  --hsp-ui-btn-bg-hover: var(--hsp-color-surface-hover);
  --hsp-ui-btn-fg-hover: var(--hsp-color-text-strong);
  --hsp-ui-btn-bd-hover: var(--hsp-color-border-strong);
  --hsp-ui-btn-bg-active: var(--hsp-color-surface-muted);
}

/* tertiary and link */
html.hsp-ui.hsp-ui-fo :is(.btn-link, .hsp-ui-btn--tertiary) {
  --hsp-ui-btn-bg: transparent;
  --hsp-ui-btn-fg: var(--hsp-color-text-link);
  --hsp-ui-btn-bd: transparent;
  --hsp-ui-btn-bg-hover: var(--hsp-color-action-subtle);
  --hsp-ui-btn-fg-hover: var(--hsp-color-text-link-hover);
  --hsp-ui-btn-bd-hover: transparent;
  --hsp-ui-btn-bg-active: var(--hsp-color-action-subtle-hover);
}

html.hsp-ui.hsp-ui-fo .btn-link {
  --hsp-ui-btn-bg-hover: transparent;
  --hsp-ui-btn-px: var(--hsp-space-2);
}

html.hsp-ui.hsp-ui-fo .btn-link:hover {
  text-decoration: underline;
}

/* destructive */
html.hsp-ui.hsp-ui-fo :is(.btn-danger, .hsp-ui-btn--danger) {
  --hsp-ui-btn-bg: var(--hsp-color-danger-action);
  --hsp-ui-btn-fg: var(--hsp-color-on-action);
  --hsp-ui-btn-bd: var(--hsp-color-danger-action);
  --hsp-ui-btn-bg-hover: var(--hsp-color-danger-action-hover);
  --hsp-ui-btn-fg-hover: var(--hsp-color-on-action);
  --hsp-ui-btn-bd-hover: var(--hsp-color-danger-action-hover);
  --hsp-ui-btn-bg-active: var(--hsp-color-danger-action-hover);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-btn--danger-secondary {
  --hsp-ui-btn-bg: var(--hsp-color-surface);
  --hsp-ui-btn-fg: var(--hsp-color-text-error);
  --hsp-ui-btn-bd: var(--hsp-color-border-error);
  --hsp-ui-btn-bg-hover: var(--hsp-tone-danger-bg);
  --hsp-ui-btn-fg-hover: var(--hsp-color-text-error);
  --hsp-ui-btn-bd-hover: var(--hsp-color-border-error);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-btn--icon {
  --hsp-ui-btn-bg: transparent;
  --hsp-ui-btn-fg: var(--hsp-color-text-secondary);
  --hsp-ui-btn-bd: transparent;
  inline-size: var(--hsp-touch-min);
  min-block-size: var(--hsp-touch-min);
  padding-inline: 0;
}

/* sizes: FO md 48 / lg 56 / sm 44 (touch floor) */
html.hsp-ui.hsp-ui-fo :is(.btn-sm, .btn-xs, .button-small) {
  --hsp-ui-btn-h: var(--hsp-touch-min);
  --hsp-ui-btn-px: var(--hsp-space-4);
  --hsp-ui-btn-fs: var(--hsp-fs-sm);
}

html.hsp-ui.hsp-ui-fo :is(.btn-lg, .button-large, .hsp-ui-btn--lg) {
  --hsp-ui-btn-h: var(--hsp-fo-control-lg);
  --hsp-ui-btn-px: var(--hsp-space-6);
}

html.hsp-ui.hsp-ui-fo .btn-block {
  display: flex;
  inline-size: 100%;
}

html.hsp-ui.hsp-ui-fo :is(.btn, .button, .exclusive):is([disabled], .disabled, [aria-disabled="true"]),
html.hsp-ui.hsp-ui-fo fieldset[disabled] :is(.btn, .button, .exclusive),
html.hsp-ui.hsp-ui-fo :is(span.exclusive, input.button_disabled, input.exclusive_disabled) {
  color: var(--hsp-color-text-disabled);
  background-color: var(--hsp-color-surface-muted);
  background-image: none;
  border-color: var(--hsp-color-surface-muted);
  opacity: 1;
  cursor: not-allowed;
  pointer-events: auto;
}

/* groups */
html.hsp-ui.hsp-ui-fo .btn-group > .btn + .btn,
html.hsp-ui.hsp-ui-fo .btn-group > .btn + .dropdown-toggle {
  margin-inline-start: -1px;
}

html.hsp-ui.hsp-ui-fo .btn-group > .btn:not(:first-child):not(:last-child) {
  border-radius: 0;
}

html.hsp-ui.hsp-ui-fo .btn-group > .btn:first-child:not(:last-child) {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

html.hsp-ui.hsp-ui-fo .btn-group > .btn:last-child:not(:first-child) {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

/* =================================================================== 3. forms (§6.3, §6.4) */

/* element-level specificity: labels styled by a theme / module class keep their colours (labels on photos) */
:where(html.hsp-ui-fo) label,
:where(html.hsp-ui-fo) .control-label {
  margin-block-end: 0.6rem;
  font-size: var(--hsp-fs-sm);
  line-height: var(--hsp-lh-sm);
  font-weight: var(--hsp-fw-medium);
  color: var(--hsp-color-text-secondary);
  text-align: start;
}

html.hsp-ui.hsp-ui-fo :is(sup, .required):is(.required, [class*="required"]) {
  color: var(--hsp-color-text-error);
}

html.hsp-ui.hsp-ui-fo .help-block,
html.hsp-ui.hsp-ui-fo .form_info {
  margin-block: var(--hsp-space-1) var(--hsp-space-2);
  max-inline-size: 60ch;
  font-size: var(--hsp-fs-xs);
  line-height: var(--hsp-lh-xs);
  font-style: normal;
  color: var(--hsp-color-text-muted);
}

html.hsp-ui.hsp-ui-fo .form-group {
  margin-block-end: var(--hsp-space-4);
}

html.hsp-ui.hsp-ui-fo legend {
  font-size: var(--hsp-fs-body);
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-color-text-strong);
  border-block-end-color: var(--hsp-color-border-subtle);
}

html.hsp-ui.hsp-ui-fo :is(.form-control, input[type="text"], input[type="search"], input[type="password"], input[type="email"],
  input[type="tel"], input[type="url"], input[type="number"], input[type="date"], input[type="time"], textarea):not(select) {
  inline-size: 100%;
  block-size: var(--hsp-fo-control-md);
  min-block-size: var(--hsp-fo-control-md);
  padding-block: var(--hsp-space-2);
  padding-inline: var(--hsp-space-4);
  font-size: var(--hsp-fs-body);
  line-height: var(--hsp-lh-body);
  color: var(--hsp-color-text);
  background-color: var(--hsp-color-surface);
  background-image: none;
  border: var(--hsp-border-w) solid var(--hsp-color-border-control);
  border-radius: var(--hsp-radius-md);
  box-shadow: none;
  transition: border-color var(--hsp-dur-fast) var(--hsp-ease-standard), box-shadow var(--hsp-dur-fast) var(--hsp-ease-standard);
}

html.hsp-ui.hsp-ui-fo :is(.form-control, input[type="text"], input[type="search"], input[type="password"], input[type="email"],
  input[type="tel"], input[type="url"], input[type="number"], textarea):hover:not(:disabled):not([readonly]) {
  border-color: var(--hsp-color-border-strong);
}

html.hsp-ui.hsp-ui-fo :is(.form-control, input[type="text"], input[type="search"], input[type="password"], input[type="email"],
  input[type="tel"], input[type="url"], input[type="number"], input[type="date"], input[type="time"], textarea, select):focus {
  border-color: var(--hsp-color-border-selected);
  outline: 2px solid transparent;
  box-shadow: var(--hsp-focus-ring);
}

html.hsp-ui.hsp-ui-fo :is(textarea, textarea.form-control) {
  block-size: auto;
  min-block-size: 9.6rem;
  resize: vertical;
}

html.hsp-ui.hsp-ui-fo :is(.form-control, input, textarea)::placeholder {
  color: var(--hsp-color-text-muted);
  opacity: 1;
}

html.hsp-ui.hsp-ui-fo :is(.form-control, input, textarea, select):is(:disabled, [disabled]),
html.hsp-ui.hsp-ui-fo fieldset[disabled] :is(.form-control, input, textarea, select) {
  color: var(--hsp-color-text-disabled);
  background-color: var(--hsp-color-surface-muted);
  border-color: var(--hsp-color-surface-muted);
  cursor: not-allowed;
  opacity: 1;
}

/* read-only = locked value; read-only inputs that open a date picker keep the normal field look */
html.hsp-ui.hsp-ui-fo :is(.form-control, input, textarea)[readonly]:not(:disabled):where(:not(.hasDatepicker):not([class*="date"]):not([id*="date"]):not([name*="date"]):not([id*="check"])) {
  background-color: var(--hsp-color-surface-sunken);
  border-style: dashed;
  cursor: text;
}

/* validation (theme: .form-error / .form-ok on .form-group; Bootstrap .has-*) */
html.hsp-ui.hsp-ui-fo :is(.has-error, .form-error) :is(.form-control, input, textarea, select),
html.hsp-ui.hsp-ui-fo :is(.form-control, input, textarea, select)[aria-invalid="true"] {
  border-color: var(--hsp-color-border-error);
  background-image: none;
  color: var(--hsp-color-text);
}

html.hsp-ui.hsp-ui-fo :is(.has-error, .form-error) :is(.help-block, label, .control-label) {
  color: var(--hsp-color-text-error);
}

html.hsp-ui.hsp-ui-fo :is(.has-success, .form-ok) :is(.form-control, input, textarea, select) {
  border-color: var(--hsp-tone-success-solid);
  background-image: none;
  color: var(--hsp-color-text);
}

/* native select: chevron at the inline end */
html.hsp-ui.hsp-ui-fo select.form-control:not([multiple]):not([size]),
html.hsp-ui.hsp-ui-fo .hsp-ui-select {
  appearance: none;
  -webkit-appearance: none;
  inline-size: 100%;
  block-size: var(--hsp-fo-control-md);
  padding-block: 0;
  padding-inline: var(--hsp-space-4) 4rem;
  font-size: var(--hsp-fs-body);
  color: var(--hsp-color-text);
  text-overflow: ellipsis;
  background-color: var(--hsp-color-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%234A4238' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.6rem center; /* hsp-lint: allow-physical (select chevron) */
  background-size: 1.2rem 0.8rem;
  border: var(--hsp-border-w) solid var(--hsp-color-border-control);
  border-radius: var(--hsp-radius-md);
}

html.hsp-ui-fo[dir="rtl"] :is(select.form-control:not([multiple]):not([size]), .hsp-ui-select) {
  background-position: left 1.6rem center; /* hsp-lint: allow-physical (select chevron, RTL) */
}

/* input groups */
html.hsp-ui.hsp-ui-fo .input-group-addon {
  min-inline-size: var(--hsp-fo-control-md);
  padding-inline: var(--hsp-space-3);
  font-size: var(--hsp-fs-body);
  color: var(--hsp-color-text-secondary);
  background-color: var(--hsp-color-surface-sunken);
  border: var(--hsp-border-w) solid var(--hsp-color-border-control);
  border-radius: var(--hsp-radius-md);
}

html.hsp-ui.hsp-ui-fo .input-group :is(.form-control, .input-group-addon, .input-group-btn > .btn) {
  border-radius: 0;
}

html.hsp-ui.hsp-ui-fo .input-group > :is(.form-control, .input-group-addon):first-child,
html.hsp-ui.hsp-ui-fo .input-group > .input-group-btn:first-child > .btn {
  border-start-start-radius: var(--hsp-radius-md);
  border-end-start-radius: var(--hsp-radius-md);
}

html.hsp-ui.hsp-ui-fo .input-group > :is(.form-control, .input-group-addon):last-child,
html.hsp-ui.hsp-ui-fo .input-group > .input-group-btn:last-child > .btn {
  border-start-end-radius: var(--hsp-radius-md);
  border-end-end-radius: var(--hsp-radius-md);
}

html.hsp-ui.hsp-ui-fo .input-group > .input-group-addon:first-child { border-inline-end: 0; }
html.hsp-ui.hsp-ui-fo .input-group > .input-group-addon:last-child { border-inline-start: 0; }

html.hsp-ui.hsp-ui-fo .input-group > .input-group-btn > .btn {
  block-size: var(--hsp-fo-control-md);
}

/* =================================================================== 4. checkbox, radio and uniform.js wrappers (§6.10) */

html.hsp-ui.hsp-ui-fo :is(input[type="checkbox"], input[type="radio"]) {
  inline-size: 2rem;
  block-size: 2rem;
  accent-color: var(--hsp-color-action);
  cursor: pointer;
}

html.hsp-ui.hsp-ui-fo :is(.checkbox, .radio) label,
html.hsp-ui.hsp-ui-fo :is(.checkbox-inline, .radio-inline) {
  display: inline-flex;
  align-items: center;
  gap: var(--hsp-space-2);
  min-block-size: var(--hsp-touch-min);
  font-size: var(--hsp-fs-body);
  font-weight: var(--hsp-fw-regular);
  color: var(--hsp-color-text);
  cursor: pointer;
}

/* uniform: div.checker > span > input / div.radio > span > input */
html.hsp-ui.hsp-ui-fo :is(div.checker, div.radio) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 2rem;
  margin-inline-end: var(--hsp-space-2);
  vertical-align: middle;
}

html.hsp-ui.hsp-ui-fo :is(div.checker, div.radio) span {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 2rem;
  background: var(--hsp-color-surface);
  background-image: none;
  border: var(--hsp-border-w) solid var(--hsp-color-border-control);
  border-radius: var(--hsp-radius-xs);
  transition: background-color var(--hsp-dur-fast) var(--hsp-ease-standard), border-color var(--hsp-dur-fast) var(--hsp-ease-standard);
}

html.hsp-ui.hsp-ui-fo div.radio span {
  border-radius: var(--hsp-radius-pill);
}

html.hsp-ui.hsp-ui-fo :is(div.checker, div.radio) input {
  position: absolute;
  inset: -1px;
  inline-size: calc(100% + 2px);
  block-size: calc(100% + 2px);
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

html.hsp-ui.hsp-ui-fo :is(div.checker, div.radio).hover span {
  border-color: var(--hsp-color-border-strong);
}

html.hsp-ui.hsp-ui-fo :is(div.checker, div.radio).focus span {
  box-shadow: var(--hsp-focus-ring);
}

html.hsp-ui.hsp-ui-fo div.checker span.checked {
  background-color: var(--hsp-color-action);
  border-color: var(--hsp-color-action);
}

html.hsp-ui.hsp-ui-fo div.checker span.checked::before {
  content: "";
  display: block;
  inline-size: 0.6rem;
  block-size: 1.1rem;
  margin-block-start: -0.2rem;
  border: solid var(--hsp-color-on-action);
  border-width: 0 2px 2px 0; /* hsp-lint: allow-physical (tick drawn with borders, not directional) */
  transform: rotate(45deg);
}

html.hsp-ui.hsp-ui-fo div.radio span.checked {
  border-color: var(--hsp-color-action);
  border-width: 2px;
}

html.hsp-ui.hsp-ui-fo div.radio span.checked::before {
  content: "";
  display: block;
  inline-size: 1rem;
  block-size: 1rem;
  background: var(--hsp-color-action);
  border-radius: var(--hsp-radius-pill);
}

html.hsp-ui.hsp-ui-fo :is(div.checker, div.radio).disabled span {
  background-color: var(--hsp-color-surface-muted);
  border-color: var(--hsp-color-surface-muted);
}

/* uniform select: div.selector > span (value) + select (transparent, on top) */
html.hsp-ui.hsp-ui-fo div.selector {
  position: relative;
  display: block;
  inline-size: 100%;
  max-inline-size: 100%;
  block-size: var(--hsp-fo-control-md);
  padding: 0;
  line-height: var(--hsp-fo-control-md);
  background: var(--hsp-color-surface);
  background-image: none;
  border: var(--hsp-border-w) solid var(--hsp-color-border-control);
  border-radius: var(--hsp-radius-md);
  overflow: hidden;
}

html.hsp-ui.hsp-ui-fo div.selector.hover {
  border-color: var(--hsp-color-border-strong);
}

html.hsp-ui.hsp-ui-fo div.selector.focus {
  border-color: var(--hsp-color-border-selected);
  box-shadow: var(--hsp-focus-ring);
}

html.hsp-ui.hsp-ui-fo div.selector span {
  display: block;
  inline-size: 100% !important; /* allow-list item 3: uniform writes an inline width */
  block-size: 100%;
  padding-inline: var(--hsp-space-4) 4rem;
  font-size: var(--hsp-fs-body);
  line-height: calc(var(--hsp-fo-control-md) - 2px);
  color: var(--hsp-color-text);
  text-overflow: ellipsis;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%234A4238' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.6rem center; /* hsp-lint: allow-physical (select chevron) */
  background-size: 1.2rem 0.8rem;
}

html.hsp-ui-fo[dir="rtl"] div.selector span {
  background-position: left 1.6rem center; /* hsp-lint: allow-physical (select chevron, RTL) */
}

html.hsp-ui.hsp-ui-fo div.selector select {
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  font-size: var(--hsp-fs-body);
}

html.hsp-ui.hsp-ui-fo div.selector.disabled {
  background-color: var(--hsp-color-surface-muted);
  border-color: var(--hsp-color-surface-muted);
}

html.hsp-ui.hsp-ui-fo div.selector.disabled span {
  color: var(--hsp-color-text-disabled);
}

/* uniform file input */
html.hsp-ui.hsp-ui-fo div.uploader {
  display: inline-flex;
  align-items: center;
  gap: var(--hsp-space-2);
  block-size: var(--hsp-fo-control-md);
  background: none;
}

html.hsp-ui.hsp-ui-fo div.uploader span.filename {
  flex: 1 1 auto;
  block-size: 100%;
  padding-inline: var(--hsp-space-3);
  line-height: var(--hsp-fo-control-md);
  color: var(--hsp-color-text-secondary);
  background: var(--hsp-color-surface-sunken);
  border: var(--hsp-border-w) dashed var(--hsp-color-border-control);
  border-radius: var(--hsp-radius-md);
}

html.hsp-ui.hsp-ui-fo div.uploader span.action {
  block-size: 100%;
  padding-inline: var(--hsp-space-4);
  line-height: var(--hsp-fo-control-md);
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-color-text);
  background: var(--hsp-color-surface);
  border: var(--hsp-border-w) solid var(--hsp-color-border-control);
  border-radius: var(--hsp-radius-md);
}

/* =================================================================== 5. chosen (§6.9) */

html.hsp-ui.hsp-ui-fo .chosen-container {
  font-family: var(--hsp-font);
  font-size: var(--hsp-fs-body);
}

html.hsp-ui.hsp-ui-fo .chosen-container .chosen-drop {
  margin-block-start: var(--hsp-space-1);
  background: var(--hsp-color-surface);
  border: var(--hsp-border-w) solid var(--hsp-color-border-subtle);
  border-radius: var(--hsp-radius-lg);
  box-shadow: var(--hsp-shadow-3);
  overflow: hidden;
}

html.hsp-ui.hsp-ui-fo .chosen-container .chosen-results {
  margin: 0;
  padding: var(--hsp-space-1);
  color: var(--hsp-color-text);
}

html.hsp-ui.hsp-ui-fo .chosen-container .chosen-results li {
  min-block-size: var(--hsp-fo-control-md);
  display: flex;
  align-items: center;
  padding-inline: var(--hsp-space-4);
  border-radius: var(--hsp-radius-md);
  line-height: var(--hsp-lh-sm);
}

html.hsp-ui.hsp-ui-fo .chosen-container .chosen-results li.highlighted {
  color: var(--hsp-color-text-selected);
  background: var(--hsp-color-surface-selected);
}

html.hsp-ui.hsp-ui-fo .chosen-container .chosen-results li em {
  background: none;
  font-style: normal;
  font-weight: var(--hsp-fw-semibold);
}

/* =================================================================== 6. dropdowns (§6.23) */

html.hsp-ui.hsp-ui-fo .dropdown-menu {
  min-inline-size: 20rem;
  margin-block-start: var(--hsp-space-1);
  padding: var(--hsp-space-1);
  font-size: var(--hsp-fs-body);
  text-align: start;
  background-color: var(--hsp-color-surface);
  border: var(--hsp-border-w) solid var(--hsp-color-border-subtle);
  border-radius: var(--hsp-radius-md);
  box-shadow: var(--hsp-shadow-2);
}

html.hsp-ui.hsp-ui-fo .dropdown-menu > li > a {
  display: flex;
  align-items: center;
  gap: var(--hsp-space-2);
  min-block-size: var(--hsp-touch-min);
  padding-inline: var(--hsp-space-3);
  color: var(--hsp-color-text);
  border-radius: var(--hsp-radius-sm);
  white-space: nowrap;
}

html.hsp-ui.hsp-ui-fo .dropdown-menu > li > a:is(:hover, :focus) {
  color: var(--hsp-color-text-strong);
  background-color: var(--hsp-color-surface-hover);
  background-image: none;
}

html.hsp-ui.hsp-ui-fo .dropdown-menu > .active > a,
html.hsp-ui.hsp-ui-fo .dropdown-menu > .active > a:is(:hover, :focus) {
  color: var(--hsp-color-text-selected);
  background-color: var(--hsp-color-surface-selected);
}

html.hsp-ui.hsp-ui-fo .dropdown-menu .divider {
  background-color: var(--hsp-color-border-subtle);
}

/* =================================================================== 7. tabs and pills (§6.11) */

html.hsp-ui.hsp-ui-fo .nav-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--hsp-space-1);
  overflow-x: auto;
  overflow-y: hidden;
  border-block-end: var(--hsp-border-w) solid var(--hsp-color-border-subtle);
}

html.hsp-ui.hsp-ui-fo .nav-tabs::before,
html.hsp-ui.hsp-ui-fo .nav-tabs::after {
  content: none;
}

html.hsp-ui.hsp-ui-fo .nav-tabs > li {
  float: none;
  flex: none;
  margin-block-end: -1px;
}

html.hsp-ui.hsp-ui-fo .nav-tabs > li > a {
  display: inline-flex;
  align-items: center;
  gap: var(--hsp-space-2);
  min-block-size: var(--hsp-touch-min);
  margin: 0;
  padding-inline: var(--hsp-space-4);
  font-size: var(--hsp-fs-body);
  font-weight: var(--hsp-fw-medium);
  color: var(--hsp-color-text-secondary);
  white-space: nowrap;
  background: transparent;
  border: 0;
  border-block-end: 3px solid transparent;
  border-radius: 0;
}

html.hsp-ui.hsp-ui-fo .nav-tabs > li > a:hover {
  color: var(--hsp-color-text-strong);
  background: transparent;
  border-block-end-color: var(--hsp-sandstone-300);
}

html.hsp-ui.hsp-ui-fo .nav-tabs > li.active > a,
html.hsp-ui.hsp-ui-fo .nav-tabs > li.active > a:is(:hover, :focus),
html.hsp-ui.hsp-ui-fo .nav-tabs > li > a[aria-selected="true"] {
  color: var(--hsp-color-text-strong);
  font-weight: var(--hsp-fw-semibold);
  background: transparent;
  border: 0;
  border-block-end: 3px solid var(--hsp-color-action);
}

html.hsp-ui.hsp-ui-fo .nav-pills > li > a {
  min-block-size: var(--hsp-touch-min);
  display: inline-flex;
  align-items: center;
  padding-inline: var(--hsp-space-4);
  font-weight: var(--hsp-fw-medium);
  color: var(--hsp-color-text-secondary);
  border-radius: var(--hsp-radius-pill);
}

html.hsp-ui.hsp-ui-fo .nav-pills > li.active > a,
html.hsp-ui.hsp-ui-fo .nav-pills > li.active > a:is(:hover, :focus) {
  color: var(--hsp-color-text-selected);
  background-color: var(--hsp-color-surface-selected);
  font-weight: var(--hsp-fw-semibold);
}

/* =================================================================== 8. cards, boxes, panels (§6.19) */

html.hsp-ui.hsp-ui-fo :is(.box, .panel) {
  margin-block-end: var(--hsp-space-6);
  padding: var(--hsp-space-5);
  font-size: var(--hsp-fs-body);
  line-height: var(--hsp-lh-body);
  color: var(--hsp-color-text);
  background: var(--hsp-color-surface);
  border: var(--hsp-border-w) solid var(--hsp-color-border-subtle);
  border-radius: var(--hsp-radius-lg);
  box-shadow: var(--hsp-shadow-1);
}

html.hsp-ui.hsp-ui-fo .panel {
  padding: 0;
}

html.hsp-ui.hsp-ui-fo .panel-heading {
  padding-block: var(--hsp-space-3);
  padding-inline: var(--hsp-space-5);
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-color-text-strong);
  background: transparent;
  border-block-end: var(--hsp-border-w) solid var(--hsp-color-border-subtle);
  border-radius: var(--hsp-radius-lg) var(--hsp-radius-lg) 0 0;
}

html.hsp-ui.hsp-ui-fo .panel-body {
  padding: var(--hsp-space-5);
}

html.hsp-ui.hsp-ui-fo .panel-footer {
  padding-block: var(--hsp-space-3);
  padding-inline: var(--hsp-space-5);
  background: var(--hsp-color-surface);
  border-block-start: var(--hsp-border-w) solid var(--hsp-color-border-subtle);
  border-radius: 0 0 var(--hsp-radius-lg) var(--hsp-radius-lg);
}

html.hsp-ui.hsp-ui-fo .well {
  padding: var(--hsp-space-4);
  background: var(--hsp-color-surface-sunken);
  border: 0;
  border-radius: var(--hsp-radius-md);
  box-shadow: none;
}

html.hsp-ui-fo .hsp-ui-card {
  position: relative;
  background: var(--hsp-color-surface);
  border: var(--hsp-border-w) solid var(--hsp-color-border-subtle);
  border-radius: var(--hsp-radius-lg);
  box-shadow: var(--hsp-shadow-1);
  transition: box-shadow var(--hsp-dur-fast) var(--hsp-ease-standard), transform var(--hsp-dur-fast) var(--hsp-ease-standard);
}

html.hsp-ui-fo .hsp-ui-card--link:hover {
  box-shadow: var(--hsp-shadow-2);
  transform: translateY(-1px);
}

html.hsp-ui-fo .hsp-ui-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--hsp-space-3) var(--hsp-space-5);
  margin: 0;
  padding: var(--hsp-space-4);
  background: var(--hsp-color-surface-sunken);
  border-radius: var(--hsp-radius-md);
}

html.hsp-ui-fo .hsp-ui-facts dt {
  font-size: var(--hsp-fs-xs);
  font-weight: var(--hsp-fw-regular);
  color: var(--hsp-color-text-muted);
}

html.hsp-ui-fo .hsp-ui-facts dd {
  margin: 0;
  font-weight: var(--hsp-fw-medium);
  color: var(--hsp-color-text-strong);
}

/* =================================================================== 9. tables (base) */

html.hsp-ui.hsp-ui-fo .table {
  inline-size: 100%;
  margin-block-end: var(--hsp-space-5);
  font-size: var(--hsp-fs-sm);
  line-height: var(--hsp-lh-sm);
  color: var(--hsp-color-text);
  background: var(--hsp-color-surface);
}

html.hsp-ui.hsp-ui-fo .table > :is(thead, tbody, tfoot) > tr > :is(th, td) {
  padding-block: var(--hsp-space-3);
  padding-inline: var(--hsp-space-4);
  line-height: var(--hsp-lh-sm);
  vertical-align: middle;
  border-block-start: 0;
  border-block-end: var(--hsp-border-w) solid var(--hsp-color-border-subtle);
}

html.hsp-ui.hsp-ui-fo .table > thead > tr > th {
  font-size: var(--hsp-fs-xs);
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-color-text-secondary);
  text-transform: none;
  background: var(--hsp-color-surface-sunken);
  border-block-end: var(--hsp-border-w) solid var(--hsp-color-border);
}

html.hsp-ui.hsp-ui-fo .table-bordered,
html.hsp-ui.hsp-ui-fo .table-bordered > :is(thead, tbody, tfoot) > tr > :is(th, td) {
  border: var(--hsp-border-w) solid var(--hsp-color-border-subtle);
}

html.hsp-ui.hsp-ui-fo .table-striped > tbody > tr:nth-child(odd) > :is(td, th) {
  background: transparent;
}

html.hsp-ui.hsp-ui-fo .table-responsive {
  border-color: var(--hsp-color-border-subtle);
  overflow-x: auto;
}

/* =================================================================== 10. badges, labels, status (§5.4, §6.14) */

html.hsp-ui.hsp-ui-fo :is(.hsp-ui-status, .label) {
  --hsp-ui-status-fg: var(--hsp-tone-neutral-fg);
  --hsp-ui-status-bg: var(--hsp-tone-neutral-bg);
  --hsp-ui-status-bd: transparent;
  display: inline-flex;
  align-items: center;
  gap: var(--hsp-space-1);
  block-size: 2.6rem;
  padding-block: 0;
  padding-inline: var(--hsp-space-2);
  font-size: var(--hsp-fs-xs);
  font-weight: var(--hsp-fw-medium);
  line-height: 1;
  color: var(--hsp-ui-status-fg);
  text-shadow: none;
  white-space: nowrap;
  vertical-align: middle;
  background-color: var(--hsp-ui-status-bg);
  border: var(--hsp-border-w) solid var(--hsp-ui-status-bd);
  border-radius: var(--hsp-radius-pill);
}

html.hsp-ui.hsp-ui-fo :is(.hsp-ui-status--info, .label-info, .label-primary) { --hsp-ui-status-fg: var(--hsp-tone-info-fg); --hsp-ui-status-bg: var(--hsp-tone-info-bg); }
html.hsp-ui.hsp-ui-fo :is(.hsp-ui-status--success, .label-success) { --hsp-ui-status-fg: var(--hsp-tone-success-fg); --hsp-ui-status-bg: var(--hsp-tone-success-bg); }
html.hsp-ui.hsp-ui-fo :is(.hsp-ui-status--neutral, .label-default) { --hsp-ui-status-fg: var(--hsp-tone-neutral-fg); --hsp-ui-status-bg: var(--hsp-tone-neutral-bg); }
html.hsp-ui.hsp-ui-fo :is(.hsp-ui-status--danger, .label-danger) { --hsp-ui-status-fg: var(--hsp-tone-danger-fg); --hsp-ui-status-bg: var(--hsp-tone-danger-bg); }
html.hsp-ui.hsp-ui-fo .hsp-ui-status--refund { --hsp-ui-status-fg: var(--hsp-tone-refund-fg); --hsp-ui-status-bg: var(--hsp-tone-refund-bg); }
html.hsp-ui.hsp-ui-fo :is(.hsp-ui-status--warning, .label-warning) { --hsp-ui-status-fg: var(--hsp-tone-warning-fg); --hsp-ui-status-bg: var(--hsp-tone-warning-bg); }
html.hsp-ui.hsp-ui-fo .hsp-ui-status--pending { --hsp-ui-status-fg: var(--hsp-tone-pending-fg); --hsp-ui-status-bg: var(--hsp-tone-pending-bg); --hsp-ui-status-bd: var(--hsp-tone-pending-border); border-style: dashed; }
html.hsp-ui.hsp-ui-fo .hsp-ui-status--vip { --hsp-ui-status-fg: var(--hsp-tone-vip-fg); --hsp-ui-status-bg: var(--hsp-tone-vip-bg); }

html.hsp-ui.hsp-ui-fo .hsp-ui-status--strong { --hsp-ui-status-fg: var(--hsp-color-text-inverse); }
html.hsp-ui.hsp-ui-fo .hsp-ui-status--strong.hsp-ui-status--info { --hsp-ui-status-bg: var(--hsp-tone-info-solid); }
html.hsp-ui.hsp-ui-fo .hsp-ui-status--strong.hsp-ui-status--success { --hsp-ui-status-bg: var(--hsp-tone-success-solid); }
html.hsp-ui.hsp-ui-fo .hsp-ui-status--strong.hsp-ui-status--neutral { --hsp-ui-status-bg: var(--hsp-tone-neutral-solid); }
html.hsp-ui.hsp-ui-fo .hsp-ui-status--strong.hsp-ui-status--danger { --hsp-ui-status-bg: var(--hsp-tone-danger-solid); }
html.hsp-ui.hsp-ui-fo .hsp-ui-status--strong.hsp-ui-status--refund { --hsp-ui-status-bg: var(--hsp-tone-refund-solid); }
html.hsp-ui.hsp-ui-fo .hsp-ui-status--strong.hsp-ui-status--warning { --hsp-ui-status-bg: var(--hsp-tone-warning-solid); }
html.hsp-ui.hsp-ui-fo .hsp-ui-status--strong.hsp-ui-status--pending { --hsp-ui-status-bg: var(--hsp-tone-pending-solid); --hsp-ui-status-bd: transparent; border-style: solid; }

html.hsp-ui.hsp-ui-fo .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 2rem;
  block-size: 2rem;
  padding-inline: 0.6rem;
  font-size: 1.2rem;
  font-weight: var(--hsp-fw-semibold);
  line-height: 1;
  color: var(--hsp-color-on-action);
  background-color: var(--hsp-color-action);
  border-radius: var(--hsp-radius-pill);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--hsp-space-1);
  block-size: 2.4rem;
  padding-inline: var(--hsp-space-2);
  font-size: var(--hsp-fs-xs);
  font-weight: var(--hsp-fw-medium);
  color: var(--hsp-color-text-secondary);
  background: var(--hsp-color-surface-muted);
  border-radius: var(--hsp-radius-xs);
}

/* =================================================================== 11. alerts (§6.21): calm tones, dark text */

html.hsp-ui.hsp-ui-fo .alert {
  --hsp-ui-alert-bg: var(--hsp-color-surface-sunken);
  --hsp-ui-alert-bar: var(--hsp-color-border);
  --hsp-ui-alert-icon: var(--hsp-color-text-secondary);
  position: relative;
  margin-block-end: var(--hsp-space-5);
  padding-block: var(--hsp-space-3);
  padding-inline: var(--hsp-space-4);
  font-size: var(--hsp-fs-body);
  font-weight: var(--hsp-fw-regular);
  line-height: var(--hsp-lh-body);
  color: var(--hsp-color-text);
  text-shadow: none;
  background-color: var(--hsp-ui-alert-bg);
  border: 0;
  border-inline-start: 4px solid var(--hsp-ui-alert-bar);
  border-radius: var(--hsp-radius-md);
}

html.hsp-ui.hsp-ui-fo .alert-info { --hsp-ui-alert-bg: var(--hsp-tone-info-bg); --hsp-ui-alert-bar: var(--hsp-tone-info-solid); --hsp-ui-alert-icon: var(--hsp-tone-info-fg); }
html.hsp-ui.hsp-ui-fo .alert-success { --hsp-ui-alert-bg: var(--hsp-tone-success-bg); --hsp-ui-alert-bar: var(--hsp-tone-success-solid); --hsp-ui-alert-icon: var(--hsp-tone-success-fg); }
html.hsp-ui.hsp-ui-fo :is(.alert-warning, .alert-warning-light) { --hsp-ui-alert-bg: var(--hsp-tone-warning-bg); --hsp-ui-alert-bar: var(--hsp-tone-warning-solid); --hsp-ui-alert-icon: var(--hsp-tone-warning-fg); }
html.hsp-ui.hsp-ui-fo .alert-danger { --hsp-ui-alert-bg: var(--hsp-tone-danger-bg); --hsp-ui-alert-bar: var(--hsp-tone-danger-solid); --hsp-ui-alert-icon: var(--hsp-tone-danger-fg); }

html.hsp-ui.hsp-ui-fo .alert:is(.alert-success, .alert-danger)::before {
  float: none;
  padding: 0;
  margin-inline-end: var(--hsp-space-2);
  font-size: 2rem;
  color: var(--hsp-ui-alert-icon);
}

html.hsp-ui.hsp-ui-fo .alert :is(ul, ol) {
  margin-block: var(--hsp-space-1) 0;
  margin-inline: var(--hsp-space-5) 0;
  padding-inline-start: var(--hsp-space-4);
}

html.hsp-ui.hsp-ui-fo .alert :is(h4, strong:first-child) {
  font-weight: var(--hsp-fw-semibold);
  color: inherit;
}

html.hsp-ui.hsp-ui-fo .alert :is(a:not(.btn), .alert-link) {
  color: var(--hsp-color-text-link);
  font-weight: var(--hsp-fw-semibold);
  text-decoration: underline;
}

html.hsp-ui.hsp-ui-fo .alert .close {
  position: absolute;
  inset-block-start: var(--hsp-space-1);
  inset-inline-end: var(--hsp-space-1);
}

/* =================================================================== 12. close, modals, fancybox skin (§6.22) */

html.hsp-ui.hsp-ui-fo .close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--hsp-touch-min);
  block-size: var(--hsp-touch-min);
  padding: 0;
  font-size: 2.4rem;
  font-weight: var(--hsp-fw-regular);
  line-height: 1;
  color: var(--hsp-color-text-secondary);
  text-shadow: none;
  background: transparent;
  border: 0;
  border-radius: var(--hsp-radius-md);
  opacity: 1;
}

html.hsp-ui.hsp-ui-fo .close:is(:hover, :focus) {
  color: var(--hsp-color-text-strong);
  background: var(--hsp-color-surface-hover);
  opacity: 1;
}

html.hsp-ui.hsp-ui-fo .modal-backdrop.in {
  opacity: 0.5;
}

html.hsp-ui.hsp-ui-fo .modal-backdrop {
  background-color: var(--hsp-basalt-900);
}

html.hsp-ui.hsp-ui-fo .modal-content {
  color: var(--hsp-color-text);
  background: var(--hsp-color-surface);
  border: 0;
  border-radius: var(--hsp-radius-xl);
  box-shadow: var(--hsp-shadow-4);
  overflow: hidden;
}

html.hsp-ui.hsp-ui-fo .modal-header {
  display: flex;
  align-items: center;
  gap: var(--hsp-space-3);
  padding-block: var(--hsp-space-3);
  padding-inline: var(--hsp-space-6) var(--hsp-space-3);
  border-block-end: var(--hsp-border-w) solid var(--hsp-color-border-subtle);
}

html.hsp-ui.hsp-ui-fo .modal-header::before,
html.hsp-ui.hsp-ui-fo .modal-header::after {
  content: none;
}

html.hsp-ui.hsp-ui-fo .modal-header .close {
  order: 2;
  margin: 0;
  margin-inline-start: auto;
}

html.hsp-ui.hsp-ui-fo .modal-title {
  margin: 0;
  font-size: var(--hsp-fs-h3);
  font-weight: var(--hsp-fw-semibold);
  line-height: var(--hsp-lh-h3);
  color: var(--hsp-color-text-strong);
}

html.hsp-ui.hsp-ui-fo .modal-body {
  padding: var(--hsp-space-6);
}

html.hsp-ui.hsp-ui-fo .modal-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--hsp-space-2);
  padding-block: var(--hsp-space-4);
  padding-inline: var(--hsp-space-6);
  border-block-start: var(--hsp-border-w) solid var(--hsp-color-border-subtle);
}

html.hsp-ui.hsp-ui-fo .modal-footer::before,
html.hsp-ui.hsp-ui-fo .modal-footer::after {
  content: none;
}

html.hsp-ui.hsp-ui-fo .modal-footer .btn + .btn {
  margin: 0;
}

html.hsp-ui.hsp-ui-fo .fancybox-skin {
  color: var(--hsp-color-text);
  background: var(--hsp-color-surface);
  border-radius: var(--hsp-radius-xl);
  box-shadow: var(--hsp-shadow-4);
}

html.hsp-ui.hsp-ui-fo .fancybox-overlay {
  background: var(--hsp-color-backdrop);
}

/* =================================================================== 13. pagination (44px targets, §11.1) */

html.hsp-ui.hsp-ui-fo .pagination {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--hsp-space-2);
  margin-block: var(--hsp-space-5);
  padding: 0;
}

html.hsp-ui.hsp-ui-fo .pagination > li {
  display: inline-flex;
}

html.hsp-ui.hsp-ui-fo .pagination > li > :is(a, span) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  float: none;
  min-inline-size: var(--hsp-touch-min);
  block-size: var(--hsp-touch-min);
  margin: 0;
  padding-inline: var(--hsp-space-3);
  font-size: var(--hsp-fs-body);
  font-weight: var(--hsp-fw-medium);
  line-height: 1;
  color: var(--hsp-color-text);
  background: var(--hsp-color-surface);
  border: var(--hsp-border-w) solid var(--hsp-color-border-subtle);
  border-radius: var(--hsp-radius-md);
}

html.hsp-ui.hsp-ui-fo .pagination > li > :is(a, span):is(:hover, :focus) {
  color: var(--hsp-color-text-strong);
  background: var(--hsp-color-surface-hover);
  border-color: var(--hsp-color-border-control);
}

html.hsp-ui.hsp-ui-fo .pagination > .active > :is(a, span),
html.hsp-ui.hsp-ui-fo .pagination > .active > :is(a, span):is(:hover, :focus) {
  color: var(--hsp-color-on-action);
  background: var(--hsp-color-action);
  border-color: var(--hsp-color-action);
}

html.hsp-ui.hsp-ui-fo .pagination > .disabled > :is(a, span) {
  color: var(--hsp-color-text-disabled);
  background: var(--hsp-color-surface);
}

/* =================================================================== 14. tooltips and popovers */

html.hsp-ui.hsp-ui-fo .tooltip-inner,
html.hsp-ui.hsp-ui-fo .ui-tooltip {
  max-inline-size: 28rem;
  padding-block: 0.6rem;
  padding-inline: 1rem;
  font-family: var(--hsp-font);
  font-size: var(--hsp-fs-xs);
  line-height: var(--hsp-lh-xs);
  color: var(--hsp-color-text-inverse);
  text-align: start;
  background: var(--hsp-color-surface-inverse);
  border: 0;
  border-radius: var(--hsp-radius-sm);
  box-shadow: var(--hsp-shadow-2);
}

html.hsp-ui.hsp-ui-fo .tooltip.in {
  opacity: 1;
}

html.hsp-ui.hsp-ui-fo .tooltip.top .tooltip-arrow { border-top-color: var(--hsp-color-surface-inverse); }
html.hsp-ui.hsp-ui-fo .tooltip.bottom .tooltip-arrow { border-bottom-color: var(--hsp-color-surface-inverse); }

html.hsp-ui.hsp-ui-fo .popover {
  color: var(--hsp-color-text);
  background: var(--hsp-color-surface);
  border: var(--hsp-border-w) solid var(--hsp-color-border-subtle);
  border-radius: var(--hsp-radius-lg);
  box-shadow: var(--hsp-shadow-3);
}

/* =================================================================== 15. jQuery UI datepicker (§6.6; the range picker is 20-booking) */

html.hsp-ui.hsp-ui-fo .ui-datepicker {
  z-index: var(--hsp-z-datepicker);
  padding: var(--hsp-space-3);
  font-family: var(--hsp-font);
  font-size: var(--hsp-fs-sm);
  color: var(--hsp-color-text);
  background: var(--hsp-color-surface);
  border: var(--hsp-border-w) solid var(--hsp-color-border-subtle);
  border-radius: var(--hsp-radius-lg);
  box-shadow: var(--hsp-shadow-3);
}

html.hsp-ui.hsp-ui-fo .ui-datepicker .ui-datepicker-header {
  padding-block: var(--hsp-space-1);
  color: var(--hsp-color-text-strong);
  font-weight: var(--hsp-fw-semibold);
  background: transparent;
  border: 0;
}

html.hsp-ui.hsp-ui-fo .ui-datepicker th {
  font-size: var(--hsp-fs-xs);
  font-weight: var(--hsp-fw-medium);
  color: var(--hsp-color-text-muted);
  text-transform: none;
}

html.hsp-ui.hsp-ui-fo .ui-datepicker td :is(a, span) {
  display: flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 4rem;
  block-size: 4rem;
  padding: 0;
  font-variant-numeric: tabular-nums;
  color: var(--hsp-color-text);
  text-align: center;
  background: transparent;
  border: var(--hsp-border-w) solid transparent;
  border-radius: var(--hsp-radius-pill);
}

html.hsp-ui.hsp-ui-fo .ui-datepicker td a:hover {
  background: var(--hsp-color-surface-muted);
}

html.hsp-ui.hsp-ui-fo .ui-datepicker td a.ui-state-highlight {
  border-color: var(--hsp-color-border-control);
  background: transparent;
}

html.hsp-ui.hsp-ui-fo .ui-datepicker td a.ui-state-active {
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-color-on-action);
  background: var(--hsp-color-action);
  border-color: var(--hsp-color-action);
}

html.hsp-ui.hsp-ui-fo .ui-datepicker .ui-state-disabled :is(a, span) {
  color: var(--hsp-color-text-disabled);
  opacity: 1;
}

/* =================================================================== 16. progress */

html.hsp-ui.hsp-ui-fo .progress {
  block-size: 0.8rem;
  background: var(--hsp-limestone-100);
  border-radius: var(--hsp-radius-pill);
  box-shadow: none;
  overflow: hidden;
}

html.hsp-ui.hsp-ui-fo .progress-bar {
  background: var(--hsp-color-action);
  box-shadow: none;
}

html.hsp-ui.hsp-ui-fo :is(input, .form-control)[readonly]:is(.hasDatepicker, [class*="date"], [id*="date"], [name*="date"], [id*="check"]):not(:disabled) {
  cursor: pointer;
}

/* header logo slot: the wordmark never pushes out of the header on phones */
html.hsp-ui.hsp-ui-fo #header_logo .hsp-ui-brand {
  max-inline-size: min(28rem, 58vw);
}

@media (max-width: 767px) {
  html.hsp-ui.hsp-ui-fo #header_logo .hsp-ui-brand__name {
    font-size: 1.7rem;
  }

  html.hsp-ui.hsp-ui-fo #header_logo .hsp-ui-brand__mark-svg {
    inline-size: 2.6rem;
    block-size: 2.6rem;
  }
}