/*  main movie page setup -
    title, desc, search bar
    search bar -> enter search, subgenre/rating/platform/year drop downs
    bubble styling
    page number styling
*/
/* heading info - 'Horror Films' */
.heading-container {
    margin-left: 10px;
}

.heading-container h1 {
    margin-top: -10px;
    margin-bottom: 0px;
    }

.heading-container p { 
font-size: 15px; 
margin-top: 0px;
}


/* search bar  */
.search-bar-container {
/* flex-direction: column;  */
margin-left: 10px;
display: flex; 
gap: 5px; 

}

.search-container {
    position: relative;
    display: inline-block;
    width: 400px;
}

.search-icon {
    position: absolute;
    left: 10px; 
    top: 50%; 
    transform: translateY(-50%);
    font-size: 20px;
    color: #666; 
    pointer-events: none; 
}

#search-input {
    font-family: 'Poppins', sans-serif;
    color: #f0f6fc;
    background-color: #000000;
     padding: 5px 30px 5px 35px;  /*padding for icon in search bar*/
    font-size: 1rem;
    border-radius: 5px;
    border: 1px solid #818181;
    width: 100%; 
    height: 37px; 
    box-sizing: border-box; 
}

/* fix! */
#clear-search {
    position: absolute;
    right: 0px; 
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 20px; 
    color: #818181;
    display: none; /* initially hidden */
}

/* search bubbles */
.bubbles-container {
margin-left: 10px;
display: flex;
flex-wrap: wrap;

}

.search-bubble {
display: inline-flex;
align-items: center;
background-color: #333; 
border-radius: 16px;
padding: 4px 8px;
margin-right: 5px;
color: #f0f6fc; 
margin-top: 10px;
}

.close-bubble {
cursor: pointer;
margin-left: 8px;
font-size: 18px;
}

/* prev/next + page numbers */
/* Pagination container */
.pagination {
    font-family: 'Poppins', sans-serif;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    background: #111;
    padding: 8px 16px;
    border-radius: 999px;
    gap: 4px;
}

.page-btn {
    background-color: transparent;
    color: white;
    border: none;
    padding: 8px 12px;
    font-size: 0.95rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.page-btn:hover:not(:disabled) {
    background-color: #242323;
}

.page-btn.active {
    background-color: white;
    color: #1c2a3a;
    font-weight: bold;
}

.page-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.special-btn {
    background-color: #313131;
    color: white;
    font-weight: bold;
}

.special-btn:hover:not(:disabled) {
    background-color: #242323;
}

.pagination-ellipsis {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #aaa;
    font-size: 1.1rem;
    padding: 0 8px;
    user-select: none;
}

.pagination-summary {
    color: #aaa;
    font-size: 0.9rem;
    margin-left: 10px;
}


/*  drop down menus */
.dropdown-container {
    display: flex; 
    align-items: center;
}

#platformDropdownBtn:focus,
#yearDropdownBtn:focus,
#ratingDropdownBtn:focus,
#subgenreDropdownBtn:focus {
outline: none; 
border: 1px solid #f1f1f1;
}

#subgenreDropdownContent li:hover,
.yearDropdown-content a:hover,
.platform-dropdown-content li:hover,
.rating-dropdown-content li:hover {
background-color: #464c55;
}

.show {
display: block;
}

/* subgenre dropdown button styles */
#subgenreDropdownBtn {
font-family: 'Poppins', sans-serif; 
background-color: #000000; 
color: #f0f6fc;
border: 1px solid #252525;
border-radius: 3px;
padding: 5px; 
font-size: 1rem; 
width: 130px; 
margin-right: 5px;
position: relative; 
padding-right: 25px; 
height: 38px;
cursor: pointer;
text-align: left;
padding-right: 25px;

}

#subgenreDropdownBtn::after {
content: '';
position: absolute; 
top: 50%; 
right: 5px; 
transform: translateY(-50%); 
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #f0f6fc;
}

.subgenre-dropdown {
position: relative;
display: inline-block;
}

#subgenreDropdownContent {
display: none;
position: absolute;
background-color: #000000; 
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
width: 135px; 
border-radius: 3px;
padding: 0; 
margin: 0;
list-style-type: none;
max-height: 388px;
overflow-y:scroll; 

}

#subgenreDropdownContent li {
color: #f0f6fc;
padding: 5px;
text-decoration: none;
justify-content: center; 
align-items: center;
cursor: pointer;
text-align: left;
}

/*  rating drop down  */
#ratingDropdownBtn {
font-family: 'Poppins', sans-serif; 
background-color: #000000; 
color: #f0f6fc;
border: 1px solid #252525;
border-radius: 3px;
padding: 5px; 
font-size: 1rem; 
width: 85px;
margin-right: 5px;
position: relative; 
padding-right: 25px;
height: 38px;
cursor: pointer;
text-align: left;
}

#ratingDropdownBtn::after {
content: '';
position: absolute; 
top: 50%; 
right: 5px; 
transform: translateY(-50%); 
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #f0f6fc;
}

.rating-dropdown {
position: relative;
display: inline-block;
}

.rating-dropdown-content {
display: none;
position: absolute;
background-color: #000000;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
width: 90px;
border-radius: 3px;
padding: 0; 
margin: 0;
list-style-type: none; 
text-align: left;
}

.rating-dropdown-content li {
color: #f0f6fc;
padding: 5px;
text-decoration: none;
display: flex; 
justify-content: center; 
align-items: center;
cursor: pointer;
text-align: left;
flex-direction: column; 
align-items: flex-start;
}

/*  platform drop down  */
#platformDropdownBtn {
font-family: 'Poppins', sans-serif; 
background-color: #000000; 
color: #f0f6fc;
border: 1px solid #252525;
border-radius: 3px;
padding: 5px; 
font-size: 1rem; 
width: 115px;
margin-right: 5px;
position: relative; 
padding-right: 25px;
height: 38px;
cursor: pointer;
text-align: left;
}

#platformDropdownBtn::after {
content: '';
position: absolute; 
top: 50%; 
right: 5px; 
transform: translateY(-50%); 
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #f0f6fc;
}

.platform-dropdown {
position: relative;
display: inline-block;
}

.platform-dropdown-content {
display: none;
position: absolute;
background-color: #000000;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
width: 115px;
border-radius: 3px;
padding: 0; 
margin: 0;
list-style-type: none; 
text-align: left;
max-height: 388px;
overflow-y: scroll; 
}

.platform-dropdown-content li {
color: #f0f6fc;
padding: 5px;
text-decoration: none;
display: flex; 
justify-content: center; 
align-items: center;
cursor: pointer;
text-align: left;
flex-direction: column; 
align-items: flex-start;
}

/* year drop down  */
#yearDropdownBtn {
font-family: 'Poppins', sans-serif; 
background-color: #000000; 
color: #f0f6fc;
border: 1px solid #252525;
border-radius: 3px;
padding: 5px; 
font-size: 1rem; 
width: 85px;
margin-right: 5px;
position: relative; 
padding-right: 25px;
height: 38px;
text-align: left;
}

#yearDropdownBtn::after {
content: '';
position: absolute; 
top: 50%; 
right: 5px; 
transform: translateY(-50%); 
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #f0f6fc;
}

.year-dropdown {
position: relative;
display: inline-block;
}

.yearDropdown-content {
display: none;
position: absolute;
background-color: #000000;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
width: 85px;
}

.yearDropdown-content a {
color: #f0f6fc;
padding: 5px;
text-decoration: none;
display: flex; 
justify-content: center; 
align-items: center;
}

.dropdown-btn {
background-color: #f0f6fc; 
border: none;
cursor: pointer;
padding: 10px; 
font-size: 16px; 
position: relative;
}