/* =============================================================================
   style.css — Upcoming & Ongoing BL Series (BLheart.com)
   -----------------------------------------------------------------------------
   Everything is scoped under #blh-app and prefixed .blh- so it cannot leak into
   or be overridden by your WordPress theme. You should not need to edit this.
   -----------------------------------------------------------------------------
   CONTENTS
     1. Design tokens (colors, type, spacing)   6. Cards
     2. Reset (scoped)                          7. Episode tracker / progress
     3. Hero + live stats                       8. Badges
     4. Tabs / navigation                       9. Buttons, misc, back-to-top
     5. Sticky filter bar                      10. Animations + responsive + a11y
   ============================================================================= */

/* ---------- Google Fonts (Poppins display + Inter body) ------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@500;600;700;800&display=swap');

/* ============================ 1. DESIGN TOKENS ============================= */
#blh-app{
  /* Palette — violet-undertoned black with a rose→violet accent */
  --blh-bg:            #0d0b12;
  --blh-bg-2:         #120f19;
  --blh-surface:      #171320;
  --blh-surface-2:    #211a2e;
  --blh-surface-3:    #2b2340;
  --blh-line:         rgba(255,255,255,.08);
  --blh-line-strong:  rgba(255,255,255,.16);

  --blh-text:         #f5f2fa;
  --blh-muted:        #a89fb8;
  --blh-faint:        #756c86;

  --blh-pink:         #ff5c8a;
  --blh-purple:       #a855f7;
  --blh-grad:         linear-gradient(120deg,#ff5c8a 0%,#a855f7 100%);
  --blh-grad-soft:    linear-gradient(120deg,rgba(255,92,138,.16),rgba(168,85,247,.16));

  --blh-blue:         #4f8cff;   /* Upcoming  */
  --blh-green:        #2ee6a0;   /* Airing    */
  --blh-gray:         #7b7390;   /* Completed */

  /* Elevation */
  --blh-shadow:       0 8px 30px rgba(0,0,0,.45);
  --blh-shadow-lg:    0 18px 60px rgba(0,0,0,.55);
  --blh-glow:         0 0 0 1px rgba(255,92,138,.45), 0 0 34px rgba(255,92,138,.28);

  /* Shape + rhythm */
  --blh-radius:       18px;
  --blh-radius-sm:    12px;
  --blh-radius-pill:  999px;
  --blh-gap:          22px;
  --blh-maxw:         1200px;
  /* If your WordPress theme has a STICKY header that covers the filter bar
     when it sticks, set this to your header's height, e.g.
     #blh-app{ --blh-sticky-top:70px; }  (add it once, anywhere in your CSS). */
  --blh-sticky-top:   0px;

  --blh-font:         'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --blh-display:      'Poppins', var(--blh-font);
}

/* Light theme — the DEFAULT for the homepage embed (class set in the HTML).
   Tuned to sit naturally on a white WordPress page: white rounded cards, soft
   purple-tinted shadows, hairline borders, pink/purple accents that still pop. */
#blh-app.blh-light{
  --blh-bg:           #ffffff;
  --blh-bg-2:        #faf7ff;
  --blh-surface:     #ffffff;
  --blh-surface-2:   #f7f2fd;
  --blh-surface-3:   #efe6fb;
  --blh-line:        rgba(28,16,48,.09);
  --blh-line-strong: rgba(28,16,48,.15);
  --blh-text:        #1c1524;
  --blh-muted:       #64596f;
  --blh-faint:       #948aa3;
  --blh-shadow:      0 6px 22px rgba(90,50,130,.10);
  --blh-shadow-lg:   0 16px 44px rgba(90,50,130,.16);
  --blh-glow:        0 0 0 1px rgba(255,92,138,.5), 0 6px 26px rgba(255,92,138,.22);
}
/* Title reads as gradient ink (not white-on-dark) when light. */
#blh-app.blh-light .blh-hero h1{
  background:linear-gradient(120deg,#ff4d80 0%,#a855f7 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* Soft light hero band instead of the dark glow. */
#blh-app.blh-light .blh-hero{
  background:
    radial-gradient(760px 300px at 50% -120px,rgba(168,85,247,.16),transparent 62%),
    radial-gradient(560px 240px at 12% 0,rgba(255,92,138,.14),transparent 60%),
    var(--blh-bg);
}
#blh-app.blh-light .blh-eyebrow{border-color:rgba(255,92,138,.3);}
#blh-app.blh-light .blh-country{color:#fff;}

/* ============================ 2. SCOPED RESET ============================== */
#blh-app{
  background:var(--blh-bg);
  color:var(--blh-text);
  font-family:var(--blh-font);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  padding-bottom:70px;
  overflow-x:hidden;
}
#blh-app *,#blh-app *::before,#blh-app *::after{box-sizing:border-box;}
#blh-app h1,#blh-app h2,#blh-app h3,#blh-app p{margin:0;}
#blh-app img{display:block;max-width:100%;}
#blh-app button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
#blh-app a{color:inherit;text-decoration:none;}
#blh-app .blh-wrap{max-width:var(--blh-maxw);margin:0 auto;padding:0 20px;}
#blh-app :focus-visible{outline:2px solid var(--blh-pink);outline-offset:3px;border-radius:6px;}

/* ============================ 3. HERO + STATS ============================= */
#blh-app .blh-hero{
  position:relative;
  padding:40px 0 30px;   /* compact: this sits inside your homepage, below Featured */
  text-align:center;
  background:
    radial-gradient(1000px 420px at 50% -140px,rgba(168,85,247,.35),transparent 60%),
    radial-gradient(700px 320px at 15% 0,rgba(255,92,138,.22),transparent 60%),
    var(--blh-bg);
  overflow:hidden;
}
#blh-app .blh-hero::after{ /* faint heartbeat line, the brand signature */
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--blh-grad);opacity:.5;
}
#blh-app .blh-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blh-pink);
  padding:7px 15px;border-radius:var(--blh-radius-pill);
  background:var(--blh-grad-soft);border:1px solid var(--blh-line-strong);
  margin-bottom:20px;
}
#blh-app .blh-hero h1{
  font-family:var(--blh-display);font-weight:800;
  font-size:clamp(2rem,5.5vw,3.6rem);line-height:1.2;letter-spacing:-.02em;
  padding-bottom:.08em;
  background:linear-gradient(120deg,#fff 20%,#ffd0e0 55%,#d7b3ff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
#blh-app .blh-hero p{
  max-width:640px;margin:18px auto 0;color:var(--blh-muted);
  font-size:clamp(.95rem,2vw,1.08rem);
}
#blh-app .blh-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  max-width:640px;margin:36px auto 0;
}
#blh-app .blh-stat{
  background:var(--blh-surface);border:1px solid var(--blh-line);
  border-radius:var(--blh-radius);padding:18px 12px;box-shadow:var(--blh-shadow);
}
#blh-app .blh-stat b{
  display:block;font-family:var(--blh-display);font-weight:700;
  font-size:clamp(1.5rem,4vw,2.1rem);
  background:var(--blh-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
#blh-app .blh-stat span{font-size:.76rem;color:var(--blh-muted);letter-spacing:.02em;}

/* ============================ 4. TABS ==================================== */
#blh-app .blh-tabs{
  display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
  padding:24px 20px 4px;max-width:var(--blh-maxw);margin:0 auto;
  -webkit-overflow-scrolling:touch;
}
#blh-app .blh-tabs::-webkit-scrollbar{display:none;}
#blh-app .blh-tab{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  padding:11px 18px;border-radius:var(--blh-radius-pill);
  background:var(--blh-surface);border:1px solid var(--blh-line);
  color:var(--blh-muted);font-weight:600;font-size:.9rem;
  transition:transform .15s ease,color .15s ease,border-color .15s ease,background .15s ease;
}
#blh-app .blh-tab:hover{transform:translateY(-2px);color:var(--blh-text);}
#blh-app .blh-tab[aria-selected="true"]{
  color:#fff;background:var(--blh-grad);border-color:transparent;box-shadow:0 8px 22px rgba(168,85,247,.35);
}
#blh-app .blh-tab .blh-count{
  font-size:.72rem;padding:1px 8px;border-radius:var(--blh-radius-pill);
  background:rgba(255,255,255,.12);
}

/* ============================ 5. FILTER BAR ============================== */
#blh-app .blh-filters{
  position:sticky;top:var(--blh-sticky-top);z-index:40;
  margin-top:14px;padding:14px 0;
  background:color-mix(in srgb,var(--blh-bg) 88%,transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--blh-line);
}
#blh-app .blh-filters .blh-wrap{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
}
#blh-app .blh-search{position:relative;flex:1 1 240px;min-width:180px;}
#blh-app .blh-search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;color:var(--blh-faint);pointer-events:none;}
#blh-app .blh-search input{
  width:100%;padding:11px 14px 11px 40px;border-radius:var(--blh-radius-pill);
  background:var(--blh-surface);border:1px solid var(--blh-line);color:var(--blh-text);
  font-size:.9rem;transition:border-color .15s ease;
}
#blh-app .blh-search input:focus{border-color:var(--blh-pink);outline:none;}
#blh-app .blh-search input::placeholder{color:var(--blh-faint);}
#blh-app select.blh-select{
  appearance:none;-webkit-appearance:none;
  padding:11px 34px 11px 14px;border-radius:var(--blh-radius-pill);
  background:var(--blh-surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a89fb8' stroke-width='3'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 13px center;
  border:1px solid var(--blh-line);color:var(--blh-text);font-size:.86rem;font-weight:500;
  transition:border-color .15s ease;
}
#blh-app select.blh-select:focus{border-color:var(--blh-pink);outline:none;}
#blh-app .blh-reset{
  padding:11px 16px;border-radius:var(--blh-radius-pill);font-weight:600;font-size:.86rem;
  color:var(--blh-pink);border:1px solid var(--blh-line-strong);background:var(--blh-grad-soft);
  transition:transform .15s ease,box-shadow .15s ease;
}
#blh-app .blh-reset:hover{transform:translateY(-2px);}

/* ============================ 6. CARDS =================================== */
#blh-app main{padding-top:30px;}
#blh-app .blh-section{scroll-margin-top:80px;}
#blh-app .blh-section-head{display:flex;align-items:center;gap:12px;margin:8px 0 20px;}
#blh-app .blh-section-head h2{
  font-family:var(--blh-display);font-weight:700;font-size:1.35rem;letter-spacing:-.01em;
}
#blh-app .blh-section-head .blh-rule{flex:1;height:1px;background:var(--blh-line);}

#blh-app .blh-grid{
  display:grid;gap:var(--blh-gap);
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
}
#blh-app .blh-card{
  position:relative;display:flex;flex-direction:column;
  background:var(--blh-surface);border:1px solid var(--blh-line);
  border-radius:var(--blh-radius);overflow:hidden;box-shadow:var(--blh-shadow);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
  animation:blh-fade .45s ease both;
}
#blh-app .blh-card:hover{
  transform:translateY(-6px);box-shadow:var(--blh-shadow-lg);border-color:var(--blh-line-strong);
}
#blh-app .blh-poster{
  position:relative;aspect-ratio:2/3;background:var(--blh-surface-2);overflow:hidden;
}
#blh-app .blh-poster img{
  width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .5s ease;
}
#blh-app .blh-poster img.blh-loaded{opacity:1;}
#blh-app .blh-skeleton{ /* shimmer placeholder reserving the poster space */
  position:absolute;inset:0;
  background:linear-gradient(100deg,var(--blh-surface-2) 30%,var(--blh-surface-3) 50%,var(--blh-surface-2) 70%);
  background-size:200% 100%;animation:blh-shimmer 1.4s infinite;
}
#blh-app .blh-poster-top{
  position:absolute;top:10px;left:10px;right:10px;
  display:flex;justify-content:space-between;align-items:flex-start;gap:8px;z-index:2;
}
#blh-app .blh-fav{
  width:38px;height:38px;border-radius:50%;flex:0 0 auto;
  display:grid;place-items:center;
  background:rgba(13,11,18,.55);backdrop-filter:blur(6px);border:1px solid var(--blh-line-strong);
  transition:transform .15s ease,background .15s ease;
}
#blh-app .blh-fav svg{width:19px;height:19px;stroke:#fff;fill:none;transition:fill .2s ease,stroke .2s ease;}
#blh-app .blh-fav:hover{transform:scale(1.1);}
#blh-app .blh-fav.blh-on svg{fill:var(--blh-pink);stroke:var(--blh-pink);}
#blh-app .blh-fav.blh-on{animation:blh-pop .35s ease;}

#blh-app .blh-poster-bottom{
  position:absolute;left:0;right:0;bottom:0;padding:34px 12px 12px;z-index:2;
  background:linear-gradient(transparent,rgba(8,6,12,.92));
  display:flex;align-items:center;gap:8px;
}
#blh-app .blh-flag{font-size:1rem;line-height:1;}
#blh-app .blh-country{font-size:.76rem;color:#e7dcf2;font-weight:500;}
#blh-app .blh-platform{
  margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  font-size:.72rem;font-weight:600;color:#fff;
  padding:4px 9px;border-radius:var(--blh-radius-pill);
}
#blh-app .blh-platform .blh-plogo{width:13px;height:13px;border-radius:3px;display:inline-block;}

#blh-app .blh-body{padding:14px 15px 16px;display:flex;flex-direction:column;gap:11px;flex:1;}
#blh-app .blh-title{
  font-family:var(--blh-display);font-weight:600;font-size:1.02rem;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
#blh-app .blh-meta{display:flex;flex-direction:column;gap:3px;font-size:.8rem;color:var(--blh-muted);}
#blh-app .blh-meta .blh-when{color:var(--blh-text);font-weight:500;}
#blh-app .blh-meta small{color:var(--blh-faint);font-size:.72rem;}

/* Countdown */
#blh-app .blh-countdown{
  display:flex;align-items:baseline;gap:6px;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum";
  font-weight:600;font-size:.92rem;color:var(--blh-text);
}
#blh-app .blh-countdown .blh-cd-label{font-size:.68rem;font-weight:600;color:var(--blh-faint);
  text-transform:uppercase;letter-spacing:.08em;}

/* ======================= 7. EPISODE TRACKER ============================= */
#blh-app .blh-tracker{
  background:var(--blh-surface-2);border:1px solid var(--blh-line);
  border-radius:var(--blh-radius-sm);padding:11px 12px;display:flex;flex-direction:column;gap:9px;
}
#blh-app .blh-track-row{display:flex;justify-content:space-between;align-items:center;font-size:.78rem;}
#blh-app .blh-track-row b{font-weight:600;}
#blh-app .blh-ep-now{color:var(--blh-text);font-weight:600;}
#blh-app .blh-ep-pct{color:var(--blh-pink);font-weight:700;font-variant-numeric:tabular-nums;}
#blh-app .blh-progress{height:8px;border-radius:var(--blh-radius-pill);background:rgba(255,255,255,.08);overflow:hidden;}
#blh-app .blh-progress > i{
  display:block;height:100%;border-radius:var(--blh-radius-pill);background:var(--blh-grad);
  transition:width .8s cubic-bezier(.2,.8,.2,1);
}
#blh-app .blh-next{font-size:.78rem;color:var(--blh-muted);}
#blh-app .blh-next b{color:var(--blh-text);font-weight:600;}

/* ============================ 8. BADGES ================================= */
#blh-app .blh-badge{
  display:inline-flex;align-items:center;gap:5px;
  font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:5px 10px;border-radius:var(--blh-radius-pill);
  background:rgba(13,11,18,.55);backdrop-filter:blur(6px);border:1px solid var(--blh-line-strong);
}
#blh-app .blh-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;}
#blh-app .blh-badge.blh-upcoming{color:var(--blh-blue);}
#blh-app .blh-badge.blh-airing{color:var(--blh-green);}
#blh-app .blh-badge.blh-completed{color:var(--blh-gray);}
#blh-app .blh-badge.blh-live::before{animation:blh-pulse 1.4s infinite;}

#blh-app .blh-chip{
  display:inline-flex;align-items:center;gap:5px;align-self:flex-start;
  font-size:.68rem;font-weight:700;padding:4px 10px;border-radius:var(--blh-radius-pill);
}
#blh-app .blh-chip.blh-new{color:#fff;background:var(--blh-grad);}
#blh-app .blh-chip.blh-finale{color:#ffd7a0;background:rgba(255,150,60,.16);border:1px solid rgba(255,170,80,.4);}

/* Airing-today glow — the highest-priority visual on the page */
#blh-app .blh-card.blh-today{border-color:transparent;box-shadow:var(--blh-glow);}
#blh-app .blh-card.blh-today::before{
  content:"";position:absolute;inset:0;border-radius:var(--blh-radius);padding:1px;
  background:var(--blh-grad);pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.9;
}

/* ==================== 9. BUTTONS / ACTIONS / MISC ======================= */
#blh-app .blh-actions{display:flex;gap:8px;margin-top:auto;}
#blh-app .blh-btn{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 10px;border-radius:var(--blh-radius-sm);font-weight:600;font-size:.8rem;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
}
#blh-app .blh-btn svg{width:15px;height:15px;}
#blh-app .blh-btn-primary{color:#fff;background:var(--blh-grad);box-shadow:0 6px 16px rgba(168,85,247,.3);}
#blh-app .blh-btn-primary:hover{transform:translateY(-2px);}
#blh-app .blh-btn-ghost{
  flex:0 0 auto;width:40px;color:var(--blh-muted);background:var(--blh-surface-2);border:1px solid var(--blh-line);
}
#blh-app .blh-btn-ghost:hover{transform:translateY(-2px);color:var(--blh-text);}

/* Collapsible completed archive */
#blh-app .blh-archive{
  background:var(--blh-surface);border:1px solid var(--blh-line);border-radius:var(--blh-radius);
  padding:6px 6px;margin-bottom:20px;
}
#blh-app .blh-archive > summary{
  list-style:none;cursor:pointer;padding:14px 16px;display:flex;align-items:center;gap:12px;
  font-family:var(--blh-display);font-weight:600;font-size:1.05rem;border-radius:var(--blh-radius-sm);
}
#blh-app .blh-archive > summary::-webkit-details-marker{display:none;}
#blh-app .blh-archive > summary::after{
  content:"";margin-left:auto;width:9px;height:9px;border-right:2px solid var(--blh-muted);
  border-bottom:2px solid var(--blh-muted);transform:rotate(45deg);transition:transform .2s ease;
}
#blh-app .blh-archive[open] > summary::after{transform:rotate(-135deg);}
#blh-app .blh-archive > summary:hover{background:var(--blh-surface-2);}
#blh-app .blh-archive .blh-grid{padding:16px 12px 14px;}

/* Empty state */
#blh-app .blh-empty{
  text-align:center;padding:60px 20px;color:var(--blh-muted);
  border:1px dashed var(--blh-line-strong);border-radius:var(--blh-radius);
  background:var(--blh-grad-soft);
}
#blh-app .blh-empty svg{width:52px;height:52px;margin:0 auto 16px;stroke:var(--blh-pink);opacity:.8;}
#blh-app .blh-empty h3{font-family:var(--blh-display);color:var(--blh-text);margin-bottom:6px;font-size:1.1rem;}

/* Toast (copy / share feedback) */
#blh-app .blh-toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
  background:var(--blh-surface-3);color:var(--blh-text);border:1px solid var(--blh-line-strong);
  padding:12px 20px;border-radius:var(--blh-radius-pill);font-size:.86rem;font-weight:500;
  box-shadow:var(--blh-shadow-lg);opacity:0;pointer-events:none;transition:all .25s ease;z-index:100;
}
#blh-app .blh-toast.blh-show{opacity:1;transform:translateX(-50%) translateY(0);}

/* Back to top + theme toggle (fixed) */
#blh-app .blh-fab{
  position:fixed;right:22px;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;z-index:60;
  background:var(--blh-surface-3);border:1px solid var(--blh-line-strong);box-shadow:var(--blh-shadow);
  transition:transform .2s ease,opacity .2s ease;
}
#blh-app .blh-fab svg{width:20px;height:20px;stroke:var(--blh-text);}
#blh-app .blh-fab:hover{transform:translateY(-3px);}
#blh-app .blh-theme-toggle{bottom:80px;}
#blh-app .blh-top{bottom:22px;opacity:0;pointer-events:none;}
#blh-app .blh-top.blh-visible{opacity:1;pointer-events:auto;}

/* ==================== 10. ANIMATIONS / RESPONSIVE / A11Y ================= */
@keyframes blh-fade{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
@keyframes blh-shimmer{to{background-position:-200% 0;}}
@keyframes blh-pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.35;transform:scale(1.5);}}
@keyframes blh-pop{0%{transform:scale(1);}40%{transform:scale(1.35);}100%{transform:scale(1);}}

/* Tablet */
@media (max-width:760px){
  #blh-app .blh-hero{padding:48px 0 30px;}
  #blh-app .blh-stats{grid-template-columns:repeat(2,1fr);}
  #blh-app .blh-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px;}
}
/* Phone */
@media (max-width:480px){
  #blh-app .blh-wrap{padding:0 14px;}
  #blh-app .blh-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
  #blh-app .blh-title{font-size:.9rem;}
  #blh-app .blh-search{flex-basis:100%;}
  #blh-app select.blh-select{flex:1 1 45%;}
  #blh-app .blh-body{padding:11px 11px 13px;}
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion:reduce){
  #blh-app *,#blh-app *::before,#blh-app *::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
}