/* Consolidated CSS from home.css, style.css, index.php, and index.css */
* {
    box-sizing: border-box;
}

:root {
    --bg-color: #fff;
    --text-color: #000;
    --chip-bg: #f1f1f1;
    --chip-text: #333;
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    background-color: var(--bg-color);
    color: var(--text-color);
    overflow-x: hidden;
    transition: background-color 0.4s ease, color 0.4s ease;
}

body.dark-mode {
    --bg-color: #121212;
    --text-color: #fff;
    --chip-bg: #2c2c2c;
    --chip-text: #ccc;
    background-color: #121212;
}

/* Force light mode styles to override any OS defaults */
header {
    background-color: white !important;
    border-bottom: 1px solid #ddd !important;
}

.dark-mode header {
    background-color: #1e1e1e !important;
    border-bottom: 1px solid #444 !important;
}

.logo-link {
    text-decoration: none !important;
    color: inherit !important;
    display: block;
    padding: 1rem;
}

.logo {
    font-size: 20px;
    font-weight: bold;
    color: red;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.logo-text {
    font-weight: bold;
    font-size: 1.5rem;
    color: #ff0000;
}

.logo-img {
    max-height: 48px;
    width: auto;
}

.search-icon {
    font-size: 20px;
    cursor: pointer;
}

.search-box {
    width: 100%;
    padding: 10px;
    display: none;
    border: none;
    font-size: 16px;
    border-top: 1px solid #ddd;
}

.filter-bar {
    display: flex;
    overflow-x: auto;
    padding: 10px;
    gap: 10px;
    border-bottom: 1px solid #ddd;
    align-items: center;
}

.filter-bar button {
    padding: 8px 12px;
    border: none;
    white-space: nowrap;
    cursor: pointer;
}

.menu-icon,
.dark-toggle {
    font-size: 24px;
    cursor: pointer;
}

/* Base style for all devices (small devices) */
.toggle-icon {
    font-size: 24px;
    cursor: pointer;
}


/* Light mode (default) */
.toggle-icon {
    color: #333;
    /* Dark color for light mode */
}

@media (prefers-color-scheme: dark) {

    /* This targets the hamburger icon specifically in dark mode */
    .toggle-icon {
        color: #fff;
        /* White color */
    }

    /*
  If your toggle icon is an SVG or an element with a background image,
  you might need to adjust the fill or background-color like this:
  .toggle-icon svg {
    fill: #fff;
  }
  */
}

/* Override for user-toggled dark mode */
body.dark-mode .toggle-icon {
    color: #fff;
    /* White when the body has the dark-mode class */
}
/* Media query for desktop/laptops */
@media (min-width: 992px) {
    .toggle-icon {
        font-size: 24px;
        cursor: pointer;
    }

}

.menu-icon {
    margin-right: 10px;
}

.dark-toggle {
    margin-left: 10px;
}

.side-menu {
    position: fixed;
    top: 0;
    left: -100%;
    height: 100%;
    width: 90vw;
    max-width: 300px;
    background-color: #fff !important;
    z-index: 1050;
    transition: left 0.3s ease-in-out;
    overflow-y: auto;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
}

.dark-mode #sideMenu {
    background: #555 !important;
}

.dark-mode #filterForm {
    color: white;
}

body.dark-mode .toggle-icon i.bi-list {
    color: #fff;
}

body:not(.dark-mode) .toggle-icon i.bi-list {
    color: #000;
    /* or whatever your default light color is */
}

.side-menu.open {
    left: 0 !important;
}

.side-menu .close-btn {
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 14px;
    cursor: pointer;
}

.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1040;
}

.overlay.show,
.overlay.active {
    display: block;
}

.backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(5px);
    z-index: 1000;
    display: none;
}

.backdrop.show {
    display: block;
}

table#videos {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

table#videos th,
table#videos td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
    vertical-align: middle;
}

table#videos th {
    background-color: #f2f2f2;
    font-weight: bold;
}

table#videos tr:nth-child(even) {
    background-color: #f9f9f9;
}

table#videos tr:hover {
    background-color: #eaeaea;
}

.video-player-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    background-color: #000;
}

.video-player-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-list {
    padding: 0px;
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
    max-height: 80vh;
    overflow-y: auto;
    flex-direction: column;
    gap: 15px;
}

.video-card {
    display: flex;
    background: white;
    padding: 10px 0px 0px 0px;
    margin-bottom: 15px;
    border-radius: 8px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border: none;
    gap: 10px;
}

.dark-mode .video-card {
    background-color: #1e1e1e;
    color: #fff;
}

.video-card-hover:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
    transition: all 0.2s ease-in-out;
}

.video-card .thumbnail {
    width: 100%;
    height: 220px;
    background-color: #ccc;
    flex-shrink: 0;
    flex: 0 0 120px;
    position: relative;
    cursor: pointer;
}

.dark-mode .thumbnail {
    background-color: #111;
}

.thumbnail {
    background-color: #fff;
}

.video-card .thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

.youtube-lazy {
    position: relative;
    width: 100%;
    height: 220px;
    background-color: #ccc;
    overflow: hidden;
    cursor: pointer;
}

.youtube-lazy img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    max-width: none !important;
}

.youtube-lazy .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: white;
    pointer-events: none;
}

.play-button-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.play-button-overlay i {
    font-size: 1.5rem;
    color: white;
}

.youtube-iframe-wrapper {
    width: 100%;
    height: 220px;
    position: relative;
    overflow: hidden;
}

.youtube-iframe-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.video-info {
    flex-grow: 1;
    padding: 10px;
    cursor: default !important;
}

body.dark-mode .video-info {
    color: #fff;
}

.video-info h4,
.shorts-title {
    font-weight: bold;
    font-size: 1rem;
    margin-top: 0;
    margin-bottom: 5px;
    line-height: 1.3;
    max-height: 2.6em;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shorts-title {
    font-size: 18px;
    margin-top: 20px;
    padding-left: 10px;
}

.video-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.playing-video-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.video-info p,
.info-text {
    margin: 2px 0;
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 3px;
    cursor: default;
}

body.dark-mode .video-info p {
    color: #fff;
}

.info-text {
    font-size: 0.9rem;
    color: #666;
    margin-top: 0.25rem;
    line-height: 1.3;
}

.dark-mode .info-text {
    color: #fff;
}

.video-info p a {
    text-decoration: none;
    color: inherit;
}

.video-info p img,
.channel-thumbnailUrl {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 5px;
}

.channel-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #999;
    display: inline-block;
    margin-right: 5px;
}

.video-duration-label {
    position: absolute;
    bottom: 5px;
    right: 5px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 0.75rem;
    pointer-events: none;
}

.info-icon {
    font-size: 14px;
    margin-left: 5px;
    color: #555;
    cursor: pointer;
    margin-right: 5px;
}

.custom-tooltip {
    visibility: hidden;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 10px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
    width: 200px;
}

.info-icon:hover+.custom-tooltip {
    visibility: visible;
    opacity: 1;
}

.top-scroll {
    overflow-x: auto;
    white-space: nowrap;
    padding: 10px 0 10px 10px;
    -ms-overflow-style: none;
    scrollbar-width: none;
    cursor: grab;
    flex-grow: 1;
}

.top-scroll::-webkit-scrollbar {
    display: none;
}

.top-scroll.dragging {
    cursor: grabbing;
    user-select: none;
}

.scroll-chip {
    cursor: pointer;
    display: inline-block;
    margin: 0 6px;
    padding: 6px 10px;
    border-radius: 20px;
    background-color: var(--chip-bg) !important;
    color: var(--chip-text) !important;
    font-size: 14px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.scroll-chip.active {
    background-color: #007bff !important;
    color: #fff !important;
}

.dark-mode .scroll-chip {
    cursor: pointer;
    background-color: #2c2c2c !important;
    color: #ccc !important;
}

.dark-mode .scroll-chip.active {
    background-color: #0d6efd !important;
    color: white !important;
}

.shorts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 10px;
}

.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--bg-color);
    border-top: 1px solid #ccc;
    display: flex;
    justify-content: space-around;
    padding: 10px 0;
    z-index: 10;
}

.bottom-nav button {
    border: none;
    background: none;
    font-size: 14px;
    cursor: pointer;
}

.bottom-nav a {
    text-align: center;
    flex: 1;
    color: var(--text-color);
    font-size: 12px;
    text-decoration: none;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}

.bottom-nav a.active {
    color: red;
}

.bottom-nav a:last-child #themeIcon {
    align-self: flex-end;
}

.bottom-nav a:first-child {
    align-self: flex-start;
}

.bottom-nav i {
    font-size: 26px;
}

.category-link,
.channel-link {
    text-decoration: none;
    font-weight: bold;
    color: currentColor;
}

.category-link:hover,
.channel-link:hover {
    font-weight: bold;
    color: currentColor;
}

.channel-thumbnailUrl {
    width: auto;
    height: 100%;
    border-radius: 50%;
    margin-right: 5px;
}

.col-12.d-flex {
    padding: 0 15px;
}

/* Base styles for the menu links */
.d-flex a {
    text-align: center;
    font-size: 14px;
}

.d-flex a.active {
    color: #dc3545;
}

.d-inline-flex {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
}

.close-btn {
    background: none;
    border: 1px solid #ccc;
    border-radius: 5px;
    color: #6c757d;
    font-size: 20px;
    padding: 0 10px;
}

.side-menu .close-btn {
    font-size: 14px;
    cursor: pointer;
}

#theme-toggle i,
#notificationIcon {
    font-size: 14px;
}

.dark-mode #notificationIcon {
    color: white;
}

/* Updated styles for the menu links based on IDs */
#theme-toggle,
#categoryMenu,
#clsbtn, #stats-link {
    color: #000;
}

#theme-toggle:hover,
#categoryMenu:hover,
#clsbtn:hover {
    color: #0d6efd;
}

body.dark-mode #theme-toggle,
body.dark-mode #categoryMenu,
body.dark-mode #clsbtn,
body.dark-mode #stats-link{
    color: #fff;
}

body.dark-mode #theme-toggle:hover,
body.dark-mode #categoryMenu:hover,
body.dark-mode #clsbtn:hover {
    color: #0d6efd;
}

/* Specific icon color overrides to fix the bug */
#theme-toggle i,
#categoryMenu i,
#clsbtn i {
    color: inherit;
    /* Inherits the color from the parent <a> tag */
}

/* Overrides for specific icon sizes */
#theme-toggle i {
    font-size: 14px;
}

#categoryMenu i,
#clsbtn i {
    font-size: 14px;
}

body a {
    color: black;
}

body a:hover {
    color: white;
}

a:hover {
    color: white;
}

body.dark-mode a,
.dark-mode .d-flex a {
    color: white;
}

body.dark-mode a:hover {
    color: white;
}

.side-menu #themeIcon:hover {
    color: #007bff;
}

body.dark-mode .side-menu #themeIcon:hover,
.dark-mode .col-12 a:hover,
.dark-mode .col-12 a#theme-toggle:hover #themeIcon,
.dark-mode .col-12 a#theme-toggle:hover #theme-text {
    color: #adb5bd;
}

.side-menu #statsIcon:hover {
    color: #007bff;
}

body.dark-mode .side-menu #statsIcon:hover,
.dark-mode .col-12 a#stats-link:hover #statsIcon {
    color: #adb5bd;
}
/* Light mode hover (keeps default blue) */
#clsbtn:hover i {
    color: #007bff !important;
}

/* Dark mode hover — override to grey */
body.dark-mode #clsbtn:hover i {
    color: #adb5bd !important;
}
#videoModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

#videoModal.show {
    opacity: 1;
    visibility: visible;
}

#videoContainer button#ctaButton:hover {
    background-color: #0056b3;
}

#adsContainer {
    min-height: 100px;
    background: #f1f1f1;
    text-align: center;
    padding: 10px;
    font-size: 14px;
    color: #333;
}

#notificationBox {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
    visibility: hidden;
}

#notificationBox.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
}

@media (min-width: 768px) {
    .video-card {
        flex-direction: column;
    }

    .video-list {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .video-card {
        width: calc(100%);
        flex-direction: column;
    }

    .thumbnail {
        width: 100%;
        height: auto;
    }

    .video-card .thumbnail {
        height: 220px;
    }

    .logo {
        flex-direction: row;
        align-items: center;
    }

    .logo-text {
        font-size: 1.5rem;
        margin-right: 1rem;
    }

    .info-text {
        font-size: 1rem;
        margin-top: 0;
    }
}

@media (min-width: 1024px) {
    .video-card {
        width: calc(100%);
    }
}

@media (max-width: 767.98px) {
    .video-list {
        max-height: 50vh;
    }

    .video-card {
        flex-direction: column;
    }

    .video-card .thumbnail {
        width: 100%;
        height: 180px;
        flex: none;
    }

    .video-card .video-info {
        padding: 10px 15px;
    }
}

.playing-video-info {
    display: flex;
    align-items: flex-start;
    padding-top: 3px;
    background-color: rgb(190, 190, 190);
    border: solid 1px gray;
    overflow: hidden;
}

.dark-mode .playing-video-info {
    display: flex;
    align-items: flex-start;
    padding-top: 3px;
    background-color: gray;
    border: solid 1px gray;
    overflow: hidden;
}

@media (max-width: 767.98px) {
    .logo-link {
        padding: 5px !important;
    }

    .logo-img {
        max-height: 32px !important;
        width: auto;
    }

    .py-2 {
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }

    .top-scroll {
        padding: 5px 0 5px 5px;
    }
}

.bi-x-lg:hover {
    color: #6c757d;
}

.dark-mode .bg-light {
    background: #555 !important;
}

/* Default (light) theme styles */
body {
    background-color: #ffffff;
    color: #000000;
}

/* Dark mode styles */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #121212;
        color: #ffffff;
    }
}

.p-3 {
    padding: none !important;
}

/* Light mode styles (default) */
.channel-card {
    border: none;
    text-align: center;
}

.channel-thumbnail {
    width: 100%;
    height: auto;
    border-radius: 50%;
    object-fit: cover;
    aspect-ratio: 1/1;
}

.channel-title {
    margin-top: 10px;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #212529;
}

/* Dark mode styles */
.dark-mode {
    background-color: #212529;
    color: #f8f9fa;
}

.dark-mode .bg-white {
    background-color: #343a40 !important;
    color: #f8f9fa;
}

.dark-mode .channel-title {
    color: #f8f9fa;
}

.dark-mode .form-control {
    background-color: #495057;
    color: #f8f9fa;
    border-color: #6c757d;
}

.dark-mode .form-control::placeholder {
    color: #ced4da;
}

/* Mobile-first alphabet toolbar styles */
.alphabet-nav-container {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid #dee2e6;
}

.alphabet-nav-container::-webkit-scrollbar {
    display: none;
}

.alphabet-link {
    display: inline-block;
    padding: 5px 10px;
    text-decoration: none;
    color: #495057;
    font-weight: bold;
}

.alphabet-link:hover {
    color: #0d6efd;
}

.dark-mode .alphabet-link {
    color: #ced4da;
}

.dark-mode .alphabet-link:hover {
    color: #0d6efd;
}

.btn-search {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Fix for fixed header blocking content */
.channel-letter-section {
    padding-top: 120px;
    margin-top: -120px;
}

/* Light mode styles (default) */
.channel-card {
    border: none;
    text-align: center;
}

.channel-thumbnail {
    width: 100%;
    height: auto;
    border-radius: 50%;
    object-fit: cover;
    aspect-ratio: 1/1;
}

.channel-title {
    margin-top: 10px;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #212529;
}

/* Dark mode styles */
.dark-mode {
    background-color: #212529;
    color: #f8f9fa;
}

.dark-mode .bg-white {
    background-color: #343a40 !important;
    color: #f8f9fa;
}

.dark-mode .channel-title {
    color: #f8f9fa;
}

.dark-mode .form-control {
    background-color: #495057;
    color: #f8f9fa;
    border-color: #6c757d;
}

.dark-mode .form-control::placeholder {
    color: #ced4da;
}

.btn-search {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Mobile-first alphabet toolbar styles */
.alphabet-nav-container {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid #dee2e6;
}

.alphabet-nav-container::-webkit-scrollbar {
    display: none;
}

.alphabet-link {
    display: inline-block;
    padding: 5px 10px;
    text-decoration: none;
    color: #495057;
    font-weight: bold;
}

.dark-mode .alphabet-link {
    color: #ced4da;
}

/* Fix for fixed header blocking content */
.channel-letter-section {
    padding-top: 120px;
    /* Adjust this value to be greater than your header's height */
    margin-top: -120px;
}

.channel-letter-section {
    padding: 0;
    margin: 0;
    line-height: 1;
}

.channel-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Removes underline from all channel links */
.channel-card a {
    text-decoration: none;
}

/* The thumbnail-wrapper contains both the image and the heart button */
.thumbnail-wrapper {
    position: relative;
    width: 80px;
    height: 80px;
}

/* Makes the channel title bold on hover, with no underline */
.channel-card a:hover .channel-title {
    font-weight: bold;
    text-decoration: none;
}

.channel-thumbnail {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    aspect-ratio: 1/1;
}

/* Style for the bookmark button */
.bookmark-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -18px;
    /* Half of the icon's height (36px) */
    margin-left: -18px;
    /* Half of the icon's width (36px) */
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    border-radius: 50%;
    padding: 8px;
    cursor: pointer;
    z-index: 10;
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(100%, 50%);
}

.bookmark-btn i {
    font-size: 1.5rem;
}

.bookmark-btn:hover {
    color: #ff6347;
    background-color: rgba(0, 0, 0, 0.8);
}

/* Change icon color for saved channels */
.bookmark-btn.saved {
    background-color: #ff6347;
    transform: translate(100%, 50%);
}

.bookmark-btn.saved:hover {
    background-color: #e0523b;
}

.bookmark-btn.saved i {
    color: white;
    fill: white;
}

/* Ensure title doesn't overlap */
.channel-title {
    word-break: break-word;
    margin-top: 5px;
}

/* Corrected vertical-align for the heart icons */
.bookmark-btn .bi-heart::before,
.bookmark-btn .bi-heart-fill::before {
    vertical-align: -.225em !important;
}

/* --- FORCE LIGHT-MODE ICON COLOR ON MOBILE/TABLET --- */
body:not(.dark) #theme-toggle .toggle-icon i.bi-list {
    color: #000 !important;
    /* pick your light color */
}

/* If you also have other list icons outside #theme-toggle, keep this too */
body:not(.dark) .toggle-icon i.bi-list {
    color: #000 !important;
}

/* Neutralize OS dark-preference impact when your site isn't in .dark */
@media (prefers-color-scheme: dark) {

    body:not(.dark) #theme-toggle,
    body:not(.dark) #theme-toggle i,
    body:not(.dark) .toggle-icon i.bi-list {
        color: #000 !important;
    }
}

/* Optional: stop touch-hover turning it white */
@media (hover: none) {

    body:not(.dark) #theme-toggle:hover,
    body:not(.dark) #theme-toggle:active {
        color: #000 !important;
    }
}

/* Force black text inside youtube-player-video-info */
#youtube-player-video-info,
#youtube-player-video-info * {
    color: #000 !important;
}

/* Social media icons styling for new row */
.social-icons {
    text-align: center;
}

.social-icons a {
    color: #000; /* Default color for light mode */
    text-decoration: none;
    transition: color 0.3s ease;
}

.social-icons a:hover {
    color: #0d6efd; /* Hover color */
}

.dark-mode .social-icons a {
    color: #fff; /* Dark mode color */
}

.dark-mode .social-icons a:hover {
    color: #0d6efd; /* Hover color in dark mode */
}

/* Social Sharing Pop-up Styling */
.share-popup {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
}

.share-popup-content {
    background-color: #fff;
    /* Light mode background */
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    position: relative;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.dark-mode .share-popup-content {
    background-color: #1e1e1e !important;
    /* Dark mode background */
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 24px;
    cursor: pointer;
    color: #555;
}

.share-icons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

/* Light mode icon styles */
.share-icon {
    font-size: 36px;
    color: #555;
    transition: color 0.3s, transform 0.3s;
}

/* Dark mode icon default color */
.dark-mode .share-icon {
    color: #f8f9fa;
}

/* Social media brand colors for hover effect in both light and dark mode */
.share-icon.facebook:hover {
    color: #3b5998;
}

.share-icon.twitter:hover {
    color: #1da1f2;
}

.share-icon.whatsapp:hover {
    color: #25d366;
}





.share-icon.copy:hover {
    color: #007bff;
}

/* Color for the copy icon on hover */

.video-info{
    color:black;
}

.dark-mode .countrycount-icon {
    color: #f8f9fa !important;
}

#notificationIcon {
    color: black;
    /* or your preferred color */
}

#notificationIcon:active,
#notificationIcon:focus,
#notificationIcon:visited {
    color: black !important;
}
/* ✅ Force manual dark mode to override OS preference */
/* Force manual dark mode to override OS preference */
body.dark-mode {
    background-color: #121212 !important;
    color: #ffffff !important;
}

body.dark-mode header {
    background-color: #1e1e1e !important;
    border-bottom: 1px solid #444 !important;
}

body.dark-mode .video-card,
body.dark-mode .video-info,
body.dark-mode .scroll-chip,
body.dark-mode .share-popup-content {
    background-color: #1e1e1e !important;
    color: #ffffff !important;
}
/* ✅ Hamburger Icon Fix */

/* Default (light mode) */
.toggle-icon i.bi-list {
    color: #000 !important;
    /* black in light mode */
}

/* Dark mode via prefers-color-scheme */
@media (prefers-color-scheme: dark) {
    .toggle-icon i.bi-list {
        color: #fff !important;
        /* white in OS dark mode */
    }
}

/* Dark mode via body.dark-mode class */
body.dark-mode .toggle-icon i.bi-list {
    color: #fff !important;
    /* white when your site toggles dark */
}

/* Force black text in non-dark mode */
body:not(.dark-mode) select.form-select,
body:not(.dark-mode) .form-select option {
    color: #000 !important;
    background-color: #fff !important;
}
/* 1) Tell browsers which palette to use */
body.dark-mode {
    color-scheme: dark;
}

body:not(.dark-mode) {
    color-scheme: light;
}

/* 2) Force readable colors for selects & the enhanced widget */
body:not(.dark-mode) select.form-select,
body:not(.dark-mode) .form-select option,
body:not(.dark-mode) .searchable-select,
body:not(.dark-mode) .searchable-select *,
body:not(.dark-mode) .searchable-select input,
body:not(.dark-mode) .searchable-select .dropdown-menu,
body:not(.dark-mode) .searchable-select .list,
body:not(.dark-mode) .searchable-select .option {
    color: #000 !important;
    background-color: #fff !important;
}

/* 3) iOS autofill can still draw white text; force it */
body:not(.dark-mode) input:-webkit-autofill,
body:not(.dark-mode) textarea:-webkit-autofill,
body:not(.dark-mode) select:-webkit-autofill {
    -webkit-text-fill-color: #000 !important;
    transition: background-color 9999s ease-out;
    /* hide yellow autofill bg */
}


/* Default (non-dark mode) */
.form-label {
    color: #000;
    /* black */
}

/* Dark mode */
body.dark-mode .form-label {
    color: #fff;
    /* white */
}

/* wrapper for positioning */
.ss-search-wrap {
  position: relative;
  display: inline-block;
  width: 100%;
}

/* input box */
.ss-search {
  width: 100%;
  padding: 8px 12px 8px 36px; /* left padding for icon */
  border: 1px solid #000; /* default border */
  border-radius: 6px;
  outline: none;
}

/* search icon */
.ss-search-wrap::before {
  content: "\f002"; /* Unicode for search icon in Font Awesome */
  font-family: "Font Awesome 6 Free"; /* or Bootstrap Icons */
  font-weight: 900;
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #666;
  font-size: 14px;
}

/* Non-dark mode (default) */
.ss-search {
  background-color: #fff;
  color: #000;
  border: 1px solid #000;
}

/* Dark mode */
body.dark-mode .ss-search {
  background-color: #1e1e1e;
  color: #fff;
  border: 1px solid #fff;
}

body.dark-mode .ss-search-wrap::before {
  color: #aaa;
}
.icons-bar * {
    font-size: 16px !important;
}

 .video-title{color:#000 !important;}
    .dark-mode .video-title{color:#fff !important;}
    .icons-bar { display: flex; align-items: center; gap: 50px; }
    .icon-link { display: inline-flex; flex-direction: column; align-items: center; text-decoration: none; color: inherit; }

    /* keep hero area stable (no layout shift) */
    .video-player-container { position: relative; width: 100%; max-width: 100%; }
    .video-player-container::before { content: ""; display: block; padding-top: 56.25%; } /* 16:9 */
    .video-player-container > * { position: absolute; inset: 0; }
    .youtube-thumb { width: 100%; height: 100%; object-fit: cover; border: 0; border-radius: 8px; }
    .play-button-overlay { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; }
    .play-button-overlay i { font-size: 64px; opacity: .9; cursor: pointer; }

    /* ===== HERO PLAYER ===================================================== */
.video-player-container{
  position: relative;          /* make it the positioning context */
  aspect-ratio: 16 / 9;        /* keeps the area stable (no CLS) */
  background:#000;             /* black letterbox while loading */
}

/* The direct content (thumb wrapper OR iframe) fills the container */
.video-player-container .youtube-lite,
.video-player-container iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Thumbnail inside the hero wrapper */
.youtube-lite{
  position: relative;          /* parent for the overlay */
  cursor: pointer;
}
.youtube-thumb{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:8px;
}

/* Center the play icon */
.play-button-overlay{
  position:absolute;
  inset:0;                     /* fill the parent */
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:2;
  pointer-events:none;         /* clicks go to parent (youtube-lite) */
}

/* ===== LIST THUMBNAILS ================================================= */
.thumbnail{
  position:relative;           /* parent for overlay/badges */
  aspect-ratio: 16 / 9;        /* consistent card heights */
  
  border-radius:8px;
}
.thumbnail img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.thumbnail .play-button-overlay{
  position:absolute;
   
  top: 50%; left: 050%;
  width: 6%;
  height: 10%;
  z-index: 2;
  pointer-events: none;  
}

/* duration badge example */
.video-duration-label{
  position:absolute;
  right:8px;
  bottom:8px;
  z-index:3;
}
/* ---- generic: make overlay fill the parent ---- */
.thumbnail,
.youtube-lite {                 /* parents */
  position: relative;
}

.play-button-overlay {
  position: absolute;
  top: 50%; left: 050%;
  width: 0%;
  height: 0%;
  z-index: 2;
  pointer-events: none;         /* clicks go to parent */
  /* don't rely on flex at all */
}

/* Center the icon regardless of overlay size */
.play-button-overlay i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  font-size: 64px;              /* adjust as you like */
}

/* Hero iframe/thumbnail still fill the box */
.video-player-container { position: relative; aspect-ratio: 16/9; background:#000; overflow: hidden; }
.video-player-container iframe,
.video-player-container .youtube-lite { position: absolute; top:0; left:0; width:100%; height:100%; border:0; }

/* Card image should not affect flow, and should cover */
.thumbnail img {
  position: absolute;
  top:0; left:0; width:100%; height:100%;
  object-fit: cover;
  display: block;
}
#initial-loading-overlay[style*="none"],
#overlay[style*="none"] { pointer-events: none !important; }



 .countrycount-p,
 .countrycount-icon,
 .share-icon-primary
{
color:#0d6efd !important;;
}
body.dark-mode .countrycount-p,
body.dark-mode .countrycount-icon,
body.dark-mode .share-icon-primary
{
color:#f39c12 !important;;
}


/* ============== Unified Share Icon Sizing ============== */
/* Control size from one place (change to 36px, 28px, etc.) */
:root { --share-icon-size: 36px; }

.share-icon {
  font-size: var(--share-icon-size);  /* scales Bootstrap <i> icons */
  line-height: 1;
  color: #555;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Make BOTH <i> and <svg> follow the same box model */
.share-icon i,
.share-icon svg {
  width: 1em;          /* exact same size as the font (inherits from .share-icon) */
  height: 1em;
  display: inline-block;
  vertical-align: middle;
  transition: color 0.2s ease, fill 0.2s ease, opacity 0.2s ease;
}

/* Optional subtle hover feedback for all */
.share-icon:hover { opacity: 0.9; }

/* ============== Brand Hovers ============== */
.share-icon.facebook:hover { color: #3b5998; }   /* Facebook */
.share-icon.whatsapp:hover { color: #25d366; }   /* WhatsApp */

/* ============== X (Twitter replacement) ============== */
/* Use currentColor so it behaves like the <i> icons */
/* X (Twitter replacement) */
.share-icon.x svg rect {
  fill: #000;      /* always black background */
}
.share-icon.x svg path {
  fill: #fff;      /* X always white */
}

/* Hover state for X */
.share-icon.x:hover svg rect {
  fill: #1da1f2;   /* Twitter blue (or stay black if you prefer) */
}


/* (If you want X to be black by default, uncomment this line)
.share-icon.x { color: #000; }
*/
/* Default (light mode) */
.share-popup-content h3 {
  color: #000;      /* black text on white/light background */
  margin-bottom: 1rem;
  font-size: 1.1rem;
  font-weight: 600;
}

/* Dark mode */
body.dark-mode .share-popup-content h3 {
  color: #fff;      /* white text on dark background */
}



/* Dark mode override */
.dark-mode #notificationBox {
  background: #1e1e1e !important;
  color: #f1f1f1 !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
}

.dark-mode #notificationBox .card-header {
  background: #252525 !important;
  color: #e1e1e1 !important;
}

.dark-mode #notificationBox .list-group-item {
  background: #2a2a2a !important;
  color: #f1f1f1 !important;
}

/* Default (light mode) */
#markAllReadBtn {
  color: #000 !important; /* black text */
}

/* Dark mode override */
.dark-mode #markAllReadBtn {
  color: #fff !important; /* white text */
}


 .dark-mode .privacy-link,
.dark-mode .copyright-text { color: #adb5bd !important; }
.privacy-link:hover { text-decoration: underline; }


.dark-mode #lastupdate{
color:white;
}

#lastupdate{
font-size:12px;font-weight:bold; text-align: center;color:black;padding-bottom:5px;
padding-top: 5px;
}

.video-player-container img {
  display: none;
}


/* ---------- shared base styles (light by default) ---------- */
:root{
  /* Card/surface for the collapsed panels */
  --filter-surface-bg: #ffffff;
  --filter-surface-border: var(--bs-border-color);
  --filter-hover-bg: rgba(0,0,0,.04);
  --filter-checked-bg: rgba(var(--bs-primary-rgb), .08);
  --filter-checked-color: var(--bs-primary);
}

/* If you set data-bs-theme="dark" anywhere up the tree */
[data-bs-theme="dark"]{
  --filter-surface-bg: #12161c;               /* deep, not pure black */
  --filter-surface-border: #2a3441;           /* subtle border */
  --filter-hover-bg: rgba(255,255,255,.06);   /* gentle hover */
  --filter-checked-bg: rgba(var(--bs-primary-rgb), .18);
  --filter-checked-color: #cfe4ff;            /* readable on dark */
}

/* Also respect user's system preference automatically */
@media (prefers-color-scheme: dark){
  :root:not([data-bs-theme="light"]){
    --filter-surface-bg: #12161c;
    --filter-surface-border: #2a3441;
    --filter-hover-bg: rgba(255,255,255,.06);
    --filter-checked-bg: rgba(var(--bs-primary-rgb), .18);
    --filter-checked-color: #cfe4ff;
  }
}

/* ---------- apply to your components ---------- */

/* Collapsible wrapper (the panel) */
.submenu{
  display:none;
  border: 1px solid var(--filter-surface-border);
  background-color: var(--filter-surface-bg);
  border-radius: .75rem;
}
.submenu.show{ display:block; }

/* Toggle buttons header (Category/Duration/Country) */
.btn.filter-toggle{
  background-color: var(--filter-surface-bg);
  border: 1px solid var(--filter-surface-border);
  color: var(--bs-body-color);
}
.btn.filter-toggle .chevron{
  color: currentColor;
  transition: transform .2s ease;
}
.btn.filter-toggle[aria-expanded="true"] .chevron{ transform: rotate(90deg); }

/* Radio-like list items */
.btn-check + .list-group-item{
  border: 0;
  border-radius: .5rem;
  margin: 2px 0;
  color: var(--bs-body-color);
  background-color: transparent;
  cursor: pointer;
}
.btn-check + .list-group-item:hover{
  background-color: var(--filter-hover-bg);
}

/* Selected state */
.btn-check:checked + .list-group-item{
  background-color: var(--filter-checked-bg);
  color: var(--filter-checked-color);
  font-weight: 600;
}

/* Slight lift on hover (desktop) */
@media (hover:hover){
  .btn-check + .list-group-item:hover{ transform: translateY(-1px); }
}

/* Light mode defaults */
#categoryToggle {
  background-color: #f8f9fa !important;
  color: #212529 !important;
  border: 1px solid #dee2e6 !important;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

#categoryToggle .chevron {
  color: currentColor;
  transition: transform .2s ease;
}

/* Rotate chevron when expanded */
#categoryToggle[aria-expanded="true"] .chevron {
  transform: rotate(90deg);
}

/* ---------- Dark mode overrides ---------- */

/* Case 1: Manual dark mode (via data-bs-theme="dark") */
html[data-bs-theme="dark"] #categoryToggle {
  background-color: #202634 !important;  /* dark background */
  color: #e6ebf5 !important;             /* soft white text */
  border-color: #2a3441 !important;      /* subtle border */
  box-shadow: 0 1px 3px rgba(0,0,0,.6);
}

html[data-bs-theme="dark"] #categoryToggle:hover {
  background-color: #262c3d !important;
  color: #ffffff !important;
}

/* Case 2: System dark preference if no attribute set */
@media (prefers-color-scheme: dark) {
  html:not([data-bs-theme="light"]) #categoryToggle {
    background-color: #202634 !important;
    color: #e6ebf5 !important;
    border-color: #2a3441 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.6);
  }

  html:not([data-bs-theme="light"]) #categoryToggle:hover {
    background-color: #262c3d !important;
    color: #ffffff !important;
  }
}

/* =========================================
   DARK MODE TOGGLE BUTTON STYLES
   Applies to Category, Duration, Country
   ========================================= */

/* Base light mode (already fine) */
#categoryToggle,
#durationToggle,
#countryToggle {
  background-color: #f8f9fa !important;
  color: #212529 !important;
  border: 1px solid #dee2e6 !important;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* Dark mode unified look */
body.dark-mode #categoryToggle,
body.dark-mode #durationToggle,
body.dark-mode #countryToggle {
  background-color: #202634 !important;  /* deep bluish-gray */
  color: #e6ebf5 !important;              /* soft white text */
  border-color: #2a3441 !important;       /* subtle border */
  box-shadow: 0 1px 3px rgba(0,0,0,.6);
}

/* Hover (dark mode) */
body.dark-mode #categoryToggle:hover,
body.dark-mode #durationToggle:hover,
body.dark-mode #countryToggle:hover {
  background-color: #262c3d !important;
  color: #ffffff !important;
  border-color: #343d4f !important;
}

/* Chevron color sync */
body.dark-mode #categoryToggle .chevron,
body.dark-mode #durationToggle .chevron,
body.dark-mode #countryToggle .chevron {
  color: currentColor !important;
}

/* Active/expanded feedback */
body.dark-mode #categoryToggle[aria-expanded="true"],
body.dark-mode #durationToggle[aria-expanded="true"],
body.dark-mode #countryToggle[aria-expanded="true"] {
  background-color: #2a3245 !important;
  color: #ffffff !important;
  border-color: #3c455a !important;
}
body.dark-mode #categoryToggle[aria-expanded="true"] strong,
body.dark-mode #durationToggle[aria-expanded="true"] strong,
body.dark-mode #countryToggle[aria-expanded="true"] strong {
  color: #90caf9 !important; /* light blue accent */
}
/* =========================================
   FINAL DARK MODE FIX — DROPDOWN PANELS
   ========================================= */

/* Panel background */
body.dark-mode #categoryPanel,
body.dark-mode #durationPanel,
body.dark-mode #countryPanel {
  background-color: #1a1d25 !important;
  border: 1px solid #2f3645 !important;
  border-radius: 0.75rem !important;
}

/* Each option row */
body.dark-mode #categoryPanel .list-group-item,
body.dark-mode #durationPanel .list-group-item,
body.dark-mode #countryPanel .list-group-item {
  background-color: transparent !important;
  color: #e4e7eb !important;
  border: 0 !important;
  transition: background-color .2s ease, color .2s ease;
}

/* Hover */
body.dark-mode #categoryPanel .list-group-item:hover,
body.dark-mode #durationPanel .list-group-item:hover,
body.dark-mode #countryPanel .list-group-item:hover {
  background-color: rgba(255,255,255,.08) !important;
  color: #ffffff !important;
}

/* Selected (checked) */
body.dark-mode .btn-check:checked + #categoryPanel .list-group-item,
body.dark-mode .btn-check:checked + #durationPanel .list-group-item,
body.dark-mode .btn-check:checked + #countryPanel .list-group-item {
  background-color: rgba(14,165,233,.25) !important;
  color: #cfe4ff !important;
  font-weight: 600 !important;
}

/* Simplify active/keyboard highlight */
body.dark-mode #categoryPanel .list-group-item:focus,
body.dark-mode #durationPanel .list-group-item:focus,
body.dark-mode #countryPanel .list-group-item:focus {
  outline: 2px solid rgba(96,165,250,.6) !important;
  outline-offset: 2px;
}

/* Chevron + border color consistency */
body.dark-mode #categoryToggle .chevron,
body.dark-mode #durationToggle .chevron,
body.dark-mode #countryToggle .chevron {
  color: currentColor !important;
}
 /* collapse (no Bootstrap JS) */
  .submenu { display:none; }
  .submenu.show { display:block; }

  /* chevron rotation */
  #categoryToggle .chevron { transition: transform .2s ease; }
  #categoryToggle[aria-expanded="true"] .chevron { transform: rotate(90deg); }

  /* list item styling for radios */
  .btn-check + .list-group-item {
    border:0;
    border-radius:.5rem;
    margin:2px 0;
    cursor:pointer;
  }
  .btn-check:checked + .list-group-item {
    background-color: rgba(var(--bs-primary-rgb), .08);
    color: var(--bs-primary);
    font-weight:600;
  }

  @media (hover:hover){
    .btn-check + .list-group-item:hover {
      background-color: rgba(0,0,0,.04);
    }
  }
   /* collapse (no Bootstrap JS) */
  .submenu { display:none; }
  .submenu.show { display:block; }

  /* chevron rotation */
  #durationToggle .chevron { transition: transform .2s ease; }
  #durationToggle[aria-expanded="true"] .chevron { transform: rotate(90deg); }

  /* list item styling for radios */
  .btn-check + .list-group-item {
    border:0;
    border-radius:.5rem;
    margin:2px 0;
    cursor:pointer;
  }
  .btn-check:checked + .list-group-item {
    background-color: rgba(var(--bs-primary-rgb), .08);
    color: var(--bs-primary);
    font-weight:600;
  }

  @media (hover:hover){
    .btn-check + .list-group-item:hover {
      background-color: rgba(0,0,0,.04);
    }
  }
  /* collapse (no Bootstrap JS) */
  .submenu { display:none; }
  .submenu.show { display:block; }

  /* chevron rotation */
  #countryToggle .chevron { transition: transform .2s ease; }
  #countryToggle[aria-expanded="true"] .chevron { transform: rotate(90deg); }

  /* list item styling for radios */
  .btn-check + .list-group-item {
    border:0;
    border-radius:.5rem;
    margin:2px 0;
    cursor:pointer;
  }
  .btn-check:checked + .list-group-item {
    background-color: rgba(var(--bs-primary-rgb), .08);
    color: var(--bs-primary);
    font-weight:600;
  }

  @media (hover:hover){
    .btn-check + .list-group-item:hover {
      background-color: rgba(0,0,0,.04);
    }
  }
  .searchable-select { position: relative; }

  .ss-button{
    width:100%;
    text-align:left;
    padding:.375rem .75rem;
    border:1px solid #ced4da;
    border-radius:.375rem;
    background:#fff;
    line-height:1.5;
    display:flex; justify-content:space-between; align-items:center;
    cursor:pointer;
  }
  .ss-button:focus{ outline:0; box-shadow:0 0 0 .25rem rgba(13,110,253,.25); }
  .ss-caret{ margin-left:.5rem; }

  .ss-menu{
    position:absolute; left:0; right:0; z-index:1000;
    background:#fff; color:#212529;
    border:1px solid rgba(0,0,0,.15); border-radius:.375rem;
    margin-top:.25rem; box-shadow:0 .5rem 1rem rgba(0,0,0,.15);
    display:none;
  }
  .ss-menu.open{ display:block; }

  /* ===== Search row ===== */
  .ss-search-wrap{
    position:relative;
    padding:.5rem;
    border-bottom:1px solid rgba(0,0,0,.05);
  }

  /* Nuke ANY pseudo/glyph inside the search row (root cause of the square) */
  .ss-search-wrap::before,
  .ss-search-wrap::after,
  .ss-search-wrap *::before,
  .ss-search-wrap *::after{
    content:none !important;
    display:none !important;
  }
  /* Hide any stray icon elements */
  .ss-search-wrap i,
  .ss-search-wrap .ss-icon{ display:none !important; }

  /* Input with background SVG icon */
  .ss-search{
    width:100%;
    padding:10px 12px 10px 2.25rem;                /* room for icon */
    border:1.5px solid #cbd5e1;
    border-radius:12px;
    background:#fff;
    color:#0f172a;
    outline:0;
    box-shadow:none;
    transition:border-color .2s, box-shadow .2s, background-color .2s, color .2s;
    background-repeat:no-repeat !important;
    background-position:.75rem 50% !important;
    background-size:18px 18px !important;
    background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" fill="none" stroke="%2364748b" stroke-width="2"/><line x1="16.5" y1="16.5" x2="21" y2="21" stroke="%2364748b" stroke-width="2" stroke-linecap="round"/></svg>') !important;
  }
  .ss-search::placeholder{ color:#64748b; font-style:italic; }
  .ss-search:focus{
    border-color:#2563eb;
    box-shadow:0 0 0 3px rgba(37,99,235,.35);
  }

  .ss-list{ max-height:260px; overflow:auto; padding:.25rem 0; }
  .ss-item{ padding:.375rem .75rem; cursor:pointer; }
  .ss-item:hover, .ss-item.active, .ss-item.kbd{ background:rgba(13,110,253,.08); }

  /* ===== Dark mode ===== */
  .dark-mode .ss-button, .dark-mode .ss-menu{
    background:#1e1e1e; color:#eaeaea; border-color:#333;
  }
  .dark-mode .ss-search-wrap{ border-bottom:1px solid rgba(255,255,255,.06); }
  .dark-mode .ss-search{
    background:#0f172a; color:#e5e7eb; border-color:#334155;
    background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" fill="none" stroke="%2394a3b8" stroke-width="2"/><line x1="16.5" y1="16.5" x2="21" y2="21" stroke="%2394a3b8" stroke-width="2" stroke-linecap="round"/></svg>') !important;
  }
  .dark-mode .ss-search::placeholder{ color:#94a3b8; }
  .dark-mode .ss-search:focus{
    border-color:#60a5fa;
    box-shadow:0 0 0 3px rgba(96,165,250,.35);
  }

  /* Keep Bootstrap Icons working everywhere else */
  .bi::before{
    font-family:"bootstrap-icons" !important;
    font-style:normal;
    font-weight:normal !important;
    font-variant:normal;
    text-transform:none;
    line-height:1;
    vertical-align:-.125em;
  }
 /* =========================================================
   PWA-SAFE THEME SCOPING + FILTER PANELS (final override)
   - Prevent OS dark from affecting light mode in PWA
   - Keep dark mode via .dark-mode only
   ========================================================= */

 /* UA hints so WebView renders correct base widgets */
 body:not(.dark-mode) {
     color-scheme: light;
 }

 body.dark-mode {
     color-scheme: dark;
 }

 /* --- Variables for panels (force light when NOT dark) --- */
 body:not(.dark-mode) {
     --filter-surface-bg: #ffffff;
     --filter-surface-border: #dee2e6;
     --filter-hover-bg: rgba(0, 0, 0, .04);
     --filter-checked-bg: rgba(13, 110, 253, .08);
     /* primary tint */
     --filter-checked-color: #0d6efd;
 }

 /* Dark palette only when you actually toggle .dark-mode */
 body.dark-mode {
     --filter-surface-bg: #12161c;
     --filter-surface-border: #2a3441;
     --filter-hover-bg: rgba(255, 255, 255, .08);
     --filter-checked-bg: rgba(14, 165, 233, .25);
     --filter-checked-color: #cfe4ff;
 }

 /* ---------- PANELS: Category / Duration / Country ---------- */
 #categoryPanel,
 #durationPanel,
 #countryPanel {
     background-color: var(--filter-surface-bg) !important;
     border: 1px solid var(--filter-surface-border) !important;
     border-radius: .75rem !important;
 }

 /* Items inside the panels */
 #categoryPanel .list-group-item,
 #durationPanel .list-group-item,
 #countryPanel .list-group-item {
     background-color: transparent !important;
     color: var(--bs-body-color, #212529) !important;
     border: 0 !important;
     transition: background-color .2s ease, color .2s ease;
 }

 @media (hover:hover) {

     #categoryPanel .list-group-item:hover,
     #durationPanel .list-group-item:hover,
     #countryPanel .list-group-item:hover {
         background-color: var(--filter-hover-bg) !important;
     }
 }

 /* Checked/active row */
 .btn-check:checked+.list-group-item {
     background-color: var(--filter-checked-bg) !important;
     color: var(--filter-checked-color) !important;
     font-weight: 600 !important;
 }

 /* ---------- Toggle buttons match palette in both modes ---------- */
 #categoryToggle,
 #durationToggle,
 #countryToggle {
     background-color: var(--filter-surface-bg) !important;
     color: var(--bs-body-color, #212529) !important;
     border: 1px solid var(--filter-surface-border) !important;
     transition: background-color .2s, color .2s, border-color .2s;
 }

 #categoryToggle:hover,
 #durationToggle:hover,
 #countryToggle:hover {
     background-color: var(--filter-hover-bg) !important;
 }

 #categoryToggle .chevron,
 #durationToggle .chevron,
 #countryToggle .chevron {
     color: currentColor !important;
 }

 /* ---------- Neutralize OS dark override when you are in light ---------- */
 @media (prefers-color-scheme: dark) {
     body:not(.dark-mode) {
         --filter-surface-bg: #ffffff;
         --filter-surface-border: #dee2e6;
         --filter-hover-bg: rgba(0, 0, 0, .04);
         --filter-checked-bg: rgba(13, 110, 253, .08);
         --filter-checked-color: #0d6efd;
     }
 }
/* ==== Filter Radio List: Checkmark + Active State (Bootstrap light/dark ready, Olt360 blue) ==== */
/* 1) Brand color (light + dark) */
:root {
    --olt360-accent: #90caf9;
    /* light */
    --olt360-accent-rgb: 144, 202, 249;
}

[data-bs-theme="dark"] {
    --olt360-accent: #64b5f6;
    /* dark */
    --olt360-accent-rgb: 100, 181, 246;
}

/* 2) Panel: clip children so nothing bleeds past rounded corners */
.submenu {
    background: var(--bs-body-bg);
    border-radius: .75rem;
    overflow: hidden;
    /* <-- key fix */
}

/* 3) Items */
.submenu .list-group .list-group-item {
    position: relative;
    border-radius: .5rem;
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    padding-right: 2.25rem;
    /* space for checkmark */
}

/* 4) Internal accent bar (hidden by default) */
.submenu .list-group .list-group-item::before {
    content: "";
    position: absolute;
    left: .5rem;
    /* sits inside panel padding */
    top: .4rem;
    bottom: .4rem;
    width: .28rem;
    border-radius: .28rem;
    background-color: transparent;
    opacity: 0;
    transition: opacity .15s ease;
}

/* 5) Hover tint */
.submenu .list-group .list-group-item:hover {
    background-color: color-mix(in srgb, var(--olt360-accent) 6%, var(--bs-body-bg));
}

/* 6) Focus ring */
.btn-check:focus+.list-group-item {
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(var(--olt360-accent-rgb), .25);
}

/* 7) Checked state (no border-left) */
.btn-check:checked+.list-group-item {
    background-color: color-mix(in srgb, var(--olt360-accent) 14%, var(--bs-body-bg));
    font-weight: 600;
}

/* show internal accent bar when selected */
.btn-check:checked+.list-group-item::before {
    background-color: var(--olt360-accent);
    opacity: 1;
}

/* 8) Right-side checkmark */
.btn-check+.list-group-item::after {
    content: "";
    position: absolute;
    right: .85rem;
    top: 50%;
    transform: translateY(-50%) scale(.9);
    opacity: 0;
    transition: opacity .15s ease, transform .15s ease;
    font-weight: 700;
    line-height: 1;
}

.btn-check:checked+.list-group-item::after {
    content: "✓";
    color: var(--olt360-accent);
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

/* 9) Chevron rotation */
button[aria-expanded="true"] .chevron {
    transform: rotate(90deg);
    transition: transform .15s;
}

button[aria-expanded="false"] .chevron {
    transform: rotate(0deg);
    transition: transform .15s;
}

/* 10) Fallback for browsers without color-mix() */
@supports not (color-mix(in srgb, black, white)) {
    .btn-check:checked+.list-group-item {
        background-color: rgba(var(--olt360-accent-rgb), .12);
    }

    .submenu .list-group .list-group-item:hover {
        background-color: rgba(var(--olt360-accent-rgb), .06);
    }
}

/* 11 oct*/
/* ===========================
   Privacy Policy Consent Banner (light/dark ready)
   Drop-in CSS
   =========================== */

/* ---------- Base layout ---------- */
.ppc-banner {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 1050;
    display: none;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .25s ease, transform .25s ease;
    font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.ppc-banner.ppc-show {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.ppc-wrap {
    margin: 0 auto;
    max-width: 1100px;
    border-radius: 12px 12px 0 0;
    padding: 14px 16px;
    box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.2);
}

/* ---------- THEME VARIABLES (defaults = light) ---------- */
:root {
    --ppc-bg: #ffffff;
    --ppc-fg: #111827;
    --ppc-muted: #6b7280;
    --ppc-accent: #0d6efd;
    /* bootstrap primary */
    --ppc-btn-fg: #ffffff;
    --ppc-border: rgba(17, 24, 39, 0.25);
}

/* System dark mode */
@media (prefers-color-scheme: dark) {
    :root {
        --ppc-bg: #0f172a;
        /* slate-900 */
        --ppc-fg: #e2e8f0;
        /* slate-200 */
        --ppc-muted: #94a3b8;
        /* slate-400 */
        --ppc-accent: #60a5fa;
        /* blue-400 */
        --ppc-btn-fg: #0b1020;
        --ppc-border: rgba(226, 232, 240, 0.25);
    }
}

/* Bootstrap attribute dark mode (either on html or body) */
html[data-bs-theme="dark"],
body[data-bs-theme="dark"],
[data-bs-theme="dark"] :root {
    --ppc-bg: #0f172a;
    --ppc-fg: #e2e8f0;
    --ppc-muted: #94a3b8;
    --ppc-accent: #60a5fa;
    --ppc-btn-fg: #0b1020;
    --ppc-border: rgba(226, 232, 240, 0.25);
}

/* Your class-based dark modes */
body.dark-mode,
body.dark {
    --ppc-bg: #0f172a;
    --ppc-fg: #e2e8f0;
    --ppc-muted: #94a3b8;
    --ppc-accent: #60a5fa;
    --ppc-btn-fg: #0b1020;
    --ppc-border: rgba(226, 232, 240, 0.25);
}

/* ---------- Component uses variables ---------- */
.ppc-wrap {
    background: var(--ppc-bg);
    color: var(--ppc-fg);
}

.ppc-text {
    margin: 0 0 8px 0;
}

.ppc-text small {
    color: var(--ppc-muted);
}

.ppc-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.ppc-actions a {
    color: var(--ppc-accent);
    text-decoration: underline;
}

.ppc-btn {
    border: none;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--ppc-accent);
    color: var(--ppc-btn-fg);
    font-weight: 600;
}

.ppc-btn.secondary {
    background: transparent;
    /* Fallback border color + progressive enhance with color-mix */
    border: 1px solid var(--ppc-border);
    border: 1px solid color-mix(in srgb, var(--ppc-fg) 25%, transparent);
    color: var(--ppc-fg);
}

/* Optional: better touch spacing on small screens + safe-area */
@supports (padding: max(0px)) {
    .ppc-wrap {
        padding-bottom: max(14px, env(safe-area-inset-bottom));
    }
}

/* === Privacy Policy link color fix === */

/* Default links inside the privacy container */
.privacy-container a {
    color: var(--bs-link-color, #0d6efd);
    text-decoration: none;
    transition: color 0.15s ease;
}

/* Hover/focus for light mode */
[data-bs-theme="light"] .privacy-container a:hover,
[data-bs-theme="light"] .privacy-container a:focus {
    color: #0a58ca;
    /* Bootstrap's darker blue for light bg */
    text-decoration: underline;
}

/* Hover/focus for dark mode */
[data-bs-theme="dark"] .privacy-container a:hover,
[data-bs-theme="dark"] .privacy-container a:focus {
    color: #bcdcff;
    /* light blue on dark bg */
    text-decoration: underline;
}

/* Optional: list items with bullet symbol */
.privacy-container ul li {
    color: var(--bs-body-color);
}



#ppc-link:hover{
    color: black !important;
}

body.dark-mode #ppc-link:hover {
    color: rgb(255, 255, 255) !important;
}


/* =========================================
   Header Link Colors — FINAL VERSION
   ========================================= */
#mainHeader .header-link,
#mainHeader .header-title {
  transition: color 0.25s ease;
  text-decoration: none !important;
}

/* Light Mode */
html[data-bs-theme="light"] #mainHeader .header-link,
body[data-bs-theme="light"] #mainHeader .header-link,
:root[data-bs-theme="light"] #mainHeader .header-link {
  color: #0d6efd !important;                /* bright blue */
}

html[data-bs-theme="light"] #mainHeader .header-link:hover,
body[data-bs-theme="light"] #mainHeader .header-link:hover,
:root[data-bs-theme="light"] #mainHeader .header-link:hover,
html[data-bs-theme="light"] #mainHeader .header-link:focus,
body[data-bs-theme="light"] #mainHeader .header-link:focus,
:root[data-bs-theme="light"] #mainHeader .header-link:focus,
html[data-bs-theme="light"] #mainHeader .header-link:active,
body[data-bs-theme="light"] #mainHeader .header-link:active,
:root[data-bs-theme="light"] #mainHeader .header-link:active {
  color: #0a58ca !important;                /* darker blue on hover */
}

/* Dark Mode */
html[data-bs-theme="dark"] #mainHeader .header-link,
body[data-bs-theme="dark"] #mainHeader .header-link,
:root[data-bs-theme="dark"] #mainHeader .header-link {
  color: #ffffff !important;                /* white */
}

html[data-bs-theme="dark"] #mainHeader .header-link:hover,
body[data-bs-theme="dark"] #mainHeader .header-link:hover,
:root[data-bs-theme="dark"] #mainHeader .header-link:hover,
html[data-bs-theme="dark"] #mainHeader .header-link:focus,
body[data-bs-theme="dark"] #mainHeader .header-link:focus,
:root[data-bs-theme="dark"] #mainHeader .header-link:focus,
html[data-bs-theme="dark"] #mainHeader .header-link:active,
body[data-bs-theme="dark"] #mainHeader .header-link:active,
:root[data-bs-theme="dark"] #mainHeader .header-link:active {
  color: #8cc9ff !important;                /* soft blue hover */
}

/* Make sure header title stays visible */
[data-bs-theme="light"] #mainHeader .header-title { color: #111 !important; }
[data-bs-theme="dark"]  #mainHeader .header-title { color: #f5f5f5 !important; }

#mainHeader .header-link:hover{
  color: #0a58ca !important;                /* darker blue on hover */
}

.dark-mode #mainHeader .header-link:hover{
  color: #fff !important;                /* darker blue on hover */
}

.toggle-icon.me-2 {
    padding-right: .5rem !important;
    padding-left: .5rem !important;
}

/* VideoEarning color for light/dark mode */
.videoearning-p {
  font-weight: 600;
  color: #D48806; /* default for light mode */
}

/* Auto-adjust for dark mode */
@media (prefers-color-scheme: dark) {
  .videoearning-p {
    color: #FFC107; /* bright gold for dark background */
    text-shadow: 0 0 3px rgba(255, 193, 7, 0.7); /* subtle glow */
  }
}

/* CountryCount stays same */
.countrycount-p {
  color: #007bff;
}