/* A19 – kassen og ordrebekræftelsen. Bygger på cart.css (trin, valgbokse og totaler). */

/* ---------- Forenklet header og footer ---------- */
.co-header{background:var(--surface);border-bottom:1px solid var(--line)}
.co-header .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:72px;padding-block:8px}
.co-header .back{display:inline-flex;gap:6px;align-items:center;color:var(--ink);font-size:.92rem;text-underline-offset:3px;min-height:44px}
.co-header .back svg{width:18px;height:18px}
.co-header .brand{color:var(--ink)}
.co-header .logo{width:60px}
.co-header .secure{display:flex;gap:16px;align-items:center;font-size:.88rem;color:var(--muted)}
.co-header .secure span{display:inline-flex;gap:6px;align-items:center}
.co-header .secure svg{width:18px;height:18px;color:var(--star)}
.co-header .secure a{color:inherit;text-decoration:none}
.co-footer{border-top:1px solid var(--line);padding-block:22px;font-size:.88rem;color:var(--muted)}
.co-footer .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.co-footer a{color:var(--muted)}
.steps .n svg{width:14px;height:14px}
.steps{padding-bottom:18px}

/* ---------- Trin ---------- */
.co{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:40px;align-items:start;padding-bottom:72px}
.co>*{min-width:0}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:14px}
.panel-h{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 22px}
.panel-h h2{font-family:var(--font-body);font-weight:700;font-size:1.15rem;display:flex;gap:12px;align-items:center}
.panel-h h2 .n{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--tint);font-size:.85rem}
.panel.active .panel-h h2 .n{background:var(--forest);color:var(--on-forest)}
.panel.done .panel-h h2 .n{background:var(--tint-2);color:var(--star)}
.panel.done .panel-h h2 .n svg{width:14px;height:14px}
/* Låste trin dæmpes med tekstfarven (ikke opacity), så kontrasten holder 4,5:1. */
.panel.locked .panel-h h2{color:var(--muted)}
.panel-b{padding:0 22px 22px;display:grid;gap:16px}
.panel-b[hidden],.recap[hidden],.edit[hidden],.fld[hidden],.help[hidden],.addr-ac[hidden]{display:none!important}
.recap{padding:0 22px 18px 62px;color:var(--muted);font-size:.95rem;margin-top:-6px}
.recap b{color:var(--ink);font-weight:600}
.edit{font-weight:600;text-underline-offset:3px;min-height:40px;display:inline-flex;align-items:center}

/* ---------- Felter ---------- */
.login-hint{margin:0;font-size:.92rem;color:var(--muted)}
.fld{display:grid;gap:6px}
.fld label{font-weight:600;font-size:.95rem}
.fld .opt-note{font-weight:400;color:var(--muted)}
.fld .help{font-size:.84rem;color:var(--muted);margin:0}
.fld input,.fld textarea{width:100%;min-height:52px;border:2px solid var(--line);border-radius:12px;padding:0 14px;background:var(--bg);color:var(--ink);font:inherit;font-size:1rem}
.fld textarea{min-height:80px;padding:12px 14px;resize:vertical}
.fld input:focus,.fld textarea:focus{outline:none;border-color:var(--forest)}
:root[data-theme="dark"] .fld input:focus,:root[data-theme="dark"] .fld textarea:focus{border-color:var(--sun)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .fld input:focus,:root:not([data-theme="light"]) .fld textarea:focus{border-color:var(--sun)}}
.fld.err input{border-color:var(--sale)}
.fld.ok input{border-color:var(--star)}
/* Fokus skal kunne ses, også når feltet er markeret som udfyldt (grøn) eller fejl (rød). */
.fld.ok input:focus,.fld [aria-invalid="true"]:focus{box-shadow:0 0 0 2px var(--focus)}
.fld .msg{font-size:.86rem;color:var(--sale);margin:0}
.fld .msg:empty{display:none}
.fld .wrapin{position:relative}
.fld .tick{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--star);display:none}
.fld.ok .tick{display:block}
.row-zip{display:grid;grid-template-columns:140px minmax(0,1fr);gap:14px}
.country{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:.95rem;padding:12px 14px;border-radius:12px;background:var(--tint)}
.addr-wrap{position:relative}
.addr-ac{position:absolute;left:0;right:0;top:94px;z-index:10;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px;display:grid}
.addr-ac button{text-align:left;border:0;background:none;padding:10px 12px;border-radius:8px;cursor:pointer;min-height:44px;color:var(--ink);font:inherit}
.addr-ac button:hover,.addr-ac button.active{background:var(--tint)}
.addr-ac small{display:block;color:var(--muted);font-size:.8rem;padding:6px 12px 2px}
.check{display:flex;gap:12px;align-items:flex-start;cursor:pointer;font-size:.95rem}
.check input{width:22px;height:22px;flex:none;accent-color:var(--forest);margin-top:1px}
.check small{display:block;color:var(--muted);font-size:.85rem}
.reveal{border:0;background:none;padding:0;color:var(--link);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-size:.92rem;justify-self:start;min-height:44px}
.next{min-height:56px;font-size:1.05rem;width:100%}

.opts{display:grid;gap:10px;border:0;margin:0;padding:0;min-width:0}
.opts legend{font-weight:700;margin-bottom:8px;padding:0}
.paynote{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;color:var(--muted);background:var(--tint);border-radius:12px;padding:12px 14px;margin:0}
.paynote svg{width:20px;height:20px;flex:none;color:var(--forest)}
:root[data-theme="dark"] .paynote svg{color:var(--sun)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .paynote svg{color:var(--sun)}}
#payment{display:grid;gap:16px}
#payment .place-order{display:grid;gap:10px}
/* Afkrydsning for handelsbetingelserne lige over betalingsknappen. */
.terms-check{margin:0 0 14px}
.terms-check .msg{margin:6px 0 0 34px;color:var(--sale);font-size:.88rem}
.terms-check .msg:empty{display:none}
.terms-check input[aria-invalid="true"]{outline:2px solid var(--sale);outline-offset:2px}
.pay-err{background:#fde8e6;color:#7a1610;border-radius:12px;padding:14px;font-size:.95rem}
:root[data-theme="dark"] .pay-err{background:#3a1714;color:#ffd0c9}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .pay-err{background:#3a1714;color:#ffd0c9}}
.pay-err h1{font-size:1.6rem;margin-bottom:6px}
.pay-err p{margin:0}

/* WooCommerces fejlbeskeder øverst i formularen */
.woocommerce-NoticeGroup,.woocommerce-error,.woocommerce-message,.woocommerce-info{grid-column:1/-1}
.woocommerce-error,.woocommerce-message,.woocommerce-info{list-style:none;margin:0 0 14px;padding:14px 16px;border-radius:12px;font-size:.95rem}
.woocommerce-error{background:#fde8e6;color:#7a1610}
.woocommerce-message,.woocommerce-info{background:var(--tint-2);color:var(--ink)}
:root[data-theme="dark"] .woocommerce-error{background:#3a1714;color:#ffd0c9}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .woocommerce-error{background:#3a1714;color:#ffd0c9}}
.blockUI.blockOverlay{background:var(--surface)!important;opacity:.5!important}

/* ---------- Ordreoversigt ---------- */
.osum{position:sticky;top:20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;display:grid;gap:14px}
.osum h2{font-size:1.4rem}
.osum-body{display:grid;gap:14px}
.osum-toggle{display:none}
.oitems{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.oitems li{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:12px;align-items:center;font-size:.92rem}
.oitems .oimg{position:relative;width:56px;height:56px}
.oitems .oimg img,.oitems .oimg .ph{display:grid;width:56px;height:56px;border-radius:8px;object-fit:cover}
.oitems .ph svg{width:55%}
.oitems .q{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;border-radius:999px;background:var(--ink);color:var(--bg);font-size:.72rem;font-weight:700;display:grid;place-items:center;padding:0 5px}
.oitems small{display:block;color:var(--muted)}
.osum .edit-cart{font-size:.9rem;font-weight:600}

/* ---------- Bekræftelse ---------- */
.confirm{max-width:760px;padding-block:28px 72px;display:grid;gap:22px}
.confirm .hero-ok{display:flex;gap:16px;align-items:center}
.confirm .hero-ok .ok{width:56px;height:56px;border-radius:50%;background:var(--tint-2);color:var(--star);display:grid;place-items:center;flex:none}
.confirm .hero-ok .ok svg{width:28px;height:28px}
.confirm h1{font-size:clamp(2rem,1.5rem + 1.8vw,2.8rem)}
.confirm .lead{margin:6px 0 0;color:var(--muted)}
.box{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.box h2{font-family:var(--font-body);font-weight:700;font-size:1.1rem;margin-bottom:12px}
.box p{margin:0}
.box .oitems{margin-bottom:14px}
.timeline{list-style:none;margin:0;padding:0;display:grid;gap:0}
.timeline li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;padding-bottom:18px;position:relative}
.timeline li::before{content:"";position:absolute;left:13px;top:28px;bottom:0;width:2px;background:var(--line)}
.timeline li:last-child::before{display:none}
.timeline .dot{width:28px;height:28px;border-radius:50%;border:2px solid var(--line);background:var(--surface);display:grid;place-items:center;z-index:1}
.timeline .dot svg{width:14px;height:14px}
.timeline li.now .dot{border-color:var(--star);color:var(--star)}
.timeline b{display:block}
.timeline span{color:var(--muted);font-size:.92rem}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 24px;font-size:.95rem;margin:0}
.facts dt{color:var(--muted);font-size:.85rem}
.facts dd{margin:2px 0 0}
.acct{background:var(--tint)}
.acct p{margin:0 0 12px;color:var(--muted)}
.acct .field-row input{border:2px solid var(--line);min-height:50px}
.acct .form-msg{margin-top:8px}
.confirm .continue{justify-self:start}

@media (max-width:980px){
  .co{grid-template-columns:minmax(0,1fr)}
  .osum{position:static;order:-1;padding:0;gap:0;overflow:hidden}
  .osum-toggle{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;min-height:56px;padding:0 18px;border:0;background:var(--surface);color:var(--ink);font-weight:600;cursor:pointer;font-size:1rem}
  .osum-toggle b{font-variant-numeric:tabular-nums;margin-left:auto}
  .osum-toggle svg{width:18px;height:18px;transition:transform .2s}
  .osum-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
  .js .osum-body{display:none;padding:0 18px 18px}
  .js .osum-body.open{display:grid}
  .osum h2{display:none}
}
@media (max-width:600px){
  .row-zip{grid-template-columns:110px minmax(0,1fr)}
  .co-header .secure .ph-only{display:none}
  .panel-h,.panel-b{padding-left:16px;padding-right:16px}
  .recap{padding-left:16px}
  .facts{grid-template-columns:minmax(0,1fr)}
  .steps li:not([aria-current]) .lbl{display:none}
}

/* Vipps MobilePays »venter på betaling«-side */
.vipps-wait .cta-row{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.vipps-wait h1{font-size:clamp(1.8rem,1.4rem + 1.4vw,2.4rem)}