/* Elle Newsletter popup — positioning + transition chrome.
   The form (.eln-signup) keeps its own bg/border/padding/radius — the
   dialog here is just a transparent positioning wrapper. */

.elg-popup {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: grid;
    place-items: center; /* default: centered modal */
    padding: clamp(16px, 4vw, 32px);
}

.elg-popup[hidden] {
    display: none;
}

/* Position variants */
.elg-popup--position-bottom-right {
    place-items: end end;
    /* The container still spans the full viewport (position:fixed; inset:0) so
       the dialog can be corner-anchored — but with no backdrop it must not
       swallow clicks meant for the article behind it. Make the wrapper
       pointer-transparent; interaction is re-enabled on the dialog below. */
    pointer-events: none;
}
.elg-popup--position-bottom-right .elg-popup__dialog {
    pointer-events: auto;
}

.elg-popup__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 18, 16, 0.55);
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Bottom-right corner popups are intentionally less intrusive — no
   backdrop overlay so visitors can keep reading the article behind. */
.elg-popup--position-bottom-right .elg-popup__backdrop {
    display: none;
}

.elg-popup__dialog {
    position: relative;
    background: transparent;
    padding: 0;
    border-radius: 0;
    max-width: var(--elg-popup-width, 520px);
    width: 100%;
    max-height: calc(100vh - 32px);
    overflow: auto;
}

/* Form inside the popup keeps all its own styling. Only the margin needs
   resetting (the inline form has 32px vertical margins for in-article
   placement, which we don't want inside a fixed dialog). The form gets the
   elevation shadow that used to live on the dialog. */
.elg-popup__dialog .eln-signup {
    margin: 0;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}

/* Open state — backdrop fades in. Dialog transitions are defined per
   transition variant below. */
.elg-popup.is-open .elg-popup__backdrop {
    opacity: 1;
}

/* Transition variants. Each defines the resting (closed) and open states
   of the dialog. Default is fade-up — slight rise + opacity. */
.elg-popup__dialog {
    transform: translateY(8px) scale(0.98);
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.elg-popup.is-open .elg-popup__dialog {
    transform: none;
    opacity: 1;
}

.elg-popup--transition-fade .elg-popup__dialog {
    transform: none;
    transition: opacity 0.25s ease;
}
.elg-popup--transition-fade.is-open .elg-popup__dialog {
    transform: none;
    opacity: 1;
}

.elg-popup--transition-slide-up .elg-popup__dialog {
    transform: translateY(40px);
    transition: opacity 0.25s ease, transform 0.3s ease;
}
.elg-popup--transition-slide-up.is-open .elg-popup__dialog {
    transform: none;
    opacity: 1;
}

.elg-popup--transition-slide-right .elg-popup__dialog {
    transform: translateX(40px);
    transition: opacity 0.25s ease, transform 0.3s ease;
}
.elg-popup--transition-slide-right.is-open .elg-popup__dialog {
    transform: none;
    opacity: 1;
}

.elg-popup__close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    color: #555;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
    /* Sit above the form so it can't be covered by the rounded corners. */
    z-index: 1;
}

.elg-popup__close:hover { color: #000; background: rgba(0,0,0,0.04); }
.elg-popup__close:focus { outline: 2px solid var(--accent-color, #cd202e); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .elg-popup__backdrop,
    .elg-popup__dialog {
        transition: none;
    }
}