/* ============================================================ Checkout styling — classes emitted by Checkoutbuilder_Renderer. Loaded by BOTH the editor canvas and the live checkout page (signup-layout.phtml), so the design the admin sees is the design the customer gets. PHP owns structure; this file owns looks. ============================================================ */ :root{ --cb-accent:#635bff;--cb-radius:6px;--cb-bg:#ffffff;--cb-page:#f6f8fa; --cb-border:#d5dbe1;--cb-text:#1a1f36;--cb-muted:#6b7280; --cb-section-padding:48px;--cb-element-gap:20px;--cb-input-height:44px; --cb-button-height:46px;--cb-summary-radius:10px; --cb-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; } .cb-live,.cb-live *{box-sizing:border-box} .cb-section{padding:var(--cb-section-padding) 32px;background:var(--cb-bg)} /* Split background: two full-bleed bands meeting where the columns divide. Built from custom properties (set inline by the renderer) rather than an inline gradient, so the mobile rule below can simply override it — an inline background would need !important to beat. */ .cb-section.has-split{ background:linear-gradient(to right, var(--cb-split-left,var(--cb-bg)) 0, var(--cb-split-left,var(--cb-bg)) var(--cb-split-at,50%), var(--cb-split-right,var(--cb-page)) var(--cb-split-at,50%), var(--cb-split-right,var(--cb-page)) 100%)} .cb-section-inner{display:flex;flex-wrap:wrap;align-items:flex-start;margin:0 auto;width:100%} .cb-w-narrow .cb-section-inner{max-width:520px;flex-direction:column} .cb-w-boxed .cb-section-inner{max-width:1080px} .cb-w-full .cb-section-inner{max-width:none} .cb-w-narrow .cb-column{width:100%!important} .cb-column{flex:var(--cb-span,100) 1 0;width:auto;display:flex;flex-direction:column;gap:var(--cb-element-gap);min-width:0; background:var(--cb-col-bg,transparent);padding:var(--cb-col-pad,0px);color:var(--cb-col-fg,inherit)} /* A tinted, full-height column with a divider edge turns the summary side into a panel (Storefront preset). is-stretch fills the row; the edge is drawn with a box-shadow so it can bleed past the padding without shifting layout. */ .cb-column.is-stretch{align-self:stretch} .cb-column.has-edge-left{box-shadow:inset 1px 0 0 var(--cb-border)} .cb-column.has-edge-right{box-shadow:inset -1px 0 0 var(--cb-border)} /* Defensive rule for legacy/fallback markup: a field emitted directly under a section occupies its own row and can never squeeze the designed columns. */ .cb-section-inner>.cb-el{flex:0 0 100%;width:100%} .cb-el{min-width:0} /* ---- Per-element colour overrides ----------------------------------------- Checkoutbuilder_Renderer sets --cb-el-* on an element wrapper only for the colours the admin actually chose; every fallback below is the theme token, so an untouched element is pixel-identical to before. */ .cb-el{color:var(--cb-el-fg,inherit)} /* Background applies to the block itself. Excluded: the submit slot (its colour belongs to the button) and the summary (its own card rule below). */ .cb-el:not(.cb-submit-slot):not(.cb-el-order_summary){background:var(--cb-el-bg,transparent)} .cb-el .cb-label{color:var(--cb-el-label,var(--cb-el-fg,var(--cb-text)))} .cb-el .cb-input,.cb-el .cb-select{ background-color:var(--cb-el-input-bg,var(--cb-bg)); border-color:var(--cb-el-input-border,var(--cb-border))} .cb-el .cb-summary{background:var(--cb-el-bg,var(--cb-page))} .cb-el .cb-sum-totals,.cb-el .cb-sum-total{border-color:var(--cb-el-line,#dfe4ea)} .cb-el .cb-divider{border-top-color:var(--cb-el-line,#e3e8ee)} .cb-el .cb-radio,.cb-el .cb-plan,.cb-el .cb-tab,.cb-el .cb-apply{ background-color:var(--cb-el-input-bg,var(--cb-bg)); border-color:var(--cb-el-input-border,var(--cb-border))} /* .cb-captcha's base tint is #f9fafb, NOT var(--cb-bg) — it must keep its own fallback or a blank colour would turn it white. */ .cb-el .cb-captcha{ background-color:var(--cb-el-bg,#f9fafb); border-color:var(--cb-el-input-border,var(--cb-border))} .cb-el .cb-box{border-color:var(--cb-el-input-border,var(--cb-border))} /* Text colour must reach descendants that set their own colour, or the knob is inert on exactly the elements whose ONLY knob is text colour. */ .cb-el .cb-heading{color:var(--cb-el-fg,var(--cb-text))} .cb-el .cb-text,.cb-el .cb-badges li{color:var(--cb-el-fg,var(--cb-muted))} .cb-el .cb-check,.cb-el .cb-sum-name b,.cb-el .cb-sum-price, .cb-el .cb-sum-title,.cb-el .cb-sum-total{color:var(--cb-el-fg,var(--cb-text))} .cb-el .cb-sum-line.cb-muted,.cb-el .cb-sum-name small{color:var(--cb-el-fg,var(--cb-muted))} /* PaymentUi's gateway list is what Payment/Express actually render live. */ .cb-el .cb-pay21-list,.cb-el .cb-pay21-option{ background-color:var(--cb-el-input-bg,var(--cb-bg)); border-color:var(--cb-el-input-border,var(--cb-border))} /* Preview pay button. Text colour is read here too, so the canvas matches live (the live rule reads --cb-el-fg as well). */ .cb-el .cb-btn{background:var(--cb-el-bg,var(--cb-accent));color:var(--cb-el-fg,#fff)} .cb-label{display:block;font-size:13px;font-weight:500;color:var(--cb-text);margin-bottom:6px} .cb-input,.cb-select{border:1px solid var(--cb-border);border-radius:var(--cb-radius);background:var(--cb-bg); padding:11px 12px;font-size:14px;color:var(--cb-muted);min-height:var(--cb-input-height);display:flex;align-items:center} .cb-select:after{content:'';margin-left:auto;border:4px solid transparent;border-top-color:var(--cb-muted);margin-top:4px} .cb-mt{margin-top:8px} .cb-row{display:flex;gap:10px} .cb-row-stack{flex-direction:column} .cb-row .cb-field{flex:1;min-width:0} .cb-address-preview{display:flex;flex-direction:column;gap:10px} .cb-address-preview.is-compact{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px} .cb-address-preview.is-compact .cb-address-country, .cb-address-preview.is-compact .cb-address-street, .cb-address-preview.is-compact .cb-address-street2{grid-column:1/-1} .cb-address-preview.is-compact .cb-address-city, .cb-address-preview.is-compact .cb-address-state, .cb-address-preview.is-compact .cb-address-zip{grid-column:span 2} .cb-address-preview.is-readonly{opacity:.65} .cb-tabs{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap} .cb-tab{border:1px solid var(--cb-border);border-radius:var(--cb-radius);padding:10px 14px;font-size:13px; font-weight:500;color:var(--cb-muted);background:var(--cb-bg);display:flex;align-items:center;gap:7px} .cb-tab.is-on{border-color:var(--cb-accent);color:var(--cb-accent);box-shadow:0 0 0 1px var(--cb-accent)} .cb-tab-ico{width:22px;height:15px;border-radius:2px;background:#e3e8ee;display:block} .cb-tab.is-on .cb-tab-ico{background:var(--cb-accent);opacity:.25} .cb-card-fields{margin-top:4px} .cb-radios{display:flex;flex-direction:column;gap:8px} .cb-radio{display:flex;align-items:center;gap:10px;border:1px solid var(--cb-border);border-radius:var(--cb-radius); padding:12px 14px;font-size:14px;background:var(--cb-bg)} .cb-radio.is-on{border-color:var(--cb-accent);box-shadow:0 0 0 1px var(--cb-accent)} .cb-dot{width:16px;height:16px;border-radius:50%;border:1px solid var(--cb-border);flex:none;position:relative} .cb-radio.is-on .cb-dot{border-color:var(--cb-accent)} .cb-radio.is-on .cb-dot:after{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--cb-accent)} .cb-radio-price{margin-left:auto;font-weight:600} /* ============================================================ 21 Draw-inspired payment selector ============================================================ */ .cb-payment21{width:100%;color:var(--cb-text)} .cb-pay21-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:20px} .cb-pay21-heading h3{font-size:26px;line-height:1.15;letter-spacing:-.02em;margin:0 0 7px;font-weight:700} .cb-pay21-heading p{font-size:14px;line-height:1.45;margin:0;color:var(--cb-muted)} .cb-pay21-ssl{display:grid;grid-template-columns:26px auto;grid-template-rows:18px 13px;align-items:center; color:#aeb5bd;line-height:1;flex:none} .cb-pay21-lock{grid-row:1/3;width:21px;height:18px;margin:7px 7px 0 0;background:#aeb5bd;border-radius:2px;position:relative} .cb-pay21-lock:before{content:"";position:absolute;width:12px;height:10px;border:4px solid #aeb5bd;border-bottom:0; border-radius:9px 9px 0 0;left:1px;top:-10px} .cb-pay21-lock:after{content:"✓";position:absolute;color:#fff;font-size:12px;font-weight:800;left:5px;top:3px} .cb-pay21-ssl strong{font-size:18px;letter-spacing:.01em} .cb-pay21-ssl small{font-size:9px;letter-spacing:.08em} .cb-pay21-list{border:1px solid var(--cb-border);border-radius:calc(var(--cb-radius) + 2px);overflow:hidden;background:var(--cb-bg)} .cb-pay21-option{background:var(--cb-bg);transition:background-color .28s ease,box-shadow .28s ease} .cb-pay21-option+.cb-pay21-option{border-top:1px solid var(--cb-border)} /* .cb-pay21-option.is-on{box-shadow:inset 3px 0 0 var(--cb-accent)} */ .cb-pay21-head{min-height:70px;display:flex!important;align-items:center!important;gap:15px!important; padding:17px 22px!important;cursor:pointer!important;margin:0!important;width:100%!important} .cb-pay21-input{position:absolute!important;opacity:0!important;pointer-events:none!important;width:1px!important;height:1px!important} .cb-pay21-radio{width:22px;height:22px;border:1.5px solid #000000;border-radius:50%;position:relative;flex:none; transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease} /* .cb-pay21-option.is-on .cb-pay21-radio{border-color:var(--cb-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--cb-accent) 12%,transparent);transform:scale(1.04)} */ .cb-pay21-option.is-on .cb-pay21-radio:after{content:"";position:absolute;inset:5px;background:#000000;border-radius:50%; animation:cb-pay21-dot .32s cubic-bezier(.2,.9,.25,1.3)} .cb-pay21-method{display:flex;align-items:center;gap:14px;min-width:0;width:100%;font-size:16px} .cb-pay21-method>strong{font-size:16px;font-weight:600} .cb-pay21-paypal-word{display:inline-flex;font-size:23px;font-weight:800;font-style:italic;letter-spacing:-1.3px;color:#003087} .cb-pay21-paypal-word>span{color:#009cde} .cb-pay21-cards{display:flex;align-items:center;gap:7px;margin-left:auto} .cb-pay21-cards i{width:39px;height:25px;border:1px solid #e0e4e8;border-radius:3px;background:#fff; display:grid;place-items:center;font-style:normal;font-size:10px;font-weight:800} .cb-pay21-cards .is-visa{color:#1434cb;font-size:11px;font-style:italic} .cb-pay21-cards .is-amex{background:#1677bf;color:#fff;border-color:#1677bf;font-size:8px} .cb-pay21-cards .is-mastercard{position:relative;border:0;background:transparent;width:35px} .cb-pay21-cards .is-mastercard:before,.cb-pay21-cards .is-mastercard:after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;top:3px} .cb-pay21-cards .is-mastercard:before{left:3px;background:#eb001b}.cb-pay21-cards .is-mastercard:after{right:3px;background:#f79e1b;opacity:.92} .cb-pay21-reveal{display:grid;grid-template-rows:0fr;opacity:0;transform:translateY(-7px); transition:grid-template-rows .42s cubic-bezier(.2,.75,.25,1),opacity .3s ease,transform .42s cubic-bezier(.2,.75,.25,1)} .cb-pay21-reveal-inner{min-height:0;overflow:hidden} .cb-pay21-option.is-on .cb-pay21-reveal{grid-template-rows:1fr;opacity:1;transform:translateY(0)} .cb-pay21-panel{position:relative;padding:26px 28px 28px;background:color-mix(in srgb,var(--cb-page) 72%,var(--cb-bg)); text-align:center;overflow:hidden} .cb-pay21-panel:before{content:"";position:absolute;inset:0;transform:translateX(-120%); background:linear-gradient(100deg,transparent 25%,rgba(255,255,255,.55) 50%,transparent 75%)} .cb-pay21-option.is-on .cb-pay21-panel:before{animation:cb-pay21-shine .9s .12s ease-out} .cb-pay21-panel-brand{display:inline-flex;align-items:center;gap:8px;margin-bottom:13px;font-size:36px} .cb-pay21-option.is-on .cb-pay21-panel-brand{animation:cb-pay21-brand .55s cubic-bezier(.2,.85,.3,1.2)} .cb-pay21-external{font-size:24px;color:#aeb5bd;font-style:normal;line-height:1;transform:translateY(-3px)} .cb-pay21-stripe-word{font-size:31px;font-weight:800;letter-spacing:-1.8px;color:#635bff} .cb-pay21-panel p{position:relative;margin:0 auto;max-width:520px;font-size:14px;line-height:1.55;color:var(--cb-text)} .cb-pay21-panel p strong{display:inline-block;margin-top:3px} .cb-pay21-card-panel{text-align:left;padding:22px} .cb-pay21-card-intro{display:flex;align-items:center;gap:14px;margin-bottom:16px;color:var(--cb-muted);font-size:12.5px} .cb-pay21-card-brick{position:relative;background:var(--cb-bg);border:1px solid var(--cb-border);border-radius:calc(var(--cb-radius) + 4px);padding:18px} .cb-pay21-card-brick.is-split{padding:20px;background:color-mix(in srgb,var(--cb-page) 62%,var(--cb-bg));border-color:color-mix(in srgb,var(--cb-border) 78%,transparent)} .cb-pay21-option:not(.is-on) .cb-pay21-card-brick{display:none} .cb-pay21-card-brick .cb-slot-field{margin:0!important} .cb-pay21-card-brick .cb-label,.cb-pay21-card-brick .am-element-title{font-size:13px;font-weight:600;margin-bottom:8px} .cb-pay21-card-brick .am-row{margin:0!important}.cb-pay21-card-brick .am-element-title{display:none!important} .cb-stripe-wallets[hidden],.cb-stripe-wallet-divider[hidden]{display:none!important} .cb-stripe-wallets{position:relative;width:100%;min-width:0;animation:cb-wallet-in .28s ease-out} .cb-stripe-wallet-status{min-height:0;margin-top:8px;color:var(--cb-muted);font-size:12px;line-height:1.4} .cb-stripe-wallet-status:empty{display:none}.cb-stripe-wallet-status.is-error{color:#df1b41} .cb-stripe-wallet-divider{display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--cb-muted);font-size:11px; text-transform:uppercase;letter-spacing:.07em;white-space:nowrap} .cb-stripe-wallet-divider:before,.cb-stripe-wallet-divider:after{content:"";height:1px;background:var(--cb-border);flex:1} .cb-el-express_checkout .cb-stripe-wallet-divider{margin-bottom:0} @keyframes cb-wallet-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}} .cb-pay21-card-brick .StripeElement{min-height:max(52px,var(--cb-input-height));padding:17px 14px;border:1px solid var(--cb-border); border-radius:var(--cb-radius);box-shadow:none} .cb-stripe-split{display:grid;gap:12px} .cb-stripe-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px} .cb-stripe-control{position:relative;display:flex;align-items:center;min-width:0;min-height:max(58px,var(--cb-input-height));overflow:hidden; border:1px solid var(--cb-border);border-radius:calc(var(--cb-radius) + 8px);background:var(--cb-bg);box-sizing:border-box; transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease} .cb-stripe-control .StripeElement{flex:1;min-width:0!important;width:100%;min-height:0!important;padding:19px 46px 19px 16px!important; border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important} .cb-stripe-cardholder input,.cb-stripe-postal input{width:100%;height:100%;min-height:max(58px,var(--cb-input-height));padding:0 16px;border:0!important; outline:0!important;border-radius:inherit;background:transparent;color:var(--cb-text);font:400 16px/1.3 var(--cb-font);box-shadow:none!important} .cb-stripe-cardholder input::placeholder,.cb-stripe-postal input::placeholder{color:#737b88;opacity:1} .cb-stripe-control:focus-within{border-color:var(--cb-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--cb-accent) 18%,transparent)} .cb-stripe-control.is-invalid,.cb-stripe-control:has(.StripeElement--invalid){border-color:#df1b41; box-shadow:0 0 0 1px color-mix(in srgb,#df1b41 18%,transparent)} .cb-stripe-control .StripeElement--focus,.cb-stripe-control .StripeElement--invalid, .cb-stripe-control .StripeElement--webkit-autofill{background-color:transparent!important;box-shadow:none!important} .cb-stripe-field-lock{position:absolute;right:18px;top:50%;width:14px;height:13px;border:2px solid #777;border-radius:3px; transform:translateY(-30%);box-sizing:border-box;pointer-events:none} .cb-stripe-field-lock:before{content:"";position:absolute;left:1px;top:-10px;width:8px;height:8px;border:2px solid #777; border-bottom:0;border-radius:7px 7px 0 0;box-sizing:border-box} .cb-stripe-field-help{position:absolute;right:16px;top:50%;width:20px;height:20px;border:2px solid #777;border-radius:50%; transform:translateY(-50%);color:#777;font:700 13px/16px var(--cb-font);text-align:center;box-sizing:border-box;pointer-events:none} .cb-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important; overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important} .cb-stripe-preview .cb-stripe-control,.cb-stripe-compact-preview{color:#737b88;font-size:15px} .cb-stripe-preview .cb-stripe-control{padding:0 16px}.cb-stripe-compact-preview{position:relative;display:flex;align-items:center; gap:18px;min-height:56px;padding:0 48px 0 16px;border:1px solid var(--cb-border);border-radius:calc(var(--cb-radius) + 8px);background:var(--cb-bg)} .cb-stripe-compact-preview span:first-child{margin-right:auto}.cb-stripe-compact-preview .cb-stripe-field-lock{right:18px} .cb-pay21-card-placeholder{display:flex;align-items:center;gap:12px;min-height:54px;padding:10px 12px; border:1px dashed var(--cb-border);border-radius:var(--cb-radius);background:var(--cb-bg)} .cb-pay21-card-placeholder strong,.cb-pay21-card-placeholder small{display:block} .cb-pay21-card-placeholder strong{font-size:13px}.cb-pay21-card-placeholder small{font-size:12px;color:var(--cb-muted);margin-top:2px} .cb-pay21-mini-lock{width:24px;height:27px;border-radius:5px;background:color-mix(in srgb,var(--cb-accent) 14%,var(--cb-bg));position:relative;flex:none} .cb-pay21-mini-lock:before{content:"";position:absolute;width:11px;height:9px;border:2px solid var(--cb-accent);border-bottom:0; border-radius:7px 7px 0 0;left:5px;top:5px} .cb-pay21-mini-lock:after{content:"";position:absolute;width:4px;height:6px;border-radius:3px;background:var(--cb-accent);left:10px;top:15px} .cb-order-bump-slot:empty{display:none} .cb-order-bump-slot .am-bump-box,.cb-order-bump-slot .am-bump-carousel{margin:0 0 14px;width:100%;box-sizing:border-box} .cb-order-bump-slot>*:last-child{margin-bottom:0} .cb-order-bump-fallback{display:block;width:100%;margin:0 0 var(--cb-element-gap,24px);box-sizing:border-box} .cb-order-bump-fallback>.am-bump-box,.cb-order-bump-fallback>.am-bump-carousel{margin:0;width:100%;box-sizing:border-box} .cb-bump-preview{display:grid;gap:12px} .cb-bump-preview-card{display:flex;align-items:center;gap:13px;padding:13px;border:1px solid #d1d5db;border-radius:var(--cb-radius); background:#f0fdf4;color:var(--cb-text)} .cb-bump-preview-image{width:64px;height:54px;flex:none;border-radius:7px;background:linear-gradient(135deg,#dbeafe,#ede9fe)} .cb-bump-preview-copy{display:grid;gap:2px;min-width:0;flex:1}.cb-bump-preview-copy strong{font-size:13px} .cb-bump-preview-copy small{font-size:11px;color:var(--cb-muted)}.cb-bump-preview-copy b{font-size:12px} .cb-bump-preview-add{display:grid;place-items:center;width:36px;height:36px;border-radius:7px;background:#fca5a5;color:#7f1d1d;font-size:22px} .cb-ccdemo-panel .cb-pay21-card-intro strong{font-size:15px;color:var(--cb-text)} .cb-ccdemo-card{display:grid;gap:14px} .cb-ccdemo-field{display:block;min-width:0} .cb-ccdemo-field label{display:block!important;margin:0 0 6px!important;font-size:13px!important;font-weight:500!important;color:var(--cb-text)!important} .cb-ccdemo-control{position:relative;display:flex;align-items:center;min-width:0} .cb-ccdemo-card input:not([type=hidden]){ width:100%;min-height:var(--cb-input-height);box-sizing:border-box;margin:0;padding:11px 13px; border:1px solid var(--cb-border);border-radius:var(--cb-radius);background:var(--cb-bg); color:var(--cb-text);font:400 15px/1.35 var(--cb-font);box-shadow:none} .cb-ccdemo-card input:focus{outline:0;border-color:var(--cb-accent);box-shadow:0 0 0 3px rgba(99,91,255,.14)} .cb-ccdemo-number input{padding-right:128px!important} .cb-ccdemo-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px} .cb-ccdemo-card-icons{position:absolute;right:10px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:4px;pointer-events:none} .cb-ccdemo-card-icons i{width:31px;height:20px;border:1px solid #e0e4e8;border-radius:3px;background:#fff; display:grid;place-items:center;box-sizing:border-box;font-style:normal;font-weight:800;line-height:1} .cb-ccdemo-card-icons .is-visa{color:#1434cb;font-size:9px;font-style:italic} .cb-ccdemo-card-icons .is-amex{background:#1677bf;color:#fff;border-color:#1677bf;font-size:7px} .cb-ccdemo-card-icons .is-mastercard{position:relative;border:0;background:transparent;width:28px} .cb-ccdemo-card-icons .is-mastercard:before,.cb-ccdemo-card-icons .is-mastercard:after{ content:"";position:absolute;width:15px;height:15px;border-radius:50%;top:2px} .cb-ccdemo-card-icons .is-mastercard:before{left:2px;background:#eb001b} .cb-ccdemo-card-icons .is-mastercard:after{right:2px;background:#f79e1b;opacity:.92} .cb-ccdemo-cvc-icon{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:25px;height:17px; border:1.5px solid #8a929c;border-radius:3px;pointer-events:none} .cb-ccdemo-cvc-icon:before{content:"";position:absolute;left:0;right:0;top:4px;height:3px;background:#8a929c} .cb-ccdemo-cvc-icon:after{content:"•••";position:absolute;right:2px;bottom:-2px;font-size:8px;letter-spacing:0;color:#8a929c} .cb-ccdemo-card input[name=ccdemo_cvc]{padding-right:46px!important} .cb-ccdemo-test-hint{display:block;color:var(--cb-muted);font-size:12px;line-height:1.45} .cb-pay21-generic-panel{text-align:left}.cb-pay21-generic-panel p{margin:4px 0 0;color:var(--cb-muted)} @keyframes cb-pay21-dot{from{transform:scale(0)}to{transform:scale(1)}} @keyframes cb-pay21-brand{from{opacity:0;transform:translateY(9px) scale(.94)}to{opacity:1;transform:none}} @keyframes cb-pay21-shine{to{transform:translateX(120%)}} @media (prefers-reduced-motion:reduce){ .cb-summary-updated,.cb-sum-row-added{animation:none!important} .cb-pay21-option,.cb-pay21-radio,.cb-pay21-reveal{transition:none} .cb-pay21-option.is-on .cb-pay21-radio:after,.cb-pay21-option.is-on .cb-pay21-panel-brand, .cb-pay21-option.is-on .cb-pay21-panel:before,.cb-stripe-wallets{animation:none} } .cb-express{display:flex;gap:10px} .cb-express-v{flex-direction:column} .cb-express-btn{flex:1;border-radius:var(--cb-radius);display:grid;place-items:center;font-size:14px;font-weight:600} .cb-express-live .cb-express-btn{ border:1px solid var(--cb-border);background:var(--cb-text);color:var(--cb-bg); min-height:44px;padding:10px 16px;font-family:inherit;cursor:pointer;min-width:0} .cb-express-live .cb-express-btn:first-child{background:#ffc439;color:#111;border-color:#e7b326} .cb-express-live .cb-express-btn.is-on{ border-color:var(--cb-accent);box-shadow:0 0 0 2px var(--cb-accent)} .cb-plans{display:grid;grid-template-columns:1fr 1fr;gap:10px} .cb-plan{border:1px solid var(--cb-border);border-radius:var(--cb-radius);padding:14px;background:var(--cb-bg);display:flex;flex-direction:column;gap:3px} .cb-plan.is-on{border-color:var(--cb-accent);box-shadow:0 0 0 1px var(--cb-accent)} .cb-plan b{font-size:14px} .cb-plan-price{font-size:19px;font-weight:700} .cb-plan small{color:var(--cb-muted);font-size:12px} .cb-summary{background:var(--cb-page);border-radius:var(--cb-summary-radius);padding:22px} .cb-summary-updated{animation:cb-summary-update .3s ease-out} @keyframes cb-summary-update{0%{box-shadow:0 0 0 3px color-mix(in srgb,var(--cb-accent) 12%,transparent)}100%{box-shadow:none}} /* Sticking the summary alone would leave its column-mates (promo code, trust badges) to scroll up behind it. The whole sidebar column travels as one unit instead: it is a flex item of .cb-section-inner, so with align-self:flex-start its height stays content-sized while the row is as tall as the form column — which is exactly the room sticky needs. */ .cb-column:has(> .cb-el > .cb-summary.is-sticky){ position:sticky;top:var(--cb-sticky-top,24px);align-self:flex-start; max-height:calc(100dvh - var(--cb-sticky-top,24px) - 16px);overflow-y:auto; overscroll-behavior:auto;scrollbar-gutter:stable} .cb-summary.is-sticky{position:static} .cb-sum-title{font-size:17px;font-weight:600;margin:0 0 18px} .cb-sum-items{display:flex;flex-direction:column;gap:16px} .cb-sum-row{display:flex;align-items:center;gap:13px} .cb-sum-row-added{border-radius:calc(var(--cb-radius) + 2px);outline:2px solid transparent;outline-offset:5px; animation:cb-sum-row-added 1s ease-out} @keyframes cb-sum-row-added{ 0%{background-color:color-mix(in srgb,var(--cb-accent) 15%,transparent);outline-color:color-mix(in srgb,var(--cb-accent) 42%,transparent)} 100%{background-color:transparent;outline-color:transparent}} .cb-sum-thumb{width:52px;height:52px;border-radius:7px;background:#e3e8ee;overflow:hidden;flex:none} .cb-sum-thumb img{display:block;width:100%;height:100%;object-fit:cover} .cb-sum-name{flex:1;min-width:0} .cb-sum-name b{display:block;font-size:14px;font-weight:600;line-height:1.35;overflow-wrap:anywhere;word-break:break-word;hyphens:auto} .cb-sum-name small{display:block;color:var(--cb-muted);font-size:12.5px;margin-top:2px;overflow-wrap:anywhere;word-break:break-word} .cb-sum-remove-bump{display:block;margin:5px 0 0;padding:0;border:0;background:transparent;color:var(--cb-accent);font:inherit;font-size:11px;font-weight:600;line-height:1.2;cursor:pointer;text-decoration:underline;text-underline-offset:2px} .cb-sum-remove-bump:hover{filter:brightness(.8)} .cb-sum-price{font-size:14px;font-weight:500;white-space:nowrap} .cb-sum-totals{margin-top:20px;padding-top:16px;border-top:1px solid #dfe4ea;display:flex;flex-direction:column;gap:10px} .cb-sum-line{display:flex;justify-content:space-between;font-size:14px} .cb-sum-line.cb-muted{color:var(--cb-muted)} .cb-sum-total{display:flex;justify-content:space-between;font-size:15px;font-weight:700; padding-top:14px;margin-top:4px;border-top:1px solid #dfe4ea} .cb-summary.has-coupon .cb-sum-totals{gap:14px} .cb-summary.has-coupon .cb-sum-total{border-top:0;margin-top:0;padding-top:0;font-size:17px;align-items:baseline} .cb-sum-total-value{display:inline-flex;align-items:baseline;gap:6px;white-space:nowrap} .cb-sum-total-value small{font-size:12px;font-weight:500;color:var(--cb-text)} .cb-sum-total-value strong{font-size:20px;font-weight:700} .cb-sum-coupon{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 14px;align-items:center; color:var(--cb-el-fg,inherit);background:var(--cb-el-bg,transparent);border-radius:var(--cb-radius)} .cb-sum-coupon-details{color:var(--cb-el-fg,inherit);background:var(--cb-el-bg,transparent);border-radius:var(--cb-radius)} .cb-sum-coupon .cb-guest-coupon{min-width:0;margin:0;color:var(--cb-el-fg,var(--cb-text))} .cb-sum-coupon .cb-input.cb-guest-coupon{display:flex;align-items:center;color:var(--cb-muted)} .cb-sum-coupon .cb-apply{min-height:var(--cb-input-height);padding-inline:24px;border-color:var(--cb-accent);color:var(--cb-accent);background:transparent} .cb-sum-coupon .cb-apply:hover{background:color-mix(in srgb,var(--cb-accent) 7%,transparent)} .cb-sum-coupon .cb-apply:disabled{opacity:.58;cursor:wait} .cb-sum-coupon #cb-coupon-errors{grid-column:1/-1;margin-top:-5px} .cb-coupon-pill{justify-self:start;display:inline-flex;align-items:center;gap:8px;max-width:100%;padding:6px 12px; border:1px solid var(--cb-accent);border-radius:999px;background:transparent;color:var(--cb-accent); font:500 14px/1.2 var(--cb-font);cursor:pointer} .cb-coupon-pill span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cb-coupon-pill span:last-child{font-size:20px;font-weight:300;line-height:.8} .cb-coupon-pill:hover{background:color-mix(in srgb,var(--cb-accent) 7%,transparent)} .cb-coupon-pill:disabled{opacity:.6;cursor:wait} .cb-coupon-discount{justify-self:end;font-size:15px;white-space:nowrap} .cb-summary-empty{min-height:280px;display:flex;flex-direction:column} .cb-empty-cart{flex:1;display:grid;place-items:center;align-content:center;gap:8px;text-align:center; padding:28px 14px;color:var(--cb-muted)} .cb-empty-cart strong{color:var(--cb-text);font-size:18px} .cb-empty-cart-icon{width:44px;height:44px;margin-bottom:4px;border:2px solid var(--cb-border);border-radius:50%;position:relative} .cb-empty-cart-icon:before{content:"";position:absolute;inset:12px 10px 13px;border:2px solid var(--cb-muted);border-top:0;border-radius:3px} .cb-empty-cart-action{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin-top:10px; padding:0 18px;border-radius:var(--cb-radius);background:var(--cb-accent);color:#fff;text-decoration:none;font-weight:650} /* ---- Reactive add-on region --------------------------------------------- */ .cb-bump-region{display:grid;gap:14px;min-width:0} .cb-bump-region[hidden],.cb-el-order_bump[hidden]{display:none!important} .cb-bump-region-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px} .cb-bump-region-head h2{margin:0;color:var(--cb-el-fg,var(--cb-text));font:700 20px/1.25 var(--cb-font);letter-spacing:-.015em} .cb-bump-count{color:var(--cb-muted);font:500 12px/1.4 var(--cb-font);white-space:nowrap} .cb-bump-status:not(.cb-visually-hidden){padding:10px 12px;border:1px solid #f3c4cd;border-radius:var(--cb-radius); margin-top:10px;background:#fff5f7;color:#b4233f;font:500 13px/1.4 var(--cb-font)} .cb-cart-updating .cb-sum-totals{opacity:.68;transition:opacity .16s ease} .cb-cart-updating .cb-pay-btn{cursor:wait} .cb-sum-remove-bump{min-height:44px;padding:10px 4px;margin-left:-4px} .cb-coupon-pill{min-height:44px} .cb-btn{background:var(--cb-accent);color:#fff;border-radius:var(--cb-radius);padding:13px 24px; font-size:15px;font-weight:600;display:inline-grid;place-items:center;min-height:var(--cb-button-height)} .cb-btn-full{display:grid;width:100%} .cb-link-btn{border:0;background:transparent;color:var(--cb-accent);font:inherit;font-size:14px; min-height:44px;font-weight:500;cursor:pointer;padding:0;text-align:left;display:inline-flex;align-items:center} .cb-apply{border:1px solid var(--cb-border);border-radius:var(--cb-radius);padding:11px 18px; font-size:14px;font-weight:500;color:var(--cb-text);background:var(--cb-bg);display:grid;place-items:center;flex:none} .cb-check{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:var(--cb-text);line-height:1.45} .cb-box{width:17px;height:17px;border:1px solid var(--cb-border);border-radius:4px;flex:none;background:var(--cb-bg);margin-top:1px} .cb-captcha{display:flex;align-items:center;gap:11px;border:1px solid var(--cb-border);border-radius:var(--cb-radius); padding:14px 16px;font-size:14px;background:#f9fafb;max-width:304px} .cb-captcha i{margin-left:auto;font-style:normal;font-size:10px;color:var(--cb-muted)} .cb-hint-inline{border:1px dashed var(--cb-border);border-radius:var(--cb-radius);padding:12px 14px;font-size:14px;color:var(--cb-text)} .cb-hint-inline small{display:block;color:var(--cb-muted);font-size:12px;margin-top:2px} /* ---- Header bar: logo left, cart icon right ------------------------------- Checkoutbuilder_Renderer hoists the header out of the section/column grid and emits it as the first top-level block, so the bar is never boxed by a section's max-width — its colour always reaches both page edges. .cb-hd-inner re-applies the content width so the logo lines up with the form below it. */ .cb-el-header{width:100%;margin:0} /* --cb-hd-* are set inline per header when the admin overrides a colour; otherwise each falls back to the Appearance-tab theme token. */ .cb-header{background:var(--cb-hd-bg,var(--cb-bg));width:100%;display:flex;align-items:center} .cb-header.has-border{border-bottom:1px solid var(--cb-hd-border,var(--cb-border))} /* Same rule as the summary: stick the WRAPPER, not the bar, or it has no room to travel. The wrapper's parent is the form/page, which is full height. */ .cb-el-header:has(> .cb-header.is-sticky){position:sticky;top:0;z-index:30} .cb-header.is-sticky{position:static} .cb-hd-inner{width:100%;max-width:1080px;margin:0 auto;padding:14px 32px; display:flex;align-items:center;justify-content:space-between;gap:16px} .cb-hd-center .cb-hd-inner{justify-content:center;position:relative} .cb-hd-center .cb-hd-cart{position:absolute;right:32px;top:50%;transform:translateY(-50%)} .cb-hd-logo{display:inline-flex;align-items:center;text-decoration:none; color:var(--cb-hd-fg,var(--cb-text));min-width:0} .cb-hd-logo-text{font-size:20px;font-weight:700;letter-spacing:-.01em;color:inherit; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cb-hd-logo-img{display:block;width:auto;max-width:100%;object-fit:contain} .cb-hd-cart{position:relative;display:inline-flex;align-items:center;justify-content:center; width:44px;height:44px;border-radius:50%;color:var(--cb-hd-icon,var(--cb-accent)); text-decoration:none;flex:none;transition:background .15s ease} .cb-hd-cart:hover{background:color-mix(in srgb, currentColor 10%, transparent)} .cb-hd-cart svg{width:22px;height:22px;display:block} /* Badge fills with the icon colour and knocks its digits out in the bar colour, so it stays legible whatever the admin picks. */ .cb-hd-badge{position:absolute;top:2px;right:2px;min-width:17px;height:17px;padding:0 4px; border-radius:9px;background:var(--cb-hd-icon,var(--cb-accent)); color:var(--cb-hd-bg,var(--cb-bg));font-size:10.5px;font-weight:700; line-height:17px;text-align:center;box-shadow:0 0 0 2px var(--cb-hd-bg,var(--cb-bg))} .cb-heading{margin:0;font-weight:600;color:var(--cb-text)} .cb-h-sm{font-size:17px}.cb-h-md{font-size:22px}.cb-h-lg{font-size:28px;letter-spacing:-.01em} .cb-text{margin:0;color:var(--cb-muted);font-size:14px} .cb-divider{border:0;border-top:1px solid #e3e8ee;margin:0} .cb-spacer{display:block} .cb-img{display:block;height:auto;width:100%} .cb-img-empty{height:44px;border:1px dashed var(--cb-border);border-radius:var(--cb-radius); display:grid;place-items:center;color:var(--cb-muted);font-size:12px} .cb-badges{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px} .cb-badges li{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:var(--cb-muted)} .cb-tick{color:var(--cb-accent);font-weight:700;flex:none} /* label style variants driven by the Appearance tab (body[...] = canvas iframe, .cb-live[...] = live checkout fragment) */ body[data-labels="hidden"] .cb-label,.cb-live[data-labels="hidden"] .cb-label{ position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important; overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important} body[data-labels="floating"] .cb-label,.cb-live[data-labels="floating"] .cb-label{font-size:11px;color:var(--cb-muted);margin-bottom:2px} /* ============================================================ Live mode — the REAL aMember form elements printed into slots. QuickForm2 emits plain inputs/selects/labels; restyle them to match the designed look without touching their names or JS. ============================================================ */ .cb-live{background:var(--cb-page);font-family:var(--cb-font);color:var(--cb-text);min-height:100vh;font-size:14px;line-height:1.5} .cb-live-form,.cb-live>form{background:var(--cb-bg);min-height:100vh;margin:0} .cb-live-form>.cb-section:only-child,.cb-live>form>.cb-section:only-child{min-height:100vh} /* Composed rows: label above control, uniform vertical rhythm */ .cb-live .cb-slot-field{display:block;margin:0} .cb-live .cb-slot-field+.cb-slot-field{margin-top:14px} .cb-live .cb-slot-field>.cb-label{display:block;margin-bottom:6px} .cb-live .cb-req{color:#df1b41} /* Apply the builder's composite-field settings to the real aMember controls. */ .cb-live .cb-name-split .cb-slot-field{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px} .cb-live .cb-name-split .cb-slot-field>.cb-label, .cb-live .cb-name-split .cb-slot-field>.cb-error, .cb-live .cb-name-split .cb-slot-field>span.error{grid-column:1/-1} .cb-live .cb-name-split .cb-field{display:block;min-width:0} .cb-live .cb-name-stack .cb-field{display:block} .cb-live .cb-name-stack .cb-field+.cb-field{margin-top:10px} .cb-live .cb-address-compact .cb-slot-field{ display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px} .cb-live .cb-address-compact .cb-slot-field>.cb-label, .cb-live .cb-address-compact .cb-slot-field>.cb-error, .cb-live .cb-address-compact .cb-slot-field>span.error{grid-column:1/-1} .cb-live .cb-address-compact .cb-address-country{grid-column:1/-1} .cb-live .cb-address-compact .cb-address-street{grid-column:1/-1} .cb-live .cb-address-compact .cb-address-street2{grid-column:1/-1} .cb-live .cb-address-compact .cb-address-city{grid-column:span 2} .cb-live .cb-address-compact .cb-address-state{grid-column:span 2} .cb-live .cb-address-compact .cb-address-zip{grid-column:span 2} .cb-live .cb-address-compact .cb-field{display:block;min-width:0} .cb-live .cb-address-stack .cb-field{display:block} .cb-live .cb-address-stack .cb-field+.cb-field{margin-top:10px} .cb-live .cb-payment-tabs .cb-radios{ display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:8px} .cb-live .cb-payment-tabs .cb-radio{height:100%;margin:0} .cb-live .cb-payment-tabs .cb-dot{display:none} .cb-coupon-details>summary{list-style:none;display:inline-flex;cursor:pointer} .cb-coupon-details>summary::-webkit-details-marker{display:none} .cb-coupon-details[open]>summary{margin-bottom:12px} .cb-coupon-details-body{display:block} .cb-sum-coupon-details{width:100%} .cb-sum-coupon-details>summary{font-size:14px} .cb-sum-coupon-details .cb-coupon-details-body{width:100%} .cb-live .am-pass-indicator-wrap{display:block!important;width:100%;max-width:none} /* Every text-like control — high-specificity so amember.css/reset.css lose. :not() guards keep radios/checkboxes/submits out of the box styling. */ .cb-live .cb-el input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]):not([type=hidden]), .cb-live .cb-el select, .cb-live .cb-el textarea{ -webkit-appearance:none;appearance:none; width:100%;max-width:100%;margin:0; border:1px solid var(--cb-border);border-radius:var(--cb-radius);background:var(--cb-bg); padding:10px 12px;font-size:14px;line-height:1.4;color:var(--cb-text);font-family:inherit; box-sizing:border-box;min-height:var(--cb-input-height);box-shadow:none} .cb-live .cb-el select{ padding-right:34px;cursor:pointer; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 12px center} .cb-live .cb-el select[multiple]{background-image:none;padding-right:12px} .cb-live .cb-el textarea{min-height:84px;resize:vertical} .cb-live .cb-el input:focus, .cb-live .cb-el select:focus, .cb-live .cb-el textarea:focus{outline:0;border-color:var(--cb-accent);box-shadow:0 0 0 3px rgba(99,91,255,.14)} /* Per-element colours must reach the REAL form controls too, not just previews. Same specificity as the block above, declared after it, so it wins only where the admin set a colour (otherwise the fallback is the identical token). background-COLOR, never the `background` shorthand: the shorthand resets background-image and would wipe the