/* Popups — huisstijl volgt de themavariabelen, lettertypen zijn al geladen */

.sancti-popup-wrap[hidden] { display: none; }

body.sancti-popup-open { overflow: hidden; }

.sancti-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(37, 25, 10, 0.55);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.sancti-popup-wrap.is-zichtbaar .sancti-popup-overlay { opacity: 1; }

.sancti-popup {
  position: fixed;
  z-index: 10001;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 18px 50px rgba(37, 25, 10, 0.28);
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.sancti-popup-wrap.is-zichtbaar .sancti-popup { opacity: 1; }

/* ===== Posities ===== */
.sancti-popup--midden {
  top: 50%;
  left: 50%;
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  transform: translate(-50%, -46%);
}
.sancti-popup-wrap.is-zichtbaar .sancti-popup--midden { transform: translate(-50%, -50%); }

/* Ruimte onderaan: rechtsonder zit ook de zwevende reserveerknop van het
   boekingswidget. Die wordt client-side ingeladen, dus we wijken er omheen. */
.sancti-popup--rechtsonder {
  right: 24px;
  bottom: 88px;
  width: min(380px, calc(100vw - 32px));
  transform: translateY(16px);
}
.sancti-popup-wrap.is-zichtbaar .sancti-popup--rechtsonder { transform: translateY(0); }

.sancti-popup--balk-onder,
.sancti-popup--balk-boven {
  left: 0;
  right: 0;
  width: 100%;
  border-radius: 0;
}
.sancti-popup--balk-onder { bottom: 0; transform: translateY(100%); }
.sancti-popup--balk-boven { top: 0;    transform: translateY(-100%); }
.sancti-popup-wrap.is-zichtbaar .sancti-popup--balk-onder,
.sancti-popup-wrap.is-zichtbaar .sancti-popup--balk-boven { transform: translateY(0); }

/* ===== Kleurstijlen (zelfde tokens als het CTA-blok) ===== */
.sancti-popup--beige  { background-color: var(--beige-color, #f0eae1); color: var(--dark-color, #25190a); }
.sancti-popup--wit    { background-color: var(--white-color, #ffffff); color: var(--dark-color, #25190a); }
.sancti-popup--donker { background-color: var(--secondary-color, #482b06); color: var(--beige-color, #f0eae1); }
.sancti-popup--goud   { background-color: var(--primary-color, #f4b32d); color: var(--dark-color, #25190a); }

/* ===== Wapenschild als watermerk ===== */
.sancti-popup--watermerk::before {
  content: '';
  position: absolute;
  right: -30px;
  bottom: -45px;
  width: 190px;
  height: 235px;
  background-image: url('/app/uploads/2025/08/sancti-adalberti-logo.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom right;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}

/* In de smalle varianten concurreert een groot wapen met de tekst */
.sancti-popup--rechtsonder.sancti-popup--watermerk::before,
.sancti-popup--balk-onder.sancti-popup--watermerk::before,
.sancti-popup--balk-boven.sancti-popup--watermerk::before {
  width: 130px;
  height: 160px;
  right: -22px;
  bottom: -32px;
  opacity: 0.06;
}

/* ===== Inhoud ===== */
.sancti-popup__afbeelding img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 200px;
  object-fit: cover;
}

.sancti-popup__inhoud {
  position: relative;
  z-index: 1;
  padding: 32px 36px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sancti-popup--balk-onder .sancti-popup__inhoud,
.sancti-popup--balk-boven .sancti-popup__inhoud {
  max-width: 1440px;
  margin: 0 auto;
  padding: 20px 24px;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.sancti-popup__titel {
  margin: 0;
  font-family: var(--h3-font-family, 'grenze gotisch');
  font-size: var(--h3-font-size, 36px);
  font-weight: var(--h3-font-weight, 400);
  line-height: 1.05;
  color: inherit;
}
.sancti-popup--donker .sancti-popup__titel { color: var(--primary-color, #f4b32d); }

.sancti-popup--balk-onder .sancti-popup__titel,
.sancti-popup--balk-boven .sancti-popup__titel { font-size: 26px; }

.sancti-popup__tekst {
  font-family: var(--body-font-family, 'lora');
  font-size: 17px;
  line-height: 1.6;
  max-width: 46ch;
}
.sancti-popup__tekst p { margin: 0 0 10px; }
.sancti-popup__tekst p:last-child { margin-bottom: 0; }

.sancti-popup__formulier { width: 100%; }
.sancti-popup--balk-onder .sancti-popup__formulier,
.sancti-popup--balk-boven .sancti-popup__formulier { flex: 1 1 320px; width: auto; }

/* ===== Knop — eigen class, buiten bereik van WooCommerce ===== */
.sancti-popup__button {
  display: inline-block;
  font-family: var(--button-font-family, 'Lora');
  font-size: var(--button-font-size, 16px);
  font-weight: var(--button-font-weight, 700);
  text-transform: var(--button-text-transform, uppercase);
  letter-spacing: 0.5px;
  padding: var(--button-padding, 14px 28px);
  border-radius: var(--button-border-radius, 4px);
  text-decoration: none;
  border: none;
  transition: background-color 0.25s ease, color 0.25s ease;
  background-color: var(--secondary-color, #482b06);
  color: var(--beige-color, #f0eae1);
}
.sancti-popup__button:hover { background-color: var(--dark-color, #25190a); color: var(--beige-color, #f0eae1); }

.sancti-popup--donker .sancti-popup__button,
.sancti-popup--goud .sancti-popup__button {
  background-color: var(--primary-color, #f4b32d);
  color: var(--dark-color, #25190a);
}
.sancti-popup--donker .sancti-popup__button:hover { background-color: var(--beige-color, #f0eae1); }

/* ===== Sluitknop ===== */
.sancti-popup__sluiten {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.65;
  transition: opacity 0.2s ease, background-color 0.2s ease;
}
.sancti-popup__sluiten:hover { opacity: 1; background-color: rgba(37, 25, 10, 0.08); }
.sancti-popup--donker .sancti-popup__sluiten:hover { background-color: rgba(240, 234, 225, 0.15); }
.sancti-popup__sluiten:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* ===== Mobiel: nooit een modal over het hele scherm ===== */
@media (max-width: 768px) {
  .sancti-popup--midden,
  .sancti-popup--rechtsonder {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    border-radius: 8px 8px 0 0;
    transform: translateY(100%);
  }
  .sancti-popup-wrap.is-zichtbaar .sancti-popup--midden,
  .sancti-popup-wrap.is-zichtbaar .sancti-popup--rechtsonder { transform: translateY(0); }

  /* Onderaan blijft ruimte vrij voor de zwevende reserveerknop */
  .sancti-popup__inhoud { padding: 26px 22px 84px; }
  .sancti-popup__titel { font-size: 27px; }
  .sancti-popup--balk-onder .sancti-popup__inhoud,
  .sancti-popup--balk-boven .sancti-popup__inhoud { flex-direction: column; align-items: stretch; }
}

/* ===== Bewegingsvoorkeur respecteren ===== */
@media (prefers-reduced-motion: reduce) {
  .sancti-popup,
  .sancti-popup-overlay { transition: none; }
  .sancti-popup { transform: none !important; }
  .sancti-popup--midden { transform: translate(-50%, -50%) !important; }
}