@charset "UTF-8";
/**
 * AAE Popup — chrome styles.
 *
 * Behavior flags ride on data-attrs (see inc/AtomicV4/Popup/Chrome.php).
 * The popup CONTENT (width, background, padding) is styled on the
 * template's root container in the atomic editor — only the overlay,
 * positioning and enter/exit transitions live here.
 *
 * Overlay tint override: :root { --aae-v4-popup-overlay: rgba(0,0,0,.8); }
 */
.aae-v4-popup {
  position: fixed;
  inset: 0;
  display: flex;
  visibility: hidden;
  pointer-events: none;
  --dur: 0.42s;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.aae-v4-popup.is-open {
  visibility: visible;
  pointer-events: auto;
}

.aae-v4-popup__overlay {
  position: absolute;
  inset: 0;
  background: var(--aae-v4-popup-overlay, rgba(0, 0, 0, 0.6));
  opacity: 0;
  transition: opacity var(--dur) ease;
}

.aae-v4-popup.is-shown .aae-v4-popup__overlay {
  opacity: 1;
}

.aae-v4-popup__dialog {
  position: relative;
  max-width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  outline: none;
  opacity: 0;
  transition: opacity var(--dur) ease, transform var(--dur) var(--ease), filter var(--dur) ease;
}

.aae-v4-popup.is-shown .aae-v4-popup__dialog {
  opacity: 1;
  transform: none;
}

/* Positions — flex alignment on the fixed root. */
.aae-v4-popup[data-position=center] {
  align-items: center;
  justify-content: center;
}

.aae-v4-popup[data-position=top] {
  align-items: flex-start;
  justify-content: center;
}

.aae-v4-popup[data-position=bottom] {
  align-items: flex-end;
  justify-content: center;
}

.aae-v4-popup[data-position=left],
.aae-v4-popup[data-position=right] {
  align-items: stretch;
}

.aae-v4-popup[data-position=left] {
  justify-content: flex-start;
}

.aae-v4-popup[data-position=right] {
  justify-content: flex-end;
}

.aae-v4-popup[data-position=left] .aae-v4-popup__dialog,
.aae-v4-popup[data-position=right] .aae-v4-popup__dialog {
  height: 100%;
  max-height: 100vh;
}

/* Side-center — pinned to an edge but vertically centred, a normal box (NOT a
   full-height drawer). Uses the chosen enter animation, not the drawer slide. */
.aae-v4-popup[data-position=left-center],
.aae-v4-popup[data-position=right-center] {
  align-items: center;
}

.aae-v4-popup[data-position=left-center] {
  justify-content: flex-start;
}

.aae-v4-popup[data-position=right-center] {
  justify-content: flex-end;
}

/* A little breathing room from the viewport edge. */
.aae-v4-popup[data-position=left-center] .aae-v4-popup__dialog {
  margin-left: 24px;
}

.aae-v4-popup[data-position=right-center] .aae-v4-popup__dialog {
  margin-right: 24px;
}

.aae-v4-popup[data-position=fullscreen] .aae-v4-popup__dialog {
  width: 100%;
  height: 100%;
  max-height: 100vh;
}

/**
 * Enter presets — pre-shown transform/filter states. Duration + easing come
 * from the --dur / --ease vars (per-popup, set inline by Chrome.php), so a
 * preset only declares its starting offset. The overshoot in `spring`/`pop`
 * comes from the spring easing; `stagger` lets the overlay fade in first.
 */
.aae-v4-popup[data-anim=stagger]:not(.is-shown) .aae-v4-popup__dialog {
  transform: translateY(30px) scale(0.97);
}

.aae-v4-popup[data-anim=stagger] .aae-v4-popup__dialog {
  transition-delay: calc(var(--dur) * 0.35);
}

.aae-v4-popup[data-anim=blur]:not(.is-shown) .aae-v4-popup__dialog {
  transform: translateY(14px);
  filter: blur(12px);
}

.aae-v4-popup[data-anim=spring]:not(.is-shown) .aae-v4-popup__dialog {
  transform: translateY(56px);
}

.aae-v4-popup[data-anim=pop]:not(.is-shown) .aae-v4-popup__dialog {
  transform: scale(0.8);
}

/* Drawers slide from their own edge regardless of the anim preset. */
.aae-v4-popup[data-position=left]:not(.is-shown):not([data-anim=none]) .aae-v4-popup__dialog {
  transform: translateX(-100%);
}

.aae-v4-popup[data-position=right]:not(.is-shown):not([data-anim=none]) .aae-v4-popup__dialog {
  transform: translateX(100%);
}

.aae-v4-popup[data-anim=none] .aae-v4-popup__overlay,
.aae-v4-popup[data-anim=none] .aae-v4-popup__dialog {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .aae-v4-popup__overlay,
  .aae-v4-popup__dialog {
    transition: none !important;
    transform: none !important;
    filter: none !important;
  }
}