/* ============================================
   MPL - Mali Samaj Premier League
   Main Stylesheet
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap');

:root{
  --bg-body: #0b0e17;
  --bg-darker: #05070c;
  --bg-card: #10141f;
  --bg-card-alt: #12161f;
  --red: #e31e26;
  --red-dark: #b3151b;
  --gold: #e0a94d;
  --text-light: #f5f6f8;
  --text-muted: #9aa0ad;
  --border-red: rgba(227,30,38,0.35);
  --border-gold: rgba(224,169,77,0.4);
  --radius: 4px;
  --container: 1200px;
}

*,*::before,*::after{ box-sizing: border-box; }

/* JS jab kisi item ko chhupata hai to `hidden` attribute lagata hai.
   Kai jagah class me display:block/grid likha hai jo hidden ko dabaa deta hai,
   isliye ye rule sabse upar rakhna zaroori hai. */
[hidden]{ display:none !important; }

body{
  margin:0;
  background: var(--bg-body);
  color: var(--text-light);
  font-family: 'Poppins', sans-serif;
  line-height: 1.6;
}

a{ text-decoration:none; color:inherit; }
ul{ list-style:none; margin:0; padding:0; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }

.container{
  max-width: var(--container);
  margin:0 auto;
  padding: 0 24px;
}

.section-pad{ padding: 60px 0; }

/* ---------- Section Heading ---------- */
.section-heading{
  text-align:center;
  margin-bottom: 40px;
  font-size: 26px;
  font-weight:700;
  letter-spacing:1px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  text-transform:uppercase;
}
.section-heading::before,
.section-heading::after{
  content:"";
  width:60px;
  height:1px;
  background: linear-gradient(90deg, transparent, var(--red));
}
.section-heading::after{
  background: linear-gradient(90deg, var(--red), transparent);
}

.page-heading{
  font-size: 44px;
  font-weight:800;
  text-transform:uppercase;
  line-height:1.15;
  margin:0 0 10px 0;
}
.page-heading .accent{ color: var(--red); }
.page-underline{
  display:flex;
  align-items:center;
  gap:10px;
  margin: 14px 0;
}
.page-underline span.line{
  width:60px;height:1px;background:#555;
}
.page-underline span.dot{
  width:8px;height:8px;border-radius:50%;background:#fff;
}

/* ---------- Header / Nav ---------- */
header.site-header{
  background: var(--bg-darker);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  position: sticky;
  top:0;
  z-index: 100;
}
.nav-wrap{
  max-width: var(--container);
  margin:0 auto;
  padding: 12px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 20px;
}
.logo{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}
/* Logo ke saath ab koi text nahi hai, isliye height fix aur width auto -
   warna wide logo square me daba kar khinch jata hai */
.logo img{ height:54px; width:auto; max-width:230px; display:block; }

nav.main-nav ul{
  display:flex;
  gap: 28px;
}
nav.main-nav a{
  font-size:14px;
  font-weight:600;
  letter-spacing:0.5px;
  color: var(--text-light);
  padding-bottom: 6px;
  position:relative;
  white-space:nowrap;
}
nav.main-nav a.active{ color: var(--red); }
nav.main-nav a.active::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-4px;
  height:2px;
  background: var(--red);
}
nav.main-nav a:hover{ color: var(--red); }

.header-actions{
  display:flex;
  align-items:center;
  gap:14px;
  flex-shrink:0;
}
.social-icons{ display:flex; gap:8px; }
.social-icons a{
  width:34px;height:34px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.25);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;
  color:#fff;
  transition:.2s;
}
.social-icons a:hover{ background: var(--red); border-color:var(--red); }

.btn-admin{
  background: var(--red);
  color:#fff;
  padding:10px 18px;
  border-radius:2px;
  font-size:13px;
  font-weight:700;
  letter-spacing:0.5px;
  display:flex;
  align-items:center;
  gap:8px;
  border:none;
  white-space:nowrap;
  text-decoration:none;
  cursor:pointer;
}
.btn-admin:hover{ background: var(--red-dark); color:#fff; }

/* mobile nav toggle */
.nav-toggle{ display:none; background:none;border:none;color:#fff;font-size:24px; }

/* ---------- Hero Banner (inner pages) ----------
   Home slider ki tarah: image poore banner ko bharti hai aur heading/subtitle
   uske uper aate hain. Pehle image side me chhoti si dikhti thi. */
.page-hero{
  position:relative;
  overflow:hidden;
  background: linear-gradient(120deg, #0b0e17 40%, #1a0d10 100%);
  border-bottom: 1px solid rgba(227,30,38,0.2);
}
.page-hero .container{
  display:flex;
  align-items:center;
  gap: 30px;
  padding-top: 80px;
  padding-bottom: 80px;
  min-height: 320px;
  position:relative;
  z-index:2;
}
/* Background image layer */
.page-hero .hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}
.page-hero .hero-bg img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
/* Image ke uper dark layer - warna text padha nahi jaata */
.page-hero .hero-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(11,14,23,0.92) 0%, rgba(11,14,23,0.76) 45%, rgba(11,14,23,0.35) 100%),
    linear-gradient(0deg, rgba(11,14,23,0.85) 0%, transparent 60%);
}
.page-hero-text{ max-width:640px; position:relative; z-index:2; }
.page-hero-text p.subtitle{
  color: #d7dae2;
  font-size:15px;
  margin-top:10px;
  max-width:480px;
  text-shadow:0 2px 10px rgba(0,0,0,0.6);
}
.page-hero .breadcrumb{
  color: #c8ccd6;
  font-size:14px;
  margin-top:6px;
}
.page-hero .breadcrumb .current{ color: var(--red); }

.hero-glow{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 15% 20%, rgba(227,30,38,0.15), transparent 40%),
    radial-gradient(circle at 85% 60%, rgba(224,169,77,0.08), transparent 45%);
  z-index:1;
}

/* ---------- Home Hero Slider ---------- */
.home-hero{
  position:relative;
  background: linear-gradient(120deg,#0b0e17 35%, #1c0d10 100%);
  overflow:hidden;
  border-bottom: 1px solid rgba(227,30,38,0.15);
}
.home-hero .container{
  display:flex;
  align-items:center;
  gap:40px;
  padding: 90px 24px 80px;
  min-height:460px;
  position:relative;
  z-index:2;
}
/* Ek waqt me sirf active slide dikhegi */
.home-hero .hero-slide{ display:none; position:relative; z-index:2; }
.home-hero .hero-slide.active{ display:block; animation: heroFade .5s ease; }
@keyframes heroFade{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* Slide ki image poore slider ko bharti hai (chhoti ho ya badi, object-fit:cover
   use stretch kiye bina crop karke full cover kar deta hai) */
.home-hero .hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}
.home-hero .hero-bg img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
/* Image ke uper dark layer - warna uske uper ka text padha nahi jaata */
.home-hero .hero-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(11,14,23,0.92) 0%, rgba(11,14,23,0.78) 45%, rgba(11,14,23,0.35) 100%),
    linear-gradient(0deg, rgba(11,14,23,0.85) 0%, transparent 55%);
}

.home-hero-text{ max-width:620px; position:relative; z-index:2; }
.home-hero-text .eyebrow{
  color:#fff;
  font-size:34px;
  font-weight:800;
  text-transform:uppercase;
  line-height:1.1;
  margin:0;
  text-shadow: 0 2px 14px rgba(0,0,0,0.6);
}
.home-hero-text .eyebrow .accent{
  color: var(--gold);
  display:block;
  font-size:36px;
}
.home-hero-text .season{
  color: var(--red);
  font-weight:700;
  margin: 14px 0 6px;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:15px;
}
.home-hero-text .season::before{
  content:"";
  width:30px;height:1px;background:var(--red);
}
.home-hero-text .tagline{
  color:#c9ccd6;
  font-size:13px;
  letter-spacing:0.5px;
  margin: 10px 0 26px;
  text-transform:uppercase;
  text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}
.btn-primary{
  background: var(--red);
  color:#fff;
  padding:14px 28px;
  border-radius:2px;
  font-weight:700;
  font-size:14px;
  letter-spacing:0.5px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  border:none;
}
.btn-primary:hover{ background:var(--red-dark); }
.btn-outline{
  background:transparent;
  color:#fff;
  border:1px solid var(--red);
  padding:13px 26px;
  border-radius:2px;
  font-weight:700;
  font-size:13px;
  letter-spacing:0.5px;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.btn-outline:hover{ background:var(--red); }

.btn-insta{
  background: linear-gradient(90deg, #d6249f, #e2436b, #f77737);
  color:#fff;
  padding:14px 30px;
  border-radius:30px;
  font-weight:700;
  font-size:14px;
  letter-spacing:0.5px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  border:none;
}
.btn-insta:hover{ filter:brightness(1.08); }

/* purana side-image layout hata diya - ab image slider ka background hai */

.slider-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:40px;height:40px;
  border-radius:50%;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.2);
  display:flex;align-items:center;justify-content:center;
  color:#fff;
  z-index:3;
}
.slider-arrow.left{ left:20px; }
.slider-arrow.right{ right:20px; }
.slider-arrow{ cursor:pointer; }

.slider-dots{
  position:absolute;
  bottom:20px;left:50%;
  transform:translateX(-50%);
  display:flex; gap:8px; z-index:3;
}
.slider-dots span{ width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.3); cursor:pointer; }
.slider-dots span.active{ background:var(--red); width:22px;border-radius:4px; }

/* ---------- Cards (generic) ---------- */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.grid-5{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; }
.grid-6{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.grid-10{ display:grid; grid-template-columns:repeat(10,1fr); gap:10px; }
.grid-8{ display:grid; grid-template-columns:repeat(8,1fr); gap:12px; }

/* Slider row: arrows sit OUTSIDE the grid (absolutely), so the grid itself
   always keeps the full container width and cards never get squeezed. */
.slider-row{ position:relative; padding: 0 54px; }
.slider-row .slider-arrow{ position:absolute; top:50%; transform:translateY(-50%); }
.slider-row .slider-arrow.left{ left:0; }
.slider-row .slider-arrow.right{ right:0; }
@media (max-width:768px){
  .slider-row{ padding:0; }
  .slider-row .slider-arrow{ display:none; }
}

.card{
  background: var(--bg-card);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius);
  padding: 24px;
}
.card:hover{ border-color: var(--border-red); }

/* Person card (sponsors/committee) - photo is a square/rectangular headshot
   filling the top of the card. Card is two-tone: the photo keeps its own
   natural background, and the text band below is solid black, all wrapped
   in a thin gold border - matching the reference design exactly. */
.person-card{
  background: transparent;
  border: 1px solid rgba(224,169,77,0.55);
  text-align:center;
  border-radius: 6px;
  overflow:hidden;
}
.person-card img{
  width:100%;
  aspect-ratio: 1 / 1;
  object-fit:cover;
  display:block;
  border-radius:0;
  margin:0;
  border:none;
}
.person-card .p-body{
  background:#000;
  padding: 14px 10px 18px;
}
.person-card .p-name{ font-weight:700; font-size:14px; text-transform:uppercase; color:#fff; }
.person-card .p-role{ color: var(--red); font-size:12px; margin-top:4px; }
.person-card .p-role.gold{ color: var(--gold); }
.person-card .underline{
  width:26px;height:2px;background:var(--red);
  margin:10px auto 0;
}

/* Team badge card - dark card, thin gold/red border, soft red glow
   spreading below the card, matching the reference design exactly. */
.team-badge-card{
  background: linear-gradient(180deg,#14161f,#0c0e15);
  border: 1px solid rgba(227,30,38,0.35);
  text-align:center;
  padding: 22px 10px 20px;
  border-radius: 6px;
  box-shadow: 0 22px 26px -14px rgba(227,30,38,0.55);
  position:relative;
}
.team-badge-card img{ width:110px;height:110px;object-fit:contain;margin:0 auto 12px; background:transparent; border-radius:0; padding:0; }
.team-badge-card .t-name{ font-weight:700; font-size:13px; letter-spacing:0.5px; color:#fff; }

/* Compact variant used in the home-page "Our Teams" strip (10 teams, one row) */
.team-badge-card.compact{ padding:16px 8px 14px; }
.team-badge-card.compact img{ width:82px; height:82px; margin-bottom:8px; }
.team-badge-card.compact .t-name{ font-size:11px; letter-spacing:0.3px; }
@media (max-width:1024px){
  .grid-10{ grid-template-columns:repeat(5,1fr); gap:14px; }
  .grid-8{ grid-template-columns:repeat(4,1fr); gap:14px; }
}
@media (max-width:600px){
  .grid-10{ grid-template-columns:repeat(3,1fr); }
  .grid-8{ grid-template-columns:repeat(2,1fr); }
}

/* Real uploaded team logos vary (transparent / white / solid-color backgrounds).
   Give the smaller inline badges (point table rows, match rows, team list)
   a consistent light rounded backing so they sit cleanly at small sizes.
   The big home-page team cards show logos plain/direct (no circle) per the
   reference design - see .team-badge-card img above, which overrides this. */
.team-badge-card img,
.team-list-row img.badge,
.team-hero .team-logo-big,
.pt-table .team-cell img,
.match-row .m-team img {
  background:#fff;
  border-radius:50%;
  padding:4px;
}
/* Point table ke neeche wale live/completed match box me logo bina
   safed round card ke, seedha dikhna chahiye */
.match-team img,
.match-info-box img{
  background:transparent;
  border-radius:0;
  padding:0;
}
.team-badge-card img{
  background:transparent !important;
  border-radius:0 !important;
  padding:0 !important;
}

/* Gallery thumb strip (home) */
.thumb-strip{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.thumb-strip img{ border-radius: var(--radius); height:110px; width:100%; object-fit:cover; }
/* Click karke image badi dekhi ja sakti hai, isliye cursor + hover effect */
.thumb-strip img[data-lightbox],
.insta-card img[data-lightbox]{ cursor:pointer; transition:transform .25s ease, filter .25s ease; }
.thumb-strip img[data-lightbox]:hover,
.insta-card img[data-lightbox]:hover{ transform:scale(1.04); filter:brightness(1.08); }

/* Asli Instagram embeds (home page ka social section).
   Instagram ka embed page hamesha safed hota hai aur uski height post ke
   hisaab se badalti rehti hai - isliye har post ko fix height ke box me
   rakhte hain taki grid seedha rahe. */
.insta-embed-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:22px;
}
.insta-embed{
  position:relative;
  /* Instagram ka embed 326px se chhota theek nahi dikhta, isliye card
     ki width fix rakhi hai - post chahe kitni bhi ho, size same rahega
     aur cards beech me center rehte hain */
  flex:0 0 330px;
  max-width:330px;
  height:470px;
  overflow:hidden;
  border-radius:10px;
  background:#fff;
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 16px 34px -20px rgba(0,0,0,0.95);
}
.insta-embed iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}
/* Neeche patti - post kholne ke liye */
.insta-embed-link{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:10px;
  font-size:12.5px; font-weight:700; letter-spacing:0.4px;
  color:#fff;
  background:linear-gradient(90deg,#d6249f,#fd5949,#fdf497);
  opacity:0; transition:opacity .25s ease;
}
.insta-embed:hover .insta-embed-link{ opacity:1; }
@media (max-width:420px){
  .insta-embed{ flex-basis:100%; max-width:100%; height:500px; }
  /* Touch pe hover nahi hota - link hamesha dikhe */
  .insta-embed-link{ opacity:1; }
}

/* Instagram strip */
.insta-strip{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
.insta-card{
  position:relative;
  border-radius:8px;
  overflow:hidden;
  background: var(--bg-card);
  border: 1px solid rgba(255,255,255,0.08);
}
.insta-card .insta-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  padding:8px 10px;
  background:#000;
}
.insta-card .insta-user{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
}
.insta-card .insta-icon{
  width:20px;height:20px;
  border-radius:6px;
  flex-shrink:0;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  display:flex;align-items:center;justify-content:center;
  color:#fff;
  font-size:11px;
}
.insta-card .insta-handle{
  font-size:11px;
  color:#e5e5e5;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.insta-card .insta-time{
  font-size:11px;
  color:#9aa0ad;
  flex-shrink:0;
}
.insta-card img{ height:150px; width:100%; object-fit:cover; display:block; }

/* ---------- Buttons small ---------- */
.btn-view{
  border:1px solid var(--gold);
  color: var(--gold);
  background:transparent;
  padding:11px 24px;
  font-size:13px;
  font-weight:700;
  letter-spacing:0.5px;
  display:inline-flex;
  gap:8px;
  align-items:center;
  border-radius:2px;
}
.btn-view:hover{ background:var(--gold); color:#0b0e17; }
.btn-red-outline{
  border:1px solid var(--red);
  color:#fff;
  background:transparent;
  padding:11px 24px;
  font-size:13px;
  font-weight:700;
  letter-spacing:0.5px;
  display:inline-flex;
  gap:8px;
  align-items:center;
  border-radius:2px;
  text-decoration:none;
  cursor:pointer;
}
.btn-red-outline:hover{ background:var(--red); color:#fff; }

.center{ text-align:center; }

/* ---------- Footer ---------- */
footer.site-footer{
  background: var(--bg-darker);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 50px;
  position:relative;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.3fr 1.3fr 1fr 1.2fr;
  gap:30px;
  padding-bottom: 30px;
}
/* Grid ke column by default min-content jitne chaude rehte hain -
   min-width:0 lagane se chhoti screen pe wo sikud jate hain */
.footer-grid > *{ min-width:0; }
.footer-grid a,
.footer-grid p,
.footer-grid li{ overflow-wrap:anywhere; }
.footer-about .logo{ margin-bottom:14px; }
.footer-about .logo img{ height:64px; max-width:100%; }
.footer-about p{ color: var(--text-muted); font-size:13.5px; }
.footer-social{ display:flex; gap:10px; margin-top:16px; }
.footer-social a{
  width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(255,255,255,0.2);
  display:flex;align-items:center;justify-content:center;
  color:#fff;
}
.footer-social a:hover{ background:var(--red); border-color:var(--red); }

.footer-col h4{
  font-size:15px;
  text-transform:uppercase;
  margin-bottom:18px;
  font-weight:700;
  letter-spacing:0.5px;
}
.footer-col ul li{ margin-bottom:12px; }
/* Quick Links ek lambi line ban jati thi - ab 2 column me aati hai */
.footer-col ul.two-col{ display:grid; grid-template-columns:1fr 1fr; column-gap:16px; }
.footer-col ul li a{
  color: var(--text-muted);
  font-size:13.5px;
  display:flex; align-items:center; gap:6px;
}
.footer-col ul li a:hover{ color:var(--red); }
.footer-col ul li a::before{ content:"›"; color:var(--red); }

.footer-contact li{
  display:flex; gap:10px; align-items:flex-start;
  color: var(--text-muted);
  font-size:13.5px;
  margin-bottom:16px;
}
.footer-contact li i{ color:var(--red); margin-top:3px; }

.newsletter p{ color:var(--text-muted); font-size:13.5px; margin-bottom:16px; }
.newsletter form{ display:flex; }
.newsletter input{
  flex:1;
  min-width:0;              /* warna input apni default chaudai se chhota nahi hota */
  background: var(--bg-card);
  border:1px solid rgba(255,255,255,0.1);
  padding:12px 14px;
  color:#fff;
  font-size:13px;
  border-radius:2px 0 0 2px;
}
.newsletter button{
  background:var(--red);
  border:none;
  color:#fff;
  padding:0 18px;
  font-weight:700;
  font-size:13px;
  border-radius:0 2px 2px 0;
}

.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.06);
  padding: 18px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:12.5px;
  color: var(--text-muted);
}
.footer-bottom .heart{ color:var(--red); }
.footer-bottom .credit-name{ color:#fff; font-weight:700; }

.back-to-top{
  position:fixed;
  bottom:26px; right:26px;
  width:44px;height:44px;
  border-radius:50%;
  background: var(--red);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  z-index:200;
  border:none;
  box-shadow:0 4px 14px rgba(227,30,38,0.4);
}

/* ---------- MPL In Numbers / stats ---------- */
.stats-bar{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:20px;
  background: var(--bg-card);
  border:1px solid rgba(255,255,255,0.06);
  padding:30px 20px;
  border-radius: var(--radius);
}
.stat-item{ display:flex; align-items:center; gap:14px; }
.stat-item i{ color:var(--red); font-size:26px; }
.stat-item .num{ font-size:24px; font-weight:800; }
.stat-item .lbl{ color:var(--text-muted); font-size:11px; text-transform:uppercase; letter-spacing:0.5px; }

/* Mission/Vision/Values */
.mvv-card{
  background: var(--bg-card);
  border:1px solid rgba(255,255,255,0.07);
  padding:30px 24px;
  border-radius:var(--radius);
}
.mvv-icon{
  width:56px;height:56px;
  border:1px solid var(--red);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--red);
  font-size:22px;
  margin-bottom:16px;
}
.mvv-card h3{ font-size:16px; text-transform:uppercase; margin:0 0 4px; }
.mvv-card .underline{ width:26px;height:2px;background:var(--red); margin-bottom:14px; }
.mvv-card p, .mvv-card li{ color: var(--text-muted); font-size:13.5px; }
.mvv-card ul li{ margin-bottom:8px; }
.mvv-card ul li::before{ content:"›"; color:var(--red); margin-right:8px; }

/* Why MPL */
.why-grid{ display:grid; grid-template-columns: 1.3fr repeat(4,1fr); gap:20px; }
.why-intro h3{ font-size:20px; text-transform:uppercase; margin-bottom:10px; }
.why-intro p{ color:var(--text-muted); font-size:14px; }
.why-card{ text-align:center; }
.why-card i{
  width:56px;height:56px;
  border-radius:50%;
  background: var(--bg-card);
  border:1px solid var(--red);
  color:var(--red);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 14px;
  font-size:22px;
}
.why-card h4{ font-size:14px; text-transform:uppercase; margin-bottom:6px; }
.why-card p{ color:var(--text-muted); font-size:12.5px; }

/* ---------- Gallery Page ---------- */
.filter-tabs{ display:flex; gap:12px; margin-bottom:34px; flex-wrap:wrap; justify-content:center; }
.filter-tabs button,
.filter-tabs .tab-link{
  background: transparent;
  border:1px solid rgba(255,255,255,0.15);
  color:#fff;
  padding:10px 18px;
  font-size:13px;
  font-weight:600;
  border-radius:2px;
  display:flex; align-items:center; gap:8px;
  text-decoration:none; cursor:pointer;
}
.filter-tabs button.active,
.filter-tabs .tab-link.active{ background:var(--red); border-color:var(--red); color:#fff; }
.filter-tabs .tab-link:hover{ border-color:var(--red); }

.gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.gallery-grid .g-item{
  position:relative;
  border:1px solid rgba(227,30,38,0.25);
  border-radius: var(--radius);
  overflow:hidden;
  display:block;
  cursor:pointer;
  text-decoration:none;
}
.gallery-grid .g-item img{ height:230px; width:100%; object-fit:cover; transition:.3s; display:block; }
.gallery-grid .g-item:hover img{ transform:scale(1.05); }
.gallery-grid .g-item .g-overlay{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  background: linear-gradient(0deg, rgba(0,0,0,0.6), transparent 50%);
  padding-bottom:16px;
  font-weight:800;
  font-size:18px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  text-align:center;
  color: var(--gold);
}
.gallery-grid .g-item .g-count{
  color:#fff; font-size:11px; font-weight:600; letter-spacing:1px; margin-top:4px; opacity:.8;
}

/* Lightbox (gallery photo bada karke dekhne ke liye) */
.lightbox{
  display:none;
  position:fixed; inset:0; z-index:200;
  background:rgba(0,0,0,0.92);
  align-items:center; justify-content:center;
  padding:40px;
}
.lightbox.open{ display:flex; }
.lightbox img{ max-width:92vw; max-height:88vh; border-radius: var(--radius); }
.lightbox .lb-close{
  position:absolute; top:18px; right:28px;
  color:#fff; font-size:40px; line-height:1; cursor:pointer;
}

/* ---------- Point Table ---------- */
.pt-table-wrap{
  border: 1px solid rgba(227,30,38,0.45);
  border-radius: 10px;
  overflow:hidden;
  background: var(--bg-card);
  box-shadow: 0 0 40px rgba(227,30,38,0.12), 0 20px 30px -20px rgba(227,30,38,0.4);
}
.pt-table{ width:100%; border-collapse:collapse; background:transparent; }
.pt-table thead tr{ background: linear-gradient(90deg, var(--red-dark), var(--red)); border-bottom:none; }
.pt-table th{ padding:18px 16px; text-align:left; font-size:12.5px; font-weight:700; color:#fff; text-transform:uppercase; letter-spacing:0.5px; }
.pt-table td{ padding:16px; border-top:1px solid rgba(255,255,255,0.06); font-size:14.5px; color:#fff; }
.pt-table tbody tr:hover{ background: rgba(227,30,38,0.06); }
.pt-table .team-cell{ display:flex; align-items:center; gap:10px; font-weight:700; text-transform:uppercase; font-size:13.5px; color:#fff; text-decoration:none; }
.pt-table .team-cell:hover{ color:var(--gold); }
.pt-table .team-cell img{ width:52px;height:52px; object-fit:contain; background:transparent; border-radius:0; padding:0; }
.pt-table .pos-col{ font-weight:800; font-size:16px; }
.pt-table .pts-col{ color:var(--red); font-weight:800; font-size:16px; }
.pt-legend{ display:flex; gap:20px; flex-wrap:wrap; justify-content:center; padding:16px; font-size:12px; color:var(--text-muted); border-top:1px solid rgba(227,30,38,0.2); }
.pt-legend b{ color:var(--red); }

.match-info-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:30px; }
.match-info-box{
  background:var(--bg-card);
  border:1px solid rgba(255,255,255,0.07);
  border-radius:var(--radius);
  padding:22px;
}
.match-info-box .tag{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:14px; margin-bottom:16px; }
.match-info-box.upcoming .tag{ color:var(--red); }
.match-info-box.completed .tag{ color:#4caf50; }
.match-vs-row{ display:flex; align-items:center; justify-content:space-between; }
.match-team{ display:flex; flex-direction:column; align-items:center; gap:8px; font-weight:700; font-size:13px; text-align:center; }
.match-team img{ width:56px;height:56px;object-fit:contain; }
.match-vs-mid{ text-align:center; color:var(--text-muted); font-size:12px; }
.match-vs-mid .vs-badge{
  border:1px solid var(--red); color:var(--red); border-radius:50%;
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;margin:0 auto 6px;
}
.match-result{ color:#4caf50; font-size:12px; font-weight:600; text-align:center; margin-top:6px; }

/* ---------- Schedule Page ---------- */
.schedule-tabs{ display:flex; justify-content:space-between; align-items:center; margin-bottom:30px; flex-wrap:wrap; gap:14px; }
.schedule-tabs .tabs-left{ display:flex; gap:10px; }
.schedule-tabs button,
.schedule-tabs .tab-link{
  background:transparent; border:1px solid rgba(255,255,255,0.18); color:#fff;
  padding:10px 22px; font-size:13px; font-weight:600; border-radius:6px;
  text-decoration:none; cursor:pointer; display:inline-block;
}
.schedule-tabs button.active,
.schedule-tabs .tab-link.active{ background:var(--red); border-color:var(--red); color:#fff; }
.schedule-tabs .tab-link:hover{ border-color:var(--red); }
.tz-note{ color:var(--text-muted); font-size:13px; display:flex; align-items:center; gap:6px; }

.match-row{
  display:flex; align-items:center; justify-content:space-between;
  background: var(--bg-card);
  border:1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius);
  padding: 18px 24px;
  margin-bottom:14px;
  gap:14px;
  flex-wrap:wrap;
}
.match-row .m-team{ display:flex; align-items:center; gap:12px; min-width:190px; font-weight:700; font-size:14px; }
.match-row .m-team img{ width:52px;height:52px;object-fit:contain; }
.match-row .m-mid{ text-align:center; color:var(--text-muted); font-size:12px; }
.match-row .m-mid .match-no{ color:var(--red); font-size:12px; font-weight:600; }
.match-row .m-mid .m-date{ font-weight:700; font-size:14px; color:#fff; }
.match-row .m-loc{ display:flex; align-items:center; gap:8px; color:var(--text-muted); font-size:12.5px; min-width:180px; }
.match-row .m-loc i{ color:var(--red); }
.match-row.live{ border-color: var(--red); }

/* Fixture row - used ONLY for the "Upcoming Matches" list, matching the
   reference screenshot exactly: plain bigger logos, two-line match info,
   glowing hexagon VS badge, two-line location block. */
.fixture-row{
  display:grid;
  grid-template-columns: 1fr 150px 64px 1fr 200px;
  align-items:center;
  gap:18px;
  background: var(--bg-card);
  border:1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 22px 28px;
  margin-bottom:16px;
}
.fixture-row .m-team{ display:flex; align-items:center; gap:14px; font-weight:800; font-size:15px; letter-spacing:0.3px; }
.fixture-row .m-team.right{ flex-direction:row-reverse; text-align:right; justify-content:flex-start; }
.fixture-row .m-team img{ width:58px; height:58px; object-fit:contain; background:transparent; flex-shrink:0; }
.fixture-row .m-mid{ text-align:center; }
.fixture-row .m-mid .match-no{ color:var(--red); font-size:12px; font-weight:700; letter-spacing:0.5px; }
.fixture-row .m-mid .m-date{ font-weight:800; font-size:15px; color:#fff; margin-top:3px; }
.fixture-row .m-mid .m-time{ color:var(--text-muted); font-size:12.5px; margin-top:3px; }
.fixture-row .m-loc{ display:flex; align-items:flex-start; gap:8px; font-size:12.5px; }
.fixture-row .m-loc i{ color:var(--red); margin-top:3px; flex-shrink:0; }
.fixture-row .m-loc .loc-stadium{ font-weight:700; color:#fff; }
.fixture-row .m-loc .loc-city{ color:var(--text-muted); margin-top:2px; }

.vs-hex{
  width:60px; height:54px;
  object-fit:contain;
  display:block;
  margin:0 auto;
}

.live-badge{
  background:var(--red); color:#fff; padding:6px 14px; border-radius:20px; font-size:12px; font-weight:700;
  display:flex; align-items:center; gap:6px;
}
.live-dot{ width:7px;height:7px;border-radius:50%;background:#fff; animation:pulse 1.2s infinite; }
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:0.3;} }
.score-box{ text-align:center; }
.score-box .score{ font-size:20px; font-weight:800; }
.score-box .overs{ color:var(--text-muted); font-size:11.5px; }
.view-scorecard{
  border:1px solid var(--red); color:#fff; background:transparent;
  padding:8px 16px; font-size:12px; border-radius:2px; margin-top:8px;
}

/* ---------- Team Detail Page ---------- */
.back-link{ display:flex; align-items:center; gap:8px; color:var(--text-muted); font-size:13px; margin-bottom:20px; }
.team-hero{ display:flex; align-items:center; gap:30px; flex-wrap:wrap; }
.team-hero .team-logo-big{ width:140px;height:140px;object-fit:contain; }
.team-hero-info h1{ font-size:34px; text-transform:uppercase; font-weight:800; margin:0; }
.team-hero-info .meta{ display:flex; gap:20px; margin-top:10px; color:var(--text-muted); font-size:13.5px; }
.team-hero-info .meta span{ display:flex; align-items:center; gap:6px; }
.team-hero-info .meta i{ color:var(--red); }
.team-hero-photo{ margin-left:auto; max-width:520px; border-radius:var(--radius); overflow:hidden; }

.sponsor-card{
  background:var(--bg-card); border:1px solid rgba(255,255,255,0.07); border-radius:var(--radius);
  padding:18px; display:flex; align-items:center; gap:14px;
}
.sponsor-card img{ width:56px;height:56px;border-radius:50%;object-fit:cover; }
.sponsor-card .s-name{ font-weight:700; font-size:14px; }
.sponsor-card .s-role{ color:var(--red); font-size:12px; }
.sponsor-card .s-brand{ margin-top:6px; font-weight:700; color:var(--gold); font-size:13px; }

.captain-box{ text-align:center; }
.captain-box img{
  width:130px;height:130px;border-radius:50%;object-fit:cover;
  border:3px solid var(--gold); margin:0 auto 14px;
}
.captain-box .c-name{ font-size:20px; font-weight:800; }
.captain-box .c-role{ color:var(--red); font-weight:600; margin-top:4px; }

.player-card{ text-align:center; }
.player-card img{
  border-radius:var(--radius); height:190px; width:100%; object-fit:cover; margin-bottom:12px;
  border:1px solid rgba(255,255,255,0.08);
}
.player-card .pl-name{ font-weight:700; font-size:13px; text-transform:uppercase; }
.player-card .pl-loc{ color:var(--red); font-size:12px; }

/* ---------- Teams Listing Page ---------- */
.team-list-row{
  background: linear-gradient(180deg,#14161f,#0c0e15);
  border:1px solid rgba(227,30,38,0.35);
  border-radius: 8px;
  padding: 26px 28px;
  display:flex;
  align-items:center;
  gap:22px;
  box-shadow: 0 20px 24px -16px rgba(227,30,38,0.5);
}
.team-list-row img.badge{ width:96px; height:96px; object-fit:contain; background:transparent; border-radius:0; padding:0; flex-shrink:0; }
.team-list-row .tl-info{ flex:1; }
.team-list-row .tl-info h3{ margin:0 0 16px; font-size:19px; font-weight:800; text-transform:uppercase; color:#fff; }
.team-list-row .tl-captain{ text-align:center; flex-shrink:0; }
.team-list-row .tl-captain .cap-name{ font-size:14px; font-weight:700; color:#fff; margin-top:10px; }
.team-list-row .tl-captain .cap-label{ color:var(--red); font-size:11.5px; font-weight:700; letter-spacing:0.5px; margin-top:3px; }
.team-list-row .cap-photo{ width:150px;height:150px;border-radius:50%;object-fit:cover; border:2px solid var(--red); flex-shrink:0; }
.team-list-row .btn-view-team{
  border:1px solid rgba(255,255,255,0.35); background:transparent; color:#fff;
  padding:9px 18px; font-size:12px; font-weight:600; border-radius:6px; display:inline-flex; gap:8px; align-items:center; white-space:nowrap;
}
.team-list-row .btn-view-team:hover{ background:var(--red); border-color:var(--red); }

.champion-banner{
  background: linear-gradient(90deg, rgba(227,30,38,0.15), rgba(224,169,77,0.08));
  border:1px solid var(--border-gold);
  border-radius: var(--radius);
  padding: 22px 30px;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  margin-top: 30px;
}
.champion-banner .cb-text{ font-weight:800; font-size:18px; letter-spacing:1px; text-transform:uppercase; display:flex; align-items:center; gap:10px;}

/* ---------- Responsive ---------- */
@media (max-width: 1024px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-5{ grid-template-columns:repeat(3,1fr); }
  .grid-6{ grid-template-columns:repeat(3,1fr); }
  .thumb-strip{ grid-template-columns:repeat(3,1fr); }
  .insta-strip{ grid-template-columns:repeat(3,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .why-grid{ grid-template-columns:repeat(2,1fr); }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); }
  .stats-bar{ grid-template-columns:repeat(3,1fr); }
  .match-info-grid{ grid-template-columns:1fr; }
}
/* ---------- Contact Page ---------- */
.contact-grid{ display:grid; grid-template-columns: 1fr 1.35fr; gap:40px; align-items:start; }

.contact-info .ci-row{ display:flex; gap:14px; align-items:flex-start; margin-bottom:22px; }
.contact-info .ci-icon{
  width:42px; height:42px; flex:0 0 42px;
  border:1px solid var(--border-red); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color: var(--red);
}
.contact-info .ci-label{ font-size:12px; text-transform:uppercase; letter-spacing:1px; color:var(--text-muted); margin-bottom:3px; }
.contact-info .ci-row a, .contact-info .ci-row span{ color:#fff; text-decoration:none; font-size:14.5px; }
.contact-info .ci-row a:hover{ color: var(--gold); }
.contact-info .ci-social{ display:flex; gap:10px; margin-top:28px; }
.contact-info .ci-social a{
  width:38px;height:38px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.18); color:#fff;
  display:flex; align-items:center; justify-content:center;
  text-decoration:none; transition:.2s;
}
.contact-info .ci-social a:hover{ background: var(--red); border-color: var(--red); }

.contact-form-box{
  background: var(--bg-card);
  border:1px solid rgba(227,30,38,0.25);
  border-radius: var(--radius);
  padding: 30px;
}
.contact-form-box h3{ font-size:19px; text-transform:uppercase; margin-bottom:22px; }
.cf-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.cf-field{ margin-bottom:16px; display:flex; flex-direction:column; }
.cf-field label{ font-size:12px; text-transform:uppercase; letter-spacing:0.8px; color:var(--text-muted); margin-bottom:7px; }
.cf-field input, .cf-field textarea{
  background:#0b0e17;
  border:1px solid rgba(255,255,255,0.14);
  border-radius:6px;
  color:#fff;
  padding:11px 13px;
  font-size:14px;
  font-family:inherit;
  width:100%;
}
.cf-field input:focus, .cf-field textarea:focus{ outline:none; border-color: var(--red); }
.cf-field textarea{ resize:vertical; }

.form-alert{ border-radius:6px; padding:12px 14px; font-size:13.5px; margin-bottom:18px; line-height:1.7; }
.form-alert.ok{  background:rgba(76,175,80,0.12);  border:1px solid rgba(76,175,80,0.4);  color:#7ddb81; }
.form-alert.err{ background:rgba(227,30,38,0.12);  border:1px solid rgba(227,30,38,0.45); color:#ff8b90; }

@media (max-width: 900px){
  .contact-grid{ grid-template-columns:1fr; }
  .cf-row{ grid-template-columns:1fr; }
}

/* Jab table khali ho tab dikhne wala message */
.empty-note{
  text-align:center; color:rgba(255,255,255,0.55);
  padding:40px 20px; font-size:15px;
  border:1px dashed rgba(255,255,255,0.15); border-radius: var(--radius);
}

/* Newsletter ka result message */
.sub-msg{ font-size:13px; margin-top:10px; font-weight:600; }
.sub-msg.ok{ color:#4caf50; }
.sub-msg.err{ color: var(--red); }

@media (max-width: 768px){
  nav.main-nav{ display:none; }
  nav.main-nav.open{
    display:block;
    position:absolute; left:0; right:0; top:100%;
    background:#11141f; border-top:1px solid rgba(255,255,255,0.08);
    padding:10px 20px; z-index:60;
  }
  nav.main-nav.open ul{ flex-direction:column; gap:0; }
  nav.main-nav.open li{ border-bottom:1px solid rgba(255,255,255,0.06); }
  nav.main-nav.open a{ display:block; padding:12px 0; }
  .site-header .nav-wrap{ position:relative; }
  .nav-toggle{ display:block; }
  .home-hero .container, .page-hero .container{ flex-direction:column; text-align:center; }
  .home-hero-image{ max-width:100%; }
  .grid-3, .grid-2{ grid-template-columns:1fr; }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr; }
  .why-grid{ grid-template-columns:1fr 1fr; }
  .gallery-grid{ grid-template-columns:1fr; }
  .stats-bar{ grid-template-columns:repeat(2,1fr); }
  .team-hero-photo{ margin-left:0; }
  .footer-bottom{ flex-direction:column; gap:8px; text-align:center; }

  /* --- Header thoda compact --- */
  .nav-wrap{ padding:10px 16px; gap:10px; }
  .logo img{ height:42px; max-width:160px; }
  .header-actions{ gap:10px; }
  .social-icons{ display:none; }          /* footer me wahi icons already hain */
  .btn-admin{ padding:9px 13px; font-size:11px; letter-spacing:0; }

  /* --- Spacing / typography --- */
  .container{ padding:0 16px; }
  .section-pad{ padding:40px 0; }
  .section-heading{ font-size:20px; margin-bottom:28px; gap:10px; }
  .section-heading::before, .section-heading::after{ width:30px; }
  .page-heading{ font-size:32px; }

  /* --- Hero --- */
  /* min-height rakha hai taki background image ko dikhne ki jagah mile */
  .home-hero .container{ padding:56px 16px 52px; min-height:360px; gap:28px; }
  .page-hero .container{ padding-top:48px; padding-bottom:48px; min-height:220px; }
  .page-hero-text{ max-width:100%; }
  /* mobile pe text center me hai isliye overlay bhi upar-neeche wala chahiye */
  .page-hero .hero-bg::after{
    background: linear-gradient(180deg, rgba(11,14,23,0.70) 0%, rgba(11,14,23,0.90) 100%);
  }
  .home-hero-text{ max-width:100%; }
  .home-hero-text .eyebrow{ font-size:24px; }
  .home-hero-text .eyebrow .accent{ font-size:28px; }
  .home-hero-text .season{ justify-content:center; }
  /* mobile pe text center me hai isliye overlay bhi upar-neeche wala chahiye */
  .home-hero .hero-bg::after{
    background: linear-gradient(180deg, rgba(11,14,23,0.72) 0%, rgba(11,14,23,0.88) 100%);
  }
  .page-hero-text p.subtitle{ margin-left:auto; margin-right:auto; }
  .slider-dots{ bottom:12px; }

  /* --- Grids --- */
  .insta-strip{ grid-template-columns:repeat(2,1fr); }

  /* --- Point table side me scroll hogi --- */
  .pt-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .pt-table{ min-width:700px; }
  /* naam ek hi line me rahe, warna 3 line me tootkar numbers se takra jata hai */
  .pt-table th,
  .pt-table td{ padding:12px 10px; white-space:nowrap; }
  /* max-content isliye taki cell naam ke hisaab se chaudi ho, warna
     flex container sikud jata hai aur naam agle column pe chadh jata hai */
  .pt-table .team-cell{ white-space:nowrap; gap:8px; width:max-content; }
  .pt-table .team-cell img{ width:36px; height:36px; }
  .pt-legend{ gap:12px; font-size:11.5px; }

  /* --- Schedule: rows upar-neeche --- */
  .schedule-tabs{ justify-content:center; }
  .schedule-tabs .tabs-left{ flex-wrap:wrap; justify-content:center; }
  .fixture-row{ grid-template-columns:1fr; gap:14px; text-align:center; padding:20px 16px; }
  .fixture-row .m-team{ justify-content:center; font-size:14px; }
  .fixture-row .m-team.right{ flex-direction:row; justify-content:center; text-align:center; }
  .fixture-row .m-loc{ justify-content:center; }
  .vs-hex{ width:46px; height:42px; }
  .match-row{ flex-direction:column; align-items:stretch; text-align:center; padding:18px 16px; }
  .match-row .m-team{ justify-content:center; min-width:0; }
  .match-row .m-loc{ justify-content:center; min-width:0; }
  .match-info-grid{ grid-template-columns:1fr; }

  /* --- Teams listing --- */
  .team-list-row{ flex-direction:column; text-align:center; padding:22px 18px; gap:16px; }
  .team-list-row .tl-info h3{ margin-bottom:12px; }
  .team-list-row .cap-photo{ width:110px; height:110px; }
  .champion-banner{ flex-direction:column; text-align:center; padding:20px; }
  .champion-banner .cb-text{ font-size:15px; justify-content:center; }

  /* --- Team detail --- */
  .team-hero{ justify-content:center; text-align:center; }
  .team-hero .team-logo-big{ width:110px; height:110px; }
  .team-hero-info h1{ font-size:26px; }
  .team-hero-info .meta{ justify-content:center; flex-wrap:wrap; gap:12px; }
  .team-hero-photo{ max-width:100%; }
  .player-card img{ height:160px; }

  /* --- Gallery lightbox --- */
  .lightbox{ padding:16px; }
  .lightbox .lb-close{ top:8px; right:16px; font-size:34px; }

  .stats-bar{ padding:22px 16px; }
  .back-to-top{ width:40px; height:40px; bottom:18px; right:18px; }
}

@media (max-width: 600px){
  .grid-5, .grid-6{ grid-template-columns:repeat(2,1fr); }
  .thumb-strip{ grid-template-columns:repeat(2,1fr); }
  .why-grid{ grid-template-columns:1fr; }
  .filter-tabs{ gap:8px; }
  .filter-tabs button, .filter-tabs .tab-link,
  .schedule-tabs button, .schedule-tabs .tab-link{ padding:8px 15px; font-size:12px; }
  .mvv-card{ padding:24px 18px; }
  .contact-form-box{ padding:22px 18px; }
  /* iPhone pe input focus karte hi zoom na ho */
  .cf-field input, .cf-field textarea, .newsletter input{ font-size:16px; }
}

@media (max-width: 420px){
  .page-heading{ font-size:26px; }
  .home-hero-text .eyebrow{ font-size:20px; }
  .home-hero-text .eyebrow .accent{ font-size:23px; }
  .stats-bar{ grid-template-columns:1fr; }
  .grid-4{ grid-template-columns:1fr; }
  .insta-strip{ grid-template-columns:1fr; }
  .logo img{ height:36px; max-width:130px; }
  /* Admin button sirf icon reh jata hai - jagah bachane ke liye */
  .btn-admin{ font-size:0; padding:10px 12px; gap:0; }
  .btn-admin i{ font-size:13px; }
}


/* ============================================================
   PLAYER STATS  (Orange Cap / Purple Cap)
   ============================================================ */
.cap-block{ margin-bottom:56px; }
.cap-head{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  padding:0 0 14px; margin-bottom:0; border-bottom:2px solid;
}
.cap-head .cap-title{ font-family:'Anton',Impact,sans-serif; font-size:26px; letter-spacing:1.5px; }
.cap-head .cap-sub{ color:var(--text-muted); font-size:13px; letter-spacing:0.8px; text-transform:uppercase; }
.cap-orange{ border-color:#f0873c; }
.cap-orange .cap-title{ color:#f0873c; }
.cap-purple{ border-color:#a06ee0; }
.cap-purple .cap-title{ color:#a06ee0; }

/* Sabse upar wale player ka bada card */
.cap-hero{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  padding:22px 26px; margin:22px 0 20px;
  border-radius:14px; border:1px solid rgba(255,255,255,0.08);
}
.cap-orange-bg{ background:linear-gradient(135deg,rgba(240,135,60,0.22),rgba(240,135,60,0.04)); }
.cap-purple-bg{ background:linear-gradient(135deg,rgba(160,110,224,0.22),rgba(160,110,224,0.04)); }
.cap-hero img{
  width:74px; height:74px; border-radius:50%; object-fit:cover;
  border:3px solid rgba(255,255,255,0.25); flex-shrink:0;
}
.cap-hero-info{ flex:1 1 160px; min-width:0; }
.cap-hero .cap-name{ font-family:'Anton',Impact,sans-serif; font-size:24px; letter-spacing:1px; }
.cap-hero .cap-team{ color:var(--text-muted); font-size:13px; letter-spacing:0.6px; text-transform:uppercase; }
.cap-big{ text-align:right; margin-left:auto; }
.cap-big .n{ display:block; font-family:'Anton',Impact,sans-serif; font-size:44px; line-height:1; }
.cap-big .l{ display:block; font-size:11px; letter-spacing:2px; color:var(--text-muted); margin-top:4px; }
.cap-orange-bg .cap-big .n{ color:#f0873c; }
.cap-purple-bg .cap-big .n{ color:#a06ee0; }

/* Leaderboard table */
.stats-table .stat-player{ display:flex; align-items:center; gap:10px; }
.stats-table .stat-player img{ width:34px; height:34px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.stats-table .cap-mark{ font-size:11px; margin-left:5px; color:var(--gold); }
.stats-table tr.cap-holder{ background:rgba(255,255,255,0.04); }

@media (max-width:640px){
  .cap-head .cap-title{ font-size:21px; }
  .cap-hero{ padding:18px; gap:14px; }
  .cap-hero img{ width:58px; height:58px; }
  .cap-hero .cap-name{ font-size:19px; }
  .cap-big .n{ font-size:34px; }
  .stats-table .stat-player img{ width:28px; height:28px; }
}


/* ============================================================
   LIVE SCORE  (auto refresh + upar chipakne wali patti)
   ============================================================ */

/* Score badla to number ek baar halka sa uchalta hai */
@keyframes scorePop{
  0%  { transform:scale(1);    color:inherit; }
  40% { transform:scale(1.18); color:var(--red); }
  100%{ transform:scale(1);    color:inherit; }
}
.score-pop{ animation:scorePop .55s ease; display:inline-block; }

.live-sticky{
  position:fixed; left:0; right:0; top:0; z-index:90;
  background:rgba(11,14,23,0.96); border-bottom:1px solid rgba(227,30,38,0.5);
  backdrop-filter:blur(8px);
  transform:translateY(-130%); transition:transform .3s ease;
}
.live-sticky.show{ transform:translateY(0); }
.ls-inner{
  max-width:1200px; margin:0 auto; padding:9px 20px;
  display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:nowrap;
}
.ls-badge{
  display:inline-flex; align-items:center; gap:6px; flex-shrink:0;
  font-size:11px; letter-spacing:1.5px; font-weight:700; color:var(--red);
}
.ls-side{
  display:inline-flex; align-items:center; gap:8px; min-width:0;
  font-size:13px; white-space:nowrap; overflow:hidden;
}
.ls-side img{ width:24px; height:24px; object-fit:contain; flex-shrink:0; }
.ls-side b{ letter-spacing:0.6px; overflow:hidden; text-overflow:ellipsis; }
.ls-score{
  font-family:'Anton',Impact,sans-serif; font-size:17px; letter-spacing:1px;
  color:var(--gold); flex-shrink:0;
}
.ls-vs{ font-size:11px; letter-spacing:1px; color:var(--text-muted); flex-shrink:0; }
.ls-link{
  font-size:11px; letter-spacing:1.5px; font-weight:700; color:#fff;
  text-decoration:none; border:1px solid rgba(255,255,255,0.25);
  padding:6px 12px; border-radius:20px; flex-shrink:0; transition:all .25s ease;
}
.ls-link:hover{ background:var(--red); border-color:var(--red); }

@media (max-width:760px){
  .ls-inner{ gap:10px; padding:8px 12px; }
  .ls-side b{ display:none; }              /* mobile pe sirf logo + score */
  .ls-link{ display:none; }
  .ls-score{ font-size:15px; }
}


/* ============================================================
   NEXT MATCH COUNTDOWN  (home page)
   ============================================================ */
.countdown-sec{ padding:46px 0; background:var(--bg-darker); }
.cd-box{
  position:relative; overflow:hidden;
  padding:30px 26px; border-radius:16px; text-align:center;
  border:1px solid rgba(255,255,255,0.08);
  background:linear-gradient(135deg,rgba(227,30,38,0.16),rgba(11,14,23,0.6) 55%);
}
.cd-label{
  font-size:12px; letter-spacing:3px; color:var(--gold);
  text-transform:uppercase; margin-bottom:18px;
}
.cd-teams{ display:flex; align-items:center; justify-content:center; gap:22px; flex-wrap:wrap; }
.cd-team{
  display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit;
  transition:transform .25s ease;
}
.cd-team:hover{ transform:translateY(-3px); }
.cd-team img{
  width:56px; height:56px; object-fit:contain; flex-shrink:0;
  border-radius:50%; background:rgba(255,255,255,0.06); padding:5px;
}
.cd-team span{ font-family:'Anton',Impact,sans-serif; font-size:18px; letter-spacing:1px; }
.cd-vs{
  font-family:'Anton',Impact,sans-serif; font-size:15px; letter-spacing:1px;
  color:var(--red); border:1px solid var(--red); border-radius:50%;
  width:38px; height:38px; line-height:36px; flex-shrink:0;
}

/* Ginti ke 4 dabbe */
.cd-timer{ display:flex; justify-content:center; gap:12px; margin:24px 0 20px; flex-wrap:wrap; }
.cd-unit{
  min-width:78px; padding:12px 8px; border-radius:12px;
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08);
}
.cd-unit .n{
  display:block; font-family:'Anton',Impact,sans-serif; font-size:34px;
  line-height:1; font-variant-numeric:tabular-nums;
}
.cd-unit .l{ display:block; font-size:10px; letter-spacing:2px; color:var(--text-muted); margin-top:6px; }

.cd-meta{
  display:flex; justify-content:center; gap:20px; flex-wrap:wrap;
  color:var(--text-muted); font-size:13px; margin-bottom:20px;
}
.cd-meta i{ color:var(--gold); margin-right:5px; }
.cd-btn{ display:inline-flex; align-items:center; gap:8px; }

/* Match ka time aa gaya - ab ginti ki jagah ye line dikhti hai */
.cd-live-note{
  font-family:'Anton',Impact,sans-serif; font-size:24px; letter-spacing:2px;
  color:var(--red); margin:26px 0 20px;
}

@media (max-width:640px){
  .cd-box{ padding:24px 16px; }
  .cd-teams{ gap:14px; }
  .cd-team{ flex-direction:column; gap:6px; }
  .cd-team img{ width:46px; height:46px; }
  .cd-team span{ font-size:14px; }
  .cd-timer{ gap:8px; }
  .cd-unit{ min-width:68px; padding:10px 6px; }
  .cd-unit .n{ font-size:26px; }
  .cd-meta{ gap:10px 16px; font-size:12px; }
}


/* ============================================================
   ANIMATIONS
   ------------------------------------------------------------
   Sab kuch `html.anim` ke andar hai. Ye class <head> ki chhoti si
   script lagati hai - aur sirf tab lagati hai jab user ne apne
   system me "reduce motion" on na kiya ho. Agar animation wali
   script kisi wajah se na chale to wahi script 3 second baad
   class hata deti hai, taki content kabhi chhupa na rahe.

   Reveal ke liye `transform` ki jagah alag `translate` property
   use ki hai - isse hover wale transform se koi takraav nahi hota.
   ============================================================ */

/* ---------- Scroll reveal: neeche se halka sa upar aana ---------- */
html.anim .section-heading,
html.anim .person-card,
html.anim .team-badge-card,
html.anim .g-item,
html.anim .insta-embed,
html.anim .insta-card,
html.anim .fixture-row,
html.anim .match-row,
html.anim .match-info-box,
html.anim .stat-item,
html.anim .mvv-card,
html.anim .why-card,
html.anim .thumb-strip img,
html.anim .contact-info,
html.anim .contact-form-box,
html.anim .pt-table-wrap,
html.anim .team-list-row,
html.anim .champion-banner,
html.anim .player-card,
html.anim .sponsor-card,
html.anim .captain-box,
html.anim .footer-col,
html.anim .footer-about{
  opacity:0;
  translate:0 26px;
  transition:opacity .65s cubic-bezier(.22,.61,.36,1),
             translate .65s cubic-bezier(.22,.61,.36,1);
}
html.anim .rv-in{ opacity:1; translate:0 0; }
/* Gallery ki thumbnail ke liye alag rule - `.thumb-strip img` upar wale
   `.rv-in` se zyada specific hai, isliye use match karna zaroori hai */
html.anim .thumb-strip img.rv-in{ opacity:1; translate:0 0; }

/* Table ki rows pe sirf fade - transform table layout bigaad sakta hai */
html.anim .pt-table tbody tr{
  opacity:0;
  transition:opacity .5s ease;
}
html.anim .pt-table tbody tr.rv-in{ opacity:1; }

/* ---------- Card hover: halka sa upar uthna ---------- */
.person-card,
.team-badge-card,
.g-item,
.insta-embed,
.match-info-box,
.fixture-row,
.match-row,
.team-list-row,
.sponsor-card{
  transition:transform .35s cubic-bezier(.22,.61,.36,1),
             box-shadow .35s ease,
             border-color .35s ease;
}
.person-card:hover{
  transform:translateY(-6px);
  border-color:rgba(224,169,77,0.95);
  box-shadow:0 20px 32px -20px rgba(224,169,77,0.75);
}
.team-badge-card:hover{
  transform:translateY(-7px);
  box-shadow:0 30px 36px -16px rgba(227,30,38,0.75);
}
.g-item:hover,
.insta-embed:hover{ transform:translateY(-6px); }
.match-info-box:hover,
.fixture-row:hover,
.match-row:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 34px -22px rgba(0,0,0,0.95);
}
.team-list-row:hover{
  transform:translateY(-4px);
  border-color:rgba(227,30,38,0.85);
  box-shadow:0 26px 30px -16px rgba(227,30,38,0.6);
}
.sponsor-card:hover{
  transform:translateY(-4px);
  border-color:rgba(224,169,77,0.7);
}

/* Player ki photo pe halka zoom */
.player-card img{ transition:transform .4s cubic-bezier(.22,.61,.36,1); }
.player-card:hover img{ transform:scale(1.05); }

/* Team logo pe halka sa zoom */
.team-badge-card img{ transition:transform .4s cubic-bezier(.22,.61,.36,1); }
.team-badge-card:hover img{ transform:scale(1.08); }

/* ---------- Buttons ---------- */
.btn-primary,
.btn-view,
.btn-insta,
.btn-admin{
  transition:background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.btn-primary:hover,
.btn-view:hover,
.btn-insta:hover,
.btn-admin:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 22px -12px rgba(227,30,38,0.85);
}

/* ---------- Nav link ka underline left se right slide ---------- */
nav.main-nav a::before{
  content:"";
  position:absolute;
  left:0; bottom:-4px;
  height:2px; width:100%;
  background:var(--red);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s cubic-bezier(.22,.61,.36,1);
}
nav.main-nav a:hover::before{ transform:scaleX(1); }
nav.main-nav a.active::before{ display:none; }

/* ---------- Header scroll karne pe chhota ho jata hai ---------- */
header.site-header{ transition:background .3s ease, box-shadow .3s ease; }
.nav-wrap{ transition:padding .3s ease; }
.logo img{ transition:height .3s ease; }
html.anim header.site-header.scrolled{
  background:rgba(11,14,23,0.9);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 12px 30px -16px rgba(0,0,0,0.95);
}
html.anim header.site-header.scrolled .nav-wrap{ padding-top:6px; padding-bottom:6px; }
html.anim header.site-header.scrolled .logo img{ height:44px; }

/* ---------- Back to top: scroll karne pe hi dikhe ---------- */
html.anim .back-to-top{
  opacity:0;
  visibility:hidden;
  translate:0 14px;
  transition:opacity .3s ease, translate .3s ease, visibility .3s;
}
html.anim .back-to-top.show{ opacity:1; visibility:visible; translate:0 0; }
.back-to-top:hover{ background:var(--red-dark); }

/* ---------- Hero ka text ek ke baad ek aata hai ---------- */
html.anim .hero-slide.active .home-hero-text > *{
  animation:heroUp .6s cubic-bezier(.22,.61,.36,1) both;
}
html.anim .hero-slide.active .home-hero-text > *:nth-child(1){ animation-delay:.05s; }
html.anim .hero-slide.active .home-hero-text > *:nth-child(2){ animation-delay:.15s; }
html.anim .hero-slide.active .home-hero-text > *:nth-child(3){ animation-delay:.25s; }
html.anim .hero-slide.active .home-hero-text > *:nth-child(4){ animation-delay:.35s; }
@keyframes heroUp{
  from{ opacity:0; transform:translateY(22px); }
  to{ opacity:1; transform:none; }
}

/* ---------- Live match ka dot dhadakta hai ---------- */
html.anim .live-dot,
html.anim .match-row.live .tag i{ animation:pulse 1.4s ease-in-out infinite; }

/* ---------- Slider ki image dheere dheere zoom hoti hai (Ken Burns) ---------- */
html.anim .hero-slide.active .hero-bg img{
  animation:kenBurns 14s ease-out both;
}
@keyframes kenBurns{
  from{ transform:scale(1)    translate3d(0,0,0); }
  to  { transform:scale(1.09) translate3d(-1.2%,-1.2%,0); }
}

/* ---------- Section heading ki line beech se khulti hai ---------- */
html.anim .section-heading::before,
html.anim .section-heading::after{
  transform:scaleX(0);
  transition:transform .7s cubic-bezier(.22,.61,.36,1) .1s;
}
html.anim .section-heading::before{ transform-origin:right; }
html.anim .section-heading::after { transform-origin:left;  }
html.anim .section-heading.rv-in::before,
html.anim .section-heading.rv-in::after{ transform:scaleX(1); }

/* ---------- Upar chalne wali page loading patti ---------- */
.page-progress{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:9999;
  pointer-events:none; opacity:0; transition:opacity .25s ease;
}
.page-progress.on{ opacity:1; }
.page-progress span{
  display:block; height:100%; width:100%;
  background:linear-gradient(90deg,var(--red),var(--gold));
  transform:scaleX(0); transform-origin:left;
  transition:transform .35s ease;
  box-shadow:0 0 10px rgba(227,30,38,0.8);
}

/* ---------- Sponsor logo ki chalti patti ---------- */
.logo-marquee{
  overflow:hidden;
  /* dono kinaron pe halka fade, taki card kate hue na lagein */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.lm-track{ display:flex; width:max-content; }
/* Gap set ke andar hi rakha hai (right padding se) taki dono set ki width
   bilkul barabar rahe - warna -50% khiskane pe patti me halka jhatka aata hai */
.lm-set{ display:flex; gap:20px; padding:6px 20px 6px 0; }
.lm-card{ width:190px; flex-shrink:0; }
/* Marquee ke card scroll-reveal se bahar - patti side me chalti hai, is liye
   duplicate copy screen pe kabhi nahi aati aur chhupi hi reh jaati */
html.anim .lm-card{ opacity:1; translate:0 0; transition-delay:0s !important; }
html.anim .lm-track{ animation:lmScroll 45s linear infinite; }
html.anim .logo-marquee:hover .lm-track{ animation-play-state:paused; }
@keyframes lmScroll{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(-50%,0,0); }
}

/* ---------- Point table: top 4 (playoff zone) halki si chamakti hai ---------- */
.pt-table tbody tr.qualified{
  background:linear-gradient(90deg,rgba(224,169,77,0.12),transparent 55%);
}
.pt-table tbody tr.qualified .pos-col{
  position:relative; color:var(--gold); font-weight:700;
}
.pt-table tbody tr.qualified .pos-col::before{
  content:""; position:absolute; left:0; top:14%; bottom:14%;
  width:3px; border-radius:2px; background:var(--gold);
}
html.anim .pt-table tbody tr.qualified .pos-col::before{
  animation:qualGlow 2.6s ease-in-out infinite;
}
@keyframes qualGlow{
  0%,100%{ box-shadow:0 0 0 rgba(224,169,77,0); }
  50%    { box-shadow:0 0 10px 1px rgba(224,169,77,0.75); }
}

/* ---------- Mobile menu ke link ek ke baad ek aate hain ---------- */
html.anim nav.main-nav.open li{
  animation:menuIn .32s cubic-bezier(.22,.61,.36,1) both;
}
html.anim nav.main-nav.open li:nth-child(1){ animation-delay:.02s; }
html.anim nav.main-nav.open li:nth-child(2){ animation-delay:.06s; }
html.anim nav.main-nav.open li:nth-child(3){ animation-delay:.10s; }
html.anim nav.main-nav.open li:nth-child(4){ animation-delay:.14s; }
html.anim nav.main-nav.open li:nth-child(5){ animation-delay:.18s; }
html.anim nav.main-nav.open li:nth-child(6){ animation-delay:.22s; }
html.anim nav.main-nav.open li:nth-child(7){ animation-delay:.26s; }
html.anim nav.main-nav.open li:nth-child(8){ animation-delay:.30s; }
@keyframes menuIn{
  from{ opacity:0; transform:translateX(-14px); }
  to  { opacity:1; transform:none; }
}

/* ---------- Photo load hone tak chamakta hua khaali dabba ---------- */
html.anim .g-item img,
html.anim .thumb-strip img,
html.anim .lm-card img{
  background-image:linear-gradient(100deg,
      rgba(255,255,255,0.04) 30%,
      rgba(255,255,255,0.11) 50%,
      rgba(255,255,255,0.04) 70%);
  background-size:220% 100%;
  animation:shimmer 1.3s linear infinite;
}
html.anim .g-item img.img-done,
html.anim .thumb-strip img.img-done,
html.anim .lm-card img.img-done{
  background-image:none;
  animation:none;
}
@keyframes shimmer{
  from{ background-position:120% 0; }
  to  { background-position:-120% 0; }
}

/* Motion band ho to kuch bhi na hile */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}


/* ============================================================
   PLAYERS PAGE  (players.php)

   Auction se pehle jitne bhi players ne registration karaya hai,
   sab yahan card ke roop me dikhte hain. Card ke 3 hisse hain:
   peeche bada halka number, beech me photo, aur neeche patti -
   jisme ya to team ka logo hai ya "AUCTION BAAKI HAI".
   ============================================================ */

/* ---------- Upar ki ginti wali patti ---------- */
.plr-count-band{
  position:relative;
  overflow:hidden;
  background:linear-gradient(120deg,#0a0d16 0%,#12161f 55%,#0a0d16 100%);
  border-bottom:1px solid rgba(255,255,255,0.06);
  padding:34px 0;
}
.plr-count-band::before{
  content:'';
  position:absolute;
  inset:0 auto 0 0;
  width:46%;
  background:linear-gradient(90deg,rgba(227,30,38,0.16),transparent);
  transform:skewX(-16deg);
  transform-origin:top left;
  pointer-events:none;
}
.plr-count-inner{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:26px;
  flex-wrap:wrap;
}
.plr-big-count{ display:flex; align-items:center; gap:14px; }
.plr-big-count .n{
  font-family:'Anton',Impact,'Arial Black',sans-serif;
  font-size:64px;
  line-height:.85;
  font-weight:900;
  color:var(--gold);
  text-shadow:0 0 26px rgba(224,169,77,0.28);
  font-variant-numeric:tabular-nums;
}
.plr-big-count .l{
  font-size:13px;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--text-light);
  border-left:2px solid var(--red);
  padding-left:14px;
  line-height:1.45;
}
.plr-chips{ display:flex; gap:12px; flex-wrap:wrap; }
.plr-chip{
  display:flex;
  align-items:center;
  gap:9px;
  background:rgba(255,255,255,0.035);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:var(--radius);
  padding:10px 16px;
}
.plr-chip i{ color:var(--red); font-size:15px; }
.plr-chip.pending i{ color:var(--gold); }
.plr-chip b{ font-size:19px; color:var(--text-light); font-variant-numeric:tabular-nums; }
.plr-chip span{ font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--text-muted); }

/* ---------- Search + filter ---------- */
.plr-tools{ padding:26px 0 0; }
.plr-search{
  position:relative;
  max-width:440px;
  margin:0 auto 18px;
}
.plr-search i{
  position:absolute;
  left:15px; top:50%;
  transform:translateY(-50%);
  color:var(--text-muted);
  font-size:14px;
  pointer-events:none;
}
.plr-search input{
  width:100%;
  background:var(--bg-card);
  border:1px solid rgba(255,255,255,0.09);
  border-radius:var(--radius);
  color:var(--text-light);
  font-size:14px;
  padding:13px 40px 13px 42px;
  outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.plr-search input::placeholder{ color:var(--text-muted); }
.plr-search input:focus{
  border-color:var(--border-gold);
  box-shadow:0 0 0 3px rgba(224,169,77,0.10);
}
.plr-search input::-webkit-search-cancel-button{ display:none; }
.plr-clear{
  position:absolute;
  right:8px; top:50%;
  transform:translateY(-50%);
  width:28px; height:28px;
  background:none;
  border:0;
  color:var(--text-muted);
  font-size:22px;
  line-height:1;
  cursor:pointer;
}
.plr-clear:hover{ color:var(--red); }

.plr-filters{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
}
.plr-fbtn{
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:var(--bg-card);
  border:1px solid rgba(255,255,255,0.09);
  border-radius:var(--radius);
  color:var(--text-muted);
  font-size:11px;
  font-weight:700;
  letter-spacing:1px;
  padding:9px 14px;
  cursor:pointer;
  transition:color .2s, border-color .2s, background .2s;
}
.plr-fbtn i{ font-size:12px; }
.plr-fbtn span{
  background:rgba(255,255,255,0.07);
  border-radius:20px;
  padding:1px 7px;
  font-size:10px;
}
.plr-fbtn:hover{ color:var(--text-light); border-color:var(--border-red); }
.plr-fbtn.active{
  background:var(--red);
  border-color:var(--red);
  color:#fff;
}
.plr-fbtn.active span{ background:rgba(0,0,0,0.22); }
.plr-fbtn.gold.active{
  background:var(--gold);
  border-color:var(--gold);
  color:#0b0e17;
}
.plr-result{
  text-align:center;
  font-size:12px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--gold);
  margin-top:16px;
}

/* ---------- Card grid ---------- */
.plr-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(228px,1fr));
  gap:18px;
}

.plr-card{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  background:linear-gradient(165deg,#151a27 0%,#0d1119 62%);
  border:1px solid rgba(255,255,255,0.07);
  border-radius:var(--radius);
  padding:30px 16px 0;
  text-align:center;
  transition:transform .3s cubic-bezier(.22,.61,.36,1),
             border-color .3s, box-shadow .3s;
}
/* Upar halki si roshni - is se card flat nahi lagta */
.plr-card::before{
  content:'';
  position:absolute;
  left:50%; top:-90px;
  width:230px; height:180px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(227,30,38,0.22),transparent 70%);
  pointer-events:none;
}
.plr-card.is-pending::before{
  background:radial-gradient(ellipse at center,rgba(224,169,77,0.20),transparent 70%);
}
/* Hover pe ek chamak nikalti hai */
.plr-card::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,0.07) 50%,transparent 60%);
  background-size:260% 100%;
  background-position:140% 0;
  opacity:0;
  pointer-events:none;
  transition:background-position .8s ease, opacity .3s;
}
.plr-card:hover{
  transform:translateY(-7px);
  border-color:var(--border-red);
  box-shadow:0 16px 34px rgba(0,0,0,0.5);
}
.plr-card.is-pending:hover{ border-color:var(--border-gold); }
.plr-card:hover::after{ opacity:1; background-position:-60% 0; }

/* Peeche ka bada number */
.plr-ghost{
  position:absolute;
  top:4px; right:12px;
  font-family:'Anton',Impact,'Arial Black',sans-serif;
  font-size:58px;
  font-weight:900;
  line-height:1;
  color:rgba(255,255,255,0.05);
  letter-spacing:-2px;
  pointer-events:none;
}

/* Kone wali chhoti patti */
.plr-corner{
  position:absolute;
  top:10px; left:0;
  font-size:9px;
  font-weight:800;
  letter-spacing:1.5px;
  padding:3px 9px 3px 10px;
  border-radius:0 var(--radius) var(--radius) 0;
}
.plr-card.is-sold .plr-corner{ background:var(--red); color:#fff; }
.plr-card.is-pending .plr-corner{ background:var(--gold); color:#0b0e17; }

/* Photo */
.plr-face{ position:relative; align-self:center; margin-bottom:14px; }
.plr-ring{
  width:104px; height:104px;
  border-radius:50%;
  padding:3px;
  background:conic-gradient(from 0deg,var(--gold),rgba(224,169,77,0.15),var(--gold),rgba(224,169,77,0.15),var(--gold));
  display:flex;
  transition:transform .5s ease;
}
.plr-card.is-sold .plr-ring{
  background:conic-gradient(from 0deg,var(--red),rgba(227,30,38,0.15),var(--red),rgba(227,30,38,0.15),var(--red));
}
.plr-card:hover .plr-ring{ transform:rotate(180deg); }
.plr-ring img{
  width:100%; height:100%;
  border-radius:50%;
  object-fit:cover;
  background:var(--bg-darker);
  transition:transform .5s ease;
}
.plr-card:hover .plr-ring img{ transform:rotate(-180deg); }
.plr-initials{
  width:100%; height:100%;
  border-radius:50%;
  background:linear-gradient(150deg,#1b2130,#0d1119);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Anton',Impact,'Arial Black',sans-serif;
  font-size:34px;
  letter-spacing:1px;
  color:var(--gold);
  transition:transform .5s ease;
}
.plr-card:hover .plr-initials{ transform:rotate(-180deg); }
.plr-role-dot{
  position:absolute;
  right:-2px; bottom:2px;
  width:30px; height:30px;
  border-radius:50%;
  background:var(--red);
  border:2px solid #0d1119;
  color:#fff;
  font-size:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
}
.plr-card.is-pending .plr-role-dot{ background:var(--gold); color:#0b0e17; }

/* Naam + details */
.plr-name{
  position:relative;
  font-size:15px;
  font-weight:800;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:var(--text-light);
  margin:0 0 8px;
  line-height:1.3;
  word-break:break-word;
}
.plr-meta{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  margin-bottom:14px;
}
.plr-role{
  font-size:10px;
  font-weight:700;
  letter-spacing:1.4px;
  color:var(--gold);
  border:1px solid var(--border-gold);
  border-radius:20px;
  padding:3px 11px;
}
.plr-city{ font-size:12px; color:var(--text-muted); }
.plr-city i{ color:var(--red); margin-right:4px; font-size:11px; }

.plr-stats{
  display:flex;
  justify-content:center;
  margin-bottom:14px;
}
.plr-stats span{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:2px;
  font-size:9px;
  letter-spacing:1px;
  color:var(--text-muted);
  border-left:1px solid rgba(255,255,255,0.07);
}
.plr-stats span:first-child{ border-left:0; }
.plr-stats b{ font-size:15px; color:var(--text-light); font-variant-numeric:tabular-nums; }

/* Neeche ki patti - team ya auction pending.
   `margin-top:auto` isliye taki chhote aur bade naam wale card ki
   patti ek hi line me rahe (card ki height barabar dikhe). */
.plr-team{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:auto -16px 0;
  min-height:46px;
  padding:11px 12px;
  background:rgba(255,255,255,0.035);
  border-top:1px solid rgba(255,255,255,0.07);
  font-size:11px;
  font-weight:700;
  letter-spacing:1px;
  color:var(--text-light);
  text-decoration:none;
  transition:background .25s, color .25s;
}
.plr-team img{ width:22px; height:22px; object-fit:contain; }
.plr-team i{ font-size:10px; color:var(--text-muted); }
a.plr-team:hover{ background:var(--red); color:#fff; }
a.plr-team:hover i{ color:#fff; }
.plr-team.pending{
  background:rgba(224,169,77,0.07);
  border-top:1px dashed var(--border-gold);
  color:var(--gold);
}
.plr-team.pending i{ color:var(--gold); font-size:12px; }

/* Search me kuch na mile to */
.plr-empty{
  text-align:center;
  color:var(--text-muted);
  font-size:14px;
  padding:50px 0;
}
.plr-empty i{ display:block; font-size:34px; color:var(--red); margin-bottom:14px; opacity:.65; }
.plr-note{
  margin-top:30px;
  text-align:center;
  font-size:13px;
  line-height:1.8;
  color:var(--text-muted);
  background:rgba(224,169,77,0.06);
  border:1px dashed var(--border-gold);
  border-radius:var(--radius);
  padding:16px 20px;
}
.plr-note i{ color:var(--gold); margin-right:6px; }
.plr-note b{ color:var(--text-light); }

/* Card ek ke baad ek upar aate hain (sirf jab animation on ho) */
html.anim .plr-card{
  animation:plrIn .55s cubic-bezier(.22,.61,.36,1) both;
  animation-delay:calc(var(--i,0) * 45ms);
}
@keyframes plrIn{
  from{ opacity:0; transform:translateY(22px) scale(.97); }
  to  { opacity:1; transform:none; }
}

@media (max-width:768px){
  .plr-count-band{ padding:26px 0; }
  .plr-count-inner{ justify-content:center; text-align:center; }
  .plr-big-count{ width:100%; justify-content:center; }
  .plr-big-count .n{ font-size:52px; }
  .plr-chips{ width:100%; justify-content:center; }
  .plr-chip{ flex:1 1 30%; justify-content:center; padding:9px 8px; }
  .plr-chip span{ font-size:9px; letter-spacing:.5px; }
  .plr-grid{ grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:12px; }
  .plr-card{ padding:24px 10px 0; }
  .plr-ghost{ font-size:44px; }
  .plr-ring{ width:84px; height:84px; }
  .plr-initials{ font-size:27px; }
  .plr-name{ font-size:13px; }
  .plr-team{ margin:auto -10px 0; padding:9px 8px; font-size:10px; }
  .plr-fbtn{ font-size:10px; padding:8px 11px; }
}