/* =========================
   SANTROVISION UI CORE
   ULTRA PREMIUM VISUAL SYSTEM
========================= */

/* =========================
   GLOBAL UI FIXES
========================= */
html, body{
  background:#05060a;
  color:#fff;
  font-family:Vazirmatn, sans-serif;
}

/* smooth rendering */
*{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* =========================
   GLASS EFFECT SYSTEM
========================= */
.glass{
  background:rgba(255,255,255,0.05);
  backdrop-filter: blur(18px);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px;
}

/* =========================
   MAIN GRID SYSTEM (TV STYLE)
========================= */
#channelGrid{
  display:grid;
  gap:12px;
  padding:10px;
}

/* 📱 MOBILE = 3 COL */
@media(max-width:768px){
  #channelGrid{
    grid-template-columns:repeat(3, 1fr);
  }
}

/* 💻 LAPTOP = 4 COL */
@media(min-width:769px) and (max-width:1200px){
  #channelGrid{
    grid-template-columns:repeat(4, 1fr);
  }
}

/* 🖥 TV / LARGE = 6 COL */
@media(min-width:1201px){
  #channelGrid{
    grid-template-columns:repeat(6, 1fr);
  }
}

/* =========================
   CHANNEL CARD (ULTRA PREMIUM)
========================= */
.channel-card{
  position:relative;
  height:72px;

  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;

  padding:10px;
  border-radius:16px;

  background:linear-gradient(
    135deg,
    rgba(255,255,255,0.08),
    rgba(255,255,255,0.03)
  );

  border:1px solid rgba(255,255,255,0.08);

  cursor:pointer;
  transition:all 0.25s ease;

  overflow:hidden;
}

/* glow layer */
.channel-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at top left, #00e5ff22, transparent 60%);
  opacity:0;
  transition:0.3s;
}

.channel-card:hover::before{
  opacity:1;
}

/* hover animation */
.channel-card:hover{
  transform:translateY(-3px) scale(1.05);
  border-color:#00e5ff55;
  box-shadow:0 15px 40px rgba(0,229,255,0.15);
}

/* active click feel */
.channel-card:active{
  transform:scale(0.98);
}

/* =========================
   CHANNEL TEXT
========================= */
.channel-card span{
  font-size:12px;
  font-weight:600;
  color:#ffffffcc;
  z-index:2;
}

/* =========================
   SEARCH BAR (ULTRA CLEAN)
========================= */
#searchInput{
  transition:0.3s;
}

#searchInput:focus{
  outline:none;
  box-shadow:0 0 0 2px #00e5ff55;
  background:rgba(255,255,255,0.08);
}

/* =========================
   SCROLLBAR (MODERN TV STYLE)
========================= */
#sidebar::-webkit-scrollbar{
  width:6px;
}

#sidebar::-webkit-scrollbar-track{
  background:transparent;
}

#sidebar::-webkit-scrollbar-thumb{
  background:linear-gradient(#00e5ff55, #7c4dff55);
  border-radius:10px;
}

/* =========================
   LOADING SHIMMER EFFECT
========================= */
@keyframes shimmer{
  0%{
    background-position:-200px 0;
  }
  100%{
    background-position:200px 0;
  }
}

.skeleton{
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0.05),
    rgba(255,255,255,0.1),
    rgba(255,255,255,0.05)
  );
  background-size:200% 100%;
  animation:shimmer 1.5s infinite;
}

/* =========================
   FOCUS MODE (TV EXPERIENCE)
========================= */
.focus-mode .channel-card{
  opacity:0.6;
  transform:scale(0.95);
}

.focus-mode .channel-card:hover{
  opacity:1;
  transform:scale(1.08);
}

/* =========================
   NEON TEXT EFFECT (SANTROVISION BRAND)
========================= */
.neon{
  color:#00e5ff;
  text-shadow:
    0 0 5px #00e5ff,
    0 0 15px #00e5ff,
    0 0 30px #00e5ff;
}

/* =========================
   SOFT ANIMATION ENTRY
========================= */
@keyframes fadeUp{
  from{
    opacity:0;
    transform:translateY(10px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

.channel-card{
  animation:fadeUp 0.4s ease;
}