/* =====================================================
   SHOWVORTEX — MAIN CSS (ENTERPRISE MASTER)
   INDEX + WATCH SAFE
===================================================== */

/* ================= TOKENS ================= */
:root {
  --bg-main: #07070c;
  --bg-soft: #0c0c14;
  --bg-card: #12121c;

  --accent-1: #8b5cf6;
  --accent-2: #ec4899;

  --text-main: #f5f6fa;
  --text-muted: #a3a6b5;

  --radius-sm: 14px;
  --radius-md: 18px;
  --radius-lg: 22px;

  --shadow-soft: 0 18px 50px rgba(0,0,0,0.65);
  --shadow-hover: 0 40px 120px rgba(139,92,246,0.45);
}

/* ================= RESET ================= */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Hide scrollbars but allow scroll */
* {
  scrollbar-width: none;
}
*::-webkit-scrollbar {
  display: none;
}

html, body {
  overflow-x: hidden;
}

/* ================= BODY ================= */
body {
  font-family:
    "Segoe UI Variable",
    "Segoe UI",
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    Arial,
    sans-serif;

  background:
    radial-gradient(circle at 15% 10%, rgba(139,92,246,0.18), transparent 45%),
    radial-gradient(circle at 85% 20%, rgba(236,72,153,0.12), transparent 40%),
    radial-gradient(circle at 50% 90%, rgba(70,0,120,0.25), transparent 55%),
    var(--bg-main);

  color: var(--text-main);
  letter-spacing: 0.25px;
}

/* =====================================================
   HEADER
===================================================== */
.app-header {
  position: sticky;
  top: 0;
  z-index: 1000;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 22px 40px;

  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,0.95),
      rgba(0,0,0,0.6),
      transparent
    );

  backdrop-filter: blur(18px);
}

.brand {
  font-size: 2rem;
  font-weight: 900;
  cursor: pointer;

  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ================= SEARCH ================= */
.search-box {
  display: flex;
  align-items: center;
}

.search-box input {
  width: 340px;
  max-width: 80vw;

  padding: 14px 20px;
  border-radius: 999px;

  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);

  border: 1px solid rgba(255,255,255,0.15);
  color: white;

  font-size: 0.95rem;
  outline: none;

  transition: all .25s ease;
}

.search-box input::placeholder {
  color: var(--text-muted);
}

.search-box input:focus {
  border-color: var(--accent-1);
  box-shadow: 0 0 0 3px rgba(139,92,246,.35);
}

/* =====================================================
   SECTIONS
===================================================== */
section {
  padding: 36px 40px;
}

section h2 {
  font-size: 1.45rem;
  font-weight: 800;
  margin-bottom: 22px;
}

/* =====================================================
   ROWS — HORIZONTAL (NETFLIX STYLE)
===================================================== */
.row {
  display: flex;
  gap: 22px;

  overflow-x: auto;
  overflow-y: hidden;

  padding-bottom: 12px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* =====================================================
   CARD — INDEX + SIMILAR
===================================================== */
.card,
.similar-card {
  flex: 0 0 190px;
  height: 320px;

  border-radius: var(--radius-md);
  overflow: hidden;

  background:
    linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0.25)),
    var(--bg-card);

  box-shadow: var(--shadow-soft);
  cursor: pointer;

  transition:
    transform 0.35s cubic-bezier(.2,.8,.2,1),
    box-shadow 0.35s cubic-bezier(.2,.8,.2,1);
}

.card:hover,
.similar-card:hover {
  transform: translateY(-8px) scale(1.05);
  box-shadow: var(--shadow-hover);
}

.card img,
.similar-card img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
}

.card p,
.similar-card .info {
  padding: 12px;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;

  color: #f1f1f6;
  background: rgba(0,0,0,0.45);
}

/* =====================================================
   ADS — 6 SLOT SYSTEM
===================================================== */
.ad-slot,
.ad {
  margin: 55px auto;
  border-radius: 20px;

  background:
    linear-gradient(
      135deg,
      rgba(139,92,246,0.18),
      rgba(236,72,153,0.15)
    ),
    rgba(12,12,20,0.9);

  backdrop-filter: blur(18px);

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.06),
    0 30px 90px rgba(0,0,0,0.7);

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

  color: #b9b9c9;
  font-size: 0.8rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.ad-top { max-width: 900px; height: 90px; }
.ad-inline { max-width: 720px; height: 260px; }
.ad-wide { max-width: 1200px; height: 110px; }

.ad-footer {
  position: sticky;
  bottom: 14px;
  max-width: 900px;
  height: 60px;
  z-index: 20;
}

/* =====================================================
   SEASON DROPDOWN (WATCH SAFE)
===================================================== */
.seasons {
  margin-left: 40px;
  position: relative;
}

.seasons label {
  display: block;
  margin-bottom: 10px;
  font-weight: 800;
}

.seasons select {
  -webkit-appearance: none;
  appearance: none;

  width: 100%;
  max-width: 320px;

  padding: 14px 52px 14px 18px;

  background:
    linear-gradient(135deg, rgba(139,92,246,0.22), rgba(236,72,153,0.18)),
    rgba(18,18,32,0.96);

  border-radius: 16px;
  border: 1px solid rgba(139,92,246,0.35);

  color: white;
  font-size: 0.95rem;
  font-weight: 600;

  cursor: pointer;
}

.seasons::after {
  content: "▾";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* =====================================================
   MOBILE
===================================================== */
@media (max-width: 768px) {
  section { padding: 24px; }

  .card,
  .similar-card {
    flex: 0 0 150px;
    height: 250px;
  }

  .card img,
  .similar-card img {
    height: 200px;
  }

  .search-box input {
    width: 220px;
  }

  .seasons {
    margin-left: 0;
    padding: 0 18px;
  }

  .ad-inline {
    height: 180px;
  }
}
/* =====================================================
   MOBILE HEADER FIX — NO OVERLAP (FINAL)
===================================================== */

@media (max-width: 768px) {

  /* Header becomes vertical stack */
  .app-header {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;

    padding: 18px 20px;
  }

  /* Brand centered */
  .brand {
    text-align: center;
    font-size: 1.7rem;
  }

  /* Search container full width */
  .search-box {
    width: 100%;
    justify-content: center;
  }

  /* Search input fills width safely */
  .search-box input {
    width: 100%;
    max-width: 100%;
    padding: 14px 18px;

    font-size: 0.95rem;
  }
}
/* =====================================================
   SHOWVORTEX — PREMIUM AD CONTAINMENT (FINAL)
===================================================== */

/* Global safety */
body {
  overflow-x: hidden;
}

/* ==============================
   AD CONTAINER — PREMIUM FRAME
============================== */
.ad {
  width: 100%;
  max-width: 100%;

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

  padding: 20px 12px;
  margin: 60px auto;

  border-radius: 20px;

  background:
    linear-gradient(
      135deg,
      rgba(139,92,246,0.16),
      rgba(236,72,153,0.14)
    ),
    rgba(10,10,18,0.92);

  backdrop-filter: blur(20px);

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.06),
    0 35px 100px rgba(0,0,0,0.75);

  overflow: hidden;
}

/* ==============================
   AD IFRAME — HARD LIMIT
============================== */
.ad iframe {
  max-width: 100%;
  height: auto;
  border: none;

  display: block;
}

/* ==============================
   DESKTOP ADS (UNCHANGED)
============================== */
.ad-top iframe,
.ad-wide iframe {
  width: 728px;
  height: 90px;
}

.ad-inline iframe {
  width: 300px;
  height: 250px;
}

/* ==============================
   MOBILE — ENTERPRISE SCALING
============================== */
@media (max-width: 768px) {

  /* Top / Wide ads (728 → mobile-safe) */
  .ad-top iframe,
  .ad-wide iframe {
    transform: scale(0.88);
    transform-origin: center top;
  }

  /* Inline ads */
  .ad-inline iframe {
    max-width: 300px;
    width: 100%;
  }

  /* Footer anchor */
  .ad-footer {
    position: sticky;
    bottom: 12px;
    z-index: 999;

    margin: 0 auto;
    padding: 12px 8px;
    border-radius: 16px;
  }
}

/* ==============================
   EXTRA SMALL DEVICES
============================== */
@media (max-width: 420px) {

  .ad-top iframe,
  .ad-wide iframe {
    transform: scale(0.82);
  }

  .ad {
    padding: 16px 8px;
    margin: 40px auto;
  }
}