/* Keyframes for smooth pop-up animations */
@keyframes fadeIn {
    0% { 
        opacity: 0; 
        transform: translate(-50%, -60%); /* Start slightly higher */
        visibility: visible;
    }
    100% { 
        opacity: 1; 
        transform: translate(-50%, -50%); /* Move into correct position */
    }
}

@keyframes fadeOut {
    0% { 
        opacity: 1; 
        transform: translate(-50%, -50%);
    }
    100% { 
        opacity: 0; 
        transform: translate(-50%, -60%);
        visibility: hidden;
    }
}

/* Ensure exit-intent pop-ups are hidden initially (but still able to animate) */
.global-popup-bar.exit-intent {
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -60%); /* Start higher */
}

/* When triggered, smoothly show the exit-intent pop-up */
.global-popup-bar.exit-intent.visible {
    opacity: 1;
    visibility: visible;
    animation: fadeIn 0.4s ease-out forwards;
}

/* Smooth hiding animation */
.global-popup-bar.hidden {
    animation: fadeOut 0.4s ease-in-out forwards;
}

/* Overlay (background dimming effect) */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden;
    z-index: 9998;
    transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
}

/* Show the overlay smoothly when the pop-up appears */
.popup-overlay.visible {
    opacity: 1;
    visibility: visible;
}

/* Default Style */
    /* Pop-up container */
    .global-popup-bar {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90%;
        max-width: 500px;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.3);
        z-index: 9999;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    }

    /* Show pop-up */
    .global-popup-bar.visible {
        opacity: 1;
        visibility: visible;
        animation: fadeIn 0.3s ease-in-out forwards;
    }

    /* Hide pop-up */
    .global-popup-bar.hidden {
        animation: fadeOut 0.3s ease-in-out forwards;
    }

    /* Pop-up content */
    .global-popup-bar .popup {
        text-align: center;
        padding: 50px;
    }

    .global-popup-bar .popup p {
        color: #333;
        font-size: 16px;
        margin-bottom: 15px;
    }

    /* CTA Button */
    .global-popup-bar .popup .link--readmore_btn {
        background-color: #221f54;
        color: #fff;
        border: none;
        padding: 10px 20px;
        font-size: 14px;
        border-radius: 5px;
        text-decoration: none;
        display: inline-block;
        transition: background-color 0.3s ease-in-out;
    }

    .global-popup-bar .popup .link--readmore_btn:hover {
        background-color: #3a2f7d;
    }

    /* Close button */
    .global-popup-bar .close-button {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 24px;
        height: 24px;
        cursor: pointer;
        background: url('/wp-content/themes/Quorum-Theme/dist/images/announcementbar_close.png');
        background-size: contain;
        background-repeat: no-repeat;
    }

/* Clean */
    /* Overlay */
    .popup-overlay.clean {
        background: rgba(0, 0, 0, 0.45);
    }
    /* Show pop-up */
    .global-popup-bar.clean.visible {
        opacity: 1;
        visibility: visible;
        animation: fadeIn 0.3s ease-in-out forwards;
    }

    /* Hide pop-up */
    .global-popup-bar.clean.hidden {
        animation: fadeOut 0.3s ease-in-out forwards;
    }
    /* Pop-up container */
    .global-popup-bar.clean {
        width: 80%;
        max-width: 800px;
        background-image: url('img/path_clean.png');
        background-size: 100%;
        background-position: center 550%;
        background-repeat: no-repeat;
        background-color: #221f54;
        border-radius: 8px;
        box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.3);
    }
    @media screen and (min-width: 768px) and (max-width: 879px) {
        .global-popup-bar.clean {
            background-position: center 150%;
        }        
    }
    @media screen and (min-width: 880px) and (max-width: 929px) {
        .global-popup-bar.clean {
            background-position: center 250%;
        }        
    }
    @media screen and (min-width: 930px) and (max-width: 991px) {
        .global-popup-bar.clean {
            background-position: center 350%;
        }        
    }
    /* Pop-up content */
    .global-popup-bar.clean .popup-content {
        text-align: center;
        padding-bottom: 30px;
    }

    .global-popup-bar.clean .popup-content h1,
    .global-popup-bar.clean .popup-content h2,
    .global-popup-bar.clean .popup-content h3,
    .global-popup-bar.clean .popup-content h4,
    .global-popup-bar.clean .popup-content h5,
    .global-popup-bar.clean .popup-content h6 {
        color: var(--bg-white);
    }
    .global-popup-bar.clean .popup-content p {
        font-size: 1rem;
        color: var(--bg-white);
        margin-bottom: .5rem;
    }

    /* CTA Button */
    .global-popup-bar.clean .popup .link--readmore_btn {
        background-color: var(--quorum-color-ultraviolet);
        color: var(--bg-white);
        border: none;
        padding: 10px 20px;
        font-size: 1rem;
        border-radius: 8px;
        text-decoration: none;
        display: inline-block;
        transition: background-color 0.3s ease-in-out;
    }

    .global-popup-bar.clean .popup .link--readmore_btn:hover {
        background-color: #8e7af0;
    }

    /* Close button */
    .global-popup-bar.clean .close-button {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 24px;
        height: 24px;
        cursor: pointer;
        background: url('/wp-content/themes/Quorum-Theme/dist/images/announcementbar_close.png');
        background-size: contain;
        background-repeat: no-repeat;
    }



/* Highlight */
    /* Overlay */
    .popup-overlay.highlight {
        background: rgba(0, 0, 0, 0.4);
    }
    /* Show pop-up */
    .global-popup-bar.highlight.visible {
        opacity: 1;
        visibility: visible;
        animation: fadeIn 0.3s ease-in-out forwards;
    }

    /* Hide pop-up */
    .global-popup-bar.highlight.hidden {
        animation: fadeOut 0.3s ease-in-out forwards;
    }
    /* Pop-up container */
    .global-popup-bar.highlight::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* background: rgba(0, 0, 0, 0.55); */ 
        z-index: 0; 
        border-radius: 8px; 
    }
    .global-popup-bar.highlight .popup {
        background: rgba(34,31,84,.9);
        padding: 25px;
        margin: 25px;
    }
    .global-popup-bar.highlight .popup-content,
    .global-popup-bar.highlight .popup .link--readmore_btn,
    .global-popup-bar.highlight .close-button {
        position: relative;
        z-index: 1;
    }
    .global-popup-bar.highlight {
        width: 90%;
        max-width: 800px;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        background-color: #221f54;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.3);
    }
    /* Pop-up content */
    .global-popup-bar.highlight .popup-content {
        text-align: left;
        padding: 20px;
    }

    .global-popup-bar.highlight .popup-content h1,
    .global-popup-bar.highlight .popup-content h2,
    .global-popup-bar.highlight .popup-content h3,
    .global-popup-bar.highlight .popup-content h4,
    .global-popup-bar.highlight .popup-content h5,
    .global-popup-bar.highlight .popup-content h6 {
        color: var(--bg-white);
    }
    .global-popup-bar.highlight .popup-content p {
        font-size: 1rem;
        color: var(--bg-white);
        margin-bottom: .5rem;
    }

    /* CTA Button */
    .global-popup-bar.highlight .popup .link--readmore_btn {
        background-color: var(--quorum-color-ultraviolet);
        color: var(--bg-white);
        border: none;
        padding: 10px 20px;
        font-size: 1rem;
        border-radius: 8px;
        text-decoration: none;
        display: inline-block;
        transition: background-color 0.3s ease-in-out;
    }

    .global-popup-bar.highlight .popup .link--readmore_btn:hover {
        background-color: #8e7af0;
    }

    /* Close button */
    .global-popup-bar.highlight .close-button {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 24px;
        height: 24px;
        cursor: pointer;
        background: url('/wp-content/themes/Quorum-Theme/dist/images/announcementbar_close.png');
        background-size: contain;
        background-repeat: no-repeat;
    }



/* Side by Side */
    /* Overlay */
    .popup-overlay.side-by-side {
        background: rgba(0, 0, 0, 0.4);
    }
    /* Show pop-up */
    .global-popup-bar.sidebyside.visible {
        opacity: 1;
        visibility: visible;
        animation: fadeIn 0.3s ease-in-out forwards;
    }

    /* Hide pop-up */
    .global-popup-bar.sidebyside.hidden {
        animation: fadeOut 0.3s ease-in-out forwards;
    }
    /* Pop-up container */
    .global-popup-bar.side-by-side {
        width: 90%;
        max-width: 1000px;
        background-color: #221f54;
        padding: 0px;
        border-radius: 8px;
        box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.3);
    }
    /* Pop-up content */
    .global-popup-bar.side-by-side .popup {
        padding: 0px;
    }
    .global-popup-bar.side-by-side .popup-container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .global-popup-bar.side-by-side .popup-image {
        width: 40%;
        background-size: cover;
        padding: 30px;
        flex: 1 1 40%;
        background-position: center;
        height: 500px;
        max-width: 400px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
    }
    .global-popup-bar.side-by-side .popup-content {
        text-align: left;
        padding: 20px;
        max-width: 600px;
        width: 60%;
        display: inline-flex;
        justify-content: center;
        flex-direction: column;
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: center 120%;
        background-image: linear-gradient(to top, rgba(114,89,239,.4) 0%, transparent 50%), url(img/path_clean.png);
    }
    @media screen and (min-width: 1042px) {
        .global-popup-bar.side-by-side .popup-content {
            background-position: center 130%;
        }        
    }
    @media screen and (max-width: 767px) {
       .global-popup-bar.side-by-side {
            width: 80%;
            max-width: 700px;
        }
        .global-popup-bar.side-by-side .popup-container {
            display: flex;
            flex-wrap: wrap;
        }
        .global-popup-bar.side-by-side .popup-image {
            width: 100%;
            background-size: cover;
            padding: 0px;
            flex: 1 1 100%;
            background-position: center;
            height: 300px;
            max-width: 100%;
        }
        .global-popup-bar.side-by-side .popup-content {
            text-align: left;
            padding: 40px;
            max-width: 600px;
            width: 100%;
            display: block;
        }        
    }
    .global-popup-bar.side-by-side .popup-content h1,
    .global-popup-bar.side-by-side .popup-content h2,
    .global-popup-bar.side-by-side .popup-content h3,
    .global-popup-bar.side-by-side .popup-content h4,
    .global-popup-bar.side-by-side .popup-content h5,
    .global-popup-bar.side-by-side .popup-content h6 {
        color: var(--bg-white);
    }
    .global-popup-bar.side-by-side .popup-content p {
        font-size: 1rem;
        color: var(--bg-white);
        margin-bottom: .5rem;
        line-height: 1.65;
    }

    /* CTA Button */
    .global-popup-bar.side-by-side .popup .link--readmore_btn {
        background-color: var(--quorum-color-ultraviolet);
        color: var(--bg-white);
        border: none;
        padding: 10px 20px;
        margin-top: 1rem;
        font-size: 1rem;
        border-radius: 8px;
        text-decoration: none;
        display: inline-block;
        transition: background-color 0.3s ease-in-out;
        max-width: fit-content;
        text-align: center;
    }

    .global-popup-bar.side-by-side .popup .link--readmore_btn:hover {
        background-color: #8e7af0;
    }

    /* Close button */
    .global-popup-bar.side-by-side .close-button {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 24px;
        height: 24px;
        cursor: pointer;
        background: url('/wp-content/themes/Quorum-Theme/dist/images/announcementbar_close.png');
        background-size: contain;
        background-repeat: no-repeat;
    }