/* ══════════════════════════════════════════════════════════════
   SHARED.CSS  –  Cyprus Vastgoed
   Gedeelde stijlen voor index.html & cyprus-panden-catalogusV2.html
   ══════════════════════════════════════════════════════════════ */

/* ── DESIGN SYSTEM (CSS-variabelen) ── */
:root {
  --blue:       #0A3D6B;
  --blue-mid:   #1565A8;
  --blue-pale:  #EBF3FC;
  --gold:       #C8963E;
  --gold-light: #F6EDD8;
  --sand:       #F9F5EF;
  --dark:       #161616;
  --mid:        #474747;
  --light:      #8A8A8A;
  --border:     rgba(10,61,107,0.1);
  --white:      #FFFFFF;
  --radius:     6px;
  --shadow:     0 8px 40px rgba(10,61,107,0.10);
  --shadow-sm:  0 2px 12px rgba(10,61,107,0.07);
  --font-heading: 'Cormorant Garamond', serif;
  --font-body:    'DM Sans', sans-serif;
  --header-h:     72px;
  --header-h-mob:  60px;
}

/* ── RESET & BASIS ── */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  font-family: var(--font-body);
  color:var(--dark);
  background:var(--white);
  overflow-x:hidden;
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight:600; line-height:1.15; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
button, .btn { cursor:pointer; border:none; font-family: var(--font-body); }

/* ── LAYOUT HULPKLASSEN ── */
.container { max-width:1220px; margin:0 auto; padding:0 5%; }
.section { padding:96px 0; }
.section-label {
  font-family: var(--font-body);
  font-size:11px; font-weight:600; letter-spacing:2.5px;
  text-transform:uppercase; color:var(--gold);
  margin-bottom:16px; display:block;
}
.section-title { font-size:clamp(2rem,4vw,3rem); color:var(--blue); margin-bottom:20px; }
.section-sub { font-size:1.05rem; color:var(--mid); line-height:1.75; max-width:560px; }

/* ── KNOPPEN ── */
.btn-primary {
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 28px; background:var(--blue); color:#fff;
  font-size:0.9rem; font-weight:500; letter-spacing:0.3px;
  border-radius:var(--radius);
  transition:background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.btn-primary:hover { background:var(--blue-mid); transform:translateY(-2px); box-shadow:0 8px 24px rgba(10,61,107,0.25); }

.btn-outline {
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 28px; background:transparent; color:var(--blue);
  border:1.5px solid var(--blue); font-size:0.9rem; font-weight:500;
  border-radius:var(--radius); transition:all 0.2s;
}
.btn-outline:hover { background:var(--blue); color:#fff; transform:translateY(-2px); }

.btn-gold {
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 28px; background:var(--gold); color:#fff;
  font-size:0.9rem; font-weight:500; border-radius:var(--radius);
  transition:all 0.2s;
}
.btn-gold:hover { background:#b5832e; transform:translateY(-2px); box-shadow:0 8px 24px rgba(200,150,62,0.3); }

/* ── HEADER ── */
header {
  z-index:200;
  height: var(--header-h); display:flex; align-items:center;
  background:rgba(255,255,255,0.97);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
}
.header-inner {
  width:100%; max-width:1220px; margin:0 auto; padding:0 5%;
  display:flex; align-items:center; gap:40px;
}

/* ── LOGO ── */
.logo { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.logo-mark {
  width: 48px; height: 48px; flex-shrink: 0;
  border-radius: 50%; overflow: hidden;
}
.logo-mark img {
  width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;
  transform: scale(1.10);
}
.logo-mark svg { width:20px; height:20px; fill:#fff; }
.logo-text { font-family: var(--font-heading); font-size:1.35rem; font-weight:600; color:var(--blue); }
.logo-text span { color:var(--gold); }

/* ── SCROLL-ANIMATIES ── */
[data-anim] { opacity:0; transform:translateY(24px); transition:opacity 0.6s ease, transform 0.6s ease; }
[data-anim].visible { opacity:1; transform:translateY(0); }
[data-anim="left"]  { transform:translateX(-24px); }
[data-anim="left"].visible  { transform:translateX(0); }
[data-anim="right"] { transform:translateX(24px); }
[data-anim="right"].visible { transform:translateX(0); }

/* Voorkomt dat iOS automatisch inzoomt bij het aanklikken van inputs */
input, textarea, select {
  font-size: 16px !important;
}

/* ── BEDANKT OVERLAY ── */
.bedankt-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.bedankt-overlay.open {
  opacity: 1; pointer-events: all;
}
.bedankt-modal {
  background: #fff; border-radius: 16px; padding: 48px 40px;
  max-width: 440px; width: 90%; text-align: center;
  box-shadow: 0 24px 80px rgba(10,61,107,0.2);
  transform: translateY(20px); transition: transform 0.3s ease;
}
.bedankt-overlay.open .bedankt-modal {
  transform: translateY(0);
}
.bedankt-icoon { font-size: 3rem; margin-bottom: 16px; display: flex; justify-content: center; }
.bedankt-logo { width: 80px; height: 80px; object-fit: contain; }
.bedankt-modal h3 {
  font-family: var(--font-heading);
  font-size: 1.8rem; color: var(--blue); margin-bottom: 12px;
}
.bedankt-modal p {
  font-size: 0.95rem; color: var(--mid); line-height: 1.7; margin-bottom: 28px;
}
.bedankt-btn {
  padding: 12px 32px; background: var(--blue); color: #fff;
  border-radius: var(--radius); font-size: 0.9rem; font-weight: 600;
  border: none; cursor: pointer; transition: background-color 0.2s;
}
.bedankt-btn:hover { background: var(--blue-mid); }

/* ── ZOEK ICOON (tijdelijk verborgen) ── */
.search-icon-btn {
  display:none;
}
.search-icon-btn:hover { background:var(--blue-pale); }
.search-icon-btn svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ── ZOEK OVERLAY ── */
.search-overlay {
  position:fixed; inset:0; z-index:5000;
  display:none; align-items:flex-start; justify-content:center;
  padding-top:90px;
}
.search-overlay.open { display:flex; }
.search-overlay-backdrop {
  position:absolute; inset:0;
  background:rgba(10,61,107,0.45); backdrop-filter:blur(4px);
  cursor:pointer;
}
.search-overlay-panel {
  position:relative; z-index:1;
  width:100%; max-width:640px; margin:0 20px;
  background:#fff; border-radius:12px;
  box-shadow:0 24px 80px rgba(10,61,107,0.22);
  overflow:hidden;
  animation:searchSlideDown 0.2s ease;
}
@keyframes searchSlideDown {
  from { opacity:0; transform:translateY(-16px); }
  to   { opacity:1; transform:translateY(0); }
}
.search-bar-row {
  display:flex; align-items:center; gap:12px; padding:16px 20px;
  border-bottom:1px solid var(--border);
}
.search-bar-icon {
  width:20px; height:20px; flex-shrink:0;
  stroke:var(--light); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.search-bar-input {
  flex:1; border:none; outline:none;
  font-family:var(--font-body); font-size:1rem; color:var(--dark); background:transparent;
}
.search-bar-input::placeholder { color:var(--light); }
.search-bar-close {
  width:28px; height:28px; border:none; background:var(--sand);
  border-radius:50%; cursor:pointer; font-size:0.85rem; color:var(--mid);
  display:flex; align-items:center; justify-content:center; transition:background 0.2s;
  font-family:var(--font-body); flex-shrink:0;
}
.search-bar-close:hover { background:var(--border); }
.search-results { max-height:420px; overflow-y:auto; padding:8px 0; }
.search-placeholder { padding:20px; text-align:center; color:var(--light); font-size:0.9rem; }
.search-no-results  { padding:24px 20px; text-align:center; color:var(--light); font-size:0.9rem; }
.search-result-group {
  padding:10px 20px 4px;
  font-size:0.7rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--gold);
}
.search-result-item {
  display:flex; align-items:center; gap:12px; padding:10px 20px; cursor:pointer;
  transition:background 0.15s;
}
.search-result-item:hover { background:var(--blue-pale); }
.search-result-img {
  width:52px; height:38px; border-radius:6px; object-fit:cover; flex-shrink:0; background:var(--sand);
}
.search-result-body { flex:1; min-width:0; }
.search-result-title { font-size:0.9rem; font-weight:600; color:var(--dark); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.search-result-sub   { font-size:0.76rem; color:var(--light); margin-top:2px; }
.search-result-price { font-family:var(--font-heading); font-size:0.92rem; font-weight:600; color:var(--blue); flex-shrink:0; }

@media (max-width:768px) {
  .search-overlay { padding-top:70px; }
  .search-overlay-panel { margin:0 12px; }
}

/* ── FOOTER MINI ── */
.footer-mini {
  background: var(--dark); padding: 32px 5%; display: flex;
  flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
}
.footer-mini-logo { display: flex; align-items: center; gap: 10px; }
.footer-mini-logo-mark {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.footer-mini-logo-mark svg { width: 16px; height: 16px; fill: #fff; }
.footer-mini-logo-mark img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.footer-mini-text { font-family: var(--font-heading); font-size: 1.1rem; color: #fff; font-weight: 600; }
.footer-mini-text span { color: #f5d89a; }
.footer-mini-links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-mini-links a { font-size: 0.8rem; color: rgba(255,255,255,0.5); transition: color 0.2s; }
.footer-mini-links a:hover { color: #fff; }
.footer-mini-copy { font-size: 0.75rem; color: rgba(255,255,255,0.3); }

@media (max-width: 768px) {
  .footer-mini { flex-direction: column; align-items: flex-start; gap: 12px; }
  .footer-mini-links { gap: 14px; }
}

/* ── Verplicht-veld sterretje ── */
.verplicht { color: #ef4444; font-weight: 600; }

/* ── Cookie consent banner ── */
.cookie-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 9997;
  background: var(--dark); padding: 16px 5%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  transform: translateY(100%); transition: transform 0.4s ease;
  border-top: 2px solid var(--gold);
}
.cookie-banner.visible { transform: translateY(0); }
.cookie-banner-text {
  font-size: 0.85rem; color: rgba(255,255,255,0.8);
  max-width: 700px; line-height: 1.6; margin: 0;
}
.cookie-banner-text a { color: var(--gold); text-decoration: underline; }
.cookie-banner-actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-accept {
  padding: 10px 24px; background: var(--gold); color: #fff;
  border: none; border-radius: var(--radius);
  font-size: 0.88rem; font-weight: 600; cursor: pointer;
  transition: background 0.2s; font-family: var(--font-body);
}
.cookie-accept:hover { background: #b5832e; }
.cookie-decline {
  padding: 10px 20px; background: transparent;
  color: rgba(255,255,255,0.65); border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--radius); font-size: 0.88rem; cursor: pointer;
  transition: all 0.2s; font-family: var(--font-body);
}
.cookie-decline:hover { color: #fff; border-color: rgba(255,255,255,0.6); }
@media (max-width: 600px) {
  .cookie-banner { flex-direction: column; align-items: flex-start; gap: 14px; }
  .cookie-banner-actions { width: 100%; }
  .cookie-accept, .cookie-decline { flex: 1; text-align: center; }
}

/* ── WHATSAPP STICKY BUTTON ── */
.whatsapp-float {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 8000;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #25D366;
  color: #fff;
  padding: 13px 22px 13px 16px;
  border-radius: 50px;
  box-shadow: 0 4px 24px rgba(37, 211, 102, 0.45);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
  white-space: nowrap;
}
.whatsapp-float:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(37, 211, 102, 0.55);
  color: #fff;
}
.whatsapp-float svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .whatsapp-float {
    bottom: 20px;
    right: 16px;
    width: 54px;
    height: 54px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
  }
  .whatsapp-float span { display: none; }
}

/* ── Honeypot: onzichtbaar voor mensen, bots vullen dit in ── */
.hp-veld {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}