* {
    padding: 0;
    margin: 0;
}

/* 1. Ensure all padding and borders are calculated INSIDE element widths */
*, *::before, *::after {
  box-sizing: border-box;
}

:root {
    --primary-background-color: #0D0B12;
    --secondary-background-color: #171320;

    --primary-text-color: #F4F1EA;
    --secondary-text-color: #C9FF5B;
    --tertiary-text-color: #FF7A59;  

    --title-tags-font: 'Bricolage Grotesque'
}

body {
    background-color: var(--primary-background-color);
    color: var(--primary-text-color);
    font-family: Arial, sans-serif;
    margin: 50px;
    padding: 0;
}

.movie-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1000px; /* Optional max width */
    margin: 0 auto; /* Center the container */
    padding: 20px;

}

.top-bar {
    display: flex;
    flex-direction: column;
    row-gap: 15px;
    background-color: #14111C; 
    width: 100%;
}

.watch-this{
    color: var(--primary-text-color);
}

.today{
    color: var(--secondary-text-color);
}

.now {
    color: var(--tertiary-text-color);
}

.movie-details {
    width: 100%;
}

.movie-info-container {
    display: flex;
    flex-direction: column;
    align-content: start;
    min-width: 0; /* CRITICAL: Allows flex child to shrink properly */
    flex: 1;
    row-gap: 20px;
}

.movie-info-container h2 {
    font-size: clamp(2.5rem, 6vw, 6.5rem); /* Scales down on smaller displays */
    line-height: 0.9;
    letter-spacing: -0.045em;
    font-weight: 800;
    font-family: var(--title-tags-font);
    overflow-wrap: break-word; /* Allows long single words to wrap if needed */
}

#overviewElement {
    font-size: clamp(0.8em, 3vw, 1.2rem); /* Scales down on smaller displays */
}

#movie-tag {
    color: var(--tertiary-text-color);
    font-style: italic;
    margin-top: 10px;
}

.headerTagline {
    font-style: italic;
    color: var(--primary-text-color);
    opacity: 70%;
}

.poster-details-container {
    display: flex;
    flex-direction: row;
    column-gap: 20px;
    width: 100%;
    min-width: 0; /* Prevents overflow blowout */
}

.movie-poster-container {
    flex-shrink: 0;
    position: relative; /* Anchor for absolute child */
    width: 300px;
    height: fit-content;
}

#rating-container {
    background-color: var(--secondary-text-color);
    position: absolute; /* Takes it out of document flow */
    top: 10px;          /* Adjust vertical offset to taste */
    right: 10px;       /* Adjust overlap offset to taste */
    
    width: 110px;
    height: 110px;
    padding: 0;         /* Let fixed dimensions handle sizing */
    border-radius: 50%;
    color: black;
    font-weight: 900;
    font-size: 1.5rem;
    opacity: 0.6;
    transform: rotate(-10deg);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

#rating-count {
    font-size: 0.7rem;
    font-weight: normal;
}

#moviePoster {
    border-radius: 8px;
    width: 100%; /* Makes the image responsive */
    aspect-ratio: 2 / 3; /* Maintains a 2:3 aspect ratio */
}


.movie-details {
    display: flex;
    flex-direction: column;
    background-color: var(--secondary-background-color);
    padding: 20px;
    margin: 0px auto; /* Center the container with some margin */
    min-width: 0;
    max-width: 100%;
}

/* Slider Container */
    .slider-wrapper {
      position: relative;
      width: 100%;
      overflow: hidden;
      margin-top: 24px; /* Space between details and cast */
      box-sizing: border-box;
      padding: 0 54px; /* Creates clearance on both sides for the 44px buttons */
      /*min-width: 0;
      max-width: 100%;*/
    }

    /* The Unordered List (Track) */
    .slider-track {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;    
      gap: 10px;
      list-style: none;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      border-radius: 12px;
      width: 100%;
      white-space: nowrap; /* Keeps items on one line */
      justify-content: flex-start;

      /* Hide standard scrollbars */
      scrollbar-width: nowrap; /* Firefox */
      -ms-overflow-style: none; /* IE / Edge */
    }

    .slider-track::-webkit-scrollbar {
      display: none; /* Chrome, Safari, Opera */
    }

    .cast-member {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex: 0 0 220px; /* Don't shrink; keep fixed card width */
        column-gap: 8px;
        }

    .cast-picture {
        max-width: 50px;           /* Or any responsive size, like 100% or 15vw */
        aspect-ratio: 1 / 1;    /* Forces the height to perfectly match the width */
        border-radius: 999px;     /* Rounds the corners into a perfect circle */
        object-fit: cover;      /* Prevents stretching if the original image isn't a square */
    }

    .cast-picture img {
        width: 100%;           /* Or any responsive size, like 100% or 15vw */
        aspect-ratio: 1 / 1;    /* Forces the height to perfectly match the width */
        border-radius: 50%;     /* Rounds the corners into a perfect circle */
        object-fit: cover;
    }

    .cast-info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%; /* Takes up the remaining space */
    }

    .cast-name {
        white-space: nowrap; /* Prevents text from wrapping to the next line */
        width: auto; /* Ensures the text takes up the remaining space */
        font-size: 0.9rem; /* Adjust as needed */
        font-weight: bold;
        margin: 0;
    }

    .cast-character {
        white-space: nowrap; /* Prevents text from wrapping to the next line */
        width: auto; /* Ensures the text takes up the remaining space */
        font-size: 0.7rem; /* Adjust as needed */
        font-weight: normal;
        margin: 0;
    }

    /* Navigation Buttons */
    .nav-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: var(--secondary-text-color) /*rgba(255, 255, 255, 0.85)*/;
      border: none;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      cursor: pointer;
      font-size: 1.25rem;
      color: #1e293b;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s, transform 0.1s;
      z-index: 10;
    }

    .nav-btn:hover {
      background: #ffffff;
    }

    .nav-btn:active {
      transform: translateY(-50%) scale(0.95);
    }

    .prev-btn { left: 0px; }
    .next-btn { right: 0px; }

    footer {
        width: 100%;
        display: flex;
        flex-direction: row;
        column-gap: 30px;
        justify-content: center;
        margin: 50px 0 auto;      
    }

    footer img {
        width: 100px;
    }

    /* Mobile */
    @media (max-width: 768px) {

        body {
            margin: 5px;
        }

        .movie-container {
            width: 100%; /* Optional max width */
        }

        .poster-details-container {
            display: flex;
            flex-direction: column;
            row-gap: 20px;
            width: 100%;
            min-width: 0; /* Prevents overflow blowout */
        }

        .movie-poster-container {
            width: 100%;
        }

        #rating-container {
           
            
            width: 80px;
            height: 80px;

            border-radius: 50%;
            font-size: 1.5rem;
            opacity: 0.8;
        }

        #rating-count {
            font-size: 0.7rem;
            font-weight: normal;
        }

    }