/* ═══════════════════════════════════════════════
   BUGFIX CSS — loaded after style.css
════════════════════════════════════════════════ */

:root {
  --accent:    #e74c3c;
  --accent2:   #c0392b;
  --green:     #27ae60;
  --bg3:       #f5f5f5;
  --bg4:       #e8e8e8;
}

/* ── SLIDER CLICKABLE LINK ──────────────────── */
.slide-link { display:block; width:100%; height:100%; position:absolute; inset:0; text-decoration:none; cursor:pointer; }
.slide { position:absolute; inset:0; opacity:0; transition:opacity .55s; }
.slide.on { opacity:1; z-index:1; }
.slide-tags { display:flex; gap:6px; margin-top:8px; }
.stag { background:var(--accent); color:#fff; font-size:10px; padding:2px 8px; border-radius:2px; font-weight:600; }
.stag-green { background:var(--green); }

/* ── WATCH EPISODE BUTTON ───────────────────── */
.btn-watch { display:inline-flex; align-items:center; gap:8px; background:var(--accent); color:#fff!important; padding:10px 22px; border-radius:3px; font-size:14px; font-weight:700; text-decoration:none; transition:.15s; border:none; cursor:pointer; }
.btn-watch:hover { background:var(--accent2); color:#fff!important; }
.btn-outline { display:inline-flex; align-items:center; gap:8px; background:transparent; color:var(--text)!important; padding:10px 18px; border-radius:3px; font-size:13px; font-weight:600; text-decoration:none; border:1px solid var(--border); transition:.15s; cursor:pointer; }
.btn-outline:hover { border-color:var(--accent); color:var(--accent)!important; }

/* ── EPISODE LIST CURRENT ───────────────────── */
.ep-list-current { background:rgba(231,76,60,.1)!important; }
.ep-list-current .ep-list-title { color:var(--accent); }
.dcard { display:block; text-decoration:none; }

/* ── DETAIL PAGE META ───────────────────────── */
.detail-meta { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.detail-meta div { font-size:13px; color:var(--text2); }
.detail-meta .label { color:var(--text3); font-weight:600; margin-right:6px; }
.detail-meta a { color:var(--accent); }
.synopsis { font-size:13px; color:var(--text2); line-height:1.75; margin:10px 0; border-left:3px solid var(--accent); padding-left:10px; }

/* ── SERVER SECTION ─────────────────────────── */
.server-section { margin-bottom:14px; }
.server-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; padding:8px 0; border-bottom:1px solid var(--border); margin-bottom:8px; }
.server-label { font-size:14px; font-weight:700; color:var(--text); }
.server-notice { font-size:11px; color:var(--text3); }
.srv-row { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; background:var(--bg3); border:1px solid var(--border); border-radius:3px; margin-bottom:6px; cursor:pointer; transition:.15s; }
.srv-row:hover, .srv-row.on { background:rgba(231,76,60,.1); border-color:var(--accent); }
.srv-row-left { display:flex; align-items:center; gap:10px; }
.srv-icon { color:var(--accent); font-size:14px; }
.srv-name { font-size:13px; font-weight:600; color:var(--text); }
.srv-choose { font-size:11px; color:var(--accent); font-weight:600; }

/* ── WATCH TOP ──────────────────────────────── */
.watch-top { padding:10px 0 12px; border-bottom:1px solid var(--border); margin-bottom:10px; }
.watch-main-title { font-size:15px; font-weight:700; color:var(--text); margin-bottom:4px; }
.watch-category { font-size:12px; color:var(--text3); }
.watch-category a { color:var(--accent); }
.d-other { font-size:12px; color:var(--text3); margin-bottom:8px; }
.detail-tags { font-size:12px; color:var(--text3); }
.detail-tags a { color:var(--accent); margin-right:4px; }
.detail-tags a:hover { text-decoration:underline; }
.detail-tags .label { color:var(--text3); font-weight:600; margin-right:6px; }

/* ── EP LIST ROW ────────────────────────────── */
.ep-list { margin-top:6px; }
.ep-list-row { display:flex; align-items:center; gap:10px; padding:9px 12px; background:var(--bg3); border:1px solid var(--border); border-radius:3px; margin-bottom:4px; text-decoration:none; transition:.15s; }
.ep-list-row:hover { background:rgba(231,76,60,.1); border-color:var(--accent); }
.ep-badge-sub { background:var(--green); color:#fff; font-size:10px; padding:2px 6px; border-radius:2px; font-weight:700; white-space:nowrap; flex-shrink:0; }
.ep-list-title { font-size:13px; color:var(--text); flex:1; }
.ep-list-date { font-size:11px; color:var(--accent); white-space:nowrap; font-weight:600; }

/* ── WATCH ACTIONS ──────────────────────────── */
.watch-actions { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; padding:10px 0; border-bottom:1px solid var(--border); margin-bottom:8px; }
.watch-btns { display:flex; gap:6px; flex-wrap:wrap; }
.wbtn { background:var(--bg3); border:1px solid var(--border); color:var(--text2); padding:6px 12px; border-radius:2px; font-size:11px; cursor:pointer; transition:.15s; text-decoration:none; display:inline-flex; align-items:center; }
.wbtn:hover { background:var(--accent); border-color:var(--accent); color:#fff; }
.wbtn-prev { background:var(--bg4); }
.wbtn-next { background:var(--accent); border-color:var(--accent); color:#fff; }
.wbtn-epnum { background:var(--bg4); color:var(--text3); cursor:default; }
.show-all-eps { font-size:12px; color:var(--accent); text-decoration:none; }
.show-all-eps:hover { text-decoration:underline; }

/* ── PLAYER ─────────────────────────────────── */
.player-wrap { position:relative; width:100%; padding-top:56.25%; background:#000; border-radius:4px; overflow:hidden; margin-bottom:12px; }
.player-iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:none; }
.player-placeholder { position:absolute; top:0; left:0; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#999; font-size:14px; text-align:center; gap:8px; }

/* ── DETAIL CARD ────────────────────────────── */
.detail-card { background:var(--white); border-radius:4px; padding:16px; margin-bottom:14px; }
.detail-top { display:flex; gap:16px; }
.detail-thumb { flex-shrink:0; width:200px; }
.detail-thumb img { width:100%; border-radius:4px; }
.detail-info { flex:1; min-width:0; }
.detail-title { font-size:18px; font-weight:700; color:var(--text); margin-bottom:8px; line-height:1.3; }
.ep-section { background:var(--white); border-radius:4px; padding:14px; margin-bottom:14px; }
.detail-backdrop { width:100%; height:200px; background-size:cover; background-position:center; position:relative; }
.detail-backdrop::after { content:''; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.7)); }

/* ── PAGINATION ─────────────────────────────── */
.pagination { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:4px; padding:16px 0; }
.pg-link { display:inline-flex; align-items:center; justify-content:center; min-width:32px; height:32px; padding:0 8px; background:var(--white); border:1px solid var(--border); border-radius:3px; font-size:12px; color:var(--text2); text-decoration:none; transition:.15s; }
.pg-link:hover { background:var(--accent); border-color:var(--accent); color:#fff; }
.pg-active { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:700; }
.pg-dots { padding:0 6px; color:var(--text3); }

/* ── PAGE H1 ─────────────────────────────────── */
.page-h1 { font-size:16px; font-weight:700; color:var(--text); padding:8px 0; border-bottom:2px solid var(--teal); margin-bottom:6px; }

/* ── SEC HDR ─────────────────────────────────── */
.sec-hdr { display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:2px solid var(--teal); margin-bottom:8px; }
.sec-hdr h3 { font-size:14px; font-weight:700; color:var(--text); }
.view-more { font-size:12px; color:var(--teal); text-decoration:none; font-weight:600; }
.view-more:hover { text-decoration:underline; }

/* ── EMPTY STATE ─────────────────────────────── */
.empty-state { text-align:center; padding:40px 20px; color:var(--text3); }
.empty-state p { margin-bottom:8px; }

/* ── LAZY LOAD IMAGE FIX ────────────────────── */
img[data-src] { opacity: 0; transition: opacity .3s; }
img[data-src].loaded, img:not([data-src]) { opacity: 1; }

/* ═══════════════════════════════════════════════
   MOBILE RESPONSIVE — full coverage
═══════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .page-row { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .drama-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 768px) {
  .drama-grid { grid-template-columns: repeat(3, 1fr); }
  .detail-top { flex-direction: column; align-items: center; text-align: center; }
  .detail-thumb { width: 100%; max-width: 200px; margin: 0 auto; }
  .detail-info { text-align: left; width: 100%; }
  .detail-meta { flex-direction: row; flex-wrap: wrap; gap: 4px 12px; }
  .hdr-search { display: none; }
  .logo-tag { display: none; }
  .site-logo { font-size: 24px; }
  .player-wrap { padding-top: 56.25%; border-radius: 0; }
  .detail-card { padding: 12px; }
  .detail-title { font-size: 16px; }
  .srv-row { padding: 8px 10px; }
  .server-header { flex-direction: column; align-items: flex-start; }
  .page-h1 { font-size: 14px; }
  .detail-tags { text-align: left; }
  .btn-watch { padding: 10px 20px; font-size: 13px; }
  .watch-category { font-size: 11px; word-break: break-word; }
}

@media (max-width: 480px) {
  .drama-grid { grid-template-columns: repeat(2, 1fr); gap: 4px; }
  .dcard-title { font-size: 11px; }
  .ep-list-row { padding: 7px 8px; gap: 6px; }
  .btn-watch { padding: 8px 16px; font-size: 13px; }
  .watch-actions { flex-direction: column; }
  .detail-title { font-size: 15px; }
  .detail-meta div { font-size: 12px; }
  .popular-grid { columns: 1; }
  .tab-row { overflow-x: auto; }
  .tab-btn { font-size: 11px; padding: 6px 10px; white-space: nowrap; }
  .alpha-bar .wrap { flex-wrap: nowrap; justify-content: flex-start; }
  .alpha-bar a { padding: 2px 5px; font-size: 11px; }
  .pagination { gap: 2px; }
  .pg-link { min-width: 28px; height: 28px; font-size: 11px; }
}

/* ── MOBILE NAV ─────────────────────────────── */
@media (min-width: 769px) {
  .mobile-menu-btn { display: none; }
  .mobile-nav { display: none !important; }
}
@media (max-width: 768px) {
  .main-nav { display: none; }
  .mobile-menu-btn { display: flex; align-items: center; justify-content: center; background: var(--orange); color: #fff; border: none; font-size: 22px; width: 46px; height: 46px; cursor: pointer; }
  .mobile-nav { display: none; position: fixed; top: 46px; left: 0; right: 0; bottom: 0; background: var(--white); z-index: 998; overflow-y: auto; padding: 10px 0; }
  .mobile-nav.open { display: block; }
  .mobile-nav a { display: block; padding: 10px 20px; color: var(--text); font-size: 13px; border-bottom: 1px solid var(--border); text-decoration: none; }
  .mobile-nav a:hover { background: var(--teal3); color: var(--teal); }
  .mn-section { border-bottom: 2px solid var(--teal3); }
  .mn-section-title { font-size: 13px; font-weight: 700; color: var(--teal); padding: 8px 20px 4px; }
}

/* ── SEARCH MOBILE ──────────────────────────── */
@media (max-width: 768px) {
  .logo-bar .wrap { flex-wrap: wrap; }
  .hdr-search { width: 100%; margin-top: 8px; order: 3; }
  .hdr-search input { flex: 1; width: auto; }
}