/* Black and White Filter for Entire Website */
html {
    filter: grayscale(100%) !important;
    -webkit-filter: grayscale(100%) !important;
    -moz-filter: grayscale(100%) !important;
    -ms-filter: grayscale(100%) !important;
    -o-filter: grayscale(100%) !important;
    /* Use isolation to prevent filter from blocking clicks */
    isolation: isolate;
}

/* Ensure images and videos are also converted to grayscale */
img, 
video, 
iframe,
embed,
object,
canvas,
svg {
    filter: grayscale(100%) !important;
    -webkit-filter: grayscale(100%) !important;
    -moz-filter: grayscale(100%) !important;
    -ms-filter: grayscale(100%) !important;
    -o-filter: grayscale(100%) !important;
    pointer-events: auto !important;
}

/* Make interactive elements NOT inherit filter from parent */
a, button, .btn, input, select, textarea, [role="button"], [onclick], .menu_list a, .nav a, .navbar a {
    filter: none !important;
    -webkit-filter: none !important;
    -moz-filter: none !important;
    -ms-filter: none !important;
    -o-filter: none !important;
    isolation: isolate !important;
    position: relative !important;
    z-index: 9999 !important;
    pointer-events: auto !important;
}

/* Style scrollbar to match black and white theme */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Firefox scrollbar */
html {
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
    overflow-x: hidden !important;
}

/* Hide horizontal scrollbar and prevent horizontal scrolling */
body {
    overflow-x: hidden !important;
}