/* Shared approved black / charcoal / cyan theme for the supplied movie pages. */
:root {
  --site-accent: #0397D6;
  --site-accent-strong: #0284BC;
  --site-panel: #0f1115;
  --site-panel-2: #171a20;
  --site-line: #252a32;
  --site-line-2: #323843;
  --site-text: #e6e9ee;
  --site-muted: #9aa3af;
}
html, body { background: #000 !important; }
body {
  margin: 0 !important;
  color: var(--site-text) !important;
  font-family: Arial, Helvetica, sans-serif !important;
}
/* Reveal the series-matched black canvas beneath legacy gray content slabs. */
html body .main-content,
html body #main-content,
html body main.main-content,
html body .content-wrapper {
  background: transparent !important;
  color: var(--site-text) !important;
}
/* Page/section headings use text on the page background, not gray title tiles. */
html body .page-title,
html body h1.page-title,
html body .main-content > h1,
html body main > h1 {
  color: #fff !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
html body .section-title,
html body .section-heading {
  color: var(--site-text) !important;
  background: transparent !important;
  border-color: var(--site-line) !important;
  box-shadow: none !important;
}
/* Collection/movie cards retain layout and posters while adopting charcoal panels. */
html body .movie-item,
html body .result_block,
html body .result_altblock,
html body .genre-card,
html body .year-item,
html body .movie-card {
  color: var(--site-text) !important;
  background: var(--site-panel-2) !important;
  border-color: var(--site-line) !important;
  box-shadow: 0 5px 18px rgba(0, 0, 0, .22) !important;
}
html body .movie-item:hover,
html body .result_block:hover,
html body .result_altblock:hover,
html body .genre-card:hover,
html body .year-item:hover,
html body .movie-card:hover {
  background: var(--site-panel-2) !important;
  border-color: var(--site-accent) !important;
  box-shadow: 0 8px 22px rgba(3, 151, 214, .14) !important;
}
html body .movie-title,
html body .movie-title-text,
html body .genre-card a,
html body .year-item a { color: var(--site-text) !important; }
html body .movie-year,
html body .movie-genre,
html body .movie-genres,
html body .movie-rating,
html body .muted,
html body .metadata { color: var(--site-muted) !important; }
/* Common controls: charcoal idle state, cyan hover/selected state. */
html body button,
html body input[type="button"],
html body input[type="submit"],
html body input[type="reset"],
html body .button,
html body .btn,
html body .movie-btn-custom,
html body .section-more,
html body .page-number,
html body .pagination-container a,
html body .pagination-container button,
html body .pagination a,
html body .pagination button,
html body .trending-controls button {
  color: var(--site-text) !important;
  background: var(--site-panel-2) !important;
  border: 1px solid var(--site-line-2) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease !important;
}
html body button:hover,
html body input[type="button"]:hover,
html body input[type="submit"]:hover,
html body input[type="reset"]:hover,
html body .button:hover,
html body .btn:hover,
html body .movie-btn-custom:hover,
html body .section-more:hover,
html body .page-number:hover,
html body .pagination-container a:hover,
html body .pagination-container button:hover,
html body .pagination a:hover,
html body .pagination button:hover,
html body .trending-controls button:hover {
  color: #fff !important;
  background: var(--site-accent-strong) !important;
  border-color: var(--site-accent) !important;
}
html body button.active,
html body button[aria-pressed="true"],
html body button[aria-selected="true"],
html body .active.page-number,
html body .page-number.active,
html body .pagination .active,
html body .pagination .current,
html body .pagination-container .active,
html body .pagination-container .current,
html body .btn-primary,
html body .button-primary,
html body .explore-button,
html body .btn-apply {
  color: #fff !important;
  background: var(--site-accent-strong) !important;
  border-color: var(--site-accent) !important;
}
/* Search and form controls follow the dark series search treatment. */
html body input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]),
html body textarea,
html body select {
  color: var(--site-text) !important;
  color-scheme: dark;
  background-color: var(--site-panel-2) !important;
  border-color: var(--site-line-2) !important;
}
html body input::placeholder,
html body textarea::placeholder { color: #7b8491 !important; }
html body a:hover,
html body a:focus-visible { color: var(--site-accent) !important; }
html body :focus-visible { outline-color: var(--site-accent) !important; }
/* Shared header/footer and other information panels. */
html body #header1,
html body .header,
html body #menu,
html body .footer,
html body .welcome-container,
html body .message-box,
html body .block-box {
  background-color: var(--site-panel) !important;
  border-color: var(--site-line) !important;
}
html body #menu ul.top-menu li a { color: var(--site-text) !important; }
html body #menu ul.top-menu li:hover > a,
html body #menu ul.top-menu li.active > a,
html body #menu ul.top-menu li > a:hover,
html body .footer a:hover { color: var(--site-accent) !important; }
html body .genre-badge,
html body .year-badge { background: var(--site-panel-2) !important; border-color: var(--site-line-2) !important; color: var(--site-text) !important; }
@media (max-width: 700px) {
  html body .movie-item,
  html body .result_block,
  html body .result_altblock,
  html body .genre-card,
  html body .year-item,
  html body .movie-card { border-radius: 10px !important; }
  html body button,
  html body input[type="button"],
  html body input[type="submit"],
  html body input[type="reset"],
  html body .button,
  html body .btn,
  html body .movie-btn-custom,
  html body .section-more,
  html body .page-number,
  html body .pagination-container a,
  html body .pagination-container button { min-height: 40px; }
}