/*
 * Hospitality UI - front office pages, part 6: sign in and the guest account (DESIGN_SYSTEM §9.7, §6.3, §6.5, §6.24)
 * Sign in / create account card (authentication.tpl, segmented switch from 30-pages-60-account.js), account creation
 * form, password show / hide buttons, account frame (_partials/hsp_account_nav.tpl), account home (next stay, link
 * cards), bookings (history.tpl cards), booking detail (order-detail.tpl cards), personal information and address forms,
 * credit slips / vouchers / refund lists, hspcore group requests, guests page and group request form, empty states.
 *
 * @license https://opensource.org/license/osl-3-0-php Open Software License version 3.0
 */

/* =================================================================== 1. shared: page lead, empty state, form widths */

html.hsp-ui.hsp-ui-fo .hsp-ui-page-lead,
html.hsp-ui.hsp-ui-fo :is(#my-account .info-account, #history .info-title, #identity .info-title, #address .info-title) {
  max-inline-size: 68ch;
  margin-block: 0 var(--hsp-space-6);
  font-size: var(--hsp-fs-body);
  line-height: var(--hsp-lh-body);
  font-weight: var(--hsp-fw-regular);
  color: var(--hsp-color-text-secondary);
}

html.hsp-ui-fo .hsp-ui-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hsp-space-3);
  padding: var(--hsp-space-10) var(--hsp-space-5);
  text-align: center;
  background: var(--hsp-color-surface);
  border: var(--hsp-border-w) solid var(--hsp-color-border-subtle);
  border-radius: var(--hsp-radius-lg);
}

html.hsp-ui-fo .hsp-ui-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 4.8rem;
  block-size: 4.8rem;
  font-size: 2.4rem;
  color: var(--hsp-color-text-secondary);
  background: var(--hsp-color-surface-muted);
  border-radius: var(--hsp-radius-pill);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-empty__title {
  max-inline-size: 48ch;
  margin: 0;
  font-size: var(--hsp-fs-h4);
  line-height: var(--hsp-lh-h4);
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-color-text-strong);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-radio-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hsp-space-1) var(--hsp-space-5);
  margin: 0 0 var(--hsp-space-4);
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

html.hsp-ui.hsp-ui-fo .hsp-ui-radio-group__legend {
  inline-size: 100%;
  margin: 0 0 var(--hsp-space-1);
  padding: 0;
  font-size: var(--hsp-fs-sm);
  line-height: var(--hsp-lh-sm);
  font-weight: var(--hsp-fw-medium);
  color: var(--hsp-color-text-secondary);
  border: 0;
}

html.hsp-ui.hsp-ui-fo .hsp-ui-radio-group .radio-inline {
  margin: 0;
  padding: 0;
}

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

/* date of birth: three selects side by side (day, month, year), legend as the label */
html.hsp-ui.hsp-ui-fo .hsp-ui-dob {
  margin: 0 0 var(--hsp-space-4);
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

html.hsp-ui.hsp-ui-fo .hsp-ui-dob__legend {
  inline-size: auto;
  margin: 0 0 0.6rem;
  padding: 0;
  font-size: var(--hsp-fs-sm);
  line-height: var(--hsp-lh-sm);
  font-weight: var(--hsp-fw-medium);
  color: var(--hsp-color-text-secondary);
  border: 0;
}

html.hsp-ui.hsp-ui-fo .hsp-ui-dob > .row {
  display: grid;
  grid-template-columns: minmax(7rem, 9rem) minmax(12rem, 1.6fr) minmax(9rem, 1fr);
  gap: var(--hsp-space-3);
  max-inline-size: 44rem;
  margin: 0;
}

html.hsp-ui.hsp-ui-fo .hsp-ui-dob > .row::before,
html.hsp-ui.hsp-ui-fo .hsp-ui-dob > .row::after {
  content: none;
}

html.hsp-ui.hsp-ui-fo .hsp-ui-dob > .row > [class*="col-"] {
  float: none;
  inline-size: auto;
  padding: 0;
}

/* uniform.js wraps these selects in div.selector with an inline width: the wrapper follows the grid cell */
html.hsp-ui.hsp-ui-fo .hsp-ui-dob div.selector {
  inline-size: 100% !important; /* allow-list item 3: uniform writes an inline width */
}

/* theme CSS caps account fields at 271px (84px for the date selects, with two ids): fields follow their grid cell */
html.hsp-ui.hsp-ui-fo :is(#authentication, #identity, #address, #order-opc, #password, #guest-tracking) :is(.form-group, .row, .form_content) .form-control,
html.hsp-ui.hsp-ui-fo :is(#authentication, #identity, #order-opc) #center_column form.std .row .form-control {
  max-inline-size: none;
}

/* password show / hide (button added by 30-pages-60-account.js) */
html.hsp-ui-fo .hsp-ui-pw {
  position: relative;
  display: block;
}

html.hsp-ui.hsp-ui-fo .hsp-ui-pw > input {
  padding-inline-end: 5.6rem;
}

html.hsp-ui.hsp-ui-fo .hsp-ui-pw__toggle {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: var(--hsp-space-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--hsp-touch-min);
  block-size: var(--hsp-touch-min);
  margin: 0;
  padding: 0;
  font-size: 1.8rem;
  color: var(--hsp-color-text-secondary);
  background: transparent;
  border: 0;
  border-radius: var(--hsp-radius-md);
  transform: translateY(-50%);
  cursor: pointer;
}

html.hsp-ui.hsp-ui-fo .hsp-ui-pw__toggle:hover {
  color: var(--hsp-color-text-strong);
  background: var(--hsp-color-surface-hover);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-pw__toggle:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--hsp-focus-ring);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-pw__toggle[aria-pressed="true"] {
  color: var(--hsp-color-text-selected);
}

/* =================================================================== 2. sign in / create account (authentication.tpl) */

html.hsp-ui.hsp-ui-fo #authentication .page-heading {
  max-inline-size: 52rem;
  margin-inline: auto;
  text-align: center;
  border: 0;
}

html.hsp-ui-fo .hsp-ui-auth {
  max-inline-size: 52rem;
  margin-inline: auto;
  padding: var(--hsp-space-6);
  background: var(--hsp-color-surface);
  border: var(--hsp-border-w) solid var(--hsp-color-border-subtle);
  border-radius: var(--hsp-radius-xl);
  box-shadow: var(--hsp-shadow-1);
}

html.hsp-ui-fo .hsp-ui-auth__switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--hsp-space-1);
  margin-block-end: var(--hsp-space-6);
  padding: var(--hsp-space-1);
  background: var(--hsp-color-surface-muted);
  border-radius: var(--hsp-radius-pill);
}

html.hsp-ui-fo .hsp-ui-auth__switch[hidden] {
  display: none;
}

html.hsp-ui.hsp-ui-fo .hsp-ui-auth__tab {
  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);
  line-height: 1.25;
  color: var(--hsp-color-text-secondary);
  background: transparent;
  border: 0;
  border-radius: var(--hsp-radius-pill);
  cursor: pointer;
  transition: background-color var(--hsp-dur-fast) var(--hsp-ease-standard), color var(--hsp-dur-fast) var(--hsp-ease-standard);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-auth__tab:hover {
  color: var(--hsp-color-text-strong);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-auth__tab[aria-selected="true"] {
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-color-text-strong);
  background: var(--hsp-color-surface);
  box-shadow: var(--hsp-shadow-1);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-auth__tab:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--hsp-focus-ring);
}

html.hsp-ui-fo .hsp-ui-auth__panel[hidden] {
  display: none;
}

html.hsp-ui-fo .hsp-ui-auth.is-tabbed .hsp-ui-auth__panel + .hsp-ui-auth__panel {
  margin-block-start: 0;
}

html.hsp-ui-fo .hsp-ui-auth:not(.is-tabbed) .hsp-ui-auth__panel + .hsp-ui-auth__panel {
  margin-block-start: var(--hsp-space-8);
  padding-block-start: var(--hsp-space-6);
  border-block-start: var(--hsp-border-w) solid var(--hsp-color-border-subtle);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-auth :is(#login_form, #create-account_form).box {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

html.hsp-ui.hsp-ui-fo .hsp-ui-auth .page-subheading {
  margin: 0 0 var(--hsp-space-4);
  padding: 0;
  font-size: var(--hsp-fs-h3);
  line-height: var(--hsp-lh-h3);
  border: 0;
}

/* with the switch visible the panel titles repeat the tab labels: keep them for screen readers only */
html.hsp-ui-fo .hsp-ui-auth.is-tabbed .page-subheading {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

html.hsp-ui.hsp-ui-fo .hsp-ui-auth .form_content > p.content {
  margin-block: 0 var(--hsp-space-4);
  color: var(--hsp-color-text-secondary);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-auth .form-control {
  inline-size: 100%;
  max-inline-size: none;
}

html.hsp-ui.hsp-ui-fo .hsp-ui-auth .lost_password {
  margin-block: calc(-1 * var(--hsp-space-2)) var(--hsp-space-4);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-auth .lost_password a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--hsp-touch-min);
  font-weight: var(--hsp-fw-medium);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-auth :is(.submit, p.submit) {
  margin: 0;
}

html.hsp-ui.hsp-ui-fo .hsp-ui-auth :is(#SubmitLogin, #SubmitCreate) {
  --hsp-ui-btn-h: var(--hsp-fo-control-lg);
  inline-size: 100%;
}

/* guest (instant checkout) form below the card when the visitor comes from the checkout */
html.hsp-ui.hsp-ui-fo #authentication #new_account_form {
  max-inline-size: 72rem;
  margin: var(--hsp-space-8) auto 0;
}

/* account creation form (email_create state, also loaded by authentication.js into #center_column) */
html.hsp-ui.hsp-ui-fo #account-creation_form.box {
  max-inline-size: 72rem;
  margin-inline: auto;
  padding: var(--hsp-space-6);
  border-radius: var(--hsp-radius-xl);
}

html.hsp-ui.hsp-ui-fo #account-creation_form .account_creation {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--hsp-space-4);
  margin: 0 0 var(--hsp-space-4);
}

html.hsp-ui.hsp-ui-fo #account-creation_form .account_creation > * {
  grid-column: 1 / -1;
  min-inline-size: 0;
}

html.hsp-ui.hsp-ui-fo #account-creation_form .account_creation > :is(.required.form-group, p.form-group, .form-group.required) {
  grid-column: auto;
}

html.hsp-ui.hsp-ui-fo #account-creation_form .account_creation > .password.form-group {
  grid-column: 1 / -1;
  max-inline-size: calc(50% - var(--hsp-space-2));
}

html.hsp-ui.hsp-ui-fo #account-creation_form .page-subheading {
  margin: 0 0 var(--hsp-space-4);
  padding: 0;
  font-size: var(--hsp-fs-h3);
  line-height: var(--hsp-lh-h3);
  border: 0;
}

html.hsp-ui.hsp-ui-fo #account-creation_form .form-control {
  inline-size: 100%;
  max-inline-size: none;
}

html.hsp-ui.hsp-ui-fo #account-creation_form .checkbox {
  display: flex;
  align-items: center;
  gap: var(--hsp-space-2);
  min-block-size: var(--hsp-touch-min);
  margin: 0;
  padding: 0;
}

html.hsp-ui.hsp-ui-fo #account-creation_form .checkbox label {
  margin: 0;
  padding: 0;
  font-size: var(--hsp-fs-body);
  font-weight: var(--hsp-fw-regular);
  color: var(--hsp-color-text);
}

html.hsp-ui.hsp-ui-fo #account-creation_form .submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--hsp-space-3);
  margin: var(--hsp-space-4) 0 0;
  padding-block-start: var(--hsp-space-5);
  border-block-start: var(--hsp-border-w) solid var(--hsp-color-border-subtle);
}

html.hsp-ui.hsp-ui-fo #account-creation_form .submit .pull-right {
  float: none;
}

html.hsp-ui.hsp-ui-fo #account-creation_form #submitAccount {
  --hsp-ui-btn-h: var(--hsp-fo-control-lg);
}

@media (max-width: 575px) {
  html.hsp-ui-fo .hsp-ui-auth,
  html.hsp-ui.hsp-ui-fo #account-creation_form.box {
    padding: var(--hsp-space-4);
  }

  html.hsp-ui.hsp-ui-fo #account-creation_form .account_creation {
    grid-template-columns: minmax(0, 1fr);
  }

  html.hsp-ui.hsp-ui-fo #account-creation_form .account_creation > .password.form-group {
    max-inline-size: none;
  }
}

/* forgot password */
html.hsp-ui.hsp-ui-fo #password .box {
  max-inline-size: 52rem;
  margin-inline: auto;
  padding: var(--hsp-space-6);
}

/* =================================================================== 3. account frame and navigation */

html.hsp-ui-fo .hsp-ui-acct-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--hsp-space-6);
}

html.hsp-ui-fo .hsp-ui-acct-layout__main {
  min-inline-size: 0;
}

html.hsp-ui-fo .hsp-ui-account-nav__list {
  display: flex;
  gap: var(--hsp-space-2);
  margin: 0;
  padding: 0 0 var(--hsp-space-1);
  overflow-x: auto;
  list-style: none;
  scrollbar-width: thin;
  overscroll-behavior-inline: contain;
}

html.hsp-ui.hsp-ui-fo .hsp-ui-account-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--hsp-space-2);
  min-block-size: var(--hsp-touch-min);
  padding-inline: var(--hsp-space-4);
  font-size: var(--hsp-fs-sm);
  font-weight: var(--hsp-fw-medium);
  color: var(--hsp-color-text);
  white-space: nowrap;
  text-decoration: none;
  background: var(--hsp-color-surface);
  border: var(--hsp-border-w) solid var(--hsp-color-border-subtle);
  border-radius: var(--hsp-radius-pill);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-account-nav__link:hover {
  color: var(--hsp-color-text-strong);
  text-decoration: none;
  background: var(--hsp-color-surface-hover);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-account-nav__link:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--hsp-focus-ring);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-account-nav__link > i {
  font-size: 1.6rem;
  color: var(--hsp-color-text-secondary);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-account-nav__link[aria-current="page"] {
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-color-text-selected);
  background: var(--hsp-color-surface-selected);
  border-color: var(--hsp-color-border-selected);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-account-nav__link[aria-current="page"] > i {
  color: var(--hsp-color-text-selected);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-account-nav__signout,
html.hsp-ui.hsp-ui-fo .hsp-ui-account-nav__signout > i {
  color: var(--hsp-color-text-secondary);
}

@media (min-width: 1200px) {
  html.hsp-ui-fo .hsp-ui-acct-layout {
    grid-template-columns: 26rem minmax(0, 1fr);
    align-items: start;
    gap: var(--hsp-space-8);
  }

  html.hsp-ui-fo .hsp-ui-account-nav {
    position: sticky;
    inset-block-start: calc(var(--hsp-ui-header-h, var(--hsp-fo-header-h)) + var(--hsp-space-4));
    padding: var(--hsp-space-2);
    background: var(--hsp-color-surface);
    border: var(--hsp-border-w) solid var(--hsp-color-border-subtle);
    border-radius: var(--hsp-radius-lg);
  }

  html.hsp-ui-fo .hsp-ui-account-nav__list {
    flex-direction: column;
    gap: var(--hsp-space-half);
    padding: 0;
    overflow: visible;
  }

  html.hsp-ui.hsp-ui-fo .hsp-ui-account-nav__link {
    display: flex;
    min-block-size: 4.8rem;
    padding-inline: var(--hsp-space-3);
    font-size: var(--hsp-fs-body);
    white-space: normal;
    background: transparent;
    border: 0;
    border-inline-start: 3px solid transparent;
    border-radius: var(--hsp-radius-md);
  }

  html.hsp-ui.hsp-ui-fo .hsp-ui-account-nav__link[aria-current="page"] {
    border-inline-start-color: var(--hsp-color-action);
  }

  html.hsp-ui-fo .hsp-ui-account-nav__sep {
    margin-block-start: var(--hsp-space-2);
    padding-block-start: var(--hsp-space-2);
    border-block-start: var(--hsp-border-w) solid var(--hsp-color-border-subtle);
  }
}

/* redundant "Back to my account" / "Home" buttons at the end of account pages become quiet links */
html.hsp-ui.hsp-ui-fo .hsp-ui-acct-layout__main .footer_links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hsp-space-3);
  margin: var(--hsp-space-6) 0 0;
  padding: 0;
  list-style: none;
  border: 0;
}

html.hsp-ui.hsp-ui-fo .hsp-ui-acct-layout__main .footer_links .btn {
  --hsp-ui-btn-bg: transparent;
  --hsp-ui-btn-bd: transparent;
  --hsp-ui-btn-fg: var(--hsp-color-text-link);
  --hsp-ui-btn-bg-hover: var(--hsp-color-action-subtle);
  --hsp-ui-btn-bd-hover: transparent;
  --hsp-ui-btn-fg-hover: var(--hsp-color-text-link-hover);
  --hsp-ui-btn-px: var(--hsp-space-3);
}

/* =================================================================== 4. account home (my-account.tpl) */

html.hsp-ui.hsp-ui-fo #my-account .page-heading {
  border: 0;
  margin-block-end: var(--hsp-space-2);
}

html.hsp-ui-fo .hsp-ui-next-stay {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--hsp-space-4);
  margin-block-end: var(--hsp-space-8);
  padding: var(--hsp-space-6);
  background: var(--hsp-color-surface);
  border: var(--hsp-border-w) solid var(--hsp-color-border-subtle);
  border-inline-start: 4px solid var(--hsp-color-action);
  border-radius: var(--hsp-radius-lg);
  box-shadow: var(--hsp-shadow-1);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-next-stay__title {
  margin: 0 0 var(--hsp-space-2);
  font-size: var(--hsp-fs-sm);
  line-height: var(--hsp-lh-sm);
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-color-text-brand);
}

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

html.hsp-ui.hsp-ui-fo .hsp-ui-next-stay__room {
  margin: 0 0 var(--hsp-space-2);
  color: var(--hsp-color-text-secondary);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-next-stay__dates {
  display: flex;
  align-items: center;
  gap: var(--hsp-space-2);
  margin: 0;
  font-weight: var(--hsp-fw-medium);
  color: var(--hsp-color-text-strong);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-next-stay__dates > i {
  color: var(--hsp-color-text-secondary);
}

/* link lists become navigation cards: 1 column on phones, 2 from 576px, 4 from 1024px */
html.hsp-ui.hsp-ui-fo #my-account .hsp-ui-account-home.addresses-lists {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--hsp-space-3);
  margin: 0 0 var(--hsp-space-6);
}

html.hsp-ui.hsp-ui-fo #my-account .hsp-ui-account-home.addresses-lists::before,
html.hsp-ui.hsp-ui-fo #my-account .hsp-ui-account-home.addresses-lists::after {
  content: none;
}

html.hsp-ui.hsp-ui-fo #my-account .hsp-ui-account-home > [class*="col-"],
html.hsp-ui.hsp-ui-fo #my-account .hsp-ui-account-home .myaccount-link-list {
  display: contents;
}

html.hsp-ui.hsp-ui-fo #my-account .hsp-ui-account-home .myaccount-link-list li {
  margin: 0;
  padding: 0;
  list-style: none;
}

html.hsp-ui.hsp-ui-fo #my-account .hsp-ui-account-home .myaccount-link-list a {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--hsp-space-4);
  block-size: 100%;
  min-block-size: 8rem;
  margin: 0;
  padding: var(--hsp-space-4) var(--hsp-space-5);
  /* the theme's my-account.css sets `font: 600 16px/20px "Open Sans"` here (not loaded: the titles fell back to a
     system face, a system Arabic face in ar); the card titles use the one type system (§5.9) */
  font-family: var(--hsp-font);
  font-size: var(--hsp-fs-body);
  font-weight: var(--hsp-fw-semibold);
  line-height: var(--hsp-lh-sm);
  color: var(--hsp-color-text-strong);
  text-decoration: none;
  text-transform: none;
  text-shadow: none;
  background: var(--hsp-color-surface);
  background-image: none;
  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.hsp-ui-fo #my-account .hsp-ui-account-home .myaccount-link-list a:hover {
  color: var(--hsp-color-text-link);
  text-decoration: none;
  box-shadow: var(--hsp-shadow-2);
  transform: translateY(-1px);
}

html.hsp-ui.hsp-ui-fo #my-account .hsp-ui-account-home .myaccount-link-list a:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--hsp-focus-ring);
}

html.hsp-ui.hsp-ui-fo #my-account .hsp-ui-account-home .myaccount-link-list a i {
  position: static;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  inline-size: 4.4rem;
  block-size: 4.4rem;
  margin: 0;
  padding: 0;
  font-size: 2rem;
  line-height: 1;
  color: var(--hsp-color-text-selected);
  background: var(--hsp-color-surface-selected);
  border: 0;
  border-radius: var(--hsp-radius-md);
}

html.hsp-ui.hsp-ui-fo #my-account .hsp-ui-account-home .myaccount-link-list a span {
  display: block;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  border: 0;
}

html.hsp-ui.hsp-ui-fo #my-account .hsp-ui-account-home .myaccount-link-list a::after {
  content: "\f105"; /* icon-angle-right */
  margin-inline-start: auto;
  font-family: "FontAwesome";
  font-size: 2rem;
  font-weight: normal;
  color: var(--hsp-color-text-secondary);
}

html.hsp-ui.hsp-ui-fo[dir="rtl"] #my-account .hsp-ui-account-home .myaccount-link-list a::after {
  content: "\f104"; /* icon-angle-left: the reading direction's "forward" */
}

@media (min-width: 576px) {
  html.hsp-ui.hsp-ui-fo #my-account .hsp-ui-account-home.addresses-lists {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  html.hsp-ui.hsp-ui-fo #my-account .hsp-ui-account-home.addresses-lists {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  html.hsp-ui.hsp-ui-fo #my-account .hsp-ui-account-home .myaccount-link-list a {
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    min-block-size: 13.6rem;
  }

  html.hsp-ui.hsp-ui-fo #my-account .hsp-ui-account-home .myaccount-link-list a::after {
    position: absolute;
    inset-block-start: var(--hsp-space-4);
    inset-inline-end: var(--hsp-space-5);
  }
}

/* =================================================================== 5. bookings (history.tpl) */

html.hsp-ui-fo .hsp-ui-bookings {
  display: grid;
  gap: var(--hsp-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

html.hsp-ui-fo .hsp-ui-bookings__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--hsp-space-4) var(--hsp-space-6);
  padding: var(--hsp-space-5);
  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-fo .hsp-ui-bookings__main {
  min-inline-size: 0;
}

html.hsp-ui.hsp-ui-fo .hsp-ui-bookings__ref {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hsp-space-2);
  margin: 0 0 var(--hsp-space-1);
  font-size: var(--hsp-fs-xs);
  line-height: var(--hsp-lh-xs);
  font-weight: var(--hsp-fw-medium);
  color: var(--hsp-color-text-muted);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-bookings__ref bdi {
  font-family: var(--hsp-font-num);
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-color-text-secondary);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-bookings__title {
  margin: 0 0 var(--hsp-space-2);
  font-size: var(--hsp-fs-h3);
  line-height: var(--hsp-lh-h3);
  font-weight: var(--hsp-fw-semibold);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-bookings__link {
  color: var(--hsp-color-text-strong);
  text-decoration: none;
}

html.hsp-ui.hsp-ui-fo .hsp-ui-bookings__link:hover {
  color: var(--hsp-color-text-link);
  text-decoration: underline;
}

html.hsp-ui.hsp-ui-fo :is(.hsp-ui-bookings__stay, .hsp-ui-bookings__party) {
  display: flex;
  align-items: baseline;
  gap: var(--hsp-space-2);
  margin: 0 0 var(--hsp-space-1);
  font-size: var(--hsp-fs-body);
  color: var(--hsp-color-text);
}

html.hsp-ui.hsp-ui-fo :is(.hsp-ui-bookings__stay, .hsp-ui-bookings__party) > i {
  inline-size: 1.6rem;
  color: var(--hsp-color-text-muted);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-bookings__meta {
  margin: var(--hsp-space-2) 0 0;
  font-size: var(--hsp-fs-sm);
  font-weight: var(--hsp-fw-regular);
  color: var(--hsp-color-text-muted);
}

html.hsp-ui-fo .hsp-ui-bookings__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--hsp-space-2);
  text-align: end;
}

html.hsp-ui.hsp-ui-fo :is(.hsp-ui-bookings__total, .hsp-ui-bookings__due) {
  display: flex;
  flex-direction: column;
  margin: 0;
}

html.hsp-ui.hsp-ui-fo .hsp-ui-bookings__total-label {
  font-size: var(--hsp-fs-xs);
  color: var(--hsp-color-text-muted);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-bookings__total .price {
  font-family: var(--hsp-font-num);
  font-size: var(--hsp-fs-price-md);
  line-height: var(--hsp-lh-price);
  font-weight: var(--hsp-fw-bold);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--hsp-color-text-strong);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-bookings__due .price {
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-tone-warning-fg);
}

html.hsp-ui-fo .hsp-ui-bookings__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--hsp-space-2);
  margin-block-start: auto;
}

@media (max-width: 767px) {
  html.hsp-ui-fo .hsp-ui-bookings__item {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--hsp-space-4);
  }

  html.hsp-ui-fo .hsp-ui-bookings__side {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    text-align: start;
    padding-block-start: var(--hsp-space-3);
    border-block-start: var(--hsp-border-w) solid var(--hsp-color-border-subtle);
  }

  html.hsp-ui-fo .hsp-ui-bookings__side .history_state {
    grid-column: 1 / -1;
  }

  html.hsp-ui-fo .hsp-ui-bookings__actions {
    justify-content: flex-end;
  }
}

/* =================================================================== 6. booking detail (order-detail.tpl) */

html.hsp-ui.hsp-ui-fo #order-detail .page-heading {
  margin-block-end: var(--hsp-space-2);
  border: 0;
}

html.hsp-ui.hsp-ui-fo .hsp-ui-order-meta.well {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--hsp-space-1);
  margin: 0 0 var(--hsp-space-6);
  padding: 0;
  font-size: var(--hsp-fs-body);
  color: var(--hsp-color-text-secondary);
  background: transparent;
  border: 0;
  box-shadow: none;
}

html.hsp-ui.hsp-ui-fo .hsp-ui-order-meta strong {
  font-family: var(--hsp-font-num);
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-color-text-strong);
}

html.hsp-ui.hsp-ui-fo #order-detail .card,
html.hsp-ui.hsp-ui-fo #order-confirmation .card {
  margin-block-end: var(--hsp-space-5);
  padding: 0;
  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 :is(#order-detail, #order-confirmation) .card > .card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--hsp-space-2) var(--hsp-space-4);
  min-block-size: 5.6rem;
  margin: 0;
  padding: var(--hsp-space-3) var(--hsp-space-5);
  font-size: var(--hsp-fs-h4);
  line-height: var(--hsp-lh-h4);
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-color-text-strong);
  text-transform: none;
  background: transparent;
  border: 0;
  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 :is(#order-detail, #order-confirmation) .card > .card-body {
  padding: var(--hsp-space-5);
}

html.hsp-ui.hsp-ui-fo #order-detail .card-header .booking-actions-wrap {
  margin: 0;
}

html.hsp-ui.hsp-ui-fo #order-detail .card-header .booking-actions-wrap .row {
  margin: 0;
}

html.hsp-ui.hsp-ui-fo #order-detail .card-header .booking-actions-wrap [class*="col-"] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hsp-space-2);
  padding: 0;
}

html.hsp-ui.hsp-ui-fo #order-detail .card-header .booking-actions-wrap .btn {
  --hsp-ui-btn-h: var(--hsp-touch-min);
  --hsp-ui-btn-fs: var(--hsp-fs-sm);
  float: none;
  margin: 0;
}

/* "Request cancellation" starts a destructive flow: destructive secondary (§6.1) */
html.hsp-ui.hsp-ui-fo #order-detail .order_refund_request {
  --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);
}

/* definition lists: label / value pairs on a two-column grid */
html.hsp-ui.hsp-ui-fo #order-detail .description-list dl {
  margin: 0;
}

html.hsp-ui.hsp-ui-fo #order-detail .description-list dl > .row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
  gap: var(--hsp-space-3) var(--hsp-space-6);
  margin: 0 0 var(--hsp-space-3);
}

html.hsp-ui.hsp-ui-fo #order-detail .description-list dl > .row::before,
html.hsp-ui.hsp-ui-fo #order-detail .description-list dl > .row::after,
html.hsp-ui.hsp-ui-fo #order-detail .description-list .row .row::before,
html.hsp-ui.hsp-ui-fo #order-detail .description-list .row .row::after {
  content: none;
}

html.hsp-ui.hsp-ui-fo #order-detail .description-list [class*="col-"] {
  float: none;
  inline-size: auto;
  padding: 0;
}

html.hsp-ui.hsp-ui-fo #order-detail .description-list .row .row {
  display: grid;
  grid-template-columns: minmax(9rem, 40%) minmax(0, 1fr);
  gap: var(--hsp-space-3);
  margin: 0;
}

html.hsp-ui.hsp-ui-fo #order-detail .description-list dt {
  font-size: var(--hsp-fs-sm);
  font-weight: var(--hsp-fw-regular);
  color: var(--hsp-color-text-muted);
}

html.hsp-ui.hsp-ui-fo #order-detail .description-list dd {
  margin: 0;
  font-size: var(--hsp-fs-body);
  font-weight: var(--hsp-fw-medium);
  color: var(--hsp-color-text-strong);
  overflow-wrap: anywhere;
}

html.hsp-ui.hsp-ui-fo #order-detail .card.hotel-details .description-list dl > .row {
  grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr);
  gap: var(--hsp-space-3) var(--hsp-space-5);
}

@media (max-width: 767px) {
  html.hsp-ui.hsp-ui-fo #order-detail .card.hotel-details .description-list dl > .row {
    grid-template-columns: max-content minmax(0, 1fr);
  }
}

/* room lines */
html.hsp-ui.hsp-ui-fo #order-detail .room-details .card-body > .row,
html.hsp-ui.hsp-ui-fo #order-detail .room-details .room-type-detail {
  margin-inline: 0;
}

html.hsp-ui.hsp-ui-fo #order-detail .img-room-type {
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--hsp-radius-md);
}

html.hsp-ui.hsp-ui-fo #order-detail .product-name h3 {
  margin: 0 0 var(--hsp-space-3);
  font-size: var(--hsp-fs-h4);
  line-height: var(--hsp-lh-h4);
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-color-text-strong);
}

html.hsp-ui.hsp-ui-fo #order-detail .product-name:hover h3 {
  color: var(--hsp-color-text-link);
}

html.hsp-ui.hsp-ui-fo :is(#order-detail, #order-confirmation) .badge:is(.badge-danger, .badge-cancelled) {
  color: var(--hsp-tone-danger-fg);
  background: var(--hsp-tone-danger-bg);
}

/* payment details / summary rows */
html.hsp-ui.hsp-ui-fo #order-detail .detail-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--hsp-space-2) var(--hsp-space-4);
  padding-block: var(--hsp-space-2);
}

html.hsp-ui.hsp-ui-fo #order-detail .detail-row + .detail-row {
  border-block-start: var(--hsp-border-w) solid var(--hsp-color-border-subtle);
}

html.hsp-ui.hsp-ui-fo #order-detail .detail-row > :is(.pull-left, .pull-right) {
  float: none;
}

html.hsp-ui.hsp-ui-fo #order-detail .detail-row .title {
  font-size: var(--hsp-fs-sm);
  font-weight: var(--hsp-fw-regular);
  color: var(--hsp-color-text-muted);
}

html.hsp-ui.hsp-ui-fo #order-detail .detail-row .value {
  font-weight: var(--hsp-fw-medium);
  color: var(--hsp-color-text-strong);
}

html.hsp-ui.hsp-ui-fo #order-detail .table-summary {
  display: table;
  inline-size: 100%;
  margin: 0;
  border: 0;
}

html.hsp-ui.hsp-ui-fo #order-detail .table-summary :is(td, th) {
  padding-block: var(--hsp-space-2);
  padding-inline: 0;
  font-size: var(--hsp-fs-body);
  color: var(--hsp-color-text);
  vertical-align: baseline;
  background: transparent;
  border: 0;
  border-block-end: var(--hsp-border-w) solid var(--hsp-color-border-subtle);
}

html.hsp-ui.hsp-ui-fo #order-detail .table-summary tr:last-child :is(td, th) {
  border-block-end: 0;
}

html.hsp-ui.hsp-ui-fo #order-detail .table-summary td:last-child {
  font-family: var(--hsp-font-num);
  font-variant-numeric: tabular-nums lining-nums;
  text-align: end;
}

html.hsp-ui.hsp-ui-fo #order-detail .table-summary :is(strong, .strong, b) {
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-color-text-strong);
}

/* tabs inside a card (policies) */
html.hsp-ui.hsp-ui-fo #order-detail .card-tabs > .card-header {
  padding-block: 0;
}

html.hsp-ui.hsp-ui-fo #order-detail .card-tabs .nav-tabs {
  margin: 0;
  border: 0;
}

/* messages */
html.hsp-ui.hsp-ui-fo #order-detail .add-order-message .card-subheader {
  margin: var(--hsp-space-1) 0 0;
  inline-size: 100%;
  font-size: var(--hsp-fs-sm);
  font-weight: var(--hsp-fw-regular);
  color: var(--hsp-color-text-muted);
}

html.hsp-ui.hsp-ui-fo #order-detail .add-order-message :is(select, textarea) {
  max-inline-size: 56rem;
}

html.hsp-ui.hsp-ui-fo #order-detail .add-order-message .btn:is(.button, [type="submit"]),
html.hsp-ui.hsp-ui-fo #order-detail #submitMessage {
  --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);
  color: var(--hsp-ui-btn-fg);
  background-color: var(--hsp-ui-btn-bg);
  border-color: var(--hsp-ui-btn-bd);
}

/* =================================================================== 7. personal information, address, lists */

html.hsp-ui.hsp-ui-fo :is(#identity, #address, #order-slip, #order-follow, #discount) .hsp-ui-acct-layout__main > .box,
html.hsp-ui.hsp-ui-fo :is(#identity, #address) #center_column > .box {
  max-inline-size: 80rem;
  padding: var(--hsp-space-6);
  border-radius: var(--hsp-radius-lg);
}

html.hsp-ui.hsp-ui-fo :is(#identity, #address) .page-subheading {
  margin: 0 0 var(--hsp-space-3);
  padding: 0;
  font-size: var(--hsp-fs-h1);
  line-height: var(--hsp-lh-h1);
  border: 0;
}

html.hsp-ui.hsp-ui-fo :is(#identity, #address) p.required {
  margin: 0 0 var(--hsp-space-4);
  font-size: var(--hsp-fs-xs);
  color: var(--hsp-color-text-muted);
}

@media (min-width: 768px) {
  html.hsp-ui.hsp-ui-fo #identity .hsp-ui-identity-form > fieldset,
  html.hsp-ui.hsp-ui-fo #address #add_address {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--hsp-space-4);
    min-inline-size: 0;
  }

  html.hsp-ui.hsp-ui-fo #identity .hsp-ui-identity-form > fieldset > *,
  html.hsp-ui.hsp-ui-fo #address #add_address > * {
    grid-column: 1 / -1;
    min-inline-size: 0;
  }

  html.hsp-ui.hsp-ui-fo #identity .hsp-ui-identity-form > fieldset > .form-group:not(.hsp-ui-dob):not(:has(button[type="submit"], #old_passwd)),
  html.hsp-ui.hsp-ui-fo #address #add_address > .form-group:not(:has(button, textarea)) {
    grid-column: auto;
  }
}

html.hsp-ui.hsp-ui-fo :is(#identity, #address) .box :is(.form-control, select) {
  inline-size: 100%;
  max-inline-size: none;
}

html.hsp-ui.hsp-ui-fo :is(#identity, #address) .box .checkbox {
  display: flex;
  align-items: center;
  min-block-size: var(--hsp-touch-min);
  margin: 0;
}

html.hsp-ui.hsp-ui-fo :is(#identity, #address) .box .checkbox label {
  display: inline-flex;
  align-items: center;
  gap: var(--hsp-space-2);
  margin: 0;
  padding: 0;
  font-size: var(--hsp-fs-body);
  font-weight: var(--hsp-fw-regular);
  color: var(--hsp-color-text);
}

html.hsp-ui.hsp-ui-fo :is(#identity, #address) .box .form-group:has(> button[type="submit"]),
html.hsp-ui.hsp-ui-fo #address .submit2 {
  display: flex;
  justify-content: flex-end;
  margin: var(--hsp-space-4) 0 0;
  padding-block-start: var(--hsp-space-5);
  border-block-start: var(--hsp-border-w) solid var(--hsp-color-border-subtle);
}

html.hsp-ui.hsp-ui-fo :is(#identity, #address) :is(button[name="submitIdentity"], #submitAddress) {
  --hsp-ui-btn-h: var(--hsp-fo-control-lg);
}

html.hsp-ui.hsp-ui-fo :is(#order-slip, #order-follow, #discount) .table {
  background: var(--hsp-color-surface);
  border-radius: var(--hsp-radius-lg);
}

/* =================================================================== 8. hspcore: group requests, guests page, group request form */

html.hsp-ui-fo .hsp-requests {
  display: grid;
  gap: var(--hsp-space-3);
  margin: 0 0 var(--hsp-space-6);
  padding: 0;
  list-style: none;
}

html.hsp-ui-fo .hsp-request-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--hsp-space-3) var(--hsp-space-6);
  padding: var(--hsp-space-4) var(--hsp-space-5);
  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 .hsp-request-card__ref {
  margin: 0 0 var(--hsp-space-2);
  font-family: var(--hsp-font-num);
  font-size: var(--hsp-fs-h4);
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-color-text-strong);
}

html.hsp-ui-fo .hsp-request-card__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hsp-space-2) var(--hsp-space-8);
  margin: 0;
}

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

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

html.hsp-ui-fo .hsp-request-card__side {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hsp-space-3);
}

html.hsp-ui.hsp-ui-fo .hsp-myrequest-page .card.hsp-section,
html.hsp-ui.hsp-ui-fo .hsp-group-page .card.hsp-section {
  margin-block-end: var(--hsp-space-5);
  padding: 0;
  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 :is(.hsp-myrequest-page, .hsp-group-page) .card.hsp-section > .card-header {
  margin: 0;
  padding: var(--hsp-space-4) var(--hsp-space-5);
  font-size: var(--hsp-fs-h4);
  line-height: var(--hsp-lh-h4);
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-color-text-strong);
  background: transparent;
  border: 0;
  border-block-end: var(--hsp-border-w) solid var(--hsp-color-border-subtle);
}

html.hsp-ui.hsp-ui-fo :is(.hsp-myrequest-page, .hsp-group-page) .card.hsp-section > .card-body {
  padding: var(--hsp-space-5);
}

html.hsp-ui.hsp-ui-fo .hsp-myrequest-page .hsp-table th {
  font-size: var(--hsp-fs-sm);
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-color-text-secondary);
}

html.hsp-ui.hsp-ui-fo .hsp-myrequest-page .hsp-muted,
html.hsp-ui.hsp-ui-fo .hsp-group-page .hsp-muted {
  font-size: var(--hsp-fs-sm);
  color: var(--hsp-color-text-muted);
}

html.hsp-ui-fo .hsp-quote-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hsp-space-3);
  margin-block-end: var(--hsp-space-5);
}

html.hsp-ui-fo .hsp-quote-actions .hsp-inline-form {
  display: inline-flex;
  margin: 0;
}

html.hsp-ui.hsp-ui-fo .hsp-page-actions {
  margin: 0;
}

/* group request form */
html.hsp-ui.hsp-ui-fo .hsp-group-page .info-title {
  max-inline-size: 68ch;
  margin-block-end: var(--hsp-space-6);
  font-size: var(--hsp-fs-body-lg);
  line-height: var(--hsp-lh-body-lg);
  font-weight: var(--hsp-fw-regular);
  color: var(--hsp-color-text-secondary);
}

html.hsp-ui.hsp-ui-fo .hsp-group-page .row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 0 var(--hsp-space-4);
  margin-inline: 0;
}

html.hsp-ui.hsp-ui-fo .hsp-group-page .row::before,
html.hsp-ui.hsp-ui-fo .hsp-group-page .row::after {
  content: none;
}

html.hsp-ui.hsp-ui-fo .hsp-group-page .row > [class*="col-"] {
  float: none;
  inline-size: auto;
  padding-inline: 0;
}

html.hsp-ui.hsp-ui-fo .hsp-group-page .hsp-line {
  margin-block-end: var(--hsp-space-4);
  padding: var(--hsp-space-5);
  background: var(--hsp-color-surface-sunken);
  border: 0;
  border-radius: var(--hsp-radius-md);
}

html.hsp-ui.hsp-ui-fo .hsp-group-page .hsp-line-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hsp-space-3);
  margin-block-end: var(--hsp-space-3);
}

html.hsp-ui.hsp-ui-fo .hsp-group-page .hsp-line-title {
  font-size: var(--hsp-fs-h4);
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-color-text-strong);
}

html.hsp-ui.hsp-ui-fo .hsp-group-page .hsp-remove-line {
  --hsp-ui-btn-fg: var(--hsp-color-text-error);
  --hsp-ui-btn-fg-hover: var(--hsp-color-text-error);
}

html.hsp-ui.hsp-ui-fo .hsp-group-page .hsp-stay-type {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hsp-space-1) var(--hsp-space-5);
}

html.hsp-ui.hsp-ui-fo .hsp-group-page .hsp-inline-check {
  display: inline-flex;
  align-items: center;
  gap: var(--hsp-space-2);
  min-block-size: var(--hsp-touch-min);
  margin: 0;
  font-size: var(--hsp-fs-body);
  font-weight: var(--hsp-fw-regular);
  color: var(--hsp-color-text);
  cursor: pointer;
}

html.hsp-ui.hsp-ui-fo .hsp-group-page .hsp-inline-check input {
  inline-size: 2rem;
  block-size: 2rem;
  margin: 0;
  accent-color: var(--hsp-color-action);
}

html.hsp-ui.hsp-ui-fo .hsp-group-page #hsp-add-line {
  --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);
  --hsp-ui-btn-h: var(--hsp-fo-control-md);
}

html.hsp-ui.hsp-ui-fo .hsp-group-page .hsp-form-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--hsp-space-3) var(--hsp-space-6);
  padding: var(--hsp-space-5);
  background: var(--hsp-color-surface);
  border: var(--hsp-border-w) solid var(--hsp-color-border-subtle);
  border-radius: var(--hsp-radius-lg);
}

html.hsp-ui.hsp-ui-fo .hsp-group-page .hsp-form-footer .hsp-muted {
  flex: 1 1 28rem;
  margin: 0;
}

/* guests page (hspcore front controller "guests"): the unit cards come from 30-pages-50-checkout.css */
html.hsp-ui.hsp-ui-fo .hsp-guests-page .info-title {
  max-inline-size: 68ch;
  margin-block-end: var(--hsp-space-5);
  font-size: var(--hsp-fs-body);
  font-weight: var(--hsp-fw-regular);
  color: var(--hsp-color-text-secondary);
}

/* =================================================================== 9. contact and CMS pages (reading width) */

html.hsp-ui.hsp-ui-fo #cms #center_column .rte {
  max-inline-size: 72ch;
  font-size: var(--hsp-fs-body);
  line-height: var(--hsp-lh-body);
}

/* =================================================================== 10. error summary (errors.tpl): icon beside the text, list under the title */

html.hsp-ui.hsp-ui-fo .alert.hsp-ui-error-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: var(--hsp-space-3);
}

html.hsp-ui.hsp-ui-fo .alert.hsp-ui-error-summary::before {
  grid-row: 1 / span 3;
  margin: 0;
  line-height: var(--hsp-lh-body);
}

html.hsp-ui.hsp-ui-fo .alert.hsp-ui-error-summary > * {
  grid-column: 2;
}

html.hsp-ui.hsp-ui-fo .alert.hsp-ui-error-summary .hsp-ui-error-summary__title {
  margin: 0;
  font-weight: var(--hsp-fw-semibold);
}

html.hsp-ui.hsp-ui-fo .alert.hsp-ui-error-summary ol {
  margin-inline: 0;
  padding-inline-start: var(--hsp-space-5);
}

html.hsp-ui.hsp-ui-fo .hsp-group-page select.form-control {
  max-inline-size: none;
}

/* theme caps the date-of-birth columns at 94px (two id selectors): the grid decides the widths */
html.hsp-ui.hsp-ui-fo :is(#authentication, #identity, #order-opc) #center_column .hsp-ui-dob > .row > [class*="col-"] {
  max-inline-size: none;
}

/* contact page (contact-form.tpl): heading weight and sentence case like every other page */
html.hsp-ui.hsp-ui-fo #contact .htl-contact-page .contact-header {
  font-size: var(--hsp-fs-h1);
  line-height: var(--hsp-lh-h1);
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-color-text-strong);
}

html.hsp-ui.hsp-ui-fo #contact .htl-contact-page .contact-desc {
  max-inline-size: 68ch;
  margin-inline: auto;
  font-size: var(--hsp-fs-body-lg);
  line-height: var(--hsp-lh-body-lg);
  font-weight: var(--hsp-fw-regular);
  color: var(--hsp-color-text-secondary);
}

html.hsp-ui.hsp-ui-fo #contact .htl-contact-page .global-address-header {
  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 #contact .htl-contact-page .global-address-value {
  font-size: var(--hsp-fs-body);
  color: var(--hsp-color-text);
}

html.hsp-ui.hsp-ui-fo #contact .htl-contact-page :is(.contact-form-box, .hotel-address-container) {
  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 #contact .htl-contact-page .contact_btn {
  text-transform: none;
}

/* =================================================================== round 2 (ui-polish-fo-pages): forms (§6.3-§6.9) */

/* required marker: " *" in the error colour, "(required)" for screen readers (was a grey superscript) */
html.hsp-ui.hsp-ui-fo .hsp-ui-req {
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-color-text-error);
}

/* group request: full-width selects (no uniform wrapper), 9.6rem notes, steppers, one age select per child */
html.hsp-ui.hsp-ui-fo .hsp-group-page select.form-control {
  inline-size: 100%;
  max-inline-size: none;
}

html.hsp-ui.hsp-ui-fo .hsp-group-page textarea.form-control {
  min-block-size: 9.6rem;
  resize: vertical;
}

html.hsp-ui.hsp-ui-fo .hsp-group-page .hsp-ui-grp-dates__to {
  display: none;
}

html.hsp-ui.hsp-ui-fo .hsp-group-page .hsp-ui-grp-dates {
  display: grid;
  align-content: start;
  gap: var(--hsp-space-1);
}

html.hsp-ui.hsp-ui-fo .hsp-group-page .hsp-ui-grp-dates__label {
  font-size: var(--hsp-fs-sm);
  font-weight: var(--hsp-fw-medium);
  color: var(--hsp-color-text-secondary);
}

html.hsp-ui.hsp-ui-fo .hsp-group-page .hsp-ui-numstep {
  display: inline-flex;
  align-items: center;
  gap: var(--hsp-space-2);
}

html.hsp-ui.hsp-ui-fo .hsp-group-page .hsp-ui-numstep .hsp-ui-numstep__value {
  inline-size: 7.2rem;
  min-inline-size: 0;
  text-align: center;
  font-family: var(--hsp-font-num);
  font-size: 1.8rem;
  font-weight: var(--hsp-fw-semibold);
  font-variant-numeric: tabular-nums lining-nums;
}

html.hsp-ui.hsp-ui-fo .hsp-group-page .hsp-ui-numstep .hsp-ui-numstep__value[readonly] {
  inline-size: 4.8rem;
  padding-inline: 0;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

html.hsp-ui.hsp-ui-fo .hsp-group-page .hsp-ui-stepper__btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  inline-size: var(--hsp-touch-min);
  block-size: var(--hsp-touch-min);
  margin: 0;
  padding: 0;
  font-size: 1.4rem;
  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-pill);
  cursor: pointer;
}

html.hsp-ui.hsp-ui-fo .hsp-group-page .hsp-ui-stepper__btn:hover {
  background: var(--hsp-color-surface-hover);
  border-color: var(--hsp-color-border-strong);
}

html.hsp-ui.hsp-ui-fo .hsp-group-page .hsp-ui-stepper__btn:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--hsp-focus-ring);
}

html.hsp-ui.hsp-ui-fo .hsp-group-page .hsp-ui-stepper__btn[aria-disabled="true"] {
  color: var(--hsp-color-text-disabled);
  border-color: var(--hsp-color-border-subtle);
  cursor: not-allowed;
}

html.hsp-ui.hsp-ui-fo .hsp-group-page .hsp-ui-numstep-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--hsp-space-2) var(--hsp-space-4);
}

html.hsp-ui.hsp-ui-fo .hsp-group-page .hsp-ui-numstep-row__text {
  display: grid;
}

html.hsp-ui.hsp-ui-fo .hsp-group-page .hsp-ui-numstep-row__text label {
  margin: 0;
}

html.hsp-ui.hsp-ui-fo .hsp-group-page .hsp-ui-numstep__help {
  margin: 0;
  font-size: var(--hsp-fs-xs);
  font-style: normal;
  color: var(--hsp-color-text-muted);
}

html.hsp-ui.hsp-ui-fo .hsp-group-page .hsp-ui-ages {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: var(--hsp-space-3);
  margin-block-start: var(--hsp-space-3);
}

html.hsp-ui.hsp-ui-fo .hsp-group-page .hsp-ui-ages:empty {
  display: none;
}

html.hsp-ui.hsp-ui-fo .hsp-group-page .hsp-ui-ages__item label {
  display: block;
  margin-block-end: var(--hsp-space-1);
  font-size: var(--hsp-fs-sm);
}

/* booking detail (round 2, §9.7): status badge beside the H1; one full-width divider per summary row; the message
   form button is a DS secondary (48px, radius md) */
html.hsp-ui.hsp-ui-fo #order-detail .hsp-ui-order-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hsp-space-2) var(--hsp-space-4);
  margin-block-end: var(--hsp-space-4);
}

html.hsp-ui.hsp-ui-fo #order-detail .hsp-ui-order-title .page-heading {
  margin: 0;
}

html.hsp-ui.hsp-ui-fo #order-detail .table-summary {
  border-collapse: collapse;
  border-spacing: 0;
}

html.hsp-ui.hsp-ui-fo #order-detail #submitMessage {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--hsp-fo-control-md);
  padding-inline: var(--hsp-space-6);
  font-size: var(--hsp-fs-body);
  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);
  box-shadow: none;
  text-transform: none;
}

html.hsp-ui.hsp-ui-fo #order-detail #submitMessage:hover {
  background: var(--hsp-color-surface-hover);
}

/* order confirmation: "View your order history" / "Follow my order" is one secondary button in a plain row (the
   wrapper paragraph lost its .exclusive class, which drew a primary button around the link) */
html.hsp-ui.hsp-ui-fo #order-confirmation .hsp-ui-confirm-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hsp-space-3);
  margin-block: var(--hsp-space-6) 0;
  padding: 0;
  background: none;
  border: 0;
}

/* the box-shadow reset above (id selector) also removed the focus ring: restored for keyboard focus */
html.hsp-ui.hsp-ui-fo #order-detail #submitMessage:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--hsp-focus-ring);
}

html.hsp-ui.hsp-ui-fo #order-detail #submitMessage span {
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
}

/* bookings tabs (round 2, §9.7 / §6.11): underline tabs with counts */
html.hsp-ui.hsp-ui-fo .hsp-ui-bookings-tabs {
  display: flex;
  gap: var(--hsp-space-1);
  margin-block-end: var(--hsp-space-5);
  overflow-x: auto;
  border-block-end: var(--hsp-border-w) solid var(--hsp-color-border-subtle);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-bookings-tabs[hidden] {
  display: none;
}

html.hsp-ui.hsp-ui-fo .hsp-ui-bookings-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--hsp-space-2);
  min-block-size: var(--hsp-touch-min);
  margin-block-end: calc(-1 * var(--hsp-border-w));
  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;
  cursor: pointer;
}

html.hsp-ui.hsp-ui-fo .hsp-ui-bookings-tabs__tab:hover {
  border-block-end-color: var(--hsp-color-border);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-bookings-tabs__tab[aria-selected="true"] {
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-color-text-strong);
  border-block-end-color: var(--hsp-color-action);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-bookings-tabs__tab:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--hsp-focus-ring-inset, var(--hsp-focus-ring));
}

html.hsp-ui.hsp-ui-fo .hsp-ui-bookings-tabs__count {
  min-inline-size: 2.2rem;
  padding-inline: var(--hsp-space-1);
  font-family: var(--hsp-font-num);
  font-size: var(--hsp-fs-xs);
  font-variant-numeric: tabular-nums lining-nums;
  text-align: center;
  color: var(--hsp-color-text-secondary);
  background: var(--hsp-color-surface-muted);
  border-radius: var(--hsp-radius-pill);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-bookings-tabs__empty {
  color: var(--hsp-color-text-secondary);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-bookings__item[hidden] {
  display: none;
}

/* one full-width divider per summary row (the cells drew separate short underlines) */
html.hsp-ui.hsp-ui-fo #order-detail .table-summary > tbody {
  display: table-row-group;
}

html.hsp-ui.hsp-ui-fo #order-detail .table-summary tr {
  display: table-row;
  border-block-end: var(--hsp-border-w) solid var(--hsp-color-border-subtle);
}

html.hsp-ui.hsp-ui-fo #order-detail .table-summary tr:last-child {
  border-block-end: 0;
}

html.hsp-ui.hsp-ui-fo #order-detail .table-summary :is(td, th) {
  display: table-cell;
  inline-size: auto;
  border-block-end: 0;
}