/* dorama.hypertv.org — app UI styles (works with plex style-starter.css) */

:root{
  --films-line: var(--border);
  --films-panel: var(--panel);
  --films-panel2: var(--panel2);
  --films-text: var(--text);
  --films-muted: var(--muted2);
  --films-shadow: var(--shadow);

  /* Row card width (horizontal sliders) */
  --cardW: 150px;
}

/* ====== SEARCH / FILTER BAR ====== */
.films-bar{
  margin-top: 6px;
  display:flex;
  gap: 12px;
  align-items:center;
  flex-wrap:wrap;
}
.films-search,
.films-filter{
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid var(--films-line);
  background: var(--films-panel2);
  color: var(--films-text);
  font-weight: 800;
}
.films-search{min-width: 260px; flex: 1 1 260px;}
.films-filter{min-width: 180px;}
.films-search::placeholder{color: var(--films-muted); font-weight:700;}

/* ====== SECTIONS ====== */
.films-sec{margin-top: 18px;}
.films-secHead{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.films-h3{margin: 10px 0 12px; font-size: 18px; font-weight: 900;}

/* ====== GRID (ALL FILMS) ====== */
/* app.js typically renders "all movies" using <div class="grid"> ... */
.grid{
  display:grid;
  gap: 14px;
  align-items:start;
}

/* 6 columns desktop, 5/4/3/2 down */
@media (min-width: 1200px){
  .grid{ grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (min-width: 980px) and (max-width: 1199px){
  .grid{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 720px) and (max-width: 979px){
  .grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 520px) and (max-width: 719px){
  .grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 519px){
  .grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* In grid mode, cards should NOT use fixed row width */
.grid .cardMovie{
  width: 100%;
}

/* ====== ROWS (HORIZONTAL SLIDERS) ====== */
.rowWrap{position:relative}
.row{
  display:flex;
  gap: 12px;
  overflow:auto;
  padding: 4px 56px 10px;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.row::-webkit-scrollbar{display:none}

/* row item fixed width */
.row .cardMovie{flex:0 0 var(--cardW)}

.rowArrow{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width:44px;height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.20);
  background: rgba(0,0,0,.28);
  color: #fff;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  backdrop-filter: blur(8px);
  box-shadow: var(--films-shadow);
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease, filter .18s ease;
  z-index: 10;
}
html[data-theme="light"] .rowArrow{
  background: rgba(16,20,37,.12);
  color: var(--films-text);
  border-color: var(--films-line);
}
.rowArrow:hover{filter:brightness(1.12)}
.rowWrap:hover .rowArrow{opacity:1; pointer-events:auto;}
.rowArrow.left{left:6px}
.rowArrow.right{right:6px}

/* ====== MOVIE CARD (used by app.js) ====== */
.cardMovie{display:block; text-decoration:none; color:inherit}

.posterWrap{position:relative}
.poster{
  width:100%;
  aspect-ratio: 2 / 3;
  background-size: cover;
  background-position: center;
  border-radius: 14px;
  border: 1px solid var(--films-line);
  background-color: rgba(255,255,255,.03);
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
  overflow:hidden;
  display:block;
}
html[data-theme="light"] .poster{
  background-color: rgba(16,20,37,.02);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}
.poster.noposter{
  display:flex;align-items:center;justify-content:center;
  font-size:32px;
  color: rgba(255,255,255,.65);
}
html[data-theme="light"] .poster.noposter{color: rgba(16,20,37,.45);}

.mtitle{
  margin-top:8px;
  font-size: 14px;
  font-weight: 900;
  color:var(--films-text);
}
.metaSmall{
  font-size:13px;
  color:var(--films-muted);
  margin-top:4px;
  font-weight:700;
}

.heart{
  position:absolute;
  top:10px; right:10px;
  width:34px;height:34px;border-radius:14px;
  border:1px solid rgba(255,255,255,.20);
  background: rgba(0,0,0,.30);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  backdrop-filter: blur(8px);
}
html[data-theme="light"] .heart{
  background: rgba(255,255,255,.75);
  color: var(--films-text);
  border-color: var(--films-line);
}
.heart:hover{filter:brightness(1.12)}
.heart.on{
  background: rgba(223,14,98,.22);
  border-color: rgba(223,14,98,.45);
  color:#fff;
}

/* ====== MESSAGES / PAGER ====== */
.films-msg{
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--films-line);
  background: rgba(255,255,255,.02);
  color: var(--films-text);
  font-weight: 800;
}
html[data-theme="light"] .films-msg{background: rgba(16,20,37,.02);}

.films-pager{
  margin-top: 14px;
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap:wrap;
}
.films-pagerInfo{
  font-weight: 900;
  color: var(--films-muted);
}
.films-pageInput{
  width: 120px;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid var(--films-line);
  background: var(--films-panel2);
  color: var(--films-text);
  font-weight: 900;
}

/* auth dot */
.films-auth .dot{
  width:10px;height:10px;border-radius:999px;
  background: rgba(255,255,255,.18);
  border:1px solid var(--films-line);
  box-shadow: 0 0 0 3px rgba(102,178,255,.10);
}
html[data-theme="light"] .films-auth .dot{
  background: rgba(16,20,37,.18);
}
.films-auth .dot.on{background: rgba(102,178,255,.90);}

/* Mobile tweaks */
@media (max-width: 720px){
  :root{ --cardW: 120px; }
  .rowArrow{ width: 36px; height: 36px; border-radius: 12px; }
  .row{ padding: 4px 46px 10px; }
}