* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background: #000;

    color: #fff;

    transition:
        background 0.3s ease,
        color 0.3s ease;

}


button,
input,
select {

    font: inherit;

}


button {

    cursor: pointer;

}


a {

    text-decoration: none;

}


img {

    display: block;

    max-width: 100%;

}


.container {

    width:
        min(
            calc(100% - 80px),
            1200px
        );

    margin: auto;

}


.section {

    padding: 55px 0;

    border-top:
        8px solid #111;

}


.section h2 {

    font-size: 30px;

    margin-bottom: 25px;

}


.hidden {

    display: none !important;

}



/* ==============================
   BUTTON
============================== */

.btn-signin {

    border: none;

    background: var(--netflix-red);

    color: white;

    padding:
        8px 17px;

    border-radius: 4px;

    font-weight: 700;

    transition:
        background 0.2s ease;

}


.btn-signin:hover {

    background:
        var(--netflix-red-dark);

}


.btn-signin.logged-in {

    max-width: 140px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}



/* ==============================
   THEME
============================== */

.theme-button {

    width: 38px;

    height: 38px;

    border-radius: 50%;

    border:
        1px solid #777;

    background:
        rgba(0, 0, 0, 0.7);

    color: white;

    display: flex;

    align-items: center;

    justify-content: center;

    transition:
        transform 0.2s ease;

}


.theme-button:hover {

    transform: scale(1.1);

}



/* ==============================
   LIGHT THEME
============================== */

body.light-theme {

    background: #f5f5f5;

    color: #111;

}


body.light-theme .section {

    border-color: #ddd;

}


body.light-theme .trending,
body.light-theme .continue-section,
body.light-theme .my-list-section,
body.light-theme .faq {

    background: #f5f5f5;

}


body.light-theme .theme-button {

    background: white;

    color: #111;

}


body.light-theme .section h2 {

    color: #111;

}


body.light-theme .search-section {

    background: #f5f5f5;

    color: #111;

}


body.light-theme .movie-card {

    background: #fff;

}


body.light-theme .movie-card h3 {

    color: #111;

}


body.light-theme .movie-card p {

    color: #555;

}



/* ==============================
   TOAST
============================== */

.toast {

    position: fixed;

    right: 25px;

    bottom: 25px;

    z-index: 5000;

    background: #333;

    color: #fff;

    padding:
        14px 22px;

    border-radius: 5px;

    opacity: 0;

    transform:
        translateY(20px);

    transition:
        0.3s ease;

}


.toast.show {

    opacity: 1;

    transform:
        translateY(0);

}



/* ==============================
   MOVIE MODAL
============================== */

.movie-modal {

    position: fixed;

    inset: 0;

    z-index: 2000;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    background:
        rgba(0, 0, 0, 0.85);

    opacity: 0;

    visibility: hidden;

    transition:
        0.3s ease;

}


.movie-modal.active {

    opacity: 1;

    visibility: visible;

}


.modal-content {

    position: relative;

    width: min(
        900px,
        100%
    );

    max-height: 90vh;

    overflow-y: auto;

    display: grid;

    grid-template-columns:
        300px 1fr;

    gap: 35px;

    padding: 35px;

    background: #181818;

    border-radius: 8px;

}


.modal-poster {

    width: 100%;

    height: 430px;

    object-fit: cover;

    border-radius: 5px;

}


.modal-info {

    display: flex;

    flex-direction: column;

    justify-content: center;

}


.modal-info h2 {

    font-size: 38px;

    margin-bottom: 15px;

}


.modal-info p {

    color: #ccc;

    line-height: 1.7;

    margin:
        20px 0;

}


.modal-close {

    position: absolute;

    right: 15px;

    top: 15px;

    width: 40px;

    height: 40px;

    border: none;

    border-radius: 50%;

    background: #333;

    color: white;

    font-size: 25px;

}


.movie-meta {

    display: flex;

    gap: 15px;

    color: #bbb;

}


.modal-buttons {

    display: flex;

    gap: 10px;

}


.play-button,
.list-button {

    padding:
        12px 22px;

    border: none;

    border-radius: 4px;

    font-weight: 700;

}


.play-button {

    background: white;

    color: black;

}


.list-button {

    background: #555;

    color: white;

}



/* ==============================
   AUTH MODAL
============================== */

.auth-modal {

    position: fixed;

    inset: 0;

    z-index: 4000;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    background:
        rgba(0, 0, 0, 0.78);

    opacity: 0;

    visibility: hidden;

    transition:
        0.3s ease;

}


.auth-modal.active {

    opacity: 1;

    visibility: visible;

}


.auth-box {

    position: relative;

    width: 100%;

    max-width: 450px;

    padding: 45px;

    background: #000;

    border-radius: 5px;

    box-shadow:
        0 20px 60px
        rgba(0, 0, 0, 0.7);

}


.auth-close {

    position: absolute;

    top: 12px;

    right: 15px;

    width: 40px;

    height: 40px;

    border: none;

    border-radius: 50%;

    background: transparent;

    color: white;

    font-size: 30px;

}


.auth-form h1 {

    font-size: 32px;

    margin-bottom: 10px;

}


.auth-subtitle {

    color: #aaa;

    margin-bottom: 25px;

}


.auth-form input {

    width: 100%;

    height: 52px;

    padding: 0 15px;

    margin-bottom: 15px;

    border:
        1px solid #555;

    border-radius: 4px;

    outline: none;

    background: #333;

    color: white;

}


.auth-form input:focus {

    border-color: white;

}


.auth-submit {

    width: 100%;

    height: 50px;

    margin-top: 5px;

    border: none;

    border-radius: 4px;

    background: var(--netflix-red);

    color: white;

    font-weight: 700;

}


.auth-submit:hover {

    background:
        var(--netflix-red-dark);

}


.auth-error {

    min-height: 25px;

    color: #e87c03;

    font-size: 14px;

}


.auth-options {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 15px;

    color: #aaa;

    font-size: 13px;

}


.auth-options input {

    width: auto;

    height: auto;

    margin: 0 5px 0 0;

}


.auth-options button {

    border: none;

    background: none;

    color: #aaa;

}


.auth-switch {

    margin-top: 30px;

    color: #737373;

}


.auth-switch button {

    border: none;

    background: transparent;

    color: white;

    font-weight: 600;

}



/* ==============================
   PROFILE MENU
============================== */

.profile-menu {

    position: fixed;

    z-index: 4500;

    top: 75px;

    right: 35px;

    width: 270px;

    padding: 20px;

    background: #181818;

    border:
        1px solid #444;

    border-radius: 6px;

    box-shadow:
        0 15px 40px
        rgba(0, 0, 0, 0.5);

    display: none;

}


.profile-menu.active {

    display: block;

}


.profile-header {

    display: flex;

    align-items: center;

    gap: 12px;

}


.profile-avatar {

    width: 45px;

    height: 45px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #333;

}


.profile-header strong {

    display: block;

}


.profile-header small {

    display: block;

    color: #aaa;

    margin-top: 3px;

}


.profile-menu hr {

    border: 0;

    border-top:
        1px solid #333;

    margin: 15px 0;

}


.profile-menu > button {

    width: 100%;

    padding: 11px;

    border: none;

    background: transparent;

    color: white;

    text-align: left;

    border-radius: 4px;

}


.profile-menu > button:hover {

    background: #333;

}


.profile-menu .logout-button {

    color: #ff4b4b;

}



/* ==============================
   LIGHT AUTH
============================== */

body.light-theme .auth-box {

    background: white;

    color: #111;

}


body.light-theme .auth-close {

    color: #111;

}


body.light-theme .auth-form input {

    background: #eee;

    color: #111;

    border-color: #aaa;

}


body.light-theme .auth-switch button {

    color: #111;

}


body.light-theme .profile-menu {

    background: white;

    color: #111;

}


body.light-theme .profile-menu > button {

    color: #111;

}


body.light-theme .profile-menu > button:hover {

    background: #eee;

}