.payment-shell { width: min(100% - 2rem, 52rem); margin: 2rem auto 4rem; }
.payment-brand { display:flex; align-items:center; gap:.8rem; color:var(--ink); font-weight:700; text-decoration:none; margin-bottom:1.5rem; }
.payment-brand img { border-radius:50%; }
.payment-card { --payment-card-padding:clamp(1.2rem, 4vw, 2.5rem); padding:var(--payment-card-padding); background:var(--white); border:1px solid var(--line); border-radius:1.4rem; box-shadow:var(--shadow); }
.payment-card h1 { font-family:var(--font-display); font-size:clamp(1.9rem, 5vw, 2.8rem); line-height:1.2; margin:.4rem 0 1rem; }
.payment-card h2 { font-family:var(--font-display); margin:1.8rem 0 .6rem; }
.payment-card a { color:var(--lagoon-deep); }
.payment-card .btn-primary { color:white; }
.payment-actions { display:flex; gap:1rem; align-items:center; flex-wrap:wrap; margin:1.5rem 0; }
.payment-small { font-size:.85rem; color:var(--ink-soft); }
.card-acceptance { display:flex; align-items:center; flex-wrap:wrap; gap:.6rem; width:fit-content; max-width:100%; padding:.4rem .7rem; border:1px solid var(--line); border-radius:.75rem; background:#fff; }
.card-acceptance-label { color:var(--ink-soft); font-size:.82rem; font-weight:600; }
.card-acceptance-logo { display:block; flex:none; width:72px; height:44px; object-fit:contain; }
.card-acceptance-logo[hidden] { display:none; }
.powertranz-logo { max-width:216px; height:auto; margin:1.25rem 0; background:white; }
.payment-notice { background:#fff2d4; border-left:4px solid var(--honey); padding:.8rem 1rem; }
#hosted-payment { width:100%; min-height:640px; border:0; background:white; }
/* ACS sizes are chosen from the browser width. Give the secure frame that
   width on phones, without taking it away again through shell/card padding. */
.payment-shell--checkout { width:min(100%, 52rem); }
.payment-shell--checkout .payment-brand { margin-left:1rem; margin-right:1rem; }
.payment-card--checkout #hosted-payment { width:calc(100% + var(--payment-card-padding) + var(--payment-card-padding) + 2px); margin-left:calc(0px - var(--payment-card-padding) - 1px); margin-top:1.25rem; margin-bottom:1.25rem; }
.payment-card--checkout #hosted-payment:not([hidden]) { display:block; }
.payment-receipt { margin:1.5rem 0; }
.payment-receipt div { display:grid; grid-template-columns:minmax(7rem, 1fr) minmax(0, 2fr); gap:1rem; padding:.7rem 0; border-bottom:1px solid var(--line); }
.payment-receipt dt { color:var(--ink-soft); }
.payment-receipt dd { margin:0; overflow-wrap:anywhere; font-weight:600; }
.payment-card [hidden], [data-payment-review][hidden] { display:none; }
[data-payment-review] { margin:1rem 0; padding:1rem; border:1px solid var(--line); border-radius:1rem; background:var(--white); }
[data-payment-review] p { margin:.5rem 0; }
[data-payment-review] label { display:flex; align-items:flex-start; gap:.75rem; margin-top:1rem; }
[data-payment-review] input { width:1.25rem; height:1.25rem; flex-shrink:0; margin-top:.2rem; }
@media print { body { background:white; } .payment-actions, .payment-brand, .powertranz-logo { display:none; } .payment-card { box-shadow:none; border:0; padding:0; } .payment-shell { width:100%; margin:0; } }