/* =====================================================
   Pallcom TV — Luxe Red Theme (user-facing)
   ===================================================== */
:root{
  --red-1:#ff2d4b;
  --red-2:#b00021;
  --red-3:#ff7a8a;
  --red-grad:linear-gradient(135deg,#ff2d4b 0%,#b00021 100%);
  --red-glow:0 10px 40px rgba(255,45,75,.35);
  --red-border-deep:rgba(107,16,34,.72);
  --red-border-soft:rgba(255,45,75,.18);
  --bg:#0a0a12;
  --bg-2:#11111d;
  --card:#15151f;
  --card-2:#1c1c28;
  --border:rgba(255,255,255,.08);
  --text:#f3f3fa;
  --muted:#a6adc2;
  --p:var(--red-1);
}
*{ box-sizing:border-box; }
html,body{
  background:var(--bg); color:var(--text);
  font-family:"Cairo","Segoe UI",Tahoma,sans-serif;
  scroll-behavior:smooth;
}
body{
  background:
    radial-gradient(1200px 700px at 90% -10%, rgba(255,45,75,.10), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(176,0,33,.10), transparent 60%),
    var(--bg);
  min-height:100vh;
}
::selection{ background:var(--red-1); color:#fff; }
a{ color:var(--red-3); transition:.2s; }
a:hover{ color:var(--red-1); }
hr{ border-color:var(--border); }
.text-primary,.text-p{ color:var(--red-1)!important; }
.text-muted{ color:var(--muted)!important; }

/* buttons */
.btn{ border-radius:12px; font-weight:600; padding:.6rem 1.2rem; transition:.25s; }
.btn-primary{
  background:var(--red-grad); border:0; color:#fff;
  box-shadow:0 6px 20px rgba(255,45,75,.30);
}
.btn-primary:hover{
  transform:translateY(-2px); color:#fff;
  box-shadow:0 10px 30px rgba(255,45,75,.45);
  background:var(--red-grad); filter:brightness(1.05);
}
.btn-outline-light{ border-color:var(--border); color:var(--text); }
.btn-outline-light:hover{ background:var(--card-2); color:var(--text); border-color:var(--red-1); }
.btn-ghost{ background:transparent; border:1px solid var(--border); color:var(--text); }
.btn-ghost:hover{ border-color:var(--red-1); color:var(--red-1); }

/* nav */
.nav-luxe{
  position:sticky; top:0; z-index:100;
  background:rgba(10,10,18,.75);
  backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid var(--border);
}
.nav-luxe .brand{
  font-weight:800; font-size:1.35rem; letter-spacing:.5px;
  background:linear-gradient(90deg,#fff 0%,var(--red-3) 70%,var(--red-1) 100%);
  -webkit-background-clip:text; color:transparent;
  display:flex; align-items:center; gap:.5rem;
}
.nav-luxe .brand .pulse{
  width:10px; height:10px; border-radius:50%; background:var(--red-1);
  animation:pulse 2s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(255,45,75,.7); }
  70%{ box-shadow:0 0 0 14px rgba(255,45,75,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,45,75,0); }
}
.nav-luxe .nav-link{ color:var(--text); font-weight:500; padding:.6rem 1rem; border-radius:10px; transition:.2s; }
.nav-luxe .nav-link:hover{ color:var(--red-1); background:rgba(255,45,75,.06); }
.nav-luxe .nav-link.active{ color:var(--red-1); }
.nav-luxe .dropdown-menu{ background:var(--card); border:1px solid var(--border); }
.nav-luxe .dropdown-item{ color:var(--text); }
.nav-luxe .dropdown-item:hover{ background:var(--card-2); color:var(--red-1); }
.navbar-toggler{ border-color:var(--border); }

/* hero */
.hero-luxe{ position:relative; padding:6rem 0 4rem; overflow:hidden; }
.hero-luxe::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(800px 500px at 80% 30%, rgba(255,45,75,.20), transparent 60%),
    radial-gradient(700px 400px at 20% 80%, rgba(176,0,33,.18), transparent 60%);
}
.hero-luxe .container{ position:relative; z-index:1; }
.hero-luxe h1{
  font-size:clamp(2.2rem,5.5vw,4.5rem);
  font-weight:900; line-height:1.1; letter-spacing:-.5px;
}
.hero-luxe h1 .accent{
  background:var(--red-grad); -webkit-background-clip:text; color:transparent;
}
.hero-luxe .lead{ font-size:1.2rem; color:var(--muted); max-width:580px; }
.badge-soft{
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(255,45,75,.10); color:var(--red-1);
  padding:.45rem 1rem; border-radius:999px; font-size:.85rem;
  border:1px solid rgba(255,45,75,.20);
}

/* cards */
.luxe-card,.feature-card,.plan-card,.channel-card{
  background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%);
  border:1px solid var(--border);
  border-radius:18px;
  transition:.3s ease;
  color:var(--text);
}
.luxe-card:hover,.feature-card:hover,.plan-card:hover{
  transform:translateY(-4px);
  border-color:rgba(255,45,75,.5);
  box-shadow:var(--red-glow);
}
.home-page .hero-luxe .luxe-card,
.home-page .feature-card,
.home-page .plan-card{
  border-color:var(--red-border-deep);
  box-shadow:
    0 16px 36px rgba(0,0,0,.22),
    inset 0 0 0 1px rgba(255,45,75,.05);
}
.home-page .hero-luxe .luxe-card{
  background:linear-gradient(180deg,rgba(28,14,22,.96) 0%, rgba(24,16,25,.98) 100%);
}
.home-page .feature-card,
.home-page .plan-card{
  background:linear-gradient(180deg,rgba(24,15,22,.96) 0%, rgba(28,20,29,.98) 100%);
}
.home-page .hero-luxe .luxe-card:hover,
.home-page .feature-card:hover,
.home-page .plan-card:hover{
  border-color:rgba(255,45,75,.42);
  box-shadow:
    0 18px 42px rgba(0,0,0,.30),
    0 0 0 1px var(--red-border-soft),
    0 10px 36px rgba(110,0,28,.22);
}
.home-page .feature-card .icon{
  border:1px solid rgba(255,45,75,.14);
  box-shadow:inset 0 0 0 1px rgba(255,45,75,.04);
}
.feature-card{ padding:1.75rem; height:100%; }
.feature-card .icon{
  width:56px; height:56px; border-radius:14px;
  background:rgba(255,45,75,.10); color:var(--red-1);
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; margin-bottom:1rem;
}

/* plan */
.plan-card{ padding:2rem; text-align:center; height:100%; position:relative; }
.plan-card.featured{
  border:2px solid var(--red-1);
  background:linear-gradient(180deg,rgba(255,45,75,.06),var(--card-2));
  transform:translateY(-8px);
}
.plan-card.featured::before{
  content:"الأكثر شيوعاً";
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:var(--red-grad); color:#fff; padding:.3rem 1rem;
  border-radius:999px; font-size:.8rem; font-weight:700;
  box-shadow:var(--red-glow);
}
.plan-card .price{
  font-size:3rem; font-weight:900;
  background:var(--red-grad); -webkit-background-clip:text; color:transparent;
  line-height:1; margin:1rem 0;
}
.plan-card .price small{
  font-size:.9rem; color:var(--muted);
  -webkit-text-fill-color:var(--muted);
}
.plan-card ul{ list-style:none; padding:0; margin:1.5rem 0; text-align:start; }
.plan-card li{ padding:.4rem 0; color:var(--muted); }
.plan-card li::before{ content:"✓ "; color:var(--red-1); font-weight:bold; }

/* channel cards */
.channel-card{
  padding:1rem .75rem; text-align:center;
  cursor:pointer; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.channel-card .logo-wrap{
  width:84px; height:84px; border-radius:14px;
  background:#0a0a12; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:.65rem; overflow:hidden;
  transition:.25s;
}
.channel-card:hover .logo-wrap{
  border-color:var(--red-1);
  box-shadow:0 0 0 4px rgba(255,45,75,.10);
}
.channel-card img{ max-width:75%; max-height:75%; object-fit:contain; }
.channel-card .name{ font-weight:600; font-size:.9rem; line-height:1.25; }
.channel-card .num{ font-size:.7rem; color:var(--muted); margin-top:.15rem; }
.channel-card:hover{ transform:translateY(-3px); border-color:var(--red-1); }
.channel-card.active{ border-color:var(--red-1); box-shadow:0 0 0 2px rgba(255,45,75,.2); }

/* forms */
.form-control,.form-select{
  background:#0a0a12; color:var(--text);
  border:1px solid var(--border); border-radius:10px;
  padding:.7rem .9rem;
}
.form-control:focus,.form-select:focus{
  background:#0a0a12; color:var(--text);
  border-color:var(--red-1);
  box-shadow:0 0 0 .2rem rgba(255,45,75,.15);
}
.form-control::placeholder{ color:#5d627a; }
.form-label{ font-weight:500; color:var(--muted); margin-bottom:.4rem; font-size:.9rem; }

/* auth */
.auth-wrap{
  min-height:calc(100vh - 80px);
  display:flex; align-items:center; justify-content:center;
  padding:2rem 1rem; position:relative; overflow:hidden;
}
.auth-wrap::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(600px 400px at 30% 30%, rgba(255,45,75,.15), transparent 60%),
    radial-gradient(500px 350px at 70% 70%, rgba(176,0,33,.12), transparent 60%);
  z-index:0;
}
.auth-card{
  position:relative; z-index:1;
  background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%);
  border:1px solid var(--border);
  border-radius:20px; padding:2.5rem;
  width:100%; max-width:440px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  animation:fadeUp .5s ease;
}
.auth-card .brand-lg{
  text-align:center; margin-bottom:1.5rem;
  font-size:1.6rem; font-weight:800;
  background:var(--red-grad); -webkit-background-clip:text; color:transparent;
}
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(20px); }
  to{ opacity:1; transform:translateY(0); }
}

/* sidebar app shell */
.app-shell{
  display:grid; grid-template-columns:280px 1fr;
  gap:1.25rem; padding:1.25rem;
  min-height:calc(100vh - 80px);
}
.app-side{
  background:var(--card); border:1px solid var(--border);
  border-radius:16px; padding:1rem;
  height:calc(100vh - 110px);
  position:sticky; top:90px;
  overflow-y:auto;
}
.app-side h6{
  color:var(--muted); font-size:.75rem;
  text-transform:uppercase; letter-spacing:1.2px;
  margin:0 0 .65rem; padding:0 .35rem;
}
.app-side .cat-btn{
  display:flex; align-items:center; justify-content:space-between;
  width:100%; padding:.55rem .7rem; margin-bottom:.2rem;
  border-radius:10px; cursor:pointer; user-select:none;
  color:var(--text); transition:.18s; border:0; background:transparent;
  text-align:start; font-size:.92rem;
}
.app-side .cat-btn:hover{ background:rgba(255,45,75,.08); color:var(--red-3); }
.app-side .cat-btn.active{
  background:var(--red-grad); color:#fff; font-weight:600;
  box-shadow:0 4px 14px rgba(255,45,75,.30);
}
.app-side .cat-btn .count{
  background:rgba(255,255,255,.08); padding:.05rem .5rem;
  border-radius:999px; font-size:.7rem;
}
.app-side .cat-btn.active .count{ background:rgba(255,255,255,.20); }
.app-main{ min-width:0; }

/* compact channel list (sidebar on watch) */
.chan-list-mini{
  display:flex; flex-direction:column; gap:.25rem;
}
.chan-list-mini .item{
  display:flex; align-items:center; gap:.7rem;
  padding:.5rem .6rem; border-radius:10px;
  color:var(--text); text-decoration:none; transition:.2s;
}
.chan-list-mini .item:hover{ background:rgba(255,45,75,.08); }
.chan-list-mini .item.active{
  background:var(--red-grad); color:#fff;
  box-shadow:0 4px 14px rgba(255,45,75,.30);
}
.chan-list-mini .item img{
  width:36px; height:36px; object-fit:contain;
  background:#0a0a12; border-radius:8px; padding:3px;
}
.chan-list-mini .item .name{ font-size:.88rem; font-weight:500; }

.search-bar{ position:relative; margin-bottom:1rem; }
.search-bar input{ padding-inline-start:2.6rem; }
.search-bar i{
  position:absolute; top:50%; transform:translateY(-50%);
  inset-inline-start:.9rem; color:var(--muted);
}

/* player */
.player-shell{
  background:#000; border-radius:16px; overflow:hidden;
  position:relative; aspect-ratio:16/9;
  box-shadow:0 20px 50px rgba(0,0,0,.5);
}
.player-shell video{ width:100%; height:100%; display:block; background:#000; }
.player-shell .center-logo{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none; transition:.4s opacity;
}
.player-shell .center-logo img{
  max-width:160px; max-height:160px; opacity:.85;
  filter:drop-shadow(0 6px 20px rgba(0,0,0,.6));
  animation:logoBreath 2s ease-in-out infinite;
}
.player-shell .center-logo .fallback{
  color:rgba(255,255,255,.4); font-size:5rem;
  animation:logoBreath 2s ease-in-out infinite;
}
@keyframes logoBreath{
  0%,100%{ transform:scale(1); opacity:.85; }
  50%{ transform:scale(1.06); opacity:1; }
}
.player-shell.playing .center-logo{ opacity:0; }
.player-shell .live-badge{
  position:absolute; top:14px; inset-inline-start:14px; z-index:3;
  background:var(--red-grad); color:#fff;
  padding:.25rem .65rem; border-radius:6px;
  font-size:.75rem; font-weight:700; letter-spacing:1.5px;
  display:flex; align-items:center; gap:.35rem;
  box-shadow:0 4px 14px rgba(255,45,75,.5);
}
.player-shell .live-badge::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:#fff; animation:liveDot 1.5s infinite;
}
@keyframes liveDot{ 0%,100%{opacity:1;} 50%{opacity:.3;} }
.player-shell .player-error{
  position:absolute; inset:0; display:none;
  align-items:center; justify-content:center;
  flex-direction:column; gap:.5rem;
  background:rgba(0,0,0,.85); color:#fff; padding:2rem; text-align:center;
}
.player-shell.errored .player-error{ display:flex; }

/* footer */
.footer-luxe{
  margin-top:5rem;
  background:linear-gradient(180deg,transparent 0%,#08080f 100%);
  border-top:1px solid var(--border);
  padding:3.5rem 0 1.5rem;
}
.footer-luxe h6{
  color:var(--text); font-weight:700; margin-bottom:1rem; font-size:1rem;
}
.footer-luxe a{
  color:var(--muted); text-decoration:none;
  display:block; padding:.3rem 0;
  transition:.2s;
}
.footer-luxe a:hover{ color:var(--red-1); padding-inline-start:.35rem; }
.footer-luxe .copy{
  text-align:center; color:var(--muted); font-size:.85rem;
  border-top:1px solid var(--border); margin-top:2.5rem; padding-top:1.5rem;
}
.footer-luxe .social a{
  display:inline-flex; width:38px; height:38px;
  border-radius:50%; background:var(--card-2);
  align-items:center; justify-content:center;
  margin-inline-end:.5rem; padding:0;
  color:var(--text); border:1px solid var(--border);
}
.footer-luxe .social a:hover{
  background:var(--red-grad); color:#fff; border-color:transparent;
  transform:translateY(-3px);
}

/* tables */
.table{ color:var(--text); }
.table > :not(caption) > * > *{
  background:transparent; color:var(--text);
  border-bottom-color:var(--border);
  padding:.85rem .9rem;
}
.table thead th{
  color:var(--muted); font-weight:600;
  font-size:.85rem; text-transform:uppercase; letter-spacing:.5px;
}

/* animations */
.fade-in{ animation:fadeUp .4s ease both; }
.fade-in-stagger > *{ animation:fadeUp .4s ease both; }
.fade-in-stagger > *:nth-child(1){ animation-delay:.05s }
.fade-in-stagger > *:nth-child(2){ animation-delay:.1s }
.fade-in-stagger > *:nth-child(3){ animation-delay:.15s }
.fade-in-stagger > *:nth-child(4){ animation-delay:.2s }
.fade-in-stagger > *:nth-child(5){ animation-delay:.25s }
.fade-in-stagger > *:nth-child(6){ animation-delay:.3s }

@media (max-width: 992px){
  .app-shell{ grid-template-columns:1fr; padding:.75rem; }
  .app-side{ position:relative; top:0; height:auto; max-height:none; }
  .hero-luxe{ padding:3rem 0 2rem; }
  .auth-card{ padding:1.8rem; }
}
@media (max-width: 576px){
  .nav-luxe .brand{ font-size:1.1rem; }
  .footer-luxe{ padding:2.5rem 0 1rem; }
}

.glass{
  background:rgba(21,21,31,.6); backdrop-filter:blur(10px);
  border:1px solid var(--border); border-radius:14px;
}
.divider-gradient{
  height:1px;
  background:linear-gradient(90deg,transparent,var(--red-1),transparent);
  margin:2rem 0;
}
.alert{ border-radius:12px; border:1px solid; padding:.85rem 1rem; }
.alert-info{ background:rgba(255,45,75,.10); color:var(--red-3); border-color:rgba(255,45,75,.25); }
.alert-success{ background:rgba(40,200,120,.10); color:#5fe8a8; border-color:rgba(40,200,120,.25); }
.alert-warning{ background:rgba(255,180,30,.10); color:#ffce6b; border-color:rgba(255,180,30,.25); }
.alert-danger{ background:rgba(255,45,75,.15); color:#ff7a8a; border-color:rgba(255,45,75,.30); }
.badge{ font-weight:600; padding:.35em .7em; border-radius:8px; }
.badge.bg-primary{ background:var(--red-grad)!important; }
.badge.bg-success{ background:rgba(40,200,120,.20)!important; color:#5fe8a8; }
.badge.bg-warning{ background:rgba(255,180,30,.20)!important; color:#ffce6b!important; }
.badge.bg-danger{ background:rgba(255,45,75,.20)!important; color:var(--red-3); }
.badge.bg-secondary{ background:rgba(255,255,255,.10)!important; color:var(--muted); }