/* ============================================================
   Résidence – Linkerkolom (Compacte regels) + Modals
   Bestand: sidebar-compact.css
   ============================================================ */

/* ---------- Design tokens ---------- */
:root{
  --brand-red:   #A0163D;   /* bordeaux: subtiele accenten */
  --brand-green: #0F7A3E;   /* primaire CTA-groen */
  --bg-tint:     #ECFDF5;   /* zachte groentint voor icon-badges */
  --card-bg:     #FFFFFF;
  --card-border: #E7F5EE;   /* lichtgroene rand */
  --card-shadow: 0 4px 14px rgba(0,0,0,.06);
  --text:        #183C2E;   /* donkergroen/grijs */
  --muted:       #4E695E;
}

/* ---------- Basis typografie ---------- */
html { font-size:16px; }
body{
  font-family:"PT Sans","Segoe UI","Helvetica Neue",Arial,Tahoma,sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* Serif voor titels in lijn met huisstijl */
.card-title, .row-title, h1,h2,h3,h4,h5,h6{
  font-family:"PT Serif", Georgia, serif;
}

/* ---------- Sidebar: compacte regels ---------- */
.sidebar-stack.compact{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.sidebar-row{
  display:flex; align-items:center; gap:10px;
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:14px;
  padding:12px 14px;
  color:var(--text);
  text-decoration:none;
  box-shadow:var(--card-shadow);
  transition:transform .06s ease, box-shadow .2s ease, border-color .2s ease;
}

.sidebar-row:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(0,0,0,.06);
  border-color: color-mix(in oklab, var(--brand-red) 15%, var(--card-border));
}

.sidebar-row:focus-visible{
  outline:3px solid color-mix(in oklab, var(--brand-red) 30%, white);
  outline-offset:2px;
}

/* Icoon-badge + SVG-grootte */
.sidebar-row .icon{
  width:28px; height:28px;
  border-radius:8px;
  background:var(--bg-tint);
  color:var(--brand-green);
  display:flex; align-items:center; justify-content:center;
}
.sidebar-row .icon svg{ display:block; width:26px; height:26px; }

/* Tekst naast icoon */
.sidebar-row .row-title{
  font-weight:700;
  font-size:1.10rem;
  line-height:1.35;
}

/* ---------- Modals ---------- */
.rdcs-modal{
  position:fixed; inset:0; z-index:10000;
  display:none;
}
.rdcs-modal[aria-hidden="false"]{ display:block; }

.modal-backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,.35);
}

.modal-card{
  position:relative;
  max-width:520px;
  margin:6vh auto;
  background:#fff;
  border:1px solid var(--card-border);
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  overflow:hidden;
}

.modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid color-mix(in oklab, var(--brand-red) 12%, white);
}
.modal-head h3{ margin:0; font-size:1.15rem; }

.modal-close{
  background:transparent;
  border:none;
  font-size:24px; line-height:1;
  cursor:pointer;
}

.modal-body{ padding:16px; }
.modal-foot{
  padding:12px 16px;
  border-top:1px solid #eee;
  display:flex; justify-content:flex-end; gap:8px;
}

/* ---------- Form elementen in modals ---------- */
.rdcs-modal .input,
.rdcs-modal input[type="text"],
.rdcs-modal input[type="search"],
.rdcs-modal select{
  width:100%;
  background:#fff; color:#111;
  border:1px solid var(--card-border);
  border-radius:10px;
  padding:.6rem .75rem;
  font-size:1rem; line-height:1.4;
}
.rdcs-modal .input::placeholder{ color:#98a3a0; }

/* Buttons (primair en secundair) */
.btn{
  display:inline-block; width:100%;
  text-align:center; font-weight:700;
  background:var(--brand-green); color:#fff;
  padding:.6rem .9rem;
  border-radius:10px;
  border:1px solid transparent;
  transition:background .2s ease, transform .06s ease, box-shadow .2s ease;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
}
.btn:hover{
  background:#0c5f30;
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(15,122,62,.25);
}
.btn:focus-visible{
  outline:3px solid color-mix(in oklab, var(--brand-red) 30%, white);
  outline-offset:2px;
}

.btn-secondary{
  background:#f3f4f6; color:#111827;
  border:1px solid #e5e7eb;
  border-radius:10px; padding:.5rem .9rem;
}
.btn-secondary:hover{ background:#e5eeb2; } /* subtieler verschil */
.btn-secondary:focus-visible{
  outline:3px solid color-mix(in oklab, var(--brand-red) 30%, white);
  outline-offset:2px;
}

/* ---------- Google Translate boven overlay ---------- */
.goog-te-menu-frame,
.goog-te-menu2{
  z-index:2147483647 !important; /* altijd boven modal/backdrop */
}

/* ---------- Utilities ---------- */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .sidebar-row{ padding:12px }
  .sidebar-row .row-title{ font-size:1.08rem; }
}

/* ---------- Optionele ‘polish’ (kun je aan/uit zetten) ---------- */
/* Iets grotere titels in de sidebar */
/*
.sidebar-row .row-title{ font-size:1.15rem; }
.sidebar-row{ padding:14px 16px; }
*/

/* Super-subtiele bordeaux lijn onder de row-kop (alleen als je .card-head gebruikt) */
/*
.sidebar-card .card-head{
  padding-bottom:4px;
  border-bottom:1px solid color-mix(in oklab, var(--brand-red) 12%, white);
  margin-bottom:12px;
}
*/
	
	/* ===== MODAL Z-INDEX FIX • plak dit ONDERAAN je CSS ===== */

/* Zet de complete modal-stacking extreem hoog */
.rdcs-modal{
  z-index: 2147483000 !important; /* hoger dan vrijwel alles op de site */
}

/* Binnen de modal: backdrop onder, kaart boven */
.rdcs-modal .modal-backdrop{ 
  position: absolute; inset: 0;
  z-index: 1; 
}

.rdcs-modal .modal-card{
  position: relative;
  z-index: 2;                   /* boven de backdrop */
  pointer-events: auto;         /* expliciet klikken toelaten */
}

/* Vertaalmenu (Google iframe) ALTIJD boven alles */
.goog-te-menu-frame,
.goog-te-menu2{
  z-index: 2147483647 !important;
}

/* Fallback voor rare global overlays van thema/slider etc. */
body *[style*="z-index"] {
  /* niets veranderen global; alleen modal krijgt de hoogste laag */
}

	
	#ajaxSearch_form_modal input[type="search"] {
    border: 6px solid var(--card-border);
    margin-bottom: 10px;
}