/*
Theme Name: Astra Child
Theme URI: https://example.com/
Description: My Custom Astra Child Theme
Author: Priyanshu Patel
Author URI: https://example.com/
Template: astra
Version: 1.0.0
*/

:root {
  --lp-accent: #b36d2f;
}

.novel-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
  }
  
  .novel-header {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 30px;
  }
  
  .novel-cover img {
    width: 250px;
    height: auto;
    border-radius: 10px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
  }
  
  .novel-details {
    flex: 1;
  }
  
  .novel-details h1 {
    font-size: 28px;
    margin-bottom: 10px;
  }
  
  .novel-description {
    font-size: 16px;
    line-height: 1.6;
    color: #444;
    margin-bottom: 10px;
  }
  
  .novel-meta {
    font-size: 14px;
    color: #666;
  }
  
  .novel-chapters {
    margin-top: 20px;
    padding: 15px;
    background: #f8f8f8;
    border-radius: 10px;
  }
  
  .novel-chapters h2 {
    margin-bottom: 10px;
    font-size: 22px;
  }
  
  .novel-chapters ul {
    list-style: none;
    padding: 0;
  }
  
  .novel-chapters ul li {
    margin-bottom: 8px;
  }
  
  .novel-chapters ul li a {
    text-decoration: none;
    font-size: 18px;
    color: #0073aa;
  }
  
  .novel-chapters ul li a:hover {
    text-decoration: underline;
  }
  
  .chapter-content {
    max-width: 100%;
    margin: 0 auto;
    padding: 20px;
  }
  
  .chapter-content h1 {
    font-size: 30px;
    margin-bottom: 15px;
  }
  
  .chapter-text {
    font-size: 18px;
    line-height: 1.8;
  }
  
  .novel-flex-wrapper {
    display: flex;
  }
  
  .novel-left {
    margin: 1rem;
    width: 30%;
    position: relative;
  }
  
  .novel-right {
    margin: 1rem;
    width: 45%;
  }
  
  .novel-cover-image {
    width: 100%;
    height: 100%;
    border-radius: 5%;
  }
  .novel-chapters {
    margin: 1rem;
    background-color: #1e1e1e;
  }
  
  .novel-category-badge {
    display: inline-block;
    position: relative;
    top: -100%;
    left: 35%;
    background: green;
    color: black;
    border-radius: 10%;
    padding: 1%;
  }
  
  @media (max-width: 768px) {
    .novel-flex-wrapper {
      flex-direction: column;
    }
  
    .novel-left,
    .novel-right {
      width: 100%;
      margin: 0.5rem 0;
    }
  
    .novel-category-badge {
      display: inline-block;
      position: absolute;
      top: 0%;
      left: 35%;
      background: green;
      color: black;
      border-radius: 10%;
      padding: 1% 2%;
    }
  }
  
  #theme-toggle{
    position: absolute;
    top: 3%;
    right: 1%;
    z-index: 9999;
    background: none; 
    border: none; 
    font-size: 20px;
  }
  @media (max-width: 921px) {
    #theme-toggle{
      position: absolute;
      top: 75px;
      right: 0%;
      z-index: 9999;
      background: none; 
      border: none; 
      font-size: 20px;
    }
  }
  
  /* --- Recently Updated CTA --- */
.ru-cta-wrap{
  display:flex;
  justify-content:center;
  margin: 18px 0 26px;
}

.attention-cta{
  position:relative;
  display:inline-block;
  padding: 12px 20px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing:.2px;
  color:#fff;
  background:#059669;               /* emerald-600 */
  text-decoration:none;
  box-shadow:
    0 8px 24px rgba(5,150,105,.35),
    0 0 0 0 rgba(5,150,105,.6);
  animation:
    ru-bounce 1.1s ease-in-out infinite,
    ru-pulse 2.4s ease-out infinite;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.attention-cta:hover{
  background:#047857;               /* emerald-700 */
  transform: translateY(-2px);
  box-shadow:
    0 10px 28px rgba(5,150,105,.45),
    0 0 0 6px rgba(5,150,105,.25);
}

@keyframes ru-bounce{
  0%,100%{ transform: translateY(0); }
  50%    { transform: translateY(-6px); }
}

@keyframes ru-pulse{
  0%  { box-shadow: 0 0 0 0 rgba(5,150,105,.55), 0 8px 24px rgba(5,150,105,.35); }
  70% { box-shadow: 0 0 0 14px rgba(5,150,105,0),  0 8px 24px rgba(5,150,105,.35); }
  100%{ box-shadow: 0 0 0 0 rgba(5,150,105,0),     0 8px 24px rgba(5,150,105,.35); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .attention-cta{ animation:none; }
}

    /* Theme tokens */
    :root {
      --lp-accent: #b36d2f;
      --lp-bg: #f7f3ef;
      --lp-card: #ffffff;
      --lp-ink: #0b1220;
      --lp-sub: #6b7280;
      --lp-shadow: 0 12px 36px rgba(11, 18, 32, .08);
  }

  html.dark :root {
      --lp-bg: #071022;
      --lp-card: #081220;
      --lp-ink: #e6eef2;
      --lp-sub: #9ca3af;
      --lp-shadow: 0 14px 40px rgba(0, 0, 0, .6);
  }

  /* Utility hide (ensures 'hidden' used by JS works) */
  .hidden {
      display: none !important;
  }

  /* Page */
  #page-content {
      background: var(--lp-bg);
      color: var(--lp-ink);
  }

  /* Filters container – styled to match landing page */
  .novels-filters {
      display: flex;
      gap: 12px;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.9));
      padding: 14px;
      border-radius: 16px;
      box-shadow: var(--lp-shadow);
      margin-bottom: 18px;
  }

  html.dark .novels-filters {
      background: linear-gradient(180deg, rgba(8, 12, 24, 0.6), rgba(8, 12, 24, 0.45));
  }

  /* Left (search) and right (selects) */
  .filter-left {
      display: flex;
      gap: 10px;
      align-items: center;
  }

  .filter-input {
      width: 220px;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid rgba(11, 18, 32, .06);
      background: rgba(255, 255, 255, 0.95);
      box-shadow: 0 8px 18px rgba(11, 18, 32, .04);
      outline: none;
  }

  html.dark .filter-input {
      background: rgba(255, 255, 255, 0.02);
      border-color: rgba(255, 255, 255, 0.04);
      color: var(--lp-ink);
  }

  .filters-right {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items: center;
  }

  /* Select style */
  .filter-select {
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid rgba(11, 18, 32, .06);
      background: rgba(255, 255, 255, 0.95);
  }

  html.dark .filter-select {
      background: rgba(255, 255, 255, 0.02);
      border-color: rgba(255, 255, 255, 0.04);
      color: var(--lp-ink);
  }

  /* Popular genres chips */
  .popular-genres {
      margin: 12px 0 14px;
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: center;
  }

  .chip {
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.94);
      border: 1px solid rgba(11, 18, 32, .06);
      font-weight: 800;
      cursor: pointer;
      transition: all .12s ease;
  }

  html.dark .chip {
      background: rgba(255, 255, 255, 0.02);
      border-color: rgba(255, 255, 255, 0.04);
      color: var(--lp-ink);
  }

  .chip.active {
      background: var(--lp-accent);
      color: #fff;
      transform: translateY(-3px);
      box-shadow: 0 10px 28px rgba(179, 109, 47, .14);
  }

  /* Grid */
  .novel-grid {
      display: grid;
      gap: 16px;
      grid-template-columns: repeat(2, 1fr);
  }

  @media(min-width:640px) {
      .novel-grid {
          grid-template-columns: repeat(3, 1fr);
      }
  }

  @media(min-width:1024px) {
      .novel-grid {
          grid-template-columns: repeat(4, 1fr);
      }
  }

  /* Card */
  .lp-card {
      border-radius: 14px;
      overflow: hidden;
      /* background: var(--lp-card); */
      box-shadow: var(--lp-shadow);
      transition: transform .18s ease, box-shadow .18s ease;
      display: block;
      text-decoration: none;
      color: inherit;
  }

  .lp-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 26px 60px rgba(11, 18, 32, .12);
  }

  /* Cover */
  .cover {
      position: relative;
      width: 100%;
      aspect-ratio: 3/4;
      overflow: hidden;
      background: #111;
  }

  .cover img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform .6s ease;
  }

  .lp-card:hover .cover img {
      transform: scale(1.05);
  }

  /* overlay & badges container */
  .overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.72) 100%);
      pointer-events: none;
  }

  .lp-badges-card {
      position: absolute;
      top: 6px;
      left: 6px;
      display: flex;
      gap: 4px;
      z-index: 20;
      pointer-events: auto;
  }

  /* Stack on small screens to avoid overlap */
  @media(max-width:640px) {
      .lp-badges-card {
          flex-direction: column;
          align-items: flex-start;
          gap: 6px;
      }
  }

  /* Badge base */
  .lp-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 6px;
      border-radius: 999px;
      font-weight: 800;
      font-size: 12px;
      color: #fff;
  }

  /* status accent */
  .lp-badge.status {
      background: var(--lp-accent);
      box-shadow: 0 8px 22px rgba(179, 109, 47, .14);
  }

  /* language style */
  .lp-badge.lang {
    background: var(--lp-accent);
  }

  /* small/large language text */
  .lang-full {
      display: inline-block;
  }

  .lang-short {
      display: none;
      font-weight: 900;
      letter-spacing: .5px;
  }

  /* on small screens show short code */
  @media(max-width:640px) {
      .lang-full {
          display: none;
      }

      .lang-short {
          display: inline-block;
      }
  }

  /* rating badge top-right */
  .lp-rating {
      position: absolute;
      font-size: 14px;
      top: 6px;
      right: 6px;
      z-index: 21;
      background: linear-gradient(180deg, #fff9e9, #f2e6c8);
      color: #111;
      padding: 4px 6px;
      border-radius: 999px;
      font-weight: 900;
      box-shadow: 0 10px 26px rgba(11, 18, 32, .12);
  }

  html.dark .lp-rating {
      background: linear-gradient(180deg, #553b1f, #7d5a33);
      color: #fff;
  }

  /* meta area below cover */
  .lp-meta {
      padding: 6px;
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-height: 86px;
  }

  .lp-title {
      font-weight: 900;
      font-size: 1rem;
      line-height: 1.15;
      margin: 0;
      color: var(--lp-ink);
      font-size: 19px;
  }

  .tags {
      display: flex;
      gap: 5px;
      flex-wrap: wrap;
  }
  .tags .tag{
    background-color: var(--lp-accent) !important;
  }

  .tag {
      font-size: 11px;
      padding: 4px 8px;
      border-radius: 999px;
      background: rgba(0, 0, 0, 0.6);
      color: #fff !important;
      font-weight: 800;
  }

  /* counts */
  .chapters-count {
      color: var(--lp-sub);
      font-weight: 700;
      font-size: 12px;
  }

  /* skeleton */
  .skeleton-card {
      border-radius: 12px;
      background: linear-gradient(90deg, #eee, #f6f6f6, #eee);
      min-height: 260px;
  }

  /* ensure novels-section spacing */
  .recent-updates-section {
      margin-top: 28px;
      padding: 14px;
      border-radius: 12px;
  }
  :root {
      --lp-accent: #b36d2f;
      --lp-bg: #f7f3ef;
      --lp-card: #ffffff;
      --lp-ink: #0b1220;
      --lp-sub: #6b7280;
      --lp-shadow: 0 12px 36px rgba(11, 18, 32, .08);

      /* skeleton defaults (light) */
      --skeleton-1: #eeeeee;
      --skeleton-2: #f6f6f6;
  }

  /* dark mode overrides (when <html class="dark"> is used) */
  html.dark {
      --lp-bg: #071022;
      --lp-card: #081220;
      --lp-ink: #e6eef2;
      --lp-sub: #9ca3af;
      --lp-shadow: 0 14px 40px rgba(0, 0, 0, .6);

      --skeleton-1: #0c1320;
      --skeleton-2: #081020;
  }

  /* utility hidden (used by JS) */
  .hidden {
      display: none !important;
  }

  /* Card: ensure card background/text follow tokens */
  .lp-card {
      /* background-color: var(--lp-card); */
      color: var(--lp-ink);
  }

  /* Ensure children inherit the card color unless explicitly styled */
  .lp-card * {
      color: inherit;
  }

  /* Cover image behavior (no change) */
  .lp-card .cover img {
      transition: transform .6s ease;
  }

  /* Make lp-meta transparent so it inherits the card background,
 and ensure text uses the theme ink variable (guarantee visibility) */
  .lp-meta {
      background-color: transparent;
      color: var(--lp-ink);
  }

  /* Title: explicitly set readable color on both themes */
  .lp-title {
      color: var(--lp-ink);
      font-weight: 900;
      margin: 0;
  }

  /* tags: keep contrast; adjust for dark mode slightly */
  .lp-meta .tag {
      background: rgba(0, 0, 0, 0.62);
      color: #fff;
      font-weight: 800;
  }

  html.dark .lp-meta .tag {
      background: rgba(255, 255, 255, 0.06);
      color: #fff;
  }

  /* Badge stack behavior — prevents overlap on small screens */
  .lp-badges-card {
      display: flex;
      gap: 8px;
      align-items: center;
  }

  @media (max-width: 640px) {
      .lp-badges-card {
          flex-direction: column;
          align-items: flex-start;
          gap: 6px;
      }
  }

  /* Language display: full on desktop, short on mobile */
  .lang-full {
      display: inline-block;
  }

  .lang-short {
      display: none;
  }

  @media (max-width:640px) {
      .lang-full {
          display: none;
      }

      .lang-short {
          display: inline-block;
          font-weight: 900;
          letter-spacing: .5px;
      }
  }

  /* rating badge should remain readable */
  .lp-rating {
      color: inherit;
  }

  /* Skeleton: theme-aware gradient — no bright white in dark mode */
  .skeleton-card {
      border-radius: 12px;
      min-height: 260px;
      background: linear-gradient(90deg, var(--skeleton-1), var(--skeleton-2), var(--skeleton-1));
      box-shadow: none;
  }
  /* Prevent Astra/global link hover colors from affecting lp-cards */
.lp-card,
.lp-card:hover,
.lp-card:focus {
color: var(--lp-ink);  /* always use theme ink for text */
}

/* Ensure badges + rating keep their own styles */
.lp-card .lp-badge,
.lp-card .lp-rating,
.lp-card .chapters-count,
.lp-card .tags .tag,
.lp-card .lp-title {
color: inherit; /* force inherit from lp-card (not global a:hover) */
}

/* === Filter Section Styling === */

/* Inputs (search + selects) */
.lp-input {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--lp-sub);
  border-radius: 0.75rem;
  background: var(--lp-card);
  color: var(--lp-ink);
  font-size: 0.9rem;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.lp-input:focus {
  outline: none;
  border-color: var(--lp-accent);
  box-shadow: 0 0 0 3px rgba(179, 109, 47, 0.2);
}

/* Buttons */
.lp-btn {
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.5rem 0.9rem;
  border-radius: 0.75rem;
  background: var(--lp-accent);
  color: #fff;
  transition: background 0.25s ease, transform 0.2s ease;
}

.lp-btn:hover {
  background: #9a5626; /* darker accent */
  transform: translateY(-1px);
}

.lp-btn--ghost {
  background: transparent;
  border: 1px solid var(--lp-sub);
  color: var(--lp-ink);
}

.lp-btn--ghost:hover {
  border-color: var(--lp-accent);
  color: var(--lp-accent);
}

/* Chips (popular genres) */
.lp-chip {
  display: inline-block;
  font-size: 0.8rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: var(--lp-accent-2);
  color: #fff;
  cursor: pointer;
  transition: background 0.25s ease;
}

.lp-chip:hover {
  background: #0b807f; /* darker emerald */
}

/* Labels for selects */
.lp-select-label {
  display: block;
  font-size: 0.75rem;
  color: var(--lp-sub);
  margin-bottom: 0.35rem;
}

/* Toggle button on mobile */
.lp-filter-toggle {
  border: 1px solid var(--lp-sub);
  background: var(--lp-card);
  color: var(--lp-ink);
}

.lp-filter-toggle:hover {
  border-color: var(--lp-accent);
  color: var(--lp-accent);
}
.lp-filters-wrap{
  margin: 10px 0px;
}
#clear-filters,#filter-toggle-btn{
  background-color: var(--lp-accent);
}
#clear-filters:hover ,#filter-toggle-btn:hover{
  background: white;
}
.lp-filters-inner{
  margin-bottom: 15px;
}
.view-all:hover{
  background-color: white;
  color: var(--lp-accent);
}
.lp-select-label{
  color: var(--lp-accent);
  font-size: 12px;
}
.hero-tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px
}

.hero-tag-pill {
  background: linear-gradient(90deg, var(--lp-accent), #ff7a93);
  color: #fff;
  padding: 4px 6px;
  border-radius: 999px;
  font-weight: 700;
}

/* Large devices: Show 5 tags */
@media (min-width: 1024px) {
  .hero-tags-list .hero-tag-pill:nth-child(n+6) {
    display: none; /* Hide tags beyond 5 for large devices */
  }
}

/* Medium devices: Show 4 tags */
@media (max-width: 1023px) and (min-width: 768px) {
  .hero-tags-list .hero-tag-pill:nth-child(n+5) {
    display: none; /* Hide tags beyond 4 for medium devices */
  }
}

/* Small devices: Show 3 tags */
@media (max-width: 767px) {
  .hero-tags-list .hero-tag-pill:nth-child(n+4) {
    display: none; /* Hide tags beyond 3 for small devices */
  }
}
.lp-hero-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;   /* show max 2 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}