.contact-content{padding:2.2rem 0}
.contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:1.4rem;align-items:start}
.contact-panel{background:#fff;border:1px solid #e6e6e6;border-radius:20px;overflow:hidden;box-shadow:0 14px 34px rgba(0,0,0,.08);min-width:0}

.panel-head{padding:1.2rem 1.35rem;background:linear-gradient(180deg,#fff,#f6f8f6);border-bottom:1px solid #e6e6e6}
.panel-head h2{margin:0 0 .35rem;color:#1e4025;font-size:1.35rem}
.panel-sub{margin:0;color:#3f4f45!important;line-height:1.55}

.panel-body{padding:1.2rem 1.35rem;position:relative}

/* RECHTER PANEL (2de child) MET ACHTERGROND */
.contact-grid>.contact-panel:nth-child(2) .panel-body{background:url('/img/brandekaars.jpg') no-repeat center/cover;display:flex;flex-direction:column}
.contact-grid>.contact-panel:nth-child(2) .panel-body::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.65));z-index:0}
.contact-grid>.contact-panel:nth-child(2) .panel-body>*{position:relative;z-index:1}
.contact-grid>.contact-panel:nth-child(2) label,
.contact-grid>.contact-panel:nth-child(2) p,
.contact-grid>.contact-panel:nth-child(2) h3,
.contact-grid>.contact-panel:nth-child(2) h4{color:#fff}
.contact-grid>.contact-panel:nth-child(2) input,
.contact-grid>.contact-panel:nth-child(2) textarea{background:rgba(255,255,255,.95)}

.brand-row{display:flex;gap:14px;align-items:center;margin-bottom:1rem}
.brand-logo{max-width:120px;width:120px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.15))}
.brand-name{margin:0;font-weight:900;color:#1e4025}
.brand-note{margin:.15rem 0 0;color:#66756b;font-style:italic}

.info-block{margin:.9rem 0}
.info-block h3{margin:0 0 .55rem;color:#1e4025;font-size:1.05rem}
.info-block h4{margin:.7rem 0 .5rem;color:#1e4025;font-size:.98rem}

.link-list{margin:0;padding-left:1.1rem;line-height:1.6}
.link-list a,.info-item .v a{position:relative;color:#1e4025;font-weight:700;text-decoration:none;padding-bottom:2px}
.link-list a::after,.info-item .v a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:#94b3a0;transform:scaleX(0);transform-origin:left;transition:.2s}
.link-list a:hover::after,.info-item .v a:hover::after{transform:scaleX(1)}
.link-list a::before,.info-item .v a::before{content:"↗";margin-right:6px;font-size:.8rem;color:#94b3a0}

.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:.8rem}
.info-item{background:#f6f8f6;border:1px solid #e6e6e6;border-radius:16px;padding:.75rem .85rem}
.info-item .k{font-weight:900;color:#1e4025}
.info-item .v{color:#3f4f45}

.divider{height:1px;background:#e6e6e6;margin:1.1rem 0}
.divider.small{margin:.7rem 0}

.hours-list,.uitzonderlijke-dagen{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.hours-list li,.uitzonderlijke-dagen li{display:flex;justify-content:space-between;gap:12px;background:#fff;border:1px solid #e6e6e6;border-radius:14px;padding:.65rem .8rem;color:#3f4f45}
.hours-list em,.uitzonderlijke-dagen em{font-style:italic;color:#66756b;font-size:.92rem}

.social-grid{display:flex;flex-wrap:wrap;gap:10px}
.social-pill{display:inline-flex;align-items:center;justify-content:center;padding:.55rem 1.05rem;border-radius:999px;font-weight:800;text-decoration:none;color:#fff}
.social-pill.facebook{background:#3b5998}
.social-pill.instagram{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)}
.social-pill.twitter{background:#000}
.social-pill.tiktok{background:#000}
.social-pill.whatsapp{background:#25D366}
.social-pill.linkedin{background:#0077B5}
.social-pill:hover{opacity:.85}

.contact-form{display:flex;flex-direction:column;gap:14px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field label{display:block;margin-bottom:.35rem;font-weight:900}
.field input,.field textarea{width:100%;padding:.75rem .9rem;border-radius:14px;border:1px solid #cfd8cf;outline:none}
.field input:focus,.field textarea:focus{box-shadow:0 0 0 3px rgba(30,64,37,.14);border-color:#94b3a0}
.btn-submit{width:100%;padding:.85rem 1rem;border-radius:14px}

/* extra blok onder formulier */
.contact-extra{margin-top:auto;padding:1.1rem 1.2rem;border-radius:14px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25)}
.contact-extra h4{margin:0 0 .6rem;font-size:1rem;font-weight:900;color:#fff}
.contact-extra ul{margin:0;padding-left:1.1rem;line-height:1.55;color:#f0f0f0}
.contact-extra li{margin:.25rem 0}
.contact-note{margin:.7rem 0 0;font-size:.9rem;font-style:italic;color:#e0e0e0}

/* mini-cards onder rechter kaart */
.contact-bottom{grid-column:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-self:start;margin-top:0px}
.contact-mini{background:#fff;border:1px solid #e6e6e6;border-radius:18px;padding:1rem 1.05rem;box-shadow:0 10px 22px rgba(0,0,0,.06);display:flex;flex-direction:column;min-height:150px;position:relative;overflow:hidden}
.contact-mini::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:linear-gradient(90deg,#1e4025,#94b3a0);opacity:.35}
.contact-mini h4{margin:0 0 .45rem;color:#1e4025;font-size:1.02rem;font-weight:900}
.contact-mini p{margin:0 0 .9rem;color:#3f4f45;line-height:1.45;font-size:.9rem;opacity:.95}
.mini-actions{margin-top:auto;display:flex;flex-direction:column;gap:8px}
.mini-btn{display:flex;align-items:center;justify-content:center;text-align:center;padding:.62rem .9rem;border-radius:999px;background:#1e4025;color:#fff;text-decoration:none;font-weight:900;border:1px solid #1e4025;line-height:1.2;white-space:nowrap}
.mini-btn:hover{filter:brightness(1.06)}
.mini-btn.mini-ghost{background:#eef3ef;color:#1e4025;border:1px solid #cfd8cf}
.mini-btn.mini-ghost:hover{background:#e6eee8}

@media(max-width:980px){
  .contact-grid{grid-template-columns:1fr}
  .info-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .contact-bottom{grid-column:1;grid-template-columns:1fr;gap:12px}
  .contact-mini{min-height:auto}
  .mini-actions{flex-direction:row;flex-wrap:wrap}
  .mini-btn{flex:1 1 180px}
}

/* DEZE MOETEN BLIJVEN */
.contact-content .contact-grid{display:grid!important;grid-template-columns:1.05fr .95fr!important;gap:1.4rem}
.contact-content .contact-panel{min-width:0}
@media(max-width:980px){.contact-content .contact-grid{grid-template-columns:1fr!important}}
/* FIX: contact-bottom direct onder rechter kaart */
.contact-grid{grid-template-rows:auto auto}
.contact-grid>.contact-panel:first-child{grid-row:1 / span 2}
.contact-grid>.contact-panel:last-child{grid-row:1}
.contact-bottom{grid-row:2;margin-top:6px}
/* ===== MOBILE FIX (houd desktop exact hetzelfde) ===== */

/* Desktop: expliciet grid areas (stabieler dan nth/last-child) */
@media(min-width:981px){
  .contact-grid{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    grid-template-areas:
      "left right"
      "left bottom";
    gap:1.4rem;
    align-items:start;
  }
  .contact-grid>.contact-panel:first-child{grid-area:left}
  .contact-grid>.contact-panel:nth-child(2){grid-area:right}
  .contact-bottom{grid-area:bottom;grid-column:auto;grid-row:auto;margin-top:6px}
}

/* Mobiel: alles onder elkaar, geen row-spans */
@media(max-width:980px){
  .contact-grid{
    display:flex !important;
    flex-direction:column !important;
    gap:12px !important;
  }

  /* panel order: info -> formulier -> mini cards */
  .contact-grid>.contact-panel:first-child{order:1}
  .contact-grid>.contact-panel:nth-child(2){order:2}
  .contact-bottom{order:3;margin-top:0;grid-column:auto;grid-row:auto}

  /* mini cards op mobiel */
  .contact-bottom{display:grid;grid-template-columns:1fr;gap:12px}
  .mini-actions{flex-direction:row;flex-wrap:wrap}
  .mini-btn{flex:1 1 180px}
}

/* Alerts */
.cw-alert{
  border-radius:14px;
  padding:14px 16px;
  margin:0 0 18px;
  font-size:.95rem;
  line-height:1.45;
  display:flex;
  gap:10px;
  align-items:flex-start
}

/* Error */
.cw-alert--error{
  background:#fdecec;
  border:1px solid #f3b6b6;
  color:#7a1f1f
}
.cw-alert--error::before{
  content:"⚠";
  font-size:1.1rem;
  margin-top:1px
}

/* Success (indien ooit gebruikt) */
.cw-alert--ok{
  background:#edf7f1;
  border:1px solid #cbe6d9;
  color:#1e4025
}
.cw-alert--ok::before{
  content:"✓";
  font-size:1.1rem;
  margin-top:1px
}

/* Mobile spacing */
@media(max-width:640px){
  .cw-alert{font-size:.9rem;padding:12px 14px}
}

.contact-form .field input:invalid,
.contact-form .field textarea:invalid{
  border-color:#e07b7b;
  box-shadow:0 0 0 2px rgba(224,123,123,.15)
}