/* Wizard Popup styles extracted from c0-wizard-component.css */

/* Style for the pop-up overlay */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;

    /* Hidden by default using opacity/visibility pattern */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    /* Smooth transitions */
    transition: opacity .3s ease-out, visibility 0s linear .3s;
}

/* Active state - shown popup */
.popup-overlay.showing {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .3s ease-out, visibility 0s linear 0s;
}

/* Style for the pop-up box */
.popup-box {
    --button-width: auto;
    background-color: #fff;
    padding: 16px 24px;
    border-radius: 9px;
    width: 478px;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 8px 0px rgba(96, 96, 96, 0.20);
    pointer-events: visible;

    /* Add transform animation for smooth entrance */
    transform: scale(0.95) translateY(-20px);
    transition: transform .3s ease-out;
}

/* Animate popup box when overlay is showing */
.popup-overlay.showing .popup-box {
    transform: scale(1) translateY(0);
}

.popup-box h2 {
    margin: 0 0 var(--spacing-sm);
    font-size: 16px;
    position: relative;
    display: block;
    padding-right: 20px;
}

.popup-box p {
    margin: 0 0 var(--spacing-md);
}