/* Isolated payment controls. Existing typography and motion rules are inherited. */
.payment-options { display: grid; grid-template-columns: auto auto; align-items: start; gap: 16px; min-width: 0; width: fit-content; max-width: 100%; margin: 10px 0 12px; }
.payment-options .button { display: flex; margin: 0; white-space: nowrap; grid-column: auto; grid-row: auto; }
.payment-options .interac-open { background: transparent; color: var(--paper); --lego-rb-bg: transparent; }
.square-option { min-width: 0; }
.payment-logos { display: flex; align-items: center; gap: 8px; margin: 8px 0 8px; }
.payment-logos > span { display: flex; align-items: center; justify-content: center; width: 60px; height: 45px; padding: 6px; background: #fff; }
.payment-logos img { display: block; object-fit: contain; max-width: 100%; }
.payment-logos img[alt="Visa"] { width: 44.2px; height: 14.45px; }
.payment-logos img[alt="Mastercard"] { width: 34px; height: 21.25px; }
.payment-logos img[alt="Google Pay"] { width: 48px; height: auto; }
.checkout-note { font-size: .76rem; line-height: 1.45; color: var(--muted); margin: 0; }
.reservation > .payment-options { grid-column: 2; grid-row: 2; }
#interac-dialog { color: var(--paper); background: var(--bg); border: 1px solid #454a3d; padding: 0; width: min(580px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain; }
#interac-dialog::backdrop { background: rgb(0 0 0 / .75); }
.interac-panel { padding: 28px; }
.interac-close { display: block; margin: 0 0 24px auto; border: 1px solid var(--line); color: var(--paper); background: transparent; padding: 10px 14px; cursor: pointer; min-height: 44px; }
#interac-title { font-size: 1.4rem; }
#interac-description { color: var(--muted); }
#interac-status { line-height: 1.45; }
@media (min-width: 1200px) {
  /* Use the hero's existing bottom padding for the new trust row, preserving its photograph dimensions. */
  .hero-copy { position: relative; }
  .hero-copy .payment-options { margin-top: 26px; }
  .hero-copy .payment-logos { position: absolute; left: 4.4vw; bottom: 29px; margin: 0; }
  .hero-copy .payment-logos > span { height: 36px; padding: 4px 6px; }
  .hero-copy .checkout-note { position: absolute; left: 4.4vw; bottom: 9px; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .payment-options { width: 100%; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .payment-options .button { white-space: normal; min-width: 0; }
  .payment-options .lego-rb__label { min-width: 0; }
}
@media (max-width: 767px) {
  .payment-options { grid-template-columns: minmax(0, 1fr); width: 100%; gap: 18px; }
  .payment-options .button { width: 100%; }
  .reservation > .payment-options { grid-column: auto; grid-row: auto; }
  .checkout-note { font-size: 1rem; }
  .interac-panel { padding: 20px; }
  #interac-description, #interac-status { font-size: 1.25rem; }
}