.ps-sr-only {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.ps-popup-dialog {
    --distance: 16px;
    position: fixed;
    margin: 0;
    padding: 0;
    max-width: none;
    max-height: none;
    border: 0;
    background: var(--bg-color, #ffffff) var(--bg-image, none) center / contain no-repeat;
    width: var(--width, 640px);
    height: var(--height, 480px);
    border-radius: var(--border-radius, 16px);
    box-shadow: 0 0 20px rgba(var(--box-shadow-color), var(--box-shadow-opacity));
    opacity: 0;
}

.ps-popup-dialog.in {
    animation-name: var(--animation_in);
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
}

.ps-popup-dialog.out {
    animation-name: var(--animation_out);
    animation-duration: 0.2s;
    animation-fill-mode: forwards;
}

.ps-popup-dialog::backdrop {
    background-color: var(--backdrop-color, #000000);
    opacity: var(--backdrop-opacity, 0.5);
    cursor: var(--backdrop-cursor);
}

.dialog-body {
    position: relative;
    height: 100%;
}

.dialog-primary-link {
    position: absolute;
    display: block;
    inset: 0 0 0 0;
}

.dialog-btn-close {
    position: absolute;
    right: var(--distance);
    top: var(--distance);
    border: none;
    background-color: #ffffff;
    width: 32px;
    height: 32px;
    border-radius: 3px;
    z-index: 8;
}

.ps-popup-dialog.top-left {
    top: var(--distance);
    left: var(--distance);
    right: auto;
    bottom: auto;
}

.ps-popup-dialog.top-center {
    top: var(--distance);
    left: 50%;
    transform: translateX(-50%);
}

.ps-popup-dialog.top-right {
    top: var(--distance);
    right: var(--distance);
    left: auto;
    bottom: auto;
}

.ps-popup-dialog.center-left {
    top: 50%;
    left: var(--distance);
    transform: translateY(-50%);
}

.ps-popup-dialog.center-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.ps-popup-dialog.center-right {
    top: 50%;
    right: var(--distance);
    left: auto;
    transform: translateY(-50%);
}

.ps-popup-dialog.bottom-left {
    bottom: var(--distance);
    left: var(--distance);
    top: auto;
    right: auto;
}

.ps-popup-dialog.bottom-center {
    bottom: var(--distance);
    left: 50%;
    transform: translateX(-50%);
}

.ps-popup-dialog.bottom-right {
    bottom: var(--distance);
    right: var(--distance);
    left: auto;
    top: auto;
}

/* ------------------------------------------------------------------
   FADE animations (opacity only - same for all positions)
   ------------------------------------------------------------------ */
@keyframes fadeInTopLeft {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOutTopLeft {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fadeInTopCenter {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOutTopCenter {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fadeInTopRight {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOutTopRight {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fadeInCenterLeft {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOutCenterLeft {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fadeInCenterCenter {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOutCenterCenter {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fadeInCenterRight {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOutCenterRight {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fadeInBottomLeft {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOutBottomLeft {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fadeInBottomCenter {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOutBottomCenter {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fadeInBottomRight {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOutBottomRight {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* ------------------------------------------------------------------
   ZOOM animations (scale + position‑specific transforms)
   ------------------------------------------------------------------ */
/* top-left */
@keyframes zoomInTopLeft {
    from {
        opacity: 0;
        transform: scale(0.8);
        top: var(--distance);
        left: var(--distance);
        right: auto;
        bottom: auto;
    }

    to {
        opacity: 1;
        transform: scale(1);
        top: var(--distance);
        left: var(--distance);
        right: auto;
        bottom: auto;
    }
}

@keyframes zoomOutTopLeft {
    from {
        opacity: 1;
        transform: scale(1);
        top: var(--distance);
        left: var(--distance);
        right: auto;
        bottom: auto;
    }

    to {
        opacity: 0;
        transform: scale(0.8);
        top: var(--distance);
        left: var(--distance);
        right: auto;
        bottom: auto;
    }
}

/* top-center */
@keyframes zoomInTopCenter {
    from {
        opacity: 0;
        transform: translateX(-50%) scale(0.8);
        top: var(--distance);
        left: 50%;
        right: auto;
        bottom: auto;
    }

    to {
        opacity: 1;
        transform: translateX(-50%) scale(1);
        top: var(--distance);
        left: 50%;
        right: auto;
        bottom: auto;
    }
}

@keyframes zoomOutTopCenter {
    from {
        opacity: 1;
        transform: translateX(-50%) scale(1);
        top: var(--distance);
        left: 50%;
        right: auto;
        bottom: auto;
    }

    to {
        opacity: 0;
        transform: translateX(-50%) scale(0.8);
        top: var(--distance);
        left: 50%;
        right: auto;
        bottom: auto;
    }
}

/* top-right */
@keyframes zoomInTopRight {
    from {
        opacity: 0;
        transform: scale(0.8);
        top: var(--distance);
        right: var(--distance);
        left: auto;
        bottom: auto;
    }

    to {
        opacity: 1;
        transform: scale(1);
        top: var(--distance);
        right: var(--distance);
        left: auto;
        bottom: auto;
    }
}

@keyframes zoomOutTopRight {
    from {
        opacity: 1;
        transform: scale(1);
        top: var(--distance);
        right: var(--distance);
        left: auto;
        bottom: auto;
    }

    to {
        opacity: 0;
        transform: scale(0.8);
        top: var(--distance);
        right: var(--distance);
        left: auto;
        bottom: auto;
    }
}

/* center-left */
@keyframes zoomInCenterLeft {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(-50%);
        top: 50%;
        left: var(--distance);
        right: auto;
        bottom: auto;
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(-50%);
        top: 50%;
        left: var(--distance);
        right: auto;
        bottom: auto;
    }
}

@keyframes zoomOutCenterLeft {
    from {
        opacity: 1;
        transform: scale(1) translateY(-50%);
        top: 50%;
        left: var(--distance);
        right: auto;
        bottom: auto;
    }

    to {
        opacity: 0;
        transform: scale(0.8) translateY(-50%);
        top: 50%;
        left: var(--distance);
        right: auto;
        bottom: auto;
    }
}

/* center-center */
@keyframes zoomInCenterCenter {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
        top: 50%;
        left: 50%;
        right: auto;
        bottom: auto;
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
        top: 50%;
        left: 50%;
        right: auto;
        bottom: auto;
    }
}

@keyframes zoomOutCenterCenter {
    from {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
        top: 50%;
        left: 50%;
        right: auto;
        bottom: auto;
    }

    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
        top: 50%;
        left: 50%;
        right: auto;
        bottom: auto;
    }
}

/* center-right */
@keyframes zoomInCenterRight {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(-50%);
        top: 50%;
        right: var(--distance);
        left: auto;
        bottom: auto;
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(-50%);
        top: 50%;
        right: var(--distance);
        left: auto;
        bottom: auto;
    }
}

@keyframes zoomOutCenterRight {
    from {
        opacity: 1;
        transform: scale(1) translateY(-50%);
        top: 50%;
        right: var(--distance);
        left: auto;
        bottom: auto;
    }

    to {
        opacity: 0;
        transform: scale(0.8) translateY(-50%);
        top: 50%;
        right: var(--distance);
        left: auto;
        bottom: auto;
    }
}

/* bottom-left */
@keyframes zoomInBottomLeft {
    from {
        opacity: 0;
        transform: scale(0.8);
        bottom: var(--distance);
        left: var(--distance);
        top: auto;
        right: auto;
    }

    to {
        opacity: 1;
        transform: scale(1);
        bottom: var(--distance);
        left: var(--distance);
        top: auto;
        right: auto;
    }
}

@keyframes zoomOutBottomLeft {
    from {
        opacity: 1;
        transform: scale(1);
        bottom: var(--distance);
        left: var(--distance);
        top: auto;
        right: auto;
    }

    to {
        opacity: 0;
        transform: scale(0.8);
        bottom: var(--distance);
        left: var(--distance);
        top: auto;
        right: auto;
    }
}

/* bottom-center */
@keyframes zoomInBottomCenter {
    from {
        opacity: 0;
        transform: translateX(-50%) scale(0.8);
        bottom: var(--distance);
        left: 50%;
        top: auto;
        right: auto;
    }

    to {
        opacity: 1;
        transform: translateX(-50%) scale(1);
        bottom: var(--distance);
        left: 50%;
        top: auto;
        right: auto;
    }
}

@keyframes zoomOutBottomCenter {
    from {
        opacity: 1;
        transform: translateX(-50%) scale(1);
        bottom: var(--distance);
        left: 50%;
        top: auto;
        right: auto;
    }

    to {
        opacity: 0;
        transform: translateX(-50%) scale(0.8);
        bottom: var(--distance);
        left: 50%;
        top: auto;
        right: auto;
    }
}

/* bottom-right */
@keyframes zoomInBottomRight {
    from {
        opacity: 0;
        transform: scale(0.8);
        bottom: var(--distance);
        right: var(--distance);
        left: auto;
        top: auto;
    }

    to {
        opacity: 1;
        transform: scale(1);
        bottom: var(--distance);
        right: var(--distance);
        left: auto;
        top: auto;
    }
}

@keyframes zoomOutBottomRight {
    from {
        opacity: 1;
        transform: scale(1);
        bottom: var(--distance);
        right: var(--distance);
        left: auto;
        top: auto;
    }

    to {
        opacity: 0;
        transform: scale(0.8);
        bottom: var(--distance);
        right: var(--distance);
        left: auto;
        top: auto;
    }
}

/* ------------------------------------------------------------------
   SLIDE animations - always from top to final position, reverse out
   (preserve horizontal alignment)
   ------------------------------------------------------------------ */

/* top-left */
@keyframes slideInTopLeft {
    from {
        opacity: 0;
        transform: translateY(-100%);
        top: var(--distance);
        left: var(--distance);
        right: auto;
        bottom: auto;
    }

    to {
        opacity: 1;
        transform: translateY(0);
        top: var(--distance);
        left: var(--distance);
        right: auto;
        bottom: auto;
    }
}

@keyframes slideOutTopLeft {
    from {
        opacity: 1;
        transform: translateY(0);
        top: var(--distance);
        left: var(--distance);
        right: auto;
        bottom: auto;
    }

    to {
        opacity: 0;
        transform: translateY(-100%);
        top: var(--distance);
        left: var(--distance);
        right: auto;
        bottom: auto;
    }
}

/* top-center */
@keyframes slideInTopCenter {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-100%);
        top: var(--distance);
        left: 50%;
        right: auto;
        bottom: auto;
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
        top: var(--distance);
        left: 50%;
        right: auto;
        bottom: auto;
    }
}

@keyframes slideOutTopCenter {
    from {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
        top: var(--distance);
        left: 50%;
        right: auto;
        bottom: auto;
    }

    to {
        opacity: 0;
        transform: translateX(-50%) translateY(-100%);
        top: var(--distance);
        left: 50%;
        right: auto;
        bottom: auto;
    }
}

/* top-right */
@keyframes slideInTopRight {
    from {
        opacity: 0;
        transform: translateY(-100%);
        top: var(--distance);
        right: var(--distance);
        left: auto;
        bottom: auto;
    }

    to {
        opacity: 1;
        transform: translateY(0);
        top: var(--distance);
        right: var(--distance);
        left: auto;
        bottom: auto;
    }
}

@keyframes slideOutTopRight {
    from {
        opacity: 1;
        transform: translateY(0);
        top: var(--distance);
        right: var(--distance);
        left: auto;
        bottom: auto;
    }

    to {
        opacity: 0;
        transform: translateY(-100%);
        top: var(--distance);
        right: var(--distance);
        left: auto;
        bottom: auto;
    }
}

/* center-left */
@keyframes slideInCenterLeft {
    from {
        opacity: 0;
        transform: translateY(-100%);
        top: 50%;
        left: var(--distance);
        right: auto;
        bottom: auto;
    }

    to {
        opacity: 1;
        transform: translateY(-50%);
        top: 50%;
        left: var(--distance);
        right: auto;
        bottom: auto;
    }
}

@keyframes slideOutCenterLeft {
    from {
        opacity: 1;
        transform: translateY(-50%);
        top: 50%;
        left: var(--distance);
        right: auto;
        bottom: auto;
    }

    to {
        opacity: 0;
        transform: translateY(-100%);
        top: 50%;
        left: var(--distance);
        right: auto;
        bottom: auto;
    }
}

/* center-center */
@keyframes slideInCenterCenter {
    from {
        opacity: 0;
        transform: translate(-50%, -100%);
        top: 50%;
        left: 50%;
        right: auto;
        bottom: auto;
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
        right: auto;
        bottom: auto;
    }
}

@keyframes slideOutCenterCenter {
    from {
        opacity: 1;
        transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
        right: auto;
        bottom: auto;
    }

    to {
        opacity: 0;
        transform: translate(-50%, -100%);
        top: 50%;
        left: 50%;
        right: auto;
        bottom: auto;
    }
}

/* center-right */
@keyframes slideInCenterRight {
    from {
        opacity: 0;
        transform: translateY(-100%);
        top: 50%;
        right: var(--distance);
        left: auto;
        bottom: auto;
    }

    to {
        opacity: 1;
        transform: translateY(-50%);
        top: 50%;
        right: var(--distance);
        left: auto;
        bottom: auto;
    }
}

@keyframes slideOutCenterRight {
    from {
        opacity: 1;
        transform: translateY(-50%);
        top: 50%;
        right: var(--distance);
        left: auto;
        bottom: auto;
    }

    to {
        opacity: 0;
        transform: translateY(-100%);
        top: 50%;
        right: var(--distance);
        left: auto;
        bottom: auto;
    }
}

/* bottom-left */
@keyframes slideInBottomLeft {
    from {
        opacity: 0;
        transform: translateY(-100%);
        bottom: var(--distance);
        left: var(--distance);
        top: auto;
        right: auto;
    }

    to {
        opacity: 1;
        transform: translateY(0);
        bottom: var(--distance);
        left: var(--distance);
        top: auto;
        right: auto;
    }
}

@keyframes slideOutBottomLeft {
    from {
        opacity: 1;
        transform: translateY(0);
        bottom: var(--distance);
        left: var(--distance);
        top: auto;
        right: auto;
    }

    to {
        opacity: 0;
        transform: translateY(-100%);
        bottom: var(--distance);
        left: var(--distance);
        top: auto;
        right: auto;
    }
}

/* bottom-center */
@keyframes slideInBottomCenter {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-100%);
        bottom: var(--distance);
        left: 50%;
        top: auto;
        right: auto;
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
        bottom: var(--distance);
        left: 50%;
        top: auto;
        right: auto;
    }
}

@keyframes slideOutBottomCenter {
    from {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
        bottom: var(--distance);
        left: 50%;
        top: auto;
        right: auto;
    }

    to {
        opacity: 0;
        transform: translateX(-50%) translateY(-100%);
        bottom: var(--distance);
        left: 50%;
        top: auto;
        right: auto;
    }
}

/* bottom-right */
@keyframes slideInBottomRight {
    from {
        opacity: 0;
        transform: translateY(-100%);
        bottom: var(--distance);
        right: var(--distance);
        left: auto;
        top: auto;
    }

    to {
        opacity: 1;
        transform: translateY(0);
        bottom: var(--distance);
        right: var(--distance);
        left: auto;
        top: auto;
    }
}

@keyframes slideOutBottomRight {
    from {
        opacity: 1;
        transform: translateY(0);
        bottom: var(--distance);
        right: var(--distance);
        left: auto;
        top: auto;
    }

    to {
        opacity: 0;
        transform: translateY(-100%);
        bottom: var(--distance);
        right: var(--distance);
        left: auto;
        top: auto;
    }
}