/* Popup Styles */
.popup-container {
    position: fixed; /* Sticks to the viewport */
    width: 320px;    /* Adjust width as needed */
    /* height: 450px; */
    background-color: #ffffff;
    border: 1px solid #e81938;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7);
    padding: 10px;
    z-index: 1000;
    display: block;
    border-radius: 0px;
    box-sizing: border-box; /* Includes padding and border in the element's total width and height */

    /* Vertical Centering: Positions the top edge at 50% of viewport height, then pulls it up by half its own height. */
    top: 55%;
    transform: translateY(-50%); 

    /* Horizontal Slide-in (Initial State - Off-screen to the right) */
    right: -350px;   /* Start off-screen (e.g., - (width + padding + small_buffer)). Adjust if popup width changes. */
    opacity: 0;
    transition: right 0.7s ease-in-out, opacity 0.7s ease-in-out;
}
/* --- NEW: Class to trigger visibility and slide-in animation --- */
.popup-container.popup-visible {
    right: -1px;     /* Slide to final on-screen horizontal position */
    opacity: 1;
    visibility: visible; /* Make it visible and interactive */
    /* The `top: 50%;` and `transform: translateY(-50%);` from the base class keep it centered vertically. */
}

.popup-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 15px auto; /* Centered with margin below */
    border-radius: 0px;
    border: 1px solid #cccccc;
}

.popup-text {
    font-size: 14px;
    color: #1a1a1a;
    margin-bottom: 20px;
    text-align: center; /* Or left, if you prefer */
    line-height: 1.5;
}

.popup-action-btn {
    display: block;
    width: 100%;
    text-align: center;
    text-decoration: none;
    border-radius: 0px;
    cursor: pointer;
    color: #ffffff;
    background-color: #e81938;
    padding: 7px 11px 3px;
    border: 1px solid #ffffff;
    box-shadow: 0px 12px 18px -6px rgba(0, 0, 0, 0.3);
    font-family: 'Teko', Helvetica, Arial, Lucida, sans-serif;
    text-transform: uppercase;
    font-size: 24px;
    letter-spacing: 1px;
    text-shadow: 0em 0.1em 0.1em rgba(0, 0, 0, 0.4);
    transition: all .9s ease-out;
}

.popup-action-btn:hover {
    background-color: #00ff00;
    transition: all .2s ease-out;
}

.popup-close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: white;
    border: none;
    border-left: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
    border-radius: 0 0 0 5px;
    font-size: 28px;
    color: #000000;
    cursor: pointer;
    padding: 0;
    padding-left: 5px;
    line-height: 1;
}

.popup-close-btn:hover {
    color: #e81938;
}

/* Optional: Class to hide the popup if you later decide to control visibility via JS */
.popup-hidden {
    display: none;
}