/* Common styles for ALL blackout modes */
body.blackout-active .persistent-clock,
body.blackout-active .drawer-handle,
body.blackout-active #one-button-nav-handle,
body.blackout-active .nav-btn-small,
body.blackout-active #dock,
body.blackout-active .page-indicator,
body.blackout-active #customizeModal.modal.show {
    display: none !important;
}

/* Style 2: Show Wallpaper, Hide Content */
body.blackout-active.blackout-style-dim-hide .container,
body.blackout-active.blackout-style-dim-hide .widget-grid,
body.blackout-active.blackout-style-dim-hide #dynamic-area,
body.blackout-active.blackout-style-dim-hide #environment-layer,
body.blackout-active.blackout-style-dim-hide #time-of-day-overlay {
    display: none !important;
}

body.blackout-active.blackout-style-dim-hide::before,
body.blackout-active.blackout-style-dim-hide #background-video {
    opacity: 1 !important;
}

/* Style 3: Hide Wallpaper, Show Content */
body.blackout-active.blackout-style-hide-show {
    background-color: #000 !important;
}

body.blackout-active.blackout-style-hide-show::before,
body.blackout-active.blackout-style-hide-show #background-video,
body.blackout-active.blackout-style-hide-show #environment-layer,
body.blackout-active.blackout-style-hide-show #time-of-day-overlay {
    display: none !important;
}

/* Style 4: Turn Off Screen */
body.blackout-active.blackout-style-off {
    background-color: #000 !important;
}

body.blackout-active.blackout-style-off #dynamic-area,
body.blackout-active.blackout-style-off::before,
body.blackout-active.blackout-style-off #background-video,
body.blackout-active.blackout-style-off .container,
body.blackout-active.blackout-style-off .widget-grid,
body.blackout-active.blackout-style-off #depth-layer,
body.blackout-active.blackout-style-off #environment-layer,
body.blackout-active.blackout-style-off #time-of-day-overlay {
    display: none !important;
}