:root {



    --tm-primary-color: #FFD700;

    --tm-secondary-color: #0D3A48;

    --tm-accent-color: #0A9396;

    --tm-white-color: #FFFFFF;

    --tm-black-color: #000000;

}



.tm-filter-sidebar {

    background: var(--tm-white-color);

    /* border-radius: 12px; */

    padding: 25px;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

    margin-bottom: 30px;

}



.tm-filter-header {

    font-size: 24px;

    font-weight: 700;

    color: #2d3748;

    margin-bottom: 25px;

    padding-bottom: 15px;

    border-bottom: 2px solid #e2e8f0;

}

.tm-filter-header i{

    font-size: 18px;

    color: var(--tm-accent-color);

}

.tm-filter-section {

    margin-bottom: 30px;

}



.tm-filter-section-title {

    font-size: 16px;

    font-weight: 600;

    color: #4a5568;

    margin-bottom: 15px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}



.tm-filter-count {

    background: var(--tm-accent-color);

    color: var(--tm-white-color);

    border-radius: 12px;

    padding: 2px 8px;

    font-size: 12px;

    font-weight: 500;

}



.tm-filter-options {

    display: flex;

    flex-direction: column;

    gap: 8px;

}



.tm-filter-option {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 10px 12px;

    border-radius: 8px;

    transition: all 0.3s ease;

    cursor: pointer;

    border: 1px solid #e2e8f0;

}



.tm-filter-option:hover {

    background: #f7fafc;

    border-color: #cbd5e0;

}



.tm-filter-option.active {

    background: #ebf8ff;

    border-color: var(--tm-accent-color);

    border-left: 3px solid var(--tm-accent-color);

}



.tm-filter-option-label {

    font-size: 14px;

    color: #4a5568;

    font-weight: 500;

}



.tm-filter-option.active .tm-filter-option-label {

    color: #2d3748;

    font-weight: 600;

}



.tm-filter-option-count {

    background: #e2e8f0;

    color: var(--tm-accent-color);

    border-radius: 8px;

    padding: 2px 8px;

    font-size: 11px;

    font-weight: 500;

}



.tm-filter-option.active .tm-filter-option-count {

    background: #e2e8f0;

    color: var(--tm-accent-color);



}



.tm-active-filters {

    background: var(--tm-white-color);

    border-radius: 12px;

    padding: 20px;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);

    margin-bottom: 20px;

    border: 1px solid #e2e8f0;

}



.tm-active-filters-title {

    font-size: 16px;

    font-weight: 600;

    color: #2d3748;

    margin-bottom: 15px;

}



.tm-active-filters-list {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

}



.tm-active-filter-item {

    background: #ebf8ff;

    border: 1px solid var(--tm-accent-color);

    border-radius: 20px;

    padding: 6px 12px;

    font-size: 13px;

    color: #4f8f91;

    display: flex;

    align-items: center;

    gap: 8px;

}



.tm-active-filter-remove {

    background: none;

    border: none;

    color: var(--tm-secondary-color);

    cursor: pointer;

    font-size: 14px;

    padding: 0;

    width: 16px;

    height: 16px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

}



.tm-active-filter-remove:hover {

    background: var(--tm-accent-color);

    color: var(--tm-white-color);

}



.tm-clear-all-filters {

    background: var(--tm-secondary-color);

    color: var(--tm-white-color);

    border: none;

    border-radius: 6px;

    padding: 8px 16px;

    font-size: 13px;

    cursor: pointer;

    margin-top: 10px;

    transition: background 0.3s ease;

}



.tm-clear-all-filters:hover {

    background: var(--tm-accent-color);

}



.tm-duration-slider-container {

    padding: 10px 0;

}



.tm-duration-value {

    font-size: 14px;

    font-weight: 600;

    color: #2d3748;

    margin-bottom: 15px;

    text-align: center;

    background: #f7fafc;

    padding: 8px 12px;

    border-radius: 6px;

    border: 1px solid #e2e8f0;

}



.ui-slider {

    position: relative;

    background: #e2e8f0;

    height: 6px;

    border-radius: 3px;

    margin: 15px 0;

}



.ui-slider-range {

    background: var(--tm-accent-color);

    height: 100%;

    border-radius: 3px;

    position: absolute;

}



.ui-slider-handle {

    position: absolute;

    width: 18px;

    height: 18px;

    background: var(--tm-accent-color);

    border-radius: 50%;

    border: 2px solid var(--tm-white-color);

    cursor: pointer;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

    top: -6px;

    margin-left: -9px;

}



.ui-slider-handle:hover {

    background: var(--tm-accent-color);

}



/* Tour Duration */

.ui-widget.ui-widget-content {

    border: 1px solid var(--tm-accent-color) !important;

}



.ui-widget-header {

    background: var(--tm-accent-color) !important;

}



.ui-state-hover,

.ui-widget-content .ui-state-hover:hover,

.ui-state-default,

.ui-widget-content .ui-state-default:hover {

    background: var(--tm-secondary-color);

    border: 1px solid var(--tm-secondary-color);

}



.ui-state-hover,

.ui-widget-content .ui-state-hover:active,

.ui-state-default,

.ui-widget-content .ui-state-default:active {

    background: var(--tm-secondary-color);

    border: 1px solid var(--tm-secondary-color);

}











/********************************Hotel*/

:root {

    --tm-primary-color: #FFD700;

    --tm-secondary-color: #0D3A48;

    --tm-accent-color: #0A9396;

    --tm-white-color: #FFFFFF;

    --tm-black-color: #000000;

}



/* Hotel Filter Sidebar */

.tm-hotel-filter-sidebar {

    background: var(--tm-white-color);

    border-radius: 12px;

    padding: 25px;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

    margin-bottom: 30px;

}



.tm-hotel-filter-header {

    font-size: 24px;

    font-weight: 700;

    color: var(--tm-secondary-color);

    margin-bottom: 25px;

    padding-bottom: 15px;

    border-bottom: 2px solid #e2e8f0;

    text-align: center;

}



.tm-hotel-filter-section {

    margin-bottom: 30px;

}



.tm-hotel-filter-section-title {

    font-size: 16px;

    font-weight: 600;

    color: #4a5568;

    margin-bottom: 12px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}



.tm-hotel-filter-count {

    background: var(--tm-accent-color);

    color: var(--tm-white-color);

    border-radius: 12px;

    padding: 4px 10px;

    font-size: 12px;

    font-weight: 600;

    min-width: 30px;

    text-align: center;

}



/* Filter Selects */

.tm-hotel-filter-select {

    width: 100%;

    padding: 12px 16px;

    border: 2px solid #e2e8f0;

    border-radius: 8px;

    font-size: 14px;

    color: #4a5568;

    background: white;

    transition: all 0.3s ease;

    appearance: none;

    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5568' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");

    background-repeat: no-repeat;

    background-position: right 16px center;

    background-size: 16px;

}



.tm-hotel-filter-select:focus {

    outline: none;

    border-color: var(--tm-accent-color);

    box-shadow: 0 0 0 3px rgba(10, 147, 150, 0.1);

}



.tm-hotel-filter-select:disabled {

    background-color: #f7fafc;

    cursor: not-allowed;

    opacity: 0.7;

}



/* Price Slider */

.tm-hotel-price-slider-container {

    padding: 10px 0;

}



.tm-hotel-price-value {

    font-size: 16px;

    font-weight: 600;

    color: var(--tm-secondary-color);

    margin-bottom: 15px;

    text-align: center;

    background: #f8fafc;

    padding: 10px 16px;

    border-radius: 8px;

    border: 2px solid #e2e8f0;

}



.tm-hotel-price-inputs {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 20px;

}



.tm-hotel-price-inputs input {

    flex: 1;

    padding: 10px 12px;

    border: 2px solid #e2e8f0;

    border-radius: 6px;

    font-size: 14px;

    color: #4a5568;

    text-align: center;

    transition: all 0.3s ease;

}



.tm-hotel-price-inputs input:focus {

    outline: none;

    border-color: var(--tm-accent-color);

    box-shadow: 0 0 0 3px rgba(10, 147, 150, 0.1);

}



.tm-hotel-price-inputs span {

    color: #718096;

    font-weight: 500;

}



/* jQuery UI Slider */

#tm-hotel-price-slider {

    margin: 20px 0;

}



#tm-hotel-price-slider.ui-slider {

    position: relative;

    background: #e2e8f0;

    height: 6px;

    border-radius: 3px;

    border: none;

}



#tm-hotel-price-slider .ui-slider-range {

    background: var(--tm-accent-color);

    height: 100%;

    border-radius: 3px;

    position: absolute;

}



#tm-hotel-price-slider .ui-slider-handle {

    position: absolute;

    width: 20px;

    height: 20px;

    background: var(--tm-accent-color);

    border-radius: 50%;

    border: 3px solid var(--tm-white-color);

    cursor: pointer;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);

    top: -8px;

    margin-left: -10px;

    transition: all 0.2s ease;

}



#tm-hotel-price-slider .ui-slider-handle:hover,

#tm-hotel-price-slider .ui-slider-handle:focus {

    background: var(--tm-secondary-color);

    transform: scale(1.1);

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);

}



#tm-hotel-price-slider .ui-state-active {

    background: var(--tm-secondary-color);

}



/* Active Filters */

.tm-hotel-active-filters {

    background: #f8fafc;

    border-radius: 12px;

    padding: 20px;

    margin-bottom: 25px;

    border: 2px solid #e2e8f0;

}



.tm-hotel-active-filters-title {

    font-size: 16px;

    font-weight: 600;

    color: var(--tm-secondary-color);

    margin-bottom: 15px;

    display: flex;

    align-items: center;

    gap: 8px;

}



.tm-hotel-active-filters-title:before {

    content: '';

    display: block;

    width: 6px;

    height: 20px;

    background: var(--tm-accent-color);

    border-radius: 3px;

}



.tm-hotel-active-filters-list {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 15px;

}



.tm-hotel-active-filter-item {

    background: white;

    border: 2px solid var(--tm-accent-color);

    border-radius: 20px;

    padding: 8px 16px;

    font-size: 14px;

    color: var(--tm-secondary-color);

    display: flex;

    align-items: center;

    gap: 8px;

    font-weight: 500;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

}



.tm-hotel-active-filter-item i {

    color: var(--tm-accent-color);

    font-size: 12px;

}



.tm-hotel-active-filter-remove {

    background: transparent;

    border: none;

    color: #718096;

    cursor: pointer;

    font-size: 16px;

    padding: 0;

    width: 18px;

    height: 18px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.2s ease;

    margin-left: 4px;

}



.tm-hotel-active-filter-remove:hover {

    background: #fed7d7;

    color: #e53e3e;

}



.tm-hotel-clear-all-filters {

    background: transparent;

    color: #718096;

    border: 2px solid #e2e8f0;

    border-radius: 6px;

    padding: 8px 16px;

    font-size: 14px;

    font-weight: 500;

    cursor: pointer;

    transition: all 0.3s ease;

    width: 100%;

}



.tm-hotel-clear-all-filters:hover {

    background: #fed7d7;

    color: #e53e3e;

    border-color: #fed7d7;

}



/* Filter Action Buttons */

.tm-hotel-filter-actions {

    display: flex;

    flex-direction: column;

    gap: 12px;

    margin-top: 30px;

}



.tm-hotel-apply-filters {

    background: var(--tm-accent-color);

    color: var(--tm-white-color);

    border: none;

    border-radius: 8px;

    padding: 14px 20px;

    font-size: 16px;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s ease;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    width: 100%;

}



.tm-hotel-apply-filters:hover {

    background: var(--tm-secondary-color);

    transform: translateY(-2px);

    box-shadow: 0 6px 12px rgba(10, 147, 150, 0.2);

}



.tm-hotel-reset-filters {

    background: transparent;

    color: #718096;

    border: 2px solid #e2e8f0;

    border-radius: 8px;

    padding: 12px 20px;

    font-size: 14px;

    font-weight: 500;

    cursor: pointer;

    transition: all 0.3s ease;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    width: 100%;

}



.tm-hotel-reset-filters:hover {

    background: #f7fafc;

    color: var(--tm-secondary-color);

    border-color: var(--tm-secondary-color);

}



/* Responsive Design */

@media (max-width: 768px) {

    .tm-hotel-filter-sidebar {

        padding: 20px;

    }

    

    .tm-hotel-filter-header {

        font-size: 20px;

        margin-bottom: 20px;

    }

    

    .tm-hotel-filter-section {

        margin-bottom: 25px;

    }

    

    .tm-hotel-price-inputs {

        flex-direction: column;

        gap: 8px;

    }

    

    .tm-hotel-price-inputs input {

        width: 100%;

    }

    

    .tm-hotel-active-filters-list {

        flex-direction: column;

    }

    

    .tm-hotel-active-filter-item {

        justify-content: space-between;

    }

}



/* Loading State */

.tm-hotel-loading {

    display: inline-block;

    width: 20px;

    height: 20px;

    border: 2px solid rgba(255, 255, 255, 0.3);

    border-radius: 50%;

    border-top-color: var(--tm-white-color);

    animation: tm-hotel-spin 1s ease-in-out infinite;

}



@keyframes tm-hotel-spin {

    to { transform: rotate(360deg); }

}



/* Icon Colors */

.fa-search, .fa-redo, .fa-globe, .fa-city, .fa-tag {

    color: var(--tm-accent-color);

}



.fa-search {

    margin-right: 8px;

}



/* Custom scrollbar for select dropdown */

.tm-hotel-filter-select option {

    padding: 10px;

}



.tm-hotel-filter-select::-webkit-scrollbar {

    width: 8px;

}



.tm-hotel-filter-select::-webkit-scrollbar-track {

    background: #f1f1f1;

    border-radius: 4px;

}



.tm-hotel-filter-select::-webkit-scrollbar-thumb {

    background: var(--tm-accent-color);

    border-radius: 4px;

}



.tm-hotel-filter-select::-webkit-scrollbar-thumb:hover {

    background: var(--tm-secondary-color);

}