/* ==========================================================================
   Villa Breakfast · checkout, checkout-address, confirmation
   Loaded after pages.css only on these templates (split out of pages.css).
   ========================================================================== */

/* ---------- Checkout (page-checkout.php) · checkout-address · confirmation ---------- */
.cb-co-head{background:var(--paper);border-bottom:1.5px solid var(--line)}
.cb-co-head__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;min-height:64px}
.cb-co-head__back{justify-self:start;display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);padding-right:8px;font-size:var(--fs-sm);font-weight:800;text-decoration:none}
.cb-co-head__back .i{width:20px;height:20px}
.cb-co-head__safe{justify-self:end;display:inline-flex;align-items:center;gap:6px;margin:0;font-size:var(--fs-sm);font-weight:800;color:var(--olive)}
.cb-co-head__safe .i{width:18px;height:18px}
@media (max-width:420px){.cb-co-head .cb-logo__by{display:none}}
.cb-co-steps{list-style:none;display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 var(--s3);font-size:var(--fs-xs);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.cb-co-steps li{display:flex;align-items:center;gap:6px}
.cb-co-steps li+li::before{content:"";width:clamp(14px,4vw,36px);height:2px;margin-right:2px;background:var(--line-strong)}
.cb-co-steps b,.cb-co-steps .i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font-size:.75rem}
.cb-co-steps b{box-shadow:inset 0 0 0 2px currentColor}
.cb-co-steps .i{padding:5px;background:var(--olive);color:var(--paper)}
.cb-co-steps .is-done{color:var(--olive)}
.on-sun .cb-co-steps .is-done{color:var(--espresso)} /* olive on sun is 4.2:1 */
.cb-co-steps [aria-current]{color:var(--espresso)}
.cb-co-steps [aria-current] b{background:var(--espresso);color:var(--sun);box-shadow:none}
@media (max-width:479px){.cb-co-steps li:not([aria-current])>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}}
.cb-co-page{background:var(--cream);padding-bottom:var(--s8)}
.cb-co{max-width:calc(1180px + var(--gutter)*2);padding-top:clamp(24px,4vw,48px)}
.cb-co__intro{margin-bottom:var(--s3)}
.cb-co__intro h1{font-size:clamp(2.5rem,1.6rem + 3.6vw,4.5rem)}
.cb-co__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
/* WooCommerce prepends its notice group inside the form when the server
   refuses the order. The design never drew it; it never had a server. */
.cb-co__grid>.woocommerce-NoticeGroup{grid-column:1/-1}
.cb-co__main,.cb-co__rail{display:grid;gap:16px;min-width:0;align-content:start}
.cb-co__sec,.cb-co__summary{padding:clamp(18px,3vw,28px);border-radius:var(--r-lg);background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line)}
.cb-co__h{display:flex;align-items:center;gap:12px;margin-bottom:18px;font-size:clamp(1.5rem,1.2rem + 1vw,1.875rem)}
.cb-co__n{display:grid;place-items:center;flex:0 0 34px;height:34px;border-radius:50%;background:var(--sun);box-shadow:inset 0 0 0 2px var(--espresso);font:800 1rem/1 var(--font-body);letter-spacing:0}
.cb-co__fields{display:grid;gap:18px}
.cb-co__sec .cb-pay legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.cb-co__place{border:0;border-radius:var(--r-md);overflow:hidden}
.cb-co__place .cb-wrap{padding-inline:14px 10px}
.cb-co__place .cb-villa-banner__txt strong{white-space:normal}
.cb-co__hint{display:flex;gap:8px;align-items:flex-start;margin:12px 0 0;font-size:var(--fs-sm);color:var(--ink-2)}
.cb-co__hint .i{flex:0 0 20px;width:20px;height:20px;color:var(--pool-deep)}
.cb-co__sum-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.cb-co__sum-head h2{font-size:1.625rem}
.cb-co__sum-head .i{width:18px;height:18px}
.cb-co__foot{display:grid;gap:14px}
.cb-co__foot .cb-alert .cb-link{min-height:36px;font-size:var(--fs-sm)}
.cb-co__submit{min-height:64px;font-size:1.0625rem}
.cb-co__submit .i{width:20px;height:20px}
.cb-co__submit>span:first-child{display:inline-flex;align-items:center;gap:10px}
.cb-co__fine{margin:0;font-size:.8125rem;text-align:center;color:var(--ink-2)}
.cb-co__empty{display:grid;justify-items:center;gap:12px;padding:48px 20px;border-radius:var(--r-lg);background:var(--paper);text-align:center}
.cb-co__empty h2{font-size:var(--fs-h3)}
.cb-co__empty p{margin:0;color:var(--ink-2)}
/* The refused checkout, woocommerce/checkout/cart-errors.php: the real reason
   above the designed empty card, and its two ways out side by side. */
.cb-co__errors{display:grid;gap:16px}
.cb-co__errors-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0}
@media (min-width:1024px){.cb-co__grid{grid-template-columns:minmax(0,1fr) 400px;gap:24px 40px;align-items:start}.cb-co__rail{position:sticky;top:24px}}
/* card element placeholder (the gateway mounts its own fields here) */
.cb-card-el{display:none;gap:10px;padding:14px;border-radius:var(--r-md);background:var(--white);box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.cb-pay:has(input[value=card]:checked) .cb-card-el{display:grid}
.cb-card-el__row{display:grid;grid-template-columns:1fr auto auto;gap:14px;margin:0;padding:13px 14px;border-radius:var(--r-sm);background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line);font-size:.9375rem;font-weight:600;color:var(--espresso-3)}
.cb-card-el__row span:first-child{display:flex;align-items:center;gap:8px}
.cb-card-el__row .i{width:20px;height:20px}
.cb-card-el__note{display:flex;gap:6px;margin:0;font-size:.8125rem;color:var(--ink-2)}
.cb-card-el__note .i{flex:0 0 16px;width:16px;height:16px;margin-top:2px;color:var(--olive)}
/* address step */
.cb-co-addr{display:grid;gap:12px}
.cb-co-addr__geo{justify-self:start;font-size:var(--fs-sm)}
.cb-co-addr__geo .i{width:20px;height:20px;color:var(--pool-deep)}
.cb-co-addr .cb-location-checker__result:empty{display:none}
.cb-map{--map-land:#F7EAD0;--map-sea:#BFE8E3;--map-coast:var(--pool-deep);--map-road:#FFFBF3;--map-a:var(--terracotta);--map-b:var(--sun-deep);--map-c:var(--olive);--map-ink:var(--espresso);--map-sea-ink:var(--pool-deep);--map-pin:var(--terracotta);margin:0;border-radius:var(--r-md);overflow:hidden;background:var(--map-land);box-shadow:inset 0 0 0 1.5px var(--line)}
.cb-map svg{display:block;width:100%;height:auto;aspect-ratio:16/9}
.cb-map figcaption{padding:8px 12px;border-top:1.5px solid var(--line);background:var(--paper);font-size:.8125rem;color:var(--ink-2)}
@media (min-width:768px){.cb-map svg{aspect-ratio:32/13}}
.cb-co-when{display:flex;align-items:center;gap:10px;margin-top:16px;padding:10px 10px 10px 14px;border-radius:var(--r-md);background:var(--sun-soft)}
.cb-co-when__icon{flex:0 0 26px;width:26px;height:26px;color:var(--terracotta)}
.cb-co-when p{flex:1;display:grid;min-width:0;margin:0;line-height:1.3}
.cb-co-when p span{font-size:var(--fs-xs);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.cb-co-foot{padding:20px 0 28px;border-top:1.5px solid var(--line);background:var(--cream);font-size:var(--fs-sm);color:var(--ink-2)}
.cb-co-foot .cb-wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 24px}
.cb-co-foot p{margin:0}
.cb-co-foot a{display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);font-weight:800;color:var(--espresso)}
.cb-co-foot .i{width:20px;height:20px;color:var(--pool-deep)}
/* confirmation */
.cb-confirm__hero{position:relative;overflow-x:clip;padding-top:clamp(28px,5vw,72px);background:var(--sun)}
.cb-confirm__in{display:grid;gap:56px;padding-bottom:clamp(48px,6vw,80px)}
.cb-confirm__copy h1{max-width:5.04em;font-size:clamp(3rem,1.3rem + 6.6vw,6.5rem)}
.cb-confirm__sun{display:inline-block}
.cb-confirm .lead{margin-top:18px;max-width:38ch}
.cb-confirm__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.cb-confirm__actions .i{width:20px;height:20px}
.cb-confirm__keep{display:flex;gap:8px;align-items:flex-start;margin:22px 0 0;font-size:var(--fs-sm);font-weight:600}
.cb-confirm__keep .i{flex:0 0 20px;width:20px;height:20px}
.cb-confirm__ticket{position:relative;justify-self:center;width:100%;max-width:440px}
.cb-confirm__ticket .cb-ticket{rotate:1.5deg}
.cb-confirm__stamp{position:absolute;z-index:2;top:-48px;right:-6px;--size:104px;--stamp-bg:var(--paper)}
.cb-confirm__hero+.cb-scallop{--sc-under:var(--paper)}
.cb-confirm__next{padding-block:clamp(40px,6vw,88px) var(--section)}
.cb-confirm__next>h2{font-size:var(--fs-h3)}
.cb-confirm__steps{list-style:none;display:grid;gap:14px;margin-top:24px}
.cb-confirm__step{display:grid;grid-template-columns:48px minmax(0,1fr);gap:14px;align-items:start;padding:20px;border-radius:var(--r-lg);background:var(--cream)}
.cb-confirm__step>.i{width:48px;height:48px;padding:11px;border-radius:50%;background:var(--sun);color:var(--espresso)}
.cb-confirm__step h3{font-size:1.375rem}
.cb-confirm__step p{margin:4px 0 0;color:var(--ink-2)}
.cb-confirm__more{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 32px;margin-top:16px;padding:clamp(20px,3vw,32px);border-radius:var(--r-lg);background:var(--espresso);color:var(--cream)}
.cb-confirm__more h3{font-size:clamp(1.5rem,1.2rem + 1vw,2rem);color:var(--sun)}
.cb-confirm__more p{margin:6px 0 0;max-width:48ch}
@media (min-width:900px){.cb-confirm__steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1024px){.cb-confirm__in{grid-template-columns:minmax(0,1fr) 420px;align-items:center;gap:72px}.cb-confirm__ticket{justify-self:end}}
@media (prefers-reduced-motion:no-preference){.cb-confirm__sun{animation:cb-pop .8s var(--ease-spring) .25s both}.cb-confirm__ticket .cb-ticket{animation:cb-ticket-in .7s var(--ease-spring) .1s both}}
/* Demo: empty cart decided before first paint (see the inline script in <head>); app.js drops the class once the cart renders */
.cb-cart-empty [data-cb-checkout-main]{display:none!important}
.cb-cart-empty .cb-co__empty[hidden]{display:grid!important}