/* ---------------------------------- */
/* 1. Popup Overlay (Background)
/* ---------------------------------- */
#sv-popup-overlay {
    /* Hidden by default */
    visibility: hidden;
    opacity: 0;
    
    /* Fullscreen overlay */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99998; /* Just below the popup container */
    
    /* Dark background */
    background-color: rgba(0, 0, 0, 0.75);
    
    /* Centering */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Smooth fade-in/out */
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* ---------------------------------- */
/* 2. Popup Container (White Box)
/* ---------------------------------- */
#sv-popup-container {
    position: relative;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    
    /* Sizing */
    width: 90%;
    max-width: 600px; /* Adjust as needed */
    max-height: 80vh; /* 80% of the viewport height */
    
    /* Allows content to scroll if it's too tall */
    display: flex;
    flex-direction: column;
    
    /* Animation: scale up */
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

/* ---------------------------------- */
/* 3. Popup Content (Inner Area)
/* ---------------------------------- */
#sv-popup-content {
    padding: 2rem; /* 32px */
    overflow-y: auto; /* Make content scrollable */
    -webkit-overflow-scrolling: touch; /* Smooth scroll on mobile */
}

/* Optional: Style for content coming from WYSIWYG */
#sv-popup-content p {
    line-height: 1.6;
    margin-bottom: 1rem;
}

#sv-popup-content h1,
#sv-popup-content h2,
#sv-popup-content h3 {
    margin-bottom: 1rem;
    line-height: 1.3;
}

/* ---------------------------------- */
/* 4. Close Button (The '×')
/* ---------------------------------- */
#sv-popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    
    /* Styling */
    background-color: transparent;
    border: none;
    color: #888888;
    font-size: 2.5rem; /* 40px */
    line-height: 1;
    font-weight: 300;
    
    /* Appearance */
    padding: 0 5px;
    cursor: pointer;
    z-index: 99999;
    
    transition: color 0.2s ease;
}

#sv-popup-close:hover,
#sv-popup-close:focus {
    color: #000000;
    outline: none;
}

/* ---------------------------------- */
/* 5. Active States (When popup is open)
/* ---------------------------------- */
#sv-popup-overlay:not(.sv-popup-hidden) {
    visibility: visible;
    opacity: 1;
}

#sv-popup-overlay:not(.sv-popup-hidden) #sv-popup-container {
    transform: scale(1); /* Animate to full size */
}

/* Optional: Prevent body from scrolling when popup is open */
body.sv-popup-active {
    overflow: hidden;
}