:root{
  --brand:#ED2F77;
  --muted:rgba(255,255,255,.85);
  --card-bg:rgba(255,255,255,.06);
  --maxw:1200px;
  --gap:16px;
  --header-h:64px;
}

/* RESET */
*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  min-height:100%;
}
img,video{
  max-width:100%;
  display:block;
}

/* BODY */
body{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial;
  color:#fff;
  background:
    linear-gradient(180deg,rgba(237,47,119,.18),rgba(0,0,0,.45)),
    var(--brand);
  overflow-x:hidden;
}

/* ================= HEADER ================= */
.site-header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:var(--header-h);
  z-index:1000;

  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 14px;

  background:#ED2F77;
  box-shadow:0 2px 12px rgba(0,0,0,.35);
}

.icon-btn{
  background:none;
  border:0;
  color:#fff;
  font-size:22px;
  padding:10px;
  cursor:pointer;
}

.logo-wrap{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
}
.site-logo{
  width: 62px;
}

/* ================= MAIN OFFSET (FIX OVERLAP) ================= */
body{
  padding-top:64px;
}


/* ================= CONTAINER ================= */
.container{
  max-width:var(--maxw);
  margin:0 auto;
  padding:20px 16px 40px;
  width:100%;
}

/* ================= HAMBURGER ================= */
.hamburger-panel{
  position:fixed;
  top:calc(var(--header-h) + 10px);
  left:12px;
  background:rgba(0,0,0,.9);
  padding:10px;
  border-radius:12px;
  display:none;
  flex-direction:column;
  gap:6px;
  z-index:1200;
}
.hamburger-panel.open{display:flex}
.hamburger-panel a{
  color:#fff;
  text-decoration:none;
  padding:10px 12px;
  border-radius:8px;
}
.hamburger-panel a:hover{
  background:rgba(255,255,255,.12);
}

/* ================= SEARCH ================= */
.search-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.95);
  display:none;
  z-index:2000;
}
.search-overlay.open{display:block}

.search-top{
  padding:20px;
  display:flex;
  justify-content:center;
}

.search-top input{
  width:100%;
  max-width:900px;
  padding:14px 16px;
  font-size:16px;
  border-radius:12px;
  background:#000;
  border:1px solid rgba(255,255,255,.3);
  color:#fff;
  outline:none;
}

.search-results{
  max-width:900px;
  margin:12px auto;
  padding:10px;
  display:grid;
  gap:10px;
}

.result{
  display:flex;
  gap:12px;
  align-items:center;
  padding:10px;
  border-radius:10px;
  cursor:pointer;
}
.result:hover{
  background:rgba(255,255,255,.12);
}
.result img{
  width:120px;
  height:68px;
  object-fit:cover;
  border-radius:8px;
}

/* ================= HERO ================= */
.hero{
  padding:20px 0 10px;
}
.hero h1{
  font-size:26px;
  margin:0;
}
.muted{
  color:var(--muted);
  font-size:14px;
}

/* ================= GALLERY ================= */
.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:var(--gap);
  padding:20px 0;
  align-items:start;
}

.card{
  background:var(--card-bg);
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  cursor:pointer;
  transition:transform .15s ease;
  min-width:0;
}
.card:hover{
  transform:translateY(-4px);
}

.thumb{
  aspect-ratio:16/9;
  background:#000;
  position:relative;
}
.thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.thumb video{
  width:100%;
  height:100%;
  object-fit:cover;
}

.meta{
  padding:12px;
}
.meta h3{
  margin:0 0 6px;
  font-size:15px;
  line-height:1.35;
  word-break:break-word;
}
.title{
  margin:0;
  font-size:15px;
}
.meta-row{
  font-size:13px;
  color:var(--muted);
}

.keyword-seo{
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:18px;
  margin:6px 0 18px;
}

.keyword-seo h2{
  margin:0 0 10px;
  font-size:22px;
}

.keyword-seo p{
  margin:0 0 10px;
  line-height:1.6;
}

.keyword-related{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}

.keyword-related a{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  text-decoration:none;
  color:#fff;
  background:rgba(255,255,255,.1);
}

/* ================= VIDEO PAGE ================= */
.video-page{
  display:grid;
  grid-template-columns:minmax(0,1fr) 360px;
  gap:24px;
  padding:24px 0;
}

.player-card{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.video-frame{
  aspect-ratio:16/9;
  background:#000;
  border-radius:14px;
  overflow:hidden;
}
.video-frame video{
  width:100%;
  height:100%;
  object-fit:contain;
}

.player-info{
  padding:6px 2px;
}

.actions-row{
  display:flex;
  gap:10px;
  margin-top:8px;
}

.like-btn,.share-btn{
  background:rgba(255,255,255,.15);
  border:0;
  border-radius:10px;
  padding:10px 14px;
  color:#fff;
  cursor:pointer;
}

/* ================= UP NEXT ================= */
.suggestions{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.small-card{
  display:flex;
  gap:10px;
  align-items:center;
  padding:8px;
  border-radius:10px;
  text-decoration:none;
  color:#fff;
}
.small-card:hover{
  background:rgba(255,255,255,.12);
}
.small-card img{
  width:140px;
  height:80px;
  object-fit:cover;
  border-radius:10px;
  flex-shrink:0;
}

/* ================= RESPONSIVE ================= */
@media(max-width:980px){
  .video-page{
    grid-template-columns:1fr;
  }
}

@media(max-width:420px){
  :root{--header-h:56px}
  .site-logo{width:64px}
}

@media (max-width: 640px){
  .container{
    padding:16px 12px 28px;
  }

  .hero{
    padding:10px 0 4px;
  }

  .hero h1{
    font-size:32px;
    line-height:1.05;
  }

  .gallery{
    grid-template-columns:1fr;
    gap:12px;
  }

  .card{
    width:100%;
  }

  .thumb{
    aspect-ratio:16/10;
  }

  .thumb img,
  .thumb video{
    object-fit:contain;
    background:#000;
  }

  .small-card{
    align-items:flex-start;
  }

  .small-card img{
    width:112px;
    height:70px;
  }
}
/* HARD FIX FOR HEADER OVERLAP */
body > .container{
  margin-top: var(--header-h);
}

main > .container{
  margin-top: 0;
}
.pagination{
  display:flex;
  justify-content:center;
  gap:10px;
  padding:30px 0;
}

.pagination a{
  padding:8px 14px;
  background:rgba(255,255,255,.15);
  color:#fff;
  text-decoration:none;
  border-radius:8px;
  font-weight:600;
}

.pagination a.active{
  background:#fff;
  color:#ED2F77;
}

.pagination a:hover{
  background:rgba(255,255,255,.3);
}
/* FORCE UP NEXT COLUMN */
.suggestions{
  min-width:320px;
  max-width:360px;
}

.video-page{
  align-items:flex-start;
}

/* ENSURE RELATED VIDEOS VISIBLE */
#relatedList{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.video-page{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 360px !important;
  align-items:start;
}

.suggestions{
  display:block !important;
  visibility:visible !important;
}
.player-info, .actions-row{
  position:relative;
  z-index:5;
}
#relatedList {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
}

.suggestions {
  min-height: 200px;
}
/* ================= FINAL MOBILE OVERRIDE (FIXES EVERYTHING) ================= */
@media (max-width: 768px){

  html,
  body,
  main,
  .container,
  .hero,
  .gallery,
  #searchResultsPage,
  .card{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  .container{
    width:calc(100vw - 24px) !important;
    margin:0 auto !important;
    padding:16px 12px 28px !important;
  }

  .gallery{
    display:flex !important;
    flex-direction:column !important;
    gap:12px !important;
  }

  .hero,
  #searchResultsPage{
    overflow:hidden;
  }

  /* Kill forced desktop grid */
  .video-page{
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    width: 100%;
  }

  /* Sidebar becomes normal section */
  .suggestions{
    min-width: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    display: block !important;
    position: static !important;
  }

  /* Prevent overlap */
  .player-card,
  .player-info,
  .actions-row{
    width: 100%;
    position: static !important;
  }

  /* Fix like/share floating */
  .actions-row{
    flex-wrap: wrap;
  }

  .like-btn,
  .share-btn{
    flex: 1 1 48%;
  }

  /* Clean Up Next layout */
  #relatedList{
    display: flex !important;
    flex-direction: column !important;
    gap: 12px;
  }

  .small-card{
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .small-card img{
    width: 120px;
    height: 68px;
    flex-shrink: 0;
  }

  body > .container{
    margin-top:0 !important;
  }
}
/* ===== FOOTER FINAL ===== */

.site-footer{
  background: linear-gradient(180deg, #6a1232, #3b061c);
  color: #fff;
  padding: 22px 16px 26px; /* bottom padding added */
  text-align: center;
}

.footer-inner{
  max-width: 1200px;
  margin: 0 auto;
}

.footer-title{
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: .5px;
}

.footer-links{
  margin-top: 10px;
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-links a{
  color: rgba(255,255,255,.9);
  text-decoration: none;
  font-size: 14px;
}

.footer-links a:hover{
  text-decoration: underline;
}

.timeline-preview {
  position: absolute;
  bottom: 60px;
  width: 160px;
  display: none;
  pointer-events: none;
}
.timeline-preview video {
  width: 100%;
  border-radius: 6px;
}
.video-frame {
  position: relative;
}
.search-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.85);
  display:none;
  z-index:9999;
}

.search-overlay.open{
  display:block;
}

.search-top{
  padding:15px;
}

.search-results .result{
  padding:10px;
  cursor:pointer;
}

mark{
  background:#ff0;
  color:#000;
}