:root {
  --bg: #fff8ef;
  --surface: #ffffff;
  --surface-soft: #fff3e7;
  --text: #231f20;
  --muted: #756d66;
  --primary: #ff7a1a;
  --primary-dark: #cc5500;
  --secondary: #ffe4cc;
  --border: #efdccc;
  --danger: #b42318;
  --success: #157347;
  --shadow: 0 10px 26px rgba(88, 49, 16, .08);
  --radius: 22px;
  --max-content: 760px;
}
* { box-sizing: border-box; }
html { background: var(--bg); font-size: 16px; }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--text); background: radial-gradient(circle at top, #fff0dc 0, var(--bg) 390px); line-height: 1.45; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 10px; }
small { font-size: .9rem; }
h1,h2,h3 { margin: 0; line-height: 1.08; letter-spacing: -.035em; font-weight: 900; }
h1 { font-size: clamp(2rem, 6vw, 3.35rem); }
h2 { font-size: clamp(1.55rem, 3vw, 2.15rem); }
h3 { font-size: 1.22rem; }
.app-shell { min-height: 100vh; max-width: 1100px; margin: 0 auto; padding-bottom: 100px; }
.content { max-width: var(--max-content); margin: 0 auto; padding: 18px; }
.topbar { position: sticky; top: 0; z-index: 1000; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 18px; border-bottom: 1px solid rgba(239,220,204,.82); background: rgba(255,248,239,.9); backdrop-filter: blur(18px); }
.brand { display:flex; align-items:center; gap:10px; font-weight:950; font-size:1.08rem; }
.brand-icon { display:grid; place-items:center; width:38px; height:38px; border-radius:14px; overflow:hidden; box-shadow:var(--shadow); }
.brand-icon img { width:100%; height:100%; display:block; object-fit:cover; }
.brand-icon.brand-icon-fallback { background:var(--primary); }
.brand-icon.brand-icon-fallback::before { content:"🍟"; font-size:1.15rem; }
.topnav { display:flex; gap:16px; color:var(--muted); font-weight:800; font-size:.92rem; }
.topnav a:hover { color:var(--primary-dark); }
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px; }
.card:hover { border-color:#ebc8ab; }
.hero-picture-card { position:relative; overflow:hidden; min-height:360px; display:flex; align-items:flex-end; color:white; border:0; padding:24px; background:linear-gradient(135deg,#ff7a1a,#ffb545); }
.hero-picture-card::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 80% 15%,rgba(255,255,255,.35),transparent 24%),linear-gradient(145deg,rgba(255,122,26,.18),rgba(35,31,32,.65)); }
.hero-picture-card > div { position:relative; z-index:1; }
.hero h1 { margin:6px 0 12px; max-width:640px; }
.hero p { max-width:590px; color:rgba(255,255,255,.92); }
.eyebrow { text-transform:uppercase; letter-spacing:.11em; font-weight:950; font-size:.74rem; opacity:.86; }
.hero-actions,.button-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:16px; }
.btn { border:0; border-radius:999px; padding:11px 17px; font-weight:900; font-size:.95rem; cursor:pointer; display:inline-flex; justify-content:center; align-items:center; min-height:43px; }
.btn.primary { background:var(--primary); color:white; }
.hero-picture-card .btn.primary { background:white; color:var(--primary-dark); }
.btn.secondary { background:var(--secondary); color:var(--primary-dark); }
.hero-picture-card .btn.secondary { background:rgba(255,255,255,.88); }
.btn.danger { background:var(--danger); color:white; }
.btn.full { width:100%; }
.btn:disabled { opacity:.55; cursor:wait; }
.section-head { display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin:28px 2px 12px; }
.section-head a,.link { color:var(--primary-dark); font-weight:900; white-space:nowrap; }
.page-title { margin:10px 2px 18px; }
.page-title p,.muted,.help,small { color:var(--muted); }
.grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.list { display:grid; gap:14px; }
.category-card { display:grid; align-content:start; min-height:210px; gap:10px; }
.category-card p { margin:0; }
.category-card small { margin-top:auto; font-weight:850; }
.category-icon { width:54px; height:54px; border-radius:18px; background:var(--surface-soft); display:inline-grid; place-items:center; font-size:1.72rem; font-weight:950; }
.category-icon.large { width:76px; height:76px; font-size:2.15rem; border-radius:24px; }
.hero-small { display:grid; gap:12px; }
.row { display:flex; gap:12px; align-items:flex-start; }
.between { justify-content:space-between; }
.review-card h2,.review-card h3 { margin:0 0 8px; font-size:1.28rem; }
.score-badge { flex:0 0 auto; background:#231f20; color:white; min-width:54px; height:54px; border-radius:18px; display:grid; place-items:center; font-weight:950; }
.score-badge.muted { background:#eee4da; color:var(--muted); font-size:.72rem; padding:0 8px; }
.notice { color:var(--muted); }
.notice.danger { color:var(--danger); border-color:#ffd3cf; }
.notice.success { color:var(--success); border-color:#ccebdc; }
.form-card { display:grid; gap:14px; }
.compact-form { padding:0; box-shadow:none; border:0; }
label { display:grid; gap:7px; font-weight:850; font-size:.94rem; }
input,select,textarea { width:100%; border:1px solid var(--border); border-radius:16px; padding:13px 14px; font:inherit; background:#fffdf9; color:var(--text); }
input:focus,select:focus,textarea:focus { outline:3px solid rgba(255,122,26,.18); border-color:var(--primary); }
textarea { resize:vertical; }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.step { display:flex; align-items:center; gap:10px; margin-top:8px; }
.step span { width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:var(--primary); color:white; font-weight:900; }
.step h2 { font-size:1.15rem; }
.criterion { border:1px solid var(--border); border-radius:20px; padding:14px; margin:0; }
.criterion legend { font-weight:950; padding:0 6px; }
.criterion em { font-style:normal; color:var(--primary-dark); font-size:.8rem; }
.score-buttons { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:10px; }
.score-buttons label { display:block; }
.score-buttons input { position:absolute; opacity:0; pointer-events:none; }
.score-buttons span { display:grid; place-items:center; height:46px; border-radius:15px; background:var(--surface-soft); font-weight:950; border:2px solid transparent; }
.score-buttons input:checked + span { background:var(--primary); color:white; }
.score-buttons input:disabled + span { opacity:.35; }
.checkline { display:flex; align-items:center; gap:8px; margin-top:10px; color:var(--muted); }
.checkline input { width:auto; }
.site-footer { max-width:var(--max-content); margin:18px auto 0; padding:0 18px 24px; color:var(--muted); display:flex; gap:8px; flex-wrap:wrap; font-size:.9rem; }
.bottom-nav { position:fixed; left:50%; transform:translateX(-50%); bottom:max(12px,env(safe-area-inset-bottom)); z-index:2000; width:min(720px,calc(100% - 24px)); background:rgba(255,255,255,.94); border:1px solid var(--border); border-radius:24px; box-shadow:0 14px 35px rgba(35,31,32,.16); backdrop-filter:blur(18px); display:grid; grid-template-columns:repeat(4,1fr); padding:8px; }
.bottom-nav a { display:grid; place-items:center; gap:2px; font-size:.72rem; color:var(--muted); font-weight:800; padding:5px 2px; border-radius:16px; }
.bottom-nav span { font-size:1.12rem; }
.bottom-nav a.active { color:var(--primary-dark); background:var(--surface-soft); }
.danger-zone { margin-top:20px; border-color:#ffd3cf; }
.auth-card h2,.apple-card h2 { margin-bottom:6px; }
.apple-card { margin-top:14px; }
.btn.apple { background:#111; color:#fff; }
.auth-secondary-action { text-align:center; margin:12px 0; }
.link-button { border:0; background:transparent; color:var(--primary-dark); font:inherit; font-weight:900; cursor:pointer; padding:8px; }
code { background:rgba(0,0,0,.06); border-radius:8px; padding:2px 6px; }
.map-card { padding:10px; overflow:hidden; }
.snackrate-map { width:100%; height:390px; min-height:390px; border-radius:20px; overflow:hidden; background:#eef1f4; border:1px solid rgba(15,23,42,.08); position:relative; isolation:isolate; }
.snackrate-map.leaflet-container { width:100%; height:390px; }
.map-loading,.map-error { position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:18px; color:var(--muted); font-weight:850; background:#eef1f4; z-index:2; }
.map-error { color:var(--danger); background:#fff7f5; }
.map-note { margin:10px 8px 2px; font-size:.85rem; }
.leaflet-popup-content-wrapper { background:#fff; border-radius:18px; box-shadow:0 12px 28px rgba(35,31,32,.2); }
.leaflet-popup-content { margin:14px; min-width:210px; }
.review-callout { display:grid; gap:8px; color:var(--text); }
.review-callout strong { font-weight:950; line-height:1.15; }
.review-callout p { margin:0; color:var(--muted); font-size:.86rem; }
.review-callout-button { display:inline-flex; justify-content:center; min-height:38px; padding:9px 13px; border-radius:999px; background:var(--primary); color:#fff; font-weight:950; font-size:.9rem; }
.meta-row { display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; color:var(--muted); font-size:.9rem; }
.meta-row span { display:inline-flex; border-radius:999px; background:rgba(15,23,42,.06); padding:6px 10px; }
.place-actions { margin-top:14px; }
.place-search-box { display:grid; gap:10px; }
.place-search-results { display:grid; gap:8px; padding:8px; border:1px solid var(--border); border-radius:18px; background:#fffdf9; max-height:360px; overflow:auto; }
.place-search-result { width:100%; display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; text-align:left; border:0; border-radius:14px; padding:12px; background:#fff; cursor:pointer; font:inherit; box-shadow:0 4px 12px rgba(88,49,16,.06); }
.place-search-result:hover,.place-search-result:focus { background:var(--surface-soft); outline:2px solid rgba(255,122,26,.25); }
.place-search-result strong { display:block; }
.place-search-result small { display:block; margin-top:3px; }
.place-source { font-size:.72rem; font-weight:900; border-radius:999px; padding:5px 8px; background:#eee4da; color:var(--muted); }
.place-source.external { background:#eaf4ff; color:#175d8f; }
.selected-place-card { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px; border:1px solid #ccebdc; border-radius:18px; background:#f4fff9; }
.selected-place-card.is-empty { border-color:var(--border); background:var(--surface-soft); }
.selected-place-card p { margin:4px 0 0; color:var(--muted); }
.manual-place-details { border:1px solid var(--border); border-radius:18px; padding:12px 14px; }
.manual-place-details summary { cursor:pointer; font-weight:900; }
.manual-place-grid { display:grid; gap:12px; padding-top:14px; }
@media (min-width:900px) { .content { padding:28px 18px; } .hero-picture-card { min-height:390px; } .bottom-nav { width:min(760px,calc(100% - 32px)); } }
@media (max-width:640px) { .topnav { display:none; } .grid,.two-col { grid-template-columns:1fr; } .card { padding:17px; } .section-head { margin-top:24px; } .category-card { min-height:auto; } .snackrate-map,.snackrate-map.leaflet-container { height:320px; min-height:320px; } .map-card { padding:8px; } .bottom-nav a { font-size:.68rem; } }


/* Navigatiepatch: de vier hoofdtabbladen blijven op alle schermformaten zichtbaar. */
.app-shell { padding-bottom:112px; }
.site-footer { padding-bottom:34px; }
@media (min-width:900px) {
  .app-shell { padding-bottom:112px; }
}