/* =============================================================================================
   checkout-clean.css — PLAYGROUND (feat/checkout-upgrades-local, NOT committed). A calmer checkout:
   one slim header, one trust line, shipping as a line, fewer visible fields. Each rule names its law.
   ============================================================================================= */
/* The header stays today's (logo, avatars, 700,000+ Happy Customers, the trust pill): Matt 2026-10-26, keep checkout
   Shopify-like. The slim "logo · Secure checkout" header was the part that read as a hero. */

/* Proximity: section rhythm — 24px between sections. Headings stay today's size and bold (Marko 2026-10-27: Contact,
   Delivery, Shipping and Payment read as clearly separate sections). */
.co2-checkout .co2-block { margin-bottom: 24px; }
.co2-checkout .co2-left { padding-top: 28px; }

/* the reservation strip (device kept), one quiet line */
.co2-checkout .co2-reserve { padding: 9px 12px; font-size: 14px; margin-bottom: 20px; }

/* Tesler: apartment is optional for most, so it waits behind a link (and opens itself if a value is restored) */
.qs-addlink { display: inline-flex; align-items: center; gap: 6px; margin: -2px 0 12px 2px; padding: 4px 0; border: 0; background: none;
  font: 500 15px/1.2 var(--qs-text); color: var(--qs-charcoal); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.qs-hide { display: none !important; }

/* one trust line under Pay */
.qs-trustline { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; font: 400 13px/1.3 var(--qs-text); color: var(--qs-muted); }
.qs-trustline span { display: inline-flex; align-items: center; gap: 5px; }
.qs-trustline svg { width: 14px; height: 14px; }
.co2-checkout #cardFine { font-size: 13px; margin-top: 10px; }

/* the cart item from the drawer lands here (lp-ux2.css names it on the way out) */
@media (max-width: 900px) { .co2-checkout .co2-sumbar { view-transition-name: qs-cart-item; } }
@media (min-width: 901px) { .co2-checkout .co2-line:has(#lineImg) { view-transition-name: qs-cart-item; } }
::view-transition-group(qs-cart-item) { animation-duration: .45s; animation-timing-function: cubic-bezier(.65, 0, .25, 1); }

/* No jump when the card form arrives (Marko 2026-10-26): the placeholder held 190px while Airwallex's real form
   (Card header, number, expiry | CVC, Name on card, the consent text) renders at ~350px, ~370px on a phone, so
   the Pay button dropped ~170px under a shopper's thumb (layout shift 0.34 on a phone scrolled to Payment).
   The wrapper holds the real height from first paint and keeps it: Airwallex reports `ready` while its frame is
   still 33px (phone) / 169px (desktop) tall and grows it over ~0.3s after, so letting go at `ready` collapsed the
   section and then pushed it back down. The placeholder bars sit where the fields land. */
.co2-cardwrap.is-loading, .co2-cardwrap:has(iframe) { min-height: 350px; }
.co2-card-skel { padding-top: 62px; }
.co2-card-skel::after { content: ""; display: block; height: 46px; margin-top: 34px; border-radius: 8px; background: #f6f6f7; }
@media (max-width: 600px) { .co2-cardwrap.is-loading, .co2-cardwrap:has(iframe) { min-height: 370px; } }
/* desktop: the totals (Subtotal … Total) are written in after first paint and pushed the before/after card down
   ~200px. The empty block holds the shortest filled height (184px, the 1-month; BOGO 189, 3-month 211). */
@media (min-width: 901px) { #orderSummary:empty { min-height: 184px; } }