/* ─── Tokens ─────────────────────────────────────────────────────────────── */
:root {
--paper: #FCFBF9;
--card: #FFFFFF;
--ink: #1A1B1D;
--ink-soft: #5B6166;
--ink-faint: #8B9096;
--slate: #5C5F63;
--slate-faint: #96999D;
--hairline: #E9E7E2;
--charcoal: #26282B;
--accent: #B89E68;
--accent-deep: #26282B;
--accent-soft: #F8F4EB;
--champagne: #D9C9A3;
--champagne-mid: #C9B487;
--sand: #E4DED2;
--danger: #DC2626;
--danger-soft: #FEF2F2;
--success: #16A34A;
--shadow: 0 1px 2px rgba(24,26,27,.04), 0 6px 24px rgba(24,26,27,.06);
--radius: 14px;
--radius-sm: 9px;
--radius-pill: 100px;
}
/* ─── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: 'Hanken Grotesk', sans-serif;
background: var(--paper);
color: var(--ink);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
min-height: 100vh;
}
/* Landingspagina heeft een witte paginabasis i.p.v. de crème --paper die de
rest van het portaal gebruikt. */
body.pagina-landing { background: var(--card); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1,h2,h3,h4 { letter-spacing: -0.02em; line-height: 1.2; }
/* ─── Layout ─────────────────────────────────────────────────────────────── */
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
/* ─── Header / nav ───────────────────────────────────────────────────────── */
.site-header {
border-bottom: 1px solid var(--hairline);
background: rgba(252,251,249,.55);
backdrop-filter: blur(10px);
position: sticky; top: 0; z-index: 10;
}
/* Sommige WebKit-browsers laten bij sticky + backdrop-filter een doorzichtige
naad van een paar pixels zien aan de bovenrand. Deze pseudo-laag trekt de
achtergrond door tot ruim boven de viewport, zodat die naad nooit zichtbaar is. */
.site-header::before {
content: "";
position: absolute;
top: -20px; left: 0; right: 0; bottom: 0;
background: rgba(252,251,249,.55);
backdrop-filter: blur(10px);
z-index: -1;
}
.topbar { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand em { font-family: 'Newsreader', serif; font-style: italic; font-weight: 500; color: var(--accent); }
.brand-logo { height: 28px; width: auto; display: block; }
.site-footer { border-top: 1px solid var(--hairline); margin-top: 48px; padding: 28px 0; }
.footer-inner { display:flex; flex-direction:column; align-items:center; gap:10px; }
.footer-monogram { height: 28px; width: auto; opacity: 0.65; }
.footer-copyright { font-size: 12px; color: var(--ink-faint); margin: 0; text-align: center; }
/* Op een smalle telefoon (zelfde breakpoint als de verkleinde WhatsApp/
e-mail-knoppen hieronder) vult de copyrightregel bijna de volle breedte,
en die knoppen zijn fixed rechtsonder -- zonder extra ruimte hier valt
"Alle rechten voorbehouden" gedeeltelijk achter ze (geverifieerd op
375px). De knoppenstapel eindigt daar op 16+48=64px (WhatsApp) resp.
74+48=122px (e-mail) boven de onderkant van de pagina; 140px extra
padding-bottom houdt de copyrightregel daar ruim boven. */
@media (max-width: 480px) {
.site-footer { padding-bottom: 140px; }
}
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.topnav { display: flex; gap: 24px; align-items: center; }
.topnav a { color: var(--ink-soft); font-size: 14.5px; font-weight: 500; text-decoration: none; }
.topnav a:hover { color: var(--ink); }
.topnav a.active { color: var(--accent); }
.nav-toggle {
display: none;
background: none; border: none; cursor: pointer;
padding: 6px; border-radius: 8px; color: var(--ink);
}
.nav-toggle:hover { background: var(--accent-soft); }
.nav-uitloggen {
background: none; border: none; cursor: pointer;
font-family: inherit; font-size: 14.5px; font-weight: 500;
color: var(--ink-soft); padding: 0;
}
.nav-uitloggen:hover { color: var(--ink); }
.avatar {
width: 32px; height: 32px; border-radius: 50%;
background: var(--accent-soft); color: var(--accent-deep);
display: grid; place-items: center;
font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
flex-shrink: 0;
}
/* ─── Page shell ─────────────────────────────────────────────────────────── */
.page-content { padding: 40px 0 64px; }
.page-intro { margin-bottom: 28px; }
.page-intro h1 { font-size: 26px; font-weight: 700; }
/* Kruimelpad direct boven de paginatitel (hotelpagina, SEO-PLAN 5.4): alleen
daar is wat lucht nodig; op de catalogus staat de breadcrumb alleen in
.page-intro en houdt hij zijn eigen marge. */
.page-intro .breadcrumb + h1 { margin-top: 10px; }
.page-intro p { color: var(--ink-soft); margin-top: 6px; font-size: 15.5px; }
.page-intro .pw-prijs-disclaimer { font-size: 12.5px; font-style: italic; color: var(--ink-faint); }
.page-intro .page-titel-sierlijk {
font-family: 'Newsreader', serif; font-style: italic; font-weight: 500;
font-size: 30px; color: var(--accent);
}
/* ─── Card ───────────────────────────────────────────────────────────────── */
.card {
background: var(--card);
border: 1px solid var(--hairline);
border-radius: var(--radius);
padding: 24px;
margin-bottom: 14px;
}
.card-sm { padding: 18px 20px; }
.card-link {
display: grid;
grid-template-columns: 1fr auto;
gap: 20px;
cursor: pointer;
transition: box-shadow .18s, border-color .18s, transform .18s;
}
.card-link:hover {
box-shadow: var(--shadow);
border-color: #D9D6CF;
transform: translateY(-1px);
text-decoration: none;
}
.card-link:hover .cta-arrow { transform: translateX(4px); }
.card.unavailable { opacity: .75; }
.card.unavailable .hotel-name { color: var(--ink-soft); }
/* ─── Hotel resultaat kaart ──────────────────────────────────────────────── */
.hotel-name { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.hotel-loc { font-size: 14px; color: var(--ink-soft); margin-top: 3px; }
/* ─── Perks / chips ──────────────────────────────────────────────────────── */
.perks { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.perk {
display: inline-flex; align-items: center; gap: 6px;
background: var(--accent-soft); color: var(--accent-deep);
font-size: 12.5px; font-weight: 600;
padding: 4px 11px; border-radius: 100px;
}
.perk-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.perk-status { background: #FEF3C7; color: #92400E; }
.perk-dot-status { background: #D97706; }
.status-disclaimer { font-size: 11.5px; color: var(--ink-faint); margin-top: 18px; font-style: italic; }
.status-badge-zoek { font-size: 11px; font-weight: 600; color: #92400E; background: #FEF3C7; border-radius: 100px; padding: 3px 9px; margin-top: 6px; display: inline-block; }
.brand-explorer-badge-zoek { font-size: 11px; font-weight: 600; color: var(--success); background: #F0FDF4; border-radius: 100px; padding: 3px 9px; margin-top: 6px; display: inline-block; }
.status-ref { color: #D97706; font-size: 10px; font-weight: 700; vertical-align: super; line-height: 0; margin-left: 1px; }
/* ─── Prijs blok ─────────────────────────────────────────────────────────── */
.price-block { text-align: right; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; min-width: 140px; max-width: 300px; }
.price-from { font-size: 11.5px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .07em; font-weight: 600; }
.price-amount { font-size: 26px; font-weight: 700; letter-spacing: -0.03em; margin-top: 2px; }
.price-terms { font-size: 13px; color: var(--ink-soft); margin-top: 3px; }
.price-total { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.price-none { font-size: 14px; color: var(--ink-faint); font-weight: 500; }
.price-none-sub { font-size: 12.5px; color: var(--ink-faint); margin-top: 2px; }
.price-lock { font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 8px; }
.price-lock-cta { display: flex; flex-direction: column; gap: 6px; width: 100%; min-width: 140px; }
.punten-indicatie {
font-size: 11.5px; color: var(--success); font-weight: 600;
margin-top: 4px; letter-spacing: .01em;
}
.punten-indicatie--hint {
color: var(--ink-soft); font-weight: 500;
}
.cta {
margin-top: 12px; font-size: 14px; font-weight: 600;
color: var(--accent); display: inline-flex; align-items: center; gap: 5px;
}
.cta-arrow { transition: transform .18s; }
/* ─── Laadskelet ─────────────────────────────────────────────────────────── */
.skeleton {
height: 22px; border-radius: 6px;
background: linear-gradient(90deg,#F0EEE9,#F7F6F2,#F0EEE9);
background-size: 200% 100%;
animation: shimmer 1.3s infinite;
}
.skeleton-price { width: 88px; margin-left: auto; }
.skeleton-text { width: 60px; height: 13px; margin-left: auto; margin-top: 6px; }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
/* ─── Zoekpanel ──────────────────────────────────────────────────────────── */
.dash-zoekwidget { display: none; }
.dash-zoekwidget-titel { color: var(--accent); font-size: 15.5px; font-weight: 700; margin: 0 0 10px; text-align: center; }
.dash-welkom-ster { display: none; color: var(--accent); }
.search-panel {
background: var(--card);
border: 1px solid var(--hairline);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 8px;
display: grid;
grid-template-columns: 1.7fr 1fr 1fr auto;
gap: 2px;
align-items: stretch;
margin-bottom: 8px;
}
.search-field {
padding: 12px 16px; border-radius: var(--radius-sm);
cursor: pointer; transition: background .15s; position: relative;
}
.search-field:hover { background: #FAF9F6; }
.search-field + .search-field { border-left: 1px solid var(--hairline); }
.sf-label { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-faint); font-weight: 600; }
.sf-input {
width: 100%; border: none; background: transparent; outline: none;
font-family: inherit; font-size: 15.5px; font-weight: 500; color: var(--ink);
margin-top: 3px; padding: 0; cursor: pointer;
}
.sf-input::placeholder { color: var(--ink-faint); font-weight: 400; }
.sf-input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0; position: absolute; right: 0; width: 100%; height: 100%; cursor: pointer; }
.nights-row { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.nights-count { font-size: 15.5px; font-weight: 500; min-width: 58px; color: var(--ink); }
.stepper { display: inline-flex; align-items: center; gap: 6px; }
.stepper-btn {
width: 24px; height: 24px; border-radius: 50%;
border: 1px solid var(--hairline); background: #fff;
color: var(--accent-deep); font-size: 16px; line-height: 1;
cursor: pointer; display: grid; place-items: center;
transition: border-color .15s, background .15s;
}
.stepper-btn:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); }
.stepper-btn:disabled { opacity: .35; cursor: not-allowed; }
.stepper-btn:focus-visible { outline: 2px solid var(--charcoal); outline-offset: 2px; }
.search-btn {
background: var(--accent); color: #fff; border: none;
border-radius: var(--radius-sm); padding: 0 26px;
font-family: inherit; font-size: 15px; font-weight: 600;
cursor: pointer; transition: background .15s; align-self: stretch;
}
.search-btn:hover { background: var(--accent-deep); }
.search-btn:focus-visible { outline: 2px solid var(--charcoal); outline-offset: 2px; }
.guest-row { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; padding: 10px 0 4px; }
.guest-field { display: flex; flex-direction: column; gap: 4px; }
.guest-field label { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-faint); font-weight: 600; }
.guest-field input,
.guest-field select {
border: 1px solid var(--hairline); border-radius: var(--radius-sm);
padding: 8px 10px; font-family: inherit; font-size: 14px;
background: var(--card); color: var(--ink); outline: none;
transition: border-color .15s;
}
.guest-field input:focus,
.guest-field select:focus { border-color: var(--accent); }
.kind-leeftijden-wrap { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.kind-age-input { width: 58px; }
/* Kamerblokje bij "aantal kamers" > 1 op de zoekwidgets (zoeken.html,
dashboard.html, hotel.html) -- zie CLAUDE.md, meerdere kamers boeken. */
.kamer-blok { padding: 10px 0; border-top: 1px solid var(--hairline); }
.kamer-blok:first-child { border-top: none; }
.kamer-blok-label { flex-basis: 100%; font-size: 12px; font-weight: 600; color: var(--ink-soft); margin-bottom: 2px; }
.results-meta { display: flex; align-items: baseline; justify-content: space-between; margin: 28px 0 14px; }
.results-meta h2 { font-size: 16px; font-weight: 600; }
.results-meta span { font-size: 14px; color: var(--ink-soft); }
/* ─── Valuta-toggle (Euro / Lokale valuta) ──────────────────────────────── */
/* Standaard (attribuut ontbreekt of staat op "eur"): .valuta-eur zichtbaar. */
html:not([data-valuta="lokaal"]) .valuta-lokaal { display: none; }
html[data-valuta="lokaal"] .valuta-eur { display: none; }
.valuta-toggle {
display: inline-flex; gap: 2px; padding: 3px; flex-shrink: 0;
border: 1px solid var(--hairline); border-radius: 100px; background: var(--card);
}
.valuta-toggle-btn {
padding: 5px 12px; border: none; border-radius: 100px;
background: transparent; font-family: inherit; font-size: 12.5px; font-weight: 500;
color: var(--ink-soft); cursor: pointer; white-space: nowrap;
transition: background .15s, color .15s;
}
html:not([data-valuta="lokaal"]) .valuta-toggle-btn[data-valuta="eur"],
html[data-valuta="lokaal"] .valuta-toggle-btn[data-valuta="lokaal"] {
background: var(--accent-soft); color: var(--accent-deep); font-weight: 600;
}
/* ─── Kamerkaart ─────────────────────────────────────────────────────────── */
/* Twee kamerblokken per rij. align-items:start voorkomt dat een kort blok
uitrekt tot de hoogte van een buur met meer tarieven -- dan blijft de
buitenrand om de eigen inhoud sluiten i.p.v. leeg wit onderaan. */
.kamer-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
align-items: start;
margin-bottom: 14px;
}
.kamer-card {
display: flex; flex-direction: column;
background: var(--card);
border: 1px solid var(--hairline);
border-radius: var(--radius);
overflow: hidden;
}
.kamer-card-body { padding: 18px 20px 20px; }
.kamer-card h3 { font-size: 17px; font-weight: 600; margin-bottom: 4px; }
.kamer-meta { font-size: 13px; color: var(--ink-soft); margin-bottom: 14px; }
/* Kamerfoto flush tegen de bovenrand van de kaart (zoals .cat-hotel-foto-wrap),
met een verhouding die dichter bij een echte kamerfoto ligt dan de vorige
vaste hoogte van 180px op volle kaartbreedte -- die sneed veel te panoramisch. */
.kamer-card .kamer-foto-wrap {
height: auto;
aspect-ratio: 3 / 2;
border-radius: 0;
margin-bottom: 0;
}
.rate-card {
background: #FAFAF8;
border: 1px solid var(--hairline);
border-radius: var(--radius-sm);
padding: 16px 18px;
margin-bottom: 8px;
display: grid;
grid-template-columns: 1fr;
gap: 12px;
align-items: start;
}
.rate-name { font-weight: 600; font-size: 14.5px; margin-bottom: 10px; }
.rate-annulering { font-size: 12.5px; color: var(--ink-soft); margin-top: 10px; }
.rate-price { text-align: left; }
.rate-price .amount { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; }
.rate-price-lijn { border-top: 1px solid var(--hairline); margin: 8px 0; }
.rate-price-sub { font-size: 12px; color: var(--ink-soft); line-height: 1.4; }
.rate-punten { font-size: 11px; margin-top: 5px; }
/* ─── Formulieren ────────────────────────────────────────────────────────── */
/* Zoekkaart zweeft rechts; de "over dit hotel"-tekst loopt eromheen en
vervolgt onder de kaart zodra de tekst langer is dan de kaart hoog is. */
.hb-info-rij { margin-top: 24px; display: flow-root; }
.hb-info-over:empty { display: none; }
.hb-info-form { float: right; width: 340px; margin: 0 0 20px 32px; }
.hb-info-form:not(.hb-info-form--aanvraag):has(+ .hb-info-over:empty) { float: none; width: 100%; max-width: 380px; margin: 0 auto; }
.hb-info-form .card { padding: 24px 28px; }
@media (max-width: 720px) {
.hb-info-form { float: none; width: 100%; margin-left: 0; }
}
/* Aanvraagvariant (niet-ingelogd): breder en niet-zwevend. Links de gepaarde
velden, rechts een hoge "Meer informatie"-kolom met de knop eronder, zelfde
hoogte als de linkerkolom (align-items: stretch, standaard bij flex-row). */
.hb-info-form--aanvraag { float: none; width: 100%; max-width: 100%; margin: 0 0 20px; }
.hb-aanvraag-intro { text-align: center; margin-bottom: 28px; }
.hb-aanvraag-intro h2 {
font-family: 'Newsreader', serif; font-style: italic; font-weight: 500;
font-size: 30px; color: var(--accent); margin: 0;
}
.hb-aanvraag-split { display: flex; gap: 32px; }
.hb-aanvraag-links { flex: 0 1 44%; min-width: 0; }
.hb-aanvraag-rechts { flex: 1 1 56%; min-width: 0; display: flex; flex-direction: column; }
.hb-aanvraag-meer { flex: 1; display: flex; flex-direction: column; }
.hb-aanvraag-meer textarea { flex: 1; resize: none; }
.form-row { display: flex; gap: 16px; }
.form-row .form-group { flex: 1; min-width: 0; }
@media (max-width: 720px) {
.hb-aanvraag-split { flex-direction: column; gap: 0; }
.hb-aanvraag-meer textarea { flex: none; min-height: 120px; }
}
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; color: var(--ink-soft); }
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="date"],
.form-group input[type="number"],
.form-group input[type="tel"],
.form-group select,
.form-group textarea {
width: 100%; padding: 10px 14px;
border: 1px solid var(--hairline); border-radius: var(--radius-sm);
font-family: inherit; font-size: 15px; color: var(--ink);
background: var(--card); outline: none;
transition: border-color .15s, box-shadow .15s;
}
.form-group textarea { resize: vertical; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}
.form-hint { font-size: 12.5px; color: var(--ink-faint); margin-top: 4px; }
/* Beheer-formulier labels en invoervelden (compact admin-stijl) */
.adm-label { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.adm-input { margin-top: 4px; width: 100%; font-family: inherit; font-size: 14px; padding: 7px 10px; border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); box-sizing: border-box; }
/* ─── Knoppen ────────────────────────────────────────────────────────────── */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 10px 20px; border-radius: var(--radius-pill);
font-family: inherit; font-size: 14.5px; font-weight: 600;
cursor: pointer; transition: background .15s, border-color .15s, color .15s;
border: 1px solid transparent; text-decoration: none; line-height: 1;
}
.btn:focus-visible { outline: 2px solid var(--charcoal); outline-offset: 2px; }
.btn-primary { background: var(--charcoal); color: var(--champagne); }
.btn-primary:hover { background: var(--ink); color: var(--champagne); text-decoration: none; }
.btn-secondary { background: var(--card); color: var(--ink); border-color: var(--hairline); }
.btn-secondary:hover { border-color: #C9C5BC; background: #FAF9F6; text-decoration: none; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #B91C1C; color: #fff; text-decoration: none; }
.btn-full { width: 100%; }
.btn-sm { padding: 6px 14px; font-size: 13px; }
.terug-knoppen { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.terug-knoppen--zwevend {
position: fixed; left: 24px; bottom: 24px; z-index: 90;
margin-bottom: 0; max-width: calc(100vw - 48px);
opacity: 0; visibility: hidden; transform: translateY(8px);
transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.terug-knoppen--zwevend.zichtbaar { opacity: 1; visibility: visible; transform: translateY(0); }
@media (max-width: 640px) {
.terug-knoppen--zwevend { display: none; }
}
/* ─── Meldingen ──────────────────────────────────────────────────────────── */
.alert { padding: 12px 16px; border-radius: var(--radius-sm); font-size: 14px; margin-bottom: 20px; }
.alert-error { background: var(--danger-soft); color: var(--danger); border: 1px solid #FECACA; }
.alert-success { background: #F0FDF4; color: var(--success); border: 1px solid #BBF7D0; }
.alert-info { background: var(--paper); color: var(--ink-soft); border: 1px solid var(--hairline); }
/* ─── Tabel (boekingen) ──────────────────────────────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.data-table th { padding: 10px 14px; text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); font-weight: 600; border-bottom: 1px solid var(--hairline); }
.data-table td { padding: 14px; border-bottom: 1px solid var(--hairline); vertical-align: middle; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: #FAFAF8; }
tr.rij-klikbaar { cursor: pointer; }
.data-table a { color: var(--accent); font-weight: 500; }
.badge { display: inline-block; padding: 3px 10px; border-radius: 100px; font-size: 12px; font-weight: 600; }
.badge-booked { background: #DCFCE7; color: #15803D; }
.badge-cancelled { background: #FEE2E2; color: #B91C1C; }
.badge-completed { background: #F3F4F6; color: var(--ink-soft); }
.badge-pending { background: #FEF9C3; color: #854D0E; }
/* ─── Boekingdetail: hoofd/notities/annulering links, serviceverzoeken rechts ─ */
.boeking-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .boeking-detail-grid { grid-template-columns: 1fr; } }
/* ─── Detail tabel ───────────────────────────────────────────────────────── */
.detail-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 24px; align-items: baseline; }
.detail-grid dt { font-size: 13px; color: var(--ink-soft); font-weight: 500; white-space: nowrap; }
.detail-grid dd { font-size: 15px; font-weight: 500; overflow-wrap: break-word; }
/* ─── Bevestiging ────────────────────────────────────────────────────────── */
/* Boekingsbevestiging */
.confirm-header { text-align: center; margin: 8px 0 28px; }
.confirm-ster { display: block; margin: 0 auto 18px; color: var(--accent); }
.confirm-groet { font-family: 'Newsreader', serif; font-style: italic; font-weight: 500; font-size: 25px; color: var(--accent); margin: 0; }
.confirm-blokken { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; }
.confirm-blokken .card { margin-bottom: 0; height: 100%; }
@media (max-width: 720px) { .confirm-blokken { grid-template-columns: 1fr; } }
.confirm-watnu { margin-top: 20px; text-align: left; }
.confirm-watnu h2 { font-size: 17px; font-weight: 700; margin: 0 0 14px; }
.confirm-watnu-lijst { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 14px; font-size: 14px; color: var(--ink-soft); line-height: 1.55; }
.confirm-watnu-lijst li::marker { color: var(--accent); font-weight: 700; }
.confirm-serviceform { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; max-width: 480px; }
/* ─── Serviceverzoek: standaardopties (airport transfer, check-in/out) ─────── */
.sv-velden { display: flex; flex-direction: column; gap: 10px; }
.sv-opties { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.sv-check { display: flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
.sv-blok { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid var(--hairline); border-radius: 8px; background: var(--paper); }
.sv-blok-rij { display: flex; gap: 8px; flex-wrap: wrap; }
.sv-blok-rij > * { flex: 1; min-width: 160px; }
.sv-tijdlabel { display: block; font-size: 13px; color: var(--ink-soft); }
.sv-blok select, .sv-blok input[type="text"], .sv-blok textarea {
padding: 9px 12px; border: 1px solid var(--hairline); border-radius: var(--radius-sm);
font-family: inherit; font-size: 14px; resize: vertical; background: var(--bg); color: var(--ink);
box-sizing: border-box;
}
/* ─── Betaalwidget ───────────────────────────────────────────────────────── */
.widget-frame {
border: 1px solid var(--hairline);
border-radius: var(--radius);
overflow: hidden;
margin: 24px 0;
}
.widget-status { padding: 14px 16px; border-radius: var(--radius-sm); font-size: 14.5px; font-weight: 500; display: none; margin-bottom: 16px; }
.cc-trust-row { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: -8px; margin-bottom: 20px; }
.cc-brands { display: flex; gap: 6px; }
.cc-brand-badge {
width: 42px; height: 27px;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(26,27,29,.12);
display: block;
}
.cc-trust-tekst {
max-width: 440px;
font-size: 13px; line-height: 1.5; color: var(--ink-soft); text-align: center;
}
.cc-trust-tekst .cc-lock-icon { vertical-align: -1px; margin-right: 5px; color: var(--ink-faint); }
/* ─── Divider ─────────────────────────────────────────────────────────────── */
.divider { border: none; border-top: 1px solid var(--hairline); margin: 28px 0; }
/* ─── Hotelkaart met foto ────────────────────────────────────────────────── */
.hotel-kaart {
display: grid;
grid-template-columns: 300px minmax(420px, 1fr) auto;
gap: 0 18px;
align-items: stretch;
height: 260px;
padding: 0;
overflow: hidden;
}
.hotel-foto-wrap {
width: 300px;
flex-shrink: 0;
border-radius: var(--radius) 0 0 var(--radius);
overflow: hidden;
background: var(--hairline);
align-self: stretch;
position: relative;
}
.hotel-foto-placeholder { width: 100%; height: 100%; background: var(--hairline); }
.hotel-foto { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.hotel-info { padding: 14px 0; align-self: center; }
.hotel-kaart .price-block { padding: 12px 20px 12px 0; justify-content: center; gap: 1px; }
/* Unavailable: foto iets dimmer, maar geen broken state */
.hotel-kaart.unavailable .hotel-foto-wrap { opacity: .65; }
/* ─── Vinkje (herbruikbare moderne checkbox-stijl) ──────────────────────────
Overal waar een voorkomt i.p.v. de kale
browserstandaard: class="vinkje" erop, wrapper regelt de flex-uitlijning
met het label. Oorspronkelijk geintroduceerd voor .punten-checkbox
(zoeken.js), sindsdien hergebruikt (o.a. .sv-check in service-verzoek.js,
.hb-knop, .pv-keuze, .profiel-checkbox-rij). */
.vinkje {
appearance: none; -webkit-appearance: none; margin: 0; flex-shrink: 0;
width: 18px; height: 18px; border: 1.5px solid var(--hairline); border-radius: 5px;
background: var(--card); cursor: pointer; display: grid; place-items: center;
transition: background .15s, border-color .15s;
}
.vinkje:hover { border-color: var(--accent); }
.vinkje:checked { background: var(--accent); border-color: var(--accent); }
.vinkje:checked::after {
content: ""; width: 5px; height: 9px;
border: solid var(--card); border-width: 0 2px 2px 0;
transform: rotate(45deg) translate(-1px, -1px);
}
/* Radio-variant van .vinkje (per rij maar één keuze mogelijk, zie
radioRijen() in routes/profiel.js): rond i.p.v. vierkant, met een
gevulde stip i.p.v. een vinkje-haakje. */
.vinkje.vinkje--radio { border-radius: 50%; }
.vinkje.vinkje--radio:checked::after {
content: ""; width: 8px; height: 8px; border-radius: 50%;
background: var(--card); border: none; transform: none;
}
/* ─── Puntenopties (Gold/Platinum) ───────────────────────────────────────── */
/* Vinkje "Laat puntenopties zien" onder het reizigersblok */
.punten-checkbox {
display: flex; align-items: center; gap: 10px;
margin-top: 12px; font-size: 13.5px; font-weight: 500; color: var(--ink-soft);
cursor: pointer; width: fit-content;
}
/* Op de kaart: waarschuwing linksboven, redemption-info linksonder, allebei
naast de foto (.hotel-info), niet in het price-block -- dat toont al de
losstaande spaarpunten-indicatie (.punten-indicatie) en mag daar niet mee
verward worden. */
.punten-onvoldoende {
font-size: 11.5px; color: var(--danger); font-weight: 700;
text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px;
}
.punten-redemption {
font-size: 12.5px; color: var(--success); font-weight: 600;
margin-top: 8px; letter-spacing: .01em;
}
.punten-resterend { font-size: 12px; color: var(--ink-faint); margin-top: 2px; }
/* Losse puntenopties-sectie onder de resultaten */
.punten-opties-sectie { margin-top: 32px; }
.punten-opties-sectie h2 { margin-bottom: 4px; }
.punten-opties-kop {
font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
color: var(--ink-faint); margin: 20px 0 10px;
}
.punten-opties-grid { display: flex; flex-direction: column; gap: 12px; }
.punten-optie-kaart { grid-template-columns: 300px minmax(420px, 1fr); cursor: default; }
/* ─── Kamertype foto ─────────────────────────────────────────────────────── */
.kamer-foto-wrap {
width: 100%;
height: 180px;
border-radius: var(--radius-sm);
overflow: hidden;
background: var(--hairline);
margin-bottom: 14px;
position: relative;
}
.kamer-foto { width: 100%; height: 100%; object-fit: cover; display: block; }
.kamer-foto-wrap.leeg { height: 60px; }
.kamer-foto-wrap--klikbaar { cursor: pointer; }
.kamer-foto-badge {
position: absolute; right: 8px; bottom: 8px;
background: rgba(0,0,0,.6); color: #fff;
font-size: 11.5px; font-weight: 600;
padding: 3px 9px; border-radius: 100px;
}
.kamer-foto-badge--icoon {
padding: 6px; display: flex; align-items: center; justify-content: center;
}
/* ─── Kamerfoto-lightbox (gedeeld, één instantie per pagina) ────────────── */
.kamer-lightbox-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.75); z-index: 1000; }
.kamer-lightbox-overlay.open { display: block; }
.kamer-lightbox-modal {
display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
width: min(880px, calc(100vw - 32px));
background: var(--card); border-radius: var(--radius); padding: 20px; z-index: 1001;
box-shadow: 0 8px 32px rgba(0,0,0,.35);
}
.kamer-lightbox-overlay.open .kamer-lightbox-modal { display: block; }
.kamer-lightbox-sluiten {
position: absolute; top: 12px; right: 14px; z-index: 2;
background: none; border: none; cursor: pointer;
font-size: 22px; line-height: 1; color: var(--ink-faint); padding: 6px 10px; border-radius: 4px;
}
.kamer-lightbox-sluiten:hover { color: var(--ink); background: var(--paper); }
.kamer-lightbox-titel { font-size: 15px; font-weight: 700; margin-bottom: 12px; padding-right: 32px; }
/* Geen vaste 16:10-verhouding meer: de box volgt de eigen verhouding van de
foto (tot 70vh), zodat een foto die daar niet in past geen zwarte balken
krijgt. min-height is alleen een placeholder terwijl de foto nog laadt. */
.kamer-lightbox-hoofd {
position: relative; width: 100%; min-height: 240px; max-height: 70vh;
border-radius: 12px; overflow: hidden; background: var(--paper);
display: flex; align-items: center; justify-content: center;
}
.kamer-lightbox-img { display: block; max-width: 100%; max-height: 70vh; width: auto; height: auto; }
.kamer-lightbox-nav {
position: absolute; top: 50%; transform: translateY(-50%);
background: rgba(0,0,0,.45); color: #fff; border: none;
width: 36px; height: 36px; border-radius: 50%; font-size: 20px; cursor: pointer;
display: flex; align-items: center; justify-content: center;
}
.kamer-lightbox-nav:hover { background: rgba(0,0,0,.65); }
.kamer-lightbox-vorige { left: 10px; }
.kamer-lightbox-volgende { right: 10px; }
.kamer-lightbox-teller { text-align: center; font-size: 12.5px; color: var(--ink-faint); margin-top: 8px; }
.kamer-lightbox-strip { display: flex; gap: 8px; overflow-x: auto; padding: 10px 2px 2px; scrollbar-width: thin; }
.kamer-lightbox-thumb { flex: 0 0 auto; width: 72px; height: 48px; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; cursor: pointer; background: none; }
.kamer-lightbox-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kamer-lightbox-thumb.actief { border-color: #B89E68; }
@media (max-width: 720px) {
.kamer-lightbox-nav { width: 44px; height: 44px; font-size: 20px; }
.kamer-lightbox-thumb { width: 72px; height: 56px; }
}
/* ─── Ketenlabel ─────────────────────────────────────────────────────────── */
.hotel-keten-label {
display: inline-flex; align-items: center; gap: 5px;
font-size: 11.5px; font-weight: 600; letter-spacing: .03em;
color: var(--ink-soft);
background: var(--bg); border: 1px solid var(--hairline);
border-radius: 100px; padding: 3px 9px 3px 6px;
margin-bottom: 5px;
}
/* Ketenlogo's komen van de LE-CDN en hebben geen bekende afmetingen: gemeten
over de 88 unieke logo's loopt de verhouding van 1:1 (400x400) tot bijna
9:1 (400x46). Een vaste breedte of aspect-ratio zou een breed woordmerk
platdrukken of tot een paar pixels laten krimpen, dus die kan hier niet
(docs/SEO-PLAN.md 9). min-width gelijk aan de hoogte reserveert wat er
sowieso nodig is -- het smalste echte geval is vierkant -- zonder ooit te
binden bij een breed logo, dus zonder vervorming. De rest van de
verspringing blijft staan tot de LE-API logoafmetingen meelevert. */
.keten-logo {
height: 14px; width: auto; min-width: 14px; object-fit: contain;
border-radius: 2px; flex-shrink: 0;
}
/* Op catalogus-hotelkaarten */
.cat-hotel-keten {
display: flex; align-items: center; gap: 5px;
font-size: 11px; color: var(--ink-faint);
padding: 0 14px 10px; margin-top: -4px;
}
.cat-hotel-keten .keten-logo { height: 12px; min-width: 12px; }
/* ─── Hoteladres + kaartknop ────────────────────────────────────────────── */
.hotel-adres {
display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
margin-top: 8px; font-size: 13.5px; color: var(--ink-soft);
}
.hotel-adres-tekst { flex: 1 1 auto; }
.hotel-map-btn {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 10px; border-radius: 100px;
border: 1px solid var(--hairline); background: var(--card);
color: var(--accent); font-size: 12.5px; font-weight: 500;
text-decoration: none; white-space: nowrap;
transition: background .15s, border-color .15s;
}
.hotel-map-btn:hover { background: var(--accent-soft); border-color: var(--accent); }
/* ─── Amenities-rij ─────────────────────────────────────────────────────── */
.amenities-toggle-rij {
display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
margin-bottom: 28px;
}
.amenities-toggle-rij .hotel-amenities { margin-bottom: 0; flex: 1 1 auto; }
.amenities-toggle-rij .valuta-toggle { margin-left: auto; }
.hotel-amenities {
display: flex; flex-wrap: wrap; gap: 8px;
margin-bottom: 28px;
}
.amenity-item {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 12px; border-radius: 100px;
background: var(--bg); border: 1px solid var(--hairline);
font-size: 13px; color: var(--ink-soft);
}
.amenity-item svg { flex-shrink: 0; color: var(--ink-faint); }
/* ─── Voordelen-chips op zoekkaarten ───────────────────────────────────── */
.hotel-voordelen {
display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 4px;
padding: 0 14px 14px; margin-top: 8px;
max-height: 52px; overflow: hidden;
}
.hotel-voordelen .perk { font-size: 11.5px; }
.perk-meer { background: var(--bg); color: var(--ink-soft); border: 1px solid var(--hairline); }
.perk-meer .perk-dot { background: var(--ink-faint); }
/* Op de zoekresultaten-kaart heeft .hotel-info geen horizontale padding
(zie .hotel-info hierboven), dus de chips moeten links uitlijnen met
.hotel-name / .hotel-loc in plaats van de 14px die voor .cat-hotel-kaart
hieronder is bedoeld. */
.hotel-kaart .hotel-voordelen { padding-left: 0; padding-right: 0; }
/* Catalogus-/aanbiedingenkaart: max 2 rijen. beperkVoordelenVoorChips knipt al
af op 3 chips + evt. "+x andere voordelen"-chip, maar een enkele lange
voordeeltekst (bijv. "Dagelijks ontbijt voor twee personen") kan op een
smalle kaart nog intern over 2 regels wrappen -- vandaar nowrap+ellipsis op
de chip zelf, zodat elke rij een vaste hoogte heeft en max-height altijd op
een rijgrens knipt (nooit een chip halverwege). Onderrand als margin i.p.v.
padding: margin valt buiten de overflow:hidden-box en blijft dus altijd
zichtbaar -- met padding-bottom viel die eerder weg tegen de kaartrand
zodra de knip al bij 2 volle rijen werd bereikt.
margin-top -2px: .cat-hotel-keten sluit al af met padding-bottom 10px, dus
-2px hier geeft per saldo dezelfde ~8px als tussen hotelnaam en keten-rij
(12px padding-bottom op .cat-hotel-naam, -4px margin-top op .cat-hotel-keten). */
.cat-hotel-kaart .hotel-voordelen {
margin: -2px 0 10px;
padding: 0 14px;
max-height: 56px; /* 2 volle chip-rijen (~25px) + tussenruimte, met marge */
overflow: hidden;
}
.cat-hotel-kaart .hotel-voordelen .perk {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ─── VIP-voordelen-kaart ───────────────────────────────────────────────── */
.hb-vip-voordelen { margin-bottom: 20px; }
.hb-vip-voordelen .card { padding: 24px 28px; }
.hb-vip-kop { font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--ink); margin-bottom: 8px; }
.hb-vip-sub { font-size: 14px; color: var(--ink-soft); line-height: 1.5; margin-bottom: 16px; }
.hb-vip-lijst { list-style: none; margin: 0 0 20px; display: flex; flex-direction: column; gap: 10px; }
.hb-vip-item { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--ink); line-height: 1.5; }
.hb-vip-icoon { flex-shrink: 0; margin-top: 3px; }
.hb-vip-item--service { color: var(--ink-soft); font-style: italic; border-top: 1px solid var(--hairline); padding-top: 10px; margin-top: 2px; }
/* ─── Hotelbeschrijving (eigen laag) ────────────────────────────────────── */
.hb-concept{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--accent);background:var(--accent-soft);padding:5px 12px;border-radius:100px;margin:0 0 16px}
.hb-concept-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);flex-shrink:0}
.hb-intro{font-size:18px;line-height:1.5;color:var(--ink);font-weight:500;margin:0 0 22px;max-width:60ch}
.hb-kenmerken{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px}
.hb-kenmerk{font-size:13px;font-weight:600;color:var(--ink-soft);background:var(--card);border:1px solid var(--sand);padding:7px 13px;border-radius:100px}
.hb-over-kop{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--champagne-mid);margin:0 0 12px}
.hb-over p{color:var(--ink-soft);font-size:15.5px;line-height:1.6;margin:0 0 16px}
.hb-over p:last-child{margin:0}
.hb-mening{background:var(--accent-soft);border-left:3px solid var(--accent);border-radius:0 10px 10px 0;padding:16px 20px;margin:24px 0 0}
.hb-mening-tekst{font-size:15px;color:var(--ink);line-height:1.55;font-style:italic;margin:0 0 8px}
.hb-mening-auteur{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent)}
.hb-beschrijving{margin:0 0 28px}
/* Ligging en voorzieningen op de hotelpagina (docs/SEO-PLAN.md 7.1). Eigen
data die eerder alleen in de JSON-LD stond; de kop is dezelfde kleine gouden
regel als .hb-over-kop hierboven, maar dan als echte . */
.hb-feiten{display:flex;flex-wrap:wrap;gap:28px 40px;padding:22px 28px;margin:0 0 20px}
.hb-feit{flex:1 1 260px;min-width:0}
.hb-feit-kop{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--champagne-mid);margin:0 0 10px}
.hb-feit-adres{font-size:15px;color:var(--ink);line-height:1.5;margin:0}
.hb-voorzieningen{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px}
.hb-voorziening{display:inline-flex;align-items:center;gap:7px;font-size:14px;color:var(--ink-soft);line-height:1.4}
.hb-voorziening svg{flex-shrink:0;color:var(--champagne-mid)}
/* "Andere hotels in deze stad": interne links onderaan de hotelpagina. De
kaartjes zelf zijn de gedeelde .cat-hotel-kaart uit de catalogus
(src/hotelKaart.js), dus die opmaak staat hier bewust niet nog eens. */
.hb-andere{margin:36px 0 0;padding-top:28px;border-top:1px solid var(--hairline)}
.hb-andere-kop{font-size:18px;font-weight:600;margin:0 0 16px}
.hb-andere-meer{margin:16px 0 0;font-size:14px}
.hb-over-details summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--champagne-mid);margin:0 0 4px;padding:8px 16px;border:1px solid var(--sand);border-radius:100px;background:var(--card);transition:background .15s,border-color .15s,color .15s}
.hb-over-details summary::-webkit-details-marker{display:none}
.hb-over-details summary:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.hb-over-icoon{flex-shrink:0;transition:transform .25s cubic-bezier(.4,0,.2,1)}
.hb-over-details[open] summary{margin-bottom:14px}
.hb-over-details[open] summary .hb-over-icoon{transform:rotate(45deg)}
.hb-over-details .hb-over-kop{display:none}
/* ─── Sorteerbar ─────────────────────────────────────────────────────────── */
.sort-bar {
display: flex; align-items: center; gap: 6px;
flex-wrap: wrap; margin-bottom: 12px;
}
.sort-label {
font-size: 12.5px; color: var(--ink-faint); font-weight: 600;
text-transform: uppercase; letter-spacing: .06em; margin-right: 4px;
}
.sort-btn {
padding: 5px 13px; border-radius: 100px;
border: 1px solid var(--hairline); background: var(--card);
font-family: inherit; font-size: 13px; font-weight: 500; color: var(--ink-soft);
cursor: pointer; transition: border-color .15s, color .15s, background .15s;
white-space: nowrap;
}
.sort-btn:hover { border-color: var(--accent); color: var(--accent); }
.sort-btn.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-deep); font-weight: 600; }
/* margin-left:auto op de wrapper i.p.v. op .valuta-toggle zelf, zodat de
Filteropties-chip er letterlijk naast staat i.p.v. ervoor te verspringen. */
.sort-bar-rechts { display: flex; align-items: center; gap: 6px; margin-left: auto; }
/* ─── Filteropties (amenities-filter op /zoeken) ────────────────────────────── */
.filter-dropdown { position: relative; }
.filter-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 13px; border-radius: 100px;
border: 1px solid var(--hairline); background: var(--card);
font-family: inherit; font-size: 13px; font-weight: 500; color: var(--ink-soft);
cursor: pointer; transition: border-color .15s, color .15s, background .15s;
white-space: nowrap;
}
.filter-chip:hover, .filter-chip.open { border-color: var(--accent); color: var(--accent); }
.filter-chip.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-deep); font-weight: 600; }
.filter-chip-badge {
display: inline-flex; align-items: center; justify-content: center;
min-width: 16px; height: 16px; padding: 0 4px; border-radius: 100px;
background: var(--accent); color: #fff; font-size: 11px; font-weight: 700;
}
/* Zelfde [hidden]-valkuil als bij .card-link hieronder: een eigen
display-regel wint van de UA [hidden]-regel, dus expliciet overschrijven. */
.filter-chip-badge[hidden], .filter-clear[hidden] { display: none; }
/* right:0 i.p.v. left:0 (zoals .gast-panel): deze chip zit uiterst rechts in
de balk, een paneel dat naar links opent zou van de pagina af kunnen lopen. */
.filter-panel {
display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 200;
background: var(--card); border: 1px solid var(--hairline);
border-radius: var(--radius); box-shadow: 0 4px 24px rgba(24,26,27,.14);
padding: 14px 16px; min-width: 480px; max-height: 420px; overflow-y: auto;
}
.filter-panel.open { display: block; }
/* right:0 hierboven gaat uit van een chip die tegen de rechterkant van de
balk aan zit (klopt op desktop). Op een smalle telefoon wrapt de sortbar
en staat de chip niet meer rechts, maar ergens in het midden van een
nieuwe regel -- right:0 t.o.v. die chip duwt het vaste 220px-brede paneel
dan voorbij de linkerkant van het scherm (geverifieerd op 375px: paneel
begon op x=-26px, "VOORZIENINGEN" werd onleesbaar "OORZIENINGEN"). Een
centrering op de chip zelf (translateX(-50%)) loste dit niet volledig op:
de chip staat zelf ook niet gecentreerd in de balk, dus de berekende
positie kwam nog altijd een paar pixels buiten beeld. position:fixed
ontkoppelt het paneel volledig van de chip-positie: het centreert dan
simpelweg in de viewport, ongeacht waar de balk-omslag de chip laat
landen, en blijft zo altijd volledig on-screen. */
@media (max-width: 480px) {
.filter-panel {
position: fixed; top: auto; bottom: 16px; left: 16px; right: 16px;
width: auto; min-width: 0; max-height: 70vh;
}
}
.filter-panel-titel {
font-size: 11px; font-weight: 600; text-transform: uppercase;
letter-spacing: .07em; color: var(--ink-faint); margin-bottom: 8px; margin-top: 16px;
}
.filter-panel-titel:first-child { margin-top: 0; }
.filter-optie {
display: flex; align-items: center; gap: 8px; padding: 6px 0;
font-size: 13.5px; color: var(--ink); cursor: pointer; white-space: nowrap;
}
/* Hotelprogramma (dynamisch, alleen merken aanwezig in de huidige resultaten)
is een dropdown i.p.v. een vinklijst: kan oplopen tot bijna twintig opties
(alle merken van /partners) en een hotel hoort toch al bij hooguit één
merk, dus een enkele keuze volstaat. .cat-filter-select is dezelfde
selectstijl als het keten/merk-filter op /hotels (routes/catalogus.js). */
.filter-programma-select { width: 100%; }
/* Drie opties naast elkaar per kenmerken-sectie (Wellness/Zwembad/
Kindvriendelijk/Sport), zie sortBar()/FILTER_SECTIES in zoeken.js. */
.filter-optie-grid {
display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 14px;
}
/* Labels als "Zoutwaterzwembad" of "Fietsen te leen" passen niet altijd op één
regel in een derde van de paneelbreedte -- .filter-optie's nowrap (bedoeld
voor de oude, altijd korte amenity-labels) zou ze dan laten overlappen. */
.filter-optie-grid .filter-optie { white-space: normal; align-items: flex-start; }
@media (max-width: 480px) {
.filter-optie-grid { grid-template-columns: repeat(2, 1fr); }
}
.filter-clear {
display: block; margin-top: 8px; padding-top: 10px; border: none; border-top: 1px solid var(--hairline);
background: none; font-family: inherit; font-size: 12.5px; font-weight: 600;
color: var(--accent); cursor: pointer; width: 100%; text-align: left;
}
/* .card-link heeft een eigen display:grid (zie hierboven) -- het kale
hidden-attribuut alleen verbergt zo'n element niet, want een auteur-
display-regel wint altijd van de UA [hidden]-regel. Zelfde precedent als
.beheer-nav-badge[hidden] en .lp-kalender-popover[hidden] elders in dit
bestand. */
#resultaten-lijst .card-link[hidden] { display: none; }
/* ─── Kaartweergave-toggle op /zoeken (zie zoeken.js/zoeken.html) ───────────── */
/* Eén regel met links de tarieven-laadindicator (daar door JS in gezet) en
rechts de kaartknop. margin-left:auto op de knop houdt hem rechts, ook als
de indicator er nog niet is (of helemaal ontbreekt bij 0 prijsblokken). */
.resultaten-balk {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
margin: -4px 0 14px;
}
.resultaten-balk .prijs-laad-indicator { margin: 0; }
.resultaten-balk .kaart-toggle-btn { margin-left: auto; }
.kaart-toggle-btn {
display: inline-flex; align-items: center; gap: 6px;
background: none; border: none; padding: 4px 2px;
font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--accent-deep);
cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.kaart-toggle-btn:hover { color: var(--accent); }
.kaart-weergave {
height: 520px; border: 1px solid var(--hairline); border-radius: var(--radius-sm);
overflow: hidden; margin-bottom: 20px; background: var(--paper);
}
/* Hotelkaartje bij een klik op een pil. Eigen marker i.p.v. Google's
InfoWindow (die dwingt een witte kader met padding af): de foto loopt hier
dus tot de rand door, met naam en CTA eroverheen op een verloop. */
.kaart-kaartje {
position: relative; width: 260px;
border-radius: 14px; overflow: hidden;
box-shadow: 0 6px 28px rgba(24,26,27,.28);
transform: translateY(-14px); /* ruimte vrij boven de pil eronder */
}
.kaart-kaartje-link { display: block; position: relative; text-decoration: none; }
.kaart-kaartje-foto {
display: block; width: 100%; height: 190px; object-fit: cover;
background: var(--hairline);
}
.kaart-kaartje-foto--leeg { background: var(--charcoal); }
.kaart-kaartje-overlay {
position: absolute; left: 0; right: 0; bottom: 0;
padding: 30px 16px 14px;
background: linear-gradient(to top, rgba(15,16,17,.92) 0%, rgba(15,16,17,.72) 45%, rgba(15,16,17,0) 100%);
}
.kaart-kaartje-naam {
color: #fff; font-size: 15px; font-weight: 700; line-height: 1.25;
letter-spacing: -.01em;
}
.kaart-kaartje-cta {
display: inline-block; margin-top: 7px;
color: var(--champagne); font-size: 12.5px; font-weight: 700;
letter-spacing: .02em;
}
.kaart-kaartje-link:hover .kaart-kaartje-cta { color: #fff; }
.kaart-kaartje-sluit {
position: absolute; top: 9px; right: 9px;
width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
border: none; border-radius: 100px; cursor: pointer;
background: rgba(15,16,17,.55); color: #fff;
backdrop-filter: blur(2px); transition: background .15s;
}
.kaart-kaartje-sluit:hover { background: rgba(15,16,17,.85); }
/* Promo-badges over de foto van het kaartje op de wereldkaart: dezelfde pil als
op de hotelkaarten in de catalogus (.cat-promo-badge hierboven), alleen aan de
rechterkant verder ingesprongen zodat een lang label niet onder de sluitknop
rechtsboven doorloopt. */
.kaart-kaartje .cat-promo-badges { top: 9px; left: 9px; right: 43px; }
/* Prijspil als Advanced Marker op de kaart. Google plaatst .kaart-prijs-pil
zelf gecentreerd boven het coördinaat; de pil is dus alleen vormgeving.
Altijd twee regels: hotelnaam boven, toestand eronder (tarief, spinner,
"Niet beschikbaar" of "Prijs voor leden"). Zie vulPil() in zoeken.html. */
.kaart-prijs-pil {
display: flex; flex-direction: column; align-items: center; gap: 1px;
background: var(--charcoal); color: #fff;
font-family: inherit; padding: 6px 12px; border-radius: 13px;
white-space: nowrap; box-shadow: 0 1px 3px rgba(24,26,27,.3);
cursor: pointer; transition: background .15s, transform .15s;
}
.kaart-prijs-pil:hover { background: var(--accent); transform: scale(1.06); }
/* Naam is de secundaire regel: kleiner en gedempt, zodat het tarief eronder
het blikveld houdt. Hotelnamen kunnen lang zijn, dus afkappen. */
.kaart-pil-naam {
font-size: 10.5px; font-weight: 600; line-height: 1.25; opacity: .72;
max-width: 130px; overflow: hidden; text-overflow: ellipsis;
}
.kaart-pil-status { font-size: 12.5px; font-weight: 700; line-height: 1.3; }
.kaart-prijs-pil:hover .kaart-pil-naam { opacity: .95; }
/* Alle toestanden zonder tarief delen een lichte pil, zodat de antracieten
pillen met een echt bedrag er visueel uitspringen. */
.kaart-prijs-pil.is-wachtend,
.kaart-prijs-pil.is-onbeschikbaar,
.kaart-prijs-pil.is-leden {
background: var(--card); color: var(--ink);
border: 1px solid var(--hairline);
box-shadow: 0 1px 3px rgba(24,26,27,.16);
}
.kaart-prijs-pil.is-wachtend .kaart-pil-naam,
.kaart-prijs-pil.is-onbeschikbaar .kaart-pil-naam,
.kaart-prijs-pil.is-leden .kaart-pil-naam { color: var(--ink-soft); opacity: .85; }
.kaart-prijs-pil.is-wachtend .kaart-pil-status,
.kaart-prijs-pil.is-onbeschikbaar .kaart-pil-status {
color: var(--ink-faint); font-weight: 600;
}
/* Niet-lid: prijzen zijn afgeschermd (zie geenToegang in /api/hotel-prijs).
Bewust uitnodigend in de merkkleur i.p.v. de doodlopende grijstint van
.is-onbeschikbaar, want hier valt nog wat te halen. */
.kaart-prijs-pil.is-leden {
background: var(--accent-soft); border-color: var(--champagne);
}
.kaart-prijs-pil.is-leden .kaart-pil-status { color: var(--accent-deep); }
.kaart-prijs-pil.is-leden:hover { background: var(--champagne); }
/* Hover kleurt de pil antraciet/goud; op de lichte varianten moet de tekst
dan meekleuren, anders valt hij weg. */
.kaart-prijs-pil.is-wachtend:hover,
.kaart-prijs-pil.is-onbeschikbaar:hover { background: var(--accent); border-color: var(--accent); }
.kaart-prijs-pil.is-wachtend:hover .kaart-pil-naam,
.kaart-prijs-pil.is-wachtend:hover .kaart-pil-status,
.kaart-prijs-pil.is-onbeschikbaar:hover .kaart-pil-naam,
.kaart-prijs-pil.is-onbeschikbaar:hover .kaart-pil-status { color: #fff; }
.kaart-fout {
display: flex; align-items: center; justify-content: center; height: 100%;
padding: 24px; text-align: center; font-size: 14px; color: var(--ink-soft);
}
@media (max-width: 640px) {
.kaart-weergave { height: 400px; }
}
/* ─── Footnote ───────────────────────────────────────────────────────────── */
.footnote { text-align: center; color: var(--ink-faint); font-size: 12.5px; padding: 32px 0 48px; }
/* ─── Auth pagina's ──────────────────────────────────────────────────────── */
.auth-page { min-height: calc(100vh - 64px); display: flex; align-items: center; padding: 40px 24px; }
.auth-card { max-width: 420px; width: 100%; margin: 0 auto; }
.auth-card--breed { max-width: 760px; }
.uitnodiging-verlopen {
text-align: center; padding: 22px 20px;
border: 1px solid var(--champagne); background: var(--accent-soft); border-radius: var(--radius);
margin-bottom: 20px;
}
.uitnodiging-verlopen svg { display: block; margin: 0 auto 12px; color: var(--accent); }
.uitnodiging-verlopen p { margin: 0; font-size: 14px; color: var(--ink-soft); line-height: 1.55; }
.auth-header { text-align: center; }
.auth-card h1 { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.auth-card .subtitle { color: var(--ink-soft); font-size: 14.5px; margin-bottom: 28px; }
.auth-badge {
display: block;
font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
color: var(--champagne-mid); margin-bottom: 28px;
}
.niveau-keuze { display:flex; gap:16px; margin-top:20px; }
.niveau-kaart { flex:1; background:var(--card); border:1px solid var(--hairline); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; display:flex; flex-direction:column; gap:8px; }
.niveau-naam { font-size:18px; font-weight:700; color:var(--ink); }
.niveau-prijs { font-size:22px; font-weight:700; color:var(--ink); }
.niveau-prijs span { font-size:13px; font-weight:500; color:var(--ink-faint); }
.niveau-uitleg { font-size:13px; color:var(--ink-soft); line-height:1.5; margin-bottom:6px; }
.niveau-banner { font-size:13px; color:var(--ink-soft); background:var(--accent-soft); border-radius:var(--radius-sm); padding:10px 14px; margin:10px 0; }
@media (max-width:560px){ .niveau-keuze{ flex-direction:column; } }
/* ─── Voordelenblok (zoekpagina begintoestand) ───────────────────────────────
Zelfde ontwerp als de landingspagina-featuregrid (.lp-feat-* in dit
bestand), eigen klassenprefix (zk-) omdat het een aparte sectie op een
andere pagina is. Structuur en afmetingen bewust identiek aan .lp-feat-*
-- wijzig je daar het ontwerp, doe hetzelfde hier. */
.zk-voordelen-sectie { padding: 40px 0; }
.zk-voordelen-kop { text-align: center; max-width: 560px; margin: 0 auto 32px; }
.zk-voordelen-label {
font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
color: var(--champagne-mid); margin-bottom: 10px;
}
.zk-voordelen-kop h2 { font-size: 28px; font-weight: 800; color: var(--ink); margin-bottom: 12px; }
.zk-voordelen-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.zk-voordelen-kaart {
position: relative; aspect-ratio: 4 / 3; overflow: hidden;
border-radius: var(--radius); box-shadow: var(--shadow); background: var(--card);
}
.zk-voordelen-foto {
position: absolute; inset: 0;
background-size: cover; background-position: center;
}
.zk-voordelen-foto img {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.zk-voordelen-foto::after {
content: ''; position: absolute; inset: 0; z-index: 1;
background: linear-gradient(to bottom, rgba(255,255,255,.18) 0%, rgba(255,255,255,.18) 26%, var(--card) 56%);
}
.zk-voordelen-ster {
position: absolute; left: 50%; top: 56%; transform: translate(-50%, -50%); z-index: 2;
display: flex; align-items: center; justify-content: center;
width: 34px; height: 34px; border-radius: 50%;
background: rgba(255,255,255,.4); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
color: var(--champagne-mid);
}
.zk-voordelen-inhoud {
position: absolute; left: 0; right: 0; bottom: 0; top: calc(56% + 12px); z-index: 2;
display: flex; flex-direction: column; justify-content: flex-start; align-items: center;
padding: 4px 26px 20px; text-align: center;
}
.zk-voordelen-inhoud h3 {
font-size: 17.5px; font-weight: 700; color: var(--ink);
line-height: 1.25; letter-spacing: -0.015em;
}
.zk-voordelen-inhoud h3::after {
content: ''; display: block; width: 32px; height: 2px;
background: var(--champagne); margin: 8px auto;
}
.zk-voordelen-inhoud p { font-size: 12.5px; color: var(--slate); line-height: 1.6; max-width: 94%; margin: 0 auto; }
@media (max-width: 720px) {
.zk-voordelen-grid { grid-template-columns: 1fr; }
}
/* ─── Dashboard: eerstvolgende reis (eerste blok, onder Welkom) ─────────────
Links een grote foto, rechts gegevens + acties. .dash-trip-foto-leeg
hergebruikt dezelfde donkere gradient-placeholder als tileFotoStijl()
(dashboard.js) voor een boeking zonder gekoppelde catalogusfoto. */
.dash-trip-blok {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
background: var(--card);
border: 1px solid var(--hairline);
border-radius: var(--radius);
box-shadow: var(--shadow);
overflow: hidden;
margin-top: 24px;
}
.dash-trip-foto {
min-height: 280px;
background-size: cover;
background-position: center;
}
.dash-trip-foto-leeg {
display: grid; place-items: center;
font-size: 52px;
background: linear-gradient(135deg,#1a3a4a 0%,#2d6a7a 100%);
}
.dash-trip-inhoud {
padding: 32px 36px;
display: flex;
flex-direction: column;
justify-content: center;
}
.dash-trip-eyebrow {
font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
color: var(--accent);
}
.dash-trip-naam {
font-family: 'Newsreader', serif; font-style: italic; font-weight: 500;
font-size: 27px; letter-spacing: -0.005em; color: var(--ink);
margin: 6px 0 2px;
}
.dash-trip-locatie { font-size: 14px; color: var(--ink-soft); }
.dash-trip-meta {
display: flex; align-items: center; gap: 22px;
margin: 18px 0; padding: 16px 0;
border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
}
.dash-trip-countdown { display: flex; flex-direction: column; flex-shrink: 0; }
.dash-trip-countdown-getal { font-size: 27px; font-weight: 800; color: var(--accent-deep); line-height: 1; }
.dash-trip-countdown-label { font-size: 11.5px; color: var(--ink-soft); margin-top: 3px; white-space: nowrap; }
.dash-trip-datumblok { padding-left: 22px; border-left: 1px solid var(--hairline); }
.dash-trip-datumblok:first-child { padding-left: 0; border-left: none; }
.dash-trip-datums { font-size: 15px; font-weight: 600; color: var(--ink); }
.dash-trip-nachten { font-size: 12.5px; color: var(--ink-faint); margin-top: 3px; }
.dash-trip-acties { display: flex; gap: 10px; flex-wrap: wrap; }
.dash-trip-acties .btn { transition: background .15s, border-color .15s, color .15s, transform .15s, box-shadow .15s; }
.dash-trip-acties .btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(24,26,27,.12); }
.dash-trip-alle { display: inline-block; margin-top: 16px; font-size: 13px; color: var(--ink-soft); }
.dash-trip-alle:hover { color: var(--accent); text-decoration: underline; }
@media (max-width: 720px) {
.dash-trip-blok { grid-template-columns: 1fr; margin-top: 20px; }
.dash-trip-foto { min-height: 200px; }
.dash-trip-inhoud { padding: 24px 22px 26px; }
.dash-trip-acties { flex-direction: column; align-items: stretch; }
}
/* ─── Dashboard ──────────────────────────────────────────────────────────── */
.dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; margin-top: 28px; }
.dash-tile {
background: var(--card); border: 1px solid var(--hairline);
border-radius: var(--radius); overflow: hidden;
cursor: pointer; transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
text-decoration: none; color: var(--ink); display: block;
box-shadow: 0 1px 3px rgba(24,26,27,.04);
}
.dash-tile:hover { box-shadow: var(--shadow); border-color: #D9D6CF; transform: translateY(-3px); text-decoration: none; color: var(--ink); }
.dash-tile-foto { width: 100%; aspect-ratio: 16/9; background-size: cover; background-position: center; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.dash-tile:hover .dash-tile-foto { transform: scale(1.025); }
.dash-tile-content { padding: 18px 22px 20px; }
.dash-tile-content h3 { font-family: 'Newsreader', serif; font-style: italic; font-weight: 500; font-size: 19px; letter-spacing: -0.005em; margin-bottom: 5px; color: var(--ink); }
.dash-tile-content p { font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }
.dash-tile-cta {
display: inline-flex; align-items: center; gap: 5px; margin-top: 12px;
font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
color: var(--accent);
}
.dash-tile-cta svg { transition: transform .25s ease; }
.dash-tile:hover .dash-tile-cta svg { transform: translateX(4px); }
.dash-tile--binnenkort { position: relative; cursor: default; opacity: 0.6; pointer-events: none; }
.dash-tile-badge { position: absolute; top: 12px; right: 12px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); padding: 3px 8px; border-radius: 999px; }
/* ─── Dashboard profielblok ──────────────────────────────────────────────── */
.dash-profiel-blok {
margin-top: 24px;
padding: 14px 18px 16px;
background: var(--card);
border: 1px solid var(--hairline);
border-radius: var(--radius);
}
.dash-profiel-blok--klikbaar { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.dash-profiel-blok--klikbaar:hover { border-color: #D9D6CF; box-shadow: var(--shadow); }
.dash-profiel-header {
display: flex; align-items: baseline; justify-content: space-between;
margin-bottom: 11px;
}
.dash-profiel-titel {
font-size: 13px; font-weight: 700; color: var(--ink-soft);
text-transform: uppercase; letter-spacing: .05em;
}
.dash-profiel-edit {
font-size: 12px; color: var(--accent); text-decoration: none; font-weight: 600;
}
.dash-profiel-edit:hover { text-decoration: underline; }
.dash-profiel-chips {
display: flex; flex-direction: column; gap: 8px;
}
.dash-profiel-chips-groep {
display: flex; flex-wrap: wrap; gap: 6px;
}
.dash-profiel-chips-groep--sub {
padding-top: 8px; border-top: 1px solid var(--hairline);
}
.dash-profiel-chip {
display: inline-flex; align-items: center; gap: 4px;
font-size: 13px; color: var(--ink);
background: var(--paper); border: 1px solid var(--hairline);
border-radius: 100px; padding: 4px 12px;
}
.dash-profiel-chip--accent {
background: #F0FDF4; border-color: #BBF7D0; color: #166534;
}
.dash-profiel-chip--explorer {
background: var(--accent-soft); border-color: var(--champagne); color: var(--accent-deep);
font-weight: 500;
}
.dash-profiel-saldo {
color: var(--ink-soft); font-size: 12px;
}
/* ─── Dashboard lidmaatschapswidget ─────────────────────────────────────── */
.dash-lid-blok { margin-top:24px; padding:16px 18px 18px; background:var(--card); border:1px solid var(--hairline); border-radius:var(--radius); box-shadow:var(--shadow); }
.dash-lid-header { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:10px; }
.dash-lid-titel { font-size:13px; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.05em; }
.dash-lid-niveau { font-size:12px; font-weight:700; color:#B45309; background:#FEF6E7; padding:3px 10px; border-radius:999px; }
.dash-lid-uitnodiging { font-size:13px; color:var(--ink-soft); margin:2px 0 12px; line-height:1.5; }
.dash-lid-cta { font-size:13px; font-weight:600; color:var(--accent); }
/* ─── Dashboard: puntenconsultancy (Gold/Platinum-voordeel) ─────────────────
Drie kolommen: links de status ("vanaf wanneer gratis"), midden het
aanvraagformulier, rechts de lijst met aangevraagde/geplande sessies. */
.dash-consult-blok { margin-top:24px; padding:14px 18px 18px; background:var(--card); border:1px solid var(--hairline); border-radius:var(--radius); box-shadow:var(--shadow); }
.dash-consult-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; margin-top:6px; }
.dash-consult-col { display:flex; flex-direction:column; gap:8px; }
.dash-consult-col + .dash-consult-col { padding-left:24px; border-left:1px solid var(--hairline); }
.dash-consult-col-titel { font-size:12.5px; font-weight:700; color:var(--ink); }
.dash-consult-niveau-tekst { font-size:12.5px; color:var(--ink-faint); line-height:1.5; margin:0; }
.dash-consult-status-tekst { font-size:13px; color:var(--ink-soft); margin:0; }
.dash-consult-status-datum { font-size:19px; font-weight:700; color:var(--accent-deep); margin:2px 0 0; font-family:'Newsreader',serif; font-style:italic; }
.dash-consult-status-nu { font-size:13.5px; font-weight:600; color:var(--success); background:#F0FDF4; border-radius:8px; padding:8px 10px; margin:0; }
.dash-consult-form { display:flex; flex-direction:column; gap:8px; }
.dash-consult-form textarea { border:1px solid var(--hairline); border-radius:var(--radius-sm); padding:8px 10px; font-family:inherit; font-size:13px; resize:vertical; color:var(--ink); }
.dash-consult-form textarea:focus { outline:none; border-color:var(--accent); }
.dash-consult-tarief-notice { font-size:11.5px; color:var(--ink-faint); margin:0; line-height:1.4; }
.dash-consult-form .btn { align-self:flex-start; }
.dash-consult-lijst { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.dash-consult-item { display:flex; flex-direction:column; gap:3px; padding:8px 10px; border:1px solid var(--hairline); border-radius:var(--radius-sm); }
.dash-consult-item-datum { font-size:13px; font-weight:600; color:var(--ink); }
.dash-consult-item-status { font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.dash-consult-item-status--wacht { color:var(--accent); }
.dash-consult-item-status--bevestigd { color:var(--success); }
.dash-consult-item-voorkeur { font-size:12.5px; color:var(--ink-faint); }
.dash-consult-item-link { font-size:12.5px; font-weight:600; color:var(--accent); text-decoration:none; }
.dash-consult-item-link:hover { text-decoration:underline; }
.dash-consult-item-link--wacht { color:var(--ink-faint); font-weight:400; }
.dash-consult-bevestig-form { display:inline; }
.dash-consult-item-link--knop { background:none; border:none; padding:0; font:inherit; cursor:pointer; }
.dash-consult-leeg { font-size:13px; color:var(--ink-faint); margin:0; }
@media (max-width:900px) {
.dash-consult-grid { grid-template-columns:1fr; gap:20px; }
.dash-consult-col + .dash-consult-col { padding-left:0; border-left:none; padding-top:16px; border-top:1px solid var(--hairline); }
}
/* ─── Lidmaatschapsbeheer: voortgangsschaal (alle niveaus op één schaal) ──── */
.lm-schaal-header { display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:10px; margin-bottom:8px; }
.lm-schaal-cijfers { display:flex; gap:32px; margin:6px 0 20px; }
.lm-schaal-stat { display:flex; flex-direction:column; gap:3px; }
.lm-schaal-bedrag { font-size:22px; font-weight:700; color:var(--ink); }
.lm-schaal-stat-label { font-size:12px; color:var(--ink-soft); }
.lm-schaal-wrap { position:relative; padding-bottom:50px; margin-top:6px; }
.lm-schaal-track { position:relative; height:8px; background:var(--hairline); border-radius:4px; margin:0 38px; }
.lm-schaal-fill { position:absolute; top:0; left:0; height:100%; background:var(--accent); border-radius:4px; }
.lm-schaal-fill-pijplijn { position:absolute; top:0; height:100%; background:var(--accent-soft); }
.lm-schaal-mijlpaal { position:absolute; top:-3px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; }
.lm-schaal-mijlpaal-stip { box-sizing:border-box; width:14px; height:14px; border-radius:50%; background:var(--card); border:2.5px solid var(--ink-faint); }
.lm-schaal-mijlpaal.behaald .lm-schaal-mijlpaal-stip { background:var(--accent); border-color:var(--accent); }
.lm-schaal-mijlpaal-label { margin-top:8px; font-size:13px; color:var(--ink-soft); text-align:center; white-space:nowrap; line-height:1.4; }
.lm-schaal-mijlpaal.behaald .lm-schaal-mijlpaal-label { color:var(--accent); font-weight:700; }
/* ─── Dashboard spaardoelen: snelheidsmeters onder de voortgangsbalk ──────── */
.doelen-sectie { margin-top:22px; padding-top:18px; border-top:1px solid var(--hairline); }
.doelen-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.doelen-nav { display:flex; gap:6px; }
.doelen-pijl {
width:28px; height:28px; border-radius:50%; border:1px solid var(--hairline);
background:var(--card); color:var(--ink-soft);
display:flex; align-items:center; justify-content:center;
cursor:pointer; font-size:14px; line-height:1; transition:border-color .15s, color .15s;
}
.doelen-pijl:hover { border-color:var(--accent); color:var(--accent); }
.doelen-scroll {
display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory;
scrollbar-width:none; padding-bottom:2px;
}
.doelen-scroll::-webkit-scrollbar { display:none; }
.doel-kaart {
flex:0 0 calc((100% - 32px)/3); scroll-snap-align:start;
border:1px solid var(--hairline); border-radius:var(--radius-sm);
padding:16px 12px; display:flex; flex-direction:column; align-items:center;
text-align:center; min-width:150px;
}
.doel-gauge { position:relative; width:120px; max-width:100%; }
.doel-gauge-svg { width:100%; display:block; }
.doel-gauge-track { fill:none; stroke:var(--hairline); stroke-width:10; stroke-linecap:round; }
.doel-gauge-fill { fill:none; stroke:var(--accent); stroke-width:10; stroke-linecap:round; transition:stroke-dashoffset .4s ease; }
.doel-kaart.behaald .doel-gauge-fill { stroke:var(--success); }
.doel-gauge-pct { position:absolute; left:0; right:0; bottom:0; font-size:19px; font-weight:700; color:var(--ink); }
.doel-kaart.behaald .doel-gauge-pct { color:var(--success); }
.doel-naam { margin-top:6px; font-size:13.5px; font-weight:700; color:var(--ink); }
.doel-cijfers { font-size:12px; color:var(--ink-soft); margin-top:2px; }
.doel-omschrijving { font-size:12px; color:var(--ink-faint); margin-top:6px; font-style:italic; line-height:1.4; }
@media (max-width:720px) { .doel-kaart { flex-basis: calc((100% - 16px)/2); } }
@media (max-width:480px) { .doel-kaart { flex-basis: 100%; } }
.lm-kosteloos-badge { display:inline-block; white-space:nowrap; font-size:12.5px; font-weight:600; padding:8px 14px; border-radius:8px; }
.lm-kosteloos-badge--basic { background:#E3E5E9; color:#3F444B; }
.lm-kosteloos-badge--lite { background:var(--accent); color:var(--ink); }
.lm-kosteloos-badge--platinum { background:#43474E; color:#F5F6F7; }
/* ─── Lidmaatschapsbeheer: niveaukaarten ──────────────────────────────────── */
.lm-kaarten-rij { display:flex; gap:14px; flex-wrap:wrap; }
.lm-kaart-vorm { display:contents; }
.lm-kaart {
flex:1 1 200px; position:relative; text-align:center;
background:var(--card); border:1.5px solid var(--hairline); border-radius:var(--radius);
padding:22px 16px 18px; font-family:inherit; cursor:default;
}
button.lm-kaart { cursor:pointer; transition:border-color .15s, box-shadow .15s; }
button.lm-kaart:hover { border-color:var(--accent); box-shadow:var(--shadow); }
.lm-kaart.huidig { border-color:var(--success); border-width:2px; }
.lm-kaart-badge {
position:absolute; top:-11px; left:50%; transform:translateX(-50%);
font-size:11px; font-weight:700; letter-spacing:.02em; color:#fff;
background:var(--success); padding:3px 12px; border-radius:999px; white-space:nowrap;
}
.lm-kaart-naam { font-size:18px; font-weight:800; color:var(--ink); }
.lm-kaart-prijs { font-size:22px; font-weight:800; color:var(--ink); margin-top:8px; }
.lm-kaart-prijs span { font-size:13px; font-weight:500; color:var(--ink-faint); }
.lm-kaart-bullets { display:flex; flex-direction:column; gap:7px; margin-top:14px; text-align:left; }
.lm-kaart-bullet { display:flex; align-items:flex-start; gap:7px; font-size:12.5px; color:var(--ink-soft); line-height:1.35; }
.lm-kaart-bullet .dot {
width:15px; height:15px; border-radius:50%; background:var(--accent-soft); color:var(--accent);
font-size:9px; display:grid; place-items:center; flex-shrink:0; margin-top:1px;
}
.lm-kaart-drempel { font-size:12.5px; color:var(--ink-soft); margin-top:12px; }
.lm-kaart-actie { margin-top:14px; font-size:13px; font-weight:600; color:var(--accent); }
.lm-verloop-notice {
margin: 12px 0 0; padding: 10px 12px;
border: 1px solid var(--champagne); background: var(--accent-soft); border-radius: var(--radius-sm);
font-size: 12.5px; color: var(--ink-soft); line-height: 1.5;
}
.lm-verloop-notice strong { color: var(--ink); }
/* ─── Lidmaatschapsbeheer: uitnodigingsblok ───────────────────────────────── */
.lm-uitnodigen {
margin-top: 24px;
padding: 26px 28px 28px;
text-align: center;
background:
radial-gradient(480px 240px at 15% -20%, var(--accent-soft) 0%, transparent 65%),
radial-gradient(420px 220px at 100% 120%, var(--accent-soft) 0%, transparent 60%),
var(--card);
border: 1px solid var(--hairline); border-radius: var(--radius);
}
.lm-uitnodigen-ster { color: var(--accent); margin-bottom: 8px; }
.lm-uitnodigen-titel { font-size: 17px; font-weight: 800; color: var(--ink); margin: 0 0 6px; }
.lm-uitnodigen-tekst { font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; margin: 0 auto 16px; max-width: 420px; }
.lm-uitnodigen-form {
display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; max-width: 460px; margin: 0 auto;
}
.lm-uitnodigen-form input[type="email"] {
flex: 1; min-width: 220px; padding: 12px 16px;
border: 1.5px solid var(--hairline); border-radius: var(--radius-pill);
font-family: inherit; font-size: 13.5px; background: var(--paper);
}
.lm-uitnodigen-form input[type="email"]:focus { outline: none; border-color: var(--accent); }
.lm-uitnodigen-form button {
background: var(--charcoal); color: var(--champagne); border: none; cursor: pointer;
padding: 12px 24px; border-radius: var(--radius-pill); font-weight: 600; font-size: 13.5px;
font-family: inherit; white-space: nowrap; transition: opacity .15s;
}
.lm-uitnodigen-form button:hover { opacity: .88; }
/* ─── Lidmaatschapsbeheer: bevestigingsmodal beeindigen ───────────────────── */
.lm-modal-overlay {
position: fixed; inset: 0; z-index: 1000;
background: rgba(26,27,29,.5);
display: flex; align-items: center; justify-content: center;
padding: 20px;
}
.lm-modal {
background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
max-width: 420px; width: 100%; padding: 28px;
}
.lm-modal-titel { font-size: 17px; font-weight: 800; color: var(--ink); margin: 0 0 10px; }
.lm-modal-tekst { font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; margin: 0 0 22px; }
.lm-modal-acties { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
/* Cross-page meldingpopup (render.js, bouwMeldingPopup): iets chiquer dan de
kale ja/nee-bevestigingsmodal hierboven -- gecentreerd, met het kleine
gouden sterretje erboven. Scoped op .melding-modal i.p.v. .lm-modal zelf
te wijzigen, want die basisklasse wordt ook gebruikt voor gewone
bevestigingsdialogen (annuleren, lidmaatschap beëindigen) waar een
sterretje niet op zijn plek is. */
.melding-modal { text-align: center; }
.melding-modal-ster { display: flex; justify-content: center; color: var(--accent); margin-bottom: 12px; }
.melding-modal .lm-modal-titel { text-align: center; }
.contact-keuze-opties { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.contact-keuze-opties .btn { width: 100%; text-align: center; }
/* ─── Lidmaatschapsbeheer: Stripe-blok (placeholder) ──────────────────────── */
.lm-stripe-placeholder {
border:1.5px dashed var(--hairline); border-radius:var(--radius);
padding:18px; text-align:center; color:var(--ink-faint);
}
.lm-stripe-placeholder-badge {
display:inline-block; font-size:11px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
color:var(--ink-faint); background:var(--paper); border:1px solid var(--hairline);
padding:3px 10px; border-radius:999px; margin-bottom:8px;
}
.lm-stripe-placeholder p { font-size:13px; margin:0; line-height:1.5; }
/* ─── SSO debug sectie ───────────────────────────────────────────────────── */
.debug-section { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--hairline); }
.debug-section summary { cursor: pointer; font-size: 13px; color: var(--ink-faint); user-select: none; }
.debug-pre { background: #F7F6F2; border-radius: var(--radius-sm); padding: 14px; font-size: 12px; overflow-x: auto; margin-top: 12px; white-space: pre-wrap; word-break: break-all; }
/* ─── Catalogus ──────────────────────────────────────────────────────────── */
/* Laadindicatie */
.catalogus-laden {
display: flex; flex-direction: column; align-items: center;
gap: 16px; padding: 80px 0; color: var(--ink-soft);
}
.laden-spinner {
width: 36px; height: 36px; border-radius: 50%;
border: 3px solid var(--hairline);
border-top-color: var(--accent);
animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* Breadcrumb */
.breadcrumb {
display: flex; align-items: center; flex-wrap: wrap;
gap: 4px; margin-top: 10px; font-size: 13.5px;
}
.bc-link { color: var(--accent); text-decoration: none; }
.bc-link:hover { text-decoration: underline; }
.bc-current { color: var(--ink-soft); }
.bc-sep { color: var(--ink-faint); margin: 0 2px; }
/* Catalogus body */
/* h1 én h2: sinds de H1-correctie uit docs/SEO-PLAN.md 5.5 is de paginatitel
in .cat-titel-blok een , de sectiekoppen eronder blijven . Dezelfde
opmaak, dus het beeld verandert niet. */
.catalogus-body h1,
.catalogus-body h2 {
font-family: 'Newsreader', serif; font-style: italic; font-weight: 500;
font-size: 26px; color: var(--accent); margin: 28px 0 20px;
}
.results-meta-sub { color: var(--ink-soft); font-size: 14px; margin: -14px 0 20px; }
/* Titel boven catalogus-pagina's (gecentreerd, met sterretje) */
.cat-titel-blok { text-align: center; }
.cat-titel-ster { display: flex; justify-content: center; color: var(--accent); margin: 4px 0 24px; }
/* Kale titel "Hotelcatalogus", alleen zichtbaar op mobiel op de wortel (zie
body.pagina-catalogus-wortel hieronder) i.p.v. h1+sterretje+"Populaire
bestemmingen". Standaard onzichtbaar. */
.cat-mobiel-titel { display: none; font-size: 22px; font-weight: 700; color: var(--accent); text-align: center; margin: 0 0 20px; }
/* Bestemming-kaart met foto (populaire bestemmingen + continenten) */
.dest-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 14px;
}
.dest-kaart {
position: relative;
aspect-ratio: 4 / 3;
border-radius: var(--radius);
overflow: hidden;
background-color: var(--hairline);
background-size: cover;
background-position: center;
display: flex;
align-items: flex-end;
box-shadow: var(--shadow);
transition: transform .18s, box-shadow .18s;
text-decoration: none;
}
.dest-kaart:hover {
transform: translateY(-2px);
box-shadow: 0 10px 28px rgba(24,26,27,.22);
text-decoration: none;
}
.dest-kaart::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(20,20,22,.78) 0%, rgba(20,20,22,.04) 62%);
}
.dest-kaart-inhoud { position: relative; z-index: 1; padding: 16px 18px; width: 100%; }
.dest-kaart-naam { font-size: 17px; font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.dest-kaart-meta { font-size: 12.5px; color: rgba(255,255,255,.85); margin-top: 2px; }
/* Zoekbalk op de catalogusstartpagina */
.cat-zoekbalk-wrap { position: relative; margin: 8px 0 40px; }
.cat-zoekbalk {
width: 100%; border: 1px solid var(--hairline); border-radius: var(--radius-sm);
padding: 14px 18px; font-family: inherit; font-size: 15px;
background: var(--card); color: var(--ink); outline: none;
transition: border-color .15s;
}
.cat-zoekbalk::placeholder { color: var(--ink-faint); }
.cat-zoekbalk:focus { border-color: var(--accent); }
/* Autocomplete-dropdown voor de catalogus-zoekbalk */
.cat-ac-list {
position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 50;
background: var(--card); border: 1px solid var(--hairline);
border-radius: var(--radius-sm); box-shadow: var(--shadow);
list-style: none; padding: 4px 0; margin: 0;
max-height: 340px; overflow-y: auto; display: none;
}
.cat-ac-list.open { display: block; }
.cat-ac-item {
display: flex; align-items: baseline; gap: 10px;
padding: 10px 14px; cursor: pointer; transition: background .1s; font-size: 14.5px;
}
.cat-ac-item:hover, .cat-ac-item.actief { background: var(--accent-soft); }
.cat-ac-item-tekst { font-weight: 500; flex: 1; }
.cat-ac-item-badge {
font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: .06em; padding: 2px 7px; border-radius: 100px;
background: var(--accent-soft); color: var(--accent-deep); white-space: nowrap;
}
.cat-ac-item-badge.land { background: #F0FDF4; color: var(--success); }
.cat-ac-item-badge.keten { background: #FEF9C3; color: #92400E; }
.cat-ac-sectie-kop {
font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
color: var(--ink-faint); padding: 8px 14px 3px; pointer-events: none; user-select: none;
}
.cat-ac-sectie-kop:first-child { padding-top: 6px; }
.cat-ac-mark { background: none; color: var(--accent); font-weight: 700; }
/* Snelfilter op keten/merk: onder de zoekbalk op de catalogus-startpagina,
bovenaan op de overige weergaven (zie catalogus.js) */
.cat-filter-balk {
display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
margin: 0 0 28px;
}
.cat-filter-select {
border: 1px solid var(--hairline); border-radius: var(--radius-sm);
padding: 10px 14px; font-family: inherit; font-size: 14px;
background: var(--card); color: var(--ink); outline: none;
transition: border-color .15s;
}
.cat-filter-select:focus { border-color: var(--accent); }
.cat-filter-select:disabled { color: var(--ink-faint); background: var(--paper); cursor: not-allowed; }
.cat-filter-reset { font-size: 13px; color: var(--ink-soft); }
/* Doorverwijzing naar de wereldkaart (/hotels/kaart), rechts in de
filterbalk. margin-left:auto duwt hem naar de overkant, los van hoeveel
filters ervoor staan. */
.cat-kaart-knop {
margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
padding: 9px 16px; border-radius: var(--radius-pill);
border: 1px solid var(--hairline); background: var(--card);
font-size: 13.5px; font-weight: 600; color: var(--accent-deep);
text-decoration: none; white-space: nowrap;
transition: border-color .15s, background .15s, color .15s;
}
.cat-kaart-knop:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
@media (max-width: 640px) {
.cat-kaart-knop { margin-left: 0; }
}
/* Compacte mobiele wortel (/hotels, geen ?q=/?keten=/?merk=): body.pagina-
catalogus-wortel komt alleen op die kale wortel te staan (zie _bodyClass
in routes/catalogus.js). Titel+ster en de "Populaire bestemmingen"-kop
zijn daar op een telefoon vooral lege ruimte boven de bestemmingskaarten;
het keten/merk-snelfilter (twee selects) verdwijnt hier ten faveure van
vrij zoeken. Zoekbalk en kaartknop blijven wel de primaire manier om
verder te komen, dus die worden zwevend (position:fixed) linksonderin
i.p.v. verwijderd -- vandaar ook geen display:none op .cat-zoekbalk-wrap
of .cat-kaart-knop zelf. */
@media (max-width: 640px) {
body.pagina-catalogus-wortel .cat-titel-blok,
body.pagina-catalogus-wortel .cat-titel-ster,
body.pagina-catalogus-wortel .cat-sectie--populair h2,
body.pagina-catalogus-wortel .cat-filter-select,
body.pagina-catalogus-wortel .cat-filter-reset {
display: none;
}
body.pagina-catalogus-wortel .cat-mobiel-titel { display: block; }
/* .page-intro bevat op de wortel alleen het (lege) kruimelpad -- zonder
stappen levert breadcrumb() niets op, dus dit is een lege div die door
zijn eigen margin-bottom nog wel 28px ruimte claimt (margin-collapse bij
een leeg element). Samen met de standaard 40px padding-top van
.page-content gaf dat op mobiel een onnodig grote, lege strook boven de
titel. */
body.pagina-catalogus-wortel .page-intro { margin-bottom: 0; }
body.pagina-catalogus-wortel .page-content { padding-top: 20px; }
body.pagina-catalogus-wortel .cat-filter-balk { margin-bottom: 0; }
/* width i.p.v. left+right: de WhatsApp/e-mail-FAB's (styles.css, "zwevende
knop") staan zelf al fixed rechtsonder op dezelfde hoogte -- een breedte
tot aan de rechterrand zou hier dus overlappen. min(238px, ...) houdt
het geheel links, met altijd 80px vrij aan de rechterkant voor die twee
knoppen. */
body.pagina-catalogus-wortel .cat-zoekbalk-wrap,
body.pagina-catalogus-wortel .cat-kaart-knop {
position: fixed; left: 16px; right: auto;
width: min(238px, calc(100vw - 96px));
margin: 0; z-index: 150;
}
/* Zelfde compacte hoogte als de kaartknop (9px 16px padding i.p.v. de
ruimere 14px 18px van de losstaande zoekbalk elders op de site). */
body.pagina-catalogus-wortel .cat-zoekbalk-wrap .cat-zoekbalk {
padding: 9px 14px; font-size: 14px;
}
body.pagina-catalogus-wortel .cat-zoekbalk-wrap { bottom: 62px; }
body.pagina-catalogus-wortel .cat-kaart-knop {
bottom: 16px; justify-content: center;
background: var(--card); box-shadow: 0 4px 14px rgba(0,0,0,.14);
}
/* De autocomplete-lijst opent normaliter omlaag (top: calc(100% + 4px));
zo dicht tegen de onderkant van het scherm zou dat 'm grotendeels
buiten beeld duwen. */
body.pagina-catalogus-wortel .cat-zoekbalk-wrap .cat-ac-list {
top: auto; bottom: calc(100% + 4px);
right: auto; width: min(260px, calc(100vw - 32px));
}
}
/* Zoekveld met autocomplete binnen .cat-filter-balk (aanbiedingenpagina):
eigen positioneringscontext zodat de .cat-ac-list-dropdown recht onder
dit veld valt i.p.v. onder de volledige filterbalk. */
.cat-filter-zoek-wrap { position: relative; }
.cat-filter-zoek-wrap .cat-filter-select { width: 100%; }
/* Secties op de catalogus-startpagina */
.cat-sectie { margin-bottom: 40px; }
/* Hotel-grid in catalogus */
.cat-hotel-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 18px;
}
.cat-hotel-kaart {
display: flex; flex-direction: column;
border-radius: var(--radius); overflow: hidden;
border: 1px solid var(--hairline);
background: var(--card);
text-decoration: none; color: var(--ink);
transition: box-shadow .15s, transform .15s;
}
.cat-hotel-kaart:hover {
box-shadow: var(--shadow);
transform: translateY(-2px);
}
.cat-hotel-foto-wrap {
width: 100%; aspect-ratio: 4/3;
background: var(--hairline); overflow: hidden; flex-shrink: 0;
position: relative;
}
.cat-promo-badges {
position: absolute; top: 8px; left: 8px; right: 8px;
display: flex; flex-direction: column; align-items: flex-start; gap: 4px; pointer-events: none;
}
.cat-promo-badge {
display: inline-flex; align-items: center; gap: 5px;
max-width: 100%;
background: rgba(20,21,22,.78); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
color: var(--champagne);
font-size: 12px; font-weight: 700; letter-spacing: .02em;
padding: 5px 10px; border-radius: 999px; line-height: 1.3;
white-space: nowrap;
}
.cat-promo-badge svg { flex-shrink: 0; }
.cat-hotel-foto-wrap.geen-foto {
display: flex; align-items: center; justify-content: center;
}
.cat-hotel-foto-wrap.geen-foto::after {
content: ''; display: block;
width: 32px; height: 32px;
background: var(--hairline);
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B9096' stroke-width='1.5'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E");
mask-size: contain; mask-repeat: no-repeat; mask-position: center;
}
.cat-hotel-foto { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-hotel-naam {
padding: 12px 14px; font-size: 13.5px; font-weight: 600;
line-height: 1.35;
}
/* ─── WhatsApp zwevende knop ──────────────────────────────────────────────── */
.whatsapp-fab {
position: fixed; right: 24px; bottom: 24px; z-index: 100;
width: 54px; height: 54px; border-radius: 50%;
background: #fff; display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 14px rgba(0,0,0,.22);
transition: transform .15s, box-shadow .15s;
}
.whatsapp-fab:hover {
transform: translateY(-2px) scale(1.04);
box-shadow: 0 6px 20px rgba(0,0,0,.28);
text-decoration: none;
}
.whatsapp-fab-tooltip {
position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%);
background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 600;
padding: 6px 12px; border-radius: 7px; white-space: nowrap;
opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s;
}
.whatsapp-fab-tooltip::after {
content: ''; position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
border: 5px solid transparent; border-left-color: var(--ink);
}
.whatsapp-fab:hover .whatsapp-fab-tooltip,
.whatsapp-fab:focus-visible .whatsapp-fab-tooltip {
opacity: 1; transform: translateY(-50%) translateX(-2px);
}
@media (max-width: 480px) {
.whatsapp-fab { right: 16px; bottom: 16px; width: 48px; height: 48px; }
.whatsapp-fab-tooltip { display: none; }
}
/* E-mailknop (boven de WhatsApp-knop) */
.email-fab {
position: fixed; right: 24px; bottom: 90px; z-index: 100;
width: 54px; height: 54px; border-radius: 50%;
background: #fff; display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 14px rgba(0,0,0,.22);
transition: transform .15s, box-shadow .15s;
border: none; padding: 0; cursor: pointer; font: inherit;
}
.email-fab:hover {
transform: translateY(-2px) scale(1.04);
box-shadow: 0 6px 20px rgba(0,0,0,.28);
text-decoration: none;
}
.email-fab-badge {
position: absolute; top: -4px; right: -4px;
width: 19px; height: 19px; border-radius: 50%;
background: var(--accent, #B89E68);
display: flex; align-items: center; justify-content: center;
border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.email-fab-tooltip {
position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%);
background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 600;
padding: 6px 12px; border-radius: 7px; white-space: nowrap;
opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s;
}
.email-fab-tooltip::after {
content: ''; position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
border: 5px solid transparent; border-left-color: var(--ink);
}
.email-fab:hover .email-fab-tooltip,
.email-fab:focus-visible .email-fab-tooltip {
opacity: 1; transform: translateY(-50%) translateX(-2px);
}
@media (max-width: 480px) {
.email-fab { right: 16px; bottom: 74px; width: 48px; height: 48px; }
.email-fab-tooltip { display: none; }
}
/* ─── Hotel-detailpagina foto ────────────────────────────────────────────── */
.hotel-detail-foto-wrap {
position: relative;
margin: -8px 0 24px;
border-radius: var(--radius);
overflow: hidden;
max-height: 280px;
background: var(--hairline);
}
.hotel-detail-foto {
width: 100%; height: 280px;
object-fit: cover; display: block;
}
.fg-promo-voorwaarden { font-size: 12px; color: var(--ink-faint); margin-top: 20px; }
/* ─── Puntensaldi-geschiedenis (profielpagina) ───────────────────────────── */
.profiel-sublabel {
font-size: 12px; font-weight: 600; color: var(--ink-faint);
text-transform: uppercase; letter-spacing: .06em;
margin: 14px 0 6px;
}
.profiel-punten-nieuw { margin-top: 8px; }
/* ─── Profiel: programmakaart-header + saldo + mutatie ───────────────────── */
.profiel-programma-header-rij {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 10px;
}
.profiel-saldo-rij { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.profiel-saldo-getal { font-size: 15px; font-weight: 700; color: var(--ink); }
.profiel-saldo-pending { font-size: 12.5px; color: var(--ink-soft); }
.profiel-historie-link {
font-size: 12px; font-weight: 600; color: var(--accent); text-decoration: none;
padding: 3px 10px; border: 1px solid var(--accent-soft); border-radius: var(--radius-sm);
transition: background .15s; white-space: nowrap; flex-shrink: 0;
}
.profiel-historie-link:hover { background: var(--accent-soft); }
.profiel-mutatie-rij {
display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px; margin-top: 4px;
}
.profiel-mut-omschrijving { flex: 1; min-width: 160px; }
.profiel-pending-lijst { display: flex; flex-direction: column; }
.profiel-pending-entry {
display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px;
padding: 8px 0; border-bottom: 1px solid var(--hairline); font-size: 13px;
}
.profiel-pending-entry:last-child { border-bottom: none; padding-bottom: 0; }
.profiel-pending-naam { flex: 1; min-width: 0; color: var(--ink); }
.profiel-pending-punten { color: var(--ink-soft); white-space: nowrap; }
.profiel-pending-link {
color: var(--accent); text-decoration: none; font-weight: 600;
font-size: 12px; white-space: nowrap;
}
.profiel-pending-link:hover { text-decoration: underline; }
.profiel-promo-lijst { display: flex; flex-direction: column; gap: 4px; margin-bottom: 2px; }
.profiel-promo-rij {
display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px;
font-size: 13px; padding: 5px 0;
border-bottom: 1px solid var(--hairline);
}
.profiel-promo-rij:last-child { border-bottom: none; }
.profiel-promo-badge {
display: inline-block; font-size: 11px; font-weight: 700;
padding: 2px 8px; border-radius: 99px; white-space: nowrap;
}
.profiel-promo-badge--aan { background: #DCFCE7; color: #166534; }
.profiel-promo-badge--niet { background: var(--paper); color: var(--ink-soft); }
.profiel-promo-naam { flex: 1; min-width: 0; color: var(--ink); }
.profiel-promo-verlopen { font-size: 11.5px; color: var(--ink-faint); }
.profiel-promo-beheer {
color: var(--accent); text-decoration: none; font-weight: 600;
font-size: 12px; white-space: nowrap;
}
.profiel-promo-beheer:hover { text-decoration: underline; }
.profiel-veld-groep--programma { padding-bottom: 8px; border-bottom: 1px solid var(--hairline); margin-bottom: 24px; }
.punten-historie-lijst {
display: flex; flex-direction: column; gap: 4px; margin-bottom: 2px;
}
.punten-historie-rij {
display: flex; align-items: center; gap: 10px;
font-size: 13.5px; color: var(--ink-soft);
}
.punten-historie-rij--huidig { color: var(--ink); }
.punten-historie-datum { min-width: 110px; }
.punten-historie-saldo { font-weight: 600; font-variant-numeric: tabular-nums; }
.punten-historie-badge {
font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: .06em; color: var(--accent);
background: var(--accent-soft); padding: 2px 7px; border-radius: 20px;
}
.punten-historie-leeg { font-size: 13px; color: var(--ink-faint); margin-bottom: 4px; }
/* ─── Puntentabje (dashboard) ────────────────────────────────────────────── */
.punten-tabje {
margin-top: 32px; padding: 18px 20px;
background: var(--card); border: 1px solid var(--hairline);
border-radius: var(--radius); box-shadow: var(--shadow);
}
.punten-tabje-header {
display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px;
}
.punten-tabje-titel { font-size: 14px; font-weight: 700; color: var(--ink); }
.punten-tabje-edit { font-size: 12.5px; color: var(--ink-faint); }
.punten-tabje-edit:hover { color: var(--accent); text-decoration: none; }
.punten-tabje-rijen { display: flex; flex-direction: column; gap: 6px; }
.punten-tabje-rij {
display: grid; grid-template-columns: 1fr auto auto;
align-items: center; gap: 12px; font-size: 13.5px;
padding: 6px 0; border-bottom: 1px solid var(--hairline);
}
.punten-tabje-rij:last-child { border-bottom: none; }
.punten-tabje-naam { color: var(--ink-soft); }
.punten-tabje-saldo { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.punten-tabje-datum { color: var(--ink-faint); font-size: 12.5px; min-width: 90px; text-align: right; }
/* ─── Punten & miles — zoekblokken (vlucht: vertrek/aankomst; hotel: continent/tekst) ── */
.pw-zoekblok {
margin: 0 0 20px;
padding: 24px; background: var(--card);
border: 1px solid var(--hairline); border-radius: var(--radius);
box-shadow: var(--shadow);
}
.pw-zoekblok-titel { font-size: 16px; font-weight: 700; margin: 0 0 14px; }
.pw-zoekblok-form { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.pw-zoekblok-veld { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 180px; }
.pw-zoekblok-veld label { font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.pw-zoekblok-veld select,
.pw-zoekblok-veld input[type="text"] {
height: 44px; padding: 0 14px; border-radius: var(--radius-sm);
border: 1.5px solid var(--hairline); background: var(--paper);
font-family: inherit; font-size: 14px; color: var(--ink);
}
.pw-zoekblok-veld select:focus,
.pw-zoekblok-veld input[type="text"]:focus { border-color: var(--accent); outline: none; }
.pw-zoekblok-form .btn { height: 44px; flex-shrink: 0; }
/* ─── Punten & miles — inspiratiekaarten ─────────────────────────────────── */
.pw-sectie-label {
font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
color: var(--ink-soft); margin: 32px 0 12px;
}
/* 3-kaarten grid (voorbeelden) */
.pw-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin-bottom: 8px;
}
.pw-grid--3 {
grid-template-columns: repeat(3, 1fr);
}
/* Inspiratiekaart */
.pw-kaart {
position: relative; border-radius: var(--radius); overflow: hidden;
aspect-ratio: 3/4; cursor: default;
box-shadow: 0 2px 8px rgba(0,0,0,.18);
transition: transform .2s, box-shadow .2s;
}
.pw-kaart:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,.22); }
/* Tag linksboven */
.pw-kaart-tag {
position: absolute; top: 10px; left: 10px; z-index: 2;
font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
padding: 3px 8px; border-radius: 20px;
}
.pw-kaart-tag--haalbaar { background: rgba(22,163,74,.92); color: #fff; }
.pw-kaart-tag--sparen { background: rgba(180,83,9,.88); color: #fff; }
/* Gradient overlay onderaan kaart */
.pw-kaart-overlay {
position: absolute; bottom: 0; left: 0; right: 0;
padding: 40px 14px 14px;
background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.3) 60%, transparent 100%);
color: #fff;
}
.pw-kaart-bestemming {
font-size: 14px; font-weight: 700; line-height: 1.3; margin-bottom: 4px;
}
.pw-kaart-klasse { font-weight: 400; opacity: .85; }
.pw-kaart-kosten { font-size: 12.5px; opacity: .9; margin-bottom: 3px; }
.pw-kaart-sub { font-size: 11.5px; opacity: .75; margin-bottom: 5px; }
.pw-kaart-badge {
display: inline-flex; align-items: center; gap: 3px;
font-size: 10.5px; font-weight: 700; padding: 2px 8px;
border-radius: 20px; margin-top: 2px;
}
.pw-kaart-badge--ok { background: rgba(22,163,74,.9); color: #fff; }
.pw-kaart-badge--voortgang { background: rgba(245,158,11,.85); color: #fff; }
/* ─── Award advies CTA-balk ──────────────────────────────────────────────── */
.pw-advies-balk {
display: flex; align-items: center; justify-content: space-between;
gap: 20px; flex-wrap: wrap;
margin: 28px 0;
padding: 20px 24px;
background: linear-gradient(135deg, var(--ink) 0%, var(--charcoal) 100%);
border-radius: var(--radius);
box-shadow: 0 4px 16px rgba(26,27,29,.20);
}
.pw-advies-tekst {
color: rgba(255,255,255,.92); font-size: 14.5px; line-height: 1.5;
}
.pw-advies-tekst strong { color: #fff; display: block; font-size: 15.5px; margin-bottom: 3px; }
.pw-advies-btn {
background: #fff; color: var(--accent-deep);
border: none; white-space: nowrap; flex-shrink: 0;
font-weight: 700;
}
.pw-advies-btn:hover { background: #f0f6ff; text-decoration: none; }
/* ─── Zoekresultaten ──────────────────────────────────────────────────────── */
.pw-geen-resultaten {
padding: 20px; color: var(--ink-soft); font-size: 14px;
background: var(--card); border: 1px solid var(--hairline);
border-radius: var(--radius-sm);
}
.pw-zoek-meer { text-align: center; margin: 18px 0 8px; }
/* Resultaten naast elkaar i.p.v. onder elkaar. Hotelkaarten zijn compact (1
klasse-rij "per nacht") en passen 3 naast elkaar; vluchtkaarten kunnen meerdere
programma's/klassen bevatten en krijgen daarom meer ruimte, 2 naast elkaar. */
.pw-zoek-grid {
display: grid; gap: 16px; margin-bottom: 8px;
}
.pw-zoek-grid--hotel { grid-template-columns: repeat(3, 1fr); }
.pw-zoek-grid--vlucht { grid-template-columns: repeat(2, 1fr); }
.pw-zoek-bestemming {
background: var(--card); border: 1px solid var(--hairline);
border-radius: var(--radius); box-shadow: var(--shadow);
overflow: hidden;
}
.pw-zoek-titel {
font-size: 17px; font-weight: 700; margin: 0;
padding: 16px 20px 14px; border-bottom: 1px solid var(--hairline);
}
.pw-zoek-opties { padding: 16px 20px; display: flex; flex-direction: column; gap: 20px; }
.pw-zoek-programma-header {
display: flex; align-items: baseline; gap: 8px;
font-size: 13px; font-weight: 700; margin-bottom: 8px;
}
.pw-zoek-mij { font-weight: 400; color: var(--ink-faint); font-size: 12px; }
.pw-zoek-klasse {
border: 1px solid var(--hairline); border-radius: var(--radius-sm);
padding: 11px 14px; margin-bottom: 8px; background: var(--paper);
}
.pw-zoek-klasse--ok { background: #F0FDF4; border-color: #BBF7D0; }
.pw-zoek-klasse--voortgang { background: #FFFBEB; border-color: #FDE68A; }
.pw-zoek-klasse-header {
display: flex; justify-content: space-between; align-items: baseline;
margin-bottom: 8px;
}
.pw-zoek-klasse-naam { font-size: 13px; font-weight: 700; }
.pw-zoek-klasse-kosten { font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.pw-spaardoel-form { margin-top: 8px; }
.pw-spaardoel-btn { width: 100%; text-align: center; }
/* Route-rijen in zoekresultaten */
.pw-rr {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
font-size: 13px; padding: 4px 0;
}
.pw-rr--voortgang { gap: 8px; }
.pw-rr-badge {
display: inline-flex; font-size: 11.5px; font-weight: 700;
padding: 2px 9px; border-radius: 20px; white-space: nowrap;
}
.pw-rr-badge--ok { background: #DCFCE7; color: #166534; }
.pw-rr-kosten { color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.pw-rr-pct { font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
.pw-mini-bar {
width: 60px; height: 4px; background: var(--hairline);
border-radius: 2px; overflow: hidden; flex-shrink: 0;
}
.pw-mini-fill { height: 100%; background: #F59E0B; border-radius: 2px; }
/* Uitklap overige routes */
.pw-overige { margin-top: 6px; }
.pw-overige-sum {
font-size: 12px; color: var(--accent); cursor: pointer; list-style: none;
display: inline-flex; align-items: center; gap: 3px;
}
.pw-overige-sum::-webkit-details-marker { display: none; }
.pw-overige-sum::before { content: '▸'; transition: transform .15s; }
details[open] .pw-overige-sum::before { transform: rotate(90deg); }
.pw-overige-lijst { margin-top: 4px; padding-left: 4px; }
/* ─── Punten & miles pagina (oud detail-blok, nog aanwezig voor later) ─────── */
.pw-sectie { margin-bottom: 48px; }
.pw-sectie-titel {
font-size: 20px; font-weight: 700; color: var(--ink);
margin-bottom: 20px; padding-bottom: 10px;
border-bottom: 2px solid var(--hairline);
}
/* Bestemmingen grid */
.pw-bestemmingen { display: flex; flex-direction: column; gap: 20px; }
.pw-bestemming {
background: var(--card); border: 1px solid var(--hairline);
border-radius: var(--radius); box-shadow: var(--shadow);
overflow: hidden;
}
.pw-bestemming-titel {
font-size: 16px; font-weight: 700; padding: 16px 20px 12px;
border-bottom: 1px solid var(--hairline); margin: 0;
}
.pw-bestemming--ok .pw-bestemming-titel { border-left: 3px solid var(--success); }
.pw-bestemming--voortgang .pw-bestemming-titel { border-left: 3px solid #F59E0B; }
.pw-bestemming--inspiratie .pw-bestemming-titel { border-left: 3px solid var(--hairline); color: var(--ink-soft); }
.pw-programma-opties { padding: 16px 20px; display: flex; flex-direction: column; gap: 20px; }
.pw-programma-blok { display: flex; flex-direction: column; gap: 10px; }
.pw-programma-header {
display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px;
}
.pw-programma-naam { font-size: 13px; font-weight: 700; color: var(--ink); }
.pw-programma-mij { font-size: 12px; color: var(--ink-faint); }
/* Klasse-kaarten */
.pw-klassen-lijst { display: flex; flex-direction: column; gap: 8px; }
.pw-klasse-kaart {
border: 1px solid var(--hairline); border-radius: var(--radius-sm);
padding: 12px 14px; background: var(--paper);
}
.pw-klasse-kaart--ok { background: #F0FDF4; border-color: #BBF7D0; }
.pw-klasse-kaart--voortgang { background: #FFFBEB; border-color: #FDE68A; }
.pw-klasse-kaart--inspiratie { background: var(--card); }
.pw-klasse-header {
display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
margin-bottom: 8px;
}
.pw-klasse-naam { font-size: 13px; font-weight: 700; color: var(--ink); }
.pw-klasse-kosten{ font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
/* Route-rij */
.pw-route-rij {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; flex-wrap: wrap; font-size: 13px;
}
.pw-route-rij--compact { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--hairline); }
.pw-route-direct { color: var(--ink-soft); }
.pw-route-transfer {
color: var(--ink-soft);
display: flex; align-items: center; gap: 4px;
}
/* Badges */
.pw-badge {
display: inline-flex; align-items: center; gap: 4px;
font-size: 12px; font-weight: 700; padding: 3px 10px;
border-radius: 20px; white-space: nowrap;
}
.pw-badge--ok {
background: #DCFCE7; color: #166534;
}
.pw-badge--inspiratie {
background: var(--paper); color: var(--ink-faint);
border: 1px solid var(--hairline); font-weight: 500;
}
/* Voortgangsbalk */
.pw-progress-wrap { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.pw-progress-bar {
width: 80px; height: 5px; background: var(--hairline);
border-radius: 3px; overflow: hidden;
}
.pw-progress-fill {
height: 100%; background: #F59E0B; border-radius: 3px; transition: width .3s;
}
.pw-progress-txt { font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
/* Uitklap overige routes */
.pw-overige { margin-top: 6px; }
.pw-overige-summary {
font-size: 12px; color: var(--accent); cursor: pointer;
list-style: none; display: inline-flex; align-items: center; gap: 4px;
}
.pw-overige-summary::-webkit-details-marker { display: none; }
.pw-overige-summary::before { content: '▸'; transition: transform .15s; }
details[open] .pw-overige-summary::before { transform: rotate(90deg); }
.pw-overige-lijst { margin-top: 4px; }
/* Hotels */
.pw-hotel-programma { margin-bottom: 24px; }
.pw-hotel-programma-titel {
font-size: 14px; font-weight: 700; color: var(--ink);
margin-bottom: 10px; padding-bottom: 6px;
border-bottom: 1px solid var(--hairline);
}
.pw-hotel-items { display: flex; flex-direction: column; gap: 8px; }
.pw-hotel-kaart {
border: 1px solid var(--hairline); border-radius: var(--radius-sm);
padding: 14px 16px; background: var(--card);
}
.pw-hotel-kaart--ok { background: #F0FDF4; border-color: #BBF7D0; }
.pw-hotel-kaart--voortgang { background: #FFFBEB; border-color: #FDE68A; }
.pw-hotel-kaart--inspiratie { background: var(--card); }
.pw-hotel-header {
display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
margin-bottom: 6px;
}
.pw-hotel-naam { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.pw-hotel-kosten { font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.pw-opmerking {
display: block; font-size: 12px; color: var(--ink-soft);
margin-bottom: 6px; font-style: italic;
}
.pw-status-tag {
display: inline-flex; align-items: center; gap: 4px;
font-size: 11.5px; font-weight: 600; padding: 2px 8px;
border-radius: 4px; margin-bottom: 8px;
}
.pw-status-tag--ok { background: #DCFCE7; color: #166534; }
.pw-status-tag--nee { background: #FEF2F2; color: #991B1B; }
.pw-status-tag--neutraal{ background: var(--paper); color: var(--ink-soft); border: 1px solid var(--hairline); }
/* ─── Promotie-chips & popup (dashboard + profiel) ──────────────────────── */
.profiel-promotie-chip {
display: inline-flex; align-items: center; gap: 8px;
border: 1.5px solid var(--hairline);
border-radius: var(--radius-sm);
padding: 6px 12px;
font-size: 13px; font-weight: 500;
color: var(--ink); background: var(--card);
cursor: pointer; transition: border-color .15s, background .15s;
font-family: inherit;
}
.profiel-promotie-chip:hover { border-color: var(--accent); }
.profiel-promotie-chip--aangevraagd { background: #F0FDF4; border-color: #BBF7D0; color: #166534; }
.profiel-promotie-bol {
display: inline-block; width: 10px; height: 10px;
border-radius: 50%; flex-shrink: 0;
}
.profiel-promotie-bol--groen { background: #16A34A; }
.profiel-promotie-bol--oranje { background: #D97706; }
.profiel-promotie-bol--rood { background: #DC2626; }
.profiel-promo-overlay {
display: none; position: fixed; inset: 0;
background: rgba(0,0,0,.45); z-index: 1000;
}
.profiel-promo-overlay.open { display: block; }
.profiel-promo-modal {
display: none; position: fixed;
top: 50%; left: 50%; transform: translate(-50%,-50%);
width: min(560px, calc(100vw - 32px));
background: var(--card); border-radius: var(--radius);
padding: 28px; z-index: 1001;
box-shadow: 0 8px 32px rgba(0,0,0,.18);
}
.profiel-promo-overlay.open .profiel-promo-modal { display: block; }
.profiel-promo-sluiten {
position: absolute; top: 14px; right: 16px;
background: none; border: none; cursor: pointer;
font-size: 16px; color: var(--ink-faint); padding: 4px 8px;
border-radius: 4px; transition: color .15s, background .15s;
}
.profiel-promo-sluiten:hover { color: var(--ink); background: var(--paper); }
.profiel-promo-titel { font-size: 16px; font-weight: 700; margin-bottom: 12px; padding-right: 32px; line-height: 1.4; }
.profiel-promo-uitleg { font-size: 13.5px; color: var(--ink-soft); margin-bottom: 14px; display: flex; align-items: flex-start; gap: 8px; line-height: 1.55; }
.profiel-promo-tekst { font-size: 14px; line-height: 1.65; margin-bottom: 14px; }
.profiel-promo-disclaimer { font-size: 12px; color: var(--ink-faint); font-style: italic; line-height: 1.55; margin-bottom: 16px; }
/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
.kamer-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
.pw-zoekblok-form { flex-direction: column; align-items: stretch; }
.pw-grid--3 { grid-template-columns: repeat(2, 1fr); }
.pw-zoek-grid--hotel { grid-template-columns: repeat(2, 1fr); }
.pw-zoek-grid--vlucht { grid-template-columns: 1fr; }
.dash-zoekwidget { display: block; margin-bottom: 24px; }
.dash-welkom-titel { text-align: center; }
.dash-welkom-ster { display: flex; justify-content: center; margin: 10px 0; }
.search-panel { grid-template-columns: 1fr 1fr; }
.search-field + .search-field { border-left: none; }
.search-btn { grid-column: 1 / -1; padding: 14px; }
.card-link { grid-template-columns: 1fr; }
.hotel-kaart { height: auto; }
.hotel-foto-wrap { width: 100%; height: 140px; border-radius: var(--radius) var(--radius) 0 0; }
.hotel-info { padding: 16px 20px; }
.hotel-kaart .price-block { padding: 14px 20px 20px; }
.price-block { text-align: left; align-items: flex-start; border-top: 1px solid var(--hairline); padding-top: 14px; margin-top: 4px; }
.hb-info-form .card { padding: 24px 20px; }
.data-table .col-acties { display: none; }
.data-table .col-uitcheck { display: none; }
.data-table th:nth-last-child(2), .data-table td:nth-last-child(2) { padding-right: 20px; }
.kal-popup { width: min(320px, calc(100vw - 32px)); }
.kal-nav-btn { width: 44px; height: 44px; }
}
/* Losse, bredere breakpoint voor de hamburgeromslag zelf: bij vijf links
(Boek direct/Hotelcatalogus/Aanbiedingen/Lidmaatschap/Inloggen) past de
volledige topnav pas vanaf ongeveer 790px naast het woordmerk. Tussen de
720px hierboven en die 790px brak "Boek direct" af en botste tegen het
logo (getest op 768px, een gangbare tablet-portreitbreedte). 880px geeft
daar marge boven op. Bewust een los blok i.p.v. verhogen van het blok
hierboven: de rest van dat blok (kaarten, tabellen, kalenderpopup, ...)
hoeft pas bij 720px te schakelen. */
@media (max-width: 880px) {
.nav-toggle { display: grid; place-items: center; }
.topnav a { display: none; }
.topnav a.avatar-link { display: grid; }
.topnav form { display: none; }
.topnav.open {
position: absolute;
top: 64px; left: 0; right: 0;
flex-direction: column;
align-items: stretch;
gap: 0;
background: var(--card);
border-bottom: 1px solid var(--hairline);
box-shadow: var(--shadow);
padding: 8px 0;
z-index: 20;
}
.topnav.open a { display: block; padding: 14px 24px; font-size: 15px; }
.topnav.open a.avatar-link { display: none; }
.topnav.open form { display: block; padding: 4px 24px 14px; }
.topnav.open .nav-uitloggen { width: 100%; text-align: left; padding: 10px 0; font-size: 15px; }
}
@media (max-width: 480px) {
.wrap { padding: 0 16px; }
.search-panel { grid-template-columns: 1fr; padding: 4px; }
.search-field + .search-field { border-left: none; border-top: 1px solid var(--hairline); }
.guest-row { flex-direction: column; align-items: flex-start; }
#cc-widget { height: 480px; }
.pw-grid--3 { grid-template-columns: 1fr; }
.pw-zoek-grid--hotel { grid-template-columns: 1fr; }
}
/* ─── Beheer-navigatie ───────────────────────────────────────────────────── */
.beheer-nav { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:24px; }
.beheer-nav a { font-size:13.5px; font-weight:500; color:var(--ink-soft); background:var(--card); border:1px solid var(--hairline); border-radius:var(--radius-sm); padding:6px 14px; text-decoration:none; }
.beheer-nav a:hover { color:var(--ink); border-color:var(--accent); }
.beheer-nav a.actief { background:var(--charcoal); color:var(--champagne); border-color:var(--charcoal); }
.beheer-nav a.actief:hover { background:var(--ink); color:var(--champagne); }
.beheer-nav-badge {
display: inline-block; margin-left: 6px; padding: 1px 7px;
border-radius: 100px; background: var(--danger); color: #fff;
font-size: 11px; font-weight: 700;
}
.beheer-nav-badge[hidden] { display: none; }
/* ─── Kalender range-picker (gedeeld: zoeken + hotel) ───────────────────────── */
.sf-periode { position: relative; grid-column: span 2; }
.sf-periode-display {
width: 100%; border: none; background: transparent; outline: none;
font-family: inherit; font-size: 15.5px; font-weight: 500; color: var(--ink);
margin-top: 3px; cursor: pointer; white-space: nowrap;
overflow: hidden; text-overflow: ellipsis; display: block;
}
.sf-periode-display.placeholder { color: var(--ink-faint); font-weight: 400; }
.hotel-kal-trigger {
position: relative;
width: 100%; padding: 10px 14px;
border: 1px solid var(--hairline); border-radius: var(--radius-sm);
background: var(--card); cursor: pointer;
transition: border-color .15s;
}
.hotel-kal-trigger:hover, .hotel-kal-trigger.open { border-color: var(--accent); }
.hotel-kal-display {
font-family: inherit; font-size: 15px; font-weight: 500; color: var(--ink);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hotel-kal-display.placeholder { color: var(--ink-faint); font-weight: 400; }
.kal-popup {
display: none; position: absolute; top: calc(100% + 8px); left: 0; z-index: 200;
background: var(--card); border: 1px solid var(--hairline);
border-radius: var(--radius); box-shadow: 0 4px 24px rgba(24,26,27,.14);
padding: 16px; width: 300px; user-select: none;
}
.kal-popup.open { display: block; }
.kal-nav-rij {
display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px;
}
.kal-maand-titel { font-size: 14px; font-weight: 700; color: var(--ink); }
.kal-nav-btn {
background: none; border: none; cursor: pointer; font-size: 20px;
color: var(--ink-soft); width: 30px; height: 30px; border-radius: var(--radius-sm);
display: grid; place-items: center; line-height: 1; transition: background .1s, color .1s;
}
.kal-nav-btn:hover { background: var(--accent-soft); color: var(--accent); }
.kal-weekdagen { display: grid; grid-template-columns: repeat(7,1fr); margin-bottom: 6px; }
.kal-weekdagen span {
text-align: center; font-size: 11px; font-weight: 700; color: var(--ink-faint); padding: 2px 0;
}
.kal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 1px; }
.kal-dag {
aspect-ratio: 1; border: none; background: transparent; cursor: pointer;
font-family: inherit; font-size: 13px; font-weight: 400; color: var(--ink);
border-radius: 50%; display: grid; place-items: center; transition: background .1s, color .1s;
}
.kal-dag:not(:disabled):not(.kal-dag--start):not(.kal-dag--eind):hover {
background: var(--accent-soft); color: var(--accent);
}
.kal-dag--leeg { visibility: hidden; cursor: default; }
.kal-dag--verleden { color: var(--ink-faint) !important; cursor: default; }
.kal-dag--start, .kal-dag--eind {
background: var(--accent) !important; color: #fff !important;
font-weight: 700; border-radius: 50%;
}
.kal-dag--range { background: var(--accent-soft); color: var(--accent); border-radius: 4px; }
.kal-voet {
display: flex; align-items: center; justify-content: space-between;
padding-top: 12px; margin-top: 12px; border-top: 1px solid var(--hairline);
}
.kal-nacht-tekst { font-size: 13px; font-weight: 500; color: var(--ink-soft); }
.kal-nacht-stepper { display: flex; align-items: center; gap: 8px; }
.kal-nacht-btn {
width: 26px; height: 26px; border: 1px solid var(--hairline); border-radius: 50%;
background: var(--card); color: var(--accent); font-size: 16px; cursor: pointer;
display: grid; place-items: center; transition: border-color .1s, background .1s;
}
.kal-nacht-btn:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); }
.kal-nacht-btn:disabled { opacity: .35; cursor: not-allowed; }
.kal-nacht-waarde { font-size: 13px; font-weight: 700; min-width: 18px; text-align: center; }
/* ─── Losse-datum-kalender (/profiel, meerdere instanties per pagina) ─────── */
.kal-datum-widget { position: relative; display: inline-block; }
.profiel-datum-trigger {
height: 38px; width: 150px; padding: 0 12px; border: 1px solid var(--hairline);
border-radius: var(--radius-sm); background: var(--card); color: var(--ink);
font-family: inherit; font-size: 14px; text-align: left; cursor: pointer;
}
.profiel-datum-trigger:hover { border-color: var(--accent); }
.profiel-datum-trigger span.placeholder { color: var(--ink-faint); }
/* ─── Tijd-kolommen (initKalenderTijd), zelfde kal-popup als de datum-kalender ── */
.kal-tijd-widget { position: relative; display: inline-block; }
.kal-tijd-kolommen { display: flex; gap: 10px; }
.kal-tijd-kolom-wrap { flex: 1; min-width: 0; }
.kal-tijd-label {
font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
color: var(--ink-faint); text-align: center; margin-bottom: 6px;
}
.kal-tijd-kolom {
max-height: 190px; overflow-y: auto; scrollbar-width: thin;
display: flex; flex-direction: column; gap: 1px;
}
.kal-tijd-optie {
border: none; background: transparent; padding: 7px 0; border-radius: var(--radius-sm);
font-family: inherit; font-size: 13.5px; color: var(--ink); cursor: pointer; text-align: center;
transition: background .1s, color .1s;
}
.kal-tijd-optie:hover { background: var(--accent-soft); color: var(--accent); }
.kal-tijd-optie--actief { background: var(--accent); color: #fff; font-weight: 700; }
.kal-tijd-gereed { margin-top: 12px; width: 100%; }
/* ─── Reisplanner: datum-/tijdknop, zelfde afmeting als de tekstvelden ernaast ── */
.rp-datum-btn, .rp-tijd-btn {
width: 100%; padding: 10px 14px; border: 1px solid var(--hairline); border-radius: var(--radius-sm);
font-family: inherit; font-size: 15px; color: var(--ink); background: var(--card);
text-align: left; cursor: pointer; transition: border-color .15s;
}
.rp-datum-btn:hover, .rp-tijd-btn:hover, .rp-datum-btn.open, .rp-tijd-btn.open { border-color: var(--accent); }
.rp-datum-btn span.placeholder, .rp-tijd-btn span.placeholder { color: var(--ink-faint); }
/* ─── Loyalty Logboek ────────────────────────────────────────────────────── */
.llog-handmatig { margin-bottom:28px; }
.llog-handmatig-kop { font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:14px; }
.llog-handmatig-velden { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; }
.llog-handmatig-velden .form-group { margin:0; }
.llog-handmatig-punten-veld { width:150px; }
.llog-handmatig-submit { padding-bottom:1px; }
.llog-lijst { display:flex; flex-direction:column; gap:10px; }
.llog-entry { background:var(--card); border:1px solid var(--hairline); border-radius:var(--radius); padding:14px 18px; }
.llog-entry--pending { border-left:3px solid var(--accent); }
.llog-meta { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:6px; }
.llog-datum { font-size:12.5px; color:var(--ink-soft); }
.llog-type-badge { display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:99px; letter-spacing:.03em; }
.llog-type-badge--kaart { background:#EEF2FF; color:#3730A3; }
.llog-type-badge--status { background:#FEF3C7; color:#92400E; }
.llog-type-badge--promotie { background:var(--accent-soft); color:var(--accent-deep); }
.llog-type-badge--boeking { background:#E8F5E9; color:#1B5E20; }
.llog-type-badge--handmatig { background:var(--paper); color:var(--ink-soft); }
.llog-badge { display:inline-block; font-size:11px; font-weight:600; padding:2px 8px; border-radius:99px; }
.llog-badge--pending { background:#FEF3C7; color:#92400E; }
.llog-inhoud { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.llog-tekst { font-size:14px; color:var(--ink); line-height:1.45; }
.llog-verwijder-form { flex-shrink:0; }
.llog-verwijder-knop { background:none; border:none; color:var(--ink-faint); cursor:pointer; font-size:13px; padding:2px 4px; border-radius:4px; line-height:1; }
.llog-verwijder-knop:hover { color:var(--danger); background:var(--paper); }
.llog-punten-verwacht { margin-top:8px; font-size:13px; color:var(--ink-soft); }
.llog-punten-bevestigd { margin-top:8px; font-size:13.5px; font-weight:600; }
.llog-punten--plus { color:#166534; }
.llog-punten--min { color:var(--danger); }
.llog-bevestig-form { margin-top:10px; }
.llog-bevestig-label { display:block; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); margin-bottom:6px; }
.llog-bevestig-rij { display:flex; gap:8px; align-items:center; }
.llog-punten-input { width:130px; padding:7px 10px; border:1px solid var(--hairline); border-radius:var(--radius-sm); font-size:14px; font-family:inherit; background:var(--bg); color:var(--ink); }
.llog-leeg { color:var(--ink-soft); font-size:14px; padding:24px 0; }
/* ─── Loyalty Logboek: per-programma layout ─────────────────────────────── */
.llog-programma-lijst { display:flex; flex-direction:column; gap:20px; }
.llog-programma-sectie {
border:1px solid var(--hairline); border-radius:var(--radius); overflow:hidden;
}
.llog-programma-header {
display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px;
padding:14px 18px; background:var(--paper); border-bottom:1px solid var(--hairline);
}
.llog-programma-naam { font-size:14px; font-weight:700; color:var(--ink); }
.llog-programma-saldo { display:flex; align-items:baseline; gap:8px; }
.llog-saldo-getal { font-size:14px; font-weight:600; color:var(--ink); }
.llog-pending-saldo { font-size:12.5px; color:var(--ink-soft); }
.llog-entries { padding:10px 18px; display:flex; flex-direction:column; gap:0; }
/* Entries binnen programma-sectie: geen eigen card-styling, wel scheidingslijn */
.llog-programma-sectie .llog-entry {
background:transparent; border:none; border-radius:0;
padding:10px 0; border-bottom:1px solid var(--hairline);
}
.llog-programma-sectie .llog-entry:last-child { border-bottom:none; }
.llog-programma-sectie .llog-entry--pending { border-left:3px solid var(--accent); padding-left:10px; }
.llog-entry-main {
display:flex; align-items:center; flex-wrap:wrap; gap:8px;
}
.llog-punten-delta { font-weight:600; font-size:14px; margin-left:auto; white-space:nowrap; }
.llog-punten-verwacht-inline { font-size:12.5px; color:var(--ink-soft); margin-left:auto; white-space:nowrap; }
.llog-bevestig-form-inline {
display:flex; gap:6px; align-items:center; margin-top:6px; flex-wrap:wrap;
}
/* ─── Beheer-boekingen ───────────────────────────────────────────────────── */
.beheer-filterbalk { display:flex; flex-direction:column; gap:12px; margin-top:16px; }
.beheer-pil-rij, .beheer-zoek-rij { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.beheer-pil {
display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
font-size:13px; font-weight:500; padding:6px 14px;
border-radius:var(--radius-pill); border:1px solid var(--hairline);
background:var(--card); color:var(--ink-soft); cursor:pointer; text-decoration:none; line-height:1.3;
}
.beheer-pil:hover { color:var(--ink); border-color:var(--accent); }
.beheer-pil.actief { background:var(--charcoal); color:var(--champagne); border-color:var(--charcoal); }
.beheer-periode-datum { position:relative; }
.beheer-periode-datum .kal-voet { display:none !important; }
.beheer-reset-knop { margin-left:auto; }
.beheer-zoek-rij input[type="text"] { font-size:13.5px; padding:6px 10px; border:1px solid var(--hairline); border-radius:var(--radius-sm); background:var(--card); color:var(--ink); }
/* ─── Beheer-dashboard ───────────────────────────────────────────────────── */
.beheer-titel-rij { display:flex; align-items:center; gap:10px; }
.beheer-titel-ster { color:var(--accent); flex-shrink:0; }
.beheer-dash { display:flex; flex-direction:column; }
.beheer-dash-sectie { display:flex; flex-direction:column; gap:16px; }
.beheer-dash-sectie + .beheer-dash-sectie { margin-top:34px; }
.beheer-dash-sectie-titel {
display:flex; align-items:center; gap:10px;
font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.07em;
color:var(--ink-soft); margin:0;
}
.beheer-dash-sectie-lijn { width:24px; height:2px; background:var(--champagne); flex-shrink:0; }
.beheer-dash-rij { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; align-items:stretch; }
@media (max-width:900px) { .beheer-dash-rij { grid-template-columns:1fr; } }
.beheer-stat-kaart {
display:flex; flex-direction:column;
background:var(--card); border:1px solid var(--hairline); border-radius:var(--radius);
box-shadow:var(--shadow); padding:18px 20px;
}
.beheer-stat-kaart--klikbaar { cursor:pointer; transition:border-color .15s, box-shadow .15s; }
.beheer-stat-kaart--klikbaar:hover { border-color:var(--accent); box-shadow:0 2px 8px rgba(24,26,27,.08); }
.beheer-stat-titel {
font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
color:var(--ink-soft); margin:0 0 12px;
}
.beheer-stat-groot { font-size:27px; font-weight:800; color:var(--ink); line-height:1.15; }
.beheer-stat-sub { font-size:12.5px; color:var(--ink-faint); margin-top:4px; }
.beheer-stat-sub-link { font-size:12px; color:var(--ink-soft); margin-top:auto; padding-top:12px; }
.beheer-stat-nacht {
display:flex; align-items:baseline; gap:6px;
margin-top:auto; padding-top:12px; border-top:1px solid var(--hairline);
}
.beheer-stat-nacht-getal { font-size:16px; font-weight:700; color:var(--accent-deep); }
.beheer-stat-nacht-label { font-size:12px; color:var(--ink-soft); }
.beheer-stat-sectie { margin-top:16px; padding-top:14px; border-top:1px solid var(--hairline); }
.beheer-stat-sectie-titel { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); margin-bottom:6px; }
.beheer-stat-mini-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px 14px; margin-top:14px; }
.beheer-stat-mini-getal { font-size:18px; font-weight:700; color:var(--ink); }
.beheer-stat-mini-label { font-size:11px; color:var(--ink-soft); margin-top:1px; }
.beheer-tier-rij { display:flex; gap:8px; }
.beheer-tier-chip { flex:1; text-align:center; border-radius:var(--radius-sm); padding:11px 4px; }
.beheer-tier-chip-getal { font-size:20px; font-weight:800; line-height:1.1; }
.beheer-tier-chip-label { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; margin-top:3px; opacity:.85; }
.beheer-tier-chip--basic { background:#E3E5E9; color:#3F444B; }
.beheer-tier-chip--lite { background:var(--accent); color:var(--ink); }
.beheer-tier-chip--platinum { background:#43474E; color:#F5F6F7; }
.beheer-tier-chip--ultimate { background:var(--charcoal); color:var(--champagne); }
.beheer-lijst { display:flex; flex-direction:column; margin-top:6px; }
.beheer-lijst-item { display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid var(--hairline); font-size:13px; }
.beheer-lijst-item:last-child { border-bottom:none; }
.beheer-lijst-item:hover { background:var(--paper); margin:0 -8px; padding:7px 8px; border-radius:6px; }
.beheer-lijst-rang { font-size:11.5px; font-weight:700; color:var(--ink-faint); width:14px; flex-shrink:0; }
.beheer-lijst-naam { flex:1; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.beheer-lijst-sub { font-size:11.5px; color:var(--ink-faint); white-space:nowrap; }
.beheer-lijst-waarde { font-size:13px; font-weight:700; color:var(--accent-deep); white-space:nowrap; flex-shrink:0; }
.beheer-lijst-leeg { font-size:13px; color:var(--ink-soft); padding:10px 0; }
.beheer-splitsing { display:flex; gap:28px; }
.beheer-splitsing-getal { font-size:26px; font-weight:800; line-height:1.1; }
.beheer-splitsing-getal--open { color:#B45309; }
.beheer-splitsing-getal--afgerond { color:#166534; }
.beheer-splitsing-getal--achterstallig { color:#DC2626; }
.beheer-splitsing-label { font-size:11.5px; color:var(--ink-soft); margin-top:2px; }
/* ─── Beheer-tabel (boekingen/aanvragen/leden-overzicht) ─────────────────── */
.beheer-tabel { width:100%; border-collapse:collapse; font-size:13.5px; }
.beheer-tabel th { text-align:left; font-size:11px; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.05em; padding:8px 12px; border-bottom:2px solid var(--hairline); white-space:nowrap; }
.beheer-tabel td { padding:10px 12px; border-bottom:1px solid var(--hairline); vertical-align:top; }
.beheer-tabel tr:last-child td { border-bottom:none; }
.beheer-tabel tr:hover td { background:var(--paper); }
.beheer-tabel th a { color:inherit; text-decoration:none; }
.beheer-tabel th a:hover { color:var(--ink); text-decoration:underline; }
.beheer-tabel--boekingen { table-layout:fixed; }
.beheer-tabel--boekingen th { white-space:normal; }
.beheer-tabel--boekingen td { word-wrap:break-word; overflow-wrap:break-word; }
.beheer-tabel--boekingen th:nth-child(1), .beheer-tabel--boekingen td:nth-child(1) { width:13%; }
.beheer-tabel--boekingen th:nth-child(2), .beheer-tabel--boekingen td:nth-child(2) { width:25%; }
.beheer-tabel--boekingen th:nth-child(3), .beheer-tabel--boekingen td:nth-child(3) { width:20%; }
.beheer-tabel--boekingen th:nth-child(4), .beheer-tabel--boekingen td:nth-child(4) { width:11%; }
.beheer-tabel--boekingen th:nth-child(5), .beheer-tabel--boekingen td:nth-child(5) { width:11%; }
.beheer-tabel--boekingen th:nth-child(6), .beheer-tabel--boekingen td:nth-child(6) { width:10%; }
.beheer-tabel--boekingen th:nth-child(7), .beheer-tabel--boekingen td:nth-child(7) { width:10%; }
.beheer-tabel--aanvragen { table-layout:fixed; }
.beheer-tabel--aanvragen th { white-space:normal; word-wrap:break-word; overflow-wrap:anywhere; }
.beheer-tabel--aanvragen td { white-space:normal; word-wrap:break-word; overflow-wrap:anywhere; }
.beheer-tabel--aanvragen th:nth-child(1), .beheer-tabel--aanvragen td:nth-child(1) { width:13%; }
.beheer-tabel--aanvragen th:nth-child(2), .beheer-tabel--aanvragen td:nth-child(2) { width:32%; }
.beheer-tabel--aanvragen th:nth-child(3), .beheer-tabel--aanvragen td:nth-child(3) { width:14%; }
.beheer-tabel--aanvragen th:nth-child(4), .beheer-tabel--aanvragen td:nth-child(4) { width:10%; }
.beheer-tabel--aanvragen th:nth-child(5), .beheer-tabel--aanvragen td:nth-child(5) { width:10%; }
.beheer-tabel--aanvragen th:nth-child(6), .beheer-tabel--aanvragen td:nth-child(6) { width:11%; }
.beheer-tabel--aanvragen th:nth-child(7), .beheer-tabel--aanvragen td:nth-child(7) { width:10%; }
.beheer-tabel--upgradechecks { table-layout:fixed; }
.beheer-tabel--upgradechecks th { white-space:normal; word-wrap:break-word; overflow-wrap:anywhere; }
.beheer-tabel--upgradechecks td { white-space:normal; word-wrap:break-word; overflow-wrap:anywhere; }
.beheer-tabel--upgradechecks th:nth-child(1), .beheer-tabel--upgradechecks td:nth-child(1) { width:28%; }
.beheer-tabel--upgradechecks th:nth-child(2), .beheer-tabel--upgradechecks td:nth-child(2) { width:16%; }
.beheer-tabel--upgradechecks th:nth-child(3), .beheer-tabel--upgradechecks td:nth-child(3) { width:12%; }
.beheer-tabel--upgradechecks th:nth-child(4), .beheer-tabel--upgradechecks td:nth-child(4) { width:10%; }
.beheer-tabel--upgradechecks th:nth-child(5), .beheer-tabel--upgradechecks td:nth-child(5) { width:14%; }
.beheer-tabel--upgradechecks th:nth-child(6), .beheer-tabel--upgradechecks td:nth-child(6) { width:8%; }
.beheer-tabel--upgradechecks th:nth-child(7), .beheer-tabel--upgradechecks td:nth-child(7) { width:12%; }
.beheer-tabel--advies { table-layout:fixed; }
.beheer-tabel--advies th { white-space:normal; word-wrap:break-word; overflow-wrap:anywhere; }
.beheer-tabel--advies td { white-space:normal; word-wrap:break-word; overflow-wrap:anywhere; }
.beheer-tabel--advies th:nth-child(1), .beheer-tabel--advies td:nth-child(1) { width:13%; }
.beheer-tabel--advies th:nth-child(2), .beheer-tabel--advies td:nth-child(2) { width:11%; }
.beheer-tabel--advies th:nth-child(3), .beheer-tabel--advies td:nth-child(3) { width:15%; }
.beheer-tabel--advies th:nth-child(4), .beheer-tabel--advies td:nth-child(4) { width:14%; }
.beheer-tabel--advies th:nth-child(5), .beheer-tabel--advies td:nth-child(5) { width:23%; }
.beheer-tabel--advies th:nth-child(6), .beheer-tabel--advies td:nth-child(6) { width:14%; }
.beheer-tabel--advies th:nth-child(7), .beheer-tabel--advies td:nth-child(7) { width:10%; }
.beheer-tabel--service { table-layout:fixed; }
.beheer-tabel--service th { white-space:normal; word-wrap:break-word; overflow-wrap:anywhere; }
.beheer-tabel--service td { white-space:normal; word-wrap:break-word; overflow-wrap:anywhere; }
.beheer-tabel--service th:nth-child(1), .beheer-tabel--service td:nth-child(1) { width:8%; }
.beheer-tabel--service th:nth-child(2), .beheer-tabel--service td:nth-child(2) { width:14%; }
.beheer-tabel--service th:nth-child(3), .beheer-tabel--service td:nth-child(3) { width:18%; }
.beheer-tabel--service th:nth-child(4), .beheer-tabel--service td:nth-child(4) { width:24%; }
.beheer-tabel--service th:nth-child(5), .beheer-tabel--service td:nth-child(5) { width:10%; }
.beheer-tabel--service th:nth-child(6), .beheer-tabel--service td:nth-child(6) { width:13%; }
.beheer-tabel--service th:nth-child(7), .beheer-tabel--service td:nth-child(7) { width:13%; }
.beheer-tabel--consultancy { table-layout:fixed; }
.beheer-tabel--consultancy th { white-space:normal; word-wrap:break-word; overflow-wrap:anywhere; }
.beheer-tabel--consultancy td { white-space:normal; word-wrap:break-word; overflow-wrap:anywhere; }
.beheer-tabel--consultancy th:nth-child(1), .beheer-tabel--consultancy td:nth-child(1) { width:13%; }
.beheer-tabel--consultancy th:nth-child(2), .beheer-tabel--consultancy td:nth-child(2) { width:16%; }
.beheer-tabel--consultancy th:nth-child(3), .beheer-tabel--consultancy td:nth-child(3) { width:11%; }
.beheer-tabel--consultancy th:nth-child(4), .beheer-tabel--consultancy td:nth-child(4) { width:28%; }
.beheer-tabel--consultancy th:nth-child(5), .beheer-tabel--consultancy td:nth-child(5) { width:9%; }
.beheer-tabel--consultancy th:nth-child(6), .beheer-tabel--consultancy td:nth-child(6) { width:15%; }
.beheer-tabel--consultancy th:nth-child(7), .beheer-tabel--consultancy td:nth-child(7) { width:8%; }
/* Consultancy-detailpagina: links aanvraag+formulier, rechts mail-voorbeeld. */
.consult-admin-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; }
.consult-admin-col + .consult-admin-col { padding-left:28px; border-left:1px solid var(--hairline); }
.consult-mail-preview { border:1px solid var(--hairline); border-radius:var(--radius-sm); overflow:auto; max-height:560px; }
.consult-mail-leeg { font-size:13px; color:var(--ink-faint); margin:0; padding:16px; border:1px dashed var(--hairline); border-radius:var(--radius-sm); }
.consult-mail-status { font-size:12.5px; color:var(--ink-faint); margin:8px 0 0; }
.consult-mail-status--ok { color:var(--success); font-weight:600; }
@media (max-width:900px) {
.consult-admin-grid { grid-template-columns:1fr; }
.consult-admin-col + .consult-admin-col { padding-left:0; border-left:none; padding-top:20px; border-top:1px solid var(--hairline); }
}
.badge-actief { display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:99px; background:#e6f4ea; color:#1b7a3a; }
.badge-geannuleerd { display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:99px; background:#fce8e8; color:#b91c1c; }
.badge-verbleven { display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:99px; background:#f3f4f6; color:#6b7280; }
.vb-dot { width:14px; height:14px; border-radius:50%; border:none; padding:0; cursor:pointer; display:inline-block; }
.vb-dot--aan { background:#1b7a3a; }
.vb-dot--uit { background:#b91c1c; }
/* ─── Mijn boekingen tabs ────────────────────────────────────────────────── */
.boeking-tabs-rij {
display:flex; align-items:center; justify-content:space-between;
flex-wrap:wrap; gap:12px; margin-bottom:20px;
}
.boeking-tabs-rij .boeking-tabs, .boeking-tabs-rij .rp-toggle { margin-bottom:0; }
.boeking-tabs {
display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap;
}
.boeking-tab {
padding:6px 16px; border-radius:20px; border:1.5px solid var(--hairline);
font-size:13.5px; color:var(--ink-soft); text-decoration:none;
transition:border-color .15s, color .15s, background .15s;
}
.boeking-tab:hover { border-color:var(--accent); color:var(--accent); }
.boeking-tab--actief {
border-color:var(--accent); background:var(--accent); color:#fff; font-weight:600;
}
.boeking-tab--actief:hover { color:#fff; }
/* ─── Mijn boekingen chips ───────────────────────────────────────────────── */
.boeking-chips {
display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;
}
@media (max-width:900px) { .boeking-chips { grid-template-columns:repeat(2, 1fr); } }
@media (max-width:540px) { .boeking-chips { grid-template-columns:1fr; } }
.boeking-chip {
display:flex; flex-direction:column;
background:var(--card); border:1px solid var(--hairline);
border-radius:var(--radius-sm); overflow:hidden;
}
.boeking-chip-klikbaar { cursor:pointer; transition:border-color .15s, box-shadow .15s; }
.boeking-chip-klikbaar:hover { border-color:var(--accent); box-shadow:0 2px 8px rgba(24,26,27,.08); }
.boeking-chip-foto {
width:100%; aspect-ratio:16/9; background:var(--paper); overflow:hidden; flex-shrink:0;
}
.boeking-chip-foto img { width:100%; height:100%; object-fit:cover; display:block; }
.boeking-chip-foto-leeg {
width:100%; height:100%;
display:flex; align-items:center; justify-content:center;
font-size:32px; color:var(--ink-faint);
}
.boeking-chip-inhoud {
flex:1; padding:16px 18px; display:flex; flex-direction:column; gap:4px;
}
.boeking-chip-naam { font-size:14.5px; font-weight:700; color:var(--ink); }
.boeking-chip-datums { font-size:13px; color:var(--ink-soft); }
.boeking-chip-dagen {
display:inline-flex; align-items:baseline; gap:4px; margin-top:4px;
}
.boeking-chip-dagen-getal { font-size:15px; font-weight:800; color:var(--accent-deep); line-height:1; }
.boeking-chip-dagen-label { font-size:11.5px; color:var(--ink-soft); }
.boeking-chip-ref { font-size:11.5px; color:var(--ink-faint); margin-top:2px; }
.boeking-chip-acties {
display:flex; gap:8px; align-items:center; margin-top:auto; padding-top:12px; flex-wrap:wrap;
}
.boeking-chip-details-link {
font-size:13px; font-weight:600; color:var(--accent); text-decoration:none;
}
.boeking-chip-details-link:hover { text-decoration:underline; }
.boeking-chip--geannuleerd .boeking-chip-naam,
.boeking-chip--geannuleerd .boeking-chip-datums { text-decoration:line-through; color:var(--ink-faint); }
.boeking-geannuleerd-link {
margin-top:14px; font-size:13px; color:var(--ink-faint); text-align:center;
}
.boeking-geannuleerd-link a { color:var(--ink-soft); text-decoration:none; }
.boeking-geannuleerd-link a:hover { color:var(--ink); text-decoration:underline; }
/* ─── Landingspagina ─────────────────────────────────────────────────────── */
.sparkle { flex-shrink: 0; }
/* ─── Knoppen: aanvulling op .btn/.btn-primary/.btn-secondary uit styles.css ── */
.btn-ghost { background: transparent; color: var(--charcoal); border: 1.5px solid var(--sand); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.btn-cream { background: var(--card); color: var(--accent); border: 1.5px solid var(--champagne); }
.btn-cream:hover { background: var(--accent-soft); border-color: var(--accent); text-decoration: none; }
/* ─── Hero ───────────────────────────────────────────────────────────────── */
.lp-hero {
position: relative; overflow: hidden;
padding: 88px 0 48px;
text-align: center;
}
.lp-hero::before {
content: ''; position: absolute; inset: 0; z-index: -1;
/* Twee formaten i.p.v. één 1920px-bestand voor alle schermen: op mobiel
(tot 767px) gaat hetzelfde 1920px-bestand naar een scherm van 400px
breed, en dat bepaalde de LCP van 6,0 s op de homepage (docs/SEO-PLAN.md
14, sessie H, bevinding 1). De drie gradients erboven liggen al onder
een linear-gradient met 85% witte dekking (zie hieronder), dus de foto
is grotendeels bedekt -- agressief comprimeren is hier vrijwel
risicoloos gebleken (zie Vervolgsessie 1). Breakpoint gelijk aan de
preloads in landingspagina.js (_preloadImages), anders preload je op één
van de twee schermbreedtes het verkeerde bestand. */
background:
radial-gradient(560px 360px at 18% 0%, var(--accent-soft) 0%, transparent 65%),
radial-gradient(620px 420px at 84% 15%, var(--accent-soft) 0%, transparent 60%),
linear-gradient(to bottom, rgba(255,255,255,.85) 0%, rgba(255,255,255,.85) 78%, rgba(255,255,255,1) 100%),
url("/afbeeldingen/landing/hero-bora-bora-800.webp");
background-size: auto, auto, cover, cover;
background-position: center, center, center 38%, center 38%;
background-repeat: no-repeat;
}
@media (min-width: 768px) {
.lp-hero::before {
background-image:
radial-gradient(560px 360px at 18% 0%, var(--accent-soft) 0%, transparent 65%),
radial-gradient(620px 420px at 84% 15%, var(--accent-soft) 0%, transparent 60%),
linear-gradient(to bottom, rgba(255,255,255,.85) 0%, rgba(255,255,255,.85) 78%, rgba(255,255,255,1) 100%),
url("/afbeeldingen/landing/hero-bora-bora-1920.webp");
}
}
.lp-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
color: var(--champagne-mid); background: var(--accent-soft);
padding: 7px 16px 7px 12px; border-radius: 100px; margin-bottom: 26px;
}
.lp-hero h1 {
font-size: 54px; font-weight: 800; max-width: 780px; margin: 0 auto 22px;
color: var(--ink);
}
.lp-hero h1 em { font-style: normal; color: var(--champagne-mid); }
.lp-hero-sub {
font-size: 20px; color: var(--slate); max-width: 720px; margin: 0 auto 40px;
line-height: 1.6;
}
.lp-hero-sub-vraag { margin-bottom: 14px; }
.lp-hero-sub-nadruk { font-weight: 700; color: var(--ink); }
.lp-hero-sub-nadruk em { font-style: normal; color: var(--champagne-mid); }
.lp-hero-cta { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; }
.lp-hero-cta .btn { padding: 13px 26px; font-size: 16px; }
.lp-hero-cta .btn-primary { transition: background .15s, transform .15s, box-shadow .15s; }
.lp-hero-cta .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.18); }
/* ─── Sectiekoppen ───────────────────────────────────────────────────────── */
.lp-sectie { padding: 48px 0; }
.lp-sectie[id] { scroll-margin-top: 96px; }
.lp-sectie-kop { text-align: center; max-width: 560px; margin: 0 auto 44px; }
.lp-sectie-label {
font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
color: var(--champagne-mid); margin-bottom: 10px;
}
.lp-sectie-kop h2 { font-size: 32px; font-weight: 800; color: var(--ink); margin-bottom: 12px; }
.lp-sectie-kop p { font-size: 15.5px; color: var(--slate); line-height: 1.6; }
/* ─── Features ───────────────────────────────────────────────────────────── */
.lp-feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 720px) {
.lp-feat-grid { grid-template-columns: 1fr; }
}
.lp-feat-kaart {
position: relative; aspect-ratio: 4 / 3; overflow: hidden;
border-radius: var(--radius); box-shadow: var(--shadow); background: var(--card);
}
.lp-feat-foto {
position: absolute; inset: 0;
background-size: cover; background-position: center;
}
.lp-feat-foto img {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.lp-feat-foto::after {
content: ''; position: absolute; inset: 0; z-index: 1;
background: linear-gradient(to bottom, rgba(255,255,255,.18) 0%, rgba(255,255,255,.18) 26%, var(--card) 56%);
}
.lp-feat-ster {
position: absolute; left: 50%; top: 56%; transform: translate(-50%, -50%); z-index: 2;
display: flex; align-items: center; justify-content: center;
width: 34px; height: 34px; border-radius: 50%;
background: rgba(255,255,255,.4); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
color: var(--champagne-mid);
}
.lp-feat-inhoud {
position: absolute; left: 0; right: 0; bottom: 0; top: calc(56% + 12px); z-index: 2;
display: flex; flex-direction: column; justify-content: flex-start; align-items: center;
padding: 4px 26px 20px; text-align: center;
}
.lp-feat-inhoud h3 {
font-size: 17.5px; font-weight: 700; color: var(--ink);
line-height: 1.25; letter-spacing: -0.015em;
}
.lp-feat-inhoud h3::after {
content: ''; display: block; width: 32px; height: 2px;
background: var(--champagne); margin: 8px auto;
}
.lp-feat-inhoud p { font-size: 12.5px; color: var(--slate); line-height: 1.6; max-width: 94%; margin: 0 auto; }
/* ─── Reviews (geen kaartjes: open lay-out met dunne scheidingslijnen) ──── */
.lp-reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.lp-review-item {
display: flex; flex-direction: column; align-items: center; text-align: center;
padding: 0 36px;
}
.lp-review-item + .lp-review-item { border-left: 1px solid var(--sand); }
.lp-review-ster { color: var(--accent); margin-bottom: 20px; flex-shrink: 0; }
.lp-review-quote {
font-family: 'Newsreader', serif; font-style: italic;
font-size: 18px; color: var(--ink); line-height: 1.55;
margin-bottom: 22px;
}
.lp-review-divider { width: 30px; height: 2px; background: var(--champagne); margin-bottom: 16px; }
.lp-review-naam {
font-size: 12.5px; font-weight: 800; color: var(--accent);
letter-spacing: .04em; text-transform: uppercase;
}
.lp-review-naam span {
display: block; font-weight: 500; color: var(--slate); font-size: 13px;
text-transform: none; letter-spacing: normal; margin-top: 4px;
}
@media (max-width: 720px) {
.lp-reviews-grid { grid-template-columns: 1fr; gap: 40px; }
.lp-review-item + .lp-review-item { border-left: none; border-top: 1px solid var(--sand); padding-top: 36px; }
}
/* ─── Hotelcatalogus ─────────────────────────────────────────────────────── */
.lp-cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.lp-cat-kaart {
position: relative; display: block; aspect-ratio: 4 / 3;
border-radius: var(--radius); overflow: hidden;
box-shadow: var(--shadow);
transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
}
.lp-cat-kaart::after {
content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: linear-gradient(180deg, rgba(26,27,29,.05) 0%, rgba(26,27,29,.08) 40%, rgba(26,27,29,.88) 100%);
}
.lp-cat-kaart:hover {
transform: translateY(-6px);
box-shadow: 0 14px 36px rgba(24,26,27,.18), 0 2px 8px rgba(24,26,27,.08);
text-decoration: none;
}
.lp-cat-kaart img {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.lp-cat-kaart:hover img { transform: scale(1.07); }
.lp-cat-ster {
position: absolute; top: 16px; left: 16px; z-index: 2;
display: flex; align-items: center; justify-content: center;
width: 34px; height: 34px; border-radius: 50%;
background: rgba(26,27,29,.4); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
color: var(--champagne);
}
.lp-cat-onder {
position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 18px 18px 20px;
}
.lp-cat-titel {
color: #fff; font-size: 17px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.25;
}
.lp-cat-pijl {
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
width: 34px; height: 34px; border-radius: 50%;
background: var(--champagne); color: var(--charcoal);
transition: transform .3s, background .3s;
}
.lp-cat-kaart:hover .lp-cat-pijl { transform: translateX(4px); background: var(--card); }
@media (max-width: 720px) {
.lp-cat-grid { grid-template-columns: 1fr; }
.lp-cat-titel { font-size: 16px; }
}
/* ─── Over de experts (klikbare flip-kaarten) ───────────────────────────── */
.lp-experts-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.lp-experts-wrap { position: relative; perspective: 2200px; }
.lp-experts-flip {
position: relative; width: 100%; aspect-ratio: 4 / 3;
transform-style: preserve-3d;
transition: transform .65s cubic-bezier(.4,0,.2,1);
cursor: pointer;
}
.lp-experts-flip.omgedraaid { transform: rotateY(180deg); cursor: default; }
.lp-experts-flip.omgedraaid.rust .lp-experts-voor { visibility: hidden; }
.lp-experts-flip.rust:not(.omgedraaid) .lp-experts-achter { visibility: hidden; }
.lp-experts-face {
position: absolute; inset: 0; backface-visibility: hidden;
border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
}
.lp-experts-voor {
background-size: cover; background-position: center;
display: flex; align-items: flex-end; justify-content: center; padding-bottom: 24px;
border: 1px solid rgba(255,255,255,.14);
transition: transform .5s cubic-bezier(.4,0,.2,1), box-shadow .35s;
}
.lp-experts-voor img {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
transition: transform .6s cubic-bezier(.4,0,.2,1);
}
.lp-experts-waas {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(26,27,29,0) 45%, rgba(26,27,29,.72) 100%);
}
.lp-experts-flip:not(.omgedraaid):hover .lp-experts-voor { box-shadow: 0 10px 34px rgba(24,26,27,.22); }
.lp-experts-flip:not(.omgedraaid):hover .lp-experts-voor img { transform: scale(1.045); }
.lp-experts-knop {
position: relative; z-index: 1; font-family: inherit;
background: rgba(255,255,255,.14);
color: #fff; border: 1px solid rgba(255,255,255,.4);
padding: 11px 26px; border-radius: 100px;
font-size: 13px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
cursor: pointer; transition: background .25s, border-color .25s;
}
.lp-experts-flip:not(.omgedraaid):hover .lp-experts-knop {
background: var(--accent); border-color: var(--accent); color: var(--charcoal);
}
.lp-experts-achter {
background: var(--card); border: 1px solid var(--sand); transform: rotateY(180deg);
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center; padding: 34px 30px; overflow-y: auto;
}
.lp-experts-ster { color: var(--accent); margin-bottom: 14px; flex-shrink: 0; }
.lp-experts-achter h3 { font-size: 19px; font-weight: 800; color: var(--ink); margin-bottom: 12px; }
.lp-experts-achter p { font-size: 13.5px; color: var(--slate); line-height: 1.6; text-align: left; margin-bottom: 10px; }
.lp-experts-achter p:last-child { margin-bottom: 0; }
.lp-experts-achter a { font-weight: 600; }
.lp-experts-sluit { position: absolute; top: 14px; right: 14px; z-index: 2; }
@media (max-width: 720px) {
.lp-experts-grid { grid-template-columns: 1fr; }
.lp-experts-flip { aspect-ratio: auto; min-height: 420px; }
}
/* ─── FAQ (accordion via grid-template-rows, geen JS-hoogtemeting) ──────── */
.lp-faq-lijst { max-width: 760px; margin: 0 auto; }
.lp-faq-item { border-bottom: 1px solid var(--sand); }
.lp-faq-item:first-child { border-top: 1px solid var(--sand); }
.lp-faq-vraag {
width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
padding: 22px 2px; border: none; background: none; font-family: inherit;
font-size: 16px; font-weight: 700; color: var(--ink); text-align: left; cursor: pointer;
transition: color .15s;
}
.lp-faq-vraag:hover { color: var(--accent); }
.lp-faq-icoon { color: var(--accent); flex-shrink: 0; transition: transform .3s cubic-bezier(.4,0,.2,1); }
.lp-faq-item.open .lp-faq-icoon { transform: rotate(45deg); }
.lp-faq-antwoord-wrap {
display: grid; grid-template-rows: 0fr;
transition: grid-template-rows .35s cubic-bezier(.4,0,.2,1);
}
.lp-faq-item.open .lp-faq-antwoord-wrap { grid-template-rows: 1fr; }
.lp-faq-antwoord { overflow: hidden; }
.lp-faq-antwoord p { padding: 0 28px 22px 2px; font-size: 14.5px; color: var(--slate); line-height: 1.6; }
/* ─── Pricing ────────────────────────────────────────────────────────────── */
.lp-pricing-row { display: flex; align-items: flex-start; gap: 20px; }
.lp-price-wrap {
flex: 1 1 0; min-width: 0; perspective: 2200px;
transition: flex-grow .55s cubic-bezier(.4,0,.2,1), opacity .4s, transform .4s;
}
/* Het inkrimpen van de niet-actieve kaartjes tot een smalle naamstrip is
bewust alleen voor desktop (rij naast elkaar, zie min-width hieronder):
op mobiel (kolom onder elkaar, zie Responsief) verandert geen enkele
kaart nog van hoogte zodra er een omgedraaid wordt -- anders verschuift
de hele pagina-inhoud mee en springt de omgedraaide kaart zelf soms
buiten de viewport. */
@media (min-width: 861px) {
.lp-pricing-row.heeft-actief .lp-price-wrap { flex-grow: 0.62; opacity: .55; transform: scale(.95); }
.lp-pricing-row.heeft-actief .lp-price-wrap.actief { flex-grow: 2.7; opacity: 1; transform: scale(1); }
.lp-pricing-row.heeft-actief .lp-price-wrap:not(.actief) .lp-price-flip { min-height: 128px; }
.lp-pricing-row.heeft-actief .lp-price-wrap:not(.actief) .lp-price-front-body { display: none; }
.lp-pricing-row.heeft-actief .lp-price-wrap:not(.actief) .lp-price-front {
align-items: center; justify-content: center;
}
.lp-pricing-row.heeft-actief .lp-price-wrap:not(.actief) .lp-kies-btn {
width: auto; max-width: 100%; padding: 8px 4px; font-size: 13.5px;
background: none; border: none; box-shadow: none; color: var(--charcoal);
}
}
.lp-price-flip {
position: relative; width: 100%; min-height: 500px;
transform-style: preserve-3d;
transition: transform .65s cubic-bezier(.4,0,.2,1), min-height .5s;
cursor: pointer;
}
.lp-price-wrap.actief .lp-price-flip { transform: rotateY(180deg); cursor: default; }
.lp-price-face {
position: absolute; inset: 0; backface-visibility: hidden;
border-radius: var(--radius); border: 1px solid var(--sand); background: var(--card);
display: flex; flex-direction: column;
box-shadow: var(--shadow);
}
.lp-price-front { padding: 30px 26px; }
.lp-price-back { transform: rotateY(180deg); overflow: hidden; }
.lp-price-wrap.populair .lp-price-front { border-color: var(--champagne); border-width: 1.5px; }
.lp-ribbon {
position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
background: var(--accent); color: var(--card);
font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
padding: 5px 14px; border-radius: 100px; white-space: nowrap;
}
.lp-price-naam { font-size: 20px; font-weight: 800; color: var(--ink); }
.lp-price-bedrag { display: flex; align-items: baseline; gap: 5px; margin: 14px 0 4px; }
.lp-price-bedrag .getal { font-size: 36px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.lp-price-bedrag .per { font-size: 13.5px; color: var(--slate-faint); font-weight: 500; }
.lp-price-tagline { font-size: 13.5px; color: var(--slate); margin-bottom: 22px; }
.lp-price-bullets { display: flex; flex-direction: column; gap: 11px; margin-bottom: 18px; flex: 1; }
.lp-price-bullet { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: var(--charcoal); line-height: 1.4; }
.lp-price-bullet .dot {
width: 16px; height: 16px; border-radius: 50%; background: var(--accent-soft); color: var(--accent);
display: grid; place-items: center; flex-shrink: 0; margin-top: 1px;
}
.lp-price-waiver {
border: 1px solid var(--champagne);
background: var(--accent-soft);
border-radius: var(--radius-sm);
padding: 10px 12px;
margin-bottom: 22px;
text-align: center;
}
.lp-price-waiver strong {
display: block; font-size: 12.5px; font-weight: 800; color: var(--accent);
letter-spacing: -0.01em;
}
/* ─── Back face: stappen ─────────────────────────────────────────────────── */
.lp-stap { display: none; flex-direction: column; padding: 26px 26px 24px; height: 100%; overflow-y: auto; }
.lp-stap.actief { display: flex; }
.lp-stap-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.lp-stap-titel { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--champagne-mid); }
.lp-sluit {
width: 26px; height: 26px; border-radius: 50%; border: none; background: var(--card);
color: var(--slate); font-size: 15px; cursor: pointer; display: grid; place-items: center;
transition: background .15s, color .15s;
}
.lp-sluit:hover { background: var(--sand); color: var(--ink); }
.lp-stap h4 { font-size: 17px; font-weight: 700; color: var(--ink); margin: 10px 0 18px; }
.lp-veld { margin-bottom: 14px; }
.lp-veld label { display: block; font-size: 12.5px; font-weight: 600; color: var(--slate); margin-bottom: 5px; }
.lp-veld input, .lp-veld textarea, .lp-veld select {
width: 100%; padding: 10px 13px; border: 1px solid var(--sand); border-radius: var(--radius-sm);
font-family: inherit; font-size: 14.5px; color: var(--ink); background: var(--card);
outline: none; transition: border-color .15s, box-shadow .15s, background .15s;
}
.lp-veld textarea { resize: vertical; }
.lp-veld select {
-webkit-appearance: none; appearance: none;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat; background-position: right 13px center; padding-right: 32px;
}
.lp-veld input:focus, .lp-veld textarea:focus, .lp-veld select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.lp-veld-rij { display: flex; gap: 10px; }
.lp-veld-rij .lp-veld { flex: 1; }
.lp-veld-foutmelding { display: none; font-size: 12px; color: var(--danger); margin-top: 5px; }
.lp-veld.fout input { border-color: var(--danger); background: var(--danger-soft); }
.lp-veld.fout .lp-veld-foutmelding { display: block; }
.lp-stap-footer { margin-top: auto; padding-top: 6px; }
.lp-terug-link {
display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 600;
color: var(--slate); cursor: pointer; text-align: center; width: 100%;
}
.lp-terug-link:hover { color: var(--accent); }
/* ─── Stap 2: placeholder i.p.v. echte betaalkoppeling (nog geen Stripe) ── */
.lp-betaal-placeholder {
margin-bottom: 16px; padding: 16px 16px;
border: 1.5px solid var(--sand); border-radius: var(--radius-sm);
background: var(--accent-soft);
}
.lp-betaal-placeholder p { font-size: 13.5px; color: var(--charcoal); line-height: 1.55; }
.lp-demo-succes {
display: none; flex-direction: column; align-items: center; text-align: center;
padding: 30px 10px; gap: 10px;
}
.lp-demo-succes.actief { display: flex; }
.lp-demo-succes-icoon {
width: 48px; height: 48px; border-radius: 50%; background: #ECFDF5; color: var(--accent);
display: grid; place-items: center;
}
.lp-demo-succes h4 { font-size: 19px; color: var(--ink); margin: 0; }
.lp-demo-succes p { font-size: 15px; color: var(--slate); }
/* ─── Hulpmodule (gratis aanvraag, flip over de bovenrand) ──────────────── */
.lp-hulp-wrap { max-width: 1032px; margin: 0 auto; position: relative; perspective: 2200px; }
.lp-hulp-flip {
position: relative; width: 100%; min-height: 405px;
transform-style: preserve-3d;
transition: transform .65s cubic-bezier(.4,0,.2,1);
}
.lp-hulp-flip.omgedraaid { transform: rotateX(180deg); }
.lp-hulp-face {
position: absolute; inset: 0; backface-visibility: hidden;
border-radius: var(--radius); border: 1px solid var(--sand); background: var(--card);
box-shadow: var(--shadow); padding: 26px 30px;
display: flex; flex-direction: column; justify-content: center;
}
.lp-hulp-voor { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.lp-hulp-voor-links { display: flex; flex-direction: column; align-items: center; text-align: center; }
.lp-hulp-voor-ster { color: var(--accent); margin-bottom: 16px; }
.lp-hulp-voor h3 { font-size: 25px; font-weight: 800; color: var(--ink); margin-bottom: 12px; line-height: 1.2; }
.lp-hulp-voor-sub { font-size: 14.5px; color: var(--slate); line-height: 1.5; }
.lp-hulp-opties { display: flex; flex-direction: column; gap: 8px; }
.lp-hulp-optie {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
width: 100%; text-align: left; font-family: inherit;
padding: 13px 18px; border: 1px solid var(--sand); border-radius: var(--radius-sm);
background: var(--card); color: var(--charcoal); font-size: 14.5px; font-weight: 600;
cursor: pointer; transition: border-color .15s, background .15s, color .15s;
}
.lp-hulp-optie::after { content: '→'; color: var(--accent); transition: transform .15s; }
.lp-hulp-optie:hover { border-color: var(--accent); background: var(--accent-soft); }
.lp-hulp-optie:hover::after { transform: translateX(3px); }
.lp-hulp-achter { transform: rotateX(180deg); overflow: hidden; }
#hulpSluit { position: absolute; top: 18px; right: 18px; z-index: 2; }
.lp-hulp-vorm { display: none; width: 100%; }
.lp-hulp-vorm.actief { display: block; }
.lp-hulp-form-split { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.lp-hulp-form-links { display: flex; flex-direction: column; gap: 6px; }
.lp-hulp-form-links .lp-veld { margin-bottom: 0; }
.lp-hulp-form-links .lp-veld-rij { gap: 10px; }
.lp-hulp-form-kop { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 16px; }
.lp-hulp-form-kop .sparkle { color: var(--accent); }
.lp-hulp-form-titel {
display: inline-flex; align-items: center;
font-size: 13.5px; font-weight: 700; color: var(--accent); line-height: 1;
background: var(--card); border: 1.5px solid var(--champagne); border-radius: 100px;
padding: 9px 18px; margin: 0;
}
.lp-tarieven-link {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
width: 100%; margin-top: auto; padding: 13px 18px; border: 1px solid var(--sand); border-radius: var(--radius-sm);
background: var(--accent-soft); color: var(--charcoal); font-family: inherit; font-size: 13.5px; font-weight: 600;
text-decoration: none; cursor: pointer; transition: border-color .15s, background .15s;
}
.lp-tarieven-link::after { content: '→'; color: var(--accent); transition: transform .15s; }
.lp-tarieven-link:hover { border-color: var(--accent); background: var(--champagne); text-decoration: none; }
.lp-tarieven-link:hover::after { transform: translateX(3px); }
/* ─── Tarievenkaart (uitklapbaar boven de awardboeking-vorm) ────────────── */
.lp-tarieven-overlay {
position: absolute; inset: 4%; z-index: 5;
border: 1px solid var(--sand); border-radius: var(--radius);
background: var(--accent-soft); box-shadow: var(--shadow);
padding: 26px 30px; overflow: hidden;
display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
opacity: 0; transform: scale(.92); pointer-events: none;
transition: opacity .25s ease, transform .25s ease;
}
.lp-tarieven-overlay.zichtbaar { opacity: 1; transform: scale(1); pointer-events: auto; }
.lp-tarieven-overlay h3 { font-size: 18px; font-weight: 800; color: var(--ink); margin: 8px 0 2px; }
.lp-tarieven-sluit { position: absolute; top: 14px; right: 14px; z-index: 2; }
.lp-tarief-lijst { width: 100%; max-width: 420px; display: flex; flex-direction: column; justify-content: center; gap: 12px; margin: 14px auto 0; text-align: left; }
.lp-tarief-item { padding-bottom: 10px; border-bottom: 1px solid var(--sand); }
.lp-tarief-item:last-child { border-bottom: none; padding-bottom: 0; }
.lp-tarief-item h4 { font-size: 13px; font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px; }
.lp-tarief-item p { font-size: 13px; color: var(--charcoal); line-height: 1.45; }
.lp-upload-knop::after { content: '📎'; }
.lp-upload-knop:hover::after { transform: none; }
.lp-hulp-form-rechts { display: flex; flex-direction: column; gap: 6px; }
.lp-hulp-form-rechts .lp-veld { margin-bottom: 0; }
.lp-hulp-form-rechts .lp-veld-rij { gap: 10px; }
.lp-veld-groei { flex: 1; display: flex; flex-direction: column; }
.lp-veld-groei textarea { flex: 1; resize: none; min-height: 44px; }
/* ─── Upgradekans-indicator (Upgrade Check-vorm), compact voor de kaart ─── */
.indicator-box {
display: none; border: 1px solid var(--sand); border-radius: var(--radius-sm);
padding: 10px 14px; margin: 0; background: var(--accent-soft);
max-height: 108px; overflow: hidden;
}
.indicator-box.zichtbaar { display: block; }
.indicator-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--charcoal); margin-bottom: 6px; }
.indicator-band { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 6px; }
.indicator-bar-bg { height: 6px; border-radius: 100px; background: var(--sand); overflow: hidden; }
.indicator-bar-fill { height: 100%; border-radius: 100px; background: var(--accent); transition: width .5s cubic-bezier(.4,0,.2,1); width: 0%; }
.indicator-toelichting { font-size: 11.5px; color: var(--slate); margin-top: 6px; line-height: 1.4; }
.indicator-perks { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.indicator-perk { font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 100px; background: var(--card); color: var(--accent); }
.indicator-box[data-band="Laag"] { background: var(--danger-soft); }
.indicator-box[data-band="Laag"] .indicator-bar-fill { background: var(--danger); }
.indicator-box[data-band="Laag"] .indicator-label { color: var(--danger); }
.indicator-box[data-band="Gemiddeld"] { background: #FEFCE8; }
.indicator-box[data-band="Gemiddeld"] .indicator-bar-fill { background: #CA8A04; }
.indicator-box[data-band="Gemiddeld"] .indicator-label { color: #92400E; }
.indicator-box[data-band="Hoog"],
.indicator-box[data-band="Uitstekend"] { background: #F0FDF4; }
.indicator-box[data-band="Hoog"] .indicator-bar-fill,
.indicator-box[data-band="Uitstekend"] .indicator-bar-fill { background: var(--success); }
.indicator-box[data-band="Hoog"] .indicator-label,
.indicator-box[data-band="Uitstekend"] .indicator-label { color: var(--success); }
.lp-hulp-fout { font-size: 12.5px; color: var(--danger); margin-top: 10px; text-align: center; }
/* ─── Datumkiezer (bereik, vervangt native input type=date) ─────────────── */
.lp-datum-btn {
width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
padding: 10px 13px; border: 1px solid var(--sand); border-radius: var(--radius-sm);
font-family: inherit; font-size: 14.5px; color: var(--ink); background: var(--card);
cursor: pointer; text-align: left; outline: none;
transition: border-color .15s, box-shadow .15s, background .15s;
}
.lp-datum-tekst.leeg { color: var(--slate-faint); }
.lp-datum-btn:hover { border-color: var(--accent); }
.lp-datum-btn:focus, .lp-datum-btn.actief {
border-color: var(--accent); background: var(--card); box-shadow: 0 0 0 3px var(--accent-soft);
}
.lp-datum-icoon { color: var(--slate-faint); flex-shrink: 0; }
.lp-veld.fout .lp-datum-btn { border-color: var(--danger); background: var(--danger-soft); }
.lp-verborgen-veld {
position: absolute; width: 1px !important; height: 1px !important; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.lp-kalender-popover {
position: fixed; z-index: 200; width: 300px;
background: var(--card); border: 1px solid var(--sand); border-radius: var(--radius);
box-shadow: var(--shadow); padding: 16px; font-family: inherit;
}
.lp-kalender-popover[hidden] { display: none; }
.lp-kalender-koppen { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.lp-kalender-titel { font-size: 14.5px; font-weight: 700; color: var(--ink); text-transform: capitalize; }
.lp-kalender-nav {
width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--sand);
border-radius: 8px; background: var(--card); color: var(--charcoal); cursor: pointer; font-size: 15px;
font-family: inherit; transition: border-color .15s, background .15s;
}
.lp-kalender-nav:hover { border-color: var(--accent); background: var(--accent-soft); }
.lp-kalender-nav:disabled { opacity: .35; cursor: default; pointer-events: none; }
.lp-kalender-weekdagen, .lp-kalender-dagen { display: grid; grid-template-columns: repeat(7, 1fr); }
.lp-kalender-weekdagen span {
text-align: center; font-size: 11px; font-weight: 700; color: var(--slate-faint); padding-bottom: 6px;
}
.lp-kalender-dag {
position: relative; height: 32px; border: none; background: none; font-family: inherit;
font-size: 13px; color: var(--ink); cursor: pointer; border-radius: 8px;
}
.lp-kalender-dag:hover:not(:disabled) { background: var(--accent-soft); }
.lp-kalender-dag:disabled { color: var(--slate-faint); opacity: .45; cursor: default; }
.lp-kalender-dag.buiten-maand { visibility: hidden; }
.lp-kalender-dag.vandaag::after {
content: ''; position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%);
width: 4px; height: 4px; border-radius: 50%; background: var(--accent);
}
.lp-kalender-dag.in-bereik { background: var(--accent-soft); border-radius: 0; }
.lp-kalender-dag.bereik-start { border-radius: 8px 0 0 8px; }
.lp-kalender-dag.bereik-eind { background: var(--accent-soft); border-radius: 0 8px 8px 0; }
.lp-kalender-dag.geselecteerd { background: var(--accent) !important; color: var(--card); font-weight: 700; }
.lp-kalender-voet {
display: flex; justify-content: flex-end; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--sand);
}
.lp-kalender-wissen {
font-size: 12.5px; font-weight: 600; color: var(--slate); cursor: pointer; background: none; border: none; font-family: inherit;
}
.lp-kalender-wissen:hover { color: var(--accent); }
@media (max-width: 720px) {
.lp-hero { padding-top: 44px; }
.lp-eyebrow .sparkle { display: none; }
.lp-hulp-voor { grid-template-columns: 1fr; gap: 20px; }
.lp-hulp-form-split { grid-template-columns: 1fr; gap: 10px; }
.lp-hulp-flip { min-height: 630px !important; }
.lp-hulp-face { padding: 20px 18px !important; }
.lp-veld-groei textarea { min-height: 140px; }
/* De Upgrade Check-vorm heeft op mobiel (1 kolom, alle velden onder elkaar)
meer ruimte nodig dan 630px. Kaart blijft even groot (op verzoek), dus
hier alsnog scrollen toestaan i.p.v. velden onbereikbaar af te snijden. */
.lp-hulp-achter { overflow-y: auto; }
}
/* ─── Slotsectie ─────────────────────────────────────────────────────────── */
.lp-slot {
background: var(--charcoal); border-radius: var(--radius);
padding: 48px 40px; text-align: center;
max-width: 1032px; margin: 0 auto 48px;
}
.lp-slot h2 { font-size: 28px; font-weight: 800; color: var(--card); margin-bottom: 12px; }
.lp-slot-sub { font-size: 15px; font-weight: 400; color: var(--champagne); margin-bottom: 28px; }
.lp-slot-icons { display: flex; justify-content: center; gap: 16px; }
.lp-slot-icon {
width: 56px; height: 56px; border-radius: 50%;
background: var(--card); display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 14px rgba(0,0,0,.22);
transition: transform .15s, box-shadow .15s;
}
.lp-slot-icon:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 6px 20px rgba(0,0,0,.28); }
/* ─── Reisplanner BETA (Mijn boekingen: weergave-toggle, trips, items) ────── */
.rp-toggle { display: flex; width: fit-content; margin-left: auto; gap: 4px; padding: 4px; background: var(--paper); border-radius: var(--radius-pill); margin-bottom: 20px; }
.rp-toggle-knop {
padding: 8px 16px; border-radius: var(--radius-pill); border: none; background: none;
font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); cursor: pointer;
transition: background .15s, color .15s;
}
.rp-toggle-knop:hover:not(:disabled) { color: var(--ink); }
.rp-toggle-knop--actief, .rp-toggle-knop:disabled { background: var(--card); color: var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,.08); cursor: default; }
.rp-leeg { padding: 24px 0; color: var(--ink-soft); }
.rp-nieuwe-reis-form { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.rp-nieuwe-reis-form input[type="text"] {
flex: 1 1 280px; padding: 10px 14px; border: 1px solid var(--hairline); border-radius: var(--radius-sm);
font-family: inherit; font-size: 14.5px; background: var(--card); color: var(--ink);
}
.rp-reizen { display: flex; flex-direction: column; gap: 20px; }
.rp-reis-kaart { text-align: left; }
.rp-reis-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.rp-reis-header-acties { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rp-reis-beheer { position: relative; }
.rp-reis-beheer > summary { list-style: none; }
.rp-reis-beheer > summary::-webkit-details-marker { display: none; }
.rp-reis-beheer-paneel {
position: absolute; right: 0; top: calc(100% + 6px); z-index: 5;
background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius-sm);
padding: 14px; min-width: 260px; box-shadow: var(--shadow);
display: flex; flex-direction: column; gap: 12px; text-align: left;
}
.rp-reis-beheer-rij { display: flex; flex-direction: column; gap: 6px; }
.rp-reis-beheer-rij label { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.rp-reis-beheer-rij input, .rp-reis-beheer-rij select {
padding: 8px 10px; border: 1px solid var(--hairline); border-radius: 8px; font: inherit;
}
.rp-reis-naam { font-family: 'Newsreader', serif; font-style: italic; font-weight: 500; font-size: 20px; margin: 0; color: var(--accent); }
.rp-reis-leeg { color: var(--ink-faint); font-size: 13.5px; margin: 0 0 14px; }
/* Trip-onderdelen hergebruiken de .boeking-chip-* opmaak uit Mijn Boekingen
(zelfde kaartvorm, foto-boven-layout) zodat de Reisplanner er hetzelfde
uitziet. .rp-item-type is het enige eigen toevoegsel: een kleine
typelabel omdat een trip, anders dan Mijn Boekingen, meerdere soorten
onderdelen door elkaar toont. */
.rp-item-type { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); font-weight: 600; }
.rp-item-regels { margin: 8px 0 0; padding-left: 18px; font-size: 13px; color: var(--ink-soft); }
.rp-item-regels li { margin-bottom: 2px; }
.rp-item-details { margin-top: 8px; font-size: 13px; }
.rp-item-details summary { cursor: pointer; font-weight: 600; color: var(--ink-soft); }
.rp-item-details summary:hover { color: var(--ink); }
.rp-item-details .rp-item-regels { margin-top: 6px; }
.boeking-chip-acties form { margin: 0; }
.rp-nieuw-kiezer { border-top: 1px solid var(--hairline); padding-top: 14px; }
.rp-nieuw-label { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); font-weight: 600; margin: 0 0 10px; }
.rp-nieuw-knoppen { display: flex; flex-wrap: wrap; gap: 8px; }
.rp-nieuw-knop {
display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px;
border: 1px solid var(--hairline); border-radius: var(--radius-pill);
font-size: 13.5px; font-weight: 600; color: var(--ink); text-decoration: none;
transition: border-color .15s, background .15s;
}
.rp-nieuw-knop:hover { border-color: var(--accent); background: var(--paper); text-decoration: none; }
.rp-nieuw-knop-icoon { font-size: 15px; }
.rp-item-pagina { max-width: 560px; }
.rp-form-sub { color: var(--ink-soft); font-size: 14px; margin: 4px 0 0; }
.rp-item-form { display: flex; flex-direction: column; }
.form-group--checkbox label { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--ink); cursor: pointer; }
.rp-veld-hint { font-size: 12.5px; color: var(--ink-soft); margin-top: 4px; min-height: 15px; }
/* ─── Eigen Nederlandse foutmeldingen i.p.v. de native browserbubble ─────────
Elk verplicht veld (op de item-formulieren: .form-group, op de losse
naam-formulieren: .rp-veld-inline) krijgt data-rp-verplicht="1"; de
client-validatie in reisplanner.js zet .fout erop bij een lege waarde. */
.rp-veld-inline { display: contents; } /* transparante wrapper, kinderen tellen als directe flex-items van het formulier */
.rp-veld-foutmelding { display: none; font-size: 12px; color: var(--danger); margin-top: 5px; }
[data-rp-verplicht].fout input,
[data-rp-verplicht].fout select,
[data-rp-verplicht].fout textarea,
[data-rp-verplicht].fout .rp-datum-btn,
[data-rp-verplicht].fout .rp-tijd-btn { border-color: var(--danger); background: var(--danger-soft); }
[data-rp-verplicht].fout .rp-veld-foutmelding { display: block; }
.rp-nieuwe-reis-form .rp-veld-foutmelding { flex-basis: 100%; }
.rp-jn-vraag { padding: 16px; border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--paper); margin: 20px 0; }
.rp-jn-vraag-tekst { font-size: 14.5px; font-weight: 600; margin: 0 0 10px; }
.rp-jn-opties { display: flex; gap: 20px; }
.rp-jn-optie { display: flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
.rp-jn-blok { margin-bottom: 20px; }
.rp-jn-contact { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.rp-van-boeking { padding: 14px; border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--paper); margin-bottom: 16px; }
.rp-van-boeking-label { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); font-weight: 600; margin: 0 0 10px; }
.rp-boeking-keuze-lijst { display: flex; flex-direction: column; gap: 8px; }
.rp-boeking-keuze { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--card); }
.rp-boeking-keuze-naam { font-size: 14px; font-weight: 700; }
.rp-boeking-keuze-datums { font-size: 12.5px; color: var(--ink-soft); }
.rp-boeking-keuze form { margin: 0; }
.rp-form-of { font-size: 13px; color: var(--ink-faint); text-align: center; margin: 4px 0 16px; }
@media (max-width: 560px) {
.rp-reis-header { flex-wrap: wrap; }
}
/* ─── Responsief ─────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
.lp-hero h1 { font-size: 38px; }
.lp-pricing-row { flex-direction: column; align-items: stretch; }
.lp-price-wrap { flex: 1 1 auto !important; width: 100% !important; opacity: 1 !important; transform: none !important; }
.lp-price-flip { min-height: 500px !important; }
.lp-price-waiver { margin-bottom: 0; }
.lp-price-front { padding-bottom: 0; }
.lp-kies-btn { margin-top: auto; margin-bottom: auto; }
/* Een omgedraaide kaart verborg de andere twee eerder volledig
(display:none). Dat liet de rij-hoogte in één klap met honderden
pixels krimpen zonder dat de scrollpositie meebewoog, waardoor de
browser de scroll noodgedwongen bijstelde (er was simpelweg geen
document meer om op de oude positie te laten staan) en het hele scherm
zichtbaar omhoog sprong. Nu blijft elke kaart, actief of niet, op
dezelfde 500px staan (algemene regel hierboven) -- alleen de
dimming hieronder verandert nog, en dat kost geen layout-ruimte, dus
er is niets meer om over te springen. */
.lp-pricing-row.heeft-actief .lp-price-wrap:not(.actief) { opacity: .6 !important; }
}
/* ─── Native app-wrapper (Capacitor) ─────────────────────────────────────
Alleen actief wanneer public/capacitor-app.js window.Capacitor detecteert
en de klasse in-capacitor-app op zet -- bij een gewoon browser-
bezoek (web of mobiele Safari/Chrome) blijft deze klasse afwezig en heeft
dit blok geen effect. Compenseert de notch/status bar (env(safe-area-
inset-*)) die alleen in de native WebView relevant is. */
html.in-capacitor-app .site-header { padding-top: env(safe-area-inset-top); }
html.in-capacitor-app .whatsapp-fab { bottom: calc(24px + env(safe-area-inset-bottom)); }
html.in-capacitor-app .email-fab { bottom: calc(90px + env(safe-area-inset-bottom)); }
@media (max-width: 480px) {
html.in-capacitor-app .whatsapp-fab { bottom: calc(16px + env(safe-area-inset-bottom)); }
html.in-capacitor-app .email-fab { bottom: calc(74px + env(safe-area-inset-bottom)); }
}
html.in-capacitor-app .site-footer { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
.capacitor-offline-balk {
display: none;
position: fixed; top: 0; left: 0; right: 0; z-index: 200;
background: var(--charcoal, #26282B); color: #fff;
font-size: 13px; font-weight: 600; text-align: center;
padding: 10px 16px;
padding-top: calc(10px + env(safe-area-inset-top));
}
html.in-capacitor-app.capacitor-offline .capacitor-offline-balk { display: block; }
html.in-capacitor-app.capacitor-offline .site-header { margin-top: 40px; }
/* ─── Redactionele pagina's: /partners, /lidmaatschap, /over-ons ─────────────
Zie docs/SEO-PLAN.md 7.3 en 7.5. Eén set klassen voor alle vier de
sjabloonpagina's; de merkpagina's komen uit één bouwfunctie in
routes/partners.js, dus een wijziging hier raakt ze allemaal tegelijk. */
.inhoud-body { max-width: 860px; margin: 0 auto; }
.inhoud-body .merk-grid, .inhoud-body .cat-hotel-grid { max-width: none; }
.merk-intro { font-size: 16px; line-height: 1.65; color: var(--ink-soft); margin: 0 0 16px; }
.merk-sectie { margin: 36px 0 0; }
/* Sectiekoppen volgen de huisstijl van .catalogus-body h2 (Newsreader,
cursief, goud); hier alleen het formaat en de marges, want 26px is te groot
voor een sectie binnen een tekstpagina. h2.merk-voordelen-kop (element +
klasse, niet kale klasse) is bewust net zo specifiek als ".catalogus-body
h2" hierboven: een kale klasse alleen verliest die "wie wint"-vergelijking
(specificiteit 0,1,0 tegen 0,1,1) ondanks dat deze regel later in het
bestand staat, dus font-size en margin bleven eerder gewoon 26px/28px 0 20px
-- vandaar de veel te grote witruimte boven "Wat je krijgt bij ...". */
.merk-sectie > h2, .inhoud-blok > h2, h2.merk-voordelen-kop { font-size: 20px; margin: 0 0 16px; }
/* Hub: één kaart per merk. */
.merk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; margin: 24px 0 0; }
/* Markeert het einde van het hotelmerken-blok op de hub, met het oog op
andere soorten partners die hier later nog eens onder komen (zie
routes/partners.js). Zelfde gouden-accentstreep-techniek als
.lp-review-divider, hier gecentreerd omdat dit een overgang in de volledige
inhoudskolom markeert, geen kopje boven losse tekst. */
.merk-hub-scheiding { width: 60px; height: 2px; background: var(--champagne); margin: 40px auto 0; }
.merk-kaart {
display: flex; flex-direction: column; gap: 3px;
padding: 16px 18px; background: var(--card); border: 1px solid var(--hairline);
border-radius: var(--radius); text-decoration: none;
transition: border-color .15s, box-shadow .15s;
}
.merk-kaart:hover { border-color: var(--accent); box-shadow: var(--shadow); text-decoration: none; }
/* Vaste hoogte, ook zonder logo (bijv. Marriott, zie partners.js): anders
springen de kaarten in de rij niet gelijk op. Sinds de kaart geen eigen
naamregel meer toont (zie aria-label in partners.js) is het logo het enige
visuele merkelement, vandaar meer ruimte dan de eerdere 28px. */
/* Vaste bounding box (breedte ÉN hoogte, geen max-*): de aangeleverde logo's
van de LE-CDN verschillen enorm in canvas-verhouding (van 400x47 tot
400x224, zie de brede spreiding bij .keten-logo hierboven). Alleen op
hoogte klemmen (height:100%/max-height, breedte auto) liet de hoogte-as
winnen en een kort-en-breed wordmark (SLH, Meliá, Design Hotels) daardoor
2-3x zo breed uitvallen als een logo met veel eigen witruimte in het
canvas (Mandarin Oriental, Peninsula) -- max-width op het img-element bleek
dat niet te temperen zodra height/max-height er ook op stonden. Een
definitieve, niet-percentuele box op de WRAP plus width/height:100% op het
img met object-fit:contain (i.p.v. max-width/max-height op het img zelf)
geeft objectief elk logo dezelfde bounding box. Lost de inktdichtheid
binnen zo'n canvas niet op (dat zit in het brondbestand), wel de
dominantie van de kort-en-brede logo's. */
.merk-kaart-logo-wrap { display: flex; align-items: center; width: 130px; height: 36px; margin-bottom: 4px; position: relative; overflow: hidden; }
.merk-kaart-logo { width: 100%; height: 100%; object-fit: contain; object-position: left center; }
/* Bijgesneden logo's (zie LOGO_BIJSNIJDEN in partners.js): breedte, hoogte en
positie komen per logo als inline style mee, deze klasse zet alleen de
positioneringsmodus. overflow:hidden op de wrap hierboven doet de knip. */
.merk-kaart-logo--bijgesneden { position: absolute; width: auto; height: auto; object-fit: fill; }
/* Terugval voor een merk zonder programmanaam (zie partners.js), zodat de kaart
nooit zonder enige tekst overblijft. */
.merk-kaart-naam { font-size: 16px; font-weight: 600; color: var(--ink); }
.merk-kaart-programma { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--champagne-mid); }
.merk-kaart-aantal { font-size: 13px; color: var(--ink-faint); margin-top: 2px; }
/* Merkpagina zelf (/partners/:slug): logo gecentreerd boven de paginatitel
(logoBoven-var, gerenderd vóór {{{kop}}} in inhoudspagina.html). De wrap
regelt de centrering (text-align, zelfde scheiding tussen "positie" en
"afmeting" als bij .merk-kaart-logo-wrap/.merk-kaart-logo hierboven), het
logo zelf blijft inline-block zodat text-align er grip op heeft. */
.merk-kop-logo-wrap { text-align: center; margin: 0 0 20px; }
.merk-kop-logo { display: inline-block; max-height: 44px; max-width: 220px; width: auto; height: auto; object-fit: contain; }
/* Het voordelenblok: het belangrijkste element van een merkpagina. De regels
zijn de aangeleverde programmavoordelen, woordelijk. */
.merk-voordelen { padding: 22px 28px; margin: 28px 0 0; }
.merk-voordelen-lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.merk-voordelen-lijst + .merk-programma-naam { margin-top: 22px; }
.merk-programma-naam {
font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
color: var(--champagne-mid); margin: 0 0 10px;
}
.merk-voordeel { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.5; color: var(--ink); }
.merk-voordeel .perk-dot { margin-top: 8px; flex-shrink: 0; }
.merk-voordelen-voet, .merk-voordelen-leeg, .merk-korting-voet { font-size: 13px; color: var(--ink-faint); line-height: 1.55; margin: 16px 0 0; }
.merk-voordelen-leeg { margin: 0; }
/* Submerken als pillen met een telling. */
.merk-submerken { display: flex; flex-wrap: wrap; gap: 8px; }
.merk-submerk {
display: inline-flex; align-items: center; gap: 8px;
padding: 7px 14px; border: 1px solid var(--sand); border-radius: var(--radius-pill);
background: var(--card); font-size: 14px; color: var(--ink); text-decoration: none;
}
.merk-submerk:hover { border-color: var(--accent); background: var(--accent-soft); text-decoration: none; }
.merk-submerk-aantal { font-size: 12px; color: var(--ink-faint); }
.merk-kortingen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.merk-korting { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 15px; }
.merk-korting-labels { font-size: 13px; color: var(--champagne-mid); font-weight: 600; }
.merk-aanbod { text-align: center; }
.merk-concept { margin-bottom: 20px; }
/* Lidmaatschap en over-ons: tekstblokken, vergelijkingstabel en vragenlijst. */
.inhoud-blok { margin: 36px 0 0; }
.inhoud-blok p { font-size: 16px; line-height: 1.65; color: var(--ink-soft); margin: 0 0 14px; }
.inhoud-blok p:last-child { margin-bottom: 0; }
.inhoud-lijst { margin: 0 0 14px 20px; font-size: 16px; line-height: 1.65; color: var(--ink-soft); }
.inhoud-lijst li { margin-bottom: 6px; }
.niveau-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.niveau-kaart { display: flex; flex-direction: column; padding: 20px 22px; background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius); }
.niveau-kaart.uitgelicht { border-color: var(--accent); box-shadow: var(--shadow); }
.niveau-naam { font-size: 17px; font-weight: 700; color: var(--ink); }
.niveau-prijs { font-family: 'Newsreader', Georgia, serif; font-size: 26px; color: var(--ink); margin: 6px 0 2px; }
.niveau-prijs span { font-family: 'Hanken Grotesk', sans-serif; font-size: 13px; color: var(--ink-faint); }
.niveau-waiver { font-size: 13px; color: var(--champagne-mid); font-weight: 600; margin: 0 0 12px; }
.niveau-punten { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; color: var(--ink-soft); }
.niveau-punt { display: flex; gap: 9px; align-items: flex-start; line-height: 1.5; }
/* Stip op de hoogte van de eerste regel, niet gecentreerd over een punt dat
over twee regels loopt. */
.niveau-punt .perk-dot { margin-top: 8px; flex-shrink: 0; }
.inhoud-cta { margin: 32px 0 0; text-align: center; }
.inhoud-cta-uitleg { font-size: 14px; color: var(--ink-soft); line-height: 1.6; margin: 0 auto; max-width: 560px; }
/* Introparagraaf op een tekstpagina: iets groter dan de rest van de body, om
meteen een ankerpunt te geven i.p.v. dat elke alinea er hetzelfde uitziet. */
.inhoud-lead { font-size: 18.5px; line-height: 1.6; color: var(--ink); font-weight: 500; margin: 0 0 16px; }
/* Onze eigen sites (/over-ons): twee kaarten i.p.v. een kale bullet-lijst,
zelfde opbouw als .merk-kaart maar met een auteursregel. */
.sites-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.site-kaart {
display: flex; flex-direction: column; gap: 4px;
padding: 18px 20px; background: var(--card); border: 1px solid var(--hairline);
border-radius: var(--radius); text-decoration: none;
transition: border-color .15s, box-shadow .15s;
}
.site-kaart:hover { border-color: var(--accent); box-shadow: var(--shadow); text-decoration: none; }
.site-kaart-naam { font-size: 16px; font-weight: 700; color: var(--ink); }
.site-kaart-auteur { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--champagne-mid); }
.site-kaart-tekst { font-size: 13.5px; color: var(--ink-faint); line-height: 1.5; margin-top: 2px; }
/* Contactkaart (/over-ons): hergebruikt .lp-slot, de donkere slotkaart van de
homepage, met dezelfde WhatsApp/mail-iconen en een knop naar de aanvraag. */
.lp-slot-cta { margin-top: 24px; }
/* .inhoud-blok p (0,1,1) is specifieker dan de kale .lp-slot-sub (0,1,0) uit
de slotsectie hierboven en zou 'm anders overschrijven met de gewone
inktkleur op tekst -- onleesbaar tegen de antracieten kaart. Hier expliciet
opnieuw vastzetten met een net iets specifiekere selector. */
.inhoud-blok .lp-slot-sub { font-size: 15px; color: var(--champagne); margin-bottom: 28px; }
/* Zelfde specificiteitsbotsing voor de achterkant van de experts-kaarten
(/over-ons zet ze binnen .inhoud-blok, de homepage niet): zonder deze regel
wint .inhoud-blok p en verliest de achterkant zijn kleinere, linksuitgelijnde
tekst -- daarmee zouden de kaarten juist NIET meer identiek zijn aan de
homepage, wat het hele punt van bouwExpertsFlip() is. */
.inhoud-blok .lp-experts-achter p { font-size: 13.5px; color: var(--slate); text-align: left; margin-bottom: 10px; }
.inhoud-blok .lp-experts-achter p:last-child { margin-bottom: 0; }
/* Publieke hoofdbestemmingen in de voettekst: dezelfde ankerteksten als in de
nav, want dat is precies het signaal waarop Google sitelinks kiest
(docs/SEO-PLAN.md 10). */
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin: 0; }
.footer-links a { font-size: 13px; color: var(--ink-soft); text-decoration: none; }
.footer-links a:hover { color: var(--ink); text-decoration: underline; }