/* ============================================
   HORRIBLEVIDEOS.COM - MODERN CSS OVERRIDE
   Keeps dark theme, modernizes layout & feel
   ============================================ */

:root {
  --bg-primary: #0d0d0d;
  --bg-secondary: #151515;
  --bg-card: #1a1a1a;
  --bg-hover: #222;
  --text-primary: #e8e8e8;
  --text-secondary: #999;
  --text-muted: #666;
  --accent: #e74c3c;
  --accent-hover: #c0392b;
  --accent-blue: #3498db;
  --border: #2a2a2a;
  --radius: 8px;
  --radius-lg: 12px;
  --shadow: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-hover: 0 8px 24px rgba(0,0,0,0.5);
  --transition: all 0.2s ease;
}

/* === Base Reset === */
body {
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  -webkit-font-smoothing: antialiased;
}

/* === Typography === */
h1 {
  font-size: 24px !important;
  font-weight: 700 !important;
  letter-spacing: -0.3px;
  margin-bottom: 16px !important;
  color: #fff !important;
}
h2 { font-size: 20px !important; font-weight: 600 !important; color: #fff !important; }
h3 { font-size: 17px !important; font-weight: 600 !important; color: #ddd !important; }

a { color: var(--text-primary) !important; text-decoration: none !important; transition: var(--transition); }
a:hover { color: var(--accent) !important; }

/* === Header === */
#header {
  background: var(--bg-secondary) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4) !important;
}

#header a#logo {
  filter: brightness(1.1);
}

/* === Navigation === */
.container {
  background: var(--bg-card) !important;
  border-bottom: 1px solid var(--border) !important;
}

ul#navigation {
  display: flex !important;
  gap: 0 !important;
  list-style: none !important;
}

ul#navigation li a {
  color: var(--text-secondary) !important;
  padding: 12px 18px !important;
  display: block !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border-bottom: 2px solid transparent !important;
  transition: var(--transition) !important;
}

ul#navigation li a:hover,
ul#navigation li.current a {
  color: #fff !important;
  border-bottom-color: var(--accent) !important;
  background: transparent !important;
}

/* === Main Content Area === */
#content {
  background: var(--bg-primary) !important;
}

.wrapper {
  max-width: 1400px !important;
}

#main {
  background: transparent !important;
}

/* === Toolbar / Sort Bar === */
ul.toolbar {
  background: var(--bg-card) !important;
  border-radius: var(--radius) !important;
  padding: 4px !important;
  margin-bottom: 16px !important;
  border: 1px solid var(--border) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 2px !important;
}

ul.toolbar li {
  list-style: none !important;
}

ul.toolbar li a {
  padding: 8px 16px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  color: var(--text-secondary) !important;
  display: block !important;
  transition: var(--transition) !important;
}

ul.toolbar li a:hover {
  background: var(--bg-hover) !important;
  color: #fff !important;
}

ul.toolbar li.active a {
  background: var(--accent) !important;
  color: #fff !important;
}

/* === Top Toolbar (Account Bar) === */
ul.toolbar.top {
  background: transparent !important;
  border: none !important;
}

ul.toolbar.top li a {
  color: var(--text-muted) !important;
  font-size: 12px !important;
}

ul.toolbar.top li a:hover {
  color: var(--accent) !important;
  background: transparent !important;
}

/* === Video Grid Cards === */
.col-item {
  background: var(--bg-card) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
  transition: var(--transition) !important;
  border: 1px solid var(--border) !important;
  margin-bottom: 12px !important;
  padding: 0 !important;
}

.col-item:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-hover) !important;
  border-color: #333 !important;
}

.col-item a {
  display: block !important;
}

.col-item .image {
  position: relative !important;
  overflow: hidden !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}

.col-item .image img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  transition: transform 0.3s ease !important;
}

.col-item:hover .image img {
  transform: scale(1.05) !important;
}

.col-item .time {
  position: absolute !important;
  bottom: 8px !important;
  right: 8px !important;
  background: rgba(0,0,0,0.85) !important;
  color: #fff !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  backdrop-filter: blur(4px) !important;
}

.col-item .title {
  display: block !important;
  padding: 10px 12px 6px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text-primary) !important;
  line-height: 1.4 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.col-item .col-left,
.col-item .col-right {
  padding: 0 12px 10px !important;
}

.col-item .col-left span {
  font-size: 12px !important;
  color: var(--text-muted) !important;
  margin-right: 12px !important;
}

.col-item .col-left .rating {
  color: #27ae60 !important;
}

.col-item .col-right a {
  color: var(--text-muted) !important;
  font-size: 12px !important;
}

.col-item .col-right a:hover {
  color: var(--accent) !important;
}

/* === Search Bar === */
#header form {
  position: relative !important;
}

#header form input[name="q"] {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  color: #fff !important;
  padding: 10px 16px !important;
  font-size: 14px !important;
  transition: var(--transition) !important;
  width: 100% !important;
}

#header form input[name="q"]:focus {
  border-color: var(--accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(231,76,60,0.2) !important;
}

#header form button {
  background: var(--accent) !important;
  border: none !important;
  border-radius: 0 var(--radius) var(--radius) 0 !important;
  color: #fff !important;
  cursor: pointer !important;
  transition: var(--transition) !important;
}

#header form button:hover {
  background: var(--accent-hover) !important;
}

/* === Buttons === */
a.button, .button {
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius) !important;
  padding: 10px 20px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: var(--transition) !important;
  text-transform: none !important;
  box-shadow: none !important;
  background-image: none !important;
}

a.button:hover, .button:hover {
  background: var(--accent-hover) !important;
  transform: translateY(-1px) !important;
}

/* === Sidebar === */
#sidebar {
  background: var(--bg-card) !important;
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border) !important;
  overflow: hidden !important;
}

#sidebar h2, #sidebar a.menu {
  background: var(--bg-secondary) !important;
  background-image: none !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 12px 16px !important;
  border: none !important;
}

#sidebar ul {
  background: var(--bg-card) !important;
}

#sidebar ul li {
  border-bottom: 1px solid var(--border) !important;
}

#sidebar ul li a {
  color: var(--text-secondary) !important;
  padding: 10px 16px !important;
  font-size: 13px !important;
  transition: var(--transition) !important;
}

#sidebar ul li a:hover {
  background: var(--bg-hover) !important;
  color: #fff !important;
  padding-left: 20px !important;
}

/* === Video Player Page === */
#player {
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
  margin-bottom: 16px !important;
  box-shadow: var(--shadow) !important;
}

/* === Tabs === */
ul.tabs-list {
  display: flex !important;
  gap: 4px !important;
  background: var(--bg-card) !important;
  border-radius: var(--radius) !important;
  padding: 4px !important;
  border: 1px solid var(--border) !important;
  margin-bottom: 16px !important;
}

ul.tabs-list li a {
  padding: 8px 16px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  color: var(--text-secondary) !important;
  transition: var(--transition) !important;
}

ul.tabs-list li.active a {
  background: var(--accent) !important;
  color: #fff !important;
}

/* === Stats List (Video Page) === */
ul.stats-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}

ul.stats-list li {
  font-size: 13px !important;
  color: var(--text-secondary) !important;
}

ul.stats-list li i {
  margin-right: 4px !important;
  color: var(--text-muted) !important;
}

ul.stats-list li a {
  color: var(--accent-blue) !important;
  font-size: 12px !important;
}

/* === Tags on video page === */
ul.stats-list li a[href*="search"] {
  display: inline-block !important;
  background: var(--bg-hover) !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border) !important;
  margin: 2px !important;
  transition: var(--transition) !important;
}

ul.stats-list li a[href*="search"]:hover {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
}

/* === Comments === */
.comment {
  background: var(--bg-card) !important;
  border-radius: var(--radius) !important;
  padding: 16px !important;
  margin-bottom: 8px !important;
  border: 1px solid var(--border) !important;
}

/* === Pagination === */
.pagination {
  text-align: center !important;
  margin: 20px 0 !important;
}

.pagination .pages a, .pagination .pages span {
  display: inline-block !important;
  padding: 8px 14px !important;
  margin: 2px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  background: var(--bg-card) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border) !important;
  transition: var(--transition) !important;
}

.pagination .pages a:hover {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
}

.pagination .pages span.current,
.pagination .pages .active {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
}

.pagination .border {
  display: none !important;
}

/* === Footer === */
#footer {
  background: var(--bg-secondary) !important;
  border-top: 1px solid var(--border) !important;
}

#footer .toolbar {
  background: var(--bg-card) !important;
  border: none !important;
  border-radius: 0 !important;
}

#footer .toolbar ul {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 8px !important;
}

#footer .toolbar ul li a {
  color: var(--text-muted) !important;
  font-size: 13px !important;
}

#footer .toolbar ul li a:hover {
  color: var(--accent) !important;
}

#copyright {
  background: var(--bg-primary) !important;
  color: var(--text-muted) !important;
  font-size: 13px !important;
  padding: 20px 0 !important;
  text-align: center !important;
}

/* === Tags Page === */
.col-tags a {
  display: inline-block !important;
  background: var(--bg-card) !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  font-size: 13px !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border) !important;
  margin: 3px !important;
  transition: var(--transition) !important;
}

.col-tags a:hover {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
  transform: translateY(-2px) !important;
}

/* === Alert Messages === */
.alert {
  border-radius: var(--radius) !important;
  padding: 12px 16px !important;
}

/* === Upload Button === */
a.button[href*="upload"] {
  background: #27ae60 !important;
}

a.button[href*="upload"]:hover {
  background: #219653 !important;
}

/* === Rating Bar === */
.rating-bar {
  border-radius: var(--radius) !important;
  overflow: hidden !important;
}

/* === Scrollbar === */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #555; }

/* === Mobile Responsive Tweaks === */
@media (max-width: 860px) {
  h1 { font-size: 20px !important; }

  .col-item {
    width: 48% !important;
    margin: 1% !important;
  }

  ul#navigation {
    flex-wrap: wrap !important;
  }

  ul#navigation li a {
    padding: 10px 12px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 640px) {
  .col-item {
    width: 100% !important;
    margin: 0 0 12px 0 !important;
  }

  ul.toolbar {
    flex-direction: column !important;
  }

  h1 { font-size: 18px !important; }
}

/* === Selection Color === */
::selection {
  background: var(--accent);
  color: #fff;
}

/* === Smooth Scroll === */
html {
  scroll-behavior: smooth;
}