/* ═══════════════════════════════════════════════════════════════════════
   SUPERBUREN — Design System
   ═══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap');

/* ── Variables ──────────────────────────────────────────────────────────── */
:root {
  --navy:      #0A1628;
  --blue-9:    #0E2350;
  --blue-8:    #1A3670;
  --blue-7:    #1D4ED8;
  --blue-6:    #2563EB;
  --blue-5:    #3B82F6;
  --blue-4:    #60A5FA;
  --blue-1:    #DBEAFE;
  --blue-0:    #EFF6FF;
  --accent:    #F97316;
  --accent-h:  #EA6200;
  --green:     #16A34A;
  --g9: #0F172A; --g7: #334155; --g5: #64748B;
  --g3: #CBD5E1; --g2: #E2E8F0; --g1: #F1F5F9; --g0: #F8FAFC;
  --white: #FFFFFF;
  --font-d: 'Plus Jakarta Sans', sans-serif;
  --font-b: 'DM Sans', sans-serif;
  --nav-h: 68px;
  --r-s: 6px; --r-m: 12px; --r-l: 16px; --r-xl: 24px; --r-f: 9999px;
  --sh-s: 0 1px 4px rgba(10,22,40,.07),0 1px 2px rgba(10,22,40,.04);
  --sh-m: 0 4px 16px rgba(10,22,40,.10),0 2px 6px rgba(10,22,40,.06);
  --sh-l: 0 8px 32px rgba(10,22,40,.12),0 4px 12px rgba(10,22,40,.07);
  --sh-xl: 0 20px 60px rgba(10,22,40,.18);
}

/* ── Reset ──────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--font-b);color:var(--g9);background:var(--white);line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:var(--font-b);cursor:pointer;border:none;background:none}
input,select,textarea{font-family:var(--font-b)}

/* ── Typography ─────────────────────────────────────────────────────────── */
h1,h2,h3,h4{font-family:var(--font-d);font-weight:700;line-height:1.15}
h1{font-size:clamp(2rem,5vw,3.6rem)}
h2{font-size:clamp(1.5rem,3vw,2.25rem)}
h3{font-size:clamp(1.1rem,2vw,1.4rem)}
.text-sm{font-size:.875rem} .text-xs{font-size:.75rem} .text-lg{font-size:1.125rem}
.muted{color:var(--g5)}

/* ── Layout ─────────────────────────────────────────────────────────────── */
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 24px}
.container-wide{width:100%;max-width:1440px;margin:0 auto;padding:0 24px}
.page{padding-top:var(--nav-h);min-height:100vh;display:flex;flex-direction:column}
.flex{display:flex} .flex-col{flex-direction:column}
.items-center{align-items:center} .justify-between{justify-content:space-between}
.gap-2{gap:8px} .gap-3{gap:12px} .gap-4{gap:16px}

/* ── Navigation ─────────────────────────────────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;height:var(--nav-h);
  background:rgba(255,255,255,.96);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--g2);z-index:1000;transition:box-shadow .2s
}
.nav.scrolled{box-shadow:var(--sh-m)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:100%}
.nav-logo{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-d);font-size:1.2rem;font-weight:800;
  color:var(--navy);letter-spacing:-.02em
}
.nav-logo-mark{
  width:36px;height:36px;background:var(--blue-7);border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  color:white;font-size:.75rem;font-weight:800;letter-spacing:-.02em;flex-shrink:0
}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{font-size:.88rem;font-weight:500;color:var(--g7);transition:color .15s}
.nav-links a:hover,.nav-links a.active{color:var(--blue-7)}
.nav-actions{display:flex;align-items:center;gap:10px}
.nav-burger{display:none;flex-direction:column;gap:5px;padding:8px;cursor:pointer;border-radius:6px;transition:background .15s}
.nav-burger:hover{background:var(--g1)}
.nav-burger span{display:block;width:22px;height:2px;background:var(--navy);border-radius:2px;transition:all .3s}
.nav-mobile{
  display:none;position:fixed;top:var(--nav-h);left:0;right:0;
  background:white;padding:20px 24px;box-shadow:var(--sh-l);z-index:999;
  flex-direction:column;gap:4px;border-top:1px solid var(--g2)
}
.nav-mobile.open{display:flex}
.nav-mobile a{
  font-size:.95rem;font-weight:500;color:var(--g7);
  padding:12px 0;border-bottom:1px solid var(--g2);display:block
}
.nav-mobile a:last-child{border-bottom:none}
.nav-mobile .btn{width:100%;margin-top:8px;justify-content:center}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 20px;border-radius:var(--r-s);font-size:.88rem;font-weight:600;
  line-height:1;cursor:pointer;transition:all .15s ease;white-space:nowrap;
  border:none;text-decoration:none;font-family:var(--font-b)
}
.btn-primary{background:var(--blue-7);color:white}
.btn-primary:hover{background:var(--blue-8);transform:translateY(-1px);box-shadow:0 4px 14px rgba(29,78,216,.35)}
.btn-accent{background:var(--accent);color:white}
.btn-accent:hover{background:var(--accent-h);transform:translateY(-1px);box-shadow:0 4px 14px rgba(249,115,22,.35)}
.btn-outline{background:transparent;border:1.5px solid var(--g2);color:var(--g9)}
.btn-outline:hover{border-color:var(--blue-7);color:var(--blue-7);background:var(--blue-0)}
.btn-ghost{background:transparent;color:var(--g5);padding:10px 14px}
.btn-ghost:hover{color:var(--g9);background:var(--g1)}
.btn-white{background:white;color:var(--navy);font-weight:700}
.btn-white:hover{background:var(--g0);transform:translateY(-1px)}
.btn-lg{padding:14px 32px;font-size:.95rem;border-radius:var(--r-m)}
.btn-sm{padding:7px 14px;font-size:.8rem;border-radius:var(--r-s)}
.btn-xs{padding:5px 10px;font-size:.75rem;border-radius:4px}
.btn-full{width:100%;justify-content:center}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none !important}

/* ── Badges ─────────────────────────────────────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 10px;border-radius:var(--r-f);font-size:.72rem;font-weight:700;line-height:1.5
}
.badge-blue{background:var(--blue-1);color:var(--blue-7)}
.badge-green{background:#DCFCE7;color:#166534}
.badge-orange{background:#FEF3C7;color:#92400E}
.badge-gray{background:var(--g1);color:var(--g5)}
.badge-white{background:rgba(255,255,255,.9);color:var(--navy)}

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card{background:white;border-radius:var(--r-l);border:1px solid var(--g2);overflow:hidden;transition:all .2s}
.card:hover{transform:translateY(-3px);box-shadow:var(--sh-l);border-color:transparent}

/* ── Listing Card ────────────────────────────────────────────────────────── */
.lc{background:white;border-radius:var(--r-l);border:1px solid var(--g2);overflow:hidden;transition:all .22s;cursor:pointer}
.lc:hover{transform:translateY(-4px);box-shadow:var(--sh-xl);border-color:transparent}
.lc-img{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--g1)}
.lc-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.lc:hover .lc-img img{transform:scale(1.05)}
.lc-type{position:absolute;top:12px;left:12px}
.lc-fav{
  position:absolute;top:10px;right:10px;width:32px;height:32px;
  background:rgba(255,255,255,.88);border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:.9rem;cursor:pointer;transition:all .15s;
  backdrop-filter:blur(4px);border:none
}
.lc-fav:hover{background:white;transform:scale(1.12)}
.lc-fav.active{color:#EF4444}
.lc-verified{
  position:absolute;bottom:10px;right:10px;background:rgba(255,255,255,.9);
  border-radius:var(--r-f);padding:3px 8px;font-size:.68rem;font-weight:700;
  color:var(--blue-7);display:flex;align-items:center;gap:3px;backdrop-filter:blur(4px)
}
.lc-body{padding:16px}
.lc-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.lc-city{font-size:.78rem;color:var(--g5);font-weight:500}
.lc-rating{display:flex;align-items:center;gap:3px;font-size:.78rem;font-weight:600;color:var(--g9)}
.lc-title{font-family:var(--font-d);font-size:.92rem;font-weight:700;color:var(--g9);margin-bottom:6px;line-height:1.3}
.lc-specs{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--g5);margin-bottom:14px}
.lc-footer{display:flex;align-items:center;justify-content:space-between;padding-top:12px;border-top:1px solid var(--g2)}
.lc-price{font-family:var(--font-d);font-size:1.1rem;font-weight:800;color:var(--navy)}
.lc-price small{font-size:.72rem;font-weight:500;color:var(--g5)}

/* ── Forms ──────────────────────────────────────────────────────────────── */
.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.form-label{font-size:.85rem;font-weight:600;color:var(--g7)}
.form-hint{font-size:.78rem;color:var(--g5);margin-top:-2px}
.form-control{
  width:100%;padding:11px 14px;border:1.5px solid var(--g2);border-radius:var(--r-s);
  font-family:var(--font-b);font-size:.88rem;color:var(--g9);background:white;
  transition:border-color .15s,box-shadow .15s;outline:none;line-height:1.4
}
.form-control:focus{border-color:var(--blue-7);box-shadow:0 0 0 3px rgba(29,78,216,.1)}
.form-control::placeholder{color:var(--g5)}
select.form-control{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748B' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}
textarea.form-control{resize:vertical;min-height:100px}
.form-error{font-size:.78rem;color:#DC2626;margin-top:2px}

/* ── Section ────────────────────────────────────────────────────────────── */
.section{padding:80px 0}
.section-sm{padding:48px 0}
.section-xs{padding:32px 0}
.section-dark{background:var(--navy);color:white}
.section-soft{background:var(--g0)}
.s-title{font-family:var(--font-d);font-size:clamp(1.5rem,3vw,2rem);font-weight:800;color:var(--navy);margin-bottom:10px}
.s-sub{font-size:1.05rem;color:var(--g5);margin-bottom:40px;max-width:540px}

/* ── Grid ───────────────────────────────────────────────────────────────── */
.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero{
  position:relative;background:var(--navy);
  padding:80px 0 72px;overflow:hidden;min-height:520px;display:flex;align-items:center
}
.hero::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle at 1.5px 1.5px,rgba(255,255,255,.04) 1.5px,transparent 0);
  background-size:36px 36px;pointer-events:none
}
.hero::after{
  content:'';position:absolute;bottom:-120px;right:-80px;
  width:600px;height:600px;
  background:radial-gradient(circle,rgba(37,99,235,.25) 0%,transparent 70%);
  pointer-events:none
}
.hero-blob{
  position:absolute;top:-80px;left:60%;width:500px;height:500px;
  background:radial-gradient(circle,rgba(29,78,216,.18) 0%,transparent 65%);
  pointer-events:none
}
.hero-content{position:relative;z-index:1;max-width:680px}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(59,130,246,.15);color:var(--blue-4);
  padding:6px 14px;border-radius:var(--r-f);font-size:.78rem;font-weight:600;
  letter-spacing:.04em;margin-bottom:22px;border:1px solid rgba(59,130,246,.25)
}
.hero-eyebrow::before{content:'◈';font-size:.65rem}
.hero-title{
  color:white;font-size:clamp(2.2rem,5.5vw,3.8rem);font-weight:800;
  letter-spacing:-.025em;line-height:1.08;margin-bottom:18px
}
.hero-title .hl{color:var(--blue-4)}
.hero-sub{font-size:1.05rem;color:rgba(255,255,255,.6);line-height:1.75;margin-bottom:32px}

/* ── Search Widget ──────────────────────────────────────────────────────── */
.sw{
  display:flex;align-items:center;background:white;border-radius:var(--r-m);
  box-shadow:var(--sh-xl);padding:6px;margin-bottom:24px;max-width:620px
}
.sw-field{display:flex;align-items:center;gap:10px;padding:10px 16px;flex:1;min-width:0}
.sw-icon{color:var(--blue-7);font-size:1rem;flex-shrink:0}
.sw-field input,.sw-field select{
  border:none;outline:none;font-family:var(--font-b);font-size:.88rem;
  color:var(--g9);background:transparent;width:100%
}
.sw-field select{cursor:pointer;appearance:none}
.sw-sep{width:1px;height:36px;background:var(--g2);flex-shrink:0}
.sw-btn{
  background:var(--blue-7);color:white;border:none;padding:12px 24px;
  border-radius:var(--r-s);font-family:var(--font-b);font-size:.88rem;font-weight:600;
  cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .15s;white-space:nowrap
}
.sw-btn:hover{background:var(--blue-8);box-shadow:0 4px 14px rgba(29,78,216,.35)}
.hero-stats{display:flex;align-items:center;gap:16px;font-size:.83rem;color:rgba(255,255,255,.5)}
.hero-stats strong{color:rgba(255,255,255,.88);font-weight:700}
.hero-stats span.sep{color:rgba(255,255,255,.2)}

/* ── Type Pills (homepage) ──────────────────────────────────────────────── */
.type-strip{padding:32px 0;border-bottom:1px solid var(--g2)}
.type-pills{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.type-pills::-webkit-scrollbar{display:none}
.type-pill{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:14px 20px;background:white;border:1.5px solid var(--g2);
  border-radius:var(--r-m);cursor:pointer;transition:all .15s;white-space:nowrap;
  text-decoration:none;color:inherit;min-width:90px;flex-shrink:0
}
.type-pill:hover,.type-pill.active{border-color:var(--blue-7);background:var(--blue-0);color:var(--blue-7)}
.type-pill-icon{font-size:1.4rem}
.type-pill-label{font-size:.75rem;font-weight:600;color:inherit}

/* ── How it Works ───────────────────────────────────────────────────────── */
.step-card{
  display:flex;flex-direction:column;gap:16px;
  padding:32px;background:white;border-radius:var(--r-l);
  border:1px solid var(--g2);transition:box-shadow .2s
}
.step-card:hover{box-shadow:var(--sh-m)}
.step-num{
  width:48px;height:48px;background:var(--blue-0);border-radius:var(--r-m);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-d);font-size:1.1rem;font-weight:800;color:var(--blue-7)
}
.step-title{font-family:var(--font-d);font-size:1.05rem;font-weight:700;color:var(--navy)}
.step-desc{font-size:.88rem;color:var(--g5);line-height:1.6}

/* ── Host CTA Section ───────────────────────────────────────────────────── */
.host-cta{
  background:linear-gradient(135deg,var(--blue-9) 0%,var(--blue-8) 100%);
  border-radius:var(--r-xl);overflow:hidden;padding:60px 56px;
  display:flex;align-items:center;justify-content:space-between;gap:32px;
  position:relative
}
.host-cta::before{
  content:'';position:absolute;right:-40px;top:-60px;width:320px;height:320px;
  background:radial-gradient(circle,rgba(255,255,255,.06) 0%,transparent 70%);
  pointer-events:none
}
.host-cta-title{font-family:var(--font-d);font-size:clamp(1.5rem,3vw,2rem);font-weight:800;color:white;margin-bottom:10px}
.host-cta-sub{font-size:1rem;color:rgba(255,255,255,.65);line-height:1.6;max-width:420px}
.host-cta-stats{display:flex;gap:32px;margin-top:20px}
.host-stat-val{font-family:var(--font-d);font-size:1.6rem;font-weight:800;color:white}
.host-stat-label{font-size:.8rem;color:rgba(255,255,255,.55);margin-top:2px}
.host-cta-actions{display:flex;flex-direction:column;align-items:flex-start;gap:10px;flex-shrink:0}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.footer{background:var(--navy);color:rgba(255,255,255,.65);padding:64px 0 32px;margin-top:auto}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px}
.footer-brand{font-family:var(--font-d);font-size:1.15rem;font-weight:800;color:white;margin-bottom:12px;display:flex;align-items:center;gap:10px}
.footer-mark{width:32px;height:32px;background:var(--blue-7);border-radius:6px;display:flex;align-items:center;justify-content:center;color:white;font-size:.7rem;font-weight:800}
.footer-desc{font-size:.85rem;line-height:1.75;margin-bottom:20px;color:rgba(255,255,255,.5)}
.footer-mollie{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;color:rgba(255,255,255,.4);background:rgba(255,255,255,.05);padding:6px 12px;border-radius:var(--r-s)}
.footer-col-title{font-family:var(--font-d);font-size:.75rem;font-weight:700;color:white;margin-bottom:16px;text-transform:uppercase;letter-spacing:.07em}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:10px}
.footer-links a{font-size:.85rem;color:rgba(255,255,255,.55);transition:color .15s}
.footer-links a:hover{color:white}
.footer-bottom{padding-top:24px;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:space-between;font-size:.78rem;color:rgba(255,255,255,.3)}

/* ── Toast ──────────────────────────────────────────────────────────────── */
.toast{
  position:fixed;bottom:24px;right:24px;background:var(--navy);color:white;
  padding:14px 20px;border-radius:var(--r-m);font-size:.88rem;box-shadow:var(--sh-xl);
  z-index:9999;opacity:0;transform:translateY(16px);transition:all .3s;pointer-events:none;
  display:flex;align-items:center;gap:10px;max-width:340px
}
.toast.show{opacity:1;transform:translateY(0)}
.toast.toast-success{background:var(--green)}
.toast.toast-error{background:#DC2626}

/* ── Divider ────────────────────────────────────────────────────────────── */
.divider{height:1px;background:var(--g2);margin:24px 0}

/* ── Stars ──────────────────────────────────────────────────────────────── */
.stars{display:flex;gap:2px;color:#F59E0B;font-size:.85rem}

/* ── Avatar ─────────────────────────────────────────────────────────────── */
.avatar{
  width:40px;height:40px;border-radius:50%;background:var(--blue-7);
  color:white;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-d);font-size:.8rem;font-weight:700;flex-shrink:0
}
.avatar-sm{width:32px;height:32px;font-size:.7rem}
.avatar-lg{width:56px;height:56px;font-size:1rem}

/* ── Zoeken Page ────────────────────────────────────────────────────────── */
.search-layout{display:flex;height:calc(100vh - var(--nav-h));overflow:hidden}
.search-panel{
  width:420px;flex-shrink:0;display:flex;flex-direction:column;
  border-right:1px solid var(--g2);background:white;overflow:hidden
}
.search-filters{padding:16px 20px;border-bottom:1px solid var(--g2);background:var(--g0)}
.search-results{flex:1;overflow-y:auto;padding:16px}
.search-results-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.search-count{font-size:.85rem;font-weight:600;color:var(--g7)}
.map-panel{flex:1;position:relative}
#map{width:100%;height:100%}
.view-toggle{display:none;gap:8px;padding:12px 20px;border-bottom:1px solid var(--g2);background:white}
.view-btn{
  flex:1;padding:10px;border:1.5px solid var(--g2);border-radius:var(--r-s);
  font-size:.85rem;font-weight:600;color:var(--g7);background:white;cursor:pointer;transition:all .15s
}
.view-btn.active{border-color:var(--blue-7);color:var(--blue-7);background:var(--blue-0)}
.filter-row{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.filter-group{display:flex;flex-direction:column;gap:5px;min-width:0}
.filter-label{font-size:.72rem;font-weight:600;color:var(--g5);text-transform:uppercase;letter-spacing:.05em}
.filter-control{
  padding:8px 12px;border:1.5px solid var(--g2);border-radius:var(--r-s);
  font-family:var(--font-b);font-size:.83rem;color:var(--g9);outline:none;background:white;transition:border-color .15s
}
.filter-control:focus{border-color:var(--blue-7)}
select.filter-control{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath fill='%2364748B' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px}
.search-page-hero{padding:20px 20px 16px;border-bottom:1px solid var(--g2)}
.search-page-hero input{
  width:100%;padding:12px 16px 12px 44px;border:1.5px solid var(--g2);
  border-radius:var(--r-m);font-family:var(--font-b);font-size:.9rem;
  color:var(--g9);outline:none;background:white;transition:border-color .15s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:14px center
}
.search-page-hero input:focus{border-color:var(--blue-7)}
.lc-list{background:white;border-radius:var(--r-m);border:1px solid var(--g2);overflow:hidden;transition:all .22s;cursor:pointer;display:flex;gap:0;margin-bottom:10px}
.lc-list:hover{transform:translateX(3px);box-shadow:var(--sh-m);border-color:transparent}
.lc-list .lc-img{width:110px;min-width:110px;border-radius:0;aspect-ratio:unset}
.lc-list .lc-body{padding:12px;flex:1}
.lc-list .lc-specs{margin-bottom:8px}
.lc-list .lc-footer{border-top:none;padding-top:0}
.no-results{text-align:center;padding:40px 20px;color:var(--g5)}
.no-results-icon{font-size:2.5rem;margin-bottom:12px}
.map-price-marker{border:none;background:transparent}
.price-bubble{
  background:var(--navy);color:white;padding:5px 10px;border-radius:var(--r-f);
  font-family:var(--font-d);font-size:.72rem;font-weight:700;white-space:nowrap;
  box-shadow:0 2px 8px rgba(0,0,0,.2);cursor:pointer;transition:all .15s;border:2px solid transparent
}
.price-bubble:hover,.price-bubble.active{background:var(--blue-7);border-color:white;transform:scale(1.08)}
.leaflet-popup-content-wrapper{border-radius:var(--r-m) !important;box-shadow:var(--sh-l) !important;border:none}
.leaflet-popup-content{margin:14px 16px !important;font-family:var(--font-b) !important}
.map-popup-title{font-family:var(--font-d);font-weight:700;font-size:.9rem;color:var(--navy);margin-bottom:4px}
.map-popup-meta{font-size:.78rem;color:var(--g5);margin-bottom:10px}
.map-popup-price{font-family:var(--font-d);font-weight:800;color:var(--navy);margin-bottom:10px}
.map-popup a.btn{font-size:.78rem;padding:7px 14px}

/* ── Listing Detail ─────────────────────────────────────────────────────── */
.listing-hero{position:relative;background:var(--g1)}
.listing-gallery{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:6px;height:440px;overflow:hidden;border-radius:var(--r-l)}
.gallery-main{grid-row:span 2;overflow:hidden;border-radius:var(--r-l) 0 0 var(--r-l)}
.gallery-main img,.gallery-thumb img{width:100%;height:100%;object-fit:cover}
.gallery-thumb{overflow:hidden}
.gallery-thumb:first-of-type{border-radius:0 var(--r-l) 0 0}
.gallery-thumb:last-of-type{border-radius:0 0 var(--r-l) 0;position:relative}
.gallery-more{
  position:absolute;inset:0;background:rgba(10,22,40,.55);
  display:flex;align-items:center;justify-content:center;cursor:pointer
}
.gallery-more span{color:white;font-family:var(--font-d);font-weight:700;font-size:.9rem}
.listing-layout{display:grid;grid-template-columns:1fr 360px;gap:40px;padding:40px 0;align-items:start}
.listing-main{}
.listing-sidebar{}
.listing-breadcrumb{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--g5);margin-bottom:20px;flex-wrap:wrap}
.listing-breadcrumb a{color:var(--g5);transition:color .15s}
.listing-breadcrumb a:hover{color:var(--blue-7)}
.listing-breadcrumb .sep{color:var(--g3)}
.listing-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:12px}
.listing-title{font-family:var(--font-d);font-size:clamp(1.4rem,3vw,1.9rem);font-weight:800;color:var(--navy);line-height:1.15}
.listing-meta-row{display:flex;align-items:center;gap:16px;margin-bottom:28px;flex-wrap:wrap}
.listing-meta-item{display:flex;align-items:center;gap:5px;font-size:.85rem;color:var(--g7)}
.features-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px;margin-bottom:28px}
.feature-item{
  display:flex;align-items:center;gap:8px;padding:10px 14px;
  background:var(--g0);border-radius:var(--r-s);font-size:.85rem;font-weight:500;color:var(--g7)
}
.feature-item::before{content:'✓';color:var(--blue-7);font-weight:700;font-size:.8rem}
.listing-desc{font-size:.92rem;line-height:1.8;color:var(--g7);margin-bottom:28px}
.host-card{
  display:flex;align-items:center;gap:16px;padding:20px;
  background:var(--g0);border-radius:var(--r-l);border:1px solid var(--g2);margin-bottom:28px
}
.host-card-info{flex:1}
.host-card-name{font-family:var(--font-d);font-weight:700;font-size:.95rem;color:var(--navy);margin-bottom:2px}
.host-card-meta{font-size:.8rem;color:var(--g5)}
.host-card-response{font-size:.78rem;color:var(--green);font-weight:600;margin-top:4px}
.book-widget{
  background:white;border-radius:var(--r-xl);border:1px solid var(--g2);
  box-shadow:var(--sh-l);padding:28px;position:sticky;top:calc(var(--nav-h) + 20px)
}
.book-price{font-family:var(--font-d);font-size:2rem;font-weight:800;color:var(--navy);margin-bottom:4px}
.book-price span{font-size:1rem;font-weight:500;color:var(--g5)}
.book-rating{display:flex;align-items:center;gap:6px;font-size:.85rem;color:var(--g7);margin-bottom:20px}
.book-divider{height:1px;background:var(--g2);margin:16px 0}
.book-total-row{display:flex;justify-content:space-between;font-size:.88rem;color:var(--g7);margin-bottom:8px}
.book-total-row.total{font-family:var(--font-d);font-weight:700;font-size:.95rem;color:var(--navy);border-top:1px solid var(--g2);padding-top:12px;margin-top:4px}
.book-mollie{display:flex;align-items:center;gap:6px;justify-content:center;font-size:.75rem;color:var(--g5);margin-top:10px}
.review-card{padding:20px 0;border-bottom:1px solid var(--g2)}
.review-card:last-child{border-bottom:none}
.review-header{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.review-meta{flex:1}
.review-author{font-weight:600;font-size:.9rem;color:var(--navy)}
.review-date{font-size:.78rem;color:var(--g5)}
.review-text{font-size:.88rem;color:var(--g7);line-height:1.7}
.listing-map{height:260px;border-radius:var(--r-l);overflow:hidden;border:1px solid var(--g2);margin-bottom:28px}

/* ── Aanbieden (Multi-step Form) ────────────────────────────────────────── */
.step-indicator{display:flex;align-items:center;gap:0;margin-bottom:40px}
.step-dot{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;font-family:var(--font-d);font-size:.85rem;font-weight:700;
  background:var(--g2);color:var(--g5);transition:all .3s;flex-shrink:0
}
.step-dot.active{background:var(--blue-7);color:white}
.step-dot.done{background:var(--green);color:white}
.step-line{height:2px;flex:1;background:var(--g2);transition:background .3s}
.step-line.done{background:var(--green)}
.step-label{font-size:.7rem;font-weight:600;color:var(--g5);text-align:center;margin-top:6px}
.step-label.active{color:var(--blue-7)}
.type-options{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-bottom:24px}
.type-opt{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:20px 16px;border:2px solid var(--g2);border-radius:var(--r-l);
  cursor:pointer;transition:all .15s;background:white
}
.type-opt:hover{border-color:var(--blue-5);background:var(--blue-0)}
.type-opt.selected{border-color:var(--blue-7);background:var(--blue-0)}
.type-opt-icon{font-size:1.8rem}
.type-opt-label{font-size:.85rem;font-weight:600;color:var(--g7);text-align:center}
.type-opt.selected .type-opt-label{color:var(--blue-7)}
.feat-opts{display:flex;flex-wrap:wrap;gap:8px}
.feat-opt{
  display:flex;align-items:center;gap:6px;padding:8px 14px;
  border:1.5px solid var(--g2);border-radius:var(--r-f);
  font-size:.82rem;font-weight:500;color:var(--g7);cursor:pointer;transition:all .15s;background:white
}
.feat-opt:hover{border-color:var(--blue-5);color:var(--blue-7)}
.feat-opt.selected{border-color:var(--blue-7);color:var(--blue-7);background:var(--blue-0)}
.feat-opt input{display:none}
.price-preview{
  background:var(--g0);border:1px solid var(--g2);border-radius:var(--r-l);
  padding:20px;margin-top:16px
}
.price-preview-val{font-family:var(--font-d);font-size:2rem;font-weight:800;color:var(--navy)}
.price-preview-label{font-size:.85rem;color:var(--g5);margin-top:4px}
.aanbieden-layout{display:grid;grid-template-columns:1fr 340px;gap:40px;align-items:start}
.form-card{background:white;border-radius:var(--r-xl);border:1px solid var(--g2);padding:36px}
.form-nav{display:flex;justify-content:space-between;align-items:center;margin-top:28px;padding-top:20px;border-top:1px solid var(--g2)}
.success-screen{text-align:center;padding:60px 40px}
.success-icon{font-size:4rem;margin-bottom:20px}
.success-title{font-family:var(--font-d);font-size:1.8rem;font-weight:800;color:var(--navy);margin-bottom:12px}
.success-sub{font-size:1rem;color:var(--g5);max-width:400px;margin:0 auto 32px}

/* ── Berichten Page ─────────────────────────────────────────────────────── */
.berichten-layout{display:grid;grid-template-columns:340px 1fr;height:calc(100vh - var(--nav-h));overflow:hidden}
.conv-list{border-right:1px solid var(--g2);overflow-y:auto;background:white}
.conv-header{padding:20px;border-bottom:1px solid var(--g2);display:flex;align-items:center;justify-content:space-between}
.conv-header-title{font-family:var(--font-d);font-size:1.1rem;font-weight:800;color:var(--navy)}
.conv-item{
  display:flex;align-items:flex-start;gap:12px;padding:16px 20px;
  border-bottom:1px solid var(--g2);cursor:pointer;transition:background .15s
}
.conv-item:hover{background:var(--g0)}
.conv-item.active{background:var(--blue-0)}
.conv-info{flex:1;min-width:0}
.conv-name{font-size:.9rem;font-weight:600;color:var(--navy);margin-bottom:2px}
.conv-listing{font-size:.75rem;color:var(--blue-7);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv-preview{font-size:.8rem;color:var(--g5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv-time{font-size:.72rem;color:var(--g5);white-space:nowrap;flex-shrink:0}
.conv-unread{
  width:20px;height:20px;background:var(--blue-7);border-radius:50%;
  color:white;font-size:.65rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex-shrink:0
}
.chat-area{display:flex;flex-direction:column;height:100%;background:var(--g0)}
.chat-header{
  padding:16px 24px;background:white;border-bottom:1px solid var(--g2);
  display:flex;align-items:center;gap:14px
}
.chat-header-info{flex:1}
.chat-header-name{font-family:var(--font-d);font-weight:700;font-size:.95rem;color:var(--navy)}
.chat-header-listing{font-size:.78rem;color:var(--blue-7)}
.chat-messages{flex:1;overflow-y:auto;padding:24px;display:flex;flex-direction:column;gap:16px}
.chat-msg{display:flex;align-items:flex-end;gap:8px;max-width:70%}
.chat-msg.me{align-self:flex-end;flex-direction:row-reverse}
.chat-bubble{
  padding:12px 16px;border-radius:18px;font-size:.88rem;line-height:1.5;
  background:white;border:1px solid var(--g2);color:var(--g9)
}
.chat-msg.me .chat-bubble{background:var(--blue-7);color:white;border-color:var(--blue-7);border-radius:18px 18px 4px 18px}
.chat-msg:not(.me) .chat-bubble{border-radius:18px 18px 18px 4px}
.chat-time{font-size:.68rem;color:var(--g5);margin-bottom:4px}
.chat-input-area{padding:16px 24px;background:white;border-top:1px solid var(--g2);display:flex;gap:10px}
.chat-input{
  flex:1;padding:12px 16px;border:1.5px solid var(--g2);border-radius:var(--r-f);
  font-family:var(--font-b);font-size:.9rem;outline:none;transition:border-color .15s
}
.chat-input:focus{border-color:var(--blue-7)}
.chat-placeholder{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;color:var(--g5);padding:40px
}
.chat-placeholder-icon{font-size:3rem;color:var(--g3)}
.chat-placeholder-text{font-size:.9rem;text-align:center}

/* ── Notificatie sectie ─────────────────────────────────────────────────── */
.notify-section{background:var(--g0)}
.notify-card{
  position:relative;overflow:hidden;
  background:linear-gradient(145deg,var(--navy) 0%,var(--blue-8) 60%,#1e3a8a 100%);
  border-radius:var(--r-xl);padding:60px 56px 48px;
}
.notify-glow{position:absolute;pointer-events:none;border-radius:50%}
.notify-glow-1{
  width:480px;height:480px;top:-160px;right:-80px;
  background:radial-gradient(circle,rgba(59,130,246,.22) 0%,transparent 70%)
}
.notify-glow-2{
  width:320px;height:320px;bottom:-100px;left:10%;
  background:radial-gradient(circle,rgba(249,115,22,.12) 0%,transparent 70%)
}
.notify-body{position:relative;display:flex;align-items:flex-start;gap:28px;margin-bottom:40px}
.notify-icon-wrap{position:relative;flex-shrink:0;width:64px;height:64px}
.notify-icon-ring{
  position:absolute;inset:-6px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.18);
  animation:notify-pulse 2.5s ease-in-out infinite
}
@keyframes notify-pulse{
  0%,100%{transform:scale(1);opacity:.8}
  50%{transform:scale(1.12);opacity:.3}
}
.notify-icon{
  width:64px;height:64px;background:rgba(255,255,255,.1);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.15)
}
.notify-text{flex:1}
.notify-eyebrow{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(249,115,22,.2);color:#FED7AA;
  padding:5px 12px;border-radius:var(--r-f);font-size:.75rem;font-weight:700;
  letter-spacing:.04em;margin-bottom:14px;border:1px solid rgba(249,115,22,.3)
}
.notify-title{
  font-family:var(--font-d);font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800;
  color:white;letter-spacing:-.02em;margin-bottom:10px;line-height:1.1
}
.notify-sub{font-size:.92rem;color:rgba(255,255,255,.6);line-height:1.7;max-width:540px}

/* Form */
.notify-form{position:relative}
.notify-fields{
  display:grid;grid-template-columns:1fr 1fr 1.4fr auto;
  gap:10px;align-items:stretch
}
.notify-field-wrap{
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
  border-radius:var(--r-m);padding:0 16px;transition:border-color .2s,background .2s
}
.notify-field-wrap:focus-within{
  background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.35);
  box-shadow:0 0 0 3px rgba(255,255,255,.07)
}
.notify-field-icon{font-size:.95rem;flex-shrink:0;opacity:.7}
.notify-input{
  flex:1;background:transparent;border:none;outline:none;
  font-family:var(--font-b);font-size:.88rem;color:white;
  padding:14px 0;min-width:0
}
.notify-input::placeholder{color:rgba(255,255,255,.4)}
.notify-input option{background:var(--navy);color:white}
.notify-select{cursor:pointer;appearance:none}
.notify-field-email{grid-column:span 1}
.notify-btn{
  display:flex;align-items:center;gap:10px;
  background:var(--accent);color:white;border:none;
  padding:14px 28px;border-radius:var(--r-m);
  font-family:var(--font-b);font-size:.9rem;font-weight:700;
  cursor:pointer;transition:all .2s;white-space:nowrap;flex-shrink:0
}
.notify-btn:hover{background:var(--accent-h);transform:translateY(-2px);box-shadow:0 6px 20px rgba(249,115,22,.4)}
.notify-btn:disabled{opacity:.6;cursor:not-allowed;transform:none !important;box-shadow:none}
.notify-btn-icon{font-style:normal;transition:transform .2s}
.notify-btn:hover .notify-btn-icon{transform:translateX(3px)}
.notify-error{font-size:.8rem;color:#FCA5A5;margin-top:10px;min-height:20px;position:relative}

/* Success state */
.notify-success{
  display:none;flex-direction:column;align-items:center;text-align:center;
  padding:24px 0 8px;position:relative
}
.notify-success-check{
  width:56px;height:56px;background:rgba(22,163,74,.2);border:2px solid rgba(22,163,74,.5);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;color:#86EFAC;margin-bottom:16px;
  animation:notify-check-pop .4s cubic-bezier(.34,1.56,.64,1)
}
@keyframes notify-check-pop{from{transform:scale(0)}to{transform:scale(1)}}
.notify-success-title{
  font-family:var(--font-d);font-size:1.4rem;font-weight:800;color:white;margin-bottom:8px
}
.notify-success-sub{font-size:.9rem;color:rgba(255,255,255,.6);margin-bottom:20px}
.notify-success-sub strong{color:rgba(255,255,255,.9)}
.notify-success-reset{
  background:rgba(255,255,255,.1);color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.2);
  padding:8px 20px;border-radius:var(--r-f);font-family:var(--font-b);font-size:.82rem;
  cursor:pointer;transition:all .15s
}
.notify-success-reset:hover{background:rgba(255,255,255,.18);color:white}

/* Trust signals */
.notify-trust{
  display:flex;align-items:center;gap:24px;flex-wrap:wrap;
  margin-top:24px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1)
}
.notify-trust span{
  display:flex;align-items:center;gap:6px;
  font-size:.78rem;color:rgba(255,255,255,.45);
}
.notify-trust svg{color:rgba(255,255,255,.35);flex-shrink:0}

/* Responsive notify */
@media(max-width:900px){
  .notify-card{padding:40px 32px 36px}
  .notify-body{flex-direction:column;gap:20px}
  .notify-fields{grid-template-columns:1fr 1fr}
  .notify-field-email{grid-column:span 2}
  .notify-btn{grid-column:span 2;justify-content:center}
}
@media(max-width:600px){
  .notify-card{padding:28px 20px 28px}
  .notify-fields{grid-template-columns:1fr}
  .notify-field-email{grid-column:span 1}
  .notify-btn{grid-column:span 1}
  .notify-trust{gap:14px}
}

/* ── Vergelijkingspagina ────────────────────────────────────────────────── */
.compare-hero{
  background:linear-gradient(145deg,var(--navy) 0%,var(--blue-9) 60%,#1e3a8a 100%);
  padding:80px 0 72px;position:relative;overflow:hidden
}
.compare-hero::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle at 1.5px 1.5px,rgba(255,255,255,.04) 1.5px,transparent 0);
  background-size:36px 36px;pointer-events:none
}
.compare-hero-glow{
  position:absolute;top:-120px;right:-80px;width:600px;height:600px;
  background:radial-gradient(circle,rgba(37,99,235,.22) 0%,transparent 70%);pointer-events:none
}
.compare-hero-content{position:relative;z-index:1;max-width:700px}
.compare-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(59,130,246,.15);color:var(--blue-4);
  padding:6px 14px;border-radius:var(--r-f);font-size:.78rem;font-weight:600;
  letter-spacing:.04em;margin-bottom:22px;border:1px solid rgba(59,130,246,.25)
}
.compare-title{
  color:white;font-family:var(--font-d);font-size:clamp(2rem,5vw,3.2rem);
  font-weight:800;letter-spacing:-.025em;line-height:1.1;margin-bottom:18px
}
.compare-title .hl{color:var(--blue-4)}
.compare-sub{font-size:1rem;color:rgba(255,255,255,.6);line-height:1.75;margin-bottom:36px;max-width:560px}
.compare-hero-stats{display:flex;gap:32px;flex-wrap:wrap}
.chs-item{display:flex;flex-direction:column;gap:4px}
.chs-val{font-family:var(--font-d);font-size:2rem;font-weight:800;color:white}
.chs-label{font-size:.78rem;color:rgba(255,255,255,.5)}

/* Table */
.compare-table-section{padding:72px 0;background:var(--g0)}
.compare-disclaimer{
  display:flex;align-items:flex-start;gap:10px;
  background:white;border:1px solid var(--g2);border-radius:var(--r-m);
  padding:14px 18px;margin-bottom:40px;font-size:.8rem;color:var(--g5);line-height:1.6
}
.compare-disclaimer-icon{font-size:1rem;flex-shrink:0;margin-top:1px}
.compare-table-wrap{overflow-x:auto;border-radius:var(--r-xl);box-shadow:var(--sh-l)}
.compare-table{
  width:100%;border-collapse:collapse;background:white;
  min-width:800px
}
.compare-table th,
.compare-table td{
  padding:0;text-align:left;vertical-align:middle
}
/* Header row */
.compare-table thead tr{border-bottom:2px solid var(--g2)}
.ct-head-empty{width:240px;padding:24px 24px 20px;background:white}
.ct-head-provider{
  padding:24px 20px 20px;text-align:center;width:140px;
  background:white;border-left:1px solid var(--g2)
}
.ct-head-provider.highlight{
  background:var(--blue-7);border-left:none;border-right:none;
  position:relative
}
.ct-head-provider.highlight + .ct-head-provider{border-left:none}
.ct-badge{
  display:inline-block;background:var(--accent);color:white;
  font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 9px;border-radius:var(--r-f);margin-bottom:8px
}
.ct-provider-name{font-family:var(--font-d);font-weight:800;font-size:.95rem;color:var(--navy)}
.ct-head-provider.highlight .ct-provider-name{color:white}
.ct-provider-sub{font-size:.72rem;color:var(--g5);margin-top:2px}
.ct-head-provider.highlight .ct-provider-sub{color:rgba(255,255,255,.6)}

/* Body rows */
.compare-table tbody tr{border-bottom:1px solid var(--g2)}
.compare-table tbody tr:last-child{border-bottom:none}
.compare-table tbody tr:hover{background:var(--g0)}
.compare-table tbody tr:hover .ct-cell.highlight{background:var(--blue-8)}

.ct-feature{
  padding:16px 24px;width:240px;background:white
}
.ct-feature-inner{display:flex;align-items:center;gap:10px}
.ct-feature-icon{font-size:1rem;flex-shrink:0;width:20px;text-align:center}
.ct-feature-name{font-size:.88rem;font-weight:600;color:var(--navy)}
.ct-feature-sub{font-size:.75rem;color:var(--g5);margin-top:1px}

.ct-cell{
  padding:16px 20px;text-align:center;border-left:1px solid var(--g2);
  font-size:.85rem;color:var(--g7)
}
.ct-cell.highlight{
  background:var(--blue-7);border-left:none;border-right:none;color:white
}
.ct-cell.highlight + .ct-cell{border-left:none}

/* Indicator icons */
.ct-yes{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;background:#DCFCE7;border-radius:50%;color:#16A34A;font-size:.75rem;font-weight:700}
.ct-no{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;background:#FEE2E2;border-radius:50%;color:#DC2626;font-size:.75rem;font-weight:700}
.ct-partial{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;background:#FEF3C7;border-radius:50%;color:#92400E;font-size:.72rem;font-weight:700}
.ct-cell.highlight .ct-yes{background:rgba(255,255,255,.25);color:white}
.ct-cell.highlight .ct-no{background:rgba(255,255,255,.1);color:rgba(255,255,255,.5)}
.ct-cell.highlight .ct-partial{background:rgba(255,255,255,.2);color:white}

/* Price bar chart */
.price-chart-section{padding:72px 0}
.price-chart-wrap{display:flex;flex-direction:column;gap:16px;margin-top:40px}
.price-bar-row{display:grid;grid-template-columns:140px 1fr auto;align-items:center;gap:16px}
.price-bar-label{font-size:.88rem;font-weight:600;color:var(--navy);text-align:right}
.price-bar-label.is-sb{color:var(--blue-7)}
.price-bar-track{background:var(--g1);border-radius:var(--r-f);height:40px;overflow:hidden;position:relative}
.price-bar-fill{height:100%;border-radius:var(--r-f);display:flex;align-items:center;padding:0 14px;font-size:.8rem;font-weight:600;color:rgba(255,255,255,.95);transition:width .6s ease;position:relative}
.price-bar-fill.is-sb{background:linear-gradient(90deg,var(--blue-7),var(--blue-5))}
.price-bar-fill.is-other{background:var(--g3);color:var(--g7)}
.price-bar-range{font-size:.8rem;font-weight:700;color:var(--g7);white-space:nowrap}
.price-bar-range.is-sb{color:var(--blue-7)}

/* Advantage cards */
.advantage-section{padding:72px 0;background:var(--g0)}
.advantage-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.advantage-card{
  background:white;border-radius:var(--r-xl);padding:36px;
  border:1px solid var(--g2);transition:all .22s;position:relative;overflow:hidden
}
.advantage-card:hover{transform:translateY(-4px);box-shadow:var(--sh-l);border-color:transparent}
.advantage-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px
}
.advantage-card:nth-child(1)::before{background:var(--blue-7)}
.advantage-card:nth-child(2)::before{background:#16A34A}
.advantage-card:nth-child(3)::before{background:var(--accent)}
.adv-icon{font-size:2rem;margin-bottom:16px}
.adv-number{
  font-family:var(--font-d);font-size:2.8rem;font-weight:800;
  letter-spacing:-.03em;line-height:1;margin-bottom:8px
}
.advantage-card:nth-child(1) .adv-number{color:var(--blue-7)}
.advantage-card:nth-child(2) .adv-number{color:#16A34A}
.advantage-card:nth-child(3) .adv-number{color:var(--accent)}
.adv-title{font-family:var(--font-d);font-size:1.1rem;font-weight:700;color:var(--navy);margin-bottom:8px}
.adv-desc{font-size:.88rem;color:var(--g5);line-height:1.7}

/* Compare CTA */
.compare-cta-section{padding:72px 0}

/* Responsive */
@media(max-width:900px){
  .compare-hero{padding:56px 0 48px}
  .compare-hero-stats{gap:20px}
  .chs-val{font-size:1.6rem}
  .advantage-grid{grid-template-columns:1fr}
  .price-bar-row{grid-template-columns:100px 1fr auto;gap:10px}
}
@media(max-width:600px){
  .compare-hero-stats{flex-direction:column;gap:16px}
  .advantage-card{padding:24px}
  .price-bar-row{grid-template-columns:80px 1fr auto}
  .price-bar-label{font-size:.78rem}
}

/* ── Use Cases ──────────────────────────────────────────────────────────── */
.usecase-card{
  background:white;border-radius:var(--r-l);border:1px solid var(--g2);
  overflow:hidden;transition:all .22s;display:flex;flex-direction:column
}
.usecase-card:hover{transform:translateY(-4px);box-shadow:var(--sh-l);border-color:transparent}
.uc-bar{height:4px;width:100%;flex-shrink:0}
.uc-body{padding:28px;display:flex;flex-direction:column;gap:18px;flex:1}
.uc-persona{display:flex;align-items:center;gap:14px}
.uc-avatar{
  width:48px;height:48px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-d);font-size:1.1rem;font-weight:700
}
.uc-name{font-family:var(--font-d);font-weight:700;font-size:1rem;color:var(--navy);margin-bottom:3px}
.uc-tag{font-size:.8rem;font-weight:600;color:var(--g5)}
.uc-story{
  font-size:.92rem;line-height:1.75;color:var(--g7);
  font-style:italic;padding:16px 18px;background:var(--g0);
  border-radius:var(--r-m);border-left:3px solid var(--g3);flex:1
}
.uc-solution{border-top:1px solid var(--g2);padding-top:16px}
.uc-sol-title{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--g5);margin-bottom:10px}
.uc-list{list-style:none;display:flex;flex-direction:column;gap:8px}
.uc-list li{font-size:.85rem;color:var(--g7);line-height:1.5;display:flex;align-items:flex-start;gap:6px}

/* ── Trust Split ────────────────────────────────────────────────────────── */
.trust-split{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.trust-panel{border-radius:var(--r-xl);padding:40px;border:1px solid var(--g2);transition:box-shadow .2s}
.trust-panel:hover{box-shadow:var(--sh-l)}
.trust-panel-blue{background:linear-gradient(145deg,#EFF6FF 0%,#F8FAFC 100%);border-color:var(--blue-1)}
.trust-panel-green{background:linear-gradient(145deg,#F0FDF4 0%,#F8FAFC 100%);border-color:#BBF7D0}
.tp-header{display:flex;align-items:center;gap:16px;margin-bottom:28px}
.tp-icon{
  width:52px;height:52px;border-radius:var(--r-m);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:1.4rem;
  background:white;box-shadow:var(--sh-s);border:1px solid var(--g2)
}
.tp-title{font-family:var(--font-d);font-size:1.1rem;font-weight:800;color:var(--navy);margin-bottom:2px}
.tp-sub{font-size:.82rem;color:var(--g5)}
.tp-list{list-style:none;display:flex;flex-direction:column;gap:14px}
.tp-list li{display:flex;align-items:flex-start;gap:12px;font-size:.9rem;color:var(--g7);line-height:1.55}
.tp-check{
  width:22px;height:22px;border-radius:50%;background:white;
  display:flex;align-items:center;justify-content:center;
  font-size:.65rem;font-weight:700;flex-shrink:0;margin-top:1px;
  box-shadow:var(--sh-s);border:1px solid var(--g2)
}
.trust-panel-blue .tp-check{color:var(--blue-7);border-color:var(--blue-1)}
.trust-panel-green .tp-check{color:var(--green);border-color:#BBF7D0}
.tp-list li strong{color:var(--navy);font-weight:600}

/* ── Animations ─────────────────────────────────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.anim-fade-up{animation:fadeUp .5s ease forwards}
.anim-fade-in{animation:fadeIn .35s ease forwards}

/* ── Skeleton loading ────────────────────────────────────────────────────── */
.skeleton{background:linear-gradient(90deg,var(--g2) 25%,var(--g1) 50%,var(--g2) 75%);background-size:200% 100%;animation:skeleton-shimmer 1.4s infinite;border-radius:var(--r-s)}
@keyframes skeleton-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media(max-width:1100px){
  .listing-layout{grid-template-columns:1fr 320px;gap:28px}
  .aanbieden-layout{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .host-cta{padding:40px 36px}
}
@media(max-width:900px){
  .trust-split{grid-template-columns:1fr}
  .trust-panel{padding:28px}
  .nav-links,.nav-actions{display:none}
  .nav-burger{display:flex}
  .g3{grid-template-columns:repeat(2,1fr)}
  .g4{grid-template-columns:repeat(2,1fr)}
  .listing-layout{grid-template-columns:1fr;padding:24px 0}
  .listing-gallery{height:300px}
  .book-widget{position:static;margin-bottom:32px}
  .host-cta{flex-direction:column;text-align:center}
  .host-cta-stats{justify-content:center}
  .host-cta-actions{align-items:center}
  .search-layout{flex-direction:column;height:auto}
  .search-panel{width:100%;border-right:none;border-bottom:1px solid var(--g2);height:auto;overflow:visible;max-height:none}
  .map-panel{height:400px}
  .view-toggle{display:flex}
  .berichten-layout{grid-template-columns:1fr}
}
@media(max-width:600px){
  .container{padding:0 16px}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .trust-panel{padding:20px}
  .uc-body{padding:20px;gap:14px}
  .sw{flex-direction:column;border-radius:var(--r-m);padding:12px;gap:0}
  .sw-field{width:100%;padding:10px 12px}
  .sw-sep{display:none}
  .sw-btn{width:100%;justify-content:center;margin-top:6px;border-radius:var(--r-s)}
  .hero-stats{flex-wrap:wrap;gap:8px}
  .host-cta{padding:32px 24px}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;gap:8px;text-align:center}
  .listing-gallery{grid-template-columns:1fr;grid-template-rows:auto;height:220px}
  .gallery-main{border-radius:var(--r-l);grid-row:span 1}
  .gallery-thumb{display:none}
  .step-indicator{gap:0}
  .form-card{padding:20px}
  .berichten-layout{grid-template-columns:1fr;height:auto}
  .conv-list{max-height:300px}
  .chat-area{height:60vh}
}