.payment-checkout{width:min(880px,calc(100vw - 28px));max-height:calc(100dvh - 28px);overflow:auto;padding:clamp(20px,4vw,36px);border:0;border-radius:18px;color:#253044;background:#fff;box-shadow:0 16px 70px #0005;font:15px/1.5 system-ui,sans-serif}
.payment-checkout::backdrop{background:#101820a8}
.payment-checkout h2{margin:2px 38px 0 0;color:#173b60;font-size:clamp(25px,4vw,32px);line-height:1.2}
.payment-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}
.payment-kicker{display:block;color:#178c8b;font-size:11px;font-weight:800;letter-spacing:.1em}
.payment-checkout h3{margin:0 0 18px;color:#173b60;font-size:19px}
.payment-checkout p{margin:12px 0}
.payment-checkout label{display:block;margin:14px 0;font-weight:650}
.payment-checkout input,.payment-checkout textarea{display:block;width:100%;margin-top:6px;padding:12px 13px;border:1px solid #c9d2dc;border-radius:9px;background:#fff;color:#253044;font:inherit}
.payment-checkout input:focus,.payment-checkout textarea:focus{outline:3px solid #0067b133;border-color:#0067b1}
.payment-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:22px;align-items:start}
.payment-order,.payment-buyer{min-width:0;padding:22px;border:1px solid #e0e6ec;border-radius:13px;background:#f8fafc}
.payment-order-items{display:grid;gap:0;margin:0;padding:0;list-style:none}
.payment-order-items li{display:flex;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid #e4e9ef}
.payment-order-items li>div{display:grid;gap:4px;min-width:0}
.payment-order-items li strong{font-size:14px}
.payment-order-items li span{color:#667486;font-size:12px;overflow-wrap:anywhere}
.payment-line-total{flex:0 0 auto;white-space:nowrap}
.payment-total{display:flex;justify-content:space-between;gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid #d5dee7;color:#173b60;font-size:16px}
.payment-total strong{font-size:20px}
.payment-checkout .payment-total-note{color:#657387;font-size:12px}
.payment-checkout textarea{resize:vertical;overflow-wrap:anywhere}
.payment-checkout .payment-consent{display:flex;align-items:flex-start;gap:8px;font-weight:450}
.payment-checkout .payment-consent input{width:18px;height:18px;flex:0 0 18px;margin:2px 0}
.payment-disclaimer{padding:10px;border-radius:8px;background:#fff5d8;color:#654600;font-size:13px}
.payment-close{width:38px;height:38px;flex:0 0 38px;border:0;border-radius:50%;background:#eef1f4;color:#34465b;font-size:24px;cursor:pointer}
.payment-submit,.payment-copy{width:100%;min-height:48px;padding:12px 16px;border:0;border-radius:9px;background:#0067b1;color:#fff;font:700 15px system-ui,sans-serif;cursor:pointer}
.payment-submit:hover:not(:disabled),.payment-copy:hover{background:#00558f}
.payment-submit:disabled{opacity:.6;cursor:not-allowed}
.payment-error{padding:12px;border-radius:8px;background:#fff0f0;color:#a12727}
.payment-checkout [hidden]{display:none!important}
.payment-result{max-width:560px;margin:0 auto}
.payment-result .payment-header{margin-bottom:12px}
.payment-order-reference,.payment-operator,.payment-customer-details,.payment-result-total{color:#47566a}
.payment-result-total{font-size:18px;font-weight:750}
.payment-qr-card{padding:18px;border:1px solid #e0e6ec;border-radius:12px;text-align:center}
.payment-qr-card h3{margin-bottom:10px}
.payment-qr{display:block;width:240px;height:240px;max-width:100%;margin:10px auto;object-fit:contain}
.payment-status{padding:14px;border:1px solid #cde2ee;border-radius:9px;background:#edf5fa;font-weight:650}
.payment-checkout .payment-status--plain{padding:0;border:0;border-radius:0;background:transparent;font-weight:400}
.payment-show-numbers{width:100%;min-height:48px;padding:12px 16px;border:0;border-radius:9px;background:#0067b1;color:#fff;font:700 15px system-ui,sans-serif;cursor:pointer}
.payment-show-numbers:hover{background:#00558f}
.payment-show-numbers:focus-visible{outline:3px solid #0067b1;outline-offset:3px}
.payment-checkout #payment-selected-numbers{margin-top:24px;padding:20px;border:1px solid #d8d9de;border-radius:9px;background:#fff}
.payment-selected-items{padding:0;list-style:none;overflow-wrap:anywhere}
.payment-selected-items li{padding:12px 0;border-bottom:1px solid #e4e9ef}
.payment-checkout .payment-selected-items p{margin:6px 0 0;font-variant-numeric:tabular-nums}
.payment-legal{font-size:13px;color:#586779}
.payment-legal a{color:#145c9e;text-decoration:underline}
.payment-expiry{color:#586779;font-size:13px}
.admin-login{max-width:560px;margin:20px auto;padding:24px}
.admin-login form label{display:block;margin:16px 0;font-weight:650}
.admin-login input{display:block;width:100%;margin-top:6px;padding:11px;border:1px solid #bbc5d1;border-radius:8px}
.admin-login button{min-height:42px}
.admin-error{color:#a12727}
@media(max-width:640px){.payment-checkout{width:calc(100vw - 20px);max-height:calc(100dvh - 20px);padding:20px 16px;border-radius:14px}.payment-layout{grid-template-columns:1fr;gap:14px}.payment-order,.payment-buyer{padding:17px}.payment-order-items li{gap:8px}.payment-qr{width:210px;height:210px}}

/* Checkout presented as a full page, while retaining the existing payment flow. */
body:has(.payment-checkout[open]){overflow:hidden}
.payment-checkout{width:100%;max-width:none;height:100dvh;max-height:100dvh;inset:0;margin:0;padding:0;border-radius:0;overscroll-behavior:contain;font-family:var(--font-text,Arial,sans-serif)}
.payment-back:focus-visible{outline:3px solid #ffce00;outline-offset:4px}
.payment-hero{overflow:hidden;background:linear-gradient(134deg,#0067b1 0%,#0067b1 48%,#198aaf 48.1%,#30a8ad 100%);color:#fff}
.payment-hero-inner{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px;align-items:center;width:88%;max-width:1670px;min-height:440px;margin:auto;padding:40px 0 0}
.payment-hero-copy{min-width:0;padding-bottom:48px}
.payment-navigation{width:88%;max-width:1670px;margin:0 auto;border-bottom:1px solid #ffffff25}
.payment-navigation summary{position:relative;min-height:54px;padding:12px 36px;list-style:none;text-align:center;font-size:22px;cursor:pointer}
.payment-navigation summary::-webkit-details-marker{display:none}
.payment-navigation summary>span:first-child{position:absolute;left:0;top:8px;font:30px/1.2 Arial,sans-serif}
.payment-navigation nav{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;padding:8px 0 18px}
.payment-navigation button,.payment-hero-cart button{border:0;background:transparent;color:inherit;font:400 17px/1.4 var(--font-text,Arial,sans-serif);cursor:pointer}
.payment-navigation button{padding:10px 16px;border:1px solid #b5dce8;border-radius:2px}
.payment-hero-cart{display:inline-flex;max-width:100%;margin-bottom:28px;border:1px solid #b5dce8;border-radius:2px;color:#fff}
.payment-hero-cart button{display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:10px 14px}
.payment-hero-cart button+button{border-left:1px solid #b5dce8}
.payment-navigation :is(button,summary):focus-visible,.payment-hero-cart button:focus-visible{outline:3px solid #ffce00;outline-offset:3px}
.payment-checkout .payment-hero h2{margin:0;color:#fff;font:900 clamp(48px,4.6vw,80px)/1.08 var(--font-display,'Arial Black',sans-serif);letter-spacing:-.035em}
.payment-checkout .payment-hero p{max-width:600px;margin:28px 0 16px;font-size:clamp(18px,1.5vw,24px);font-weight:400;line-height:1.4}
.payment-hero-art{display:block;align-self:end;width:100%;max-width:none;height:auto;margin:0}
.payment-checkout .payment-form{width:min(1160px,calc(100% - 48px));margin:0 auto;padding:48px 0 64px}
.payment-checkout .payment-form[hidden]{display:none}
.payment-checkout .payment-form h2{color:#242c45;font:900 clamp(30px,4vw,46px)/1.15 var(--font-display,'Arial Black',sans-serif);letter-spacing:-.025em}
.payment-checkout .payment-intro{margin:14px 0 0;color:#657387;font-size:16px}
.payment-method{display:flex;align-items:center;gap:14px;margin:24px 0;padding:18px 22px;border:2px solid #168f9e;border-radius:10px;background:#f1fafb;color:#173b60}
.payment-method-icon{font-size:38px;line-height:1;color:#168f9e}
.payment-method>div{display:grid;gap:3px}
.payment-method strong{font-size:19px}
.payment-method>div>span{color:#586779;font-size:13px}
.payment-method-selected{margin-left:auto;color:#08777e;font-size:12px;font-weight:700}
.payment-checkout .payment-result{width:min(560px,calc(100% - 40px));padding:36px 0 64px}
@media(max-width:640px){
  .payment-hero-inner{display:flex;flex-direction:column;gap:0;width:100%;min-height:0;padding:32px 0 0;text-align:center}
  .payment-hero-copy{width:100%;padding:0 24px 24px}
  .payment-hero-cart{margin-bottom:24px}
  .payment-hero-cart button{min-height:44px;padding:8px 14px;font-size:16px}
  .payment-checkout .payment-hero h2{font-size:clamp(48px,13.6vw,72px)}
  .payment-checkout .payment-hero p{margin:28px auto 16px;font-size:clamp(17px,4.6vw,22px)}
  .payment-hero-art{align-self:center;width:100%;max-width:none;margin:12px 0 0}
  .payment-checkout .payment-form{width:calc(100% - 40px);padding:34px 0 48px}
  .payment-checkout .payment-form h2{margin-right:0;font-size:clamp(28px,7vw,40px)}
  .payment-checkout .payment-intro{font-size:14px}
  .payment-method{gap:10px;padding:14px}
  .payment-method-selected{font-size:10px}
}

/* Payment selection and PIX receipt follow the same single-panel layout. */
.payment-checkout .payment-form,.payment-checkout .payment-result{width:min(1000px,calc(100% - 48px));max-width:none;margin:0 auto;padding:48px 0 64px}
.payment-checkout .payment-result h2{color:#242c45;font:900 clamp(30px,4vw,46px)/1.15 var(--font-display,'Arial Black',sans-serif);letter-spacing:-.025em}
.payment-checkout .payment-cart-heading{margin:28px 0;color:#242c45;font:900 clamp(28px,4vw,42px)/1.2 var(--font-display,'Arial Black',sans-serif);letter-spacing:-.025em}
.payment-layout{display:flex;flex-direction:column;gap:0;padding:32px;border-radius:10px;background:#f4f4f6}
.payment-checkout .payment-buyer,.payment-checkout .payment-order{width:100%;padding:0;border:0;border-radius:0;background:transparent}
.payment-buyer{order:0}
.payment-order{order:1;margin-top:32px;padding-top:26px!important;border-top:1px solid #d9dbe1!important}
.payment-checkout .payment-buyer h3,.payment-checkout .payment-result-panel>h3{margin:0 0 28px;color:#555969;font:900 clamp(20px,2.8vw,30px)/1.3 var(--font-display,'Arial Black',sans-serif)}
.payment-checkout .payment-buyer>label:not(.payment-consent){margin:22px 0;color:#555969;font-size:clamp(18px,2.6vw,26px);font-weight:700}
.payment-checkout .payment-buyer input:not([type=checkbox]){min-height:50px;font-size:18px;font-weight:400}
.payment-checkout .payment-buyer .payment-choice-heading{margin-top:32px}
.payment-checkout .payment-method-title{margin:28px 0 20px;color:#555969;font:900 clamp(20px,2.8vw,28px)/1.3 var(--font-display,'Arial Black',sans-serif)}
.payment-option{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:76px;padding:18px 24px;border:1px solid #d8d9de;border-radius:5px;background:#fff;color:#555969;box-shadow:0 2px 3px #0000000a;text-align:left;font:700 18px/1.4 var(--font-text,Arial,sans-serif)}
.payment-checkout .payment-submit.payment-option{background:#fff;color:#555969;border:1px solid #d8d9de;font-family:var(--font-text,Arial,sans-serif)}
.payment-checkout .payment-submit.payment-option:hover:not(:disabled){background:#f0faf8;border-color:#50b6a7}
.payment-option:focus-visible{outline:3px solid #0067b1;outline-offset:3px}
.payment-pix-brand{display:flex;align-items:center;gap:7px;color:#7f898b;font:400 34px/1 var(--font-text,Arial,sans-serif)}
.payment-pix-brand>span{color:#50b6a7;font-size:40px}
.payment-option-caption{margin-left:auto;font-size:13px;font-weight:400}
.payment-option-arrow{color:#4267cf;font:bold 42px/1 Arial,sans-serif}
.payment-result-panel{padding:32px;border-radius:10px;background:#f4f4f6}
.payment-pix-banner{margin-bottom:32px}
.payment-checkout .payment-customer-details{margin:0 0 32px;color:#555969;font:700 clamp(18px,2.6vw,28px)/1.5 var(--font-text,Arial,sans-serif)}
.payment-customer-details dt{margin:18px 0 8px}
.payment-customer-details dd{margin:0;overflow-wrap:anywhere}
.payment-customer-name{text-transform:uppercase}
.payment-checkout .payment-qr-card{padding:28px;border:1px solid #d8d9de;border-radius:5px;background:#fff}
.payment-checkout .payment-qr-card h3{margin:0 0 24px;color:#242c45;font:900 clamp(20px,2.8vw,28px)/1.25 var(--font-display,'Arial Black',sans-serif)}
.payment-checkout .payment-qr{width:min(100%,350px);height:auto;aspect-ratio:1;margin:28px auto 36px;image-rendering:pixelated}
.payment-checkout .payment-copy-help{margin:0 0 22px;color:#555969;font-size:clamp(16px,2.4vw,23px);line-height:1.5}
.payment-checkout .payment-qr-card label{text-align:left;font-size:14px}
.payment-checkout .payment-result-total{display:flex;justify-content:space-between;font-size:24px}
@media(max-width:640px){
  .payment-checkout .payment-form,.payment-checkout .payment-result{width:calc(100% - 40px);padding:34px 0 48px}
  .payment-layout,.payment-result-panel{padding:20px 14px}
  .payment-checkout .payment-cart-heading{margin:24px 0}
  .payment-option{min-height:64px;gap:8px;padding:12px 14px}
  .payment-pix-brand{font-size:29px}
  .payment-pix-brand>span{font-size:34px}
  .payment-option-caption{max-width:130px;font-size:11px}
  .payment-checkout .payment-qr-card{padding:22px 14px}
  .payment-checkout .payment-qr{margin:24px auto 30px}
  .payment-checkout .payment-buyer h3,.payment-checkout .payment-result-panel>h3{margin-bottom:24px}
}