/* ============================================================
   PASTE INTO: Widget Builder → CSS tab
   ============================================================ */

/* --- Trigger link (footer text link) ---
   Tweak these to match your other footer links (Contact, Composition & Care, etc).
   font-family is left out on purpose — it inherits from the footer, so it
   already matches. Un-comment text-decoration if you want an underline. */
.ekit-popup-trigger {
  cursor: pointer;
  color: {{trigger_color}};          /* falls back to inherited color if left blank in Elementor */
  font-size: inherit;                 /* set e.g. 14px to override */
  font-weight: inherit;               /* set e.g. 500 to override */
  letter-spacing: normal;             /* set e.g. 0.02em to space it out */
  text-transform: none;               /* set e.g. uppercase if your footer nav is caps */
  text-decoration: none;
  text-underline-offset: 2px;
  transition: color .15s ease;
}
.ekit-popup-trigger:hover,
.ekit-popup-trigger:focus-visible {
  color: {{trigger_hover}};
  /* text-decoration: underline;  ← uncomment for an underline-on-hover only */
}

/* --- Overlay --- */
.ekit-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(20, 20, 20, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease;
  box-sizing: border-box;
}
.ekit-popup-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

/* --- Modal box ---
   max-width is a fixed value here (not tied to a control) since
   the Slider control's value couldn't be resolved reliably.
   Change the 640px below directly to resize. */
.ekit-popup-box {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: 85vh;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  transform: translateY(16px);
  transition: transform .25s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ekit-popup-overlay.is-open .ekit-popup-box {
  transform: translateY(0);
}

/* --- Scrollable content area ---
   This holds the WYSIWYG content directly, so it needs its own
   padding and typography — it's no longer inheriting an entire
   Elementor page's section/column styling. */
.ekit-popup-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 48px 40px 40px;
  line-height: 1.6;
  color: #2b2b2b;
}

.ekit-popup-scroll h1,
.ekit-popup-scroll h2,
.ekit-popup-scroll h3 {
  margin-top: 1.4em;
  margin-bottom: 0.5em;
}
.ekit-popup-scroll h1:first-child,
.ekit-popup-scroll h2:first-child,
.ekit-popup-scroll h3:first-child {
  margin-top: 0;
}
.ekit-popup-scroll p { margin: 0 0 1em; }
.ekit-popup-scroll ul,
.ekit-popup-scroll ol { margin: 0 0 1em; padding-left: 1.4em; }

/* --- Close button --- */
.ekit-popup-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: #f3f3f1;
  color: #2b2b2b;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  transition: background .15s ease;
}
.ekit-popup-close:hover { background: #e6e5e2; }
.ekit-popup-close:focus-visible {
  outline: 2px solid #1a1a1a;
  outline-offset: 2px;
}

/* --- Lock body scroll while a popup is open --- */
body.ekit-popup-lock {
  overflow: hidden;
}

/* --- Mobile: near full-screen sheet --- */
@media (max-width: 640px) {
  .ekit-popup-overlay { padding: 0; }
  .ekit-popup-box {
    max-width: 100% !important;
    width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
  }
  .ekit-popup-scroll { padding: 56px 20px 32px; }
}