/* Inline checkout uses the existing customer workspace tokens and typography. */
body.public-workbench.product-redesign.compact-tools #successBox .result-actions{flex-wrap:wrap}
body.public-workbench.product-redesign.compact-tools #successBox .result-link{flex-basis:100%}
body.public-workbench.product-redesign.compact-tools #inlinePayButton{display:inline-flex;align-items:center;justify-content:center;gap:6px;margin-left:auto}
#inlinePayButton svg{width:14px;height:14px}
.inline-payment{margin:20px 0 0;padding:18px 0 0;border-top:1px solid var(--tool-line,#e1e8e4);color:var(--tool-ink,#1e302a);text-align:left}
.inline-payment-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:17px}
.inline-payment-heading h3{margin:0;font-size:14px;font-weight:600;line-height:1.6}
.inline-payment-heading p{margin:3px 0 0;font-size:11px;color:var(--tool-muted,#697b72);line-height:1.7}
.inline-payment-heading>button{display:flex;align-items:center;gap:4px;flex:none;font-size:11px}
.inline-payment-heading>button svg{width:13px;height:13px}
.inline-payment-steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:0;margin:0 0 18px}
.inline-payment-steps li{display:flex;align-items:center;gap:6px;padding:0 0 10px;border-bottom:2px solid var(--tool-line,#e1e8e4);font-size:11px;color:var(--tool-muted,#697b72);line-height:1.6;white-space:nowrap}
.inline-payment-steps li>span{display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:var(--tool-soft,#f6f8f7);font-size:10px;flex:none}
.inline-payment-steps li[aria-current="step"],.inline-payment-steps li.is-complete{border-color:var(--tool-green,#078265);color:var(--tool-green,#078265)}
.inline-payment-steps li[aria-current="step"]>span,.inline-payment-steps li.is-complete>span{background:var(--tool-green-soft,#eaf5ef)}
.inline-payment-message{font-size:12px;line-height:1.8;border:1px solid var(--tool-line,#e1e8e4);background:var(--tool-soft,#f6f8f7);padding:10px 12px;border-radius:5px;margin:0 0 14px;color:var(--tool-muted,#697b72)}
.inline-payment-message[data-kind="error"]{color:#9b422f;background:#fff7f3;border-color:#edd8ce}
.inline-wallet-section{margin:12px 0 16px;padding:12px;border:1px solid var(--tool-line,#e1e8e4);border-radius:6px;background:var(--tool-soft,#f6f8f7)}
.inline-wallet-hint{margin:0 0 9px;font-size:11px;line-height:1.8;color:var(--tool-muted,#697b72)}
.inline-wallet-element{min-height:44px;margin:0 0 10px}
.inline-wallet-element[inert]{opacity:.5}
.inline-wallet-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.inline-wallet-actions>.text-button{font-size:11px;line-height:1.8;display:inline-block}
.inline-wallet-actions>.secondary-button{font-size:11px;padding:5px 9px;min-height:30px}
.inline-wallet-section .inline-section-label{margin-bottom:6px}
.inline-order-summary{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--tool-soft,#f6f8f7);border:1px solid var(--tool-line,#e1e8e4);border-radius:6px;padding:13px 14px;margin-bottom:18px}
.inline-order-summary>div:first-child{min-width:0;display:flex;flex-direction:column;gap:3px}
.inline-order-label{font-size:10px;color:var(--tool-muted,#697b72)}
.inline-order-summary strong{font-weight:600;font-size:13px;line-height:1.6;overflow-wrap:anywhere}
.inline-order-summary small{font-size:11px;color:var(--tool-muted,#697b72);line-height:1.7}
.inline-order-total{text-align:right;flex:none;display:flex;flex-direction:column;gap:3px}
.inline-order-total strong{font-size:21px;letter-spacing:-.5px;font-variant-numeric:tabular-nums;line-height:1.4}
.inline-order-total>span{font-size:10px;color:var(--tool-muted,#697b72)}
.inline-section-label{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 11px;font-size:11px;color:var(--tool-muted,#697b72);line-height:1.7}
.inline-section-label>strong{font-size:12px;font-weight:600;color:var(--tool-ink,#1e302a)}
.inline-billing-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.inline-billing-sample-tools{display:flex;align-items:flex-end;gap:9px;flex-wrap:wrap;padding:11px 12px;margin-bottom:14px;border:1px solid var(--tool-line,#e1e8e4);border-radius:5px;background:var(--tool-soft,#f6f8f7)}
.inline-billing-sample-tools>div{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.inline-billing-sample-tools label{font-size:11px!important;color:var(--tool-muted,#697b72)}
body.public-workbench.product-redesign.compact-tools .inline-billing-sample-tools select{width:100%;min-width:125px;min-height:34px;font-size:12px;padding:6px 8px}
body.public-workbench.product-redesign.compact-tools .inline-billing-sample-tools button{min-height:34px;font-size:11px;padding:6px 10px;flex:none}
.inline-billing-sample-tools p{flex-basis:100%;margin:1px 0 0;font-size:10px;line-height:1.7;color:var(--tool-muted,#697b72)}
@media(max-width:520px){.inline-billing-sample-tools>div{flex-basis:100%}body.public-workbench.product-redesign.compact-tools .inline-billing-sample-tools select{min-width:0}}
.inline-billing-grid>div{display:flex;flex-direction:column;gap:5px;min-width:0}
.inline-billing-grid .inline-field-wide{grid-column:1/-1}
.inline-billing-grid label{line-height:1.6}
body.public-workbench.product-redesign.compact-tools .inline-billing-grid input,body.public-workbench.product-redesign.compact-tools .inline-billing-grid select{width:100%;min-width:0;font-size:12px;min-height:36px;padding:7px 9px}
.inline-payment-note{display:flex;align-items:flex-start;gap:5px;margin:13px 0;font-size:10px;line-height:1.8;color:var(--tool-muted,#697b72)}
.inline-payment-note svg{width:12px;height:12px;flex:none;margin-top:3px}
.inline-payment-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--tool-line,#e1e8e4);padding-top:13px;margin-top:15px}
.inline-payment-footer>span{font-size:10px;line-height:1.7;color:var(--tool-muted,#697b72)}
body.public-workbench.product-redesign.compact-tools .inline-payment-footer>.primary-button{min-height:35px;padding:8px 12px;font-size:12px;display:inline-flex;align-items:center;justify-content:center;gap:7px;flex:none}
.inline-payment-footer .primary-button svg{width:13px;height:13px}
.inline-billing-review{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--tool-line,#e1e8e4);border-radius:5px;margin-bottom:18px}
.inline-billing-review span{color:var(--tool-muted,#697b72);font-size:10px}
.inline-billing-review p{margin:3px 0 0;font-size:11px;line-height:1.8;overflow-wrap:anywhere}
.inline-billing-review button{font-size:11px;flex:none}
.inline-stripe-label{display:inline-flex;align-items:center;gap:4px;font-size:10px;color:var(--tool-muted,#697b72)}
.inline-stripe-label svg{width:11px;height:11px}
.inline-stripe-element{min-height:140px;padding:1px 0;color:var(--tool-muted,#697b72);font-size:12px;line-height:1.8}
.inline-stripe-element>p{margin:0;padding:18px 12px;background:var(--tool-soft,#f6f8f7);border:1px dashed var(--tool-line,#e1e8e4);border-radius:5px}
.inline-stripe-element iframe{max-width:100%}
.inline-payment-consent{display:flex;align-items:flex-start;gap:7px;font-size:11px;line-height:1.9;margin-top:14px;cursor:pointer}
body.public-workbench.product-redesign.compact-tools .inline-payment-consent input[type="checkbox"]{flex:none;margin:4px 0 0;padding:0;width:13px;height:13px;min-height:13px;max-height:13px;accent-color:var(--tool-green,#078265)}
.inline-payment-outcome{text-align:center;padding:10px 4px 5px}
.inline-outcome-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--tool-green-soft,#eaf5ef);color:var(--tool-green,#078265);margin:0 auto 12px}
.inline-outcome-icon svg{width:21px;height:21px}
.inline-payment-outcome h4{font-size:16px;margin:0 0 7px;font-weight:600}
.inline-payment-outcome>p{font-size:12px;line-height:1.9;color:var(--tool-muted,#697b72);max-width:390px;margin:0 auto}
.inline-challenge-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:200px;background:var(--tool-soft,#f6f8f7);border:1px solid var(--tool-line,#e1e8e4);border-radius:6px;margin:18px 0;font-size:12px}
.inline-challenge-placeholder>svg{width:29px;height:29px;color:var(--tool-muted,#697b72)}
.inline-challenge-placeholder>span{font-size:11px;color:var(--tool-muted,#697b72)}
.inline-outcome-actions{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:20px;font-size:11px}
.inline-outcome-actions a{display:inline-flex;align-items:center;gap:4px;font-size:11px}
.inline-outcome-actions a svg{width:12px;height:12px}
@media(max-width:520px){.inline-order-summary{align-items:flex-start;padding:11px;gap:8px}.inline-order-total strong{font-size:18px}.inline-payment-heading{gap:6px}.inline-payment-heading p{max-width:230px}.inline-section-label{align-items:flex-start}.inline-section-label>span{text-align:right;font-size:10px}.inline-payment-footer{align-items:stretch;flex-direction:column;gap:8px}.inline-payment-footer>span{text-align:center;order:2}.inline-payment-footer>.primary-button{width:100%}.inline-payment-steps{gap:5px}.inline-payment-steps li{font-size:10px;gap:4px}.inline-billing-grid{gap:10px}.inline-order-total>span{max-width:115px}.inline-billing-review{padding:9px}.inline-outcome-actions{flex-wrap:wrap}}
@media(max-width:360px){.inline-billing-grid{grid-template-columns:1fr}.inline-order-summary{flex-direction:column}.inline-order-total{text-align:left}.inline-order-total>span{max-width:none}body.public-workbench.product-redesign.compact-tools #inlinePayButton{margin-left:0}.inline-payment-heading>button span{display:none}}
/* Keep billing, card entry and payment results in one native modal. */
html.payment-dialog-open{overflow:hidden;scrollbar-gutter:stable}
body.public-workbench.product-redesign.compact-tools #inlinePaymentDialog{position:fixed;inset:0;width:min(680px,calc(100% - 36px));max-width:680px;max-height:calc(100dvh - 48px);margin:auto;padding:0;border:1px solid var(--tool-line,#e1e8e4);border-radius:10px;background:var(--tool-paper,#fff);color:var(--tool-ink,#1e302a);box-shadow:0 24px 80px #102a2440;overflow:auto;overscroll-behavior:contain;text-align:left}
#inlinePaymentDialog:not([open]){display:none}
#inlinePaymentDialog::backdrop{background:rgb(16 35 29 / 42%)}
.payment-verification-shade{position:fixed;inset:0;z-index:1000;background:rgb(16 35 29 / 42%)}
.payment-verification-shade[hidden]{display:none}
body.public-workbench.product-redesign.compact-tools #inlinePaymentDialog[data-verification-active="true"]{z-index:1001}
body.public-workbench.product-redesign.compact-tools #inlinePaymentDialog .inline-payment{margin:0;padding:0 24px 24px;border:0}
#inlinePaymentDialog .inline-payment-heading{position:sticky;top:0;z-index:2;margin:0 -24px 18px;padding:18px 24px 15px;border-bottom:1px solid var(--tool-line,#e1e8e4);background:var(--tool-paper,#fff);align-items:center}
#inlinePaymentDialog .inline-payment-heading h3{font-size:16px}
#inlinePaymentDialog .inline-payment-heading>button{min-height:30px;padding:5px 7px;border-radius:4px}
#inlinePaymentDialog .inline-payment-heading>button:hover{background:var(--tool-soft,#f6f8f7)}
#inlinePaymentDialog .inline-payment-heading>button:disabled{opacity:.5;cursor:wait}
body.public-workbench.product-redesign.compact-tools[data-admin-tools="true"] #inlinePaymentDialog{top:0;bottom:0;margin:auto;max-height:min(calc(100dvh - 48px),calc(var(--console-viewport-height,100dvh) - 48px))}
body[data-admin-tools="true"].payment-viewport>.customer-shell{visibility:hidden;pointer-events:none}
html:has(>body[data-admin-tools="true"].payment-viewport){scrollbar-gutter:auto}
@media(max-width:660px){body.public-workbench.product-redesign.compact-tools #inlinePaymentDialog{width:calc(100% - 20px);max-height:calc(100dvh - 24px);border-radius:8px}body.public-workbench.product-redesign.compact-tools #inlinePaymentDialog .inline-payment{padding:0 16px 18px}#inlinePaymentDialog .inline-payment-heading{margin:0 -16px 16px;padding:14px 16px}#inlinePaymentDialog .inline-payment-heading p{max-width:none}#inlinePaymentDialog .inline-billing-grid{grid-template-columns:1fr}#inlinePaymentDialog .inline-payment-heading>button span{display:none}}
/* Compact enough for a 720px desktop viewport without scrolling the billing step. */
body.public-workbench.product-redesign.compact-tools #inlinePaymentDialog .inline-payment{padding:0 22px 16px}
#inlinePaymentDialog .inline-payment-heading{margin:0 -22px 12px;padding:13px 22px 11px}
#inlinePaymentDialog .inline-payment-heading p{display:none}
#inlinePaymentDialog .inline-payment-steps{margin-bottom:12px}
#inlinePaymentDialog .inline-payment-steps li{padding-bottom:7px}
#inlinePaymentDialog .inline-order-summary{padding:10px 12px;margin-bottom:12px}
#inlinePaymentDialog .inline-section-label{margin-bottom:8px}
#inlinePaymentDialog .inline-billing-sample-tools{padding:0;margin-bottom:10px;border:0;background:transparent;align-items:center;gap:8px}
#inlinePaymentDialog .inline-billing-sample-tools>div{flex-direction:row;align-items:center;gap:9px}
#inlinePaymentDialog .inline-billing-sample-tools label{flex:none}
body.public-workbench.product-redesign.compact-tools #inlinePaymentDialog .inline-billing-sample-tools select{min-width:0;min-height:32px;padding:5px 8px}
body.public-workbench.product-redesign.compact-tools #inlinePaymentDialog .inline-billing-sample-tools button{min-height:32px;padding:5px 8px}
#inlinePaymentDialog .inline-billing-grid{gap:9px 12px}
#inlinePaymentDialog .inline-billing-grid>div{gap:3px}
body.public-workbench.product-redesign.compact-tools #inlinePaymentDialog .inline-billing-grid input,body.public-workbench.product-redesign.compact-tools #inlinePaymentDialog .inline-billing-grid select{min-height:34px;padding:6px 9px}
#inlinePaymentDialog .inline-payment-note{margin:9px 0;font-size:10px}
#inlinePaymentDialog .inline-payment-footer{margin-top:10px;padding-top:10px}
@media(max-width:660px){body.public-workbench.product-redesign.compact-tools #inlinePaymentDialog .inline-payment{padding:0 14px 14px}#inlinePaymentDialog .inline-payment-heading{margin:0 -14px 12px;padding:12px 14px}#inlinePaymentDialog .inline-billing-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#inlinePaymentDialog .inline-billing-sample-tools>div{flex-basis:100%}#inlinePaymentDialog .inline-billing-sample-tools label{font-size:10px!important}#inlinePaymentDialog .inline-order-summary{padding:9px 10px;gap:8px}#inlinePaymentDialog .inline-order-total strong{font-size:18px}#inlinePaymentDialog .inline-payment-footer>span{display:none}#inlinePaymentDialog .inline-payment-footer>.primary-button{width:100%}}
/* Short transitions keep the same order visible throughout the checkout flow. */
#inlinePaymentDialog{scrollbar-gutter:stable}
#inlinePaymentDialog[open]::backdrop{animation:payment-backdrop-in 210ms ease-out}
#inlinePaymentDialog.is-closing::backdrop{animation:payment-backdrop-out 150ms ease-in forwards}
.inline-payment-steps li,.inline-payment-steps li>span{transition:color 180ms ease,background-color 180ms ease,border-color 180ms ease}
.inline-payment-message{transition:background-color 180ms ease,color 180ms ease}
.inline-payment-message.is-loading{display:flex;align-items:center;gap:9px}
.inline-payment-message.is-loading::before,.inline-payment-footer button.is-loading::before{content:'';width:12px;height:12px;flex:none;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:payment-spin 700ms linear infinite}
.inline-payment-footer button.is-loading>svg{display:none}
.inline-payment-loading{padding:0 0 8px}
.inline-payment-loading>div,.payment-loading-fields>span{border-radius:5px;background:linear-gradient(100deg,#f1f5f3 20%,#e5ede9 45%,#f1f5f3 70%);background-size:220% 100%;animation:payment-shimmer 1400ms ease-in-out infinite}
.payment-loading-summary{height:88px;margin-bottom:17px}
.payment-loading-row{height:34px;margin-bottom:12px}
.inline-payment-loading .payment-loading-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;background:none;animation:none}
.payment-loading-fields>span{display:block;height:49px}
#inlinePaymentDialog[data-step="result"] .inline-payment-outcome{padding:18px 4px 10px}
.inline-outcome-actions{flex-wrap:wrap}
@keyframes payment-backdrop-in{from{background:rgb(16 35 29 / 0%)}to{background:rgb(16 35 29 / 42%)}}
@keyframes payment-backdrop-out{from{background:rgb(16 35 29 / 42%)}to{background:rgb(16 35 29 / 0%)}}
@keyframes payment-spin{to{transform:rotate(360deg)}}
@keyframes payment-shimmer{from{background-position:160% 0}to{background-position:-60% 0}}
@media(prefers-reduced-motion:reduce){#inlinePaymentDialog[open]::backdrop,#inlinePaymentDialog.is-closing::backdrop,.inline-payment-message.is-loading::before,.inline-payment-footer button.is-loading::before,.inline-payment-loading>div,.payment-loading-fields>span{animation:none}.inline-payment-steps li,.inline-payment-steps li>span,.inline-payment-message{transition:none}}