/* Self-hosted. A checkout must not call a third-party font host: it hands every buyer's IP and
   user agent to Google mid-payment, and an @import here blocks rendering until it resolves.
   Relative paths resolve against this stylesheet, i.e. assets/fonts/. Weights 500/700/800 are
   synthesised from these two — ship those files to restore exact fidelity. */
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url("fonts/inter-400.woff2") format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:600 800;font-display:swap;src:url("fonts/inter-600.woff2") format("woff2")}
/* BasisOrbit checkout block — design tokens shared with the checkout page theme.
   Scoped under .bo-checkout so nothing leaks into the theme. The accent colour is the
   tenant's (synced from the portal as --bo-accent); the shop's own primary colour wins if
   the theme defines --wp--preset--color--primary. */
.bo-checkout{
  --ink:var(--bo-ink, #0b0f17); --ink-2:var(--bo-ink-2, #4b5563); --ink-3:var(--bo-ink-3, #8a919c);
  --paper:var(--bo-surface-c, #fff); --hair:var(--bo-hair, #e6e7eb); --hair-2:var(--bo-hair-2, #d3d6dc);
  --accent:var(--bo-accent, #ff2aa6); --accent-deep:var(--bo-accent-deep, #b80e72); --accent-text:var(--bo-accent-text, #fff);
  --accent-tint:var(--bo-tint, color-mix(in srgb, var(--accent) 7%, var(--paper))); --accent-line:color-mix(in srgb, var(--accent) 35%, var(--paper));
  --r:var(--bo-radius, 14px); --r-control:var(--bo-radius-control, 10px);
  color:var(--ink); font-family:var(--bo-font, Inter, -apple-system, "SF Pro Text", system-ui, sans-serif);
  font-size:14.5px; line-height:1.5; font-feature-settings:"tnum";
}
.bo-checkout *{box-sizing:border-box}
.bo-checkout button{font:inherit;color:inherit}
.bo-svg{display:inline-flex;align-items:center;line-height:0}
.bo-desc{margin:0 0 10px;color:var(--ink-2);font-size:13.5px}

/* logo (CHECKOUT-APPEARANCE-CONTRACT.md) — height is per-tenant (16..80px), set inline by
   blocks.js; not one of the 15 --bo-* tokens, so it never becomes a CSS custom property. */
.bo-logo-wrap{margin:0 0 12px}
.bo-logo{display:block;width:auto;max-width:100%}
.bo-gateway-label{font-weight:600;font-family:var(--bo-font-heading, Inter, -apple-system, "SF Pro Text", system-ui, sans-serif)}

/* rows */
.bo-choices{display:grid;gap:8px}
.bo-choice{position:relative;background:var(--paper);border:1px solid var(--hair);border-radius:var(--r);transition:border-color .15s}
.bo-choice:hover{border-color:var(--hair-2)}
.bo-choice.on{border-color:var(--accent);background:var(--accent-tint)}
/* 16/09 (owner): no vertical accent bar on the selected row — the pink border is the only marker. */
.bo-choice__row{display:flex;align-items:center;gap:14px;padding:15px 16px 15px 18px;cursor:pointer;flex-wrap:wrap;row-gap:10px;outline:0}
.bo-choice__row:focus-visible{box-shadow:inset 0 0 0 2px var(--accent);border-radius:var(--r)}
.bo-dot{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--hair-2);flex-shrink:0;position:relative;background:var(--paper)}
.bo-choice.on .bo-dot{border-color:var(--accent)}
.bo-choice.on .bo-dot::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--accent)}
.bo-choice__label{flex:1;min-width:120px;font-weight:600;font-size:14.5px}
.bo-sticker{display:inline-block;margin-left:-5px;padding:1px 7px 2px;border-radius:20px;background:var(--accent);color:var(--accent-text);font-size:10px;font-weight:800;letter-spacing:.02em;line-height:1.5;white-space:nowrap;vertical-align:2px;transform:rotate(-8deg);animation:bo-sticker-pulse 1.5s ease-in-out infinite}
@keyframes bo-sticker-pulse{0%,100%{opacity:.85;transform:rotate(-8deg) scale(1)}50%{opacity:1;transform:rotate(-8deg) scale(1.08)}}
@media (prefers-reduced-motion: reduce){.bo-sticker{animation:none}}
.bo-choice__body{padding:0 16px 18px}
.bo-choice.on .bo-chips--hide-on{display:none}

/* chips / logos */
.bo-chips{display:inline-flex;gap:6px;align-items:center}
.bo-chip{height:22px;padding:0 7px;border-radius:5px;display:inline-grid;place-items:center;font-size:9.5px;font-weight:800;letter-spacing:.02em;color:#fff;border:1px solid transparent;font-family:Inter,-apple-system,system-ui,sans-serif}
.bo-chip--visa{background:#1a1f71}.bo-chip--mc{background:#fff;border-color:var(--hair-2);padding:0 5px}.bo-chip--amex{background:#2e77bc}
.bo-apay{display:inline-flex;align-items:center;gap:3px;background:#000;color:#fff;border-radius:5px;height:22px;padding:0 7px;font-size:10.5px;font-weight:600}
.bo-apay__logo svg{width:10px;height:12px}
.bo-bankicon{color:var(--ink)}
.bo-lead{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;margin:-4px 0 -4px -4px;border-radius:9px;background:var(--accent-tint);border:1px solid var(--accent-line);color:var(--accent-deep);flex-shrink:0}
.bo-lead svg{width:17px;height:17px}
.bo-coin{display:inline-grid;place-items:center;border-radius:50%;color:#fff;font-size:10.5px;font-weight:800;line-height:1;margin-right:-4px;box-shadow:0 0 0 2px #fff}
.bo-coin--dark{color:#1a1a1a}
.bo-pills .bo-coin{margin-right:0;box-shadow:none}
.bo-rowimg{height:20px}

/* pills */
.bo-pills{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end;max-width:100%}
.bo-pill{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px 0 7px;border-radius:20px;border:1px solid var(--hair-2);background:var(--paper);font-size:12px;font-weight:600;color:var(--ink-2);cursor:pointer;text-decoration:none;line-height:1}
.bo-pill:hover{border-color:var(--ink)}
.bo-pill.on{border-color:var(--ink);background:var(--ink);color:#fff}
.bo-pill--more{padding:0 10px}
.bo-flag{font-size:14px;line-height:1}

/* fields */
.bo-lbl{display:block;font-size:12px;font-weight:600;color:var(--ink-2);margin:10px 0 5px}
.bo-grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bo-field{display:flex;align-items:center;gap:8px;min-height:46px;padding:0 12px;border:1px solid var(--hair-2);border-radius:var(--r-control);background:var(--paper)}
.bo-field:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px #0b0f1714}
.bo-field--disabled,.bo-field--ghost{background:var(--paper);color:var(--ink-3)}
.bo-field--ghost input{cursor:default}
.bo-field input{border:0;outline:0;background:none;font:inherit;width:100%;min-width:0;color:var(--ink);padding:0;margin:0;box-shadow:none}
.bo-field input::placeholder{color:var(--ink-3)}
.bo-field__lock{color:var(--accent);flex-shrink:0;display:inline-flex}
.bo-field__end{margin-left:auto;display:inline-flex;color:var(--accent)}
.bo-trust{display:flex;align-items:center;gap:6px;color:var(--ink-3);font-size:11.5px;margin:12px 0 0}
.bo-trust .bo-svg{color:var(--accent)}
.bo-trust--foot{margin-top:14px}
.bo-note{font-size:12.5px;color:var(--ink-2);margin:10px 0 0;line-height:1.55}
.bo-note--line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}
.bo-note--warn{color:#8a5a00;background:#fff6e3;border:1px solid #f2dba3;border-radius:var(--r-control);padding:10px 12px}

/* card panel + preview */
.bo-cardpanel{display:grid;grid-template-columns:minmax(0,1fr) 184px;gap:16px;align-items:start}
.bo-cardviz{aspect-ratio:1.586;border-radius:12px;background:linear-gradient(135deg,#1c2130,#0b0f17 60%,#2a0f22);color:#fff;padding:12px 13px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 14px 30px -14px #0b0f1799;margin-top:33px}
.bo-cardviz__chip{width:26px;height:19px;border-radius:4px;background:linear-gradient(135deg,#e6c46a,#b8912e)}
.bo-cardviz__num{font-size:11.5px;letter-spacing:.09em;font-weight:600;white-space:nowrap;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.bo-cardviz__foot{display:flex;justify-content:space-between;align-items:flex-end;font-size:9.5px;color:#cfd3da}
.bo-cardviz__foot b{display:block;color:#fff;font-size:10.5px;font-weight:600;letter-spacing:.02em}
.bo-cardviz__brand{display:inline-flex;align-items:center;min-height:16px}
@media (max-width:640px){.bo-cardpanel{grid-template-columns:1fr}.bo-cardviz{display:none}}

/* apple pay — the native button in Safari/WebKit, a faithful fallback elsewhere */
.bo-apbtn{width:100%;height:48px;margin-top:6px;border-radius:var(--r-control);background:#000;color:#fff;display:flex;align-items:center;justify-content:center;gap:6px;font:600 17px/1 -apple-system,"SF Pro Text",Inter,system-ui,sans-serif;cursor:pointer}
.bo-apbtn__logo svg{width:18px;height:22px}
@supports (-webkit-appearance:-apple-pay-button){
  .bo-apbtn{-webkit-appearance:-apple-pay-button;-apple-pay-button-type:pay;-apple-pay-button-style:black;display:block}
  .bo-apbtn>*{display:none}
}

/* bank / crypto sheet */
.bo-sheet{background:var(--paper);border:1px solid var(--hair);border-radius:12px;padding:4px 14px;margin-top:6px}
.bo-kv{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--hair);font-size:13.5px}
.bo-kv:first-child{border-top:0}
.bo-kv>span:first-child{color:var(--ink-2)}
.bo-kv b{font-weight:600;display:inline-flex;align-items:center;gap:8px;text-align:right}
.bo-kv__soft{font-weight:500;color:var(--ink-3);font-size:12.5px}
.bo-kv--stack{flex-wrap:wrap}
.bo-kv__wide{flex-basis:100%;text-align:right;margin-top:-4px}
.bo-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px}
.bo-copy{height:24px;padding:0 9px;border-radius:6px;border:1px solid var(--hair-2);background:var(--paper);font-size:11px;font-weight:600;color:var(--ink-2);cursor:pointer;line-height:1}
.bo-copy:hover{border-color:var(--ink)}
/* 18/09 (owner): the bank-transfer reference is THE thing the buyer must carry into their bank
   app, so it stands apart from the account rows — its own tinted block, big monospace, one hint. */
.bo-ref{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px -14px 6px;padding:12px 14px;background:var(--accent-tint);border-top:1px solid var(--accent-line);border-bottom:1px solid var(--accent-line)}
.bo-ref__text{display:flex;flex-direction:column;gap:3px;min-width:0}
.bo-ref__lbl{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-deep)}
.bo-ref__code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:19px;font-weight:700;letter-spacing:.06em;color:var(--ink);line-height:1.15}
.bo-ref__hint{font-size:11.5px;color:var(--ink-2)}
.bo-ref__copy{flex-shrink:0;height:32px;padding:0 14px;border-radius:8px;border:1px solid var(--accent);background:var(--accent);color:var(--accent-text);font-size:12px;font-weight:700;cursor:pointer;line-height:1}
.bo-ref__copy:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
.bo-ref__copy.is-copied{background:var(--ink);border-color:var(--ink)}
.bo-loyalty{margin-top:12px}

/* 16/09 (owner, screenshots): no stray frames around the payment area. The WooCommerce Blocks
   wrapper draws its own box and border around our radio group; the payment rows are the only
   framed things on this step. */
.wc-block-checkout__payment-method .wc-block-components-radio-control,
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option,
.wc-block-checkout__payment-method .wc-block-components-radio-control__option:has(.bo-checkout),
.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control,
.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control-accordion-option,
.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control__option:has(.bo-checkout){
  border:0!important;box-shadow:none!important;background:transparent!important;padding:0!important;margin:0!important;
}
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-content:has(.bo-checkout),
.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control-accordion-content:has(.bo-checkout){padding:0!important;border:0!important}
.bo-checkout{border:0;background:transparent;padding:0}

/* 16/09 (owner): the container that still draws a frame around the whole payment step and a
   line under the group. Blocks wraps our radio group in several nested divs; neutralise them all,
   scoped to the payment step, and remove the panel's own left/bottom rules. */
.wp-block-woocommerce-checkout-payment-block .wc-block-components-checkout-step__content,
.wc-block-checkout__payment-method .wc-block-components-checkout-step__content,
.wp-block-woocommerce-checkout-payment-block > *,
.wc-block-checkout__payment-method > *{
  border:0!important;box-shadow:none!important;background:transparent!important;
}
.wp-block-woocommerce-checkout-payment-block,
.wc-block-checkout__payment-method{border:0!important;box-shadow:none!important;background:transparent!important;padding-left:0!important}
.wc-block-checkout__payment-method.wc-block-components-checkout-step,
.wp-block-woocommerce-checkout-payment-block.wc-block-components-checkout-step{border:0!important;box-shadow:none!important;padding-left:0!important}
.wc-block-checkout__payment-method .wc-block-components-checkout-step__content,
.wp-block-woocommerce-checkout-payment-block .wc-block-components-checkout-step__content{border:0!important}
.wc-block-checkout__payment-method.wc-block-components-checkout-step::before,
.wp-block-woocommerce-checkout-payment-block.wc-block-components-checkout-step::before,
.wc-block-checkout__payment-method.wc-block-components-checkout-step::after,
.wp-block-woocommerce-checkout-payment-block.wc-block-components-checkout-step::after,
.wc-block-checkout .wc-block-checkout__payment-method.wc-block-components-checkout-step--with-step-number::before,
.wc-block-checkout .wp-block-woocommerce-checkout-payment-block.wc-block-components-checkout-step--with-step-number::before{display:none!important}

/* 16/09 (owner): WooCommerce Blocks draws the grey frame around the whole radio group with a
   1px-bordered ::after overlay on .wc-block-components-radio-control — that is the stray line,
   not a border on any element. Remove it, scoped to the payment step; the selected method's own
   pink card is the frame. */
.wc-block-checkout__payment-method .wc-block-components-radio-control::after,
.wc-block-checkout__payment-method .wc-block-components-radio-control::before,
.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control::after,
.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control::before{display:none!important;content:none!important;border:0!important}