body {
        margin: 0;
        font-family: "Segoe UI", Roboto, sans-serif;
        background-color: #0b0b0b;
        color: #fff;
      }

    

      .header {
        background: linear-gradient(
            to top,
            rgba(0, 0, 0, 0.7),
            rgba(0, 0, 0, 0.2)
          ),
          url("https://images.unsplash.com/photo-1524985069026-dd778a71c7b4?auto=format&fit=crop&w=1400&q=80")
            center/cover no-repeat;
        padding: 80px 20px 50px;
        text-align: center;
      }

      .header h1 {
        font-size: 42px;
        font-weight: 900;
        color: #fff;
        letter-spacing: 3px;
        text-shadow: 0 0 15px #ff3c3c;
        margin: 0 0 10px;
      }

      .header p {
        font-size: 16px;
        color: #ccc;
        margin: 0;
      }

      .search-bar {
        margin: 30px auto;
        text-align: center;
      }

      .search-bar input {
        padding: 12px;
        width: 260px;
        max-width: 90vw;
        border-radius: 6px;
        border: none;
        background: #1b1b1b;
        color: white;
        font-size: 15px;
      }

      .search-bar button {
        padding: 12px 18px;
        margin-left: 8px;
        font-size: 15px;
        border-radius: 6px;
        border: none;
        background-color: #ff3c3c;
        color: white;
        font-weight: bold;
        cursor: pointer;
        transition: background 0.3s ease;
      }

      .search-bar button:hover {
        background-color: #c60000;
      }

      .movies-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 20px;
        padding: 30px;
        max-width: 1400px;
        margin: auto;
      }

      .movie-card {
        background: #121212;
        border-radius: 8px;
        overflow: hidden;
        transition: transform 0.3s ease;
        cursor: pointer;
      }

      .movie-card:hover {
        transform: scale(1.02);
      }

      .movie-poster {
        width: 100%;
        height: 280px;
        object-fit: cover;
        opacity: 0;
        transition: opacity 0.4s ease-in-out;
      }

      .movie-poster.loaded {
        opacity: 1;
      }

      .movie-info {
        padding: 12px;
        text-align: center;
      }

      .movie-info strong {
        display: block;
        font-size: 15px;
        margin-bottom: 5px;
      }

      .movie-info small {
        color: #bbb;
        font-size: 13px;
      }

      .badge-row {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 8px;
      }

      .badge {
        background: rgba(255, 60, 60, 0.1);
        border: 1px solid rgba(255, 60, 60, 0.4);
        padding: 4px 10px;
        border-radius: 20px;
        font-size: 11px;
        color: #ff6666;
        font-weight: 600;
        text-transform: uppercase;
      }

      .movie-card .btn {
        margin-top: 10px;
        padding: 10px 14px;
        background: linear-gradient(90deg, #ff3c3c, #ff1a1a);
        color: white;
        font-weight: bold;
        font-size: 14px;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        transition: background 0.3s ease, transform 0.2s ease;
      }

      .movie-card .btn:hover {
        background: #c60000;
        transform: scale(1.05);
      }

      .movie-card .btn:disabled {
        background: #333;
        color: #aaa;
        cursor: not-allowed;
      }

      .skeleton {
        background: linear-gradient(90deg, #1a1a1a 25%, #222 50%, #1a1a1a 75%);
        background-size: 400% 100%;
        animation: shimmer 1.2s infinite;
      }

      @keyframes shimmer {
        0% {
          background-position: -400px 0;
        }
        100% {
          background-position: 400px 0;
        }
      }

      #paginationButtons {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 14px;
        margin: 24px 0 36px;
        font-family: system-ui, sans-serif;
        padding: 0 16px;
        flex-wrap: wrap;
      }

      #pageLabel {
        font-size: 1rem;
        font-weight: 600;
        color: #e0e0e0;
        padding: 6px 12px;
        background: #1f2937;
        border-radius: 8px;
        min-width: 68px;
        text-align: center;
      }

      #paginationButtons button {
        padding: 10px 18px;
        font-size: 0.95rem;
        font-weight: 600;
        border: none;
        border-radius: 999px;
        background: linear-gradient(90deg, #e50914, #ff4e50);
        color: white;
        cursor: pointer;
        transition: transform 0.15s ease, background 0.3s ease,
          opacity 0.2s ease;
        box-shadow: 0 6px 16px rgba(229, 9, 20, 0.25);
      }

      #paginationButtons button:hover:not(:disabled) {
        transform: translateY(-2px);
        opacity: 0.92;
      }

      #paginationButtons button:active:not(:disabled) {
        transform: translateY(0);
        opacity: 1;
      }

      #paginationButtons button:disabled {
        background: #374151;
        color: #9ca3af;
        cursor: not-allowed;
        opacity: 0.7;
        box-shadow: none;
      }

      @media (max-width: 900px) {
        #paginationButtons {
          gap: 10px;
        }
        #paginationButtons button {
          padding: 10px 16px;
          font-size: 0.9rem;
        }
        #pageLabel {
          padding: 6px 10px;
          min-width: 56px;
          font-size: 0.95rem;
        }
      }

      @media (max-width: 520px) {
        #paginationButtons {
          gap: 8px;
          margin: 20px 0 28px;
        }
        #paginationButtons button {
          padding: 10px 14px;
          font-size: 0.9rem;
          border-radius: 12px;
        }
      }

      @media (max-width: 400px) {
        #pageLabel {
          display: none;
        }
      }

      #moviePlayer {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: #000;
        z-index: 9999;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      }

      #moviePlayer iframe {
        width: 90%;
        max-width: 1200px;
        height: 80vh;
        border: none;
        border-radius: 10px;
      }

      #moviePlayer button {
        margin-top: 15px;
        background: #222;
        color: #fff;
        padding: 10px 18px;
        border-radius: 6px;
        border: 1px solid #555;
        cursor: pointer;
        font-weight: bold;
      }

      #moviePlayer button:hover {
        background: #ff3c3c;
      }

      .movies-container {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }

      @media (min-width: 640px) {
        .movies-container {
          grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        }
      }

      @media (min-width: 768px) {
        .movies-container {
          grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        }
      }

      @media (min-width: 1024px) {
        .movies-container {
          grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        }
      }

      @media (min-width: 1280px) {
        .movies-container {
          grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        }
      }

      .announcement-banner {
        background: linear-gradient(90deg, #ff3c3c, #b30000);
        color: #fff;
        padding: 12px 20px;
        text-align: center;
        font-size: 15px;
        font-weight: 600;
        letter-spacing: 0.3px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
      }
      .announcement-banner p {
        margin: 0;
        line-height: 1.5;
      }

      .meta {
  font-size: 13px;
  color: #ccc;
  margin-bottom: 6px;
}
.meta span {
  margin-right: 8px;
}

/* Modal overlay */
.md-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.7);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 3000;
}
.md-overlay[hidden]{ display:none; }

.md-card{
  width:min(960px, 96vw);
  background:#111;
  color:#fff;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 12px 30px rgba(0,0,0,.45);
  display:grid;
  grid-template-columns: 1fr 1.2fr;
  gap:0;
}
@media (max-width: 860px){
  .md-card{ grid-template-columns: 1fr; }
}

.md-close{
  position:absolute;
  right:14px; top:10px;
  background:transparent;
  border:0; color:#fff; font-size:28px; line-height:1;
  cursor:pointer;
}

.md-hero{
  background:#000;
  min-height: 320px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.md-hero img{
  width:100%; height:100%; object-fit:cover;
}

.md-info{ padding:18px 18px 20px; }
.md-title{ margin:0 0 6px; font-size:20px; font-weight:800; }
.md-meta{ font-size:13px; color:#bbb; margin-bottom:10px; display:flex; gap:10px; }
.md-genres{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.md-genres .badge{
  background:#1f2533; border:1px solid #2a3142; color:#d9e1ee;
  font-size:12px; padding:4px 8px; border-radius:999px;
}
.md-overview{ font-size:14px; color:#e5e7eb; line-height:1.5; margin:0 0 14px; }
.md-actions .btn{
  padding:10px 14px; border:0; border-radius:8px; background:#e50914; color:#fff;
  font-weight:800; cursor:pointer;
}
.md-actions .btn:hover{ background:#b00610; }


.search-controls {
  display: flex;
  align-items: center;
  gap: 10px;              /* ⬅ small gap between input and button */
}

.search-controls input {
  padding: 12px;
  width: min(640px, 90vw);
  border-radius: 10px;
  border: 1px solid #2a3142;
  background: #1b1f2a;
  color: #fff;
  font-size: 16px;
  outline: none;
}

.search-controls button {
  padding: 12px 16px;
  border-radius: 10px;
  border: 0;
  font-weight: 800;
  background: linear-gradient(90deg, #e50914, #ff3354);
  color: #fff;
  cursor: pointer;
}

/* optional: keep label/select tidy inside the year filter wrap */
#yearFilterWrap { gap: 10px; }
/* allow the enlarged card to scroll within the viewport */
.md-card{
  max-height: calc(100vh - 40px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

@media (max-width: 860px){
  .md-card{ max-height: calc(100vh - 24px); }
}

.player-notice{
  display:flex; align-items:flex-start; gap:10px;
  background: linear-gradient(135deg,#fff7d6,#ffe8a1);
  color:#1f2937;
  border:1px solid #f59e0b;
  border-radius:10px;
  padding:10px 12px;
  margin:10px 0 12px;
  font-size:13px;
  box-shadow: 0 4px 14px rgba(245,158,11,.15);
}
.player-notice .icon{font-size:16px; line-height:1.2}
.player-notice strong{font-weight:800}
.player-notice .notice-close{
  margin-left:auto; background:#1f2937; color:#fff; border:0;
  border-radius:8px; padding:4px 8px; cursor:pointer; font-weight:700;
}
.player-notice .notice-close:hover{ background:#111827 }
@media (max-width:600px){
  .player-notice{ font-size:12px; padding:10px }
}

.page-header{
  width: min(1100px, 92vw);
  margin: 24px auto 18px;
  text-align: center;           /* 👈 CENTER ALIGN */
}

.page-header h1{
  font-size: clamp(28px, 6vw, 40px);
  font-weight: 900;
  margin-bottom: 6px;
}

.page-subtitle{
  font-size: 15px;
  color: var(--muted);
  display: flex;                /* center subtitle + tag */
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.release-tag{
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: #fff;
  font-weight: 700;
}