/* ==================== ZAX Latest Releases Enhancement ==================== */

/* Header Styling */
.zax-lr-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.zax-lr-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.zax-lr-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255, 80, 51, 0.1);
  border-radius: 12px;
  border: 1px solid rgba(255, 80, 51, 0.2);
  color: #FF5033;
}

.zax-lr-title {
  font-size: 24px;
  font-weight: 800;
  margin: 0;
  background: linear-gradient(90deg, #fff, #ccc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.5px;
}

/* Chapter List Styles */
.nx-card__chapters li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  margin-bottom: 6px;
  background: color-mix(in oklab, var(--mc-surface-2), transparent 50%);
  border-radius: 8px;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

.nx-card__chapters li a {
  flex: 1;
  font-weight: 600;
  font-size: 14px;
  color: var(--mc-text);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Locked Chapter Styling - Matches User Request */
/* Target items identified as locked by JS */
.nx-card__chapters li[data-is-locked="1"],
.nx-card__chapters li.is-locked {
  background: #151515;
  /* Dark background */
  border: 1px solid rgba(255, 173, 51, 0.15);
  /* Subtle orange border */
}

/* Text Color for Locked Chapters */
.nx-card__chapters li[data-is-locked="1"] a,
.nx-card__chapters li.is-locked a {
  color: #ffad33;
  /* Orange/Gold Color */
}

/* Lock Icon Styling */
.nx-card__chapters li[data-is-locked="1"] i.fa-lock,
.nx-card__chapters li[data-is-locked="1"] svg.lock-icon,
.nx-card__chapters li.is-locked i.fa-lock {
  color: #ffad33;
  margin-right: 6px;
  font-size: 12px;
}

/* Add Lock Icon if missing via CSS (fallback) */
.nx-card__chapters li[data-is-locked="1"] a::before {
  content: "\f023";
  /* Key/Lock unicode from FontAwesome */
  font-family: "Font Awesome 5 Free", "FontAwesome";
  font-weight: 900;
  margin-right: 8px;
  font-size: 12px;
  color: #ffad33;
}

/* If the theme already puts an icon, hide the CSS generated one to avoid double icons, 
   OR rely on the JS adding a specific class if icon exists. 
   Actually, let's check if the element has an icon child. 
   The most robust way: The JS marks it as locked. We apply the style. 
   If text starts with 'Chapter...', we prepend lock. */

/* Right side meta (New / Date) styling */
.nx-card__chapters li .chapter-release-date {
  font-size: 11px;
  color: #666;
  margin-left: auto;
}

.nx-card__chapters li[data-is-locked="1"] .chapter-release-date {
  color: #888;
}

/* "New" Badge styling inside chapter list */
.nx-card__chapters li .c-new-tag,
.nx-card__chapters li img[alt="NEW"],
.nx-card__chapters li .manga-new-tag {
  margin-left: auto;
  /* Push to right */
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #FF5033;
  /* Red/Orange for new */
}

/* Hover Effects */
.nx-card__chapters li:hover {
  background: var(--mc-surface-3);
  transform: translateX(4px);
}

.nx-card__chapters li[data-is-locked="1"]:hover {
  background: #1a1a1a;
  border-color: rgba(255, 173, 51, 0.3);
}

/* Clean up legacy layout */
.nx-card__chapters ul {
  list-style: none;
  padding: 0;
  margin: 0;
}