/* Awobaz TV Front (Netflix-style grid) */
:root{
  --aw-bg:#05070d;
  --aw-card: rgba(255,255,255,.06);
  --aw-border: rgba(255,255,255,.10);
  --aw-text:#ffffff;
  --aw-muted: rgba(255,255,255,.72);
  --hb-blue:#123b8a;
  --hb-red:#e8002a;
}

.awobaz-wrap{max-width:1320px;margin:18px auto;padding:12px}
.awobaz-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:0 0 12px}
.awobaz-section-title{margin:0;font-size:24px;font-weight:1000;letter-spacing:.2px}
.awobaz-pill{padding:6px 10px;border-radius:999px;background:var(--aw-card);border:1px solid var(--aw-border);color:var(--aw-muted);font-weight:800;font-size:12px}

.awobaz-toolbar{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.awobaz-input,.awobaz-select{padding:12px 12px;border-radius:12px;border:1px solid var(--aw-border);background:rgba(0,0,0,.25);color:var(--aw-text);min-width:220px}
.awobaz-btn{padding:12px 14px;border-radius:12px;border:1px solid var(--aw-border);background:rgba(255,255,255,.10);color:var(--aw-text);font-weight:1000;cursor:pointer}
.awobaz-btn:hover{background:rgba(255,255,255,.14)}

/* Netflix grid */
.awobaz-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
@media(max-width:1400px){.awobaz-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}
@media(max-width:1200px){.awobaz-grid{grid-template-columns:repeat(auto-fit,minmax(145px,1fr))}}
@media(max-width:980px){.awobaz-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}}
@media(max-width:700px){.awobaz-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:430px){.awobaz-grid{grid-template-columns:1fr;gap:14px}}

.awobaz-card{
  position:relative;
  display:block;
  text-decoration:none;
  color:inherit;
  border-radius:14px;
  overflow:hidden;
  background:#0b0f1a;
  border:1px solid rgba(255,255,255,.08);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  transform-origin:center;
}
.awobaz-card:hover{
  transform:scale(1.06);
  z-index:2;
  box-shadow:0 18px 50px rgba(0,0,0,.55);
  border-color:rgba(255,255,255,.16);
}

.awobaz-thumb{position:relative;aspect-ratio:16/9;background:#111;display:flex;align-items:center;justify-content:center}
.awobaz-thumb img{width:100%;height:100%;object-fit:cover}
.awobaz-thumb-empty{padding:18px;opacity:.7}

/* Subtle gradient at bottom for title */
.awobaz-thumb:after{content:'';position:absolute;left:0;right:0;bottom:0;height:55%;background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.78) 100%)}

/* Live badge */
.awobaz-live-badge{
  position:absolute;left:10px;top:10px;
  font-weight:1000;font-size:12px;
  padding:6px 10px;border-radius:999px;
  background:rgba(232,0,42,.96);
  color:#fff;
  box-shadow:0 10px 30px rgba(232,0,42,.22);
}

/* Meta becomes overlay (Netflix-style) */
.awobaz-meta{
  position:absolute;
  left:12px;
  right:12px;
  bottom:10px;
  z-index:2;
  padding:0;
  display:flex;
  gap:10px;
  align-items:center;
}
.awobaz-logo{
  width:34px;height:34px;
  border-radius:10px;
  background:#0e1322;
  overflow:hidden;
  flex:0 0 auto;
  border:1px solid rgba(255,255,255,.12)
}
.awobaz-logo img{width:100%;height:100%;object-fit:cover}
.awobaz-meta-text{min-width:0;display:flex;flex-direction:column;gap:3px}
.awobaz-title{
  font-weight:1000;
  line-height:1.1;
  font-size:14px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.awobaz-sub{opacity:.75;font-size:12px;display:none}

/* Reduce clutter: show subtitle only on hover */
.awobaz-card:hover .awobaz-sub{display:block}

.awobaz-empty{padding:18px;border-radius:16px;border:1px dashed var(--aw-border);opacity:.85}

/* Player */
.awobaz-player-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 10px}
.awobaz-live-dot{display:inline-flex;align-items:center;gap:10px;font-weight:1000}
.awobaz-live-dot:before{content:'';width:10px;height:10px;border-radius:999px;background:var(--hb-red);display:inline-block}
.awobaz-viewer-badge{background:rgba(255,255,255,.10);border:1px solid var(--aw-border);padding:6px 10px;border-radius:999px;font-weight:1000}
.awobaz-player{border-radius:16px;overflow:hidden;background:#000;border:1px solid var(--aw-border)}
.awobaz-video-box{position:relative}
.awobaz-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.65);backdrop-filter:blur(2px)}
.awobaz-overlay-card{width:min(420px,92%);background:rgba(20,20,20,.90);border:1px solid rgba(255,255,255,.15);padding:18px;border-radius:16px;text-align:center;color:#fff}
.awobaz-overlay-card button{margin-top:10px;padding:10px 14px;border-radius:12px;border:0;font-weight:1000;cursor:pointer}
.awobaz-hidden{display:none}

/* Featured slider */
.awobaz-section-actions{display:flex;gap:8px}
.awobaz-slider-btn{width:38px;height:38px;border-radius:12px;border:1px solid var(--aw-border);background:rgba(255,255,255,.10);color:#fff;font-size:18px;font-weight:1000;cursor:pointer}
.awobaz-slider-btn:hover{background:rgba(255,255,255,.14)}
.awobaz-slider{display:flex;gap:14px;overflow:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
.awobaz-slide{flex:0 0 min(360px, 86vw);scroll-snap-align:start;text-decoration:none;color:#fff}
.awobaz-slide-media{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:1px solid var(--aw-border);background:#111}
.awobaz-slide-media img{width:100%;height:100%;object-fit:cover}
.awobaz-slide-gradient{position:absolute;inset:0;background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,.85) 100%)}
.awobaz-slide-meta{position:absolute;left:14px;right:14px;bottom:12px;display:flex;flex-direction:column;gap:6px}
.awobaz-slide-logo{width:46px;height:46px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:#111;object-fit:cover}
.awobaz-slide-title{font-weight:1000;font-size:18px;line-height:1.1}
.awobaz-slide-sub{opacity:.8;font-size:13px}

.awobaz-sub{opacity:.75;font-size:12px;margin-top:4px}
.awobaz-thumb-cat{display:flex;align-items:center;justify-content:center}
.awobaz-cat-initial{font-size:42px;font-weight:1000;opacity:.9}

.awobaz-row{display:flex;gap:12px;overflow:auto;padding-bottom:8px;scroll-snap-type:x mandatory}
.awobaz-card-row{min-width:180px;max-width:220px;scroll-snap-align:start}
.awobaz-row::-webkit-scrollbar{height:8px}
.awobaz-row::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:999px}


/* Live Now floating badge animation */
.awobaz-live-badge.awobaz-live-badge--floating{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  animation: awobazFloat 2.4s ease-in-out infinite;
  box-shadow: 0 10px 24px rgba(229,9,20,0.25);
}
.awobaz-live-badge.awobaz-live-badge--floating::before{
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #fff;
  opacity: 0.95;
  box-shadow: 0 0 0 0 rgba(255,255,255,0.6);
  animation: awobazPulse 1.2s ease-out infinite;
}
@keyframes awobazFloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
@keyframes awobazPulse{ 0%{box-shadow:0 0 0 0 rgba(255,255,255,0.55)} 100%{box-shadow:0 0 0 14px rgba(255,255,255,0)} }



/* TV-remote friendly focus mode */
.awobaz-card:focus,.awobaz-card:focus-visible{ outline:none; }
.awobaz-card:focus-visible{
  transform: scale(1.04);
  box-shadow: 0 16px 40px rgba(0,0,0,0.45);
}
@media (prefers-reduced-motion: reduce){
  .awobaz-card:focus-visible{ transform:none; }
  .awobaz-live-badge.awobaz-live-badge--floating{ animation:none; }
  .awobaz-live-badge.awobaz-live-badge--floating::before{ animation:none; }
}



.awobaz-next-actions{
  margin: 12px 0 8px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.awobaz-btn.awobaz-play-next{
  background:#e50914;
  color:#fff;
  border:0;
  border-radius:10px;
  padding:12px 16px;
  font-weight:700;
  cursor:pointer;
}
.awobaz-btn.awobaz-play-next:focus-visible{ outline:none; transform:scale(1.04); }