/* ── Body lock ──────────────────────────────────────────────────────────────── */
body.atera-popup-open {
    overflow: hidden;
    /* iOS Safari: prevent background scroll */
    -webkit-overflow-scrolling: auto;
    touch-action: none;
}

/* ── Overlay ─────────────────────────────────────────────────────────────────── */
.atera-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    padding: 20px;
    box-sizing: border-box;
}

.atera-popup-overlay.is-open {
    opacity: 1;
}

/* Position variants */
.atera-popup-overlay--top          { align-items: flex-start; }
.atera-popup-overlay--bottom       { align-items: flex-end; }
.atera-popup-overlay--top-right    { align-items: flex-start; justify-content: flex-end; }
.atera-popup-overlay--top-left     { align-items: flex-start; justify-content: flex-start; }
.atera-popup-overlay--bottom-right { align-items: flex-end;   justify-content: flex-end; }
.atera-popup-overlay--bottom-left  { align-items: flex-end;   justify-content: flex-start; }
.atera-popup-overlay--center       { align-items: center;     justify-content: center; }

/* ── Container ───────────────────────────────────────────────────────────────── */
.atera-popup-container {
    position: relative;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    box-sizing: border-box;
}

/* Width variants */
.atera-popup--small  { max-width: 400px; }
.atera-popup--medium { max-width: 600px; }
.atera-popup--large  { max-width: 800px; }
.atera-popup--full   { max-width: calc(100vw - 40px); }

/* ── Animations ──────────────────────────────────────────────────────────────── */

/* Fade */
.atera-popup--fade {
    opacity: 0;
    transition: opacity 0.3s ease;
}
.atera-popup-overlay.is-open .atera-popup--fade {
    opacity: 1;
}

/* Slide Up */
.atera-popup--slide-up {
    transform: translateY(40px);
    transition: transform 0.35s cubic-bezier(0.34, 1.26, 0.64, 1), opacity 0.3s ease;
    opacity: 0;
}
.atera-popup-overlay.is-open .atera-popup--slide-up {
    transform: translateY(0);
    opacity: 1;
}

/* Slide Down */
.atera-popup--slide-down {
    transform: translateY(-40px);
    transition: transform 0.35s cubic-bezier(0.34, 1.26, 0.64, 1), opacity 0.3s ease;
    opacity: 0;
}
.atera-popup-overlay.is-open .atera-popup--slide-down {
    transform: translateY(0);
    opacity: 1;
}

/* Zoom */
.atera-popup--zoom {
    transform: scale(0.88);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.34, 1.26, 0.64, 1), opacity 0.25s ease;
}
.atera-popup-overlay.is-open .atera-popup--zoom {
    transform: scale(1);
    opacity: 1;
}

/* ── Close button ────────────────────────────────────────────────────────────── */
.atera-popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    color: #555;
    transition: background 0.15s, color 0.15s;
    padding: 0;
}

.atera-popup-close:hover {
    background: #f0f0f0;
    color: #111;
}

/* ── Content area ────────────────────────────────────────────────────────────── */
.atera-popup-content {
    padding: 40px;
}

@media ( max-width: 640px ) {
    .atera-popup-content {
        padding: 24px 20px;
    }

    .atera-popup-container {
        border-radius: 6px;
    }

    /* All position variants collapse to center on small screens */
    .atera-popup-overlay--top,
    .atera-popup-overlay--top-right,
    .atera-popup-overlay--top-left,
    .atera-popup-overlay--bottom,
    .atera-popup-overlay--bottom-right,
    .atera-popup-overlay--bottom-left {
        align-items: center;
        justify-content: center;
    }
}

/* ── Scrollbar styling ───────────────────────────────────────────────────────── */
.atera-popup-container::-webkit-scrollbar {
    width: 6px;
}
.atera-popup-container::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}