/* 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;
}

#movieResults.loading-full{
    grid-column:1 / -1;
    max-width:none;
}

#movieResults.loading-full .digital-loader{
    width:100%;
    min-height:260px;
}

/* 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;
    }

    #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;
    }

}