/* ========= THEME ========= */
:root{
  --bg:#ffffff;
  --ink:#111111;
  --muted:#6b7280;
  --chip:#eef0f2;
  --chip-text:#111;
  --brand:#ff2b7a;
  --shadow:0 2px 10px rgba(0,0,0,.06);
  --radius:16px;
  --sidebar-w:258px;
  --nav-h:112px; /* will be updated by JS at runtime */
}

html[data-theme="dark"]{
  --bg:#0f1112;
  --ink:#f2f3f4;
  --muted:#a3a7ad;
  --chip:#1c1f23;
  --chip-text:#f2f3f4;
  --shadow:0 2px 14px rgba(0,0,0,.45);
  background:#0f1112;
  color:var(--ink);
}

*{ box-sizing:border-box; }
body{
  font-family:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--ink);
}

.brand-name {
  color: var(--ink);
  transition: color 0.3s ease;
}



/* Video title */
.video-title {
  color: var(--ink);       /* light in light mode, white in dark mode */
  transition: color 0.3s ease;
}

/* Meta info: channel name, views, date */
.meta {
  color: var(--ink);       /* make all white in dark mode */
  transition: color 0.3s ease;
}

/* Optional: avatar border for visibility in dark mode */
.avatar {
  border: 1px solid rgba(255,255,255,0.2);
}


/* ==================== comment section dark mode working code  ==================== */

.comment-input {
  background-color: var(--chip);
  color: var(--ink);
  border: 0px solid rgba(255,255,255,0.2);
  border-radius: 15px;
}

.comment-input::placeholder {
  color: var(--muted); /* placeholder color adjusts in light/dark mode */
  opacity: 1; /* ensures full opacity in all browsers */
}

/* Optional: dark mode fallback if you want a stronger placeholder contrast */
html[data-theme="dark"] .comment-input::placeholder {
  color: var(--muted);
}


/* ==================== like, dislike,share and dowload button dark mode  ==================== */
.btn-custom {
  background-color: var(--chip);      /* light in light mode, dark in dark mode */
  color: var(--ink);
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: var(--radius);
  padding: 5px 14px;
  font-size: 0.875rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
}

.btn-custom i {
  font-size: 1rem;
}

/* Hover effect */
.btn-custom:hover {
  background-color: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

.btn-custom:hover i {
  color: #fff;
}

/* Dark mode adjustments */
html[data-theme="dark"] .btn-custom {
  background-color: var(--chip);          /* dark gray background */
  color: var(--ink);                       /* white-ish text */
  border: 1px solid rgba(255,255,255,0.2);
}

/* Optional: dark mode hover uses same brand color */
html[data-theme="dark"] .btn-custom:hover {
  background-color: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

html[data-theme="dark"] .btn-custom:hover i {
  color: #fff;
}


/* ==================== Channel name and video count text  dark mode  ==================== */

.channel-name-link {
  color: var(--ink);
  transition: color 0.3s ease;
}

.channel-videos-link {
  color: var(--muted);
  transition: color 0.3s ease;
}

/* Optional: hover effect */

.channel-name-link:hover,
.channel-videos-link:hover {
  color: var(--brand);
}


/* ==================== sidebar, mobile search, theme toggle dark mode  ==================== */


#sidebarToggle,
#mobileSearchToggle,
#sidebarToggleMobile,
#themeToggle {
  color: var(--ink) !important;   /* light mode: black, dark mode: white */
  transition: color 0.3s ease;
  cursor: pointer;
}


/* ====================  Search input placeholder  ==================== */
.search-input::placeholder {
  color: var(--muted);
  opacity: 1; /* ensures full opacity */
  transition: color 0.3s ease;
}

/* Dark mode placeholder */
html[data-theme="dark"] .search-input::placeholder {
  color: var(--muted); /* lighter gray for dark mode */
}


/* ==================== Pagination dark and light mode  ==================== */

/* Base pagination styling */
.pagination .page-link {
    color: var(--muted); /* Default text color */
    background-color: var(--bg); /* Default background */
    border: 1px solid var(--muted); /* Border color */
    transition: all 0.3s ease;
}

/* Hover effect */
.pagination .page-link:hover {
    color: var(--brand); /* Highlight color */
    background-color: var(--card-bg); /* Slightly different bg */
}

/* Active page */
.pagination .page-item.active .page-link {
    color: var(--card-bg);
    background-color: var(--muted);
    border-color: var(--muted);
}

/* Disabled page */
.pagination .page-item.disabled .page-link {
    color: var(--muted);
    pointer-events: none;
    background-color: var(--bg);
    border-color: var(--muted);
}




/* ==================== Actress / Model link color and hover effect dark mode  ==================== */


/*

.model-link {
  color: var(--ink);
  transition: color 0.3s ease;
}

.model-link:hover {
  color: var(--brand);
}

*/


/* ========= NAVBAR ========= */
.navbar{ border-bottom:none; background:var(--bg)!important; }
.brand .logo-dot{
  width:30px;height:30px;border-radius:50%;
  background:var(--brand); color:#fff; font-size:18px;
}
.search-wrap{ max-width:640px; width:100%; }
.search-input{
  border:1px solid #e5e7eb; border-right:0; border-radius:999px 0 0 999px;
  padding-left:18px; height:38px; background:var(--bg); color:var(--ink);
}
.search-input:focus{ box-shadow:none; border-color:#d1d5db; }
.search-btn{
  border:1px solid #e5e7eb; border-left:0; background:var(--bg); height:38px;
  border-radius:0 999px 999px 0; color:var(--ink);
}



/* Chips */

/* 
.chips{ background:var(--bg); }
.scroller-x{ overflow-x:auto; white-space:nowrap; }
.scroller-x::-webkit-scrollbar{ display:none; }
.chip{
  display:inline-block; margin:20px 6px 0 0; padding:8px 14px;
  background:var(--chip); color:var(--chip-text); border:0; border-radius:999px;
  font-weight:500; font-size:14px;
}

*/



/*========= Chips style start ========= */

.chips-container {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  overflow: hidden;
}

/* Chips background using theme variable */
.chips {
  background: var(--bg);
  display: flex;
  gap: 1px;
  white-space: nowrap;
  overflow-x: auto;
  scroll-behavior: smooth;
  flex: 1;
  padding: 2px 3px ;
}

.chips::-webkit-scrollbar { display: none; }

/* Chip style using theme variables */
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 4px 4px 0 0;
  padding: 8px 14px;
  background: var(--chip);
  color: var(--chip-text);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
}



/* Arrows */
.arrow-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.7);
  border: none;
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: background 0.3s, opacity 0.3s;
  opacity: 0.8;
}
.arrow-btn:hover { background: rgba(0,0,0,0.9); opacity: 1; }
.arrow-btn.left { left: 1px; margin: 3px 1px; }
.arrow-btn.right { right: 1px; margin: 3px 1px; }
.arrow-icon { font-size: 18px; line-height: 1; }






/* ✅ Mobile adjustments (max-width: 767px) */

/*
@media (max-width: 767px) {
  .chips {
    padding: 2px 3px 7px;
  }
  
  .arrow-btn {
    top: 43%;
  }
}

*/



/* Mobile */
/*

@media (max-width: 991px) {
  .chips { padding: 12px 3px; }
  .arrow-btn { width: 36px; height: 36px; }
}

*/


/*========= Chips style End ========= */



/* ========= SIDEBAR ========= */
.sidebar{
  position:fixed; left:0; width:var(--sidebar-w); background:var(--bg); color: var(--ink);
  height:calc(100vh - var(--nav-h)); top:var(--nav-h);
  /*overflow:auto; */
  overflow-y: hidden; /* hide scroll by default */
  z-index:1040;
  /*transition: all 0.3s ease;*/
  /*box-shadow:var(--shadow);*/
}




/*========================================== Hover Scroll Effect on Sidebar CSS======================================================*/


/* Show scroll on hover (desktop) */
@media (min-width: 992px){
  .sidebar:hover {
    overflow-y: auto;
  }
}

/* Mobile sidebar: always allow scroll when shown */
@media (max-width: 991.98px){
  .sidebar {
    top: 0;
    height: 100vh;
    overflow-y: auto; /* allow scrolling on mobile overlay */
    transform: translateX(-100%);
    transition: transform .25s ease, box-shadow .25s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
  }

  .sidebar.show {
    transform: none;
  }
}



/* Optional: smooth scrolling & custom scrollbar */
.sidebar::-webkit-scrollbar {
  width: 6px;
}

.sidebar::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.3);
  border-radius: 3px;
}

.sidebar::-webkit-scrollbar-track {
  background: transparent;
}

/* Dark mode scrollbar adjustments */
html[data-theme="dark"] .sidebar::-webkit-scrollbar-thumb {
  background-color: rgba(255,255,255,0.2);
}

html[data-theme="dark"] .sidebar::-webkit-scrollbar-track {
  background: transparent;
}


/*========================================== Hover Scroll Effect CSS END======================================================*/




/*hide border and shadow*/
.sidebar, .navbar, .content, main {
  border: none !important;
  box-shadow: none !important;
}


.sidebar .side-link{
  display:block; padding:12px 20px; color:var(--ink);
  text-decoration:none; font-weight:500; border-radius:10px; margin:2px 8px;
}
.sidebar .side-link:hover{ background:rgba(125,125,125,.08); }
.sidebar hr{ border-color:#e5e7eb }
.side-sec{ padding:0 4px; }

/* Overlay for mobile */
.backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.45); display:none; z-index:1035;
}

/* ========= LAYOUT ========= */
.app-wrap{ display:flex; }
.main-content{
  width:100%; padding:3px; margin-left:var(--sidebar-w); margin-top:calc(var(--nav-h) - 84px);
  transition:margin-left .25s ease, margin-top .1s ease;
}

/* Grid */
.video-grid{ display:grid; gap:10px; padding:0; }
.sidebar-open .video-grid{ grid-template-columns:repeat(4,1fr); }  /* desktop default */
.sidebar-closed .video-grid{ grid-template-columns:repeat(5,1fr); }/* desktop hidden */

/* Cards */
.vcard{ border-radius:var(--radius); background:var(--bg); box-shadow:var(--shadow); }



/* Thumbnail wrapper becomes the positioning context */
.thumb{ position:relative; }

/* Bootstrap .ratio will stretch its direct children; keep img full-cover */
.thumb .ratio > img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:12px;
  display:block;
}

/* Duration overlay – pinned to bottom-right of .thumb */
.duration{
  position:absolute;
  right:10px;
  bottom:10px;
  z-index:2;
  background:rgba(0,0,0,0.6);
  color:#fff;
  border-radius:6px;
  padding:3px 8px;
  font-weight:700;
  font-size:13px;
  line-height:1.2;
  width:auto;           /* override any ratio child rules */
  height:auto;
  top:auto;             /* important to cancel .ratio > * { top:0 } */
  left:auto;            /* important to cancel .ratio > * { left:0 } */
}

.avatar{ width:36px; height:36px; object-fit:cover; }
.meta{ color:var(--muted); }

/* Bottom tabbar (mobile) */
.bottom-nav{
  position:fixed; left:0; right:0; bottom:0;
  background:linear-gradient(180deg,#0f1011,#191b1c);
  padding:8px 12px; z-index:1030; display:flex; justify-content:space-around;
  border-top-left-radius:12px; border-top-right-radius:12px;
}
.bottom-nav .item{ color:#e5e7eb; text-align:center; text-decoration:none; font-size:12px; }
.bottom-nav .item i{ font-size:20px; display:block; }
.bottom-nav .item.active{ color:#fff; }

/* ========= DESKTOP BEHAVIOR ========= */
@media (min-width: 992px){
  body.sidebar-closed .main-content{ margin-left:0; padding: 5px 0px 70px 0px }
  body.sidebar-closed .sidebar{ transform:translateX(-100%); }
  .backdrop{ display:none !important; }
}


/* ========= MOBILE (overlay) ========= */
@media (max-width: 991.98px){
  .sidebar{
    top:0; height:100vh; transform:translateX(-100%);
    transition:transform .25s ease, box-shadow .25s ease;
    box-shadow:none;
  }
  .sidebar.show{ transform:none; box-shadow:0 10px 30px rgba(0,0,0,.25); }

  .main-content{ margin-left:0; margin-top:calc(var(--nav-h) - 110px); margin: 1px 0 30px 0;}
  .video-grid{ grid-template-columns:1fr !important; }

  .backdrop.show{ display:block; }
  html.no-scroll, body.no-scroll{ overflow:hidden; height:100%; }
  #sidebarClose{ display:block; }
}