/* =========================================================
   File: popup-revealer.css
   Popup Revealer – Design Tokens (DEFAULTS)
   ========================================================= */
:root {
  --pr-color-primary: #437491;
  --pr-color-primary-hover: #2f5566;

  --pr-color-text: #333333;

  --pr-color-border: #d5d8dc;
  --pr-color-surface: #ffffff;

  --pr-color-backdrop: rgba(0, 0, 0, 0.55);

  --pr-radius-pill: 999px;
  --pr-radius-card: 10px;

  --pr-shadow-soft: 0 8px 26px rgba(0, 0, 0, 0.08);
  --pr-shadow-strong: 0 12px 40px rgba(0, 0, 0, 0.25);

  --pr-spacing-button-y: 0.6em;
  --pr-spacing-button-x: 1.2em;

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

  --pr-backdrop: var(--pr-color-backdrop);

  /* Modal entrance animation defaults */
  --pr-modal-anim-duration: 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%;

  /* 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;
}

/* =========================================================
   Shared trigger button (unstyled baseline)
   - No hard-coded brand look.
   - Elementor controls should define visuals.
   ========================================================= */
button.pr-trigger-button,
.pr-trigger-button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* keep a predictable inline layout */
  gap: 0.4rem;

  /* remove browser quirks without imposing a design */
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;

  font: inherit;
  line-height: 1.2;
  color: inherit;

  cursor: pointer;
  text-decoration: none;

  /* gentle defaults (Elementor hover styles can override) */
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.2s ease,
    transform 0.12s ease;
}

/* Focus style that doesn't fight Elementor, but keeps accessibility */
button.pr-trigger-button:focus-visible,
.pr-trigger-button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* =========================================================
   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;
}

/* 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;
}

.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, var(--pr-color-primary-hover)) !important;

  background: var(--pr-close-bg, #ffffff) !important;
  color: var(--pr-close-color, var(--pr-color-primary-hover)) !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:hover,
.pr-modal .pr-modal-close:focus-visible {
  background: var(--pr-close-bg-hover, var(--pr-color-primary-hover)) !important;
  border-color: var(--pr-close-border-hover, var(--pr-color-primary-hover)) !important;
  color: var(--pr-close-color-hover, #ffffff) !important;
  outline: none !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;
}

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

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

    font-size: var(--pr-close-font-size-mobile, 1.1rem) !important;
  }
}

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

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