:root{
  --drk-bg:#0f1820;
  --drk-blue:#1c2d37;
  --drk-gold:#c5a96b;
  --drk-deep:#0f1820;
  --drk-card:#ffffff;
  --drk-muted:#8a9baa;
  --drk-border:rgba(197,169,107,.2);
  --drk-green:#2e7d32;
  --drk-accent:#e8c872;
}

#drk-app{
  font-family: Helvetica, Arial, sans-serif;
  color:#fff;
  background: linear-gradient(160deg, #0a1218 0%, #132535 40%, #0f1820 100%);
  min-height:100vh;
}

/* ─── Hero header ─── */
.drk-hero{
  background: linear-gradient(170deg, #081018 0%, #0e2030 50%, #0a1520 100%);
  border-bottom:1px solid rgba(197,169,107,.15);
  padding:48px 20px 40px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.drk-hero::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(ellipse 80% 60% at 50% 20%, rgba(197,169,107,.08), transparent 70%);
  pointer-events:none;
}
.drk-hero-inner{ position:relative; z-index:1; max-width:700px; margin:0 auto; }

.drk-logo{
  height:70px; width:auto; margin-bottom:20px;
  filter: drop-shadow(0 4px 16px rgba(197,169,107,.2));
}
@media(max-width:620px){ .drk-logo{ height:52px; } }

.drk-hero-divider{
  width:60px; height:2px; margin:0 auto 20px;
  background:linear-gradient(90deg, transparent, var(--drk-gold), transparent);
}

.drk-tagline{
  font-size:30px; font-weight:900; margin:0 0 10px;
  color:#fff;
  letter-spacing:-.3px;
  line-height:1.2;
}
.drk-tagline span{
  color:var(--drk-accent);
  text-shadow:0 2px 16px rgba(232,200,114,.3);
}
@media(max-width:620px){ .drk-tagline{ font-size:22px; } }

.drk-subtitle{
  font-size:16px; color:var(--drk-muted); margin:0;
  font-weight:400; letter-spacing:.2px;
}

.drk-wrap{ max-width:1200px; margin:0 auto; padding:32px 20px 48px; }

/* ─── Filters ─── */
.drk-filters{
  display:flex; gap:14px; flex-wrap:wrap; align-items:flex-end;
  background:rgba(255,255,255,.06);
  border:1px solid var(--drk-border); border-radius:16px;
  padding:16px 18px; margin-bottom:28px;
  backdrop-filter: blur(6px);
}
.drk-filter-field{ display:flex; flex-direction:column; gap:5px; flex:1; min-width:180px; }
.drk-filter-field label{ font-size:12px; color:var(--drk-accent); font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
.drk-filter-input{
  border:1px solid var(--drk-border); border-radius:10px; padding:10px 12px;
  outline:none; background:rgba(255,255,255,.08); color:#fff; font-size:14px;
}
.drk-filter-input::placeholder{ color:var(--drk-muted); }
.drk-filter-input:focus{ border-color:var(--drk-gold); box-shadow:0 0 0 3px rgba(197,169,107,.2); }

.drk-filter-select{
  border:1px solid var(--drk-border); border-radius:10px; padding:10px 12px;
  outline:none; background:rgba(255,255,255,.08); color:#fff; font-size:14px;
  appearance:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c5a96b' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
  padding-right:32px;
}
.drk-filter-select option{ background:#1c2d37; color:#fff; }
.drk-filter-select:focus{ border-color:var(--drk-gold); box-shadow:0 0 0 3px rgba(197,169,107,.2); }

.drk-filter-btn{
  padding:10px 18px; border-radius:10px; border:1px solid var(--drk-border);
  background:rgba(255,255,255,.06); color:var(--drk-accent); font-weight:700;
  cursor:pointer; font-size:13px; white-space:nowrap; align-self:flex-end;
}
.drk-filter-btn:hover{ background:rgba(197,169,107,.15); }

.drk-filter-count{
  font-size:13px; color:var(--drk-muted); margin-bottom:18px; text-align:center;
}

/* ─── Carousel ─── */
.drk-carousel-wrap{
  position:relative;
  overflow:hidden;
  margin:0 -20px;
  padding:0 20px;
}

.drk-carousel{
  display:flex;
  gap:24px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  padding:8px 4px 24px;
  /* hide scrollbar */
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.drk-carousel::-webkit-scrollbar{ display:none; }

/* ─── Cards (groot, swipeable) ─── */
.drk-card{
  scroll-snap-align:start;
  flex:0 0 380px;
  min-height:420px;
  border:2px solid var(--drk-border);
  border-radius:22px;
  overflow:hidden;
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(8px);
  display:flex; flex-direction:column;
  cursor:pointer;
  transition: border-color .25s, box-shadow .25s, transform .2s;
}
.drk-card:hover{
  border-color:var(--drk-gold);
  box-shadow:0 16px 48px rgba(197,169,107,.2);
  transform: translateY(-4px);
}

@media(max-width:980px){
  .drk-card{ flex:0 0 320px; min-height:380px; }
}
@media(max-width:620px){
  .drk-card{ flex:0 0 85vw; min-height:360px; }
}

.drk-card-img{
  height:220px; background:rgba(255,255,255,.03); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.drk-card-img img{ width:100%; height:100%; object-fit:cover; }

.drk-card-body{ padding:18px 20px; display:flex; flex-direction:column; gap:8px; flex:1; }
.drk-card-title{ font-size:20px; font-weight:800; line-height:1.2; color:#fff; }
.drk-card-region{ font-size:14px; color:var(--drk-muted); }
.drk-card-price{ font-size:16px; font-weight:700; color:var(--drk-accent); }
.drk-card-units{ font-size:12px; color:var(--drk-muted); margin-top:2px; }

.drk-card-btn{
  margin:0 20px 20px; padding:16px; border-radius:16px; text-align:center;
  background: linear-gradient(135deg, var(--drk-gold), #d4b96f);
  color:var(--drk-deep); border:none;
  font-weight:800; font-size:16px; cursor:pointer;
  transition: transform .15s, box-shadow .2s;
  text-transform:uppercase; letter-spacing:.5px;
}
.drk-card-btn:hover{
  transform:scale(1.02);
  box-shadow:0 8px 24px rgba(197,169,107,.35);
}

/* ─── Carousel nav arrows ─── */
.drk-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:10;
  width:48px; height:48px; border-radius:50%;
  background:rgba(197,169,107,.9); color:var(--drk-deep);
  border:none; cursor:pointer; font-size:22px; font-weight:900;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,.3);
  transition: background .2s, transform .15s;
}
.drk-nav:hover{ background:var(--drk-accent); transform:translateY(-50%) scale(1.1); }
.drk-nav.left{ left:8px; }
.drk-nav.right{ right:8px; }
@media(max-width:620px){
  .drk-nav{ width:40px; height:40px; font-size:18px; }
}

/* ─── Dot indicators ─── */
.drk-dots{
  display:flex; justify-content:center; gap:8px; margin-top:4px;
}
.drk-dot{
  width:10px; height:10px; border-radius:50%;
  background:rgba(197,169,107,.25);
  transition:background .2s, transform .2s;
  cursor:pointer;
}
.drk-dot.active{ background:var(--drk-accent); transform:scale(1.3); }

/* ─── Loading / error ─── */
.drk-loading{ text-align:center; padding:60px; color:var(--drk-muted); font-size:16px; }

/* ─── Modal overlay ─── */
.drk-overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.78);
  display:none; align-items:center; justify-content:center;
  padding:16px; z-index:99999;
  backdrop-filter:blur(8px);
}
.drk-overlay.open{ display:flex; }

/* ─── Modal container ─── */
.drk-modal{
  width:min(860px, 100%);
  max-height:92vh;
  background:linear-gradient(175deg, #16293a 0%, #0f1820 100%);
  border-radius:24px;
  border:1px solid rgba(197,169,107,.22);
  box-shadow:
    0 40px 120px rgba(0,0,0,.7),
    0 0 0 1px rgba(197,169,107,.06),
    inset 0 1px 0 rgba(255,255,255,.05);
  display:flex; flex-direction:column;
  overflow:hidden;
}

/* ─── Hero afbeelding met gradient-overlay ─── */
.drk-modal-hero{
  position:relative;
  height:340px;
  flex-shrink:0;
  overflow:hidden;
}
@media(max-width:620px){ .drk-modal-hero{ height:220px; } }

.drk-modal-hero img{
  width:100%; height:100%; object-fit:cover; display:block;
}

.drk-modal-hero::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,.12) 0%,
    rgba(0,0,0,0) 25%,
    rgba(10,18,30,.65) 65%,
    rgba(10,18,30,.97) 100%
  );
  pointer-events:none;
}

.drk-modal-hero-overlay{
  position:absolute; bottom:0; left:0; right:0;
  padding:18px 30px 26px;
  z-index:2;
}

.drk-modal-hero-meta{
  display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px;
}

.drk-modal-title{
  font-size:30px; font-weight:900; color:#fff; margin:0;
  line-height:1.15;
  text-shadow:0 2px 16px rgba(0,0,0,.5);
}
@media(max-width:620px){ .drk-modal-title{ font-size:20px; } }

/* Sluitknop: cirkel rechts boven op hero */
.drk-modal-close{
  position:absolute; top:16px; right:16px; z-index:3;
  width:42px; height:42px; border-radius:50%;
  background:rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.18);
  color:#fff; font-size:20px; font-weight:700;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: background .2s, border-color .2s, color .2s;
  backdrop-filter:blur(6px);
  line-height:1;
}
.drk-modal-close:hover{
  background:rgba(197,169,107,.85);
  border-color:var(--drk-gold);
  color:var(--drk-deep);
}

/* ─── Fallback header (geen afbeelding) ─── */
.drk-modal-header-alt{
  padding:24px 28px;
  background:rgba(197,169,107,.07);
  display:flex; justify-content:space-between; align-items:flex-start; gap:16px;
  border-bottom:1px solid var(--drk-border);
  flex-shrink:0;
}
.drk-modal-title-alt{
  font-size:22px; font-weight:800; color:var(--drk-accent); margin:0;
}
.drk-modal-close-alt{
  position:static;
  flex-shrink:0;
  width:38px; height:38px; font-size:18px;
}

/* ─── Scrollbare content zone ─── */
.drk-modal-content{
  flex:1; overflow-y:auto;
  padding:28px 30px 32px;
  scrollbar-width:thin;
  scrollbar-color: rgba(197,169,107,.35) transparent;
}
.drk-modal-content::-webkit-scrollbar{ width:4px; }
.drk-modal-content::-webkit-scrollbar-track{ background:transparent; }
.drk-modal-content::-webkit-scrollbar-thumb{
  background:rgba(197,169,107,.4); border-radius:2px;
}
@media(max-width:620px){
  .drk-modal-content{ padding:20px 20px 28px; }
}

/* Tags (locatie + prijs — overlaid op hero) */
.drk-tag{
  display:inline-flex; align-items:center;
  padding:5px 13px; border-radius:100px;
  font-size:13px; font-weight:600;
  backdrop-filter:blur(6px);
}
.drk-tag-loc{
  background:rgba(0,0,0,.42);
  border:1px solid rgba(255,255,255,.2);
  color:#fff;
}
.drk-tag-price{
  background:rgba(197,169,107,.25);
  border:1px solid rgba(197,169,107,.45);
  color:var(--drk-accent);
}

/* ─── Beschrijving ─── */
.drk-modal-desc{
  font-size:15px; line-height:1.8;
  color:rgba(255,255,255,.68);
  margin:0 0 26px;
}

/* ─── Woningtypes ─── */
.drk-units-section{ margin-bottom:26px; }

.drk-units-label{
  font-size:11px; font-weight:800; text-transform:uppercase;
  letter-spacing:1.2px; color:var(--drk-accent);
  margin-bottom:12px;
}

/* Pills (geen prijzen) */
.drk-units-pills{ display:flex; flex-wrap:wrap; gap:8px; }
.drk-unit-pill{
  padding:7px 18px; border-radius:100px;
  border:1px solid rgba(197,169,107,.28);
  background:rgba(197,169,107,.07);
  color:rgba(255,255,255,.8); font-size:14px; font-weight:500;
  letter-spacing:.2px;
}

/* Tabel (met prijzen) */
.drk-unit-table{
  width:100%; border-collapse:collapse;
  font-size:14px;
}
.drk-unit-table thead tr{
  border-bottom:1px solid rgba(197,169,107,.2);
}
.drk-unit-table th{
  text-align:left; padding:10px 14px;
  font-weight:700; font-size:11px;
  color:var(--drk-accent); text-transform:uppercase; letter-spacing:.6px;
}
.drk-unit-table td{
  padding:13px 14px;
  border-bottom:1px solid rgba(255,255,255,.05);
  color:rgba(255,255,255,.78);
}
.drk-unit-table tbody tr:last-child td{ border-bottom:none; }
.drk-unit-table tbody tr:hover td{ background:rgba(255,255,255,.03); }
.drk-price-cell{ color:var(--drk-accent); font-weight:700; }

/* ─── Brochure download ─── */
.drk-brochures{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:26px; }
.drk-brochure-btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:12px 22px; border-radius:50px;
  background:linear-gradient(135deg, rgba(197,169,107,.14), rgba(197,169,107,.06));
  border:1px solid rgba(197,169,107,.38);
  text-decoration:none;
  color:var(--drk-accent); font-weight:700; font-size:14px;
  transition: background .2s, border-color .2s, transform .15s, color .2s;
}
.drk-brochure-btn:hover{
  background:linear-gradient(135deg, var(--drk-gold), #cba85e);
  border-color:var(--drk-gold);
  color:var(--drk-deep);
  transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(197,169,107,.25);
}
.drk-brochure-icon{ font-size:16px; line-height:1; }

/* ─── Formulier sectie ─── */
.drk-modal-form-section{
  border-top:1px solid rgba(197,169,107,.12);
  padding-top:24px;
  margin-top:6px;
}

.drk-form-title{
  font-size:15px; font-weight:800; margin-bottom:16px;
  color:var(--drk-accent); letter-spacing:.1px;
}
.drk-form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
@media(max-width:500px){ .drk-form-row{ grid-template-columns:1fr; } }

.drk-form-field{ display:flex; flex-direction:column; gap:6px; }
.drk-form-field label{
  font-size:11px; color:rgba(197,169,107,.8); font-weight:700;
  text-transform:uppercase; letter-spacing:.5px;
}
.drk-form-field input{
  border:1px solid rgba(197,169,107,.18); border-radius:12px;
  padding:13px 16px; outline:none;
  background:rgba(255,255,255,.05); color:#fff; font-size:14px;
  transition: border-color .2s, box-shadow .2s;
}
.drk-form-field input::placeholder{ color:rgba(255,255,255,.3); }
.drk-form-field input:focus{
  border-color:rgba(197,169,107,.55);
  box-shadow:0 0 0 3px rgba(197,169,107,.12);
  background:rgba(255,255,255,.07);
}

.drk-submit{
  width:100%; padding:17px; border-radius:14px; border:none;
  background:linear-gradient(135deg, #c5a96b, #d4b96f, #b8985a);
  color:#0d1a23; font-weight:900; font-size:15px;
  cursor:pointer; letter-spacing:.6px; text-transform:uppercase;
  transition: transform .15s, box-shadow .2s, opacity .2s;
  margin-top:4px;
}
.drk-submit:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 28px rgba(197,169,107,.35);
}
.drk-submit:disabled{ opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }

.drk-status{ margin-top:14px; font-size:14px; text-align:center; min-height:22px; }
.drk-status.success{ color:#6bcf7f; }
.drk-status.error{ color:#f06b6b; }

/* ─── Hero carousel navigatie ─── */
.drk-mhero-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:44px; height:44px; border-radius:50%;
  background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.18);
  color:#fff; font-size:26px; font-weight:300;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition: background .2s, border-color .2s;
  backdrop-filter:blur(6px);
  line-height:1;
  /* offset zodat de modal-close (rechts boven) er niet overheen valt */
}
.drk-mhero-nav.left{ left:14px; }
.drk-mhero-nav.right{ right:14px; }
.drk-mhero-nav:hover{ background:rgba(197,169,107,.7); border-color:var(--drk-gold); }
@media(max-width:620px){
  .drk-mhero-nav{ width:36px; height:36px; font-size:20px; }
}

.drk-mhero-counter{
  position:absolute; bottom:16px; right:18px; z-index:3;
  font-size:12px; font-weight:700; color:rgba(255,255,255,.75);
  background:rgba(0,0,0,.4); padding:3px 10px; border-radius:100px;
  backdrop-filter:blur(4px);
  letter-spacing:.3px;
}

/* Afbeelding crossfade bij wisselen */
.drk-mhero-img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition: opacity .3s ease;
}

/* ─── Info chips (oplevering + betaalplan) ─── */
.drk-info-chips{
  display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px;
}
.drk-chip{
  display:inline-flex; flex-direction:column;
  padding:10px 18px; border-radius:14px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(197,169,107,.18);
  gap:2px;
}
.drk-chip-label{
  font-size:10px; font-weight:800; text-transform:uppercase;
  letter-spacing:.8px; color:var(--drk-accent); line-height:1;
}
.drk-chip{ font-size:14px; color:rgba(255,255,255,.85); font-weight:500; }

/* ─── Tekstsecties (locatie / developer) ─── */
.drk-modal-section{
  margin-bottom:26px;
}
.drk-section-label{
  font-size:11px; font-weight:800; text-transform:uppercase;
  letter-spacing:1.2px; color:var(--drk-accent);
  margin-bottom:10px;
  padding-bottom:8px;
  border-bottom:1px solid rgba(197,169,107,.12);
}
.drk-section-text{
  font-size:14px; line-height:1.8;
  color:rgba(255,255,255,.65);
  margin:0;
}

/* ─── Amenity afbeeldingen strip ─── */
.drk-amenity-strip{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:8px;
}
@media(max-width:500px){
  .drk-amenity-strip{ grid-template-columns: repeat(2, 1fr); }
}
.drk-amenity-thumb{
  aspect-ratio:4/3; overflow:hidden; border-radius:10px;
  background:rgba(255,255,255,.04);
}
.drk-amenity-thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform .35s ease;
}
.drk-amenity-thumb:hover img{ transform:scale(1.06); }

/* Honeypot */
.drk-hp{ position:absolute; left:-9999px; opacity:0; height:0; width:0; overflow:hidden; }