/* Style imports */
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/* Custom reset */
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
  scrollbar-width: thin;
  scroll-behavior: smooth;
}
/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}
/* Set core body defaults */
body {
  margin: 0;
  min-height: 100vh;
  line-height: 1.5;
}
/* Set shorter line heights on headings and interactive elements */
h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.1;
}
/* Balance text wrapping on headings */
h1,
h2,
h3,
h4 {
  text-wrap: balance;
}
/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}
/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}
/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}
/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}
/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
:root {
  /* Light colors */
  --text-color-light: #091520;
  --bg-color-light: #ffffff;
  --link-color-light: #646cff;
  --link-hover-color-light: #747bff;
  --button-color-light: #cccccc;
  --button-hover-color-light: #646cff;
  --info-color-light: lightskyblue;
  --success-color-light: green;
  --error-color-light: #ad0000;
  /* Dark colors */
  --text-color-dark: rgba(255, 255, 255, 0.87);
  --bg-color-dark: #242424;
  --link-color-dark: #646cff;
  --link-hover-color-dark: #535bf2;
  --button-color-dark: #444444;
  --button-hover-color-dark: #646cff;
  --info-color-dark: #0462ae;
  --success-color-dark: #00ff00;
  --error-color-dark: #ff4242;
}
/* System prefers light or no preference */
@media (prefers-color-scheme: light), (prefers-color-scheme: no-preference) {
  :root {
    --text-color: var(--text-color-light);
    --bg-color: var(--bg-color-light);
    --link-color: var(--link-color-light);
    --link-hover-color: var(--link-hover-color-light);
    --button-color: var(--button-color-light);
    --button-hover-color: var(--link-hover-color-light);
    --info-color: var(--info-color-light);
    --success-color: var(--success-color-light);
    --error-color: var(--error-color-light);
    accent-color: var(--link-color-light);
    color-scheme: light;
    font-palette: light;
  }
}
/* System prefers dark */
@media (prefers-color-scheme: dark) {
  :root {
    --text-color: var(--text-color-dark);
    --bg-color: var(--bg-color-dark);
    --link-color: var(--link-color-dark);
    --link-hover-color: var(--link-hover-color-dark);
    --button-color: var(--button-color-dark);
    --button-hover-color: var(--link-hover-color-dark);
    --info-color: var(--info-color-dark);
    --success-color: var(--success-color-dark);
    --error-color: var(--error-color-dark);
    accent-color: var(--link-color-dark);
    color-scheme: dark;
    font-palette: dark;
  }
}
/* Links */
a {
  font-weight: 500;
  color: var(--link-color);
}
a:hover {
  color: var(--link-hover-color);
  text-decoration: none;
}
a.active {
  outline-offset: 2px;
  outline: blue solid 2px;
}
/**
 * AUTO-GRID LAYOUT
 *
 * This CSS utility creates a responsive grid layout that automatically adjusts the number of columns
 * based on the available space and specified constraints. It aims to fit as many cells as possible
 * in a single row, while respecting minimum cell width and maximum columns constraints.
 *
 * Customizable Properties:
 * --auto-grid-min-size: Sets the minimum width for each cell in the grid.
 *                       Default is 10rem.
 * --auto-grid-max-columns: Sets the maximum number of columns in the grid.
 *                          Default is 'infinity' (as many as can fit).
 * --auto-grid-gap: Sets the horizontal gap between grid cells. It also sets
 *                  the vertical gap if --auto-grid-gap-vertical is not defined.
 *                  Default is 1rem.
 * --auto-grid-gap-vertical: Specifically sets the vertical gap between rows
 *                           of cells. If not set, it falls back to the value
 *                           of '--auto-grid-gap'.
 *
 * The grid utilizes CSS 'display: grid' with the 'auto-fit' feature and the 'minmax()'
 * function to ensure that cells expand to fill available space while maintaining
 * the set minimum size.
 *
 * Example Usage:
 * <div class="auto-grid" style="--auto-grid-min-size: 10rem; --auto-grid-max-columns: 3; --auto-grid-gap: 0.5rem;">
 *   <!-- grid items here -->
 * </div>
 *
 * The above example will create a grid with a minimum cell width of 10rem, a maximum
 * of 3 columns, and a gap of 0.5rem between both rows and columns.
 */
.auto-grid {
  --gap: var(--auto-grid-gap, 1rem);
  --max-column-width: 100% / var(--auto-grid-max-columns, infinity) - var(--gap);
  --column-width: max(
    var(--max-column-width),
    min(var(--auto-grid-min-size, 10rem), 100%)
  );
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--column-width), 1fr));
  /* vertical gap falls back to general gap then falls back to 1rem*/
  gap: var(--auto-grid-gap-vertical, var(--gap)) var(--gap);
}
/* Layout styles */
/* View styles */
body.home main > section header {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.movie__container .backdrop-image {
  width: 100%;
  height: 70vh;
  object-fit: cover;
}
.movie__container .backdrop-image__container {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  opacity: 0.75;
  z-index: -1;
}
.movie__container .backdrop-image__container:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, rgba(26, 26, 26, 0), #1a1a1a);
}
.movie__container .movie__info {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-top: 80px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.movie__container .movie__info iframe {
  width: 560px;
  max-width: 80%;
}
.movie__container .movie__info-image {
  width: 100%;
  max-width: 250px;
  margin-bottom: 20px;
  margin-right: auto;
  margin-left: auto;
}
.movie__container .movie__info-description {
  text-align: left;
  margin-bottom: 20px;
}
/* Component styles */
body > .chat-box {
  display: none;
}
@media (display-mode: picture-in-picture) {
  .chat-box ul {
    min-height: 100px;
    height: 50vh;
    overflow: auto;
  }
  .chat-box form {
    accent-color: var(--sl-color-primary-600);
    display: flex;
    flex-direction: column;
    justify-content: end;
  }
  .chat-box form button {
    background-color: var(--sl-color-primary-600);
    border-color: var(--sl-color-primary-600);
    color: var(--sl-color-neutral-0);
    border-radius: 0.25rem;
    padding: 0.25rem;
    border: none;
    font-weight: 500;
  }
  .chat-box form button:hover {
    background-color: var(--sl-color-primary-500);
    border-color: var(--sl-color-primary-500);
    cursor: pointer;
  }
  .chat-box form > div {
    margin-bottom: 1rem;
  }
  .chat-box form > div label {
    display: block;
    margin-bottom: 0.5rem;
  }
  .chat-box form > div input,
  .chat-box form > div textarea {
    width: 100%;
    border-radius: 0.25rem;
  }
  .chat-box form > div input:focus-visible,
  .chat-box form > div textarea:focus-visible {
    outline: none;
    border-color: var(--sl-color-primary-600);
    box-shadow: 0 0 0 3px var(--sl-input-focus-ring-color);
  }
}
.chat-box ul > li,
.chat-drawer ul > li {
  padding: 0.5rem 0;
}
.chat-box ul > li p,
.chat-drawer ul > li p {
  white-space: pre-wrap;
}
.chat-form *::part(form-control-label) {
  float: left;
}
.chat-form sl-input,
.chat-form sl-textarea {
  margin-bottom: 1rem;
}
.chat-form .chat-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.chat-form .chat-form-actions.no-notify {
  justify-content: end;
}
.chat-form .chat-form-actions.no-notify sl-icon-button[name=bell] {
  display: none;
}
.pip.no-pip {
  display: none;
}
header.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 150px;
  padding: 0 1rem;
}
header.header.no-chat {
  justify-content: center;
}
header.header.no-chat .chat-btn {
  display: none;
}
header.header a,
header.header img {
  height: 100%;
}
header.header .chat-btn {
  display: flex;
  align-items: center;
}
header.header .chat-btn sl-icon-button {
  font-size: var(--sl-font-size-large);
}
header.header .chat-btn .new-chats {
  display: none;
}
sl-card.movie-card {
  max-width: 300px;
}
sl-card.movie-card::part(base) {
  height: 100%;
}
sl-card.movie-card::part(body) {
  flex-grow: 1;
}
sl-card.movie-card [slot=footer] {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
sl-card.movie-card [slot=footer].no-share sl-button {
  width: 100%;
}
sl-card.movie-card [slot=footer].no-share sl-icon-button {
  display: none;
}
.search-form sl-input [slot=suffix] {
  display: none;
}
.trending-list {
  width: 100%;
  overflow: auto;
  display: flex;
  gap: 1rem;
}
.youtube-player {
  aspect-ratio: 16/9;
}
/* Main styles */
:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.5s;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  justify-content: space-between;
}
main {
  flex-grow: 1;
  padding: 1rem;
}
p {
  max-width: 60ch;
}