/* Fælles farver og grundstil for alle sider. Lyst tema som standard, mørkt når telefonen står i mørk tilstand - eller tvunget med data-theme="dark"/"light" på (storskærmen). */ :root { --bg: #fff4f8; --surface: #ffffff; --surface-2: #fde6ef; --border: #f3c4d6; --text: #2b1220; --text-muted: #7d5468; --accent: #d6246e; --accent-strong: #b0145a; --accent-soft: rgba(214, 36, 110, 0.1); --on-accent: #ffffff; --success: #15803d; --success-soft: rgba(21, 128, 61, 0.12); --danger: #dc2626; --warn: #b45309; --warn-soft: rgba(180, 83, 9, 0.12); --shadow: 0 1px 2px rgba(80, 20, 45, 0.06), 0 4px 16px rgba(80, 20, 45, 0.06); color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #170a11; --surface: #24111b; --surface-2: #321826; --border: #4b2437; --text: #fbe9f1; --text-muted: #c595ab; --accent: #ff4f93; --accent-strong: #ff79ad; --accent-soft: rgba(255, 79, 147, 0.14); --on-accent: #ffffff; --success: #4ade80; --success-soft: rgba(74, 222, 128, 0.14); --danger: #f87171; --warn: #fbbf24; --warn-soft: rgba(251, 191, 36, 0.14); --shadow: none; color-scheme: dark; } } :root[data-theme="dark"] { --bg: #170a11; --surface: #24111b; --surface-2: #321826; --border: #4b2437; --text: #fbe9f1; --text-muted: #c595ab; --accent: #ff4f93; --accent-strong: #ff79ad; --accent-soft: rgba(255, 79, 147, 0.14); --on-accent: #ffffff; --success: #4ade80; --success-soft: rgba(74, 222, 128, 0.14); --danger: #f87171; --warn: #fbbf24; --warn-soft: rgba(251, 191, 36, 0.14); --shadow: none; color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.4; } button, input { font: inherit; } button { touch-action: manipulation; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; border: none; border-radius: 12px; padding: 0.7rem 1rem; background: var(--accent); color: var(--on-accent); font-weight: 600; cursor: pointer; text-decoration: none; } .btn:disabled { opacity: 0.45; cursor: default; } .btn-secondary { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); } .btn-danger { background: var(--danger); color: #fff; } .btn-small { padding: 0.4rem 0.7rem; font-size: 0.85rem; border-radius: 9px; } .field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.9rem; } .field label { font-size: 0.85rem; color: var(--text-muted); font-weight: 600; } .field input { padding: 0.75rem 0.85rem; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 1rem; /* 16px forhindrer iOS i at zoome ind på feltet */ } .field input:focus { outline: 2px solid var(--accent); outline-offset: 1px; } .field-error { color: var(--danger); font-size: 0.85rem; min-height: 1.1em; margin: -0.4rem 0 0.6rem; } /* Modal med .open-klasse i stedet for [hidden] (undgår specificitets-fælden, se CLAUDE.md). */ .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); align-items: flex-end; justify-content: center; z-index: 200; padding: 0; } .modal-overlay.open { display: flex; } .modal-box { background: var(--surface); color: var(--text); width: 100%; max-width: 460px; max-height: 92vh; overflow-y: auto; border-radius: 18px 18px 0 0; padding: 1.25rem 1.1rem calc(1.1rem + env(safe-area-inset-bottom)); } @media (min-width: 600px) { .modal-overlay { align-items: center; padding: 1rem; } .modal-box { border-radius: 18px; } } .modal-box h2 { margin: 0 0 0.4rem; font-size: 1.2rem; } .modal-box p { margin: 0 0 1rem; color: var(--text-muted); font-size: 0.92rem; } .modal-actions { display: flex; gap: 0.6rem; margin-top: 0.4rem; } .modal-actions .btn { flex: 1; } .toast { position: fixed; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom)); transform: translate(-50%, calc(100% + 2rem)); visibility: hidden; max-width: calc(100% - 2rem); width: max-content; background: var(--text); color: var(--bg); padding: 0.75rem 1rem; border-radius: 12px; font-size: 0.95rem; font-weight: 600; z-index: 400; transition: transform 0.25s ease, visibility 0.25s; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25); } .toast.show { transform: translate(-50%, 0); visibility: visible; } .toast.toast-good { background: var(--success); color: #fff; } .toast.toast-bad { background: var(--danger); color: #fff; } /* Den lyserøde sløjfe - tegnet i SVG, så vi ikke er afhængige af et logo. */ .ribbon { width: 1.1em; height: 1.4em; flex: none; color: var(--accent); } @keyframes price-flash { 0% { background: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent); } 100% { background: transparent; box-shadow: 0 0 0 0 transparent; } }