.gtg-booking__payment-placeholder + .gtg-booking__actions { justify-content: center; } .gtg-booking__payment-placeholder + .gtg-booking__actions .gtg-booking__submit { flex: 0 0 auto; width: auto; min-width: 13.25rem; white-space: nowrap; } .gtg-booking__payment-loading { display: grid; justify-items: center; align-content: center; gap: 1rem; min-height: 280px; padding: clamp(2.5rem, 8vw, 4rem) clamp(1.25rem, 5vw, 2.25rem); text-align: center; } .gtg-booking__payment-loading .gtg-booking__processing-spinner { margin: 0 auto .25rem; } .gtg-booking__payment-loading h4 { margin: 0; max-width: 18rem; } .gtg-booking__payment-loading p { margin: 0; max-width: 19rem; color: var(--gtg-booking-muted); } .gtg-booking__payment-loading ~ .gtg-booking__actions { display: none !important; } /* Payment timeout modal. This modal is appended to , outside .gtg-booking, so it needs its own design tokens instead of relying on variables scoped to .gtg-booking. */ body > .gtg-booking__timeout-backdrop { --gtg-booking-ink: #25201d; --gtg-booking-paper: #fcf8f2; --gtg-booking-card: #fffdf8; --gtg-booking-soft: #eee5da; --gtg-booking-accent: #ba6548; --gtg-booking-accent-dark: #874431; --gtg-booking-shadow: #25201d; --gtg-booking-muted: #665b54; position: fixed; inset: 0; z-index: 999999; display: grid; place-items: center; padding: clamp(1rem, 4vw, 2rem); background: rgba(37, 32, 29, .72); backdrop-filter: blur(2px); } body > .gtg-booking__timeout-backdrop > .gtg-booking__timeout-modal { display: grid; gap: .85rem; width: min(430px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow-y: auto; padding: clamp(1.35rem, 5vw, 1.8rem); border: 2px solid var(--gtg-booking-ink); border-radius: 15px; background: var(--gtg-booking-card); box-shadow: 5px 5px 0 var(--gtg-booking-shadow); color: var(--gtg-booking-ink); text-align: left; } body > .gtg-booking__timeout-backdrop .gtg-booking__eyebrow { display: inline-flex; width: fit-content; margin: 0 0 .15rem; padding: .28rem .55rem; border: 2px solid var(--gtg-booking-ink); border-radius: 9px; background: var(--gtg-booking-accent); color: #fffdf8; font-size: .82rem; font-weight: 900; letter-spacing: .02em; text-transform: uppercase; } body > .gtg-booking__timeout-backdrop .gtg-booking__timeout-modal h3 { margin: 0; color: var(--gtg-booking-ink); font-size: clamp(1.35rem, 5vw, 1.75rem); line-height: 1.12; } body > .gtg-booking__timeout-backdrop .gtg-booking__modal-copy { margin: 0 0 .25rem; color: var(--gtg-booking-muted); font-size: 1rem; line-height: 1.5; } body > .gtg-booking__timeout-backdrop .gtg-booking__submit { width: 100%; justify-content: center; margin-top: .25rem; } @media (max-width: 430px) { body > .gtg-booking__timeout-backdrop > .gtg-booking__timeout-modal { width: 100%; box-shadow: 3px 3px 0 var(--gtg-booking-shadow); } .gtg-booking__payment-placeholder + .gtg-booking__actions .gtg-booking__submit { width: 100%; min-width: 0; } }