/* assets/css/stijl.css */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --groen:       #1D9E75;
  --groen-dark:  #0F6E56;
  --groen-licht: #E1F5EE;
  --amber-licht: #FAEEDA;
  --amber-dark:  #854F0B;
  --rood:        #E24B4A;
  --rood-licht:  #FCEBEB;
  --grijs-50:    #F8F7F3;
  --grijs-100:   #EFEDE7;
  --grijs-200:   #D4D2CA;
  --grijs-400:   #9B9991;
  --grijs-600:   #5F5D58;
  --grijs-900:   #1C1B18;
  --rand:        rgba(0,0,0,.10);
  --rand-sterk:  rgba(0,0,0,.18);
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --schaduw-sm:  0 1px 3px rgba(0,0,0,.08);
  --schaduw-md:  0 4px 16px rgba(0,0,0,.10);
}

html { font-size: 16px; }
body { font-family:'DM Sans',sans-serif; background:var(--grijs-50); color:var(--grijs-900); min-height:100vh; display:flex; flex-direction:column; }

h1,h2,h3 { font-family:'DM Serif Display',serif; font-weight:400; line-height:1.2; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; }

/* NAV */
.nav { background:#fff; border-bottom:1px solid var(--rand); padding:0 24px; display:flex; align-items:center; justify-content:space-between; height:60px; position:sticky; top:0; z-index:100; }
.nav-logo { font-family:'DM Serif Display',serif; font-size:20px; letter-spacing:-.3px; }
.nav-logo span { color:var(--groen); }
.nav-rechts { display:flex; align-items:center; gap:8px; }

/* TAALKIEZER */
.taal-kiezer { position:relative; }
.taal-knop { cursor:pointer; font-family:inherit; }
.taal-menu { display:none; position:absolute; top:calc(100% + 6px); right:0; background:#fff; border:1px solid var(--rand-sterk); border-radius:var(--radius-md); box-shadow:var(--schaduw-md); min-width:150px; overflow:hidden; z-index:200; }
.taal-menu.open { display:block; }
.taal-optie { display:flex; align-items:center; gap:10px; padding:9px 14px; font-size:14px; border-bottom:1px solid var(--rand); color:var(--grijs-900); transition:background .1s; }
.taal-optie:last-child { border-bottom:none; }
.taal-optie:hover { background:var(--grijs-100); }
.taal-optie.actief { background:var(--groen-licht); color:var(--groen-dark); font-weight:500; }

/* MAIN */
.main { flex:1; }
.container { max-width:1100px; margin:0 auto; padding:32px 20px; }
.container-sm { max-width:640px; margin:0 auto; padding:32px 20px; }

/* FOOTER */
.footer { border-top:1px solid var(--rand); background:#fff; padding:24px; text-align:center; font-size:13px; color:var(--grijs-400); }

/* BUTTONS */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:9px 18px; border-radius:var(--radius-sm); border:1px solid var(--rand-sterk); background:#fff; color:var(--grijs-900); font-size:14px; font-weight:500; cursor:pointer; transition:all .15s; font-family:inherit; white-space:nowrap; }
.btn:hover { background:var(--grijs-100); }
.btn-sm { padding:5px 12px; font-size:13px; }
.btn-primary { background:var(--groen); color:#fff; border-color:var(--groen); }
.btn-primary:hover { background:var(--groen-dark); }
.btn-danger { background:var(--rood); color:#fff; border-color:var(--rood); }
.btn-danger:hover { background:#a32d2d; }
.btn-actief { background:var(--groen-licht); border-color:var(--groen); color:var(--groen-dark); }

/* KAARTEN */
.kaart { background:#fff; border:1px solid var(--rand); border-radius:var(--radius-md); box-shadow:var(--schaduw-sm); }
.badge { display:inline-block; padding:2px 9px; border-radius:20px; font-size:12px; font-weight:500; }
.badge-groen { background:var(--groen-licht); color:var(--groen-dark); }
.badge-amber { background:var(--amber-licht); color:var(--amber-dark); }
.badge-rood  { background:var(--rood-licht);  color:#a32d2d; }
.badge-grijs { background:var(--grijs-100);   color:var(--grijs-600); }

/* FORMULIER */
.form-groep { margin-bottom:14px; }
.form-label { display:block; font-size:13px; font-weight:500; color:var(--grijs-600); margin-bottom:5px; }
.form-input { width:100%; padding:9px 12px; border-radius:var(--radius-sm); border:1px solid var(--rand-sterk); background:#fff; color:var(--grijs-900); font-size:14px; font-family:inherit; outline:none; transition:border-color .15s, box-shadow .15s; }
.form-input:focus { border-color:var(--groen); box-shadow:0 0 0 3px rgba(29,158,117,.12); }
textarea.form-input { resize:vertical; }
.form-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
select.form-input { cursor:pointer; }

/* BERICHTEN */
.fout-box    { background:var(--rood-licht); color:#a32d2d; border:1px solid rgba(226,75,74,.2); border-radius:var(--radius-sm); padding:12px 16px; font-size:14px; margin-bottom:16px; }
.succes-box  { background:var(--groen-licht); color:var(--groen-dark); border:1px solid rgba(29,158,117,.2); border-radius:var(--radius-sm); padding:12px 16px; font-size:14px; margin-bottom:16px; }
.info-box    { background:#EFF6FF; color:#1e40af; border:1px solid rgba(59,130,246,.2); border-radius:var(--radius-sm); padding:12px 16px; font-size:14px; margin-bottom:16px; }

/* SPINNER */
.spinner { width:32px; height:32px; border:3px solid var(--grijs-200); border-top-color:var(--groen); border-radius:50%; animation:spin .8s linear infinite; margin:40px auto; }
@keyframes spin { to { transform:rotate(360deg); } }

/* PANDEN GRID */
.panden-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:20px; }
.pand-kaart { overflow:hidden; cursor:pointer; transition:transform .15s, box-shadow .15s; display:flex; flex-direction:column; }
.pand-kaart:hover { transform:translateY(-3px); box-shadow:var(--schaduw-md); }
.pand-foto { height:180px; background:var(--grijs-100); display:flex; align-items:center; justify-content:center; font-size:56px; flex-shrink:0; overflow:hidden; }
.pand-foto img { width:100%; height:100%; object-fit:cover; }
.pand-body { padding:14px 16px; flex:1; display:flex; flex-direction:column; gap:6px; }
.pand-type { font-size:11px; color:var(--grijs-400); text-transform:uppercase; letter-spacing:.5px; font-weight:500; }
.pand-naam { font-family:'DM Serif Display',serif; font-size:16px; line-height:1.3; }
.pand-locatie { font-size:13px; color:var(--grijs-600); }
.pand-voet { margin-top:auto; padding-top:10px; border-top:1px solid var(--rand); display:flex; align-items:center; justify-content:space-between; }
.pand-prijs { font-size:18px; font-weight:600; color:var(--groen); }
.pand-prijs small { font-size:12px; color:var(--grijs-400); font-weight:400; }

/* FILTERS */
.filters { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.filter-knop { padding:6px 16px; border-radius:20px; border:1px solid var(--rand-sterk); background:#fff; color:var(--grijs-600); font-size:13px; font-weight:500; cursor:pointer; transition:all .15s; font-family:inherit; }
.filter-knop:hover, .filter-knop.actief { background:var(--groen); color:#fff; border-color:var(--groen); }

/* DETAIL */
.detail-grid { display:grid; grid-template-columns:1fr 340px; gap:24px; align-items:start; }
.detail-foto { width:100%; height:280px; border-radius:var(--radius-md); border:1px solid var(--rand); display:flex; align-items:center; justify-content:center; font-size:80px; background:var(--grijs-100); overflow:hidden; margin-bottom:24px; }
.detail-foto img { width:100%; height:100%; object-fit:cover; }
.info-rij { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--rand); font-size:14px; }
.info-rij:last-child { border-bottom:none; }
.info-rij .label { color:var(--grijs-600); }
.info-rij .waarde { font-weight:500; }
.sticky-box { position:sticky; top:76px; }

/* KALENDER */
.kalender { padding:0; }
.kal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.kal-titel { font-weight:500; font-size:14px; }
.kal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.kal-dag-naam { text-align:center; font-size:11px; color:var(--grijs-400); padding:4px 0; font-weight:500; }
.kal-dag { text-align:center; padding:7px 2px; border-radius:6px; font-size:13px; cursor:pointer; transition:background .1s; user-select:none; }
.kal-dag.leeg { cursor:default; }
.kal-dag.verleden { color:var(--grijs-200); cursor:default; }
.kal-dag.bezet { background:var(--amber-licht); color:var(--amber-dark); cursor:not-allowed; font-weight:500; }
.kal-dag.geselecteerd { background:var(--groen); color:#fff; font-weight:600; }
.kal-dag.bereik { background:var(--groen-licht); color:var(--groen-dark); }
.kal-dag.vandaag { color:var(--groen); font-weight:600; }
.kal-dag.beschikbaar:hover { background:var(--groen-licht); }
.kal-legenda { display:flex; gap:12px; margin-top:10px; flex-wrap:wrap; }
.kal-leg-item { display:flex; align-items:center; gap:5px; font-size:11px; color:var(--grijs-600); }
.kal-leg-kleur { width:10px; height:10px; border-radius:3px; border:1px solid rgba(0,0,0,.1); }

/* RESERVERINGSBOX */
.res-box { padding:20px; }
.prijs-samenvatting { background:var(--groen-licht); border-radius:var(--radius-sm); padding:14px; margin-top:14px; }
.prijs-samenvatting .data-rij { font-size:13px; color:var(--groen-dark); margin-bottom:8px; }
.prijs-samenvatting .prijs-rij { display:flex; justify-content:space-between; align-items:center; font-size:13px; }
.prijs-samenvatting .totaal-prijs { font-size:18px; font-weight:600; color:var(--groen); }

/* ADMIN */
.admin-nav { display:flex; gap:4px; background:var(--grijs-100); padding:4px; border-radius:10px; margin-bottom:24px; }
.admin-tab { flex:1; padding:8px; border:none; border-radius:8px; cursor:pointer; font-size:14px; color:var(--grijs-400); background:transparent; transition:all .15s; font-family:inherit; }
.admin-tab.actief { background:#fff; color:var(--grijs-900); font-weight:500; box-shadow:var(--schaduw-sm); }
.admin-kaart { padding:18px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.admin-kaart-info { display:flex; align-items:center; gap:14px; }
.admin-emoji { font-size:36px; }
.admin-naam { font-weight:500; font-size:15px; }
.admin-meta { font-size:13px; color:var(--grijs-400); margin-top:2px; }
.admin-acties { display:flex; gap:8px; }

/* TABEL */
.tabel-wrap { border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--rand); }
.data-tabel { width:100%; border-collapse:collapse; font-size:13px; }
.data-tabel th { text-align:left; padding:10px 14px; background:var(--grijs-100); font-weight:500; font-size:12px; color:var(--grijs-600); border-bottom:1px solid var(--rand); }
.data-tabel td { padding:10px 14px; border-bottom:1px solid var(--rand); vertical-align:middle; }
.data-tabel tr:last-child td { border-bottom:none; }
.data-tabel tr:hover td { background:var(--grijs-50); }

/* BEVESTIGING */
.bevestiging-box { text-align:center; padding:32px; }
.bevestiging-icon { font-size:56px; margin-bottom:16px; }
.detail-lijst { background:var(--grijs-50); border-radius:var(--radius-md); padding:20px; text-align:left; margin:24px 0; }
.detail-lijst .rij { display:flex; justify-content:space-between; font-size:14px; padding:6px 0; border-bottom:1px solid var(--rand); }
.detail-lijst .rij:last-child { border-bottom:none; }
.detail-lijst .rij .label { color:var(--grijs-600); }
.detail-lijst .rij .waarde { font-weight:500; }

/* HERO */
.hero { text-align:center; margin-bottom:28px; }
.hero h1 { font-size:42px; margin-bottom:8px; }
.hero p { color:var(--grijs-400); font-size:16px; }
.zoek-balk { margin-bottom:20px; max-width:440px; }

/* RTL */
[dir="rtl"] .data-tabel th,
[dir="rtl"] .data-tabel td { text-align:right; }
[dir="rtl"] .nav-rechts { flex-direction:row-reverse; }
[dir="rtl"] .taal-menu { right:auto; left:0; }
[dir="rtl"] .admin-kaart-info { flex-direction:row-reverse; }
[dir="rtl"] .pand-voet { flex-direction:row-reverse; }

/* RESPONSIVE */
@media (max-width:768px) {
  .detail-grid { grid-template-columns:1fr; }
  .sticky-box { position:static; }
  .form-grid-2 { grid-template-columns:1fr; }
  .hero h1 { font-size:28px; }
}
@media (max-width:480px) {
  .nav { padding:0 14px; }
  .container { padding:20px 14px; }
}