/* Agbu Mail — order page. Builds on ../home.css tokens, buttons, nav and themes. */
[hidden]{display:none!important}
.order-page{background:linear-gradient(var(--paper),var(--sand) 520px,var(--paper))}
.order-page .nav{position:sticky}
.order{padding-block:36px 80px}
.order-head{max-width:720px}
.back-link{display:inline-flex;gap:8px;text-decoration:none;font-size:14px;font-weight:600;color:var(--text-2)}
.back-link:hover{color:var(--orange-deep)}
.order-head h1{margin:14px 0 8px;font-size:clamp(40px,5vw,60px);font-weight:400;letter-spacing:-.015em}
.order-head p{margin:0;color:var(--muted);font-size:17px}

.stepper{list-style:none;display:flex;gap:8px;margin:28px 0 24px;padding:0;overflow-x:auto;scroll-margin-top:90px}
.stepper li{display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border-radius:99px;border:1px solid var(--line);background:var(--card);color:var(--muted);font-size:14px;white-space:nowrap}
.stepper li span{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--sand);font-weight:700;font-size:13px}
.stepper li b{font-weight:600}
.stepper li.active{border-color:var(--orange);color:var(--ink)}
.stepper li.active span{background:var(--orange);color:#031530}
.stepper li.done span{background:var(--forest);color:#fff}
.stepper li.done span{font-size:0}
.stepper li.done span:after{content:"✓";font-size:13px}

.order-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:28px;align-items:start}
.order-form{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:32px;box-shadow:0 24px 50px -30px var(--shadow)}
.step h2{font-size:32px;outline:none}
.step-lede{margin:8px 0 0;color:var(--muted)}
.step h3.sub{font-size:17px;margin:28px 0 12px}

.plan-options,.pay-options{display:grid;gap:12px;margin-top:22px}
.plan-option,.pay-option{position:relative;display:flex;gap:14px;align-items:flex-start;padding:18px;border:1.5px solid var(--line);border-radius:16px;cursor:pointer;transition:border-color .15s,background .15s}
.plan-option:hover,.pay-option:hover{border-color:#e7b894}
.plan-option:has(input:checked),.pay-option:has(input:checked){border-color:var(--orange);background:color-mix(in srgb,var(--orange) 7%,var(--card))}
.plan-option input,.pay-option input{margin-top:4px;accent-color:var(--orange);width:18px;height:18px;flex-shrink:0}
.po-body{display:grid;gap:3px;flex:1;min-width:0}
.po-body strong{font-size:17px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.po-body strong em{font-style:normal;font-size:11px;font-weight:700;background:var(--ochre);color:#031530;border-radius:99px;padding:2px 9px}
.po-price{font-family:var(--body);font-weight:600;font-variant-numeric:tabular-nums;color:var(--orange-deep)}
.po-body small{color:var(--muted);font-size:13px}

.field-group{margin-top:24px}
.group-label{display:block;font-size:13px;font-weight:700;color:var(--text-2);margin-bottom:8px}
.segmented{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border:1px solid var(--line);border-radius:14px;background:var(--sand)}
.segmented label{cursor:pointer}
.segmented input{position:absolute;opacity:0;pointer-events:none}
.segmented label>span{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:10px;font-weight:600;font-size:14px;color:var(--text-2)}
.segmented input:checked+span{background:var(--card);color:var(--ink);box-shadow:0 2px 8px #0315301a}
.segmented input:focus-visible+span{outline:3px solid #fd812799}
.segmented em{font-style:normal;font-size:11px;font-weight:700;background:#e4f1ea;color:var(--forest);padding:2px 8px;border-radius:99px}
.segmented.wide{display:flex}
.segmented.wide label{flex:1}
.segmented.wide label>span{justify-content:center;width:100%;text-align:center}

.counters{display:grid;gap:10px;margin-top:24px}
.counter{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;border:1px solid var(--line);border-radius:14px}
.counter strong{display:block;font-size:15px}
.counter small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.stepper-input{display:flex;align-items:center;border:1px solid var(--line);border-radius:11px;overflow:hidden;flex-shrink:0}
.stepper-input button{width:38px;height:38px;border:0;background:var(--sand);color:var(--ink);font-size:18px}
.stepper-input button:hover{color:var(--orange-deep)}
.stepper-input input{width:56px;height:38px;border:0;text-align:center;font:600 15px var(--body);background:var(--card);color:var(--ink);-moz-appearance:textfield}
.stepper-input input::-webkit-outer-spin-button,.stepper-input input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.corporate-note{margin:18px 0 0;padding:14px 16px;border-radius:12px;background:var(--sand);color:var(--warm-text);font-size:14px;line-height:1.55}

.fields{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;margin-top:18px}
.fld{position:relative;display:flex;flex-direction:column;gap:6px}
.fld.span-2{grid-column:1/-1}
.fld>span{font-size:13px;font-weight:600;color:var(--text-2)}
.fld input,.fld textarea{width:100%;padding:12px 14px;border:1px solid var(--btn-line,#dccfbd);border-radius:11px;background:var(--paper);color:var(--ink);font:15px var(--body);transition:border-color .15s,box-shadow .15s}
.fld textarea{resize:vertical;min-height:88px}
.fld input:focus,.fld textarea:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 4px #fd812726}
.fld input::placeholder,.fld textarea::placeholder{color:#a19686}
.opt{position:absolute;right:0;top:0;font-style:normal;font-size:11px;color:var(--muted)}
#domain-field{margin-top:14px}
.notes{margin-top:22px}

.pay-details{margin-top:14px;padding:16px 18px;border-radius:14px;background:var(--sand);font-size:14px;line-height:1.55;color:var(--warm-text)}
.pay-details:empty{display:none}
.pay-details p{margin:8px 0 0}
.pay-details p:first-child{margin:0}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0}
.kv dt{font-weight:600;color:var(--text-2)}
.kv dd{margin:0}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.02em}

.review{display:grid;gap:10px;margin-top:20px}
.rv{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:16px 18px;border:1px solid var(--line);border-radius:14px}
.rv h3{font-family:var(--body);font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 6px}
.rv p{margin:0;line-height:1.55}
.rv-total{background:var(--sand);border-color:transparent;display:block}
.rv-total strong{font-family:var(--body);font-weight:600;font-size:24px;letter-spacing:-.02em}
.muted{color:var(--muted)}
.edit{border:0;background:none;color:var(--orange-deep);font-weight:600;font-size:14px;padding:2px}
.edit:hover{text-decoration:underline}
.confirm{display:flex;gap:12px;align-items:flex-start;margin-top:20px;font-size:14px;line-height:1.55;color:var(--text-2);cursor:pointer}
.confirm input{margin-top:3px;width:18px;height:18px;accent-color:var(--orange);flex-shrink:0}

.form-error{min-height:22px;margin-top:18px;color:#bd361e;font-size:14px;font-weight:500}
.step-actions{display:flex;justify-content:space-between;gap:12px;margin-top:6px}
.step-actions .btn[hidden]{display:none}
.step-actions #next-step,.step-actions #submit-order{margin-left:auto}
.btn:disabled{opacity:.65;cursor:wait}

.summary{position:sticky;top:92px;display:grid;gap:14px}
.summary-card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:24px;box-shadow:0 24px 50px -30px var(--shadow)}
.summary-card h2{font-size:26px;margin-bottom:14px}
.sum-line{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--hairline);font-size:14px}
.sum-line strong{display:block;font-weight:600}
.sum-line small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.sum-line>span{white-space:nowrap;font-variant-numeric:tabular-nums}
.sum-line em{font-style:normal;color:var(--forest);font-weight:600}
.sum-totals{display:grid;gap:8px;padding-top:14px;font-size:14px}
.sum-totals>div{display:flex;justify-content:space-between;gap:12px;font-variant-numeric:tabular-nums}
.sum-totals>div>span:first-child{color:var(--muted)}
.sum-total{margin-top:6px;padding-top:12px;border-top:1px solid var(--line);align-items:flex-end}
.sum-total>span:first-child{color:var(--ink)!important;font-weight:700}
.sum-total small{display:block;font-weight:500;color:var(--muted);font-size:12px}
.sum-total>span:last-child{font-family:var(--body);font-weight:600;font-size:26px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.sum-renew{margin:14px 0 0;padding:10px 12px;border-radius:10px;background:var(--sand);font-size:13px;color:var(--warm-text)}
.sum-plan strong{display:block;font-family:var(--display);font-size:20px}
.sum-plan span{color:var(--muted);font-size:14px}
.sum-custom{margin-top:12px;font-size:14px;line-height:1.55}
.summary-fine{margin:14px 0 0;font-size:12px;color:var(--muted)}
.summary-help{padding:16px 20px;border-radius:16px;border:1px dashed var(--line);font-size:14px}
.summary-help p{margin:4px 0 0;color:var(--muted)}
.summary-help a{color:var(--orange-deep);font-weight:600;overflow-wrap:anywhere}

/* Confirmation */
.confirmation{padding-top:8px}
.conf-head{display:flex;gap:18px;align-items:flex-start;padding:26px 28px;border-radius:22px;border:1px solid var(--line);background:var(--card)}
.conf-head h1{font-size:clamp(28px,3.4vw,38px);outline:none}
.conf-head p{margin:8px 0 0;color:var(--muted);font-size:16px;line-height:1.55}
.conf-icon{flex-shrink:0;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:24px;font-weight:800}
.conf-head.ok .conf-icon{background:#e4f1ea;color:var(--forest)}
.conf-head.warn{border-color:#f3c89f}
.conf-head.warn .conf-icon{background:var(--tint);color:var(--orange-deep)}
.conf-actions{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 26px}
.conf-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}
.doc{background:#fff;color:#031530;border:1px solid #e6dccd;border-radius:18px;padding:34px;box-shadow:0 24px 50px -30px #03153040}
.doc-head{display:flex;justify-content:space-between;gap:20px;padding-bottom:22px;border-bottom:3px solid #FD8127}
.doc-brand{display:flex;gap:12px;align-items:center}
.doc-brand strong{display:block;font-family:var(--display);font-size:20px}
.doc-brand small,.doc small{display:block;color:#5b6678;font-size:12px}
.doc-ref{text-align:right}
.doc-ref strong{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:17px;margin:2px 0}
.doc-parties{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:22px 0}
.doc-parties strong{display:block;margin:4px 0 2px}
.doc-parties span{display:block;font-size:14px;color:#33445e}
.doc-lines{width:100%;border-collapse:collapse;font-size:14px}
.doc-lines th{text-align:left;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#5b6678;padding:10px 0;border-bottom:1px solid #e6dccd}
.doc-lines td{padding:12px 0;border-bottom:1px solid #f0ece5;vertical-align:top}
.doc-lines td small{margin-top:2px}
.doc-lines .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;padding-left:16px}
.doc-lines tfoot td{border:0;padding:6px 0;color:#33445e}
.doc-lines tfoot tr:first-child td{padding-top:14px}
.doc-lines .grand td{padding-top:12px;border-top:2px solid #031530;font-weight:700;color:#031530;font-size:16px}
.doc-lines .grand small{display:inline;font-weight:500}
.doc-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px;padding:16px;border-radius:12px;background:#F7EFE4;font-size:13px}
.doc-meta span{display:block;margin-top:3px}
.doc-fine{margin:18px 0 0;font-size:12px;color:#5b6678;line-height:1.55}
.next{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px}
.next h2{font-size:20px}
.timeline{list-style:none;margin:18px 0 0;padding:0;counter-reset:step;display:grid;gap:18px}
.timeline li{position:relative;padding-left:44px;counter-increment:step}
.timeline li:before{content:counter(step);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--tint);color:var(--orange-deep);font-weight:700;font-size:14px}
.timeline li:not(:last-child):after{content:"";position:absolute;left:14.5px;top:34px;bottom:-16px;width:1px;background:var(--line)}
.timeline strong{display:block}
.timeline span{display:block;color:var(--muted);font-size:14px;line-height:1.5;margin-top:2px}
.order-footer .footer-bottom{border-top:0}
.order-footer a{text-decoration:none}
.order-footer a:hover{color:var(--orange)}

@media (max-width:980px){
  .order-grid,.conf-grid{grid-template-columns:1fr}
  .summary{position:static}
}
@media (max-width:640px){
  .order{padding-block:24px 56px}
  .order-form{padding:22px 18px;border-radius:18px}
  .fields{grid-template-columns:1fr}
  .stepper li b{display:none}
  .stepper li{padding:6px}
  .counter{flex-wrap:wrap}
  .doc{padding:22px 18px}
  .doc-head{flex-direction:column}
  .doc-ref{text-align:left}
  .doc-parties,.doc-meta{grid-template-columns:1fr}
  .conf-head{padding:20px}
  .conf-actions .btn{flex:1 1 100%}
  .step-actions .btn{flex:1}
}

[data-theme="dark"] .order-page{background:linear-gradient(var(--paper),var(--sand) 520px,var(--paper))}
[data-theme="dark"] .stepper li span{background:#1b2c44}
[data-theme="dark"] .stepper li.done span{background:#2f8a63}
[data-theme="dark"] .plan-option:hover,[data-theme="dark"] .pay-option:hover{border-color:#6b4a2f}
[data-theme="dark"] .segmented input:checked+span{box-shadow:0 2px 8px #0008}
[data-theme="dark"] .segmented em,[data-theme="dark"] .conf-head.ok .conf-icon{background:#143326;color:#6fd3a4}
[data-theme="dark"] .fld input::placeholder,[data-theme="dark"] .fld textarea::placeholder{color:#6f8199}
[data-theme="dark"] .form-error{color:#ff8a73}
[data-theme="dark"] .conf-head.warn{border-color:#6b4a2f}
[data-theme="dark"] .stepper-input button{background:#13233a}

@media print{
  @page{margin:14mm}
  html,body{background:#fff!important}
  .pattern-band,.nav,.order-footer,.conf-head,.conf-actions,.next,.order-head,.stepper,.order-grid{display:none!important}
  .order{padding:0;max-width:none}
  .conf-grid{display:block}
  .doc{border:0;box-shadow:none;padding:0;border-radius:0}
}