.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;
}

.ps-popup-dialog .dialog-btn-close {
    outline: none !important;
    box-shadow: none !important;
}

.ps-popup-dialog .dialog-btn-close .fa.fa-times {
    color: rgb(var(--box-shadow-color)) !important;
}

.dialog-btn-close {
    position: absolute;
    right: var(--distance);
    top: var(--distance);

    width: 32px;
    height: 32px;
    padding: 0;

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

    background-color: #a1a1a1;

    border: 2px solid rgb(var(--box-shadow-color));
    border-radius: 50%;

    color: rgb(var(--box-shadow-color));

    cursor: pointer;
    z-index: 8;

    transition: background-color 0.2s ease;
}

.dialog-btn-close .fa {
    color: rgb(var(--box-shadow-color)) !important;
    font-size: 16px;
    line-height: 1;
}

.dialog-btn-close:hover {
    background-color: #e5e5e5;
}
/*
.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;
    }
}

/* ------------------------------------------------------------------
   MOBILE RESPONSIVE FIX
   Keeps the popup and close button inside the viewport on phones.
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
    .ps-popup-dialog {
        --distance: 12px;

        /* Preserve configured size, but never let the dialog exceed the screen. */
        width: var(--width, 640px);
        height: var(--height, 480px);
        max-width: calc(100vw - 24px);
        max-height: calc(100dvh - 24px);

        /* Keep the close button visible even if it reaches the dialog edge. */
        overflow: visible;
        box-sizing: border-box;
    }

    @supports not (height: 100dvh) {
        .ps-popup-dialog {
            max-height: calc(100vh - 24px);
        }
    }

    .ps-popup-dialog .dialog-body {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        overflow: auto;
        box-sizing: border-box;
        border-radius: inherit;
        -webkit-overflow-scrolling: touch;
    }

    .ps-popup-dialog .dialog-btn-close {
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        z-index: 99999;
        display: block !important;
        box-sizing: border-box;
        background-color: #a1a1a1;
        border: 2px solid rgb(var(--box-shadow-color));
        border-radius: 50%;
        color: rgb(var(--box-shadow-color)) !important;
    }

    /* Draw the close icon with CSS so it does not depend on Font Awesome. */
    .ps-popup-dialog .dialog-btn-close::before,
    .ps-popup-dialog .dialog-btn-close::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 20px;
        height: 2px;
        background: rgb(var(--box-shadow-color));
        border-radius: 2px;
        transform-origin: center;
        z-index: 100000;
        pointer-events: none;
    }

    .ps-popup-dialog .dialog-btn-close::before {
        transform: translate(-50%, -50%) rotate(45deg);
    }

    .ps-popup-dialog .dialog-btn-close::after {
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    /* Hide the Font Awesome icon on mobile: the CSS cross above replaces it. */
    .ps-popup-dialog .dialog-btn-close .fa,
    .ps-popup-dialog .dialog-btn-close .fa.fa-times {
        display: none !important;
    }
}