/* =========================================================
   Elementor Page Popup  –  popup.css
   ========================================================= */

/* ── Reset / base ─────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ── Overlay ──────────────────────────── */
.epp-overlay {
    position: fixed;
    inset: 0;                          /* top/right/bottom/left: 0 */
    z-index: 999999;
    background: rgba(10, 10, 20, 0.72);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;

    /* entry animation */
    opacity: 0;
    transition: opacity 0.35s ease;
}

.epp-overlay.epp-visible {
    opacity: 1;
}

/* ── Modal box ────────────────────────── */
.epp-modal {
    position: relative;
    background: #000;
    border-radius: 12px;
    width: 100%;
    max-width: 680px;
    max-height: 100vh;
    overflow-y: auto;
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.28),
        0 6px 16px rgba(0, 0, 0, 0.14);

    /* slide-up entry */
    transform: translateY(28px) scale(0.97);
    transition:
        transform 0.38s cubic-bezier(0.34, 1.46, 0.64, 1),
        opacity   0.35s ease;
    opacity: 0;
}

.epp-overlay.epp-visible .epp-modal {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* ── Close button ─────────────────────── */
.epp-close {
    position: absolute;
    top: 3px;
    right: 0px;
    z-index: 10;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background-color: #c59c82;
    color: #fff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.epp-close:hover {
    background: rgba(0, 0, 0, 0.14);
    color: #111;
    transform: scale(1.1) rotate(90deg);
}

.epp-close:focus-visible {
    outline: 2px solid #6c63ff;
    outline-offset: 2px;
}

/* ── Inner content area ───────────────── */
.epp-content {
    padding: 0;       /* Elementor template handles its own padding */
    overflow: hidden;
    border-radius: 12px;
}

/* Allow Elementor widgets to breathe */
.epp-content .elementor-section,
.epp-content .e-con {
    margin: 0 !important;
}

/* ── Scrollbar styling (webkit) ───────── */
.epp-modal::-webkit-scrollbar {
    width: 6px;
}
.epp-modal::-webkit-scrollbar-track {
    background: transparent;
}
.epp-modal::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.18);
    border-radius: 3px;
}

/* ── Responsive ───────────────────────── */
@media (max-width: 600px) {
    .epp-overlay {
        padding: 12px;
    }

    .epp-modal {
        max-height: 92vh;
        border-radius: 10px;
    }
}

/* ── Body lock when popup is open ─────── */
body.epp-open {
    overflow: hidden;
}