/* Guest Welcome Modal and Test Site Banner Styles */

/* Welcome Splash Modal */
#guest-welcome-modal {
    z-index: 9999;
}

#guest-welcome-modal-background {
    background: rgba(19, 27, 46, 0.85);
    backdrop-filter: blur(8px);
}

#guest-welcome-modal-content {
    max-width: 32rem;
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-1rem) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Test Site Banner */
#test-site-banner {
    z-index: 9998;
    cursor: move;
    user-select: none;
    touch-action: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

#test-site-banner:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

#test-site-banner.dragging {
    cursor: grabbing;
    transform: scale(1.02);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    z-index: 10000;
}

/* Dark mode adjustments */
.dark #guest-welcome-modal-background {
    background: rgba(0, 0, 0, 0.75);
}

.dark #test-site-banner {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.dark #test-site-banner:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

.dark #test-site-banner.dragging {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

/* Responsive adjustments */
@media (max-width: 640px) {
    #guest-welcome-modal-content {
        margin: 0.75rem;
        max-width: calc(100vw - 1.5rem);
    }

    #guest-welcome-modal-content .px-8 {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    #guest-welcome-modal {
        max-width: 100vw;
        overflow: hidden;
    }

    #test-site-banner {
        font-size: 0.625rem;
        padding: 0.25rem 0.5rem;
        max-width: calc(100vw - 1rem);
    }
}