.netpay-page { padding-bottom: 5rem; }
.netpay-breadcrumb { display: flex; gap: .6rem; align-items: center; padding-top: 1.5rem; color: var(--muted); font-size: .86rem; }
.netpay-breadcrumb a { text-decoration: none; }
.netpay-breadcrumb a:hover { text-decoration: underline; }
.netpay-intro { max-width: 810px; padding: 2.1rem 0 2.2rem; }
.netpay-intro h1 { margin: .5rem 0 1rem; max-width: 830px; font-size: clamp(2.6rem,5.5vw,4.8rem); line-height: 1.04; letter-spacing:0; }
.netpay-intro > p:last-child { max-width: 730px; margin: 0; color: var(--muted); font-size: 1.06rem; }
.netpay-layout { display: grid; grid-template-columns: minmax(0,1.12fr) minmax(320px,.88fr); align-items: start; gap: 1.4rem; }
.netpay-form, .netpay-result { border-radius: 20px; box-shadow: var(--shadow); }
.netpay-form { padding: clamp(1.4rem,3vw,2.4rem); border: 1px solid var(--line); background: white; }
.netpay-form-head h2 { margin: 0; font-size: 1.8rem; }
.netpay-form-head p { max-width: 580px; margin: .35rem 0 1.7rem; color: var(--muted); font-size: .9rem; }
.netpay-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.1rem; }
.netpay-fields .field { display: grid; align-content: start; gap: .35rem; }
.netpay-fields .field[hidden] { display: none !important; }
.netpay-fields .netpay-full { grid-column: 1 / -1; }
.netpay-fields label { font-size: .92rem; font-weight: 600; line-height: 1.4; }
.netpay-fields input, .netpay-fields select { width: 100%; min-height: 48px; padding: .7rem .8rem; border: 1px solid #b9c8de; border-radius: 10px; background: #fff; color: var(--ink); }
.netpay-fields input:focus-visible, .netpay-fields select:focus-visible { outline: 3px solid #8fb9ff; outline-offset: 1px; }
.netpay-fields small { color: var(--muted); line-height: 1.45; }
.netpay-form-error { min-height: 1.4em; margin: 1rem 0 0; color: #a92323; font-size: .9rem; }
.netpay-result { position: sticky; top: 94px; padding: clamp(1.5rem,3vw,2.4rem); background: var(--ink); color: white; }
.netpay-result .eyebrow { color: var(--lime); }
.netpay-result h2 { margin: .6rem 0; font-size: clamp(1.5rem,2.4vw,2.1rem); line-height: 1.2; }
.netpay-result > p:not(.eyebrow) { color: #c9d3e3; }
.netpay-main-number { display: block; margin: 1.7rem 0 .2rem; color: var(--lime); font-size: clamp(2.7rem,5vw,4.5rem); letter-spacing:0; line-height: 1; }
.netpay-main-caption { color: #c9d3e3; font-size: .85rem; }
.netpay-breakdown { margin: 2rem 0; border-top: 1px solid #44516b; }
.netpay-breakdown div { display: flex; justify-content: space-between; gap: .8rem; padding: .7rem 0; border-bottom: 1px solid #44516b; }
.netpay-breakdown dt { color: #c9d3e3; font-size: .83rem; }
.netpay-breakdown dd { margin: 0; font-size: .86rem; font-weight: 600; white-space: nowrap; }
.netpay-warning { min-height: 5em; padding: 1rem; border: 1px solid #66748b; border-radius: 10px; font-size: .84rem; line-height: 1.55; }
.netpay-actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.netpay-actions .button { cursor: pointer; }
.netpay-actions button:disabled { opacity: .5; cursor: not-allowed; }
.netpay-result #np-save-status { min-height: 1.4em; margin-bottom: 0; font-size: .83rem; }
.netpay-method { max-width: 850px; margin: 4rem auto 0; padding-top: 2rem; border-top: 1px solid var(--line); }
.netpay-method h2 { margin-top: 0; }
.netpay-method h3 { margin-top: 2rem; }
.netpay-method p, .netpay-method li { color: #36465d; }
.netpay-method a { color: #24538d; }
@media (max-width: 860px) { .netpay-layout { grid-template-columns: 1fr; } .netpay-result { position: static; } }
@media (max-width: 550px) { .netpay-fields { grid-template-columns: 1fr; } .netpay-intro { padding-top: 1.4rem; } .netpay-breakdown div { align-items: start; } .netpay-breakdown dd { white-space: normal; text-align: right; } }
@media print { .site-header,.site-footer,.netpay-actions,.netpay-breadcrumb { display:none !important; } .netpay-layout { display:block; } .netpay-form,.netpay-result { box-shadow:none; break-inside:avoid; } .netpay-result { color:#111; background:white; border:1px solid #bbb; margin-top:1rem; } .netpay-result .eyebrow,.netpay-main-number { color:#111; } .netpay-result > p:not(.eyebrow),.netpay-breakdown dt,.netpay-main-caption { color:#333; } .netpay-warning { min-height:0; } .netpay-method { margin-top:1.5rem; } }