/* Accessibility Panel Styles */
.accessibility_panel {
    position: fixed;
    bottom: 10px;
    left: 50%;
    background: rgba(0, 0, 0, 0.8);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(0, 0, 0, 0.8);
    width: auto;
    height: auto;
    visibility: hidden;
    transform: translateX(-50%) translateY(120%);
    padding: 15px 30px;
    border-radius: 12px;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 99;
}

.accessibility_panel.open {
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Updated grid to 4 columns to fit 8 buttons neatly (2 rows of 4) */
.accessibility_panel .accessibility_panel_grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 15px;
}

.accessibility_panel .accessibility_panel_box,
.accessibility_panel .accessibility_panel_close {
    background-color: white;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    transition: 200ms;
    cursor: pointer;
}

.accessibility_panel [tooltip] {
    position: relative;
}

.accessibility_panel [tooltip]::after {
    content: attr(tooltip);
    position: absolute;
    bottom: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    background-color: #0D6EFD;
    color: white;
    padding: 5px 15px;
    border-radius: 5px;
    font-size: 14px;
    transition: 300ms;
    visibility: hidden;
    opacity: 0;
    transform: translate(-50%, -20px);
}

.accessibility_panel .accessibility_panel_close {
    background-color: rgb(100, 100, 100);
}

.accessibility_panel .accessibility_panel_close:hover {
    background-color: rgb(120, 120, 120);
}

.accessibility_panel .accessibility_panel_box:hover,
.accessibility_panel .accessibility_panel_box.activated {
    background-color: rgb(230, 230, 230);
    transform: scale(0.95);
}

.accessibility_panel .accessibility_panel_box:hover [tooltip]::after {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, 0);
}

.accessibility_panel .accessibility_panel_box.activated svg path {
    stroke: rgb(0, 98, 255);
}

/* Accessibility Panel Styles End */

/* Reading Mask Styles */
.reading_mask {
    display: none;
    position: relative;
    z-index: 999;
}

.reading_mask.activated {
    display: block;
}

.reading_mask>div {
    width: 100%;
    height: calc(50vh - 75px);
    background-color: rgb(0, 0, 0, 0.7);
    position: fixed;
    left: 0;
}

.reading_mask .reading_mask_top {
    top: 0;
}

.reading_mask .reading_mask_bottom {
    bottom: 0;
}

/* Reading Mask Styles End */

/* Propeties Styles */
.enalrgable.ap_zoom[data-zoom="1"] {
    zoom: 1.2;
}

.enalrgable.ap_zoom[data-zoom="2"] {
    zoom: 1.3;
}

.enalrgable.ap_zoom[data-zoom="3"] {
    zoom: 1.4;
}

.speaking-highlight {
    background-color: orange;
}

.highlight_links a {
    background-color: black;
    color: yellow !important;
    text-decoration: underline;
}

html.invert_colors,
html.invert_colors img:not(.accesibility-cont img, .down-center-cont img, .my-report-cont img, .nav_search img, .page_actions img),
html.invert_colors canvas,
html.invert_colors video,
html.invert_colors .videoContainer,
html.invert_colors .accessibility_panel {
    filter: invert(1);
    -webkit-filter: invert(1);
}

/* Grayscale Mode */
html.grayscale_mode {
    filter: grayscale(100%) !important;
    -webkit-filter: grayscale(100%) !important;
}

/* Dark Mode */
html.dark_mode,
html.dark_mode body {
    background-color: #121212 !important;
    color: #ffffff !important;
}

/* text readable in dark mode */
html.dark_mode h1,
html.dark_mode h2,
html.dark_mode h3,
html.dark_mode h4,
html.dark_mode h5,
html.dark_mode h6,
html.dark_mode p,
html.dark_mode span,
html.dark_mode a {
    color: #e0e0e0 !important;
}

/* Dark mode overrides common components */
html.dark_mode .header_nav_container,
html.dark_mode header html.dark_mode {
    background-color: #1a1a1a !important;
}

html.dark_mode div.nav-wrapper.active {
    background-color: #000000 !important;
}

html.dark_mode div .nav-grid .nav-grid-lined {
    background-color: #000000;
}

html.dark_mode .csr_main_container,
html.dark_mode .triology_main_container,
html.dark_mode .quick_look_main_container {
    background-color: #1e1e1e !important;
    border-color: #333 !important;
}

/* Text to Speech Active State */
body.tts_active * {
    cursor: help !important;
}

/* Highlight the element currently being spoken */
.tts_speaking {
    outline: 2px solid #ED1D24 !important;
    background-color: rgba(237, 29, 36, 0.1) !important;
    border-radius: 4px;
}

/* Update grid to 5 columns to fit the new button */
.accessibility_panel .accessibility_panel_grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    /* Changed from 4 to 5 */
    grid-gap: 15px;
}

/* Power Saving Mode */
html.power_saving_mode {
    filter: grayscale(100%) !important;
    -webkit-filter: grayscale(100%) !important;
}


html.power_saving_mode [data-aos],
html.power_saving_mode .aos-animate,
html.power_saving_mode [style*="opacity: 0"],
html.power_saving_mode [style*="visibility: hidden"] {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    animation: none !important;
    transition: none !important;
}

/* Stop All CSS Animations */
html.power_saving_mode * {
    animation-play-state: paused !important;
    transition: none !important;
    scroll-behavior: auto !important;
}

/* Audio Only Mode for Videos */
html.power_saving_mode video {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Placeholder for videos */
html.power_saving_mode .video-container::before,
html.power_saving_mode .lightbox_video_container::before {
    content: "Audio Only Mode Active";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: black;
    background: white;
    padding: 10px;
    z-index: 10;
    border: 1px solid black;
    font-weight: bold;
    display: block !important;
}

/* Hide background hero videos completely */
html.power_saving_mode .home_header video {
    display: none !important;
}