/*
 * Hospitality UI - front office pages, part 5: checkout (DESIGN_SYSTEM §9.6, §6.26, §6.10, §6.19)
 * order-opc: page head + stepper, step cards (accordion kept: .card / .card-header / .opc-collapse / Bootstrap collapse),
 * room cards (shopping-cart-detail.tpl) with the stay fact grid, hspcore guest cards (cart_room_cards.tpl,
 * _guest_unit_form.tpl), guest / account form (order-opc-new-account.tpl), terms row and payment options
 * (order-payment-classic.tpl, bankwire / cheque payment.tpl), summary card (cart-total-block.tpl) sticky at >= 992px,
 * promo code disclosure. The departure block of cruise cabins is styled in 30-pages-40-cruise.css.
 * Theme order-opc.css uses #order-opc id selectors: rules here start with html.hsp-ui.hsp-ui-fo #order-opc.
 *
 * @license https://opensource.org/license/osl-3-0-php Open Software License version 3.0
 */

/* =================================================================== 1. layout: main 8 / summary 4 */

html.hsp-ui.hsp-ui-fo #order-opc #center_column {
  float: none;
  inline-size: 100%;
  padding-inline: 0;
}

html.hsp-ui.hsp-ui-fo #order-opc #content > .row {
  margin-inline: 0;
}

html.hsp-ui.hsp-ui-fo #order-opc #content > .row > :is(.hsp-ui-checkout-head, .hsp-ui-checkout-main, .hsp-ui-checkout-aside) {
  float: none;
  inline-size: auto;
  padding-inline: 0;
}

@media (min-width: 992px) {
  html.hsp-ui.hsp-ui-fo #order-opc #content > .row:has(> .hsp-ui-checkout-main) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(30rem, 38rem);
    align-items: start;
    gap: 0 var(--hsp-space-8);
  }

  html.hsp-ui.hsp-ui-fo #order-opc #content > .row > .hsp-ui-checkout-head {
    grid-column: 1 / -1;
  }

  html.hsp-ui.hsp-ui-fo #order-opc .hsp-ui-checkout-aside {
    position: sticky;
    inset-block-start: calc(var(--hsp-ui-header-h, var(--hsp-fo-header-h)) + var(--hsp-space-4));
  }
}

/* =================================================================== 2. page head and stepper (§6.26) */

html.hsp-ui.hsp-ui-fo #order-opc .hsp-ui-checkout-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--hsp-space-4) var(--hsp-space-8);
  margin-block-end: var(--hsp-space-6);
}

html.hsp-ui.hsp-ui-fo #order-opc .hsp-ui-checkout-head__title {
  margin: 0;
  padding: 0;
  border: 0;
}

html.hsp-ui-fo .hsp-ui-steps__list {
  display: flex;
  align-items: center;
  gap: var(--hsp-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

html.hsp-ui-fo .hsp-ui-steps__item {
  display: flex;
  align-items: center;
  gap: var(--hsp-space-2);
  font-size: var(--hsp-fs-sm);
  line-height: var(--hsp-lh-sm);
  font-weight: var(--hsp-fw-medium);
  color: var(--hsp-color-text-muted);
  white-space: nowrap;
}

/* connector between steps (a 2px rule, drawn before every step but the first; mirrors with the flex row) */
html.hsp-ui-fo .hsp-ui-steps__item + .hsp-ui-steps__item::before {
  content: "";
  display: block;
  inline-size: clamp(1.6rem, 3vw, 4rem);
  block-size: 2px;
  margin-inline-end: var(--hsp-space-1);
  background: var(--hsp-color-border);
  border-radius: var(--hsp-radius-pill);
}

html.hsp-ui-fo .hsp-ui-steps__item.is-done + .hsp-ui-steps__item::before {
  background: var(--hsp-color-action);
}

html.hsp-ui-fo .hsp-ui-steps__marker {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  inline-size: 2.8rem;
  block-size: 2.8rem;
  font-family: var(--hsp-font-num);
  font-size: var(--hsp-fs-xs);
  font-weight: var(--hsp-fw-semibold);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--hsp-color-text-secondary);
  background: var(--hsp-color-surface);
  border: var(--hsp-border-w) solid var(--hsp-color-border-control);
  border-radius: var(--hsp-radius-pill);
}

html.hsp-ui-fo .hsp-ui-steps__item.is-done .hsp-ui-steps__marker {
  color: var(--hsp-color-on-action);
  background: var(--hsp-color-action);
  border-color: var(--hsp-color-action);
}

html.hsp-ui-fo .hsp-ui-steps__item.is-current {
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-color-text-strong);
}

html.hsp-ui-fo .hsp-ui-steps__item.is-current .hsp-ui-steps__marker {
  color: var(--hsp-color-text-selected);
  background: var(--hsp-color-surface-selected);
  border: 2px solid var(--hsp-color-action);
}

html.hsp-ui-fo .hsp-ui-steps__compact {
  display: none;
  margin: 0;
  font-size: var(--hsp-fs-sm);
  color: var(--hsp-color-text-muted);
}

@media (max-width: 767px) {
  html.hsp-ui-fo .hsp-ui-steps__item:not(.is-current) .hsp-ui-steps__label {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  html.hsp-ui-fo .hsp-ui-steps {
    display: flex;
    flex-direction: column;
    gap: var(--hsp-space-1);
  }

  html.hsp-ui-fo .hsp-ui-steps__compact {
    display: block;
  }
}

/* =================================================================== 3. step cards (accordion) */

html.hsp-ui.hsp-ui-fo #order-opc .hsp-ui-step.card {
  margin-block-end: var(--hsp-space-4);
  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 #order-opc .hsp-ui-step.is-current {
  border-color: var(--hsp-color-border);
}

html.hsp-ui.hsp-ui-fo #order-opc .hsp-ui-step > .card-header {
  padding: 0;
  background: transparent;
  border: 0;
}

html.hsp-ui.hsp-ui-fo #order-opc .hsp-ui-step__heading {
  margin: 0;
  padding: 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);
  border: 0;
}

html.hsp-ui.hsp-ui-fo #order-opc .hsp-ui-step__toggle {
  display: flex;
  align-items: center;
  gap: var(--hsp-space-3);
  inline-size: 100%;
  min-block-size: 6.4rem;
  margin: 0;
  padding-block: var(--hsp-space-3);
  padding-inline: var(--hsp-space-5);
  font: inherit;
  color: inherit;
  text-align: start;
  background: transparent;
  border: 0;
  border-radius: var(--hsp-radius-lg);
  cursor: pointer;
}

html.hsp-ui.hsp-ui-fo #order-opc span.hsp-ui-step__toggle {
  cursor: default;
}

html.hsp-ui.hsp-ui-fo #order-opc button.hsp-ui-step__toggle:hover {
  background: var(--hsp-color-surface-hover);
}

html.hsp-ui.hsp-ui-fo #order-opc .hsp-ui-step.is-current button.hsp-ui-step__toggle:hover {
  background: transparent;
}

html.hsp-ui.hsp-ui-fo #order-opc .hsp-ui-step__toggle:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--hsp-focus-ring-inset);
}

html.hsp-ui-fo .hsp-ui-step__num {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  inline-size: 3.2rem;
  block-size: 3.2rem;
  font-family: var(--hsp-font-num);
  font-size: var(--hsp-fs-sm);
  font-weight: var(--hsp-fw-semibold);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--hsp-color-text-secondary);
  background: var(--hsp-color-surface-muted);
  border-radius: var(--hsp-radius-pill);
}

html.hsp-ui-fo .hsp-ui-step.is-current .hsp-ui-step__num {
  color: var(--hsp-color-on-action);
  background: var(--hsp-color-action);
}

html.hsp-ui-fo .hsp-ui-step.is-done .hsp-ui-step__num {
  color: var(--hsp-color-text-selected);
  background: var(--hsp-color-surface-selected);
}

html.hsp-ui-fo .hsp-ui-step.is-locked .hsp-ui-step__toggle {
  color: var(--hsp-color-text-muted);
}

html.hsp-ui-fo .hsp-ui-step__title {
  flex: 1 1 auto;
  min-inline-size: 0;
}

html.hsp-ui-fo .hsp-ui-step__edit {
  font-size: var(--hsp-fs-sm);
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-color-text-link);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

html.hsp-ui.hsp-ui-fo #order-opc .hsp-ui-step .accordion-left-arrow {
  float: none;
  flex: none;
  margin: 0;
  font-size: 2rem;
  color: var(--hsp-color-text-secondary);
  transition: transform var(--hsp-dur-base) var(--hsp-ease-standard);
}

html.hsp-ui.hsp-ui-fo #order-opc .hsp-ui-step__toggle[aria-expanded="true"] .accordion-left-arrow {
  transform: rotate(180deg);
}

html.hsp-ui.hsp-ui-fo #order-opc .hsp-ui-step .card-body {
  padding-block: var(--hsp-space-2) var(--hsp-space-6);
  padding-inline: var(--hsp-space-5);
}

@media (max-width: 767px) {
  html.hsp-ui.hsp-ui-fo #order-opc .hsp-ui-step__toggle {
    padding-inline: var(--hsp-space-4);
  }

  html.hsp-ui.hsp-ui-fo #order-opc .hsp-ui-step .card-body {
    padding-inline: var(--hsp-space-4);
  }
}

/* CTA row at the end of a step */
html.hsp-ui.hsp-ui-fo #order-opc .proceed_btn_block {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--hsp-space-3);
  padding-block-start: var(--hsp-space-2);
}

html.hsp-ui.hsp-ui-fo #order-opc .proceed_btn_block .btn {
  float: none;
  margin: 0;
}

/* theme order-opc.css paints #order-opc .button-medium blue (id selector): the component colours are re-applied here */
html.hsp-ui.hsp-ui-fo #order-opc :is(.button-medium, .submit-guest-details, #submitAccount, #SubmitLogin) {
  --hsp-ui-btn-h: var(--hsp-fo-control-lg);
  --hsp-ui-btn-px: var(--hsp-space-6);
  padding-inline: var(--hsp-ui-btn-px);
  color: var(--hsp-ui-btn-fg);
  background-color: var(--hsp-ui-btn-bg);
  border-color: var(--hsp-ui-btn-bd);
  box-shadow: none;
  border-radius: var(--hsp-radius-md);
}

html.hsp-ui.hsp-ui-fo #order-opc :is(.button-medium, .submit-guest-details, #submitAccount, #SubmitLogin):hover {
  color: var(--hsp-ui-btn-fg-hover);
  background-color: var(--hsp-ui-btn-bg-hover);
  border-color: var(--hsp-ui-btn-bd-hover);
}

/* the reset above has an id selector and removed the focus ring of these buttons ("Continue to guest details",
   "Save and continue", the footer "Subscribe" - #order-opc is the page body): restored at a higher specificity */
html.hsp-ui.hsp-ui-fo #order-opc :is(.button-medium, .submit-guest-details, #submitAccount, #SubmitLogin):focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--hsp-focus-ring);
}

html.hsp-ui.hsp-ui-fo #order-opc #footer .button-medium {
  --hsp-ui-btn-h: var(--hsp-fo-control-md);
}

html.hsp-ui.hsp-ui-fo #order-opc :is(.button-medium, .submit-guest-details, #submitAccount, #SubmitLogin) > span {
  padding: 0;
  font-size: var(--hsp-fs-body);
  font-weight: var(--hsp-fw-semibold);
  color: inherit;
  text-transform: none;
}

html.hsp-ui.hsp-ui-fo #order-opc .btn-edit-guest-info {
  min-block-size: var(--hsp-fo-control-lg);
  margin: 0;
  padding-inline: var(--hsp-space-6);
  font-size: var(--hsp-fs-body);
  line-height: 1.25;
  border-radius: var(--hsp-radius-md);
}

html.hsp-ui.hsp-ui-fo #order-opc .btn-edit-guest-info span {
  padding: 0;
  font-size: inherit;
  text-transform: none;
}

html.hsp-ui.hsp-ui-fo #order-opc .card-body > hr,
html.hsp-ui.hsp-ui-fo #order-opc .order-detail-content > hr {
  margin-block: var(--hsp-space-5);
  border-color: var(--hsp-color-border-subtle);
}

@media (max-width: 767px) {
  html.hsp-ui.hsp-ui-fo #order-opc .proceed_btn_block .btn {
    flex: 1 1 100%;
  }
}

/* =================================================================== 4. step 1: rooms and stay */

html.hsp-ui.hsp-ui-fo #order-opc .order-detail-content .cart_section_title {
  margin-block: 0 var(--hsp-space-3);
  padding: 0;
  font-size: var(--hsp-fs-sm);
  line-height: var(--hsp-lh-sm);
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-color-text-secondary);
  border: 0;
}

html.hsp-ui.hsp-ui-fo #order-opc .order-detail-content .cart_section_title::first-letter {
  text-transform: capitalize;
}

html.hsp-ui.hsp-ui-fo #order-opc .cart_product_line.hsp-ui-cart-room {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: var(--hsp-space-5);
  margin: 0;
}

/* Bootstrap clearfix pseudo elements would become grid / flex items */
html.hsp-ui.hsp-ui-fo #order-opc :is(.hsp-ui-cart-room, .room_price_detail_block, .product_price_detail_block, .room_price_detail_block .row, #voucher, .proceed_btn_block, .opc-add-save)::before,
html.hsp-ui.hsp-ui-fo #order-opc :is(.hsp-ui-cart-room, .room_price_detail_block, .product_price_detail_block, .room_price_detail_block .row, #voucher, .proceed_btn_block, .opc-add-save)::after,
html.hsp-ui.hsp-ui-fo #order-opc #content > .row:has(> .hsp-ui-checkout-main)::before,
html.hsp-ui.hsp-ui-fo #order-opc #content > .row:has(> .hsp-ui-checkout-main)::after {
  content: none;
}

html.hsp-ui.hsp-ui-fo #order-opc .hsp-ui-cart-room > :is(.product-img-block, .col-sm-10) {
  float: none;
  inline-size: auto;
  padding: 0;
}

html.hsp-ui.hsp-ui-fo #order-opc .hsp-ui-cart-room .product-img-block p {
  margin: 0;
}

html.hsp-ui.hsp-ui-fo #order-opc .hsp-ui-cart-room .product-img-block img {
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--hsp-color-surface-muted);
  border-radius: var(--hsp-radius-md);
}

html.hsp-ui.hsp-ui-fo #order-opc .order-detail-content .room_remove_block,
html.hsp-ui.hsp-ui-fo #order-opc .order-detail-content .product_remove_block {
  margin-block-start: var(--hsp-space-2);
  text-align: start;
}

html.hsp-ui.hsp-ui-fo .order-detail-content :is(.cart_room_delete, .cart_quantity_delete) {
  display: inline-flex;
  align-items: center;
  gap: var(--hsp-space-1);
  min-block-size: var(--hsp-touch-min);
  padding-inline: var(--hsp-space-1);
  font-size: var(--hsp-fs-sm);
  font-weight: var(--hsp-fw-medium);
  color: var(--hsp-color-text-error);
  text-decoration: none;
  border-radius: var(--hsp-radius-sm);
}

html.hsp-ui.hsp-ui-fo .order-detail-content :is(.cart_room_delete, .cart_quantity_delete):hover {
  color: var(--hsp-color-text-error);
  text-decoration: underline;
  background: var(--hsp-tone-danger-bg);
}

html.hsp-ui.hsp-ui-fo .order-detail-content :is(.cart_room_delete, .cart_quantity_delete) i {
  font-size: 1.6rem;
  color: inherit;
}

html.hsp-ui.hsp-ui-fo #order-opc .order-detail-content .product-name {
  display: flex;
  align-items: flex-start;
  gap: var(--hsp-space-3);
  margin: 0;
  font-size: var(--hsp-fs-h3);
  line-height: var(--hsp-lh-h3);
  font-weight: var(--hsp-fw-semibold);
}

html.hsp-ui.hsp-ui-fo #order-opc .order-detail-content .product-name > a:first-child {
  flex: 1 1 auto;
  color: var(--hsp-color-text-strong);
  text-decoration: none;
}

html.hsp-ui.hsp-ui-fo #order-opc .order-detail-content .product-name > a:first-child:hover {
  color: var(--hsp-color-text-link);
  text-decoration: underline;
}

/* the phone variant of Remove keeps its word (round 2): tertiary, text-error, 44px row */
html.hsp-ui.hsp-ui-fo #order-opc .order-detail-content .product-xs-remove {
  --hsp-ui-btn-h: var(--hsp-touch-min);
  --hsp-ui-btn-px: 0;
  --hsp-ui-btn-fg: var(--hsp-color-text-error);
  --hsp-ui-btn-bd: transparent;
  --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: transparent;
  --hsp-ui-btn-px: var(--hsp-space-3);
  float: none;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--hsp-space-1);
  inline-size: auto;
  min-block-size: var(--hsp-touch-min);
  margin: 0;
  font-size: var(--hsp-fs-sm);
  font-weight: var(--hsp-fw-medium);
}

@media (min-width: 768px) {
  html.hsp-ui.hsp-ui-fo #order-opc .order-detail-content .product-xs-remove {
    display: none;
  }
}

html.hsp-ui.hsp-ui-fo #order-opc .order-detail-content .hotel-location {
  margin-block: var(--hsp-space-1) 0;
  padding: 0;
  font-size: var(--hsp-fs-sm);
  line-height: var(--hsp-lh-sm);
  color: var(--hsp-color-text-muted);
}

html.hsp-ui.hsp-ui-fo #order-opc .order-detail-content .hotel-location > i {
  margin-inline-end: var(--hsp-space-1);
  color: var(--hsp-color-text-muted);
}

html.hsp-ui.hsp-ui-fo #order-opc .order-detail-content div.room-type-features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hsp-space-2);
  margin-block: var(--hsp-space-3) 0;
}

html.hsp-ui.hsp-ui-fo #order-opc .order-detail-content span.room-type-feature {
  display: inline-flex;
  align-items: center;
  gap: var(--hsp-space-1);
  block-size: 2.4rem;
  margin: 0;
  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: 0;
  border-radius: var(--hsp-radius-xs);
}

html.hsp-ui.hsp-ui-fo #order-opc .order-detail-content span.room-type-feature i {
  font-size: 1.2rem;
  color: var(--hsp-color-action);
}

/* stay facts: <dl> fact grid (§6.19) */
html.hsp-ui.hsp-ui-fo .order-detail-content dl.hsp-ui-stay-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--hsp-space-3) var(--hsp-space-5);
  margin-block: var(--hsp-space-4) 0;
  margin-inline: 0;
  padding: var(--hsp-space-4);
  background: var(--hsp-color-surface-sunken);
  border: 0;
  border-radius: var(--hsp-radius-md);
}

html.hsp-ui.hsp-ui-fo .order-detail-content .hsp-ui-stay-facts .hsp-ui-facts__item {
  min-inline-size: 0;
}

html.hsp-ui.hsp-ui-fo .order-detail-content .hsp-ui-stay-facts dt {
  margin: 0 0 var(--hsp-space-1);
  font-size: var(--hsp-fs-xs);
  line-height: var(--hsp-lh-xs);
  font-weight: var(--hsp-fw-regular);
  color: var(--hsp-color-text-muted);
  text-transform: none;
}

html.hsp-ui.hsp-ui-fo .order-detail-content .hsp-ui-stay-facts dd {
  display: flex;
  flex-direction: column;
  margin: 0;
  font-size: var(--hsp-fs-body);
  line-height: var(--hsp-lh-sm);
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-color-text-strong);
}

html.hsp-ui-fo .hsp-ui-facts__sub {
  font-size: var(--hsp-fs-sm);
  line-height: var(--hsp-lh-sm);
  font-weight: var(--hsp-fw-regular);
  color: var(--hsp-color-text-secondary);
  font-variant-numeric: tabular-nums lining-nums;
}

@media (max-width: 575px) {
  html.hsp-ui.hsp-ui-fo .order-detail-content dl.hsp-ui-stay-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html.hsp-ui.hsp-ui-fo .order-detail-content .hsp-ui-stay-facts .hsp-ui-facts__item:last-child {
    grid-column: 1 / -1;
  }
}

/* price line: rooms (+ extra services) at the inline start, stay total at the inline end */
html.hsp-ui.hsp-ui-fo #order-opc .order-detail-content .room_price_detail_block,
html.hsp-ui.hsp-ui-fo #order-opc .order-detail-content .product_price_detail_block {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--hsp-space-3) var(--hsp-space-6);
  margin: var(--hsp-space-4) 0 0;
  padding: 0;
  border: 0;
}

html.hsp-ui.hsp-ui-fo #order-opc .order-detail-content :is(.room_price_detail_block, .product_price_detail_block) > [class*="col-"] {
  float: none;
  inline-size: auto;
  margin: 0;
  padding: 0;
}

html.hsp-ui.hsp-ui-fo #order-opc .order-detail-content .room_price_detail_block .row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hsp-space-5);
  margin: 0;
}

html.hsp-ui.hsp-ui-fo #order-opc .order-detail-content .room_price_detail_block .row > [class*="col-"] {
  float: none;
  inline-size: auto;
  padding: 0;
}

/* without extra services or a discount the rooms price equals the stay total: show the total only */
html.hsp-ui.hsp-ui-fo #order-opc .order-detail-content .room_price_detail_block > .col-sm-7:not(:has(.plus-sign, .room_type_old_price, .room-price-detail)) {
  display: none;
}

html.hsp-ui.hsp-ui-fo #order-opc .order-detail-content .room_price_detail_block .plus-sign::after {
  content: none;
}

html.hsp-ui.hsp-ui-fo #order-opc .order-detail-content :is(.total_price, .demand_total_price) {
  margin: 0;
  font-family: var(--hsp-font-num);
  font-size: var(--hsp-fs-body-lg);
  line-height: var(--hsp-lh-price);
  font-weight: var(--hsp-fw-semibold);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--hsp-color-text-strong);
}

html.hsp-ui.hsp-ui-fo #order-opc .order-detail-content .total_price_detial {
  margin: var(--hsp-space-1) 0 0;
  font-size: var(--hsp-fs-xs);
  line-height: var(--hsp-lh-xs);
  color: var(--hsp-color-text-muted);
}

html.hsp-ui.hsp-ui-fo #order-opc .order-detail-content .total_price_block {
  float: none;
  margin: 0;
  padding: 0;
  text-align: end;
  background: transparent;
}

html.hsp-ui.hsp-ui-fo #order-opc .order-detail-content .total_price_block .total_price {
  font-size: var(--hsp-fs-price-md);
  font-weight: var(--hsp-fw-bold);
}

html.hsp-ui.hsp-ui-fo #order-opc .order-detail-content .room_type_old_price {
  font-size: var(--hsp-fs-sm);
  color: var(--hsp-color-text-muted);
}

html.hsp-ui.hsp-ui-fo #order-opc .order-detail-content .room-price-detail img {
  inline-size: 1.6rem;
  block-size: 1.6rem;
  vertical-align: middle;
}

html.hsp-ui.hsp-ui-fo .open_rooms_extra_services_panel {
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-color-text-link);
  text-decoration: underline;
}

@media (max-width: 767px) {
  html.hsp-ui.hsp-ui-fo #order-opc .cart_product_line.hsp-ui-cart-room {
    grid-template-columns: minmax(0, 1fr);
  }

  html.hsp-ui.hsp-ui-fo #order-opc .order-detail-content .room-info-container {
    display: grid;
    grid-template-columns: 7.2rem minmax(0, 1fr);
    gap: var(--hsp-space-3);
    align-items: start;
  }

  html.hsp-ui.hsp-ui-fo #order-opc .order-detail-content :is(.product-xs-img, .product-xs-info) {
    display: block;
    inline-size: auto;
    margin: 0;
  }

  html.hsp-ui.hsp-ui-fo #order-opc .order-detail-content .product-xs-img img {
    inline-size: 7.2rem;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--hsp-radius-md);
  }

  html.hsp-ui.hsp-ui-fo #order-opc .order-detail-content .product-name {
    font-size: var(--hsp-fs-h4);
  }

  html.hsp-ui.hsp-ui-fo #order-opc .order-detail-content .room_price_detail_block .row {
    display: none;
  }

  html.hsp-ui.hsp-ui-fo #order-opc .order-detail-content .total_price_block {
    inline-size: 100%;
    text-align: start;
  }
}

/* =================================================================== 5. hspcore guest cards (FO) */

html.hsp-ui.hsp-ui-fo .hsp-cart-guests {
  margin-block: var(--hsp-space-4) 0;
  padding: 0;
  border: 0;
}

html.hsp-ui.hsp-ui-fo .hsp-cart-guests-toggle {
  --hsp-ui-btn-bg: var(--hsp-color-surface);
  --hsp-ui-btn-fg: var(--hsp-color-text-strong);
  --hsp-ui-btn-bd: var(--hsp-color-border-subtle);
  --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-control);
  --hsp-ui-btn-px: var(--hsp-space-4);
  justify-content: flex-start;
  inline-size: 100%;
  font-size: var(--hsp-fs-body);
  font-weight: var(--hsp-fw-semibold);
  text-align: start;
  text-decoration: none;
  white-space: normal;
}

html.hsp-ui.hsp-ui-fo .hsp-cart-guests-toggle:hover {
  text-decoration: none;
}

html.hsp-ui.hsp-ui-fo .hsp-cart-guests-toggle > .icon-user {
  color: var(--hsp-color-text-secondary);
}

html.hsp-ui.hsp-ui-fo .hsp-cart-guests .hsp-cart-guests-toggle.btn {
  flex-wrap: wrap;
  justify-content: flex-start;
  row-gap: var(--hsp-space-1);
  padding-block: var(--hsp-space-2);
  white-space: normal;
}

html.hsp-ui-fo .hsp-cart-guests-label {
  flex: 1 1 16rem;
  min-inline-size: 0;
  text-align: start;
}

html.hsp-ui-fo .hsp-cart-guests-chev {
  transition: transform var(--hsp-dur-base) var(--hsp-ease-standard);
}

html.hsp-ui-fo .hsp-cart-guests-toggle[aria-expanded="true"] .hsp-cart-guests-chev {
  transform: rotate(180deg);
}

html.hsp-ui.hsp-ui-fo .hsp-badge:is(.hsp-badge-warning, .hsp-badge-danger, .hsp-badge-info, .hsp-badge-success) {
  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;
  white-space: nowrap;
  border: var(--hsp-border-w) solid transparent;
  border-radius: var(--hsp-radius-pill);
}

html.hsp-ui.hsp-ui-fo .hsp-badge.hsp-badge-warning { color: var(--hsp-tone-warning-fg); background: var(--hsp-tone-warning-bg); }
html.hsp-ui.hsp-ui-fo .hsp-badge.hsp-badge-danger { color: var(--hsp-tone-danger-fg); background: var(--hsp-tone-danger-bg); }
html.hsp-ui.hsp-ui-fo .hsp-badge.hsp-badge-info { color: var(--hsp-tone-info-fg); background: var(--hsp-tone-info-bg); }
html.hsp-ui.hsp-ui-fo .hsp-badge.hsp-badge-success { color: var(--hsp-tone-success-fg); background: var(--hsp-tone-success-bg); }

html.hsp-ui.hsp-ui-fo .hsp-badge.hsp-badge-warning::before {
  content: "\f071"; /* icon-warning */
  font-family: "FontAwesome";
  font-weight: normal;
}

html.hsp-ui.hsp-ui-fo .hsp-cart-guests-body {
  margin-block-start: var(--hsp-space-3);
}

html.hsp-ui.hsp-ui-fo .hsp-unit:not(.hsp-unit-bo) {
  margin-block: 0 var(--hsp-space-4);
  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-unit:not(.hsp-unit-bo) .hsp-unit-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hsp-space-1) var(--hsp-space-3);
  margin-block-end: var(--hsp-space-4);
  padding-block-end: var(--hsp-space-3);
  border-block-end: var(--hsp-border-w) solid var(--hsp-color-border-subtle);
}

html.hsp-ui.hsp-ui-fo .hsp-unit:not(.hsp-unit-bo) .hsp-unit-title {
  margin: 0;
  font-size: var(--hsp-fs-body);
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-color-text-strong);
}

html.hsp-ui.hsp-ui-fo .hsp-unit:not(.hsp-unit-bo) .hsp-unit-meta {
  font-size: var(--hsp-fs-sm);
  color: var(--hsp-color-text-muted);
}

html.hsp-ui.hsp-ui-fo .hsp-unit:not(.hsp-unit-bo) fieldset {
  margin: 0 0 var(--hsp-space-4);
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

html.hsp-ui.hsp-ui-fo .hsp-unit:not(.hsp-unit-bo) legend {
  inline-size: auto;
  margin: 0 0 var(--hsp-space-3);
  padding: 0;
  font-size: var(--hsp-fs-body);
  line-height: var(--hsp-lh-body);
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-color-text-strong);
  border: 0;
}

html.hsp-ui.hsp-ui-fo .hsp-unit:not(.hsp-unit-bo) .hsp-guest {
  margin-block: 0 var(--hsp-space-4);
  padding: var(--hsp-space-4);
  background: var(--hsp-color-surface-sunken);
  border: 0;
  border-radius: var(--hsp-radius-md);
}

html.hsp-ui.hsp-ui-fo .hsp-unit:not(.hsp-unit-bo) .hsp-guest.hsp-collapsed {
  display: none;
}

html.hsp-ui.hsp-ui-fo .hsp-unit:not(.hsp-unit-bo) .hsp-guest-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--hsp-space-2);
  margin-block-end: var(--hsp-space-3);
  font-size: var(--hsp-fs-sm);
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-color-text-strong);
}

html.hsp-ui.hsp-ui-fo .hsp-unit:not(.hsp-unit-bo) .hsp-guest-type {
  font-weight: var(--hsp-fw-regular);
  color: var(--hsp-color-text-muted);
}

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

html.hsp-ui.hsp-ui-fo .hsp-unit:not(.hsp-unit-bo) .row::before,
html.hsp-ui.hsp-ui-fo .hsp-unit:not(.hsp-unit-bo) .row::after {
  content: none;
}

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

html.hsp-ui.hsp-ui-fo .hsp-unit:not(.hsp-unit-bo) .hsp-guest-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hsp-space-2) var(--hsp-space-3);
  margin-block-end: var(--hsp-space-3);
}

html.hsp-ui.hsp-ui-fo .hsp-unit:not(.hsp-unit-bo) .hsp-copy-from {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--hsp-space-2);
}

html.hsp-ui.hsp-ui-fo .hsp-unit:not(.hsp-unit-bo) .hsp-checks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hsp-space-1) var(--hsp-space-5);
  margin-block-end: var(--hsp-space-3);
}

html.hsp-ui.hsp-ui-fo .hsp-unit:not(.hsp-unit-bo) .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-unit:not(.hsp-unit-bo) .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-unit:not(.hsp-unit-bo) .hsp-expand {
  --hsp-ui-btn-px: var(--hsp-space-3);
  --hsp-ui-btn-bd: transparent;
  --hsp-ui-btn-bd-hover: transparent;
  margin-block-end: var(--hsp-space-3);
  border-color: transparent;
}

/* title | first name | last name on one row from 768px */
@media (min-width: 768px) {
  html.hsp-ui.hsp-ui-fo .hsp-unit:not(.hsp-unit-bo) .row:has(> .col-sm-2) {
    grid-template-columns: minmax(10rem, 12rem) repeat(2, minmax(0, 1fr));
  }
}

html.hsp-ui.hsp-ui-fo .hsp-unit:not(.hsp-unit-bo) .hsp-form-actions {
  display: flex;
  justify-content: flex-end;
  padding-block-start: var(--hsp-space-2);
}

/* "Save guest details" is secondary: the step CTA stays the one primary of the card */
html.hsp-ui.hsp-ui-fo .hsp-unit:not(.hsp-unit-bo) .hsp-save.button-small {
  --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-unit:not(.hsp-unit-bo) .hsp-form-messages:empty {
  display: none;
}

/* =================================================================== 6. step 2: guest details / account */

html.hsp-ui.hsp-ui-fo #order-opc .hsp-ui-signin-callout {
  display: flex;
  flex-direction: column;
  gap: var(--hsp-space-3);
  margin-block-end: var(--hsp-space-5);
}

html.hsp-ui.hsp-ui-fo #order-opc .hsp-ui-signin-callout__text {
  display: flex;
  align-items: center;
  gap: var(--hsp-space-3);
  margin: 0;
  padding: var(--hsp-space-4);
  font-size: var(--hsp-fs-body);
  line-height: var(--hsp-lh-body);
  color: var(--hsp-color-text);
  background: var(--hsp-color-surface-sunken);
  border-radius: var(--hsp-radius-md);
}

html.hsp-ui.hsp-ui-fo #order-opc .hsp-ui-signin-callout__text > i {
  flex: none;
  font-size: 2rem;
  color: var(--hsp-color-text-secondary);
}

html.hsp-ui.hsp-ui-fo #order-opc .already_registered_block #openLoginFormBlock {
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-color-text-link);
  text-decoration: underline;
}

/* "Or" as a divider line with the word in the middle */
html.hsp-ui.hsp-ui-fo #order-opc .hsp-ui-signin-callout__or {
  display: flex;
  align-items: center;
  gap: var(--hsp-space-3);
  margin: 0;
  font-size: var(--hsp-fs-sm);
  color: var(--hsp-color-text-muted);
}

html.hsp-ui.hsp-ui-fo #order-opc .hsp-ui-signin-callout__or::before,
html.hsp-ui.hsp-ui-fo #order-opc .hsp-ui-signin-callout__or::after {
  content: "";
  flex: 1 1 auto;
  block-size: 1px;
  background: var(--hsp-color-border-subtle);
}

html.hsp-ui.hsp-ui-fo #order-opc #login_form_content .text-secondary {
  font-size: var(--hsp-fs-sm);
  color: var(--hsp-color-text-muted);
}

html.hsp-ui.hsp-ui-fo #order-opc #login_form_content .lost_password {
  float: none;
  display: inline-flex;
  align-items: center;
  min-block-size: var(--hsp-touch-min);
  margin: 0;
  color: var(--hsp-color-text-link);
  text-decoration: underline;
}

html.hsp-ui.hsp-ui-fo #order-opc #login_form .submit {
  display: flex;
  justify-content: flex-end;
  margin: 0;
}

html.hsp-ui.hsp-ui-fo #order-opc #login_form .submit .btn {
  float: none;
}

/* shared two-column field grid (also used by the account pages): the rows inside flow as one grid */
html.hsp-ui-fo .hsp-ui-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--hsp-space-4);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-form-grid > .row {
  display: contents;
}

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

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

html.hsp-ui.hsp-ui-fo .hsp-ui-form-grid > .row > :is(.gender-line, .date-select, .col-sm-12, .col-xs-12, .hsp-ui-form-grid__full) {
  grid-column: 1 / -1;
}

html.hsp-ui.hsp-ui-fo .hsp-ui-form-grid > .row > .gender-line {
  max-inline-size: 16rem;
  padding-block-start: 0;
}

@media (max-width: 575px) {
  html.hsp-ui-fo .hsp-ui-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* two-column form grid: Bootstrap rows become grids so fields line up and never strand a 120px input */
html.hsp-ui.hsp-ui-fo #order-opc :is(#opc_account_form, #login_form_content, #customer-guest-detail-container) > .row,
html.hsp-ui.hsp-ui-fo #order-opc #customer-guest-detail-container .row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--hsp-space-4);
  margin-inline: 0;
}

html.hsp-ui.hsp-ui-fo #order-opc :is(#opc_account_form, #login_form_content, #customer-guest-detail-container) .row::before,
html.hsp-ui.hsp-ui-fo #order-opc :is(#opc_account_form, #login_form_content, #customer-guest-detail-container) .row::after {
  content: none;
}

html.hsp-ui.hsp-ui-fo #order-opc :is(#opc_account_form, #login_form_content, #customer-guest-detail-container) .row > [class*="col-"] {
  float: none;
  inline-size: auto;
  max-inline-size: none;
  padding-inline: 0;
}

html.hsp-ui.hsp-ui-fo #order-opc :is(#opc_account_form, #customer-guest-detail-container) .row > .gender-line {
  grid-column: 1 / -1;
  max-inline-size: 16rem;
  padding-block-start: 0;
}

html.hsp-ui.hsp-ui-fo #order-opc #opc_account_form .row > .date-select,
html.hsp-ui.hsp-ui-fo #order-opc #opc_account_form .row > .col-sm-12 {
  grid-column: 1 / -1;
}

html.hsp-ui.hsp-ui-fo #order-opc #opc_account_form .date-select .row {
  grid-template-columns: repeat(3, minmax(0, 12rem));
}

html.hsp-ui.hsp-ui-fo #order-opc #opc_account_form > .required:first-of-type,
html.hsp-ui.hsp-ui-fo #order-opc #opc_account_form .opc-required {
  margin-block: 0 var(--hsp-space-3);
  font-size: var(--hsp-fs-xs);
  color: var(--hsp-color-text-muted);
}

html.hsp-ui.hsp-ui-fo #order-opc #opc_account_form .block-small-header {
  margin-block: var(--hsp-space-5) var(--hsp-space-3);
  font-size: var(--hsp-fs-body);
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-color-text-strong);
  text-transform: none;
}

html.hsp-ui.hsp-ui-fo #order-opc #opc_account_form .form_info {
  display: block;
  margin-block-start: var(--hsp-space-1);
}

html.hsp-ui.hsp-ui-fo #order-opc :is(#opc_account_form, #customer_guest_detail_form) select {
  block-size: var(--hsp-fo-control-md);
  padding-inline: var(--hsp-space-4) var(--hsp-space-10);
  color: var(--hsp-color-text);
  border-color: var(--hsp-color-border-control);
  border-radius: var(--hsp-radius-md);
}

html.hsp-ui.hsp-ui-fo #order-opc .opc-add-save {
  display: flex;
  justify-content: flex-end;
  margin-block-start: var(--hsp-space-5);
  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 #order-opc .opc-add-save .btn {
  float: none;
}

/* guest / create account choice (shown when guest checkout is enabled) */
html.hsp-ui.hsp-ui-fo #order-opc #opc_account_choice .opc-button {
  display: inline-flex;
  gap: var(--hsp-space-1);
  padding: var(--hsp-space-1);
  background: var(--hsp-color-surface-muted);
  border-radius: var(--hsp-radius-pill);
}

html.hsp-ui.hsp-ui-fo #order-opc #opc_account_choice :is(#opc_guestCheckout, #opc_createAccount) {
  min-block-size: var(--hsp-touch-min);
  padding-inline: var(--hsp-space-5);
  font-size: var(--hsp-fs-body);
  font-weight: var(--hsp-fw-medium);
  color: var(--hsp-color-text-secondary);
  background: transparent;
  border: 0;
  border-radius: var(--hsp-radius-pill);
}

html.hsp-ui.hsp-ui-fo #order-opc #opc_account_choice #opc_guestCheckout {
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-color-text-strong);
  background: var(--hsp-color-surface);
  box-shadow: var(--hsp-shadow-1);
}

/* signed-in customer: guest summary + "booking for someone else" */
html.hsp-ui.hsp-ui-fo #order-opc #guest-info-block .hsp-ui-guest-summary {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--hsp-space-2) var(--hsp-space-6);
  margin-block: var(--hsp-space-3) 0;
  padding: var(--hsp-space-4);
  background: var(--hsp-color-surface-sunken);
  border-radius: var(--hsp-radius-md);
}

html.hsp-ui.hsp-ui-fo #order-opc #guest-info-block .hsp-ui-guest-summary > .row {
  display: contents;
}

/* with display:contents the Bootstrap clearfix pseudo-elements of .row became grid items and pushed every label
   into the second column (ui-polish-fo-booking-r1) */
html.hsp-ui.hsp-ui-fo #order-opc #guest-info-block .hsp-ui-guest-summary > .row::before,
html.hsp-ui.hsp-ui-fo #order-opc #guest-info-block .hsp-ui-guest-summary > .row::after {
  content: none;
  display: none;
}

html.hsp-ui.hsp-ui-fo #order-opc #guest-info-block .hsp-ui-guest-summary > .row > div {
  float: none;
  inline-size: auto;
  padding: 0;
}

html.hsp-ui.hsp-ui-fo #order-opc #guest-info-block div.info-head {
  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-opc #guest-info-block div.info-value {
  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-opc #customer_guest_detail_form .checkbox {
  display: flex;
  align-items: center;
  gap: var(--hsp-space-2);
  min-block-size: var(--hsp-touch-min);
  margin: 0 0 var(--hsp-space-3);
  padding: 0;
}

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

@media (max-width: 575px) {
  html.hsp-ui.hsp-ui-fo #order-opc :is(#opc_account_form, #login_form_content, #customer-guest-detail-container) > .row,
  html.hsp-ui.hsp-ui-fo #order-opc #customer-guest-detail-container .row {
    grid-template-columns: minmax(0, 1fr);
  }

  html.hsp-ui.hsp-ui-fo #order-opc #guest-info-block .hsp-ui-guest-summary {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  html.hsp-ui.hsp-ui-fo #order-opc #guest-info-block .hsp-ui-guest-summary div.info-value {
    margin-block-end: var(--hsp-space-2);
  }
}

/* =================================================================== 7. step 3: terms and payment options (§6.10 radio/option cards) */

html.hsp-ui.hsp-ui-fo #order-opc .hsp-ui-terms {
  margin-block: 0 var(--hsp-space-5);
  padding: var(--hsp-space-4);
  background: var(--hsp-color-surface-sunken);
  border: 0;
  border-radius: var(--hsp-radius-md);
}

html.hsp-ui.hsp-ui-fo #order-opc .hsp-ui-terms .checkbox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hsp-space-1) var(--hsp-space-2);
  margin: 0;
  padding: 0;
}

html.hsp-ui.hsp-ui-fo #order-opc .hsp-ui-terms #tc_txt {
  margin: 0;
  padding: 0;
  font-size: var(--hsp-fs-body);
  font-weight: var(--hsp-fw-regular);
  line-height: var(--hsp-lh-body);
  color: var(--hsp-color-text);
  cursor: pointer;
}

html.hsp-ui.hsp-ui-fo #order-opc .hsp-ui-terms #tc_link {
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-color-text-link);
  text-decoration: underline;
}

html.hsp-ui.hsp-ui-fo #order-opc .hsp-ui-terms .checker,
html.hsp-ui.hsp-ui-fo #order-opc .hsp-ui-terms input#cgv {
  flex: none;
  margin: 0;
}

html.hsp-ui.hsp-ui-fo #order-opc .hsp-ui-pay-heading {
  margin-block: 0 var(--hsp-space-3);
  font-size: var(--hsp-fs-body);
  line-height: var(--hsp-lh-body);
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-color-text-strong);
  text-transform: none;
}

html.hsp-ui.hsp-ui-fo #HOOK_PAYMENT {
  display: grid;
  gap: var(--hsp-space-3);
}

html.hsp-ui.hsp-ui-fo #HOOK_PAYMENT > .row {
  margin: 0;
}

html.hsp-ui.hsp-ui-fo #HOOK_PAYMENT > .row > [class*="col-"] {
  padding: 0;
}

html.hsp-ui.hsp-ui-fo p.payment_module {
  margin: 0;
}

html.hsp-ui.hsp-ui-fo p.payment_module a,
html.hsp-ui.hsp-ui-fo #HOOK_PAYMENT p.payment_module > a,
html.hsp-ui.hsp-ui-fo .hsp-ui-pay__card {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--hsp-space-4);
  min-block-size: 7.2rem;
  padding-block: var(--hsp-space-3);
  padding-inline: var(--hsp-space-4);
  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;
  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);
  transition: border-color var(--hsp-dur-fast) var(--hsp-ease-standard), background-color var(--hsp-dur-fast) var(--hsp-ease-standard);
}

html.hsp-ui.hsp-ui-fo p.payment_module a::after {
  content: none;
}

html.hsp-ui.hsp-ui-fo p.payment_module a:hover,
html.hsp-ui.hsp-ui-fo #HOOK_PAYMENT p.payment_module > a:hover,
html.hsp-ui.hsp-ui-fo .hsp-ui-pay__card:hover {
  color: var(--hsp-color-text-strong);
  text-decoration: none;
  background-color: var(--hsp-color-surface-selected);
  border-color: var(--hsp-color-border-selected);
}

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

html.hsp-ui-fo .hsp-ui-pay__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  inline-size: 4.4rem;
  block-size: 4.4rem;
  font-size: 2rem;
  color: var(--hsp-color-text-selected);
  background: var(--hsp-color-surface-selected);
  border-radius: var(--hsp-radius-md);
}

html.hsp-ui-fo .hsp-ui-pay__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--hsp-space-half);
  min-inline-size: 0;
}

html.hsp-ui.hsp-ui-fo .hsp-ui-pay__text > .hsp-ui-pay__desc {
  font-size: var(--hsp-fs-sm);
  font-weight: var(--hsp-fw-regular);
  color: var(--hsp-color-text-muted);
}

html.hsp-ui-fo .hsp-ui-pay__chev {
  flex: none;
  font-size: 2rem;
  color: var(--hsp-color-text-secondary);
}

/* payment options stay dimmed until the terms are accepted (the theme overlay keeps them unclickable) */
html.hsp-ui.hsp-ui-fo #order-opc .opc-overlay {
  background: var(--hsp-color-surface);
  opacity: 0.6;
}

/* =================================================================== 8. summary card (cart-total-block.tpl) */

html.hsp-ui.hsp-ui-fo #order-opc .cart_total_detail_block.hsp-ui-summary {
  float: none;
  inline-size: 100%;
  margin-block-end: var(--hsp-space-4);
  padding: 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);
  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 #order-opc .hsp-ui-summary__title {
  margin: 0 0 var(--hsp-space-3);
  padding: 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);
  border: 0;
}

html.hsp-ui-fo .hsp-ui-summary__stays {
  display: grid;
  gap: var(--hsp-space-3);
  margin: 0 0 var(--hsp-space-4);
  padding: 0 0 var(--hsp-space-4);
  list-style: none;
  border-block-end: var(--hsp-border-w) solid var(--hsp-color-border-subtle);
}

html.hsp-ui-fo .hsp-ui-summary__stay {
  display: flex;
  flex-direction: column;
  gap: var(--hsp-space-half);
}

html.hsp-ui-fo .hsp-ui-summary__room {
  font-size: var(--hsp-fs-body);
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-color-text-strong);
}

html.hsp-ui-fo .hsp-ui-summary__hotel,
html.hsp-ui-fo .hsp-ui-summary__dates {
  font-size: var(--hsp-fs-sm);
  color: var(--hsp-color-text-secondary);
}

html.hsp-ui-fo .hsp-ui-summary__meta {
  display: block;
  color: var(--hsp-color-text-muted);
}

html.hsp-ui.hsp-ui-fo #order-opc .hsp-ui-summary p:not(.unvisible) {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--hsp-space-4);
  margin: 0 0 var(--hsp-space-2);
}

html.hsp-ui.hsp-ui-fo #order-opc .hsp-ui-summary .cart_total_values {
  float: none;
  flex: none;
  font-family: var(--hsp-font-num);
  font-weight: var(--hsp-fw-medium);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--hsp-color-text-strong);
  text-align: end;
}

html.hsp-ui.hsp-ui-fo #order-opc .hsp-ui-summary .total_discount_block {
  color: var(--hsp-tone-success-fg);
}

html.hsp-ui.hsp-ui-fo #order-opc .hsp-ui-summary .total_discount_block .cart_total_values {
  color: inherit;
}

html.hsp-ui.hsp-ui-fo #order-opc .hsp-ui-summary .hsp-ui-summary__total {
  align-items: center;
  margin: var(--hsp-space-3) 0 0;
  padding-block-start: var(--hsp-space-4);
  line-height: var(--hsp-lh-price);
  border-block-start: var(--hsp-border-w) solid var(--hsp-color-border);
}

html.hsp-ui.hsp-ui-fo #order-opc .hsp-ui-summary .hsp-ui-summary__total .strong {
  font-size: var(--hsp-fs-body);
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-color-text-strong);
}

html.hsp-ui.hsp-ui-fo #order-opc .cart_total_detail_block .cart_final_total_block > .cart_total_values,
html.hsp-ui.hsp-ui-fo #order-opc .hsp-ui-summary .hsp-ui-summary__total > .cart_total_values {
  font-size: var(--hsp-fs-price-lg);
  font-weight: var(--hsp-fw-bold);
  color: var(--hsp-color-text-strong);
}

html.hsp-ui.hsp-ui-fo #order-opc .hsp-ui-summary hr {
  margin-block: var(--hsp-space-3);
  border-color: var(--hsp-color-border-subtle);
}

/* promo code disclosure */
html.hsp-ui.hsp-ui-fo #order-opc .hsp-ui-promo.cart_voucher_detail_block {
  float: none;
  inline-size: 100%;
  margin-block-end: var(--hsp-space-4);
  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: none;
}

html.hsp-ui-fo .hsp-ui-promo__summary {
  display: flex;
  align-items: center;
  gap: var(--hsp-space-2);
  min-block-size: var(--hsp-fo-control-md);
  padding-inline: var(--hsp-space-5);
  font-size: var(--hsp-fs-body);
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-color-text-link);
  list-style: none;
  cursor: pointer;
  border-radius: var(--hsp-radius-lg);
}

html.hsp-ui-fo .hsp-ui-promo__summary::-webkit-details-marker {
  display: none;
}

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

html.hsp-ui-fo .hsp-ui-promo__summary > span {
  flex: 1 1 auto;
}

html.hsp-ui-fo .hsp-ui-promo__chev {
  transition: transform var(--hsp-dur-base) var(--hsp-ease-standard);
}

html.hsp-ui-fo .hsp-ui-promo[open] .hsp-ui-promo__chev {
  transform: rotate(180deg);
}

html.hsp-ui.hsp-ui-fo #order-opc .hsp-ui-promo > :not(summary) {
  margin-inline: var(--hsp-space-5);
}

html.hsp-ui.hsp-ui-fo #order-opc .hsp-ui-promo #voucher {
  display: flex;
  gap: var(--hsp-space-2);
  margin-block: var(--hsp-space-1) var(--hsp-space-5);
}

html.hsp-ui.hsp-ui-fo #order-opc .hsp-ui-promo #voucher > [class*="col-"] {
  float: none;
  inline-size: auto;
  padding: 0;
}

html.hsp-ui.hsp-ui-fo #order-opc .hsp-ui-promo #voucher > [class*="col-"]:first-child {
  flex: 1 1 auto;
}

html.hsp-ui.hsp-ui-fo #order-opc .hsp-ui-promo .submit_discount_div {
  margin: 0;
}

html.hsp-ui.hsp-ui-fo #order-opc .hsp-ui-promo .row.margin-btm-20 {
  margin-block-end: 0;
}

html.hsp-ui.hsp-ui-fo #order-opc .hsp-ui-promo .cart_voucher_head {
  margin-block: var(--hsp-space-3) var(--hsp-space-2);
  font-size: var(--hsp-fs-sm);
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-color-text-secondary);
  text-transform: none;
}

html.hsp-ui.hsp-ui-fo #order-opc .hsp-ui-promo .voucher_name {
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-color-text-link);
  cursor: pointer;
}

html.hsp-ui.hsp-ui-fo #order-opc .hsp-ui-promo .cart_discount_name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hsp-space-2);
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-color-text-strong);
}

html.hsp-ui.hsp-ui-fo #order-opc .hsp-ui-promo .voucher_apply_state {
  float: none;
  display: inline-flex;
  align-items: center;
  gap: var(--hsp-space-1);
  font-size: var(--hsp-fs-xs);
  color: var(--hsp-tone-success-fg);
}

html.hsp-ui.hsp-ui-fo #order-opc .hsp-ui-promo .voucher_apply_state img {
  inline-size: 1.4rem;
}

/* =================================================================== 9. empty cart and errors on this page */

html.hsp-ui.hsp-ui-fo #order-opc #content .page-heading:not(.hsp-ui-checkout-head__title) {
  margin-block-end: var(--hsp-space-6);
}

/* =================================================================== 10. bankwire / cheque confirmation pages (module payment controllers) */

html.hsp-ui.hsp-ui-fo :is(#module-bankwire-payment, #module-cheque-payment) .box.cheque-box,
html.hsp-ui.hsp-ui-fo :is(#module-bankwire-payment, #module-cheque-payment) .box {
  max-inline-size: 72rem;
}

html.hsp-ui.hsp-ui-fo :is(#module-bankwire-payment, #module-cheque-payment) .page-subheading {
  font-size: var(--hsp-fs-h3);
  text-transform: none;
}

html.hsp-ui.hsp-ui-fo :is(#module-bankwire-payment, #module-cheque-payment) .cart_navigation {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--hsp-space-3);
}

html.hsp-ui.hsp-ui-fo :is(#module-bankwire-payment, #module-cheque-payment) .cart_navigation > * {
  float: none;
  margin: 0;
}

/* empty cart (order-opc.tpl): the empty-state component with a "Search rooms" action */
html.hsp-ui.hsp-ui-fo .hsp-ui-cart-empty {
  max-inline-size: 72rem;
}

html.hsp-ui.hsp-ui-fo .hsp-ui-cart-empty .hsp-ui-cart-empty__action {
  margin: 0;
}

/* checkout "Before you can pay" notes (errors.tpl, ui-polish-fo-booking-r1): neutral info, not an error summary */
html.hsp-ui.hsp-ui-fo .hsp-ui-checkout-notes .hsp-ui-checkout-notes__title {
  margin: 0 0 var(--hsp-space-1);
  font-weight: var(--hsp-fw-semibold);
  color: var(--hsp-color-text-strong);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-checkout-notes ul {
  margin: 0;
  padding-inline-start: var(--hsp-space-5);
}

/* bank-wire payment and return (theme overrides of bankwire payment_execution.tpl / payment_return.tpl, ui-polish-fo-booking-r1) */
html.hsp-ui.hsp-ui-fo .hsp-ui-paypage .hsp-ui-paypage__card {
  max-inline-size: 72rem;
  margin-block: 0 var(--hsp-space-5);
  padding: var(--hsp-space-5);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-paypage .hsp-ui-paypage__title {
  display: flex;
  align-items: center;
  gap: var(--hsp-space-2);
  margin: 0 0 var(--hsp-space-3);
  padding: 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);
  text-transform: none;
  border: 0;
}

html.hsp-ui.hsp-ui-fo .hsp-ui-paypage .hsp-ui-paypage__title i {
  color: var(--hsp-color-text-secondary);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-paypage .hsp-ui-paypage__lead {
  margin: 0 0 var(--hsp-space-4);
  font-size: var(--hsp-fs-body);
  line-height: var(--hsp-lh-body);
  color: var(--hsp-color-text);
}

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

html.hsp-ui.hsp-ui-fo .hsp-ui-paypage .hsp-ui-paypage__fact {
  display: grid;
  gap: var(--hsp-space-1);
  min-inline-size: 0;
}

html.hsp-ui.hsp-ui-fo .hsp-ui-paypage .hsp-ui-paypage__fact dt {
  font-size: var(--hsp-fs-sm);
  color: var(--hsp-color-text-muted);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-paypage .hsp-ui-paypage__fact dt label {
  margin: 0;
  font: inherit;
  color: inherit;
}

html.hsp-ui.hsp-ui-fo .hsp-ui-paypage .hsp-ui-paypage__fact dd {
  font-size: var(--hsp-fs-body);
  overflow-wrap: anywhere;
}

/* the key figure: strong text, semibold, tabular (was 13px #777 on white, 4.48:1) */
html.hsp-ui.hsp-ui-fo .hsp-ui-paypage .hsp-ui-paypage__total,
html.hsp-ui.hsp-ui-fo .hsp-ui-paypage #amount.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-paypage .hsp-ui-paypage__tax {
  margin-inline-start: var(--hsp-space-2);
  font-size: var(--hsp-fs-sm);
  color: var(--hsp-color-text-muted);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-paypage .hsp-ui-paypage__steps {
  display: grid;
  gap: var(--hsp-space-2);
  margin: 0;
  padding-inline-start: var(--hsp-space-5);
  font-size: var(--hsp-fs-sm);
  line-height: var(--hsp-lh-sm);
  color: var(--hsp-color-text-secondary);
  list-style: disc;
}

html.hsp-ui.hsp-ui-fo .hsp-ui-paypage :is(.hsp-ui-paypage__ref, .hsp-ui-paypage__note) {
  margin: 0;
  font-size: var(--hsp-fs-sm);
  line-height: var(--hsp-lh-sm);
  color: var(--hsp-color-text);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-paypage :is(.hsp-ui-paypage__ref, .hsp-ui-paypage__note) + :is(.hsp-ui-paypage__ref, .hsp-ui-paypage__note) {
  margin-block-start: var(--hsp-space-2);
}

html.hsp-ui.hsp-ui-fo .hsp-ui-paypage > .cart_navigation {
  max-inline-size: 72rem;
  margin-inline: 0;
  padding-inline: 0;
}

/* the .clearfix pseudo-elements were flex items: space-between pushed both buttons inwards */
html.hsp-ui.hsp-ui-fo .hsp-ui-paypage > .cart_navigation::before,
html.hsp-ui.hsp-ui-fo .hsp-ui-paypage > .cart_navigation::after {
  content: none;
  display: none;
}

html.hsp-ui.hsp-ui-fo .hsp-ui-paypage--return > .alert {
  max-inline-size: 72rem;
  margin-block-end: var(--hsp-space-4);
}

/* round 2 (ui-polish-fo-pages): the social title select sits on the same baseline as the name fields */
html.hsp-ui.hsp-ui-fo #order-opc #new_account_form .gender-line {
  margin-block-end: var(--hsp-space-4);
}

html.hsp-ui.hsp-ui-fo #order-opc #new_account_form .gender-line label {
  display: block;
  margin-block-end: var(--hsp-space-1);
}

html.hsp-ui.hsp-ui-fo #order-opc .hsp-ui-req-note {
  font-size: var(--hsp-fs-sm);
  color: var(--hsp-color-text-secondary);
}