/*=============================================
  News Website Theme - Modern Override Styles
  Overrides the dark entertainment theme with a 
  clean, professional news website design.
=============================================*/

/* ===== CSS Variables ===== */
:root {
  /* Primary Colors */
  --news-red: #cc0000;
  --news-red-hover: #a30000;
  --news-red-on-dark: #ff8585; /* lighter red, passes contrast on dark cards (#1f1e24) */
  --news-red-light: #ffebee;
  --news-blue: #1a73e8;
  --news-blue-hover: #1557b0;

  /* Neutral Backgrounds */
  --bg-white: #ffffff;
  --bg-page: #f4f5f7;
  --bg-card: #ffffff;
  --bg-header: #0d1117;
  --bg-footer: #0d1117;
  --bg-muted: #f0f1f3;
  --bg-hover: #f8f9fa;

  /* Text Colors */
  --text-heading: #111827;
  --text-body: #374151;
  --text-muted: #6b7280;
  --text-light: #9ca3af;
  --text-inverse: #ffffff;
  --text-inverse-muted: #d1d5db;

  /* Borders & Dividers */
  --border-color: #e5e7eb;
  --border-light: #f3f4f6;
  --border-card: #e8eaed;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-card-hover: 0 10px 25px rgba(0, 0, 0, 0.1);

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Transitions */
  --transition: all 0.25s ease;
  --transition-slow: all 0.35s ease;

  /* Category Colors */
  --cat-politics: #cc0000;
  --cat-tech: #1a73e8;
  --cat-business: #0d9488;
  --cat-sports: #ea580c;
  --cat-health: #16a34a;
  --cat-science: #7c3aed;
  --cat-entertainment: #db2777;
  --cat-world: #0891b2;
}

/* ===== Global Reset & Base ===== */
body {
  font-family: 'Inter', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-body);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  color: var(--text-heading);
  line-height: 1.3;
}

h1 { font-size: 2.25rem; letter-spacing: -0.5px; }
h2 { font-size: 1.75rem; letter-spacing: -0.3px; }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.15rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.5px; }

p {
  color: var(--text-body);
  line-height: 1.75;
}

a {
  color: var(--news-blue);
  transition: var(--transition);
}
a:hover {
  color: var(--news-red);
  text-decoration: none;
}

::selection {
  background: var(--news-red);
  color: #fff;
}

/* ===== Scrollbar ===== */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-page); }
::-webkit-scrollbar-thumb { background: var(--text-light); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ===== Scroll Top Button ===== */
.scroll-top {
  background: var(--news-red);
  color: #fff;
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  box-shadow: var(--shadow-lg);
  transition: var(--transition);
}
.scroll-top:hover {
  background: var(--news-red-hover);
  transform: translateY(-2px);
}

/* ===== Preloader ===== */
#preloader {
  background: var(--bg-page);
}
#loading-center { color: var(--news-red); }

/* ============================================
   TOP UTILITY BAR
   ============================================ */
.top-bar {
  background: #06090f;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  line-height: 1;
}
.top-bar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 32px;
}
.top-bar-left {
  display: flex;
  align-items: center;
  color: var(--text-light);
  gap: 16px;
}
.top-bar-date {
  color: rgba(255,255,255,0.45);
  font-size: 0.72rem;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.top-bar-date i {
  font-size: 0.65rem;
}
.top-bar-right {
  display: flex;
  align-items: center;
  gap: 0;
}
.top-bar-link {
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  padding: 6px 12px;
  transition: all 0.2s ease;
  font-weight: 500;
  font-size: 0.74rem;
  border-radius: 3px;
  white-space: nowrap;
}
.top-bar-link:hover {
  color: #fff;
  background: rgba(255,255,255,0.08);
}
.top-bar-link + .top-bar-link {
  border-left: 1px solid rgba(255,255,255,0.08);
}
.top-bar-search {
  font-size: 0.75rem;
  padding: 6px 10px;
}
.top-bar-search i {
  font-size: 0.78rem;
}

/* ============================================
   HEADER & NAVIGATION
   ============================================ */

/* Top bar - make it a breaking news ticker feel */
.menu-area.transparent-header {
  background: var(--bg-header) !important;
  border-bottom: 3px solid var(--news-red);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
/* Sticky: applied to the outer <header> (direct child of <body>) so it can
   stick for the full page height. Putting sticky on the inner #sticky-header
   div fails because its parent <header> has the same height as the div,
   leaving a 0px sticky range. */
header {
  position: sticky !important;
  top: 0;
  z-index: 999;
}

.logo a {
  color: var(--text-inverse) !important;
  font-weight: 800;
  font-size: 26px !important;
  letter-spacing: -0.5px;
  text-transform: uppercase;
}
.logo a:hover {
  color: var(--news-red) !important;
}

/* Navigation links */
.main-menu .navigation > li > a {
  color: var(--text-inverse-muted) !important;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-transform: none !important;
  letter-spacing: 0.3px;
  padding: 30px 18px !important;
  transition: var(--transition);
}
.main-menu .navigation > li > a:hover,
.main-menu .navigation > li.active > a {
  color: var(--news-red) !important;
}
.main-menu .navigation > li.active > a::after {
  background: var(--news-red) !important;
}

/* Sub-menu */
.main-menu .navigation > li > .submenu {
  background: var(--bg-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-color);
  padding: 8px 0;
}
.main-menu .navigation > li > .submenu > li > a {
  color: var(--text-heading) !important;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 20px;
  transition: var(--transition);
}
.main-menu .navigation > li > .submenu > li > a:hover {
  color: var(--news-red) !important;
  background: var(--news-red-light);
}

/* Search icon */
.header-search a {
  color: var(--text-inverse-muted) !important;
  font-size: 16px;
  transition: var(--transition);
}
.header-search a:hover {
  color: var(--news-red) !important;
}

/* ===== User Auth Area ===== */
.header-action .qk-user {
  margin-left: 18px !important;
}
.qk-signin {
  background: var(--news-red) !important;
  color: #fff !important;
  border-radius: 6px !important;
  padding: 0.5rem 1rem !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px;
  transition: all 0.2s ease;
}
.qk-signin:hover {
  background: var(--news-red-hover) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(204,0,0,0.3);
}
.user-dropdown-toggle {
  color: rgba(255,255,255,0.85) !important;
  background: rgba(255,255,255,0.08) !important;
  border-radius: 8px !important;
  padding: 0.45rem 0.75rem !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  text-decoration: none !important;
  transition: all 0.2s ease;
}
.user-dropdown-toggle:hover {
  background: rgba(255,255,255,0.14) !important;
  color: #fff !important;
}
.user-dropdown-toggle .bi {
  color: rgba(255,255,255,0.5) !important;
}
.user-dropdown-toggle:hover .bi {
  color: var(--news-red) !important;
}
.user-dropdown-menu {
  background: #fff !important;
  color: var(--text-heading) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.15) !important;
  padding: 6px !important;
  min-width: 180px !important;
  margin-top: 8px !important;
}
.user-dropdown-item {
  color: var(--text-heading) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  border-radius: 6px !important;
  padding: 0.55rem 0.7rem !important;
  text-decoration: none !important;
  transition: all 0.15s ease;
}
.user-dropdown-item:hover {
  background: #f3f4f6 !important;
  color: var(--news-red) !important;
}
.user-dropdown-item .bi {
  color: var(--text-muted) !important;
}
.user-dropdown-item:hover .bi {
  color: var(--news-red) !important;
}
.user-dropdown-divider {
  border-color: #f0f0f0 !important;
  margin: 4px 8px !important;
}

/* Sticky header */
.sticky-menu {
  background: var(--bg-header) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
}

/* Mobile menu */
.mobile-menu {
  background: var(--bg-header);
}
.mobile-menu .menu-box {
  background: var(--bg-header);
}
.mobile-menu .navigation li a {
  color: var(--text-inverse-muted) !important;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
}
.mobile-menu .navigation li a:hover {
  color: var(--news-red) !important;
}
.mobile-nav-toggler {
  color: var(--text-inverse) !important;
}
.mobile-menu .close-btn {
  color: var(--text-inverse) !important;
}

/* Search Modal */
#search-modal .modal-content {
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  border: none;
  box-shadow: var(--shadow-lg);
}
#search-modal input {
  color: var(--text-heading);
  background: var(--bg-page);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  padding: 14px 20px;
}
#search-modal input:focus {
  border-color: var(--news-red);
  box-shadow: 0 0 0 3px var(--news-red-light);
}
#search-modal button {
  background: var(--news-red);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  padding: 10px 24px;
  font-weight: 600;
  transition: var(--transition);
}
#search-modal button:hover {
  background: var(--news-red-hover);
}

/* ============================================
   BANNER / HERO AREA
   ============================================ */
.banner-area {
  position: relative;
  min-height: 880px;
  display: flex;
  align-items: center;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.banner-bg {
  padding: 0 !important;
}
.banner-area::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0.15) 100%);
  z-index: 1;
}
.banner-area .container { position: relative; z-index: 2; }

.banner-content {
  padding: 40px 0;
}

.banner-content .sub-title {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 2.5rem !important;
  line-height: 1.2;
  color: #ffffff !important;
  margin-bottom: 16px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.banner-content .title {
  font-size: 1.05rem;
  font-weight: 400;
  color: rgba(255,255,255,0.85) !important;
  line-height: 1.6;
  margin-bottom: 20px;
}

.banner-meta { margin-bottom: 24px; }
.banner-meta ul { display: flex; gap: 20px; list-style: none; padding: 0; margin: 0; }
.banner-meta .category a {
  background: var(--news-red);
  color: #fff;
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 5px 14px;
  border-radius: 20px;
  transition: var(--transition);
}
.banner-meta .category a:hover {
  background: #fff;
  color: var(--news-red);
}
.banner-meta .release-time {
  color: rgba(255,255,255,0.7);
  font-size: 0.85rem;
}

.banner-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--news-red) !important;
  color: #fff !important;
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: none !important;
  letter-spacing: 0.3px;
  border: none !important;
  border-radius: var(--radius-md) !important;
  padding: 14px 32px !important;
  max-width: none !important;
  transition: var(--transition);
}
.banner-btn:hover {
  background: var(--news-red-hover) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(204,0,0,0.35);
}
.banner-btn i {
  font-size: 0.8rem;
}

/* ============================================
   SECTION TITLES
   ============================================ */
.section-title .title {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 1.75rem !important;
  color: var(--text-heading) !important;
  position: relative;
  padding-bottom: 16px;
  margin-bottom: 8px;
}
.section-title .title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 3px;
  background: var(--news-red);
  border-radius: 2px;
}
.section-title.text-center .title::after {
  left: 50%;
  transform: translateX(-50%);
}

.section-title .sub-title {
  color: var(--news-red) !important;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 0.8rem !important;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 8px;
}

.section-title.title-style-two .sub-title {
  color: var(--news-red) !important;
  font-size: 0.85rem !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}
.section-title.title-style-two .title {
  font-size: 2rem !important;
}

/* Section title with "View More" link on the right */
.section-title.title-more {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: nowrap;
}
.section-title.title-more .title {
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: 0;
}
/* 标题下划线靠左显示（覆盖 .text-center 的居中规则） */
.section-title.title-more .title::after {
  left: 0 !important;
  transform: none !important;
}
.section-title.title-more .view-more-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px; /* 与标题下划线(16px padding)底对齐 */
  padding: 0 0 4px;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
  color: var(--text-muted);
  border: none;
  border-bottom: 1px solid transparent;
  background: none;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.section-title.title-more .view-more-btn i {
  font-size: 0.8rem;
  transition: transform 0.3s ease;
}
.section-title.title-more .view-more-btn:hover {
  color: var(--news-red);
  border-bottom-color: var(--news-red);
}
.section-title.title-more .view-more-btn:hover i {
  transform: translateX(4px);
}
/* 小屏适配：字号缩小，仍保持左右布局 */
@media (max-width: 575px) {
  .section-title.title-more .view-more-btn {
    font-size: 0.78rem;
    gap: 4px;
  }
}

/* ============================================
   SECTION BACKGROUNDS - Convert dark to light
   ============================================ */
/* Remove dark background images and data-background tricks */
.ucm-area,
.services-area,
.top-rated-movie,
.tr-movie-bg {
  background: var(--bg-white) !important;
}
.ucm-area .ucm-bg-shape { display: none !important; }
/* Remove the dark overlay from style.css .ucm-bg::before, otherwise the
   section renders near-black and dark titles become invisible */
.ucm-bg::before {
  content: none !important;
}

/* Alternate section background for visual rhythm */
.top-rated-movie:nth-of-type(odd),
.tr-movie-bg:nth-of-type(odd) {
  background: var(--bg-page) !important;
}

.ucm-area {
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  padding: 10px 0 10px !important;
}
.services-area {
  padding: 10px 0 !important;
}
.top-rated-movie,
.tr-movie-bg {
  padding: 10px 0 10px !important;
}

/* ============================================
   CARDS - Movie Items / Blog Posts
   ============================================ */

/* Standard card */
.movie-item,
.blog-post-item {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border: 1px solid var(--border-light);
}
.movie-item:hover,
.blog-post-item:hover {
  box-shadow: 0 12px 32px rgba(0,0,0,0.12), 0 4px 10px rgba(0,0,0,0.06);
  transform: translateY(-6px);
  border-color: rgba(204,0,0,0.18);
}

.movie-poster {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  margin-bottom: 0;
}

/* Image overlay on hover */
.movie-poster::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(204,0,0,0.15) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
  pointer-events: none;
}
.movie-item:hover .movie-poster::after {
  opacity: 1;
}

.movie-poster img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.movie-item:hover .movie-poster img {
  transform: scale(1.08);
}

.movie-content {
  padding: 20px;
  position: relative;
}

/* Red accent line at top of content */
.movie-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 3px;
  background: var(--news-red);
  border-radius: 0 0 3px 3px;
  transform: scaleX(0.3);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.movie-item:hover .movie-content::before {
  transform: scaleX(1);
}

.movie-content .top {
  margin-bottom: 12px;
  padding-top: 4px;
}

.movie-content .title {
  font-family: 'Inter', sans-serif;
  font-size: 1.05rem !important;
  font-weight: 700;
  color: var(--text-heading) !important;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.movie-content .title a {
  color: var(--text-heading) !important;
  transition: color 0.25s ease;
  background: linear-gradient(90deg, var(--text-heading), var(--text-heading)) no-repeat left bottom;
  background-size: 0 1.5px;
  padding-bottom: 1px;
  text-decoration: none;
}
.movie-content .title a:hover {
  color: var(--news-red) !important;
  background-size: 100% 1.5px;
  background-image: linear-gradient(90deg, var(--news-red), var(--news-red));
}

.movie-content .bottom ul {
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  padding: 0;
  margin: 0;
}
.movie-content .bottom ul li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.movie-content .duration {
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 500;
}

.movie-content .rating {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 500;
  background: rgba(204,0,0,0.05);
  padding: 3px 10px;
  border-radius: 20px;
  transition: background 0.25s ease;
}
.movie-item:hover .movie-content .rating {
  background: rgba(204,0,0,0.1);
}
.movie-content .rating i {
  color: var(--news-red);
  font-size: 0.75rem;
}

.movie-content .date {
  color: var(--news-red);
  font-size: 0.8rem;
  font-weight: 600;
}

.movie-content .quality {
  background: var(--news-red);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 12px;
  border: none !important;
  letter-spacing: 0.3px;
}

/* Card meta footer (views / shares / clicks / date) */
.movie-meta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed var(--border-light);
  font-size: 0.76rem;
  color: var(--text-muted);
}
.movie-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.movie-meta-row.meta-top {
  justify-content: space-between;
}
.movie-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  background: var(--bg-page, #f5f6f8);
  border: 1px solid var(--border-light);
  transition: all 0.25s ease;
}
.movie-meta span:hover {
  background: var(--pf-primary-light, #fff5f5);
  border-color: rgba(204,0,0,0.25);
  color: var(--news-red);
  transform: translateY(-1px);
}
.movie-meta i {
  color: var(--news-red);
  font-size: 0.72rem;
}
.movie-meta .meta-author {
  color: var(--news-red);
  background: var(--pf-primary-light, #fff5f5);
  border-color: rgba(204,0,0,0.18);
}
.movie-meta .meta-author i {
  font-size: 0.72rem;
}
.movie-meta .meta-date {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-weight: 500;
  padding: 0;
}
.movie-meta .meta-date:hover {
  background: transparent;
  border: none;
  color: var(--text-muted);
  transform: none;
}

/* Movie Item Two (alternate style) */
.movie-item-two {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  padding: 20px 20px 30px;
  text-align: center;
  transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border: 1px solid var(--border-light);
}
.movie-item-two:hover {
  box-shadow: 0 12px 32px rgba(0,0,0,0.12), 0 4px 10px rgba(0,0,0,0.06);
  transform: translateY(-6px);
  border-color: rgba(204,0,0,0.18);
}

/* Movie Item Three (category overlay cards) */
.movie-item-three {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  border: 1px solid var(--border-light);
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.movie-item-three:hover {
  box-shadow: 0 12px 32px rgba(0,0,0,0.12);
  transform: translateY(-5px);
  border-color: rgba(204,0,0,0.18);
}
.movie-item-three .movie-poster::before {
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.65) 100%);
  border-radius: 0;
}
.movie-item-three .movie-poster img {
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.movie-item-three:hover .movie-poster img {
  transform: scale(1.08);
}
.movie-item-three .overlay-btn .btn {
  background: var(--news-red);
  color: #fff;
  border-radius: 6px;
  font-weight: 600;
  transition: all 0.25s ease;
}
.movie-item-three .overlay-btn .btn:hover {
  background: var(--news-red-hover);
  box-shadow: 0 4px 15px rgba(204,0,0,0.35);
}

/* Blog post items */
.blog-post-item {
  padding: 30px;
  border: 1px solid var(--border-color);
  transition: border-color 0.35s ease;
}
.blog-post-item:hover {
  border-color: rgba(204,0,0,0.2);
}
.blog-post-content .title {
  font-family: 'Inter', sans-serif;
  color: var(--text-heading) !important;
}
.blog-post-content .title a {
  color: var(--text-heading) !important;
}
.blog-post-content .title a:hover {
  color: var(--news-red) !important;
}

/* Recent posts sidebar meta (views / shares / clicks) */
.rc-post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-top: 5px;
  font-size: 0.7rem;
  color: var(--text-muted);
}
.rc-post-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
  background: var(--bg-page, #f5f6f8);
  border: 1px solid var(--border-light);
}
.rc-post-meta .date {
  background: transparent;
  border: none;
  padding: 0;
  font-weight: 500;
}
.rc-post-meta i {
  color: var(--news-red);
  font-size: 0.68rem;
}

/* Neutralize old dark-theme blog-post-meta so the list page uses the modern layout */
.blog-post-item .blog-post-meta {
  border: none;
  padding: 0;
  margin: 16px 0 0;
  justify-content: flex-start;
}
.blog-post-item .blog-post-meta::before {
  display: none;
}
.blog-post-item .blog-post-meta a {
  color: inherit;
}
.blog-post-item .movie-meta .meta-author a {
  color: var(--news-red);
}

/* ============================================
   SERVICES AREA (Feature Article)
   ============================================ */
.services-content-wrap p {
  color: var(--text-body);
  font-size: 0.95rem;
  line-height: 1.8;
}

.services-img-wrap img,
.favorite-img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  object-fit: cover;
}

.services-content-wrap .btn {
  background: var(--news-red) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  font-weight: 600;
  padding: 12px 28px !important;
  text-transform: none !important;
  letter-spacing: 0.3px;
  max-width: none !important;
  transition: var(--transition);
}
.services-content-wrap .btn:hover {
  background: var(--news-red-hover) !important;
  box-shadow: 0 6px 20px rgba(204,0,0,0.3);
}

/* ============================================
   BUTTONS - Global Override
   ============================================ */
.btn {
  background: var(--news-red) !important;
  color: #ffffff !important;
  border: 2px solid var(--news-red) !important;
  border-radius: var(--radius-md) !important;
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: none !important;
  letter-spacing: 0.3px;
  padding: 12px 28px;
  max-width: none !important;
  transition: var(--transition);
  cursor: pointer;
}
.btn:hover {
  background: var(--news-red-hover) !important;
  border-color: var(--news-red-hover) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(204,0,0,0.3);
}
.btn:active {
  transform: translateY(0);
}

/* Outlined button */
.btn-outline {
  background: transparent !important;
  color: var(--news-red) !important;
  border: 2px solid var(--news-red) !important;
}
.btn-outline:hover {
  background: var(--news-red) !important;
  color: #fff !important;
}

/* Category pill buttons */
.btn-category {
  display: inline-block;
  background: var(--news-red-light);
  color: var(--news-red);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 5px 14px;
  border-radius: 20px;
  border: none;
  transition: var(--transition);
}
.btn-category:hover {
  background: var(--news-red);
  color: #fff;
}

/* ============================================
   OWL CAROUSEL OVERRIDES
   ============================================ */
.owl-nav {
  display: flex !important;
  gap: 12px;
}
.owl-nav button {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 44px !important;
  height: 44px !important;
  background: rgba(255,255,255,0.92) !important;
  color: #111827 !important;
  border: none !important;
  border-radius: 4px !important;
  font-size: 1rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.10);
  cursor: pointer;
  transition: all 0.25s ease;
  outline: none !important;
}
.owl-nav button:hover {
  background: var(--news-red) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(204,0,0,0.30);
  transform: translateY(-1px);
}
.owl-nav button:active {
  transform: scale(0.96);
}
.owl-nav button.disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
  transform: none;
}
.owl-nav button.disabled:hover {
  background: rgba(255,255,255,0.92) !important;
  color: #111827 !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.10);
  transform: none;
}
/* Arrow icon centering */
.owl-nav button i,
.owl-nav button svg {
  display: block;
  line-height: 1;
  font-size: 1rem;
}
/* Position ucm-active arrows on both sides of the content */
.ucm-active {
  position: relative;
}
.ucm-active .owl-nav {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  padding: 0 !important;
  gap: 0 !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  pointer-events: none;
  z-index: 5;
}
.ucm-active .owl-nav button {
  position: absolute !important;
  top: 50% !important;
  margin-top: -22px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
  pointer-events: auto;
}
.ucm-active .owl-nav .owl-prev {
  left: -20px !important;
}
.ucm-active .owl-nav .owl-next {
  right: -20px !important;
}
.ucm-active .owl-nav .owl-prev::before {
  display: none !important;
}
/* 小屏：箭头收回内容盒子内部，避免超出视口 */
@media (max-width: 767px) {
  .ucm-active .owl-nav .owl-prev {
    left: 8px !important;
  }
  .ucm-active .owl-nav .owl-next {
    right: 8px !important;
  }
}

/* ============================================
   BREADCRUMB
   ============================================ */
.breadcrumb-area {
  background: var(--bg-header) !important;
  border-bottom: 3px solid var(--news-red);
  padding: 60px 0 !important;
}
.breadcrumb-bg::before {
  opacity: 0.85;
  background: linear-gradient(135deg, var(--bg-header) 0%, rgba(13,17,23,0.8) 100%) !important;
}
.breadcrumb-content .title {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 2.5rem !important;
  color: #fff !important;
}
.breadcrumb-content .title span {
  color: var(--news-red) !important;
}
.breadcrumb-content nav ol {
  background: transparent;
  padding: 0;
}
.breadcrumb-content .breadcrumb-item a {
  color: var(--text-inverse-muted);
  font-weight: 500;
}
.breadcrumb-content .breadcrumb-item.active {
  color: var(--news-red);
  font-weight: 600;
}
.breadcrumb-item + .breadcrumb-item::before {
  color: var(--text-inverse-muted);
}

/* ============================================
   CATEGORY PAGE
   ============================================ */
.categories-area {
  background: var(--bg-page) !important;
  padding: 60px 0 !important;
}

/* ============================================
   BLOG / LIST PAGE
   ============================================ */
.blog-area {
  background: var(--bg-page) !important;
  padding: 60px 0 !important;
}

.blog-post-item {
  background: var(--bg-card);
  margin-bottom: 30px;
}

.blog-post-thumb img {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  width: 100%;
  object-fit: cover;
}

.blog-post-content .blog-meta ul {
  display: flex;
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
}
.blog-post-content .blog-meta ul li {
  color: var(--text-muted);
  font-size: 0.8rem;
}
.blog-post-content .blog-meta ul li i {
  color: var(--news-red);
  margin-right: 5px;
}

/* Sidebar Widget */
.blog-widget {
  background: var(--bg-card) !important;
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-card);
  padding: 30px !important;
}

.widget-title .title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1.15rem !important;
  color: var(--text-heading) !important;
}

.blog-widget form input {
  background: var(--bg-page);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-heading);
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  padding: 12px 16px;
  transition: var(--transition);
}
.blog-widget form input:focus {
  border-color: var(--news-red);
  box-shadow: 0 0 0 3px var(--news-red-light);
}
.blog-widget form button {
  background: var(--news-red);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-weight: 600;
  padding: 12px 20px;
  transition: var(--transition);
}
.blog-widget form button:hover {
  background: var(--news-red-hover);
}

/* Widget category links */
.rc-post-content .title,
.blog-widget .rc-post-content .title {
  color: var(--text-heading) !important;
}
.rc-post-content .title:hover {
  color: var(--news-red) !important;
}

/* Category list in widget */
.blog-widget .cat-list ul li a {
  color: var(--text-body);
  transition: var(--transition);
}
.blog-widget .cat-list ul li a:hover {
  color: var(--news-red);
}

/* Tag cloud */
.blog-widget .tag-list ul li a {
  background: var(--bg-page);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  padding: 6px 14px;
  transition: var(--transition);
}
.blog-widget .tag-list ul li a:hover {
  background: var(--news-red);
  color: #fff;
  border-color: var(--news-red);
}

/* ============================================
   DETAIL PAGE
   ============================================ */
.movie-details-area {
  background: var(--bg-page) !important;
  padding: 60px 0 !important;
}

.blog-details-wrap {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 10px;
}

.blog-details-content p {
  color: var(--text-body);
  font-size: 1rem;
  line-height: 1.85;
}

.blog-details-content blockquote {
  background: var(--news-red-light);
  border-left: 4px solid var(--news-red);
  color: var(--text-heading);
  font-style: italic;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin: 24px 0;
  padding: 20px 24px;
}

.blog-details-content .blog-details-img img,
.blog-details-content .blog-details-img-two img {
  border-radius: var(--radius-lg);
}

.blog-details-bottom ul {
  display: flex;
  gap: 20px;
  list-style: none;
  padding: 0;
}
.blog-details-bottom ul li {
  color: var(--text-muted);
  font-size: 0.85rem;
}
.blog-details-bottom ul li i {
  color: var(--news-red);
  margin-right: 5px;
}

.blog-post-tag ul li a {
  background: var(--bg-muted);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  padding: 5px 12px;
  transition: var(--transition);
}
.blog-post-tag ul li a:hover {
  background: var(--news-red);
  color: #fff;
}

.blog-post-share a {
  color: #fff;
  transition: var(--transition);
}
.blog-post-share a:hover {
  opacity: 0.85;
}

/* ===== Detail page color fixes (legacy dark theme -> modern) ===== */
/* Main article card must not lift on hover like a grid card */
.blog-details-wrap:hover {
  transform: none;
  box-shadow: var(--shadow-card);
  border-color: var(--border-color);
}
/* Feature image rounding */
.blog-details-wrap .blog-post-thumb img {
  border-radius: var(--radius-md);
}
/* Body text + meta colors */
.blog-details-wrap .blog-post-content p {
  color: var(--text-body);
  line-height: 1.85;
}
.blog-details-wrap .blog-post-content .date,
.blog-details-wrap .blog-details-top-meta .user,
.blog-details-wrap .blog-details-top-meta .user a {
  color: var(--text-muted);
}

/* ===== Article top meta: modern pill/badge style ===== */
.blog-details-wrap .blog-details-top-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 12px 14px;
  background: var(--bg-muted);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
}
.blog-details-wrap .blog-details-top-meta span + span::before {
  content: none !important; /* remove legacy "|" separator */
}
.blog-details-wrap .blog-details-top-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
  transition: var(--transition);
}
.blog-details-wrap .blog-details-top-meta span i {
  color: var(--news-red);
  font-size: 0.78rem;
}
.blog-details-wrap .blog-details-top-meta span:hover {
  border-color: var(--news-red);
  color: var(--text-heading);
  box-shadow: var(--shadow-sm);
}
.blog-details-wrap .blog-details-top-meta .user {
  background: var(--news-red-light);
  border-color: rgba(204, 0, 0, 0.15);
  color: var(--news-red);
  font-weight: 600;
}
.blog-details-wrap .blog-details-top-meta .user a {
  color: var(--news-red);
}
.blog-details-wrap .blog-details-top-meta .user a:hover {
  color: var(--news-red-hover);
}
.blog-details-wrap .blog-details-top-meta .date i,
.blog-details-wrap .blog-details-top-meta .views i,
.blog-details-wrap .blog-details-top-meta .shares i,
.blog-details-wrap .blog-details-top-meta .clicks i {
  color: var(--news-red);
}
.blog-details-wrap .blog-post-meta ul li {
  color: var(--text-muted);
}
.blog-details-wrap .blog-post-meta ul li i {
  color: var(--news-red-on-dark);
}
.blog-details-wrap .blog-post-meta ul li a {
  color: var(--text-body);
}
/* Restore a clean divider + space-between layout for the detail meta row */
.blog-details-wrap .blog-post-meta {
  justify-content: space-between;
  margin: 30px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--border-light);
}
/* Sidebar recent posts: unify title/date colors */
.rc-post-item .content .title a {
  color: var(--text-heading);
}
.rc-post-item .content .title a:hover {
  color: var(--news-red);
}
.rc-post-item .content .date {
  color: var(--text-muted);
}
.rc-post-item .content .date i {
  color: var(--news-red-on-dark);
}

/* Comment area */
.comments-area {
  color: var(--text-body);
}
.comment-avatar img {
  border-radius: 50%;
}
.latest-comments ul li .comments-box {
  background: var(--bg-muted);
  border-radius: var(--radius-md);
  padding: 20px;
}
.latest-comments ul li .comments-box .comments-avatar {
  float: left;
}
.latest-comments ul li .comments-box .comment-text {
  overflow: hidden;
  padding-left: 20px;
}
.comment-text .avatar-name h5 {
  color: var(--text-heading);
  font-weight: 700;
}
.comment-text .avatar-name .comment-reply-link {
  color: var(--news-red);
  font-weight: 600;
}
.comment-text .avatar-name .comment-reply-link:hover {
  color: var(--news-red-hover);
}
.comment-text .avatar-name .comment-date {
  color: var(--text-muted);
}

.comment-form textarea,
.comment-form input {
  background: var(--bg-page);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-heading);
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  padding: 14px 18px;
  transition: var(--transition);
}
.comment-form textarea:focus,
.comment-form input:focus {
  border-color: var(--news-red);
  box-shadow: 0 0 0 3px var(--news-red-light);
}
.comment-form .btn {
  background: var(--news-red) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  font-weight: 600;
  padding: 12px 32px !important;
  text-transform: none !important;
}
.comment-form .btn:hover {
  background: var(--news-red-hover) !important;
}

/* ============================================
   CONTACT PAGE
   ============================================ */
.contact-area {
  background: var(--bg-page) !important;
  padding: 60px 0 !important;
}

.contact-info-wrap,
.contact-form-wrap {
  padding: 40px;
}

.contact-info-item {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 30px;
  text-align: center;
  transition: var(--transition);
}
.contact-info-item:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}
.contact-info-item .icon {
  color: var(--news-red);
  font-size: 1.5rem;
  margin-bottom: 12px;
}
.contact-info-item .content h5 {
  color: var(--text-heading);
  font-weight: 700;
  margin-bottom: 6px;
}
.contact-info-item .content p {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.contact-form input,
.contact-form textarea {
  background: var(--bg-page);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-heading);
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  padding: 14px 18px;
  transition: var(--transition);
}
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--news-red);
  box-shadow: 0 0 0 3px var(--news-red-light);
}
.contact-form .btn {
  background: var(--news-red) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 600;
  padding: 14px 36px !important;
  text-transform: none !important;
}

/* ============================================
   PROFILE / LOGIN PAGES
   ============================================ */
.login-area {
  background: var(--bg-page) !important;
}

.login-form-wrap {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 40px;
}

.login-form-wrap h2 {
  color: var(--text-heading);
  font-family: 'Inter', sans-serif;
}

.login-form-wrap input {
  background: var(--bg-page);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-heading);
  font-family: 'Inter', sans-serif;
  padding: 12px 16px;
  transition: var(--transition);
}
.login-form-wrap input:focus {
  border-color: var(--news-red);
}
.login-form-wrap .btn {
  width: 100%;
}

/* ============================================
   PRIVACY / TERMS / DISCLAIMER
   ============================================ */
.privacy-area,
.terms-area,
.disclaimer-area {
  background: var(--bg-page) !important;
  padding: 60px 0 !important;
}

.privacy-wrap,
.terms-wrap,
.disclaimer-wrap {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 40px;
}

.privacy-wrap h2,
.terms-wrap h2,
.disclaimer-wrap h2 {
  color: var(--text-heading);
  font-family: 'Inter', sans-serif;
  font-weight: 800;
}

.privacy-wrap h3,
.terms-wrap h3,
.disclaimer-wrap h3 {
  color: var(--text-heading);
  font-family: 'Inter', sans-serif;
  font-weight: 700;
}

.privacy-wrap p,
.terms-wrap p,
.disclaimer-wrap p {
  color: #52525b;
}

.privacy-wrap ul li,
.terms-wrap ul li,
.disclaimer-wrap ul li {
  color: #52525b;
}

/* ============================================
   ABOUT PAGE
   ============================================ */
.about-area {
  background: var(--bg-page) !important;
  padding: 60px 0 !important;
}

.about-content h2 {
  color: var(--text-heading);
  font-family: 'Inter', sans-serif;
  font-weight: 800;
}

.about-content p {
  color: #52525b;
  font-size: 1rem;
  line-height: 1.8;
}

/* Team section */
.team-item {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: var(--transition);
}
.team-item:hover {
  box-shadow: var(--shadow-lg);
}

.team-content h5 {
  color: var(--text-heading);
  font-weight: 700;
}

.team-content span {
  color: var(--news-red);
  font-weight: 600;
}

/* ============================================
   NEWSLETTER
   ============================================ */
.newsletter-area {
  background: var(--bg-header) !important;
  border-top: 3px solid var(--news-red);
  padding: 60px 0 !important;
}

.newsletter-inner-wrap {
  background: transparent;
}

.newsletter-content h4 {
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
}
.newsletter-content p {
  color: var(--text-inverse-muted);
}

.newsletter-form input {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-md);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  padding: 14px 20px;
  transition: var(--transition);
}
.newsletter-form input::placeholder {
  color: rgba(255,255,255,0.6);
}
.newsletter-form input:focus {
  border-color: var(--news-red);
  background: rgba(255,255,255,0.15);
}
.newsletter-form .btn {
  background: var(--news-red) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  font-weight: 700;
  padding: 14px 32px !important;
  text-transform: none !important;
  letter-spacing: 0;
}
.newsletter-form .btn:hover {
  background: #fff !important;
  color: var(--news-red) !important;
  border-color: #fff !important;
}

/* ============================================
   BLOG COMMENTS (detail page)
   ============================================ */
.blog-comments-area {
  margin-top: 48px;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.46);
  padding: 24px;
}

.blog-comments-area .comments-title {
  color: var(--text-heading);
  font-family: 'Inter', sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: 18px;
}

.blog-comments-area .comments-title:not(:first-child) {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--border-color);
}

.blog-comments-area .blog-comments {
  margin-top: 40px;
}

/* Comment form */
.blog-comment-form .comment-login-hint {
  background: var(--bg-page);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-body);
  padding: 12px 16px;
  margin-bottom: 16px;
}
.blog-comment-form .comment-login-hint a {
  color: var(--news-red);
  font-weight: 600;
  text-decoration: underline;
}

.comment-rating-box {
  margin-bottom: 14px;
}
.comment-rating-label {
  display: block;
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-bottom: 6px;
}
.comment-rating {
  display: inline-flex;
  gap: 4px;
  font-size: 1.25rem;
  cursor: pointer;
}
.comment-rating i {
  color: #4a4a55;
  transition: color 0.15s ease;
}
.comment-rating i.active {
  color: #ffc107;
}

.comment-input-box textarea {
  width: 100%;
  background: var(--bg-page);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-heading);
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  padding: 14px 18px;
  resize: vertical;
  transition: var(--transition);
}
.comment-input-box textarea:focus {
  border-color: var(--news-red);
  box-shadow: 0 0 0 3px var(--news-red-light);
  outline: none;
}

.comment-submit-box {
  margin-top: 14px;
}
.comment-submit-btn,
.comment-loadmore-btn {
  background: var(--news-red) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  padding: 12px 32px !important;
  text-transform: none !important;
  letter-spacing: 0;
  cursor: pointer;
  transition: var(--transition);
}
.comment-submit-btn:hover,
.comment-loadmore-btn:hover {
  background: var(--news-red-hover) !important;
}
.comment-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Comment list */
.comment-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.comment-item {
  display: flex;
  gap: 14px;
  background: var(--bg-page);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px;
}
.comment-item .comment-avatar {
  flex: 0 0 44px;
}
.comment-item .comment-avatar img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-muted);
}
.comment-item .comment-body {
  flex: 1 1 auto;
  min-width: 0;
}
.comment-item .comment-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
.comment-item .comment-author {
  color: var(--text-heading);
  font-weight: 700;
  font-size: 0.98rem;
}
.comment-item .comment-date {
  color: var(--text-muted);
  font-size: 0.8rem;
}
.comment-item .comment-rating-stars {
  color: #ffc107;
  font-size: 0.85rem;
  margin-bottom: 6px;
}
.comment-item .comment-rating-stars .star-empty {
  color: #4a4a55;
}
.comment-item .comment-content {
  color: var(--text-body);
  font-size: 0.92rem;
  line-height: 1.6;
  word-break: break-word;
}
.comment-item .comment-delete {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.8rem;
  cursor: pointer;
  padding: 2px 6px;
}
.comment-item .comment-delete:hover {
  color: var(--news-red);
}
.comment-more {
  margin-top: 18px;
  text-align: center;
}
.comment-empty {
  color: var(--text-muted);
  font-size: 0.92rem;
  padding: 18px 0;
  text-align: center;
  background: var(--bg-muted);
  border-radius: var(--radius-md);
}
.comment-avatar-letter {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--news-red);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
}

/* ============================================
   FOOTER
   ============================================ */
.footer-top-wrap {
  background: var(--bg-footer);
  padding: 60px 0 0;
  border-top: 3px solid var(--news-red);
}

.footer-logo a {
  color: var(--text-inverse) !important;
  font-weight: 800;
  font-size: 24px !important;
  text-transform: uppercase;
}

.footer-menu-primary .navigation li a,
.footer-menu-secondary .navigation li a {
  color: var(--text-inverse-muted) !important;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  transition: var(--transition);
}
.footer-menu-primary .navigation li a:hover,
.footer-menu-secondary .navigation li a:hover {
  color: var(--news-red) !important;
}

.footer-submenu-wrap {
  border-top: 1px solid rgba(255,255,255,0.1);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding: 20px 0;
  margin-top: 20px;
}

.footer-search input {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-md);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  padding: 12px 16px;
  transition: var(--transition);
}
.footer-search input::placeholder {
  color: rgba(255,255,255,0.4);
}
.footer-search input:focus {
  border-color: var(--news-red);
}
.footer-search button {
  background: var(--news-red);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  padding: 12px 16px;
  transition: var(--transition);
}
.footer-search button:hover {
  background: var(--news-red-hover);
}

.footer-social ul {
  display: flex;
  gap: 12px;
  list-style: none;
  padding: 0;
}
.footer-social ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.08);
  color: var(--text-inverse-muted);
  border-radius: 50%;
  font-size: 16px;
  transition: var(--transition);
}
.footer-social ul li a:hover {
  background: var(--news-red);
  color: #fff;
  transform: translateY(-2px);
}

.footer-quick-link-wrap {
  padding: 20px 0;
}

.copyright-wrap {
  background: rgba(0,0,0,0.3);
  padding: 18px 0;
}
.copyright-text p {
  color: rgba(255,255,255,0.5);
  font-size: 0.85rem;
  margin: 0;
}

/* ============================================
   PAGINATION
   ============================================ */
.pagination-wrap ul {
  display: flex;
  gap: 6px;
  list-style: none;
  padding: 0;
}
.pagination-wrap ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  background: var(--bg-card);
  color: var(--text-heading);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.9rem;
  transition: var(--transition);
}
.pagination-wrap ul li a:hover,
.pagination-wrap ul li.active a {
  background: var(--news-red);
  color: #fff;
  border-color: var(--news-red);
}

/* ============================================
   PRICING / TABLES (Any leftover dark tables)
   ============================================ */
.pricing-box-item {
  background: var(--bg-card) !important;
  border: 2px solid var(--border-color) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-card);
  transition: var(--transition);
}
.pricing-box-item:hover,
.pricing-box-item.active {
  border-color: var(--news-red) !important;
  box-shadow: var(--shadow-lg);
}
.pricing-box-item .pricing-title h5 {
  color: var(--text-heading) !important;
}
.pricing-box-item .pricing-list ul li {
  color: var(--text-body) !important;
}

/* ============================================
   TAB STYLES
   ============================================ */
.movie-filter .nav-tabs .nav-link {
  background: var(--bg-muted);
  color: var(--text-body);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 10px 20px;
  margin-right: 8px;
  transition: var(--transition);
}
.movie-filter .nav-tabs .nav-link.active {
  background: var(--news-red);
  color: #fff;
  border-color: var(--news-red);
}

/* ============================================
   DEFAULT UTILITY CLASS OVERRIDES
   ============================================ */
.black-bg,
.theme-bg,
.primary-bg {
  background: var(--bg-header) !important;
}
.white-color {
  color: var(--text-inverse) !important;
}

/* ============================================
   MISC OVERRIDES
   ============================================ */
/* Any leftover dark backgrounds */
.ucm-bg,
.services-bg,
.tr-movie-bg,
.contact-bg,
.blog-bg,
.movie-bg {
  background: var(--bg-page) !important;
}

/* Fix hardcoded white-on-white text (privacy/disclaimer pages) */
.about-text.text-white,
.about-content.text-white {
  color: #52525b !important;
}
.about-text.text-white h2,
.about-text.text-white h3,
.about-content.text-white h2,
.about-content.text-white h3 {
  color: var(--text-heading) !important;
}

/* Fix privacy-compliance-section dark backgrounds */
.privacy-compliance-section {
  background: var(--bg-muted) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-md);
  padding: 20px;
  color: var(--text-body) !important;
}
.privacy-compliance-section a {
  color: var(--news-blue) !important;
}

/* Fix contact info wrap dark background */
.contact-info-wrap {
  background: var(--bg-card) !important;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 40px;
}
.contact-info-wrap h2,
.contact-info-wrap h3,
.contact-info-wrap h4 {
  color: var(--text-heading) !important;
}
.contact-info-wrap p,
.contact-info-wrap span,
.contact-info-wrap li {
  color: var(--text-body) !important;
}

/* Fix any remaining text-white on light backgrounds */
.breadcrumb-content.text-white {
  color: #fff !important;
}
.about-area .text-white {
  color: var(--text-body) !important;
}

/* Ensure all section area backgrounds are light */
section[id] {
  background-color: var(--bg-page);
}

/* Remove dark overlay patterns */
[data-background] {
  background-size: cover;
  background-position: center;
}

/* Contact page form area */
.contact-form-wrap {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* Login / signin button */
.qk-signin {
  background: var(--news-red) !important;
  color: #fff !important;
  font-weight: 600 !important;
  border-radius: var(--radius-md) !important;
  padding: 8px 18px !important;
  transition: var(--transition) !important;
}
.qk-signin:hover {
  background: var(--news-red-hover) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

/* User dropdown */
.user-dropdown-toggle {
  color: var(--text-inverse-muted) !important;
}
.user-dropdown-toggle:hover {
  color: var(--news-red) !important;
}
.user-dropdown-menu {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-lg) !important;
}
.user-dropdown-item {
  color: var(--text-body) !important;
}
.user-dropdown-item:hover {
  color: var(--news-red) !important;
}

/* ============================================
   BATCH DARK-TO-LIGHT OVERRIDES
   Targeting the most visible dark sections
   in the original style.css
   ============================================ */

/* Movie details / content wraps */
.movie-details-wrap,
.movie-details-content-wrap,
.tr-movie-menu-active,
.ucm-nav-wrap {
  background: transparent !important;
  color: var(--text-body) !important;
}

/* Tab panes */
.tab-pane { background: transparent !important; }

/* Section interior content containers */
.tr-movie-menu-active .movie-content .title,
.ucm-nav-wrap .movie-content .title {
  color: var(--text-heading) !important;
}

/* Genre / tag pills inside dark areas */
.movie-content .quality,
.movie-content .genre-badge {
  background: var(--news-red) !important;
  color: #fff !important;
  border: none !important;
}

/* Movie detail meta rows */
.movie-details-wrap ul li,
.movie-details-content-wrap ul li,
.movie-info-list li {
  color: var(--text-body) !important;
}
.movie-details-wrap ul li span,
.movie-details-content-wrap ul li span {
  color: var(--text-heading) !important;
}

/* Tabs navigation pills override */
.nav-tabs { border-bottom-color: var(--border-color) !important; }
.nav-tabs .nav-link {
  color: var(--text-body) !important;
}

/* Video / play button areas */
.video-popup,
.play-btn {
  background-color: var(--news-red) !important;
  color: #fff !important;
}

/* About movie area */
.about-movie-area {
  background: var(--bg-page) !important;
}
.about-movie-content p {
  color: var(--text-body) !important;
}

/* Any element with inline dark bg that might remain */
[style*="background: #1"],
[style*="background:#1"],
[style*="background: #2"],
[style*="background:#2"],
[style*="background-color: #1"],
[style*="background-color:#1"],
[style*="background-color: #2"],
[style*="background-color:#2"] {
  background-color: var(--bg-card) !important;
}

/* Section spacing consistency */
section {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}
section:first-of-type {
  padding-top: 0 !important;
}

/* ============================================
   RESPONSIVE TWEAKS
   ============================================ */
@media (max-width: 991px) {
  .banner-content .sub-title {
    font-size: 1.75rem !important;
  }
  .breadcrumb-content .title {
    font-size: 1.75rem !important;
  }
  .section-title .title {
    font-size: 1.4rem !important;
  }

  /* ===== Mobile header: keep logo + auth + hamburger on one row ===== */
  /* The .mobile-nav-toggler sits OUTSIDE .menu-nav, so make the wrapping
     .col-12 a flex row and let it host both the toggle and the menu-nav. */
  /* Shrink the header vertical padding from 25px to 10px on mobile */
  .menu-area {
    padding: 10px 0 !important;
  }
  .col-12 {
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap;
    width: 100%;
  }
  .mobile-nav-toggler {
    float: none !important;
    position: static !important;
    top: auto !important;
    order: 3;
    margin: 0 0 0 12px !important;
    display: inline-flex !important;
    align-items: center;
    font-size: 24px !important;
    line-height: 1 !important;
  }
  .menu-wrap {
    flex: 1 1 auto;
    min-width: 0;
  }
  .menu-nav {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    width: 100%;
  }
  /* Hide the empty legacy <ul> inside header-action */
  .header-action > ul:empty {
    display: none !important;
  }
  .header-action {
    margin: 0 !important;
    margin-left: auto !important;
    display: flex !important;
    align-items: center;
    order: 2;
  }
  .logo {
    order: 1;
    flex: 0 0 auto;
    min-width: 0;
  }
  /* Shrink the inline-styled logo font on mobile (overrides inline 20px) */
  .logo a {
    font-size: 20px !important;
  }
  /* Keep the desktop auth entry from overflowing; let it sit next to the toggle */
  .header-action .qk-user {
    margin-left: 12px !important;
  }
  .qk-signin,
  .user-dropdown-toggle {
    white-space: nowrap;
  }
  /* ===== Mobile auth: keep chevron, drop avatar bg, smaller button ===== */
  #userInfo .user-dropdown-toggle {
    background: transparent !important;
    padding: 0.3rem 0.4rem !important;
    font-size: 0.85rem !important;
    gap: 0.25rem !important;
    width: 60px !important;
    max-width: 60px !important;
    overflow: hidden !important;
  }
  #userInfo .user-dropdown-toggle #userName {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
  }
  /* Hide the person avatar icon only; keep the chevron-down dropdown arrow */
  #userInfo .user-dropdown-toggle > svg:first-child {
    display: none !important;
  }
}

@media (max-width: 767px) {
  body {
    font-size: 15px;
  }
  .banner-content .sub-title {
    font-size: 1.4rem !important;
  }
  .banner-area {
    min-height: 560px;
  }
  .breadcrumb-content .title {
    font-size: 1.5rem !important;
  }
  .movie-poster img {
    height: 180px;
  }
  .movie-content {
    padding: 14px;
  }
  .movie-content .title {
    font-size: 0.95rem !important;
  }
  .newsletter-content h4 {
    font-size: 1.2rem;
  }
  .section-title .title {
    font-size: 1.25rem !important;
  }
}

/* ============================================
   ACCESSIBILITY: icon-only controls
   - Names are provided via aria-label in the HTML
   - Ensure a comfortable tap target size (>= 40px) for
     screen readers / touch users (Lighthouse tap-targets)
   ============================================ */
.top-bar-search,
.user-dropdown-toggle,
#search-btn,
#search-btn1,
.footer-search form button,
.scroll-top,
.toggle-icon,
.social-links a,
.mobile-nav-toggler,
.close-btn {
  min-width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Clickable <i>/<span> controls must look interactive */
.toggle-icon,
.close-btn {
  cursor: pointer;
}