/* =========================================================
   12D – Popup Revealer Widget
   File: assets/css/popup-revealer.css
   =========================================================

   Purpose
   -------
   Shared styling for the 12D Popup Revealer widget.

   This widget supports two popup modes:
   1. Modal popup  – opens in an overlay above the page
   2. Inline popup – expands inline within the page flow

   Scope
   -----
   This stylesheet covers:
   - inline popup container + content area
   - modal overlay + modal shell
   - modal entrance animations
   - modal close button styling
   - Popup-specific widget-level default design tokens

   Shared trigger-button styling is provided by the 12D Button system.

   Styling philosophy
   ------------------
   The widget should remain plugin-portable.
   Site-specific branding should come from CSS custom properties
   (tokens), ideally mapped from site-level variables where needed.
   ========================================================= */

:root {
  /* =========================================================
     Popup Revealer defaults
     ---------------------------------------------------------
     Widget-scoped defaults.
     These keep the Popup Revealer portable while allowing
     site-level tokens to influence color, radius, shadow,
     and motion where appropriate.
     ========================================================= */

  /* Core colors */
  --pr-color-text: var(--e-global-color-text, currentColor);
  --pr-color-border: transparent;
  --pr-color-surface: var(--d12-white, #ffffff);
  --pr-color-backdrop: rgba(0, 0, 0, 0.55);

  /* Radius */
  --pr-radius-pill: 999px;
  --pr-radius-card: var(--site-radius-lg, 10px);

  /* Shadow */
  --pr-shadow-soft: var(--site-shadow-sm, 0 8px 26px rgba(0, 0, 0, 0.08));
  --pr-shadow-strong: var(--site-shadow-md, 0 12px 40px rgba(0, 0, 0, 0.25));

  /* Modal sizing */
  --pr-modal-max-width: none;
  --pr-modal-max-height: calc(100vh - 80px);

  /* Backdrop alias */
  --pr-backdrop: var(--pr-color-backdrop);

  /* Modal entrance animation defaults */
  --pr-modal-anim-duration: var(--site-transition-base, 280ms);
  --pr-modal-anim-easing: ease-out;
  --pr-modal-anim-distance: 56px;
  --pr-modal-anim-scale-start: 0.92;

  /* Close button defaults */
  --pr-close-size: 38px;
  --pr-close-font-size: 1.3rem;
  --pr-close-radius: 50%;

  /* Close button — canonical interaction colors */
  --pr-close-color: var(--e-global-color-accent);
  --pr-close-bg: transparent;
  --pr-close-border: transparent;

  --pr-close-color-hover: var(--d12-white, #ffffff);
  --pr-close-bg-hover: var(--d12-accent-hover, var(--e-global-color-accent));
  --pr-close-border-hover: transparent;

  --pr-close-color-focus: var(--d12-accent-hover, var(--e-global-color-accent));
  --pr-close-bg-focus: var(--d12-white, #ffffff);
  --pr-close-border-focus: transparent;
  --pr-close-focus-indicator: var(
    --d12-accent-hover,
    var(--e-global-color-accent)
  );

  /* Nudge defaults */
  --pr-close-btn-nudge-x: 0px;
  --pr-close-btn-nudge-y: 0px;
  --pr-close-icon-nudge-x: 0px;
  --pr-close-icon-nudge-y: 0px;

  /* Inline popup spacing (gap between trigger button and inline box) */
  --pr-inline-gap-top: 0.75rem;

  /* Inline popup sizing defaults (widget overrides per instance via CSS vars) */
  --pr-inline-width: auto;
  --pr-inline-max-width: none;
  --pr-inline-max-height: none;
}

/* =========================================================
   Native popup trigger visibility
   ---------------------------------------------------------
   Popup Modal and Popup Inline can remain fully functional
   while their built-in trigger is visually hidden.

   The trigger stays in the DOM so another 12D component can
   activate it programmatically.
   ========================================================= */

.d12-popup-trigger-hidden .pr-trigger-button {
  display: none !important;
}

/* =========================================================
   Inline popup
   ========================================================= */
.pr-inline-wrapper {
  margin: 1rem 0;
}

/* Inline box (outer shell) */
.pr-inline {
  /* spacing from trigger button (set via Elementor) */
  margin-top: var(--pr-inline-gap-top, 0.75rem);

  /* sizing (set via Elementor) */
  width: var(--pr-inline-width, auto);
  max-width: var(--pr-inline-max-width, none);

  /* visuals (can be overridden by Elementor Inline Box controls) */
  border-radius: var(--pr-radius-card);
  border: 1px solid var(--pr-color-border);
  background: var(--pr-color-surface);
  box-shadow: var(--pr-shadow-soft);

  /* ✅ CRITICAL: clip inner Elementor backgrounds to rounded corners */
  overflow: hidden;

  display: none; /* hidden by default */
  color: var(--pr-color-text);
}

/* Visible state */
.pr-inline.is-open {
  display: block;
}

/*
 * Externally anchored Popup Inline
 * ---------------------------------------------------------
 * When another 12D component opens Popup Inline, the inline
 * box is temporarily portaled to <body> and positioned beside
 * the actual visible trigger rather than its hidden native button.
 */
.pr-inline.pr-inline--external-anchor {
  position: absolute;
  z-index: 9998;
  margin-top: 0;
  box-sizing: border-box;
}

/* Inner scroll area (holds the Elementor-rendered content) */
.pr-inline .pr-inline-content {
  /* Only this inner area scrolls */
  max-height: var(--pr-inline-max-height, none);
  overflow-y: auto;

  /* Keep it “normal” */
  width: 100%;
  box-sizing: border-box;
}

/* =========================================================
   Modal popup
   ========================================================= */
.pr-modal-wrapper {
  display: inline-block;
  position: relative;
}

@media (max-width: 767px) {
  .pr-modal-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
  }
}

.pr-modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--pr-backdrop) !important;

  display: none;
  align-items: center;
  justify-content: center;

  opacity: 0;
  pointer-events: none;

  transition: opacity var(--pr-modal-anim-duration, 280ms)
    var(--pr-modal-anim-easing, ease-out);

  z-index: 2147483000 !important;
}

.pr-modal-overlay.is-open {
  display: flex;
}

.pr-modal-overlay.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* Legacy drawer-style placement used by migrated Elementor Pro popups. */
.pr-modal-overlay.pr-position-right {
  align-items: stretch;
  justify-content: flex-end;
}

.pr-modal-overlay.pr-position-right .pr-modal {
  max-height: 100vh !important;
  height: 100%;
  border-radius: 0 !important;
}

.pr-modal {
  position: relative;
  background: var(--pr-modal-bg, var(--pr-color-surface));

  width: var(--pr-modal-width, 70vw) !important;
  max-width: var(--pr-modal-max-width, none) !important;
  max-height: var(--pr-modal-max-height, calc(100vh - 80px)) !important;

  border-style: solid;
  border-width: var(--pr-modal-border-width, 0px) !important;
  border-color: var(--pr-modal-border-color, transparent) !important;
  border-radius: var(
    --pr-modal-border-radius,
    var(--pr-radius-card)
  ) !important;

  padding: 0 !important;
  box-shadow: var(--pr-modal-shadow-horizontal, 0px)
    var(--pr-modal-shadow-vertical, 12px) var(--pr-modal-shadow-blur, 40px)
    var(--pr-modal-shadow-spread, 0px)
    var(--pr-modal-shadow-color, rgba(0, 0, 0, 0.25));

  overflow: hidden;

  color: var(--pr-color-text);
  box-sizing: border-box;
  z-index: 10;

  display: flex;
  flex-direction: column;

  opacity: 0;
  transform: scale(var(--pr-modal-anim-scale-start, 0.92));
  will-change: transform, opacity;
  transition:
    transform var(--pr-modal-anim-duration, 280ms)
      var(--pr-modal-anim-easing, ease-out),
    opacity var(--pr-modal-anim-duration, 280ms)
      var(--pr-modal-anim-easing, ease-out);
}

.pr-modal-overlay.is-active .pr-modal {
  opacity: 1;
}

/* =========================================================
   Modal entrance animation variants
   Hidden state = variant transform
   Active state = always reset to centered/final position
   ========================================================= */

.pr-modal-overlay.pr-anim-none,
.pr-modal-overlay.pr-anim-none .pr-modal {
  transition-duration: 0ms !important;
}

.pr-modal-overlay.pr-anim-none {
  transition-property: none !important;
}

.pr-modal-overlay.pr-anim-none .pr-modal {
  transition-property: none !important;
  opacity: 1;
  transform: none;
}

.pr-modal-overlay.pr-anim-scale .pr-modal {
  transform: scale(var(--pr-modal-anim-scale-start, 0.92));
}

.pr-modal-overlay.pr-anim-slide-right .pr-modal {
  transform: translate3d(
    calc(50vw + 50% + var(--pr-modal-anim-distance, 56px)),
    0,
    0
  );
}

.pr-modal-overlay.pr-anim-slide-left .pr-modal {
  transform: translate3d(
    calc(-50vw - 50% - var(--pr-modal-anim-distance, 56px)),
    0,
    0
  );
}

.pr-modal-overlay.pr-anim-slide-top .pr-modal {
  transform: translate3d(
    0,
    calc(-50vh - 50% - var(--pr-modal-anim-distance, 56px)),
    0
  );
}

.pr-modal-overlay.pr-anim-slide-bottom .pr-modal {
  transform: translate3d(
    0,
    calc(50vh + 50% + var(--pr-modal-anim-distance, 56px)),
    0
  );
}

/* Active state: all animated variants end in the same centered position */
.pr-modal-overlay.is-active.pr-anim-scale .pr-modal,
.pr-modal-overlay.is-active.pr-anim-slide-right .pr-modal,
.pr-modal-overlay.is-active.pr-anim-slide-left .pr-modal,
.pr-modal-overlay.is-active.pr-anim-slide-top .pr-modal,
.pr-modal-overlay.is-active.pr-anim-slide-bottom .pr-modal {
  transform: translate3d(0, 0, 0) scale(1);
}

.pr-modal-content {
  position: relative;
  z-index: 20;

  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;

  border-radius: inherit;
}

/* =========================================================
   Close button
   ========================================================= */
.pr-modal .pr-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;

  width: var(--pr-close-size, 38px) !important;
  height: var(--pr-close-size, 38px) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: var(--pr-close-radius, 50%) !important;
  border: 2px solid var(--pr-close-border, transparent) !important;

  background: var(--pr-close-bg, transparent) !important;
  color: var(--pr-close-color, var(--e-global-color-accent)) !important;
  font-size: var(--pr-close-font-size, 1.3rem) !important;
  line-height: 1 !important;
  padding: 0 !important;
  margin: 0 !important;

  cursor: pointer !important;

  /* Default shadow stays, but Elementor can override it via Box Shadow control */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);

  transition:
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.2s ease,
    transform 0.12s ease !important;

  z-index: 999999 !important;

  /* ✅ Button Nudge (moves the whole button) */
  transform: translate(
    var(--pr-close-btn-nudge-x, 0px),
    var(--pr-close-btn-nudge-y, 0px)
  ) !important;
}

/* This wrapper is the glyph/icon inside the button */
.pr-modal .pr-modal-close .pr-modal-close-icon,
.pr-modal .pr-modal-close .pr-modal-close-icon i,
.pr-modal .pr-modal-close .pr-modal-close-icon svg {
  position: relative;
  top: var(--pr-close-icon-nudge-y, 0px);
  left: var(--pr-close-icon-nudge-x, 0px);
}

.pr-modal .pr-modal-close svg {
  width: 1em;
  height: 1em;
  fill: currentColor !important;
}

.pr-modal .pr-modal-close:hover {
  background: var(
    --pr-close-bg-hover,
    var(--d12-accent-hover, var(--e-global-color-accent))
  ) !important;
  border-color: var(--pr-close-border-hover, transparent) !important;
  color: var(--pr-close-color-hover, var(--d12-white, #ffffff)) !important;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;

  /* keep button nudge + add subtle lift */
  transform: translate(
    var(--pr-close-btn-nudge-x, 0px),
    calc(var(--pr-close-btn-nudge-y, 0px) - 1px)
  ) !important;
}

.pr-modal .pr-modal-close:focus,
.pr-modal .pr-modal-close:focus-visible {
  background: var(--pr-close-bg-focus, transparent) !important;
  border-color: var(--pr-close-border-focus, transparent) !important;
  color: var(
    --pr-close-color-focus,
    var(--d12-accent-hover, var(--e-global-color-accent))
  ) !important;

  outline: 2px solid
    var(
      --pr-close-focus-indicator,
      var(--d12-accent-hover, var(--e-global-color-accent))
    ) !important;
  outline-offset: 2px;

  /* preserve the configured button nudge without applying hover lift */
  transform: translate(
    var(--pr-close-btn-nudge-x, 0px),
    var(--pr-close-btn-nudge-y, 0px)
  ) !important;
}

/*
 * Combined Focus + Hover state.
 *
 * Hover supplies the button surface and foreground while the
 * canonical Focus indicator remains visible.
 */
.pr-modal .pr-modal-close:focus:hover,
.pr-modal .pr-modal-close:focus-visible:hover {
  background: var(
    --pr-close-bg-hover,
    var(--d12-accent-hover, var(--e-global-color-accent))
  ) !important;
  border-color: var(--pr-close-border-hover, transparent) !important;
  color: var(--pr-close-color-hover, var(--d12-white, #ffffff)) !important;
}

@media (max-width: 880px) {
  .pr-modal .pr-modal-close {
    top: 0.75rem;
    right: 0.75rem;
  }
}

body.pr-modal-open {
  overflow: hidden;
}

/* End of file popup-revealer.css */