/* search.css */
.search-page {

    padding: 20px;

    .nav-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        margin-bottom: 20px;
    }

    .nav-tabs::-webkit-scrollbar {
        display: none;
    }

    .nav-item {
        flex-grow: 1;
        text-align: center;
    }

    .nav-link {
        padding: 4px;
        /* font-size: 1rem; */
    }

    .tab-content {
        padding: 20px;
        border-top: none;
        overflow-y: auto;
    }

    .form-group {
        margin-bottom: 20px;
    }

    .clear-selection {
        background-color: var(--secondary-color);
        color: var(--white-color);
        border: none;
        padding: 5px 10px;
        border-radius: 4px;
        /* font-size: 0.9rem; */
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    .clear-selection:hover {
        background-color: var(--primary-color);
    }

    .search-box-container {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .search-bar-wrapper {
        display: flex;
        align-items: flex-start;
        /* Align to the top */
        border: 1.5px solid var(--secondary-color);
        border-radius: 28px;
        overflow: hidden;
        width: 600px;
        /* padding: 2px; */
    }

    .search-bar-wrapper:focus-within {
        border: 1.5px solid black;
    }

    #searchBox {
        flex: 1;
        padding: 14px 0px 0 16px;
        /* font-size: 16px; */
        border: none;
        outline: none;
        resize: none;
        overflow-y: auto;
        line-height: 1;
        scrollbar-width: none;
        /* For Firefox */
        -ms-overflow-style: none;
        /* For IE and Edge */

    }

    #searchBox::-webkit-scrollbar {
        display: none;
        /* For Chrome, Safari, and Opera */
    }


    .search-options {
        display: flex;
        align-items: center;
        flex-shrink: 0;
    }

    .search-options button {
        background-color: transparent;
        border: none;
        padding: 6px 8px;
        cursor: pointer;
        outline: none;
        transition: background-color 0.3s ease;
        border-radius: 50%;
        margin: 5px 4px 4px 0;

    }
    .search-options #searchButton{
        margin: 5px 12px 4px 0;
    }

    #micButton {
        right: 50px;
    }

    .search-options button i {
        /* font-size: 18px; */
        color: var(--primary-color);
    }

    .search-options button:hover {
        background-color: #dfdede;
    }


    .results-section {
        margin-top: 30px;
    }

    #resultsContainer {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .media-card {
        margin-bottom: 20px;
        flex: 1 1 calc(33.333% - 20px);
        box-sizing: border-box;
        position: relative;
        cursor: pointer;
        transition: transform 0.2s ease;
        max-width: 32.53%;
    }

    .media-card:hover {
        transform: scale(1.05);
    }

    .media-card img {
        width: 100%;
        height: 250px;
        object-fit: cover;
        object-position: top;
    }

    .icon-overlay {
        position: absolute;
        top: 10px;
        right: 10px;
        background: rgba(0, 0, 0, 0.7);
        color: var(--white-color);
        padding: 5px 10px;
        border-radius: 5px;
    }

    .card-body {
        background-color: var(--background-color);
        padding: 20px;
        border-top: 1px solid #dee2e6;
        /* border-radius: 0 0 10px 10px; */
    }

    .card-title {
        /* font-size: 1rem; */
        font-weight: bold;
        color: var(--accent-color);
    }

    .card-date {
        /* font-size: 0.9rem; */
        color: var(--primary-color);
        /* text-transform: uppercase; */
        text-align: right;
    }

    .rtl-text {
        direction: rtl;
        text-align: right;
    }

    .card-event i,
    .card-people i,
    .card-themes i {
        color: var(--primary-color);
    }

    .card-date a,
    .card-event a,
    .card-people a,
    .card-themes a {
        color: var(--primary-color);
        text-decoration: none;
        transition: color 0.2s ease;
    }

    .card-date a:hover,
    .card-event a:hover,
    .card-people a:hover,
    .card-themes a:hover {
        color: var(--secondary-color);
        text-decoration: underline;
    }

    .error-message {
        padding: 15px;
        margin-bottom: 20px;
        border-radius: 4px;
        background-color: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
        display: none;
        text-align: center;
    }

    .date-range {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 10px;
    }

    .form-group {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 5px;
        margin-bottom: 10px;
    }

    .form-group label {
        /* font-size: 14px; */
        font-weight: bold;
    }

    .form-group select,
    .form-group input {
        border-radius: 5px;
        border: 1px solid #ccc;
        /* font-size: 16px; */
    }

    #clearAllButton {
        background-color: var(--primary-color);
        /* margin-top: 20px; */
        color: var(--white-color);
        width: 40%;
        /* padding: 8px 15px;
        border-radius: 4px; */
        border: none;
        /* font-size: 1rem; */
        cursor: pointer;
        transition: background-color 0.3s ease;
        /* display: block; */
        /* margin-bottom: 20px; */
    }

    #clearAllButton:hover {
        background-color: var(--secondary-color);
    }

    #moreResultsButton {
        background-color: var(--primary-color);
        margin-top: 20px;
        width: 100%;
        border: none;
    }

    #moreResultsButton:hover {
        background-color: var(--secondary-color);
        border: none;
    }
      /* advanced search */
      .searchLabel {
        padding: 4px 8px;
        border: 1px solid var(--accent-color);
        border-radius: 5px;
        margin: 5px;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    .searchLabel.selected {
        background-color: var(--primary-color);
        border: 1px solid var(--primary-color);
        color: var(--white-color);
    }

    .searchLabel i {
        color: var(--accent-color);
    }

    .searchLabel.selected i {
        color: var(--white-color);
    }

    .xicon {
        width: 14px;
        height: 14px;
        transition: all 0.3s ease;
        /* filter: grayscale(100%) brightness(0%); */

    }

    .selected .xicon {
        /* filter: none; */
        width: 14px;
        height: 14px;
        filter: invert(1) grayscale(100%);
    }


    /* #advanceSearchBox {
        font-size: 16px;  
    } */

    #advanceSearchBox::-webkit-scrollbar {
        display: none;
        /* For Chrome, Safari, and Opera */
    }

    #advancedSearchButton {
        background-color: var(--primary-color);
        color:var(--white-color);
        border: none;
        width: 40%;
    }

    #advancedSearchButton:hover {
        background-color: var(--secondary-color);
        border: none;
        color:var(--white-color);
    }

    .serchButtons {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        margin-top: 1.5rem;
    }

    /* Adjust suggestions box to appear below the input */
    .suggestions {
        border: 1px solid #ccc;
        max-height: 150px;
        overflow-y: auto;
        display: none;
        /* Hidden initially */
        position: relative;
        z-index: 2000;
        background-color:var(--white-color);
        width: 100%;
    }

    .suggestion-item {
        padding: 8px;
        cursor: pointer;
    }

    .suggestion-item:hover {
        background-color: #007bff;
        color:var(--white-color);
    }

    /* Position the suggestion box relative to the input */
    .form-group {
        position: relative;
    }

    .form-group input:focus {
        outline: none;
        border: 1px solid black;
        box-shadow: none;
    }

    .form-group #updatedWithin:focus {
        outline: none;
        border: 1px solid black;
        box-shadow: none;
    }

    .form-select option:disabled {
        color: gray;
    }


    /* adding chips */
    /* Style for the chip container */
    .chip-box-wrapper {
        display: flex;
        flex-direction: column;
        /* Stack chips and select vertically */
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 4px;
        background-color: var(--background-color);
        margin-bottom: 5px;
        /* Add some space below chips */
    }

    .chip-box {
        display: flex;
        flex-wrap: wrap;
        align-items: center;

    }

    /* Basic chip style */
    .chip {
        background-color: var(--primary-color);
        border-radius: 16px;
        padding: 5px 10px;
        margin-right: 5px;
        margin-bottom: 5px;
        display: inline-flex;
        align-items: center;
        /* font-size: 14px; */
        color:var(--white-color);
    }

    /* Chip delete icon */
    .chip i {
        margin-left: 8px;
        color: var(--white-color);
        cursor: pointer;
    }

    /* Input fields for chip entry */
    .chip-input {
        border: none !important;
        outline: none;
        flex-grow: 1;
        padding: 5px;
        /* font-size: 14px; */
        min-width: 150px;
    }

    #peopleInput {
        max-width: 100% !important;
    }
  
    #toggleSearchLink {
        /* font-size: 1rem; */
        /* color: #0d6efd; */
        color: var(--primary-color);
        font-weight: bold;

    }

    #toggleSearchLink:hover {
        /* text-decoration: underline; */
        color: var(--accent-color);
    }

    .select2-selection__choice {
        display: none !important;
    }

    .select2-container--default .select2-selection--multiple {
        border: none !important;
    }
    .select2-search__field{
        border: none !important;
    }
    .toggle-link-container {
        display: flex;
        justify-content: flex-end;
    }

    .simple-adv-search {
        max-width: 50%;
    }
  
    @media (max-width: 768px) {
        .simple-adv-search {
            max-width: 100%;
        }

        .media-card {
            flex: 1 1 100%;
            max-width: 100%;
        }

        #moreResultsButton {
            width: 100%;
            margin: 0;
        }

        .search-bar-wrapper {
            max-width: 100%;
        }

        .search-tabs .nav-link {
            /* font-size: 1rem; */
            padding: 8px;
        }

        .collapsible {
            padding: 8px;
            /* font-size: 0.9rem; */
        }
        .tab-content {
            padding: 20px 0;
        }

        /* .form-group select,
        .form-group input {
            font-size: 14px;
        } */

        .toggle-link-container {
            max-width: 100%;
            display: flex;
            justify-content: flex-end;
        }
        #toggleSearchLink {
            /* font-size: 1rem; */
            color: var(--primary-color);
    
        }
        #toggleSearchLink:hover {
            /* text-decoration: underline; */
            color: var(--primary-color);
        }
        /* #searchBox {
            font-size: 14px;
            line-height: 1.2;
            max-height: 150px;
        } */
    }

    /* Tablets */
    @media (min-width: 768px) and (max-width: 991px) {
        .toggle-link-container {
            max-width: 92%;
            display: flex;
            justify-content: flex-end;
        }
        #toggleSearchLink {
            /* font-size: 1rem; */
            color: var(--primary-color);
    
        }
        #toggleSearchLink:hover {
            /* text-decoration: underline; */
            color: var(--primary-color);
        }
    }

    .book-card-container img {
        width: 100%;
        height: 250px;
        object-fit: cover;
        object-position: top;
    }

    p {
        text-align: left;
    }

    .book-thumbnail,
    .book-title {
        cursor: pointer;
        font-weight: bold;
    }

}