/* *{
    border: 1px solid red;
} */

/* SEARCH FORM */
.movie-search-section{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
}

#movieSearchForm{
    position:relative;
    width:calc(100% - 42px);
    max-width:900px;
    margin:15px auto;
}

#movieSearch{
    width:100%;
    min-width:0;
    height:58px;
    padding:0 72px 0 24px;

    background:var(--bg-glass);
    border:1px solid var(--border-light);
    border-radius:14px;

    color:var(--text-main);
    font-size:1rem;
    outline:none;

    backdrop-filter:blur(12px);

    box-shadow:
        0 0 30px var(--shadow-main),
        inset 0 0 0 1px var(--border-subtle);

    transition:0.25s ease;
}

#movieSearch::placeholder{
    color:var(--text-muted);
}

#movieSearch:focus{
    border-color:var(--accent-primary);
    box-shadow:0 0 12px var(--glow-primary);
}

#movieSearchForm button{
    position:absolute;
    top:50%;
    right:18px;

    width:42px;
    height:42px;

    border:none;
    border-radius:50%;

    background:transparent;
    color:var(--accent-primary);
    font-size:1.35rem;

    cursor:pointer;
    transform:translateY(-50%);
    transition:0.25s ease;
}

#movieSearchForm button:hover{
    transform:translateY(-50%) scale(1.08);
    box-shadow:0 0 12px var(--glow-primary);
}

#movieSearchForm button:active{
    transform:translateY(-50%) scale(0.95);
}

#movieSearch[hidden],
#randomFilters[hidden]{
    display:none;
}
/* BUTTONS */
#submitIcon{
    display:flex;
    justify-content:center;
    align-items:center;
}

#searchIcon{
    width:20px;
    height:20px;
    color:var(--accent-primary);
}

#submitIcon img{
    width:20px;
    height:20px;
    filter:drop-shadow(0 0 4px rgba(64,255,89,0.35));
}

.mode-toggle{
    width:calc(100% - 42px);
    max-width:900px;
    margin:40px auto 14px;

    display:flex;
    gap:12px;
}

.mode-btn{
    flex:1;
    height:48px;

    border:1px solid var(--border-light);
    border-radius:14px;

    background:var(--bg-glass);
    color:var(--text-muted);

    font-size:0.95rem;
    font-weight:600;

    backdrop-filter:blur(12px);

    cursor:pointer;
    transition:0.25s ease;
}

.mode-btn:hover{
    color:var(--text-main);
    border-color:rgba(255,255,255,0.16);
}

.mode-btn.active{
    color:var(--text-main);
    border-color:var(--accent-primary);

    box-shadow:0 0 12px var(--glow-primary);

    background:rgba(64,255,89,0.08);
}

/* RANDOM FILTERS */
#randomFilters{
    width:100%;
    height:58px;

    display:flex;
    align-items:center;
    gap:10px;

    padding:0 72px 0 14px;

    background:var(--bg-glass);
    border:1px solid var(--border-light);
    border-radius:14px;

    backdrop-filter:blur(12px);

    box-shadow:
        0 0 30px var(--shadow-main),
        inset 0 0 0 1px var(--border-subtle);
}

#randomFilters[hidden]{
    display:none;
}

#randomFilters select,
#randomFilters input{
    height:38px;
    min-width:0;

    padding:0 12px;

    background:var(--bg-input);
    border:1px solid var(--border-light);
    border-radius:10px;

    color:var(--text-main);
    font-size:0.9rem;

    outline:none;
    transition:0.25s ease;
}

#randomFilters select:focus,
#randomFilters input:focus{
    border-color:var(--accent-primary);
    box-shadow:0 0 8px var(--glow-primary);
}

#randomFilters input::placeholder{
    color:var(--text-muted);
}

/* Filter sizing */
#genreFilter{
    flex:0 0 130px;
}

#actorFilter,
#directorFilter{
    flex:1 1 150px;
}

#yearFrom,
#yearTo{
    flex:0 0 82px;
}

#rtFilter{
    flex:0 0 150px;
}

#reopenOracleFilters{
    display:block;
    width:calc(100% - 32px);
    max-width:900px;
    margin:0 auto 16px;
    padding:12px 16px;

    border:1px solid var(--accent-primary);
    border-radius:14px;

    background:rgba(64,255,89,0.08);
    color:var(--text-main);

    font-size:0.9rem;
    font-weight:600;

    cursor:pointer;

    box-shadow:0 0 12px var(--glow-primary);
}

#reopenOracleFilters[hidden]{
    display:none;
}

/* MOVIE RESULTS */
#movieResults{
    width:100%;
    max-width:900px;
    margin:0;
    padding:0;
    order:2;
}

.movie-card{
    position:relative;

    width:100%;
    max-width:700px;
    margin:0;

    display:grid;
    grid-template-columns:220px 1fr;
    gap:28px;

    padding:24px;

    background:var(--bg-glass);
    border:1px solid var(--border-light);
    border-radius:22px;

    backdrop-filter:blur(12px);

    box-shadow:
        0 0 30px var(--shadow-main),
        inset 0 0 0 1px var(--border-subtle);
}

.movie-card img{
    width:100%;
    border-radius:16px;
    display:block;

    box-shadow:0 0 24px var(--shadow-main);
}

.movie-info{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:12px;

    color:var(--text-main);
}

.movie-info h2{
    margin:0;

    font-size:2rem;
    line-height:1.1;

    color:var(--text-main);
}

.movie-info p{
    margin:0;

    font-size:1rem;
    line-height:1.6;

    color:var(--text-muted);
}

.movie-info strong{
    color:var(--text-main);
}

.smaller{
    font-size:12px;
}

/* CARD ARROWS */
.movie-nav{
    position:absolute;
    top:30px;
    transform:translateY(-50%);

    width:38px;
    height:38px;

    border:none;
    border-radius:50%;

    background:rgba(0,0,0,0.45);
    color:var(--accent-primary);

    font-size:2rem;
    line-height:1;

    cursor:pointer;
    z-index:5;

    backdrop-filter:blur(6px);
    transition:0.25s ease;
}

.movie-nav:hover{
    background:rgba(0,0,0,0.7);
    box-shadow:0 0 12px var(--glow-primary);
}

.prev-movie{
    left:12px;
}

.next-movie{
    right:12px;
}

/* POSTER / TRAILER PLAY */
.poster-link{
    position:relative;
    display:inline-block;

    width:auto;
    height:fit-content;

    line-height:0;
    margin:0 auto;
}

.poster-link img{
    display:block;
    width:100%;
}

.poster-play{
    position:absolute;
    right:10px;
    bottom:10px;

    width:34px;
    height:34px;

    border-radius:50%;
    background:rgba(0,0,0,0.45);
    backdrop-filter:blur(6px);

    display:flex;
    justify-content:center;
    align-items:center;

    opacity:1;
    transition:0.25s ease;
}

.poster-play::before{
    content:"";

    width:0;
    height:0;

    border-top:6px solid transparent;
    border-bottom:6px solid transparent;
    border-left:10px solid var(--accent-primary);

    transform:translateX(1px);
}

.no-poster{
    width:100%;
    min-height:330px;

    display:flex;
    justify-content:center;
    align-items:center;

    border-radius:16px;

    background:var(--bg-input);
    border:1px solid var(--border-light);

    color:var(--text-muted);
}

/* MOVIE BROWSER */
.movie-browser{
    width:calc(100% - 42px);
    max-width:900px;
    margin:0 auto 80px;

    display:grid;
    grid-template-columns:220px 1fr;
    gap:20px;
}

.movie-list{
    display:flex;
    flex-direction:column;
    gap:10px;
    order:1;

    padding:14px;

    background:var(--bg-glass);
    border:1px solid var(--border-light);
    border-radius:20px;

    backdrop-filter:blur(12px);

    box-shadow:
        0 0 30px var(--shadow-main),
        inset 0 0 0 1px var(--border-subtle);
}

.movie-list:empty{
    display:none;
}

.movie-list-item{
    width:100%;

    padding:12px 14px;

    border:1px solid var(--border-light);
    border-radius:12px;

    background:var(--bg-input);
    color:var(--text-muted);

    text-align:left;
    cursor:pointer;

    transition:0.25s ease;
}

.movie-list-item:hover,
.movie-list-item.active{
    color:var(--text-main);
    border-color:var(--accent-primary);
    box-shadow:0 0 10px var(--glow-primary);
}

/* MOBILE */
@media(max-width:950px){

    .mode-toggle,
    #movieSearchForm,
    .movie-browser{
        width:calc(100% - 32px);
    }

    .mode-toggle{
        gap:10px;
        margin-top:24px;
    }

    .mode-btn{
        height:44px;
        font-size:0.85rem;
    }

    #movieResults{
        order:1;
    }

    .movie-browser{
        grid-template-columns:1fr;
    }

    .movie-list{
        flex-direction:column;
        overflow:visible;
        max-height:none;
        order:2;
    }

    .movie-list-item{
        width:100%;
        min-width:0;
        text-align:center;
    }

    .movie-card{
        grid-template-columns:1fr;
        padding:18px;
        gap:18px;
        max-width:360px;
        margin:0 auto;
    }

    .movie-card img,
    .poster-link,
    .no-poster{
        width:100%;
        max-width:170px;
        margin:0 auto;
    }

    .movie-info{
        text-align:center;
        align-items:center;
    }

    .movie-info h2{
        font-size:1.45rem;
    }

    .movie-info p{
        font-size:0.9rem;
        line-height:1.3;
        margin-top:-5px;
    }

    #randomFilters{
        height:auto;
        flex-wrap:wrap;
        padding:14px 64px 14px 14px;
        gap:10px;
    }

    #genreFilter{
        flex:1 1 100%;
    }

    #actorFilter,
    #directorFilter{
        flex:1 1 100%;
    }

    #yearFrom,
    #yearTo,
    #rtFilter{
        flex:1 1 calc(50% - 10px);
        width:auto;
    }

}