/* ── Card hover effects ── */
.vs-card-hover{display:none!important}
.vs-card{border:1px solid rgba(255,255,255,.06)!important;transition:transform .3s ease,box-shadow .3s ease!important}
.vs-card:hover{transform:scale(1.04)!important;box-shadow:0 16px 40px rgba(0,0,0,.5)!important;z-index:10!important;border-color:rgba(66,170,255,.15)!important}
.vs-card-poster::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.45);opacity:0;transition:opacity .25s;z-index:3;pointer-events:none;border-radius:inherit}
.vs-card:hover .vs-card-poster::after{opacity:1}
.vs-card-poster::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.7);width:36px;height:36px;border-radius:50%;background:rgba(66,170,255,.85);box-shadow:0 4px 16px rgba(66,170,255,.3);z-index:4;opacity:0;transition:all .3s cubic-bezier(.34,1.56,.64,1);pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:52% 50%;background-size:16px 16px}
.vs-card:hover .vs-card-poster::before{opacity:1;transform:translate(-50%,-50%) scale(1)}
.cs-search input:focus{box-shadow:none!important}

/* ── Fix movie detail card alignment ── */
.mv2-hero-content {
  align-items: flex-start !important;
  gap: 32px !important;
}
.mv2-poster-wrap {
  flex-shrink: 0 !important;
  width: 320px !important;
  align-self: flex-start !important;
}
.mv2-poster img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}
.mv2-hero {
  padding-top: 30px !important;
}
.mv2-hero-info {
  flex: 1 1 !important;
  min-width: 0 !important;
  padding-top: 0 !important;
}
@media (max-width: 768px) {
  .mv2-hero-content {
    flex-direction: column !important;
    align-items: center !important;
    padding: 0 16px 20px !important;
  }
  .mv2-poster-wrap {
    width: 200px !important;
  }
}

/* ── Hide hero banner movie cards ── */
.vs-hero-cards-desktop,
.vs-hero-cards-mobile,
.hero-cards-desktop,
.hero-cards-mobile {
  display: none !important;
}

/* ── Movie of the Day Hero ── */
.motd-hero {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.motd-hero .vs-hero-inner,
.motd-hero .vs-hero-bg,
.motd-hero .vs-hero-content,
.motd-hero .vs-hero-cards-desktop,
.motd-hero .vs-hero-cards-mobile {
  display: none !important;
}
.motd-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 20%;
  filter: brightness(.3) saturate(1.3);
  transform: scale(1.05);
  animation: motdZoom 25s ease infinite alternate;
}
@keyframes motdZoom {
  0% { transform: scale(1.05); }
  100% { transform: scale(1.15); }
}
.motd-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, #07070f 0%, rgba(7,7,15,.6) 40%, transparent 70%),
              linear-gradient(90deg, #07070f 0%, transparent 50%);
  z-index: 1;
}
.motd-content {
  position: relative;
  z-index: 2;
  max-width: 1400px;
  width: 100%;
  padding: 80px 48px 50px;
  display: flex;
  gap: 36px;
  align-items: flex-end;
}
.motd-poster {
  flex-shrink: 0;
  width: 220px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.08);
  animation: motdFloat 4s ease-in-out infinite alternate;
}
@keyframes motdFloat {
  0% { transform: translateY(0); }
  100% { transform: translateY(-8px); }
}
.motd-poster img {
  width: 100%;
  display: block;
}
.motd-info {
  flex: 1;
  padding-bottom: 8px;
}
.motd-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fbbf24;
  margin-bottom: 14px;
  padding: 5px 14px;
  background: rgba(251,191,36,.08);
  border-radius: 20px;
  border: 1px solid rgba(251,191,36,.15);
}
.motd-title {
  font-size: 40px;
  font-weight: 900;
  line-height: 1.1;
  margin: 0 0 14px;
  color: #fff;
  text-shadow: 0 4px 20px rgba(0,0,0,.5);
}
.motd-meta {
  display: flex;
  gap: 14px;
  font-size: 14px;
  color: rgba(255,255,255,.5);
  margin-bottom: 24px;
  flex-wrap: wrap;
  align-items: center;
}
.motd-rating {
  background: rgba(251,191,36,.12);
  color: #fbbf24;
  padding: 3px 10px;
  border-radius: 6px;
  font-weight: 800;
  font-size: 13px;
}
.motd-actions {
  display: flex;
  gap: 12px;
}
.motd-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 30px;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all .25s cubic-bezier(.34,1.56,.64,1);
  text-decoration: none;
  font-family: inherit;
}
.motd-btn--primary {
  background: linear-gradient(135deg, #42aaff, #2b8ae0);
  color: #fff;
  box-shadow: 0 8px 30px rgba(66,170,255,.3);
}
.motd-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(66,170,255,.45);
}
.motd-btn--secondary {
  background: rgba(255,255,255,.06);
  color: #fff;
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(10px);
}
.motd-btn--secondary:hover {
  background: rgba(255,255,255,.12);
}
@media (max-width: 768px) {
  .motd-hero { min-height: 400px; }
  .motd-content {
    flex-direction: column;
    align-items: flex-start;
    padding: 30px 20px;
  }
  .motd-poster { width: 160px; }
  .motd-title { font-size: 26px; }
}

.motd-desc {
  font-size: 14px;
  color: rgba(255,255,255,.5);
  line-height: 1.7;
  max-width: 600px;
  margin: 0 0 22px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Hero loading skeleton ── */
.vs-hero {
  min-height: 480px;
  position: relative;
}
.vs-hero .vs-hero-inner {
  opacity: 0 !important;
}
.vs-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(66,170,255,.03) 0%, rgba(15,15,30,.5) 50%, rgba(66,170,255,.02) 100%);
  z-index: 0;
}
.vs-hero::after {
  content: '';
  position: absolute;
  bottom: 60px;
  left: 48px;
  width: 300px;
  height: 24px;
  background: rgba(255,255,255,.03);
  border-radius: 8px;
  animation: skeletonPulse 1.5s ease-in-out infinite;
  z-index: 1;
}
@keyframes skeletonPulse {
  0%, 100% { opacity: .3; }
  50% { opacity: .6; }
}

/* When motd loads — remove skeleton, fade in */
.motd-hero::before,
.motd-hero::after {
  display: none !important;
}
.motd-hero .vs-hero-inner {
  display: none !important;
}
.motd-bg,
.motd-overlay,
.motd-content {
  animation: motdFadeIn 0.6s ease both;
}
.motd-content {
  animation-delay: 0.2s;
}
@keyframes motdFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.motd-poster {
  animation: motdPosterIn 0.7s cubic-bezier(.34,1.56,.64,1) 0.3s both;
}
@keyframes motdPosterIn {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.motd-info {
  animation: motdInfoIn 0.6s ease 0.4s both;
}
@keyframes motdInfoIn {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Also fade in the catalog grid */
.movies-grid {
  animation: motdFadeIn 0.5s ease 0.3s both;
}

/* ── Fix comment spacing ── */
.v4-list {
  margin-top: 16px !important;
}

/* ── Fix comment input ── */
.v4-input-wrap, .v4-comment-input, .v4-form {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
.v4-input-wrap textarea, .v4-comment-input textarea, .v4-form textarea,
.v4-input-wrap input, .v4-comment-input input, .v4-form input {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
.v4-input-wrap:focus-within, .v4-comment-input:focus-within, .v4-form:focus-within {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Reduce empty space above/below comments section */
.v4-section, .mv-comments, .comments-section {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}

/* ── Fix comment compose box ── */
.v4-compose {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}
.v4-compose-input {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
.v4-compose-input:focus {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
.v4-compose-row {
  border: none !important;
}

/* Tighten comment section spacing */
.v4-comments-wrap {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
.v4-head {
  padding-bottom: 8px !important;
}

/* Fix compose gradient border overflow */
.v4-compose {
  overflow: hidden !important;
}
.v4-compose:before {
  inset: 0 !important;
}
.v4-compose:focus-within {
  border-color: rgba(59,158,255,.15) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.15) !important;
}

/* Fix reply compose spacing */
.v4-compose {
  padding: 6px 10px !important;
  margin-bottom: 6px !important;
}
.v4-reply-indicator {
  margin-bottom: 4px !important;
  padding: 3px 10px !important;
}

/* Tighter comment section */
.v4-comments-wrap {
  padding-bottom: 20px !important;
}
.v4-login-btn {
  margin-top: 6px !important;
  margin-bottom: 6px !important;
  padding: 8px !important;
}
.v4-head {
  margin-bottom: 6px !important;
}
.v4-list {
  margin-top: 8px !important;
  gap: 6px !important;
}

/* Fix comment items spacing */
.v4-item {
  margin-bottom: 8px !important;
}
.v4-compose {
  margin-bottom: 12px !important;
}

/* Fix reply indicator block spacing */
.v4-reply-indicator {
  margin: 0 0 2px !important;
  padding: 3px 10px !important;
}
.v4-compose {
  padding: 5px 10px !important;
}

/* Force tight reply indicator */
.v4-compose .v4-reply-indicator {
  margin: -2px -6px 4px -6px !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
}

/* ══════ Admin Moderation Improvements ══════ */
.adm2-card {
  background: rgba(255,255,255,.02) !important;
  border: 1px solid rgba(255,255,255,.05) !important;
  border-radius: 16px !important;
  padding: 18px 22px !important;
  margin-bottom: 10px !important;
  transition: all .25s cubic-bezier(.4,0,.2,1) !important;
}
.adm2-card:hover {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(66,170,255,.12) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.2) !important;
}
.adm2-toolbar {
  margin-bottom: 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(255,255,255,.04) !important;
}
.adm2-tr {
  border-bottom: 1px solid rgba(255,255,255,.03) !important;
  transition: all .2s !important;
  padding: 10px 0 !important;
}
.adm2-tr:hover {
  background: rgba(66,170,255,.03) !important;
}
.adm-content {
  padding: 24px 28px !important;
}
.adm-sidebar {
  background: rgba(10,10,20,.95) !important;
  border-right: 1px solid rgba(255,255,255,.04) !important;
}
.adm2-stats {
  gap: 14px !important;
  margin-bottom: 22px !important;
}
.adm2-stat-card {
  border-radius: 16px !important;
  padding: 18px 16px !important;
}
.adm2-input {
  border-radius: 12px !important;
  padding: 12px 14px !important;
}
.adm2-input:focus {
  border-color: rgba(66,170,255,.3) !important;
  box-shadow: 0 0 0 3px rgba(66,170,255,.1) !important;
}

/* ══════ Admin Moderation Fix ══════ */

/* Target moderation grid layout */
.adm2-fade > div[style] {
  gap: 24px !important;
}

/* Comment cards in moderation */
.adm2-fade > div > div > div[style*="border-radius"] {
  border-radius: 16px !important;
  margin-bottom: 8px !important;
  transition: all .2s ease !important;
}
.adm2-fade > div > div > div[style*="border-radius"]:hover {
  transform: translateX(2px) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.3) !important;
}

/* Section headers in moderation */
.adm2-fade > div > div > div[style*="textTransform"] {
  margin-bottom: 14px !important;
}

/* Delete buttons — make them stand out more */
.adm2-fade button[style*="ef4444"],
.adm2-fade button[style*="red"] {
  border-radius: 10px !important;
  transition: all .2s ease !important;
}
.adm2-fade button[style*="ef4444"]:hover,
.adm2-fade button[style*="red"]:hover {
  transform: scale(1.05) !important;
}

/* Right sidebar (profiles) */
.adm2-fade > div > div:last-child {
  border-radius: 16px !important;
}

/* Smooth scrolling for comment list */
.adm3-body {
  scroll-behavior: smooth;
}

/* Better topbar */
.adm3-topbar {
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

/* Nav buttons — more padding */
.adm3-nav-btn {
  padding: 11px 14px !important;
  margin-bottom: 2px !important;
}
.adm3-nav-btn--act {
  background: rgba(66,170,255,.08) !important;
  box-shadow: inset 0 0 0 1px rgba(66,170,255,.12) !important;
}

/* ── Hide empty glyph square in comments header ── */
.v4-head-glyph {
  display: none !important;
}

/* ── More space between login prompt and comments list ── */
.v4-compose, .v4-login-prompt, .v4-auth-prompt {
  margin-bottom: 16px !important;
}

/* ── More space between header and compose ── */
.v4-head {
  margin-bottom: 12px !important;
}

/* ── Nuclear hide: all possible comment header icons ── */
.v4-head > *:first-child:not(.v4-head-text):not(.v4-head-title) {
  display: none !important;
}
.v4-head svg, .v4-head img, .v4-head .v4-head-glyph, .v4-head .v4-head-icon {
  display: none !important;
}
/* Force hide any element before the title text */
.v4-head > div:first-child:has(svg) {
  display: none !important;
}

/* ── Remove double outline on search input ── */
.cs-search input, .cs-search input:focus, .cs-search input:focus-visible,
.mv-search input, .mv-search input:focus, .mv-search input:focus-visible,
input[type="search"], input[type="search"]:focus, input[type="search"]:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
.cs-search, .cs-search:focus-within, .mv-search, .mv-search:focus-within {
  outline: none !important;
}

/* ── Remove double outline on comment input ── */
.v4-compose input, .v4-compose input:focus, .v4-compose input:focus-visible,
.v4-compose textarea, .v4-compose textarea:focus, .v4-compose textarea:focus-visible,
.v4-compose-input, .v4-compose-input:focus, .v4-compose-input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}
.v4-compose:focus-within {
  outline: none !important;
  box-shadow: none !important;
}

/* ── Global: remove all focus-visible outlines ── */
*:focus-visible {
  outline: none !important;
}

/* ── Fix double border on comment compose ── */
.v4-compose-row {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
.v4-compose-input, .v4-compose-input:focus, .v4-compose-input:active {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
.v4-compose textarea, .v4-compose textarea:focus {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ── NUCLEAR: kill ALL inner borders in compose ── */
.v4-compose *,
.v4-compose *::before,
.v4-compose *::after,
.v4-compose-row *,
.v4-compose-row *::before,
.v4-compose-row *::after {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
.v4-compose::before,
.v4-compose::after,
.v4-compose-row::before,
.v4-compose-row::after {
  display: none !important;
}


/* ── card hover zoom ── */
/* removed duplicate */
  z-index: 10 !important;
  box-shadow: 0 16px 44px rgba(0,0,0,.6) !important;
}

@keyframes pf2-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

@keyframes pf2-fade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }