@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('home/featured-section.css');
@import url('home/hero-section.css');
@import url('home/subscribe-section.css');
@import url('home/ad-banner.css');
@import url('home/new-this-week.css');
@import url('home/ad-sidebar.css');
@import url('home/latest-news.css');
@import url('home/all-videos.css');
@import url('home/footer-ad.css');
@import url('footer.css');

/*zone css */
@import url('zone/add-pop-zone-bar.css');
/*videos css */
@import url('videos/videos.css');
/*videos css */
@import url('articals/articalHomePage.css');
@import url('articals/articleDetailPage.css');
/*new-release css */
@import url('new-release/new-release-page.css');
@import url('new-release/release-archive.css');
/*top navbar css */
@import url('navbar/top-navbar.css');
/*review-page css */
@import url('reviews/review-page.css');
/*coming css */
@import url('coming-soon/coming-soon.css');
/*breadcrumb css */
@import url('components-css/breadcrumb.css');
/*breadcrumb css */
@import url('news/NewsDetailPage.css');
/*social-navbar css */
@import url('social-navbar/social-navbar.css');
/*albums css */
@import url('albums/albums.css');
/*artists css */
@import url('artist/artists.css');
/*contributer css */
@import url('contributer/contributer.css');
html body .yottie-widget-header-inner {
    background-color: rgba(105, 120, 134, 0.28) !important;
}
.custom-home-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.5rem 0 0;
  padding: 1.25rem 1.5rem;
  border: 1px solid rgba(100, 123, 145, 0.28);
  border-radius: 14px;
  background: linear-gradient(135deg, #eef5fb 0%, #d9e7f2 100%);
}

.custom-home-banner h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  color: #17212f;
}

.custom-home-kicker {
  display: block;
  margin-bottom: 0.25rem;
  color: #54734e;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.custom-home-zones {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.custom-home-zones a,
.custom-home-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.75rem;
  color: #ffffff !important;
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  background: #647b91;
  border-radius: 9999px;
}

.custom-home-zones a:last-child,
.custom-home-cta {
  background: #54734e;
}

.favorite-zone-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
}

.favorite-zone-card {
  display: block;
  padding: 0.75rem;
  border: 2px solid #d8e2ea;
  border-radius: 14px;
  background: #ffffff;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.favorite-zone-card:hover,
.favorite-zone-card-selected,
.favorite-zone-card:has(input:checked) {
  border-color: #54734e;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
  transform: translateY(-2px);
}

.favorite-zone-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.favorite-zone-card-image {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  background: #eef2f7;
}

.favorite-zone-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.favorite-zone-card-label {
  display: block;
  margin-top: 0.65rem;
  color: #111827;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}

.profile-zone-icons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1.25rem;
}

.profile-zone-icons a {
  display: block;
  width: 66px;
  height: 50px;
  overflow: hidden;
  border: 2px solid #ffffff;
  border-radius: 10px;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.18);
}

.profile-zone-icons img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 768px) {
  .custom-home-banner {
    align-items: flex-start;
    flex-direction: column;
  }

  .custom-home-zones {
    justify-content: flex-start;
  }
}

.nrt-announcement-popup {
  color: #111827 !important;
  background-color: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid rgba(17, 24, 39, 0.16);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.3);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background-clip: padding-box;
  overflow: hidden;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .nrt-announcement-popup {
    background-color: rgba(255, 255, 255, 0.98) !important;
  }
}

.nrt-announcement-popup-title {
  color: #111827 !important;
  font-weight: 800;
  padding-right: 1.75rem;
}

.nrt-announcement-popup-description {
  color: #374151 !important;
}

.nrt-announcement-popup-link {
  color: #54734e !important;
}

.nrt-announcement-popup-link:hover {
  color: #3f5c39 !important;
}

.nrt-announcement-popup-close {
  color: #4b5563 !important;
}

.nrt-announcement-popup-close:hover,
.nrt-announcement-popup-close:focus {
  color: #111827 !important;
}

.dark-theme .nrt-announcement-popup,
html[data-theme="dark"] .nrt-announcement-popup {
  color: #f9fafb !important;
  background-color: rgba(17, 24, 39, 0.94) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.55);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .dark-theme .nrt-announcement-popup,
  html[data-theme="dark"] .nrt-announcement-popup {
    background-color: rgba(17, 24, 39, 0.98) !important;
  }
}

.dark-theme .nrt-announcement-popup-title,
html[data-theme="dark"] .nrt-announcement-popup-title {
  color: #f9fafb !important;
}

.dark-theme .nrt-announcement-popup-description,
html[data-theme="dark"] .nrt-announcement-popup-description {
  color: #d1d5db !important;
}

.dark-theme .nrt-announcement-popup-link,
html[data-theme="dark"] .nrt-announcement-popup-link {
  color: #a9c1f0 !important;
}

.dark-theme .nrt-announcement-popup-link:hover,
html[data-theme="dark"] .nrt-announcement-popup-link:hover {
  color: #ffffff !important;
}

.dark-theme .nrt-announcement-popup-close,
html[data-theme="dark"] .nrt-announcement-popup-close {
  color: #d1d5db !important;
}

.nrt-announcement-page {
  color: #1f2937;
}

.nrt-announcement-page h1 {
  margin-bottom: 1.5rem;
  font-size: 3.157rem;
  line-height: 1.05;
  font-weight: 900;
  color: #111827;
}

.nrt-announcement-header {
  border-bottom: 2px solid rgba(100, 123, 145, 0.25);
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
}

.nrt-announcement-date,
.nrt-announcement-eyebrow,
.nrt-announcement-list span {
  color: #4b5563 !important;
}

.nrt-announcement-date {
  line-height: 1.5;
}

.nrt-announcement-back-link,
.nrt-announcement-list a {
  color: #647b91 !important;
}

.nrt-announcement-back-link:hover,
.nrt-announcement-list a:hover {
  color: #54734e !important;
}

.nrt-announcement-body {
  color: #1f2937;
  line-height: 1.75;
}

.nrt-announcement-body > *:first-child {
  margin-top: 0;
}

.nrt-announcement-body p,
.nrt-announcement-body ul,
.nrt-announcement-body ol,
.nrt-announcement-body blockquote,
.nrt-announcement-body table {
  margin-bottom: 1.25rem;
}

.nrt-announcement-body ul {
  list-style: disc;
  padding-left: 1.5rem;
}

.nrt-announcement-body ol {
  list-style: decimal;
  padding-left: 1.5rem;
}

.nrt-announcement-body li {
  margin-bottom: 0.5rem;
}

.nrt-announcement-body a {
  color: #647b91 !important;
  font-weight: 700;
}

.nrt-announcement-body a:hover,
.nrt-announcement-body a:focus {
  color: #54734e !important;
}

.nrt-announcement-body h2,
.nrt-announcement-body h3,
.nrt-announcement-body h4 {
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-weight: 800;
  color: #111827;
}

.nrt-announcement-body h2 {
  font-size: 2.369rem;
}

.nrt-announcement-body h3 {
  font-size: 1.777rem;
}

.nrt-announcement-body h4 {
  font-size: 1.333rem;
}

.nrt-announcement-body img {
  max-width: 100%;
  height: auto;
  margin: 1.5rem 0;
  border-radius: 10px;
}

.nrt-announcement-body blockquote {
  padding: 1rem 1.25rem;
  border-left: 4px solid #647b91;
  background: rgba(100, 123, 145, 0.09);
  color: #374151;
}

.nrt-announcement-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
}

.nrt-announcement-body th,
.nrt-announcement-body td {
  padding: 0.75rem;
  border: 1px solid rgba(100, 123, 145, 0.28);
  text-align: left;
  vertical-align: top;
}

.nrt-announcement-body th {
  background: rgba(100, 123, 145, 0.12);
  color: #111827;
  font-weight: 800;
}

.nrt-announcement-body hr {
  margin: 2rem 0;
  border: 0;
  border-top: 1px solid rgba(100, 123, 145, 0.25);
}

.nrt-announcement-body iframe,
.nrt-announcement-body video {
  max-width: 100%;
}

.nrt-announcement-list {
  border-bottom: 1px solid rgba(209, 213, 219, 0.9);
}

.nrt-announcement-list a {
  display: inline-block;
  margin-top: 1rem;
  font-size: 1.15rem;
  font-weight: 800;
}

.dark-theme .nrt-announcement-page,
html[data-theme="dark"] .nrt-announcement-page {
  color: #e5e7eb;
}

.dark-theme .nrt-announcement-body,
html[data-theme="dark"] .nrt-announcement-body {
  color: #e5e7eb !important;
}

.dark-theme .nrt-announcement-page h1,
.dark-theme .nrt-announcement-body h2,
.dark-theme .nrt-announcement-body h3,
.dark-theme .nrt-announcement-body h4,
html[data-theme="dark"] .nrt-announcement-page h1,
html[data-theme="dark"] .nrt-announcement-body h2,
html[data-theme="dark"] .nrt-announcement-body h3,
html[data-theme="dark"] .nrt-announcement-body h4 {
  color: #ffffff !important;
}

.dark-theme .nrt-announcement-date,
.dark-theme .nrt-announcement-eyebrow,
.dark-theme .nrt-announcement-list span,
html[data-theme="dark"] .nrt-announcement-date,
html[data-theme="dark"] .nrt-announcement-eyebrow,
html[data-theme="dark"] .nrt-announcement-list span {
  color: #d1d5db !important;
}

.dark-theme .nrt-announcement-header,
html[data-theme="dark"] .nrt-announcement-header {
  border-color: rgba(255, 255, 255, 0.2);
}

.dark-theme .nrt-announcement-list,
html[data-theme="dark"] .nrt-announcement-list {
  border-color: rgba(255, 255, 255, 0.2);
}

.dark-theme .nrt-announcement-body a,
html[data-theme="dark"] .nrt-announcement-body a {
  color: #a9c1f0 !important;
}

.dark-theme .nrt-announcement-body a:hover,
.dark-theme .nrt-announcement-body a:focus,
html[data-theme="dark"] .nrt-announcement-body a:hover,
html[data-theme="dark"] .nrt-announcement-body a:focus {
  color: #ffffff !important;
}

.dark-theme .nrt-announcement-body blockquote,
html[data-theme="dark"] .nrt-announcement-body blockquote {
  background: rgba(169, 193, 240, 0.1);
  border-left-color: #a9c1f0;
  color: #d1d5db !important;
}

.dark-theme .nrt-announcement-body th,
html[data-theme="dark"] .nrt-announcement-body th {
  background: rgba(169, 193, 240, 0.12);
  color: #ffffff !important;
}

.dark-theme .nrt-announcement-body th,
.dark-theme .nrt-announcement-body td,
html[data-theme="dark"] .nrt-announcement-body th,
html[data-theme="dark"] .nrt-announcement-body td {
  border-color: rgba(255, 255, 255, 0.2);
}

.dark-theme .nrt-announcement-body hr,
html[data-theme="dark"] .nrt-announcement-body hr {
  border-top-color: rgba(255, 255, 255, 0.2);
}

@media (max-width: 768px) {
  .nrt-announcement-page h1 {
    font-size: 2.369rem;
    line-height: 1.08;
  }

  .nrt-announcement-body h2 {
    font-size: 1.777rem;
  }

  .nrt-announcement-body h3 {
    font-size: 1.333rem;
  }
}



/* Box Sizing */
*,
*::before,
*::after {
    box-sizing: border-box;
}
.search-kill-button{
  position: absolute;
  top: -16px;
  right: -14px;
  background: rgb(63, 63, 63);
  border-radius: 15px;
  border: none;
}
#loader-overlay {
   height: 100vh;
   z-index: 9999;
   position: fixed;
   inset: 0;
  background: #000000;        /* ← full‐black */
  display: flex;
  align-items: center;        /* ← vertical center */
  justify-content: center;    /* ← horizontal center */
  opacity: 1;
  transition: opacity 0.6s ease-in-out;
}
#loader-overlay.hidden {
  opacity: 0;
  pointer-events: none;
  /* display: none; */
}
/* full‑screen overlay */
.loader {
  display: flex;
  align-items: center;
  gap: 6px;
}
.bar {
  width: 8px;
  /* you can optionally randomize this in JS too */
  height: 40px;
  background: linear-gradient(135deg, #3AB3FF, #9B42FF);
  border-radius: 4px;

  transform-origin: center center;            /* ← center pivot */
  /* use CSS vars so JS can override */
  animation: bounce var(--d, 1s) infinite ease-in-out;
  animation-delay: var(--l, 0s);
}

@keyframes bounce {
  0%,100%   { transform: scaleY(0.3); }
  50%       { transform: scaleY(1); }
}

/* stagger the start time for each bar */
.bar:nth-child(1)  { animation-delay: 0.1s; }
.bar:nth-child(2)  { animation-delay: 0.2s; }
.bar:nth-child(3)  { animation-delay: 0.3s; }
.bar:nth-child(4)  { animation-delay: 0.4s; }
.bar:nth-child(5)  { animation-delay: 0.5s; }
.bar:nth-child(7)  { animation-delay: 0.6s; }
.bar:nth-child(8)  { animation-delay: 0.7s; }
.bar:nth-child(9)  { animation-delay: 0.8s; }
.bar:nth-child(10) { animation-delay: 0.9s; }
.bar:nth-child(11) { animation-delay: 1s; }

@keyframes bounce {
  0%, 100%   { transform: scaleY(0.3); }
  50%        { transform: scaleY(1); }
}

/* small pulsing dot in the center */
.dot {
  width: 12px;
  height: 12px;
  margin: 0 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3AB3FF, #9B42FF);
  animation: pulse 0.8s infinite ease-in-out;
}
@keyframes pulse {
  0%,100% { transform: scale(1); opacity: 0.7; }
  50%     { transform: scale(1.4); opacity: 1; }
}

/* … plus your existing .loader, .bar, .dot rules … */

.dark-theme{
    background-color: black !important;
}
body .shadow-white {
    box-shadow: 2px 2px 1px rgba(255, 255, 255, 0.3);
  }
  
  body .text-white {
    color: #ffffff !important;
  }
  body .text-white:hover {
    color: #ffffff !important;
  }
  
  body .border-white {
    border: 1px solid #ffffff !important;
  }
  .theme-switch {
    display: inline-block;
    cursor: pointer;
  }
  .theme-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }
  .theme-switch .slider {
    position: relative;
    display: block;
    width: 64px;
    height: 26px;
    background: #ccc;
    border-radius: 36px;
    transition: background 0.3s;
    overflow: hidden;
  }
  .theme-switch .slider::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 19px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.3s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  }
  .theme-switch .sun-icon,
  .theme-switch .moon-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    width: 30px;
    line-height: 30px;
    text-align: center;
    pointer-events: none;
    transition: opacity 0.3s;
  }
  .theme-switch .sun-icon {
    left: 33px;
    color: #34495e;
    opacity: 1;
  }
  .theme-switch .moon-icon {
    right:36px;
    color: #34495e;
    opacity: 0;
  }
  .theme-switch input:checked + .slider {
    background: #34495e;
  }
  .theme-switch input:checked + .slider::after {
    transform: translateX(34px);
  }
  .theme-switch input:checked + .slider .sun-icon {
    opacity: 0;
  }
  .theme-switch input:checked + .slider .moon-icon {
    opacity: 1;
  }
  
  /* Container for the dropdown */
.dropdown {
    position: relative;
    display: inline-block;
  }
  
  /* The button that triggers the dropdown */
  .dropdown-toggle {
    cursor: pointer;
    border: 1px solid #ccc !important;
    color: var(--primary-color);
    padding: 8px 16px;
    border-radius: 5px;
    white-space: nowrap;

    /* ← if you want to align icon + text nicely */
    display: inline-flex;   
    align-items: center;    
    /* ← ensure flex children don’t wrap */
    flex-wrap: nowrap;    
  }
  
  /* The dropdown menu (initially hidden) */
  .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    min-width: 125px;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    margin-top: 4px;
    padding: 0;
    list-style: none;
    z-index: 1000;
    display: none;
    padding: 0.5rem;
  }
  
  /* Show the menu when toggled */
  .dropdown-menu.show {
    display: block;
  }
  
  /* Each item in the dropdown */
  .dropdown-item {
    display: block;
    padding: 8px 16px;
    color: #333;
    text-decoration: none;
    cursor: pointer;
    font-size: 0.8rem; 
    margin: 0.5rem 0;
    border-radius: 5px;
  }
  
  /* Hover effect for items */
  .dropdown-item:hover {
    background-color: #424242;
    color: white;
  }
  .dropdown-item.active-theme {
    background-color: var(--anchor-color);
    color: white;
    font-weight: bold;
    border-radius: 5px;
  }
  
  
/* Root Variables */
:root {
    /* Color Palette */
    --primary-color: #5f7c93;
    --secondary-color: #212529;
    --theme-base-color: green;
    --theme-secondary-color: yellow;
    --font-primary: white;
    --font-secondary: black;
    --text-shadow: 0 2px 2px rgba(255, 255, 255, 0.4);
    --box-shadow: rgba(0, 0, 0, 0.3) 0 4px 12px;
    --anchor-hover-color:#54734e;
    --anchor-color:#647b91;
    /* Spacing */
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 32px;
    --space-lg: 64px;

    /* Typography */
    --font-family: sans-serif;
    --font-size-base: 0.8rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.35rem;
    --line-height: 1.5;

    /* Border Radius */
    --border-radius: 8px;
    --border-radius-lg: 16px !important;
    --border-radius-xl: 50px;

    /* Transition */
    --transition-duration: 0.3s;
    --transition-ease: ease-in-out;

    /* Z-Index */
    --z-modal: 1050;
    --z-dropdown: 1040;
    --z-tooltip: 1030;
}


/* SVG Styles */
svg {
    height: 100%;
    width: 100%;
    vertical-align: middle;
}
pre{
  font-family: sans-serif !important;
}
/* Interactive Elements */
input:active,
button:active,
select:active,
optgroup:active
{
    outline: none;
    border: none;

}

/*select input */
body select,
input,
button,
table,
tr,
th,
td {
    font-size: var(--font-size-base) !important;
}
a{
    text-decoration: none;
}
.pages-section img {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}
.pages-section iframe {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9; /* makes it responsive */
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}

.pages-section iframe[src*="nrtadmin.freeccm.com"],
.page-free-music .pages-section iframe {
    aspect-ratio: auto !important;
    height: 860px !important;
    max-width: 100%;
    overflow: hidden !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.pages-section p {
  margin-bottom: 1rem !important;
}
.pages-section h1 {
  font-size: 2.9rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  margin-bottom: 0.5rem !important;
  color: var(--primary-color);
}
 h2,
h3,
h4,
h5,
h6 {
  font-weight: 800 !important;
  margin-bottom: 0.5rem !important;
  line-height: 1.2 !important;
  position: relative;
  display: inline-block;
  /* cursor: pointer; */
  overflow: visible;
  transition: color 0.3s ease, transform 0.3s ease;
}

/* Font sizes + colors */
h2 {
  font-size: 1.8rem !important;
  color: var(--primary-color);
}
h3 {
  font-size: 1.5rem !important;
  color: #384552;
}
h4 {
  font-size: 1.5rem !important;
  color: #2e3338;
}
h5 {
  font-size: 1.3rem !important;
  color: #2e3338;
}
h6 {
  font-size: 1.1rem !important;
  color: #2e3338;
}

 #song-lyrics p {
  margin-bottom: 0.5rem !important;
}
/* h2:hover, h3:hover, h4:hover, h5:hover, h6:hover,
h2:hover a, h3:hover a, h4:hover a, h5:hover a, h6:hover a,
h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
  color: var(--anchor-hover-color);
}


h2::after, h3::after, h4::after, h5::after, h6::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 3px;
  background-color: var(--anchor-hover-color);
  transition: width 0.4s ease-in-out;
}


h2:hover::after, h3:hover::after, h4:hover::after,
h5:hover::after, h6:hover::after {
  width: 100%;
}


h2 a, h3 a, h4 a, h5 a, h6 a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: inherit;
}

h2 a::after, h3 a::after, h4 a::after, h5 a::after, h6 a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 3px;
  background-color: var(--anchor-hover-color);
  transition: width 0.4s ease-in-out;
}


h2:hover a::after, h3:hover a::after, h4:hover a::after,
h5:hover a::after, h6:hover a::after,
h2 a:hover::after, h3 a:hover::after, h4 a:hover::after,
h5 a:hover::after, h6 a:hover::after {
  width: 100%;
} */

/* Links */
.tag-link {
    position: relative;
    color: var(--anchor-color);
    text-decoration: none;
    padding-bottom: 4px;
}
.tag-link:hover{
    color: var(--hover-color);
    /* text-decoration: underline; */
    text-underline-offset: 4px;
}
.tag-link::after {
  content: '';
  position: absolute;
    bottom: 0; 
  left: 0;
  height: 2px;
  width: 0;
  background-color: var(--anchor-color);
  transition: width 0.5s ease-in-out;
}

.tag-link:hover::after {
  width: 100%;
}



/* Paragraphs and Lists */
p,
ul,
li,
label {
    margin: 0;
    font-weight: normal;
    word-wrap: break-word;
}
/* p {
    margin-bottom: .85rem !important;
} */

/* Form Elements */
.form-group,
.form-control,
form,
.form-control-file {
    margin: 0;
}

/* Background Utilities */
.bg-primary {
    background: var(--primary-color);
    color: var(--foreground-color);
}

.bg-secondary {
    background: var(--secondary-color);
    color: var(--foreground-color);
}

.bg-gradient-primary {
    background: var(--gradient-primary);
    color: var(--foreground-color);
}

/* Rounded Corners */
.rounded {
    border-radius: var(--border-radius);
}

/* .rounded-lg {
    border-radius: var(--border-radius-lg);
} */

.border-sm {
    border: 1px solid #e5e7eb;
    border-radius: 3px;
    display: inline !important;
}

/* Shadows */
.shadow-light {
    box-shadow: var(--box-shadow-light);
}

.shadow-heavy {
    box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 2px !important;
}

/* WebKit Scrollbar Styles (Chrome, Safari, Edge) */
*::-webkit-scrollbar {
    width: 8px; /* Thin scrollbar */
    border-radius: 10px; /* Rounded corners */
}

*::-webkit-scrollbar-track {
    background: #f1f1f1; /* Light background */
    border-radius: 10px; /* Rounded track edges */
}

*::-webkit-scrollbar-thumb {
    background: #bbb; /* Scrollbar color */
    border-radius: 20px; /* Increased for full rounding */
    border: 2px solid #f1f1f1; /* Creates a gap effect */
}

*::-webkit-scrollbar-thumb:hover {
    background: #888; /* Darker on hover */
}

/* Firefox Scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: #bbb #f1f1f1;
}
.navigation-link{
    font-size: 1rem !important;
}
.home-content-leaderboard {
    margin-top: 3rem;
}

.zone-featured-releases {
    margin-top: 3rem;
}

.partial-ad:first-of-type{
    margin-top:1rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    display: flex;
    justify-content: center;
}
.partial-ad:last-of-type{
    margin-top:1rem;
    margin-bottom: 1rem;
    padding-top: 1rem;
    display: flex;
    justify-content: center;
}

.partial-ad img{
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
.border-bottom{
    border-bottom: 1px solid #ccc;
}
.border-top{
    border-top: 1px solid #ccc;
}
.partial-block img{
    border-radius: 0 !important;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
.search-kill-button {
  background-color: #858585   !important; /* light gray for light mode */
  color: white !important; /* dark text for contrast */
}
.aspect-4-3 {
    position: relative;
    width: 100%;
    padding-top: 67%; /* 3/4 = 0.75 → 75% */
    overflow: hidden;
}

.aspect-4-3 img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

   

@media screen and (max-width: 1300px) and (min-width: 1023px) {
    .home-page{
        margin-left: 2rem;
        margin-right: 2rem;
    }
}
@media (max-width: 992px) {
    .toggle-container {
        width: 65px !important;
        height: 23px !important;
    }
    .toggle-slider {
        top: 3px !important;
        left: 4px !important;
        width: 15px !important;
        height: 15px !important;
    }
    .toggle-text {
        top: 50% !important;
        left: 20px !important;
    }
    .toggle-checkbox:not(:checked) + .toggle-container .toggle-text::before {
        font-size: 12px !important;
    }
    .toggle-checkbox:checked + .toggle-container .toggle-slider {
        left: 44px !important;
    }
    .toggle-checkbox:checked + .toggle-container .toggle-text::before {
        font-size: 12px !important;
        right: 56% !important;
    }
    
}
@media screen and (max-width: 768px) {
    .navigation-link{
        font-size: 1rem !important;
        margin-top: 0.5rem;
    }
    h4{
        font-size: 0.9rem !important;
    }
    .partial-ad{
        margin: 1rem 0;
    }
    .header-lg-spacing{
      padding: 1rem 1.5rem 1rem 1rem;
    }
}
@media screen and (max-width: 300px) {
    .navigation-link{
        font-size: 0.8rem !important;
        margin-top: 0.2rem;
    }
    h4{
        font-size: 0.7rem !important;
    }
    .partial-ad img{
        border-radius: 2px;

    }
}

.mobile-header-brand img {
    max-height: 3rem;
}

.mobile-header-toggle {
    min-width: 3rem;
    min-height: 3rem;
    padding: 0.5rem;
}

.mobile-menu-panel {
    color: #111827;
}

.mobile-menu-logo {
    max-height: 3.1rem;
}

.mobile-menu-close {
    width: 3rem;
    height: 3rem;
    background: #ffffff;
}

.mobile-nav-link,
.mobile-nav-section-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.95rem 1rem;
    border: 1px solid transparent;
    border-radius: 1rem;
    color: #111827 !important;
    font-size: 1.05rem !important;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.mobile-nav-link:hover,
.mobile-nav-link:focus,
.mobile-nav-section-button:hover,
.mobile-nav-section-button:focus {
    background: #f3f4f6;
    color: #111827 !important;
}

.mobile-nav-link-current {
    background: #111827;
    border-color: #111827;
    color: #ffffff !important;
}

.mobile-nav-chevron {
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
    transition: transform 0.18s ease;
}

.mobile-nav-children {
    margin-top: 0.45rem;
    margin-left: 0.25rem;
    padding-left: 0.75rem;
    border-left: 1px solid #e5e7eb;
}

.mobile-nav-sublink {
    display: block;
    padding: 0.7rem 0.9rem;
    border-radius: 0.85rem;
    color: #4b5563 !important;
    font-size: 1rem !important;
    font-weight: 600;
    line-height: 1.4;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.mobile-nav-sublink:hover,
.mobile-nav-sublink:focus {
    background: #f3f4f6;
    color: #111827 !important;
}

.mobile-nav-sublink-current {
    background: rgba(17, 24, 39, 0.08);
    color: #111827 !important;
}

.mobile-menu-account,
.mobile-menu-actions {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
}

.mobile-menu-account-name {
    margin-bottom: 0.85rem;
    color: #111827 !important;
    font-size: 1rem !important;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mobile-menu-account-links {
    display: grid;
    gap: 0.25rem;
}

.mobile-menu-primary-action,
.mobile-menu-secondary-action {
    display: block;
    width: 100%;
    padding: 0.95rem 1rem;
    border-radius: 1rem;
    font-size: 1rem !important;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.mobile-menu-primary-action {
    background: #111827;
    border: 1px solid #111827;
    color: #ffffff !important;
}

.mobile-menu-secondary-action {
    margin-top: 0.75rem;
    background: #ffffff;
    border: 1px solid #d1d5db;
    color: #111827 !important;
}

.dark-theme .mobile-menu-panel,
.dark-theme .mobile-menu-header,
.dark-theme .mobile-menu-close,
.dark-theme .mobile-menu-scroll {
    background: #020617 !important;
}

.dark-theme .mobile-header-toggle {
    color: #f8fafc !important;
}

.dark-theme .mobile-header-toggle:hover,
.dark-theme .mobile-header-toggle:focus {
    background: rgba(148, 163, 184, 0.12) !important;
    color: #f8fafc !important;
}

.dark-theme .mobile-menu-header,
.dark-theme .mobile-menu-account,
.dark-theme .mobile-menu-actions {
    border-color: rgba(148, 163, 184, 0.2) !important;
}

.dark-theme .mobile-menu-close {
    border-color: rgba(148, 163, 184, 0.35) !important;
    color: #f8fafc !important;
}

.dark-theme .mobile-nav-link,
.dark-theme .mobile-nav-section-button {
    color: #f8fafc !important;
}

.dark-theme .mobile-nav-link:hover,
.dark-theme .mobile-nav-link:focus,
.dark-theme .mobile-nav-section-button:hover,
.dark-theme .mobile-nav-section-button:focus {
    background: rgba(148, 163, 184, 0.12) !important;
    color: #f8fafc !important;
}

.dark-theme .mobile-nav-link-current {
    background: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
    color: #ffffff !important;
}

.dark-theme .mobile-nav-children {
    border-left-color: rgba(148, 163, 184, 0.2) !important;
}

.dark-theme .mobile-nav-sublink {
    color: #cbd5e1 !important;
}

.dark-theme .mobile-nav-sublink:hover,
.dark-theme .mobile-nav-sublink:focus {
    background: rgba(148, 163, 184, 0.12) !important;
    color: #ffffff !important;
}

.dark-theme .mobile-nav-sublink-current {
    background: rgba(59, 130, 246, 0.18) !important;
    color: #ffffff !important;
}

.dark-theme .mobile-menu-account-name,
.dark-theme .mobile-menu-secondary-action {
    color: #f8fafc !important;
}

.dark-theme .mobile-menu-primary-action {
    background: #2563eb !important;
    border-color: #2563eb !important;
}

.dark-theme .mobile-menu-secondary-action {
    background: transparent !important;
    border-color: rgba(148, 163, 184, 0.35) !important;
}

@media screen and (max-width: 768px) {
    .mobile-header-brand img {
        max-height: 3.3rem;
    }

    .mobile-nav-link,
    .mobile-nav-section-button {
        font-size: 1.12rem !important;
    }

    .mobile-nav-sublink,
    .mobile-menu-primary-action,
    .mobile-menu-secondary-action {
        font-size: 1.02rem !important;
    }
}

.article-body img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

.article-body p[style*="text-align: center"] img,
.article-body p[style*="text-align:center"] img,
.article-body div[style*="text-align: center"] img,
.article-body div[style*="text-align:center"] img,
.article-body figure[style*="text-align: center"] img,
.article-body figure[style*="text-align:center"] img,
.article-body img.aligncenter,
.article-body .aligncenter img,
.article-body .image-style-align-center img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.article-body p[style*="text-align: right"] img,
.article-body p[style*="text-align:right"] img,
.article-body div[style*="text-align: right"] img,
.article-body div[style*="text-align:right"] img,
.article-body figure[style*="text-align: right"] img,
.article-body figure[style*="text-align:right"] img,
.article-body img.alignright,
.article-body .alignright img,
.article-body .image-style-align-right img {
    display: block;
    margin-left: auto;
    margin-right: 0;
}

/* Dark mode polish */
html[data-theme="dark"],
html[data-theme="dark"] body {
    background: #000000 !important;
    color: #e5e7eb;
}

html[data-theme="dark"] .d-none-dark {
    display: none !important;
}

html[data-theme="dark"] .d-block-dark,
html[data-theme="dark"] .hidden.d-block-dark {
    display: block !important;
}

.header-container img.d-none-dark,
.header-container img.d-block-dark {
    max-height: 4rem !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
}

footer img.d-none-dark,
footer img.d-block-dark {
    height: 2.5rem !important;
    max-height: 2.5rem !important;
    width: auto !important;
    object-fit: contain;
}

html[data-theme="dark"] .header-container,
html[data-theme="dark"] footer,
html[data-theme="dark"] .footer-container {
    background: #000000 !important;
}

body.dark-theme .header-container nav > div > a,
body.dark-theme .header-container nav > div > div[role],
body.dark-theme .header-container nav > div > div:not([x-show]),
body.dark-theme .header-container nav > div > .text-black,
body.dark-theme .header-container .text-gray-500,
html[data-theme="dark"] .header-container nav > div > a,
html[data-theme="dark"] .header-container nav > div > div[role],
html[data-theme="dark"] .header-container nav > div > div:not([x-show]),
html[data-theme="dark"] .header-container nav > div > .text-black,
html[data-theme="dark"] .header-container .text-gray-500 {
    color: #6e7f93 !important;
}

body.dark-theme .header-container nav > div > a:hover,
body.dark-theme .header-container nav > div > a:focus,
body.dark-theme .header-container nav > div > div:not([x-show]):hover,
body.dark-theme .header-container nav > div > div:not([x-show]):focus,
body.dark-theme .header-container .hover\:text-black:hover,
body.dark-theme .header-container .focus\:text-black:focus,
html[data-theme="dark"] .header-container nav > div > a:hover,
html[data-theme="dark"] .header-container nav > div > a:focus,
html[data-theme="dark"] .header-container nav > div > div:not([x-show]):hover,
html[data-theme="dark"] .header-container nav > div > div:not([x-show]):focus,
html[data-theme="dark"] .header-container .hover\:text-black:hover,
html[data-theme="dark"] .header-container .focus\:text-black:focus {
    color: #91a4b8 !important;
}

html[data-theme="dark"] .article-body a,
html[data-theme="dark"] .news-detail-hero-image + .article-body a,
html[data-theme="dark"] .rollover-links a,
html[data-theme="dark"] .default-font-size a,
html[data-theme="dark"] .tag-link,
html[data-theme="dark"] .navigation-link {
    color: #6e7f93 !important;
}

html[data-theme="dark"] .article-body a:hover,
html[data-theme="dark"] .rollover-links a:hover,
html[data-theme="dark"] .default-font-size a:hover,
html[data-theme="dark"] .tag-link:hover,
html[data-theme="dark"] .navigation-link:hover {
    color: #91a4b8 !important;
}

html[data-theme="dark"] .featured-editorial h1,
html[data-theme="dark"] .article-header h1,
html[data-theme="dark"] #all-news h1,
html[data-theme="dark"] .news-release-card-container h1,
html[data-theme="dark"] .article-body h1,
html[data-theme="dark"] .article-body h2,
html[data-theme="dark"] .article-body h3,
html[data-theme="dark"] .article-body h4,
html[data-theme="dark"] .latest-header h4,
html[data-theme="dark"] .new-this-week-header h4,
html[data-theme="dark"] .popular-title,
html[data-theme="dark"] .video-header h4 {
    color: #f8fafc !important;
}

html[data-theme="dark"] .article-page-intro,
html[data-theme="dark"] .featured-ed-desc,
html[data-theme="dark"] .article-body,
html[data-theme="dark"] .article-body p,
html[data-theme="dark"] .default-font-size,
html[data-theme="dark"] .default-font-size p,
html[data-theme="dark"] .news-release-card-container,
html[data-theme="dark"] .latest-card-content p,
html[data-theme="dark"] .meta-detail,
html[data-theme="dark"] .meta-detail small {
    color: #d1d5db !important;
}

.article-page-intro{
  margin: 1.5rem 0px !important;
}
.latest-item,
.nrt-author-profile-box,
.nrt-profile-stat {
    border-color: #d8d8d8 !important;
}

html[data-theme="dark"] .latest-item {
    background: #0f172a !important;
    border-color: #374151 !important;
}

html[data-theme="dark"] .latest-card-content .news-details,
html[data-theme="dark"] .latest-card-content h4,
html[data-theme="dark"] .latest-card-content h4 a {
    color: #f8fafc !important;
}

html[data-theme="dark"] .nrt-author-profile-box {
    background: #0f172a !important;
    border-color: #374151 !important;
    color: #e5e7eb !important;
}

html[data-theme="dark"] .nrt-author-profile-box h3 {
    color: #9aaec0 !important;
}

html[data-theme="dark"] .nrt-author-profile-box p {
    color: #d1d5db !important;
}

html[data-theme="dark"] .nrt-author-profile-box__image {
    background: #1f2937 !important;
}

html[data-theme="dark"] .nrt-profile-page,
html[data-theme="dark"] .nrt-profile-hero,
html[data-theme="dark"] .nrt-profile-stat,
html[data-theme="dark"] .nrt-profile-zone {
    background: #0f172a !important;
    border-color: #374151 !important;
    color: #e5e7eb !important;
}

html[data-theme="dark"] .nrt-profile-title-group h1,
html[data-theme="dark"] .nrt-profile-section-heading h2,
html[data-theme="dark"] .nrt-profile-stat-copy strong,
html[data-theme="dark"] .nrt-profile-zone span {
    color: #f8fafc !important;
}

html[data-theme="dark"] .nrt-profile-title-group p,
html[data-theme="dark"] .nrt-profile-section-heading span,
html[data-theme="dark"] .nrt-profile-about,
html[data-theme="dark"] .nrt-profile-muted,
html[data-theme="dark"] .nrt-profile-stat-copy span {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .nrt-profile-role {
    background: #27364a !important;
    color: #e5e7eb !important;
}

html[data-theme="dark"] .nrt-profile-summary {
    background: #111827 !important;
    border-color: #374151 !important;
}

html[data-theme="dark"] .nrt-profile-meter {
    background: #1f2937 !important;
}

html[data-theme="dark"] .settings-page,
html[data-theme="dark"] .uk-card-body,
html[data-theme="dark"] .uk-card-body .form-input,
html[data-theme="dark"] .uk-card-body input,
html[data-theme="dark"] .uk-card-body textarea,
html[data-theme="dark"] .uk-card-body select {
    color: #111827 !important;
}

html[data-theme="dark"] .uk-card-body label,
html[data-theme="dark"] .uk-card-body h2,
html[data-theme="dark"] .uk-card-body h3,
html[data-theme="dark"] .uk-card-body h4,
html[data-theme="dark"] .uk-card-body p,
html[data-theme="dark"] .favorite-zone-card-label {
    color: #f8fafc !important;
}

html[data-theme="dark"] .favorite-zone-card {
    background: #111827 !important;
    border-color: #374151 !important;
}

html[data-theme="dark"] .favorite-zone-card:hover,
html[data-theme="dark"] .favorite-zone-card-selected,
html[data-theme="dark"] .favorite-zone-card:has(input:checked) {
    border-color: #6e7f93 !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .favorite-zone-card-image {
    background: #1f2937 !important;
}

html[data-theme="dark"] .flex.flex-col.items-start.justify-center.w-full.py-6.bg-white,
html[data-theme="dark"] .flex.flex-col.w-full.bg-white {
    background: #0f172a !important;
    border-color: #374151 !important;
}

html[data-theme="dark"] .flex.flex-col.items-start.justify-center.w-full.py-6.bg-white a {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .flex.flex-col.items-start.justify-center.w-full.py-6.bg-white a:hover,
html[data-theme="dark"] .flex.flex-col.items-start.justify-center.w-full.py-6.bg-white a:focus {
    background: #1f2937 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .flex.flex-col.items-start.justify-center.w-full.py-6.bg-white .bg-wave-500 {
    background: #6e7f93 !important;
}

html[data-theme="dark"] #announcement-list .bg-white {
    background: #0f172a !important;
    border-color: #374151 !important;
}

html[data-theme="dark"] #announcement-list #announcement-header > div,
html[data-theme="dark"] #announcement-list p,
html[data-theme="dark"] #announcement-list strong,
html[data-theme="dark"] #announcement-list .announcement-datetime,
html[data-theme="dark"] #announcements-none {
    color: #e5e7eb !important;
}

html[data-theme="dark"] #announcement-list [id^="announcement-li-"] {
    border-color: #374151 !important;
}

html[data-theme="dark"] #announcement-list [id^="announcement-li-"]:hover {
    background: #111827 !important;
}

html[data-theme="dark"] #announcement-list .mark-announcement-read,
html[data-theme="dark"] #announcement-list .bg-gray-100,
html[data-theme="dark"] #announcement-list .bg-gray-100 a {
    background: #111827 !important;
    color: #e5e7eb !important;
}

html[data-theme="dark"] #user-menu:focus,
html[data-theme="dark"] #user-menu:hover {
    border-color: #6e7f93 !important;
}

html[data-theme="dark"] #user-menu + div .bg-white,
html[data-theme="dark"] [aria-labelledby="options-menu"].bg-white {
    background: #0f172a !important;
    border-color: #374151 !important;
}

html[data-theme="dark"] [aria-labelledby="options-menu"] a,
html[data-theme="dark"] [aria-labelledby="options-menu"] span {
    color: #e5e7eb !important;
}

html[data-theme="dark"] [aria-labelledby="options-menu"] a:hover,
html[data-theme="dark"] [aria-labelledby="options-menu"] a:focus {
    background: #111827 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] [aria-labelledby="options-menu"] .bg-gray-200 {
    background: #27364a !important;
    color: #f8fafc !important;
}

html[data-theme="dark"] [aria-labelledby="options-menu"] .border-gray-100 {
    border-color: #374151 !important;
}

html:not([data-theme="dark"]) .nrt-announcement-page,
html:not([data-theme="dark"]) .nrt-announcement-page h1,
html:not([data-theme="dark"]) .nrt-announcement-page h2,
html:not([data-theme="dark"]) .nrt-announcement-page h3,
html:not([data-theme="dark"]) .nrt-announcement-page h4,
html:not([data-theme="dark"]) .nrt-announcement-body,
html:not([data-theme="dark"]) .nrt-announcement-body p {
    color: #111827 !important;
}

html:not([data-theme="dark"]) .nrt-announcement-date,
html:not([data-theme="dark"]) .nrt-announcement-eyebrow,
html:not([data-theme="dark"]) .nrt-announcement-list span {
    color: #4b5563 !important;
}

html[data-theme="dark"] .subscribe-container {
    background: #0f172a !important;
    border-color: #374151 !important;
}

html[data-theme="dark"] .subscribe-title,
html[data-theme="dark"] .subscribe-text {
    color: #f8fafc !important;
}

html[data-theme="dark"] .subscribe-title .nrt-update {
    color: #91a4b8 !important;
}

html[data-theme="dark"] .subscribe-input {
    background: #ffffff !important;
    color: #111827 !important;
}

.custom-home-banner h2,
.custom-home-banner p,
.custom-home-kicker {
    color: #17212f !important;
}

html[data-theme="dark"] .custom-home-banner {
    background: #d9e7f2 !important;
    border-color: rgba(100, 123, 145, 0.45) !important;
}

.pagination .active,
.pagination .page-item.active .page-link {
    background: #647b91 !important;
    border-color: #647b91 !important;
    color: #ffffff !important;
}

.nrt-pagination-current,
html[data-theme="dark"] nav[role="navigation"] span[aria-current="page"] span,
html[data-theme="dark"] nav[role="navigation"] .relative.inline-flex.items-center[aria-current="page"],
html[data-theme="dark"] .nrt-pagination-current {
    background: #647b91 !important;
    border-color: #647b91 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] nav[role="navigation"] a,
html[data-theme="dark"] nav[role="navigation"] span {
    background: #0f172a !important;
    border-color: #374151 !important;
    color: #cbd5e1 !important;
}

html[data-theme="dark"] nav[role="navigation"] span[aria-current="page"] span,
html[data-theme="dark"] .nrt-pagination-current {
    background: #647b91 !important;
    border-color: #647b91 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .album-user-review {
    background: #0f172a !important;
    border-color: #374151 !important;
    color: #e5e7eb !important;
}

html[data-theme="dark"] .album-user-review--staff {
    background: #111827 !important;
}

html[data-theme="dark"] .album-user-review__title,
html[data-theme="dark"] .album-user-review__title a,
html[data-theme="dark"] .album-user-review__byline,
html[data-theme="dark"] .album-user-review__body,
html[data-theme="dark"] .album-user-review__body p {
    color: #e5e7eb !important;
}

html[data-theme="dark"] .album-user-review__toggle {
    color: #91a4b8 !important;
}

html[data-theme="dark"] .album-user-review__staff-label {
    background: #f8fafc !important;
    color: #111827 !important;
}

html[data-theme="dark"] .zone-host .ribbon,
html[data-theme="dark"] .zone-host .ribbon p {
    color: #111827 !important;
}

html[data-theme="dark"] .zone-host .ribbon {
    background: linear-gradient(to right, #ffffff 0%, rgba(255, 255, 255, 0) 100%) !important;
}

html[data-theme="dark"] .zone-host .ribbon p {
    background: transparent !important;
}

/* Sitewide dark mode guardrails */
html[data-theme="dark"] {
    color-scheme: dark;
    background: #020617;
}

html[data-theme="dark"] body,
html[data-theme="dark"] #main-content,
html[data-theme="dark"] #main-content-section,
html[data-theme="dark"] main,
html[data-theme="dark"] .home-page,
html[data-theme="dark"] .grow {
    background: #020617 !important;
    color: #f8fafc !important;
}

html[data-theme="dark"] .d-none-dark {
    display: none !important;
}

html[data-theme="dark"] .d-block-dark {
    display: block !important;
}

html:not([data-theme="dark"]) .d-block-dark {
    display: none !important;
}

html[data-theme="dark"] .header-container,
html[data-theme="dark"] .footer-container,
html[data-theme="dark"] .partial-ad,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border,
html[data-theme="dark"] .border-t,
html[data-theme="dark"] .border-b,
html[data-theme="dark"] .border-l,
html[data-theme="dark"] .border-r,
html[data-theme="dark"] .border-gray-50,
html[data-theme="dark"] .border-gray-100,
html[data-theme="dark"] .border-gray-150,
html[data-theme="dark"] .border-gray-200,
html[data-theme="dark"] .border-gray-300 {
    border-color: #1f2937 !important;
}

html:not([data-theme="dark"]) .border-white,
html:not([data-theme="dark"]) .side-article-header,
html:not([data-theme="dark"]) .trending-info,
html:not([data-theme="dark"]) .trending-footer {
    border-color: #d8e1ea !important;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] label,
html[data-theme="dark"] small,
html[data-theme="dark"] strong,
html[data-theme="dark"] span:not(.article-category):not(.nrt-profile-role):not(.slider):not(.sun-icon):not(.moon-icon),
html[data-theme="dark"] .text-gray-900,
html[data-theme="dark"] .text-gray-800,
html[data-theme="dark"] .text-gray-700,
html[data-theme="dark"] .text-gray-600,
html[data-theme="dark"] .text-gray-500 {
    color: #f8fafc !important;
}

html[data-theme="dark"] .article-body,
html[data-theme="dark"] .article-body p,
html[data-theme="dark"] .article-body li,
html[data-theme="dark"] .featured-ed-desc,
html[data-theme="dark"] .featured-editorial .article-info p,
html[data-theme="dark"] .featured-editorial .article-info .meta-single-line,
html[data-theme="dark"] .news-release-card-container,
html[data-theme="dark"] .nrt-announcement-body {
    color: #f8fafc !important;
}

html[data-theme="dark"] .article-body a,
html[data-theme="dark"] .rollover-links a,
html[data-theme="dark"] .nrt-announcement-body a,
html[data-theme="dark"] .uk-card-body a,
html[data-theme="dark"] .tag-link {
    color: #6e7f93 !important;
}

html[data-theme="dark"] .article-body a:hover,
html[data-theme="dark"] .rollover-links a:hover,
html[data-theme="dark"] .nrt-announcement-body a:hover,
html[data-theme="dark"] .uk-card-body a:hover,
html[data-theme="dark"] .tag-link:hover {
    color: #a9c1f0 !important;
}

html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-gray-50,
html[data-theme="dark"] .bg-gray-100,
html[data-theme="dark"] .article-header,
html[data-theme="dark"] .article-page,
html[data-theme="dark"] .featured-editorial,
html[data-theme="dark"] .trending-info,
html[data-theme="dark"] .side-article-header,
html[data-theme="dark"] .artist-news-features,
html[data-theme="dark"] .new-release-card,
html[data-theme="dark"] .news-release-card-container {
    background: #020617 !important;
}

html[data-theme="dark"] .article-trending,
html[data-theme="dark"] .nrt-trending-card,
html[data-theme="dark"] .favorite-zone-card,
html[data-theme="dark"] .nrt-profile-stat,
html[data-theme="dark"] .album-user-review,
html[data-theme="dark"] .uk-card-body,
html[data-theme="dark"] .modal-content {
    background: #0f172a !important;
    border-color: #1f2937 !important;
    color: #f8fafc !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .form-input {
    background: #ffffff !important;
    color: #111827 !important;
    border-color: #cbd5e1 !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: #6b7280 !important;
}

html[data-theme="dark"] .header-container nav > .relative > a,
html[data-theme="dark"] .header-container nav > .relative > div,
html[data-theme="dark"] .header-container nav > a,
html[data-theme="dark"] .header-container .nav-link {
    color: #f8fafc !important;
}

html[data-theme="dark"] .header-container nav > .relative > a:hover,
html[data-theme="dark"] .header-container nav > .relative > div:hover,
html[data-theme="dark"] .header-container nav > a:hover {
    color: #a9c1f0 !important;
}

html[data-theme="dark"] .header-container .shadow-lg .bg-white,
html[data-theme="dark"] .header-container [x-show="dropdown"] .bg-white {
    background: #0f172a !important;
}

html[data-theme="dark"] .header-container [x-show="dropdown"] a,
html[data-theme="dark"] .header-container [x-show="dropdown"] p {
    color: #ffffff !important;
}

html[data-theme="dark"] .header-container [x-show="dropdown"] a:hover,
html[data-theme="dark"] .header-container [x-show="dropdown"] a:focus {
    background: #54734e !important;
}

html[data-theme="dark"] #user-menu {
    border-color: transparent !important;
}

html[data-theme="dark"] #user-menu:hover,
html[data-theme="dark"] #user-menu:focus,
html[data-theme="dark"] #user-menu[aria-expanded="true"] {
    border-color: #a9c1f0 !important;
}

html[data-theme="dark"] [aria-labelledby="options-menu"],
html[data-theme="dark"] #announcement-list .bg-white {
    background: #0f172a !important;
    border-color: #1f2937 !important;
}

html[data-theme="dark"] #announcement-list .bg-gray-100,
html[data-theme="dark"] #announcement-list .bg-gray-100 a {
    background: #111827 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .settings-page,
html[data-theme="dark"] .flex.flex-col.w-full.bg-white,
html[data-theme="dark"] .flex.flex-col.items-start.justify-center.w-full.py-6.bg-white {
    background: #0f172a !important;
    border-color: #1f2937 !important;
    padding-right: 1rem;
}

html[data-theme="dark"] .flex.flex-col.w-full.bg-white > .border-b {
    background: #0f172a !important;
    border-color: #1f2937 !important;
}

html[data-theme="dark"] .flex.flex-col.items-start.justify-center.w-full.py-6.bg-white a:hover,
html[data-theme="dark"] .flex.flex-col.items-start.justify-center.w-full.py-6.bg-white a:focus {
    background: #1f2937 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .favorite-zone-card-label,
html[data-theme="dark"] .nrt-profile-summary strong,
html[data-theme="dark"] .nrt-profile-summary span,
html[data-theme="dark"] .nrt-profile-stat-copy strong,
html[data-theme="dark"] .nrt-profile-stat-copy span {
    color: #ffffff !important;
}

html[data-theme="dark"] .nrt-profile-hero {
    padding: 2rem !important;
    background:
        linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.94)),
        url("../article-images/trending-2.png") !important;
    border-color: #1f2937 !important;
}

html[data-theme="dark"] .nrt-profile-summary {
    padding-right: 1rem !important;
}

html[data-theme="dark"] .nrt-profile-zones {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
}

html[data-theme="dark"] .nrt-profile-zone {
    width: auto !important;
}

html[data-theme="dark"] .featured-editorial h1,
html[data-theme="dark"] .featured-editorial h2,
html[data-theme="dark"] .news-detail-heading,
html[data-theme="dark"] .article-listing-header h1,
html[data-theme="dark"] .article-listing-header h2,
html[data-theme="dark"] .new-this-week-header h4,
html[data-theme="dark"] .latest-news-header h4,
html[data-theme="dark"] .feature-section h1,
html[data-theme="dark"] .feature-section h2 {
    color: #ffffff !important;
}

html[data-theme="dark"] .new-this-week a,
html[data-theme="dark"] .latest-news a,
html[data-theme="dark"] .headline,
html[data-theme="dark"] .overlay-text {
    color: #ffffff !important;
}

html[data-theme="dark"] .article-ad-container {
    border-left-color: #1f2937 !important;
}

html[data-theme="dark"] .side-article-header,
html[data-theme="dark"] .trending-info,
html[data-theme="dark"] .trending-footer {
    border-color: #1f2937 !important;
}

html[data-theme="dark"] .subscribe-container {
    background: #0f172a !important;
    border-color: #1f2937 !important;
}

html[data-theme="dark"] .subscribe-text,
html[data-theme="dark"] .subscribe-title,
html[data-theme="dark"] .subscribe-title .nrt-update {
    color: #ffffff !important;
}

html[data-theme="dark"] .custom-home-banner h2,
html[data-theme="dark"] .custom-home-banner p,
html[data-theme="dark"] .custom-home-kicker {
    color: #111827 !important;
}

html[data-theme="dark"] nav[role="navigation"] .nrt-pagination-current {
    background: #54734e !important;
    border-color: #54734e !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .zone-host .ribbon,
html[data-theme="dark"] .zone-host .ribbon *,
html[data-theme="dark"] .zone-host-link .ribbon,
html[data-theme="dark"] .zone-host-link .ribbon * {
    color: #111827 !important;
}

html[data-theme="dark"] .zone-host .ribbon,
html[data-theme="dark"] .zone-host-link .ribbon {
    background: linear-gradient(to right, #ffffff 0%, rgba(255, 255, 255, 0) 100%) !important;
}

html[data-theme="dark"] .zone-host .ribbon *,
html[data-theme="dark"] .zone-host-link .ribbon * {
    background: transparent !important;
}

/* Home and zone dark-mode layout polish */
html[data-theme="dark"] .header-container {
    border-bottom-color: #111827 !important;
}

html[data-theme="dark"] .header-container nav > a,
html[data-theme="dark"] .header-container nav > span > a {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .header-container nav > a:hover,
html[data-theme="dark"] .header-container nav > span > a:hover,
html[data-theme="dark"] .header-container nav > a:focus,
html[data-theme="dark"] .header-container nav > span > a:focus {
    color: #ffffff !important;
}

html[data-theme="dark"] .theme-switch .slider {
    background: #42576c !important;
}

html[data-theme="dark"] .theme-switch .slider::after {
    background: #ffffff !important;
}

html[data-theme="dark"] .latest-section .latest-header,
html[data-theme="dark"] .all-videos-section .video-header,
html[data-theme="dark"] .new-this-week-header,
html[data-theme="dark"] .trending-now .trending-header,
html[data-theme="dark"] .popular-news-title {
    border-bottom: 1px solid #2f3b4b !important;
    margin-bottom: 1rem !important;
}

html[data-theme="dark"] .latest-section .latest-header h4,
html[data-theme="dark"] .all-videos-section .video-header h4,
html[data-theme="dark"] .new-this-week-header h4,
html[data-theme="dark"] .popular-title {
    color: #ffffff !important;
    line-height: 1.15 !important;
    margin-bottom: 0.35rem !important;
    text-shadow: none !important;
}

html[data-theme="dark"] .latest-section .latest-header a,
html[data-theme="dark"] .all-videos-section .video-header a,
html[data-theme="dark"] .new-this-week-header a,
html[data-theme="dark"] .trending-header a {
    color: #91a4b8 !important;
    font-weight: 500 !important;
}

html[data-theme="dark"] .latest-section .latest-header a:hover,
html[data-theme="dark"] .all-videos-section .video-header a:hover,
html[data-theme="dark"] .new-this-week-header a:hover,
html[data-theme="dark"] .trending-header a:hover {
    color: #ffffff !important;
}

html[data-theme="dark"] .popular-title::before,
html[data-theme="dark"] .popular-title::after {
    background: #2f3b4b !important;
}

html[data-theme="dark"] #sidebar {
    border-left-color: #1f2937 !important;
}

html[data-theme="dark"] .new-article-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

html[data-theme="dark"] .new-article-list li {
    margin-bottom: 1.25rem !important;
}

html[data-theme="dark"] .article-trending {
    display: block !important;
    overflow: hidden !important;
    width: 100% !important;
    background: #0b1220 !important;
    border: 1px solid #253248 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .article-trending:hover {
    border-color: #54734e !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28) !important;
}

html[data-theme="dark"] .side-article-header {
    overflow: hidden !important;
    width: 100% !important;
    border: 0 !important;
    border-radius: 10px 10px 0 0 !important;
    background: #0b1220 !important;
}

html[data-theme="dark"] .side-article-header img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    border-radius: 10px 10px 0 0 !important;
}

html[data-theme="dark"] .trending-info {
    background: #0b1220 !important;
    border: 0 !important;
    border-top: 1px solid #253248 !important;
    border-radius: 0 0 10px 10px !important;
}

html[data-theme="dark"] .trending-info p {
    color: #ffffff !important;
    margin: 0 !important;
}

html[data-theme="dark"] .trending-link {
    background: #0b1220 !important;
    border-color: #253248 !important;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.03),
        0 10px 26px rgba(255, 255, 255, 0.08) !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease !important;
}

html[data-theme="dark"] .trending-link:hover {
    border-color: #54734e !important;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 14px 34px rgba(255, 255, 255, 0.13) !important;
    transform: translateY(-2px);
}

html[data-theme="dark"] .video-container {
    overflow: hidden !important;
    border: 1px solid #253248 !important;
    border-radius: 8px !important;
    background: #000000 !important;
}

html[data-theme="dark"] .video-container iframe {
    border: 0 !important;
}

html[data-theme="dark"] .latest-item {
    background: #0b1220 !important;
    border-color: #253248 !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .latest-card-content h4,
html[data-theme="dark"] .latest-card-content .navigation-link h4 {
    color: #ffffff !important;
}

html[data-theme="dark"] .latest-card-content p,
html[data-theme="dark"] .latest-card-content .meta-detail,
html[data-theme="dark"] .latest-card-content .meta-detail small {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .footer-container {
    background: #020617 !important;
    border-top-color: #111827 !important;
}

html[data-theme="dark"] .footer-container .home-page {
    background: #020617 !important;
}

html[data-theme="dark"] footer img.d-none-dark,
html[data-theme="dark"] footer img.d-block-dark {
    height: 4rem !important;
    max-height: 4rem !important;
    width: auto !important;
    object-fit: contain !important;
}

html[data-theme="dark"] .footer-container h3 {
    color: #ffffff !important;
    text-shadow: none !important;
}

html[data-theme="dark"] .footer-container .nav-link,
html[data-theme="dark"] .footer-container a,
html[data-theme="dark"] .footer-container li {
    color: #e5e7eb !important;
}

html[data-theme="dark"] .footer-container a:hover,
html[data-theme="dark"] .footer-container .nav-link:hover {
    color: #a9c1f0 !important;
}

/* Elfsight comments widget */
html[data-theme="dark"] .nrt-comment-widget {
    background: transparent !important;
    color: #f8fafc !important;
}

html[data-theme="dark"] .nrt-comment-widget input,
html[data-theme="dark"] .nrt-comment-widget textarea,
html[data-theme="dark"] .nrt-comment-widget [contenteditable="true"],
html[data-theme="dark"] .nrt-comment-widget [role="textbox"] {
    background: transparent !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .nrt-comment-widget input::placeholder,
html[data-theme="dark"] .nrt-comment-widget textarea::placeholder {
    color: #94a3b8 !important;
    opacity: 1 !important;
}

html[data-theme="dark"] .nrt-comment-widget button {
    background: #647b91 !important;
    color: #ffffff !important;
    border-color: #647b91 !important;
}

html[data-theme="dark"] .nrt-comment-widget button:hover {
    background: #54734e !important;
    border-color: #54734e !important;
}

html[data-theme="dark"] .nrt-comment-widget iframe {
    background: transparent !important;
}

html[data-theme="dark"] .nrt-comment-widget [class*="google"],
html[data-theme="dark"] .nrt-comment-widget [class*="Google"],
html[data-theme="dark"] .nrt-comment-widget [class*="facebook"],
html[data-theme="dark"] .nrt-comment-widget [class*="Facebook"],
html[data-theme="dark"] .nrt-comment-widget [aria-label*="Google"],
html[data-theme="dark"] .nrt-comment-widget [aria-label*="Facebook"] {
    background-color: transparent !important;
}

/* Keep Home and Zone playlist artwork square on mobile Chrome. */
@media screen and (max-width: 768px) {
    .featured-playlist-list .article-trending {
        display: block;
        width: 232px;
    }

    .featured-playlist-list .side-article-header {
        width: 232px;
        height: 232px;
        aspect-ratio: 1 / 1;
        overflow: hidden;
    }

    .featured-playlist-list .side-article-header img {
        display: block;
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: cover;
        object-position: center;
    }
}

/* Release archive year tabs */
.year-tabs,
.year-tab {
    color: #111827;
}

html[data-theme="dark"] .year-tabs,
body.dark-theme .year-tabs {
    background: #0f172a !important;
    border: 1px solid #334155;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.32);
}

html[data-theme="dark"] .year-tabs .year-tab,
body.dark-theme .year-tabs .year-tab {
    color: #e2e8f0 !important;
}

html[data-theme="dark"] .year-tabs .year-tab:hover,
body.dark-theme .year-tabs .year-tab:hover {
    background: rgba(96, 165, 250, 0.16) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .year-tabs .year-tab.active,
body.dark-theme .year-tabs .year-tab.active {
    background: #f8fafc !important;
    color: #111827 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

/* Elfsight/Yottie video page header card dark mode */
html[data-theme="dark"] :is(.page-lyric-videos, .page-music-videos) .pages-section .yottie-widget,
html[data-theme="dark"] :is(.page-lyric-videos, .page-music-videos) .pages-section .yottie-widget-header,
html[data-theme="dark"] :is(.page-lyric-videos, .page-music-videos) .pages-section .yottie-widget-header-inner,
html[data-theme="dark"] :is(.page-lyric-videos, .page-music-videos) .pages-section [class*="elfsight-app"],
html[data-theme="dark"] :is(.page-lyric-videos, .page-music-videos) .pages-section [class*="eapps-youtube-feed"] {
    background-color: #0f172a !important;
    border-color: #1f2937 !important;
    color: #f8fafc !important;
}

html[data-theme="dark"] :is(.page-lyric-videos, .page-music-videos) .pages-section .yottie-widget-header {
    overflow: hidden;
    border-radius: 12px !important;
}

html[data-theme="dark"] :is(.page-lyric-videos, .page-music-videos) .pages-section .yottie-widget-header-banner {
    background-color: #0f172a !important;
    background-image: none !important;
}

html[data-theme="dark"] :is(.page-lyric-videos, .page-music-videos) .pages-section .yottie-widget-header-overlay {
    background: transparent !important;
}

html[data-theme="dark"] :is(.page-lyric-videos, .page-music-videos) .pages-section .yottie-widget-header-channel-title a,
html[data-theme="dark"] :is(.page-lyric-videos, .page-music-videos) .pages-section .yottie-widget-header-channel-properties,
html[data-theme="dark"] :is(.page-lyric-videos, .page-music-videos) .pages-section .yottie-widget-header-channel-properties-item,
html[data-theme="dark"] :is(.page-lyric-videos, .page-music-videos) .pages-section .yottie-widget-header-channel-properties-item-divider,
html[data-theme="dark"] :is(.page-lyric-videos, .page-music-videos) .pages-section .yottie-widget-header-channel-properties-item-text {
    color: #f8fafc !important;
}

/* Album community/staff review cards in dark mode */
html[data-theme="dark"] .album-page .album-review-list {
    gap: 1rem;
}

html[data-theme="dark"] .album-page .album-user-review,
html[data-theme="dark"] .album-page .album-review-list .album-user-review:last-child {
    background: rgba(15, 23, 42, 0.72) !important;
    border: 1px solid #1f2937 !important;
    border-radius: 8px;
    padding: 1.25rem !important;
    color: #f8fafc !important;
}

html[data-theme="dark"] .album-page .album-user-review__title,
html[data-theme="dark"] .album-page .album-user-review__title a {
    color: #f8fafc !important;
}

html[data-theme="dark"] .album-page .album-user-review__byline,
html[data-theme="dark"] .album-page .album-user-review__body,
html[data-theme="dark"] .album-page .album-user-review__body p {
    color: #e5e7eb !important;
}

html[data-theme="dark"] .album-page .album-user-review__toggle {
    color: #9aaec0 !important;
}

@media (max-width: 640px) {
    html[data-theme="dark"] .album-page .album-user-review,
    html[data-theme="dark"] .album-page .album-review-list .album-user-review:last-child {
        padding: 1rem !important;
    }
}

/* Profile sections are dividers, not dark cards */
html[data-theme="dark"] .nrt-profile-page .nrt-profile-section,
html[data-theme="dark"] .nrt-profile-page .nrt-profile-reviews {
    background: transparent !important;
    border-color: #1f2937 !important;
}