/* =========================================================
   Les Tables - Evenementen & Promotie  (v2.2.0)
   Basis: Les Tables Design System (ink/paper/sage, radius 0,
   flat shadows, 180ms). Alle --lt-* waarden hieronder zijn
   FALLBACKS; de plugin print instelbare overrides via
   #lt-style-vars (tab "Stijl" in de admin).
   ========================================================= */
:root {
  --lt-ink:          #141310;
  --lt-ink-700:      #2b2a25;
  --lt-paper:        #ffffff;
  --lt-paper-050:    #f7f5ef;
  --lt-sage:         #a9c7a0;
  --lt-sage-hover:   #8fb184;
  --lt-sage-press:   #6f9364;
  --lt-sage-100:     #e3ecdf;
  --lt-ease:         cubic-bezier(.4, 0, .2, 1);
  --lt-duration:     180ms;
  --lt-font:         inherit;
  --lt-font-display: inherit;
}

/* ---------- Zwevende knoppen ---------- */
.lt-widget {
  position: fixed;
  right: var(--lt-edge-x, 20px);
  bottom: var(--lt-edge-y, 20px);
  z-index: 99990;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--lt-gap, 10px);
  font-family: var(--lt-font);
}
.lt-widget[data-pos="left"] {
  left: var(--lt-edge-x, 20px);
  right: auto;
  align-items: flex-start;
}

.lt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--lt-btn-pad-y, 14px) var(--lt-btn-pad-x, 28px);
  border: var(--lt-btn-bw, 2px) solid var(--lt-ink);
  border-radius: var(--lt-btn-radius, 0px);
  font-family: inherit;
  font-size: var(--lt-btn-fs, 15px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--lt-duration) var(--lt-ease),
              color var(--lt-duration) var(--lt-ease),
              filter var(--lt-duration) var(--lt-ease);
}
.lt-btn:focus-visible { outline: 3px solid var(--lt-sage-press); outline-offset: 2px; }
.lt-btn .lt-icon {
  flex: 0 0 auto;
  width: var(--lt-icon-size, 20px);
  height: var(--lt-icon-size, 20px);
}
.lt-btn span { white-space: nowrap; }

/* Varianten. Randkleur volgt standaard de knopkleur (DS-conventie);
   via de Stijl-tab kan dit "donker" of een eigen kleur worden. */
.lt-btn--dark {
  background: var(--lt-dark-bg, var(--lt-ink));
  border-color: var(--lt-border-color, var(--lt-dark-bg, var(--lt-ink)));
  color: var(--lt-dark-text, var(--lt-paper));
}
.lt-btn--green {
  background: var(--lt-green-bg, var(--lt-sage));
  border-color: var(--lt-border-color, var(--lt-green-bg, var(--lt-sage)));
  color: var(--lt-green-text, var(--lt-ink));
}
.lt-btn--dark:hover   { filter: brightness(1.6); }
.lt-btn--green:hover  { filter: brightness(0.92); }
.lt-btn--green:active { filter: brightness(0.85); }

/* Schaduw alleen op de zwevende cluster */
.lt-widget .lt-btn { box-shadow: var(--lt-btn-shadow, 2px 2px 0 var(--lt-ink)); }

/* Mobiel: balk onderaan (standaard) of zwevend zoals desktop */
@media (max-width: 640px) {
  .lt-widget .lt-btn {
    padding: var(--lt-m-pad-y, 12px) var(--lt-m-pad-x, 8px);
    font-size: var(--lt-m-fs, 13px);
  }
  .lt-btn span { white-space: normal; text-align: center; line-height: 1.15; }

  .lt-widget[data-mobile="bar"] {
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: row;
    align-items: stretch;
    gap: 8px;
    padding: 10px;
    background: var(--lt-paper);
    border-top: 2px solid var(--lt-ink);
  }
  .lt-widget[data-mobile="bar"] .lt-btn {
    flex: 1 1 0;
    box-shadow: none;
  }
  body:has(.lt-widget[data-mobile="bar"]) { padding-bottom: 72px; }

  /* Alleen iconen op mobiel */
  .lt-widget[data-mobile-labels="0"] .lt-btn span { display: none; }
  .lt-widget[data-mobile-labels="0"] .lt-btn { padding: var(--lt-m-pad-y, 12px); }
}

/* ---------- Pop-ups ---------- */
.lt-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  font-family: var(--lt-font);
}
.lt-modal[hidden] { display: none; }

.lt-modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--lt-p-backdrop, rgba(20, 19, 16, 0.55));
}

.lt-modal-card {
  position: relative;
  width: 100%;
  max-width: var(--lt-p-width, 440px);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--lt-p-bg, var(--lt-paper));
  border: var(--lt-p-bw, 3px) solid var(--lt-p-border, var(--lt-ink));
  border-radius: var(--lt-p-radius, 0px);
  box-shadow: var(--lt-p-shadow, 6px 6px 0 var(--lt-ink));
  animation: lt-pop var(--lt-duration) var(--lt-ease);
}

@keyframes lt-pop {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.lt-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: var(--lt-p-bg, var(--lt-paper));
  border: 2px solid var(--lt-p-border, var(--lt-ink));
  border-radius: var(--lt-p-radius, 0px);
  color: var(--lt-p-border, var(--lt-ink));
  cursor: pointer;
  transition: background var(--lt-duration) var(--lt-ease);
}
.lt-modal-close:hover { background: var(--lt-green-bg, var(--lt-sage)); }

.lt-modal-image img {
  display: block;
  width: 100%;
  height: var(--lt-p-image-h, 200px);
  object-fit: cover;
  border-bottom: var(--lt-p-bw, 3px) solid var(--lt-p-border, var(--lt-ink));
}

.lt-modal-body {
  padding: var(--lt-p-pad, 32px) calc(var(--lt-p-pad, 32px) - 4px);
  text-align: center;
}

/* Label/badge (DS Tag accent-tone) */
.lt-modal-badge {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 10px;
  background: var(--lt-p-badge-bg, var(--lt-sage-100));
  color: var(--lt-p-badge-text, var(--lt-ink));
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lt-modal-title {
  margin: 0 0 10px;
  color: var(--lt-p-title-color, var(--lt-ink));
  font-family: var(--lt-font-display);
  font-size: var(--lt-p-title-size, 28px);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.lt-modal-text {
  margin: 0 0 20px;
  color: var(--lt-p-text-color, var(--lt-ink));
  font-size: var(--lt-p-text-size, 15px);
  line-height: 1.5;
}

.lt-modal-cta { width: 100%; }

.lt-modal-dismiss {
  display: block;
  margin: 14px auto 0;
  padding: 0;
  background: none;
  border: 0;
  color: #55534a;
  font-family: inherit;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
  transition: color var(--lt-duration) var(--lt-ease);
}
.lt-modal-dismiss:hover { color: var(--lt-sage-press); }

.lt-modal-warning { color: #c65d3b; font-size: 14px; }

/* Gravity Forms in de pop-up */
.lt-modal-form { text-align: left; }
.lt-modal-form .gform_wrapper { margin: 0; }
.lt-modal-form .gform_wrapper input[type="text"],
.lt-modal-form .gform_wrapper input[type="email"] {
  width: 100%;
  padding: 12px 14px;
  background: var(--lt-p-bg, var(--lt-paper));
  border: 2px solid var(--lt-p-border, var(--lt-ink));
  border-radius: var(--lt-btn-radius, 0px);
  font-size: 15px;
}
.lt-modal-form .gform_wrapper input[type="submit"],
.lt-modal-form .gform_wrapper .gform_button {
  width: 100%;
  margin-top: 8px;
  padding: 14px 28px;
  background: var(--lt-green-bg, var(--lt-sage));
  border: 2px solid var(--lt-green-bg, var(--lt-sage));
  border-radius: var(--lt-btn-radius, 0px);
  color: var(--lt-green-text, var(--lt-ink));
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: filter var(--lt-duration) var(--lt-ease);
}
.lt-modal-form .gform_wrapper input[type="submit"]:hover,
.lt-modal-form .gform_wrapper .gform_button:hover { filter: brightness(0.92); }
.lt-modal-form .gform_confirmation_message {
  padding: 16px;
  background: var(--lt-p-badge-bg, var(--lt-sage-100));
  border: 2px solid var(--lt-p-border, var(--lt-ink));
  font-weight: 600;
  text-align: center;
}

/* Scroll-lock wanneer een pop-up open is */
body.lt-modal-open { overflow: hidden; }

/* ---------- "Binnenkort beschikbaar" badge (WooCommerce) ---------- */
.lt-coming-soon-badge {
  display: inline-block;
  margin: 0 0 14px;
  padding: 5px 12px;
  background: var(--lt-green-bg, var(--lt-sage));
  border: 2px solid var(--lt-ink);
  color: var(--lt-green-text, var(--lt-ink));
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.lt-coming-soon-badge--loop {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 5;
  margin: 0;
  padding: 4px 10px;
  font-size: 11px;
  box-shadow: var(--lt-btn-shadow, 2px 2px 0 var(--lt-ink));
}