:root { color-scheme: light; --ink:#1d1d1f; --muted:#6e6e73; --blue:#0071e3; --line:#d2d2d7; --bg:#f5f5f7; --orange:#ff5b24; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
.page { width:min(720px, calc(100% - 32px)); margin:0 auto; padding:64px 0 80px; }
.hero { text-align:center; margin-bottom:42px; }
.eyebrow { color:var(--blue); font-size:14px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
h1 { font-size:clamp(42px,9vw,64px); letter-spacing:-.055em; line-height:1; margin:10px 0 14px; }
.hero>p:last-child,.hint { color:var(--muted); }
.hero>p.deadline{display:inline-block;margin:10px 0 0;padding:8px 13px;background:#fff;border-radius:999px;color:var(--ink);font-size:14px;box-shadow:0 1px 4px #00000010}
.card,.summary { background:#fff; border-radius:22px; box-shadow:0 1px 2px #0000000a,0 10px 35px #0000000d; margin:18px 0; padding:30px; }
.card h2 { display:inline; font-size:22px; letter-spacing:-.02em; }
.step { display:inline-grid; place-items:center; width:28px; height:28px; margin-right:8px; border-radius:50%; background:var(--ink); color:white; font-weight:700; }
.grid.two { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
label { display:block; font-size:14px; font-weight:650; margin-top:22px; }
input:not([type=checkbox]):not([type=radio]) { width:100%; font:inherit; font-size:17px; margin-top:8px; padding:14px; border:1px solid var(--line); border-radius:12px; outline:none; }
input:focus { border-color:var(--blue)!important; box-shadow:0 0 0 4px #0071e326; }
.choices { display:grid; gap:10px; margin-top:20px; }
.choice { display:flex; align-items:center; gap:14px; margin:0; padding:16px; border:1px solid var(--line); border-radius:15px; cursor:pointer; }
.choice:has(input:checked) { border-color:var(--blue); background:#0071e308; box-shadow:0 0 0 1px var(--blue); }
.choice input { width:20px; height:20px; margin:0; accent-color:var(--blue); flex:none; }
.choice span { display:flex; flex-direction:column; gap:3px; flex:1; }
.choice small { color:var(--muted); font-weight:450; }
.choice strong { font-size:14px; }
.discount { color:var(--muted); font-size:13px; margin:12px 4px 0; }
.vipps { align-self:flex-start; background:var(--orange); color:white; font-style:normal; font-size:12px; border-radius:6px; padding:3px 7px; text-transform:uppercase; letter-spacing:.04em; }
.choice b { display:flex; align-items:center; gap:8px; }.choice em { color:var(--ink); font-style:normal; font-weight:650; }
.vipps-note { color:#237a3b!important; }
.summary h2 { margin-top:0; }
dl { margin:0; } dl div { display:flex; justify-content:space-between; padding:9px 0; } dd { margin:0; font-variant-numeric:tabular-nums; }
.total { border-top:1px solid var(--line); margin-top:8px; padding-top:18px!important; font-size:22px; font-weight:750; }
button { width:100%; border:0; border-radius:14px; padding:16px; margin-top:22px; background:var(--blue); color:white; font:inherit; font-size:17px; font-weight:700; cursor:pointer; }
button:hover { background:#0077ed; } button:disabled { cursor:wait; opacity:.65; }
.text-button{width:auto;background:transparent;color:var(--blue);padding:0;margin:17px 0 0;font-size:15px;font-weight:650;text-align:left}.text-button:hover{background:transparent;text-decoration:underline}.allergy-summary{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.allergy-chip{display:inline-flex;align-items:center;gap:8px;background:#f2f2f7;border-radius:999px;padding:7px 8px 7px 12px;font-size:14px}.allergy-chip button{display:grid;place-items:center;width:25px;height:25px;margin:0;padding:0;background:#dedee3;color:#555;border-radius:50%;font-size:14px;line-height:1}.allergy-chip button:hover{background:#d2d2d7;color:#b00020}
dialog{width:min(500px,calc(100% - 28px));border:0;border-radius:22px;padding:0;box-shadow:0 24px 80px #0005;color:var(--ink)}dialog::backdrop{background:#0006;backdrop-filter:blur(4px)}dialog form{padding:28px}.dialog-head{display:flex;justify-content:space-between;align-items:flex-start}.dialog-head h2,.dialog-head p{margin:0}.dialog-head h2{font-size:28px;margin-top:5px}.icon-button{width:36px;height:36px;margin:0;padding:0;border-radius:50%;background:#eeeef2;color:#555;font-size:25px;font-weight:400}.icon-button:hover{background:#dddde3}.allergy-fields{display:grid;gap:10px;margin-top:20px}.allergy-row{display:flex;gap:8px;align-items:center}.allergy-row input{margin:0!important}.trash-button{width:44px;height:44px;flex:none;margin:0;padding:0;background:#fff0f0;color:#a00;border-radius:11px;font-size:18px}.trash-button:hover{background:#ffe1e1}.add-allergy{display:flex;align-items:center;justify-content:center;gap:8px;background:#f5f9ff;color:var(--blue);border:1px dashed #8abef2;margin-top:10px}.add-allergy:hover{background:#ebf4ff}.add-allergy span{font-size:22px}.dialog-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}.dialog-actions button{margin:0}.secondary-action{background:#e8e8ed;color:var(--ink)}.secondary-action:hover{background:#dddde3}.allergy-privacy{margin-top:14px}
.privacy { text-align:center; color:var(--muted); font-size:12px; margin:12px 0 0; }
.vipps-dialog{max-width:440px}.vipps-wait{text-align:center;padding:36px 30px}.vipps-large{display:inline-block;font-size:17px;padding:6px 11px;margin-bottom:15px}.vipps-wait h2{font-size:27px;margin:6px 0 12px}.vipps-wait>p{line-height:1.45}.vipps-total{display:block;font-size:42px;letter-spacing:-.04em;margin:20px 0 8px}.vipps-reference{color:var(--muted)}.countdown{display:grid;place-items:center;width:54px;height:54px;border:4px solid var(--orange);border-radius:50%;margin:24px auto 10px;color:var(--orange);font-size:21px;font-weight:750}.vipps-now{background:var(--orange)}.vipps-now:hover{background:#e94d19}
.message { padding:12px; border-radius:10px; }.error { background:#fff0f0; color:#a00; }
.success { text-align:center; padding:48px 30px; }.check { display:grid; place-items:center; background:#30a14e; color:white; font-size:28px; width:52px; height:52px; border-radius:50%; margin:0 auto 18px; }
@media(max-width:560px) { .page{padding-top:36px}.grid.two{grid-template-columns:1fr}.card,.summary{padding:22px;border-radius:18px}.hero{margin-bottom:28px}.choice{align-items:flex-start} }