/* =========================================
    Start Search Section
===========================================*/
.search-section {
    background-color: var(--second-color);
    padding-top: 70px;
    padding-bottom: 70px;
}

.search-header {
    margin-bottom: 40px;
}

.search-title {
    font-size: 55px;
    font-weight: 400;
    color: var(--main-color);
    margin-bottom: 10px;
}

.search-links a {
    color: var(--main-color);
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    margin: 0 10px;
}

.search-filters {
    margin-bottom: 40px;
    position: sticky;
    top: 50px;
    z-index: 200;
    background: var(--second-color);
}

.filter-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    font-size: 14px;
    color: var(--main-color);
}

.reset-filters {
    color: var(--main-color);
    text-decoration: underline;
}

.filter-dropdowns .form-select {
    border-radius: 50px;
    /* Rounded corners */
    border-color: var(--main-color);
    /* Border color */
    color: var(--main-color);
    background-color: transparent;
    padding: 10px 20px;
    margin-bottom: 15px;
    -webkit-appearance: none;
    /* Hide default arrow */
    -moz-appearance: none;
    /* Hide default arrow */
    appearance: none;
    /* Hide default arrow */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%232E2F31' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    /* Custom arrow SVG */
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    cursor: pointer;
}

.filter-dropdowns .form-select option {
    color: var(--main-color);
    background-color: var(--second-color);
}

/* Style for the dropdown menu when open */
.filter-dropdowns .form-select:focus {
    outline: none;
    box-shadow: none;
    /* Remove focus box shadow */
    border-color: var(--main-color);
    /* Keep border color on focus */
}

/* Note: Styling the actual dropdown *list* (<option> elements in the opened state) consistently across browsers with pure CSS is limited. These styles might only apply partially or not at all depending on the browser. JavaScript is usually required for full control over the opened dropdown list appearance. */
/* However, we can style the options themselves. */
.filter-dropdowns .form-select option {
    padding: 10px 20px;
    /* Add padding to options */
    background-color: var(--second-color);
    /* Default option background */
    color: var(--main-color);
    /* Default option text color */
}

.filter-dropdowns .form-select option:checked,
/* Selected option */
.filter-dropdowns .form-select option:hover {
    /* Option on hover (may not work consistently) */
    background-color: var(--main-color);
    /* Background on hover/selected */
    color: var(--white-color);
    /* Text color on hover/selected */
}

.search-results {
    /* Leverage Bootstrap grid for column layout */
    margin-top: 20px;
}


.tour-card {
    height: 400px;
    /* border-radius: 10px; */
    overflow: hidden;
    position: relative;
}

.tour-card img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    filter: brightness(0.5);
}

.tour-card:hover img {
    filter: brightness(1);
}

.tour-card-content {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: var(--white-color);
    text-align: center;
    gap: 10px;
}

.tour-duration {
    color: var(--white-color);
    font-size: 18px;
    font-weight: 400;
}

.tour-time,
.tour-price {
    color: var(--white-color);
    font-size: 18px;
    font-weight: 500;
}

.tour-title {
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 500;
    text-transform: capitalize;
    color: var(--white-color);
    font-size: 26px;
}

.tour-price .tour-price-title {
    color: var(--main-color);
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
    font-family: var(--font-heading);
    display: block;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.waiting-label,
.available-label,
.limited-label {
    position: absolute;
    top: 0;
    right: 0;
    color: var(--white-color);
    padding: 0.75rem;
    z-index: 20;
}
.limited-label{
background-color: #F4AC38;
}
.waiting-label {
    background-color: #376095;
}

.available-label {
    background-color: #90AD6C;
}

.waiting-label span,
.available-label span,
.limited-label span {
    text-transform: uppercase;
    letter-spacing: 1px;
}


/* ================================================
    End Search Section
==================================================*/
.escorted-link,
.tailor-Made-link,
.search-icon,
.call-tag {
    color: var(--main-color)
}

.navbar-toggler-icon .bar1,
.navbar-toggler-icon .bar2,
.navbar-toggler-icon .bar3 {
    background-color: var(--main-color);
}