@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&family=Open+Sans:wght@400;600&display=swap");

/* De Historiske — component styles. Every value comes from tokens.css. */
.dh, .dh * { box-sizing: border-box; }
.dh { font-family: var(--font-sans); color: var(--text-on-dark); -webkit-font-smoothing: antialiased; }
.dh-light { color: var(--text-on-light); }
.dh :focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }

/* Icon / Emblem */
.dh-icon { display: inline-block; flex: none; vertical-align: middle; }

/* Button */
.dh-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font: 600 16px/1.25 var(--font-sans); border: 1px solid transparent; background: none; color: inherit; cursor: pointer; text-decoration: none; transition: opacity .2s ease-out, background-color .2s ease-out; }
.dh-btn:disabled { opacity: .4; cursor: default; }
.dh-btn-lg { height: var(--size-control-lg); padding: 0 var(--space-6); border-radius: var(--radius-sm); }
.dh-btn-md { height: var(--size-control-md); padding: 0 var(--space-6); border-radius: var(--radius-sm); font-weight: 400; }
.dh-btn-sm { height: 38px; padding: 0 var(--space-4); border-radius: var(--radius-xs); }
.dh-btn-xs { height: 32px; padding: 0 12px; border-radius: var(--radius-xs); font-size: 15px; }
.dh-btn-block { display: flex; width: 100%; }
.dh-btn-primary { background: var(--gold-700); color: var(--text-on-gold); }
.dh-btn-primary:hover { opacity: .9; }
.dh-btn-outline { border-color: var(--line-dark); color: var(--text-on-dark); }
.dh-btn-outline:hover { background: var(--overlay-white-12); }
.dh-btn-outline-gold { border-color: var(--gold-500); color: var(--text-on-dark); }
.dh-btn-outline-on-gold { border-color: var(--text-on-gold); color: var(--text-on-gold); }
.dh-btn-outline-light { border-color: var(--text-on-light); color: var(--text-on-light); }
.dh-btn-link { height: auto; padding: 0; border: 0; font: 400 14px/21px var(--font-sans); color: var(--text-muted); }
.dh-btn-link u { color: var(--text-on-dark); text-underline-offset: 3px; }

/* IconButton */
.dh-iconbtn { width: var(--size-control-sm); height: var(--size-control-sm); border-radius: 50%; border: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--overlay-control); color: var(--text-on-dark); cursor: pointer; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.dh-iconbtn-plain { background: none; backdrop-filter: none; }

/* Eyebrow */
.dh-eyebrow { margin: 0; font: 600 13px/1.4 var(--font-sans); letter-spacing: .18em; text-transform: uppercase; }
.dh-eyebrow-gold { color: var(--gold-500); }
.dh-eyebrow-muted { color: var(--text-muted); }
.dh-eyebrow-muted-light { color: var(--text-muted-light); font-size: 11px; }

/* OrnamentDivider */
.dh-ornament { display: flex; align-items: center; gap: 14px; color: var(--gold-500); }
.dh-ornament::before, .dh-ornament::after { content: ""; flex: 1; height: 1px; background: var(--gold-hairline); }
.dh-ornament-short { width: 192px; margin: 0 auto; }
.dh-ornament-vertical { flex-direction: column; gap: 14px; }
.dh-ornament-vertical::before { flex: none; width: 1px; height: 47px; }
.dh-ornament-vertical::after { display: none; }

/* Badge */
.dh-badge { display: inline-flex; align-items: center; gap: 4px; font: 600 11px/1.3 var(--font-sans); padding: 3px 6px; border-radius: var(--radius-xs); white-space: nowrap; }
.dh-badge-offer { background: var(--gold-700); color: var(--text-on-gold); }
.dh-badge-dark { background: var(--surface-base); color: var(--text-on-dark); }
.dh-badge-date { background: var(--overlay-white-20); color: var(--text-on-dark); font: 600 14px/1 var(--font-sans); padding: 5px 6px; }
.dh-badge-outline { border: 1px solid var(--text-on-dark); border-radius: var(--radius-pill); font: 400 12px/1 var(--font-sans); padding: 11px 14px; letter-spacing: .02em; }

/* Chip */
.dh-chip { display: inline-flex; align-items: center; gap: 10px; height: var(--size-chip); padding: 0 20px; border-radius: var(--radius-pill); border: 1px solid var(--line-dark); background: none; color: var(--text-on-dark); font: 400 15px/1.4 var(--font-sans); cursor: pointer; }
.dh-chip[aria-pressed="true"] { background: var(--overlay-white-14); box-shadow: 0 0 0 1px var(--line-dark); }
.dh-chips { display: flex; flex-wrap: wrap; gap: 7px var(--space-2); }

/* Select */
.dh-select { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--space-2); height: var(--size-control-sm); min-width: 122px; padding: 0 14px 0 var(--space-4); border-radius: var(--radius-pill); border: 1px solid var(--line-dark); background: none; color: var(--text-on-dark); font: 600 14px/1 var(--font-sans); cursor: pointer; }

/* Cards */
.dh-offer { display: block; width: 252px; color: inherit; text-decoration: none; }
.dh-offer-media { position: relative; aspect-ratio: 253 / 152; background: var(--surface-tile); overflow: hidden; }
.dh-offer-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dh-offer-media .dh-badge { position: absolute; top: 8px; right: 8px; }
.dh-offer-title { font: 400 19px/24.7px var(--font-serif); margin: 14px 0 0; }
.dh-offer-sub { font: 400 14px/21px var(--font-sans); color: var(--text-muted); margin: 0; }
.dh-carousel { display: flex; gap: var(--space-2); overflow-x: auto; padding: 0 var(--space-5); scrollbar-width: none; }

.dh-event { display: block; color: inherit; }
.dh-event-media { position: relative; aspect-ratio: 362 / 199; overflow: hidden; }
.dh-event-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dh-event .dh-badge-date { margin-top: 12px; }
.dh-event-title { font: 600 17px/1.25 var(--font-sans); margin: 8px 0 4px; }
.dh-event-desc { font: 400 14px/21px var(--font-sans); color: var(--text-muted); margin: 0 0 6px; }
.dh-event-price { font: 400 19px/1.3 var(--font-serif); margin: 0; }
.dh-event-price small { font: 400 14px/1 var(--font-sans); color: var(--text-muted); }

.dh-hotelrow { display: flex; align-items: center; gap: 16px; color: inherit; text-decoration: none; padding: 8px 0; }
.dh-hotelrow img { width: 136px; height: 99px; object-fit: cover; flex: none; }
.dh-hotelrow b { display: block; font: 600 17px/1.25 var(--font-sans); }
.dh-hotelrow span { font: 400 14px/21px var(--font-sans); color: var(--text-muted-strong); }

.dh-tile { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; width: 113px; height: 106px; background: var(--surface-tile); color: var(--text-on-dark); font: 400 14px/1 var(--font-sans); }
.dh-fact { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; min-width: 140px; height: 108px; padding: 0 24px; background: var(--surface-fact); color: var(--text-on-light); font: 600 14px/1 var(--font-sans); white-space: nowrap; }

/* Benefits */
.dh-benefits { display: flex; flex-direction: column; background: var(--surface-light); color: var(--text-on-light); }
.dh-benefit { display: flex; align-items: center; gap: 26px; padding: 18px; border: 1px solid var(--line-light); margin-top: -1px; }
.dh-benefit-icon { width: 54px; height: 54px; border-radius: 50%; background: var(--surface-cream); display: flex; align-items: center; justify-content: center; flex: none; }
.dh-benefit h4 { margin: 0; font: 400 18px/1.3 var(--font-serif); }
.dh-benefit p { margin: 2px 0 0; font: 400 14px/21px var(--font-sans); color: var(--text-muted-light); }

/* Voucher */
.dh-voucher { display: flex; gap: 26px; padding: 30px 26px; background: var(--gold-700); color: var(--text-on-gold); border-radius: var(--radius-md); }
.dh-voucher-label { font: 400 14px/20px var(--font-sans); margin: 0; }
.dh-voucher-amount { font: 400 32px/35px var(--font-serif); margin: 4px 0 10px; }
.dh-voucher-valid { font: 400 12px/1.4 var(--font-sans); margin: 0 0 14px; }
.dh-ticket { width: 50px; height: 47px; flex: none; transform: rotate(35deg); background: var(--text-on-gold); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: var(--gold-700); margin-top: 6px; }
.dh-code { border-left: 1px solid var(--gold-900); border-right: 1px solid var(--gold-900); padding: 48px 0; text-align: center; font: 400 52px/1.1 var(--font-serif); }

/* Savings meter */
.dh-meter-figure { display: flex; align-items: flex-start; gap: 10px; font: 400 52px/1.1 var(--font-serif); margin: 6px 0 4px; }
.dh-meter-figure .dh-icon { color: var(--text-muted); margin-top: 8px; }
.dh-meter-note { font: 400 14px/21px var(--font-sans); color: var(--text-muted); margin: 0 0 20px; }
.dh-stamps { display: flex; justify-content: space-between; }
.dh-stamp { width: var(--size-stamp); height: var(--size-stamp); border-radius: 50%; border: 1px solid var(--line-dark); display: flex; align-items: center; justify-content: center; color: var(--text-on-dark); opacity: .55; }
.dh-stamp-earned { background: var(--gold-700); border-color: var(--gold-700); opacity: 1; }
.dh-meter-foot { display: flex; justify-content: space-between; font: 400 14px/21px var(--font-sans); color: var(--text-muted); margin-top: 12px; }

/* Stay banner */
.dh-stay { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: var(--radius-sm); background: var(--gold-700); color: var(--text-on-gold); }
.dh-stay-mark { width: 48px; height: 48px; border-radius: 50%; background: var(--text-on-gold); color: var(--text-on-light); display: flex; align-items: center; justify-content: center; flex: none; }
.dh-stay b { display: block; font: 600 16px/1.3 var(--font-sans); }
.dh-stay span { font: 400 14px/1.4 var(--font-sans); }

/* Pager */
.dh-pager { display: flex; gap: 6px; }
.dh-pager-seg { flex: 1; height: 2px; background: var(--progress-track); }
.dh-pager-seg[data-on] { background: var(--gold-700); }
.dh-dots { display: flex; gap: 6px; justify-content: center; }
.dh-dot { width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--overlay-white-20); }
.dh-dot[data-on] { width: 22px; background: var(--gold-500); }

/* Menu */
.dh-menu { background: var(--surface-light); color: var(--text-on-light); }
.dh-menu-group { margin: 0 0 4px; padding-top: 4px; }
.dh-menu-row { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 55px; padding: 0; border: 0; border-bottom: 2px solid var(--line-light); background: none; color: inherit; font: 400 16px/1 var(--font-sans); text-align: left; cursor: pointer; }
.dh-menu-row:last-child { border-bottom: 0; }

/* Profile stats */
.dh-stats { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--surface-base); border-top: 2px solid var(--overlay-divider); }
.dh-stats > div { padding: 24px 8px 22px; text-align: center; }
.dh-stats > div + div { border-left: 2px solid var(--overlay-divider); }
.dh-stats small { display: block; font: 600 11px/1 var(--font-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 12px; }
.dh-stats b { font: 400 18px/1.3 var(--font-serif); }

/* Tab bar */
.dh-tabbar { display: flex; align-items: center; justify-content: space-around; height: var(--size-tabbar); padding: 7px; border-radius: var(--radius-pill); background: var(--overlay-nav); box-shadow: inset 0 0 0 100px var(--overlay-white-12); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); color: var(--text-on-dark); }
.dh-tabbar-light { background: var(--surface-light); box-shadow: 0 0 0 1px var(--line-light); color: var(--text-on-light); }
.dh-tab { flex: 1; height: 59px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: var(--radius-pill); background: none; color: inherit; font: 600 9px/1.2 var(--font-sans); letter-spacing: .02em; text-transform: uppercase; cursor: pointer; }
.dh-tab[aria-current="page"] { background: var(--overlay-white-20); }
.dh-tabbar-light .dh-tab[aria-current="page"] { background: var(--line-light); }

/* Disclosure */
.dh-disclosure { border-radius: var(--radius-sm); background: var(--surface-tile); }
.dh-disclosure > button { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 38px; padding: 0 10px; border: 0; background: none; color: var(--text-on-dark); font: 400 14px/1 var(--font-sans); cursor: pointer; }
.dh-disclosure > button .dh-icon { transition: transform .2s ease-out; }
.dh-disclosure[data-open] > button .dh-icon { transform: rotate(180deg); }
.dh-disclosure > div { padding: 0 10px 12px; font: 400 14px/21px var(--font-sans); color: var(--text-muted); }

/* Bottom sheet */
.dh-sheet { background: var(--surface-sheet); border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding: 20px 20px 24px; color: var(--text-on-dark); }
.dh-sheet-head { display: flex; justify-content: flex-end; }
.dh-sheet h2 { font: 400 24px/1.25 var(--font-serif); margin: 4px 0 24px; }
.dh-sheet-foot { margin-top: 32px; }

/* Video poster */
.dh-video { position: relative; aspect-ratio: 362 / 207; overflow: hidden; }
.dh-video img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dh-video::after { content: ""; position: absolute; inset: 0; background: var(--overlay-scrim); }
.dh-video button { position: absolute; left: 50%; top: 50%; z-index: 1; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%; border: 0; background: var(--gold-500); color: var(--text-on-dark); display: flex; align-items: center; justify-content: center; cursor: pointer; }

/* Facility list */
.dh-facilities { display: grid; grid-template-columns: 1fr 1fr; gap: 12px var(--space-4); margin: 0; padding: 0; list-style: none; color: var(--text-on-light); font: 400 15px/1.4 var(--font-sans); }
.dh-facilities li { display: flex; align-items: center; gap: 10px; }