/* ====== Popups basis ====== */
.trend-popup { position: fixed; inset: 0; display: none; z-index: 9999; }
.trend-popup.is-open { display: block; }
.trend-popup__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.5); }

.trend-popup__dialog {
  position: relative;
  max-width: 680px;
  margin: 8vh auto;
  background: #fff;
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
  animation: popup-in .18s ease-out;
}

.trend-popup__close {
  position: absolute; top: 8px; right: 12px;
  font-size: 24px; background: none; border: 0; cursor: pointer; line-height: 1;
}

@keyframes popup-in {
  from { transform: translateY(8px); opacity: .7; }
  to   { transform: translateY(0);   opacity: 1;  }
}

/* ====== Postcode formulier (bezorgen) ====== */
.hs-postcode-form {
  display: flex; align-items: stretch; gap: 0; margin-top: 12px;
}

.hs-postcode-input {
  height: 48px;
  padding: 0 12px;
  background: #fff;
  font-size: 16px;
  color: #000;
  border: 1px solid #E2E2E2;
  border-right: 0;
  border-radius: 8px 0 0 8px;
  outline: none;
  width: 100%;
}

.hs-order-btn {
  height: 48px;
  background-color: #2e863f;
  border: 1px solid #2e863f;
  color: #fff;
  padding: 0 20px;
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 0 8px 8px 0;
}

.hs-order-btn:hover,
.hs-order-btn:focus {
  background-color: #000;
  border-color: #000;
  color: #fff;
}

/* foutmelding */
.hs-postcode-error {
  margin-top: 8px;
  font-size: 14px;
  color: #c62828;
}

/* Responsive */
@media (max-width: 480px) {
  .hs-postcode-form { flex-wrap: nowrap; }
  .hs-postcode-input { min-width: 0; }
}

/* (optioneel) header stacking & volgorde */
.header-wrap { position: relative; z-index: 1000; }
.header-menu { position: relative; z-index: 1001; }
.header-cta  { position: relative; z-index: 1002; }

.header-wrap { display: flex; flex-direction: column; gap: .6rem; }
@media (max-width: 980px){ .header-menu{order:1} .header-cta{order:2} }
@media (min-width: 981px){ .header-cta{order:1;align-self:flex-end} .header-menu{order:2} }

/* Popup altijd boven alles, ook boven sticky headers/menus */
.trend-popup{ position:fixed; inset:0; z-index:2147483646; } /* > any Divi menu */
.trend-popup__overlay{ z-index:100; }
.trend-popup__dialog{ position:relative; z-index:101; }

/* ===== Layout volgens mockup (logo, titel, subtitel, form) ===== */
.trend-popup__dialog{
  background:#f4f5f4; /* lichtgrijs paneel */
  text-align:center;
}

.hs-logo{
  width:120px; height:auto;
  margin:6px auto 10px;
  display:block;
}

.hs-title{
  margin:4px 0 6px;
  font-weight:800;
  letter-spacing:.2px;
  color:#111;
}

.hs-subtitle{
  margin:0 0 14px;
  font-size:18px;
  color:#2b2b2b;
}

/* Form centreren + pill-stijl */
#popup-bezorgen .hs-postcode-form{
  justify-content:center;
  max-width:560px;
  margin-left:auto; margin-right:auto;
}

#popup-bezorgen .hs-postcode-input{
  height:56px;
  font-size:18px;
  border:1px solid #d6d6d6;
  border-right:0;
  border-radius:14px 0 0 14px;
  padding:0 14px;
  background:#fff;
}

#popup-bezorgen .hs-postcode-input::placeholder{ color:#9aa0a6; }

#popup-bezorgen .hs-order-btn{
  height:56px;
  font-size:18px;
  border-radius:0 14px 14px 0;
  background:#2e863f;
  border-color:#2e863f;
  padding:0 24px;
  font-weight:800;
}

#popup-bezorgen .hs-order-btn:hover,
#popup-bezorgen .hs-order-btn:focus{
  background:#000; border-color:#000;
}

#popup-bezorgen .hs-postcode-error{
  text-align:center;
}

/* Compact op mobiel */
@media (max-width:480px){
  .hs-title{ font-size:22px; }
  .hs-subtitle{ font-size:16px; }
  #popup-bezorgen .hs-postcode-input,
  #popup-bezorgen .hs-order-btn{ height:52px; font-size:16px; }
}

/* ===== Afhalen: link met pijltje ===== */
#popup-afhalen .hs-subtitle{
  margin-bottom: 14px;
}

.hs-branch{
  margin: 0;
  text-align: center;
}

.hs-branch-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  text-decoration: none;
  color: #111;
}

.hs-branch-link .hs-branch-arrow{
  display: inline-block;
  transform: translateY(-1px);
  color: #2e863f; /* groen merk */
  font-weight: 700;
}

.hs-branch-link:hover .hs-branch-arrow{
  transform: translate(2px, -1px); /* subtiele nudge */
}

.hs-branch-link:hover{
  color: #000;
}

/* Compact op mobiel */
@media (max-width:480px){
  .hs-branch-link{ font-size: 18px; }
}
/* === Center popup + 15px safe padding aan randen === */
.trend-popup.is-open{
  display: flex;                 /* i.p.v. block */
  align-items: center;
  justify-content: center;
  padding: 15px;                 /* ruimte links/rechts/boven/onder */
}

.trend-popup__dialog{
  width: 100%;
  max-width: 560px;              /* was breder; maak compacter */
  margin: 0;                     /* geen auto-margins meer */
  padding: 32px 24px 40px;
}

/* Logo kleiner */
.hs-logo{
  width: 96px;                   /* desktop */
  height: auto;
  margin: 4px auto 10px;
}

/* Postcode form compacter */
#popup-bezorgen .hs-postcode-form{
  max-width: 480px;              /* korter formulier */
  margin-left: auto;
  margin-right: auto;
}

/* Mobiel tweaks */
@media (max-width: 480px){
  .trend-popup__dialog{
    max-width: 420px;            /* blijft gecentreerd, smaller op mobiel */
    padding: 18px;               /* iets compacter */
  }
  .hs-logo{ width: 80px; }       /* kleiner logo op mobiel */
}
.trend-popup[hidden]{ display:none !important; }

#popup-bezorgen .hs-postcode-form{
  margin-bottom: 7px;       /* extra ruimte onder het invoerveld+knop */
  box-sizing: border-box;
}