/**
 * Dynamic Styles Handler
 * Replace inline JavaScript style modifications with CSS classes
 * CSP Compliant: No inline styles
 */

/* Screen Lock State - Used by lockScreen()/unlockScreen() functions */
body.screen-locked {
    height: 100vh !important;
    overflow-y: hidden !important;
}

body.screen-unlocked {
    height: auto;
    overflow-y: auto;
}

/* Royal Preloader Hidden State */
.royal_preloader_hidden {
    display: none !important;
    visibility: hidden !important;
}

/* Tab Content Display Control */
.tab-content-hidden {
    display: none !important;
}

.tab-content-visible {
    display: block !important;
}

/* Tab Links Styling */
.tab-links-border {
    border-bottom: 4px solid #0093e4 !important;
    color: #0093e4 !important;
}

.tab-links-default {
    border: 0 !important;
    color: #2b2b2b !important;
}

/* Word Tab Content */
.word-tab-hidden {
    display: none !important;
}

.word-tab-visible {
    display: flex !important;
}

/* Map Tab Content */
.map-tab-hidden {
    display: none !important;
}

.map-tab-visible {
    display: block !important;
}

/* Martech Slider Items */
.martech-slider-item-opaque {
    opacity: 0 !important;
}

.martech-slider-item-visible {
    opacity: 1 !important;
}

/* Window Display Control */
.window-hidden {
    display: none !important;
}

.window-visible {
    display: block !important;
}

/* Overlay States */
.overlay-hidden {
    display: none !important;
}

.overlay-visible {
    display: block !important;
}

/* Go-To-Top Button States */
.gotop-hidden {
    bottom: -60px !important;
}

.gotop-visible {
    bottom: 12px !important;
}

/* Bird Icon States */
.bird-icon-hidden {
    bottom: 12px !important;
}

.bird-icon-visible {
    bottom: 72px !important;
}

/* Chat Button and Window States */
.chat-btn-hidden {
    bottom: 8px !important;
}

.chat-btn-visible {
    bottom: 72px !important;
}

.chat-win-hidden {
    bottom: 56px !important;
}

.chat-win-visible {
    bottom: 126px !important;
}

/* Hover State for Touch Devices */
.hover {
    /* Defined in individual component styles */
}

/* Mobile Menu Toggle */
#toggle.active ~ #overlay {
    /* Overlay state handled by JS class toggle */
}

/* Fade In/Out States */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.fade-in {
    animation: fadeIn 0.5s ease-in;
}

.fade-out {
    animation: fadeOut 0.5s ease-out;
}