/* Disabled Submit Button */

.search-submit-btn.disabled {

    background: #e5e7eb;

    color: #9ca3af;

    cursor: not-allowed;

    transform: none;

    box-shadow: none;

}



.search-submit-btn.disabled:hover {

    background: #e5e7eb;

    transform: none;

    box-shadow: none;

}

.search-submit-btn:not(.disabled) {

    background: linear-gradient(135deg, #3b82f6, #1d4ed8);

    color: #ffffff;

    cursor: pointer;

    transform: translateY(0);

}



.search-submit-btn:not(.disabled):hover {

    background: linear-gradient(135deg, #1d4ed8, #1e40af);

    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);

}



/* Interactive indicator for selects */

.searchable-select.has-interaction .searchable-input,

.custom-select.has-interaction .select-trigger {

    border-left: 4px solid #3b82f6;

}



/* Active state for "Tất cả" options */

.searchable-option[data-value=""].selected,

.select-option[data-value=""].selected {

    background-color: #eff6ff !important;

    color: #3b82f6 !important;

    border-color: #3b82f6;

}

/* Hidden class */

.hidden {

    display: none !important;

}



/* Clear button visible state */

.group-clear:not(.hidden) {

    display: block;

}

.loaitour,

.luhanh {

    position: relative;

}

.date-input-wrapper::after,

.search-input-wrapper::after,

.loaitour::after,

.luhanh::after {

  content: "";

  position: absolute;

  top: 0;

  right: 0;

  width: 1px;

  height: 100%;

  background-color: #ccc;

}



.service-tabs {

    margin-bottom: 24px;

    border-bottom: 1px solid #e5e7eb;

}



.tabs-container {

    display: flex;

    overflow-x: auto;

    justify-content: center;

    scrollbar-width: none;

    -ms-overflow-style: none;

}



.tabs-container::-webkit-scrollbar {

    display: none;

}



.tab-item {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 0px 20px 16px;

    background: none;

    border: none;

    border-bottom: 3px solid transparent;

    cursor: pointer;

    color: #6b7280;

    font-weight: 500;

    transition: all 0.3s ease;

    white-space: nowrap;

    min-width: fit-content;

}

.group-clear {

    grid-column-start: 5;

}

.tab-item:hover {

    color: #3b82f6;

    /* background: #f8fafc; */

}



.tab-item.active {

    color: #3b82f6;

    border-bottom-color: #3b82f6;

    /* background: #f8fafc; */

}



.tab-icon {

    flex-shrink: 0;

}



/* Tab Content */

.tab-content {

    display: none;

}



.tab-content.active {

    display: block;

}



/* Feature Not Available */

.feature-not-available {

    text-align: center;

    padding: 30px 20px;

    color: #6b7280;

}



.feature-not-available h3 {

    font-size: 24px;

    color: #171717;

    margin-bottom: 8px;

}



.feature-not-available p {

    font-size: 16px;

    margin: 0;

}



/* Search Suggestions Groups */

.suggestions-group {

    border-bottom: 1px solid #f3f4f6;

}



.suggestions-group:last-child {

    border-bottom: none;

}



.suggestions-group-title {

    padding: 8px 16px;

    font-weight: 600;

    font-size: 14px;

    color: #171717;

    background: #f8fafc;

    border-bottom: 1px solid #f3f4f6;

}



/* Suggestion Location Icon */

.suggestion-location-icon {

    width: 40px;

    height: 40px;

    border-radius: 8px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-right: 12px;

    flex-shrink: 0;

}



.suggestion-thumbnail {

    width: 40px !important;

    height: 40px !important;

    border-radius: 8px;

    object-fit: cover;

    margin-right: 12px;

    flex-shrink: 0;

}



/* Responsive cho tabs */

@media (max-width: 768px) {

    .tab-item {

        padding: 12px 16px;

        font-size: 14px;

    }

    

    /* .tab-icon {

        width: 16px;

        height: 16px;

    } */

}

.container_archive_product {

   background: none;

    position: absolute;

    top: 460px;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 100%;

    z-index: 900;

}

.section-archive-product {

    padding-top: 160px;

}

.advanced-tour-search {

    /* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; */

    max-width: 1200px;

    margin: 0 auto;

    padding: 24px;

    background: #ffffff;

    border-radius: 16px;

    box-shadow: 0 5px 15px rgba(0,0,0,.35);

    font-size: 16px;

    color: #171717;

    font-weight: 500;

}

.search-input-wrapper {

    position: relative;

}

/* Main Search Row */

.search-main-row {

    display: grid;

    /* grid-template-columns: 2fr 1fr 1fr 1fr auto; */

    column-gap: 10px;

    row-gap: 20px;

    align-items: end;

    margin-bottom: 16px;

}



@media (max-width: 1024px) {

    .section-archive-product {

    padding-top: 170px;

}

    .search-main-row {

        grid-template-columns: 1fr 1fr 1fr;

        gap: 12px;

    }

    

    .search-button-wrapper {

        grid-column: 1 / -1;

    }

}



@media (max-width: 768px) {

    .search-main-row {

        grid-template-columns: 1fr;

        gap: 16px;

    }

}



/* Label Styles */

.search-label,

.date-label,

.budget-label,

.filter-label {

    display: block;

    font-weight: 700;

    color: #171717;

    font-size: 15px;

    margin-bottom: 3px;

}



.required {

    color: #ef4444;

    margin-left: 2px;

}

.no-results-icon {

    text-align: center;

}

.notfound_products {

    width: 50%;

    height: auto;

    max-width: 500px !important;

}

/* Input Base Styles - Không viền như trong ảnh */

.tour-search-input,

.tour-date-input,

.searchable-input,

.custom-select .select-text {

    width: 100%;

    font-weight: 500;

    font-size: 16px;

    border: none;

    border-radius: 6px;

    outline: none;

    transition: all 0.2s ease;

    color: #171717;

}

.tour-search-input,

.tour-date-input{

    padding-right: 20px;

}

.tour-search-input::placeholder,

.tour-date-input::placeholder,

.searchable-input::placeholder {

    color: #9ca3af;

    font-size: 14px;

}



.tour-search-input:focus,

.tour-date-input:focus,

.searchable-input:focus,

.custom-select .select-trigger:hover,

.custom-select .select-trigger:focus,

.custom-select .select-trigger.active {

    background: none;

    outline: none !important;

}



/* Search Input Container */

.search-input-container,

.wrapper_search {

    position: relative;

}



.clear-search {

    position: absolute;

    right: 16px;

    top: 50%;

    transform: translateY(-50%);

    background: none;

    border: none;

    width: 24px;

    height: 24px;

    color: white;

    cursor: pointer;

    padding: 4px;

    border-radius: 100%;

    transition: all 0.2s ease;

    background: #B1B1B1;

}



.clear-search:hover {

    background: #767676;

}



/* Date Input Container */

.date-input-wrapper {

    position: relative;

}



.calendar-icon {

    position: absolute;

    right: 16px;

    top: 50%;

    transform: translateY(-50%);

    color: #9ca3af;

    pointer-events: none;

}



/* Custom Select Styles - Không viền */

.custom-select {

    position: relative;

    padding: 3px 0px;

    width: 100%;

}



.custom-select .select-trigger {

    width: 100%;

    border: none;

    border-radius: 6px;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: space-between;

    font-size: 16px;

    transition: all 0.2s ease;

    text-align: left;

    outline: none;

}



/* .custom-select .select-trigger:hover,

.custom-select .select-trigger:focus,

.custom-select .select-trigger.active {

    background: #ffffff;

    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);

} */



.custom-select .select-text {

    color: #1f2937;

    flex: 1;

    text-align: left;

}



.custom-select .select-arrow {

    color: #9ca3af;

    transition: transform 0.2s ease;

    flex-shrink: 0;

}



.custom-select .select-trigger.active .select-arrow {

    transform: rotate(180deg);

}



.custom-select .select-options,

.searchable-select .searchable-options {

    font-size: 14px;

    position: absolute;

    top: 100%;

    left: 0;

    right: 0;

    background: #ffffff;

    border-radius: 6px;

    box-shadow: 0 3px 8px rgba(0,0,0,.24);

    z-index: 1000;

    margin-top: 8px;

    overflow: hidden;

    max-height: 200px;

    overflow-y: auto;

    display: none;

    padding: 16px;

}



.custom-select.active .select-options,

.searchable-select.active .searchable-options {

    display: flex;

    flex-direction: column;

    gap: 10px;

}



.custom-select .select-option,

.searchable-select .searchable-option {

    padding: 5px 8px;

    border-radius: 5px;

    border: 1px solid #e5e5e5;

    cursor: pointer;

    transition: all 0.2s ease;

    color: #171717;

    border-bottom: 1px solid #f3f4f6;

}



.custom-select .select-option:last-child {

    border-bottom: none;

}



.custom-select .select-option:hover,

.searchable-select .searchable-option:hover {

    background-color: #f8fafc;

    border-color: #171717;

}



.custom-select .select-option.selected,

.searchable-select .searchable-option.selected {

    background-color: #3b82f6;

    color: #ffffff;

}



/* Search Button */

.search-submit-btn {

    background: linear-gradient(135deg, #3b82f6, #1d4ed8);

    color: #ffffff;

    border: none;

    padding: 16px 24px;

    border-radius: 6px;

    cursor: pointer;

    display: flex;

    align-items: center;

    gap: 8px;

    font-weight: 600;

    font-size: 16px;

    transition: all 0.2s ease;

    /* min-width: 80px; */

    width: 100%;

    justify-content: center;

}

/* .loaitour {

    grid-column: span 2 / span 2;

    position: relative;

}



.luhanh {

    grid-column: span 2 / span 2;

    grid-column-start: 3;

} */



.search-submit-btn:hover {

    background: linear-gradient(135deg, #1d4ed8, #1e40af);

    /* transform: translateY(-1px); */

    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);

}



.search-submit-btn:active {

    transform: translateY(0);

}



/* Advanced Filters */

.advanced-filters-toggle {

    text-align: center;

    margin: 20px 0 0;

}



.toggle-advanced-btn {

    background: none;

    border: 2px solid #e5e7eb;

    padding: 12px 24px;

    border-radius: 6px;

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #171717;

    font-weight: 500;

    transition: all 0.3s ease;

}



.toggle-advanced-btn:hover {

    border-color: #3b82f6;

    background: #f8fafc;

}



.toggle-advanced-btn.active {

    background: #3b82f6;

    border-color: #3b82f6;

    color: #ffffff;

}



.toggle-advanced-btn.active .toggle-icon {

    transform: rotate(180deg);

}



.toggle-icon {

    transition: transform 0.3s ease;

}



/* Advanced Filters Panel */

.advanced-filters-panel {

    border-radius: 6px;

    margin-top: 16px;

}



.advanced-filters-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: 20px;

    align-items: end;

}



@media (max-width: 768px) {

    .advanced-filters-grid {

        grid-template-columns: 1fr;

        gap: 16px;

    }

}



/* Searchable Select */

.searchable-select {

    position: relative;

    width: 100%;

}



.searchable-input-container {

    position: relative;

    display: flex;

    align-items: center;

}



.searchable-input {

    padding-right: 48px;

}



.searchable-toggle {

    position: absolute;

    right: 16px;

    background: none;

    border: none;

    color: #9ca3af;

    cursor: pointer;

    padding: 4px;

    border-radius: 4px;

    transition: all 0.2s ease;

}



.searchable-toggle:hover {

    background: #f3f4f6;

    color: #6b7280;

}



.searchable-toggle.active .toggle-arrow {

    transform: rotate(180deg);

}



.toggle-arrow {

    transition: transform 0.2s ease;

}



.searchable-options {

    position: absolute;

    top: 100%;

    left: 0;

    right: 0;

    background: #ffffff;

    border-radius: 6px;

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);

    z-index: 1000;

    margin-top: 8px;

    max-height: 200px;

    overflow-y: auto;

    display: none;

}





.searchable-option {

    padding: 12px 16px;

    cursor: pointer;

    transition: background-color 0.2s ease;

    color: #171717;

    border-bottom: 1px solid #f3f4f6;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.searchable-option:last-child {

    border-bottom: none;

}



.searchable-option:hover {

    background-color: #f8fafc;

}



.searchable-option.selected {

    background-color: #3b82f6;

    color: #ffffff;

}



.searchable-option.hidden {

    display: none;

}



.option-count {

    font-size: 12px;

    opacity: 0.7;

}

.tour-filter-results {

    padding: 20px 0px;

}

/* Clear Filters Button */

.clear-filters-btn {

    background: #ef4444;

    color: #ffffff;

    border: none;

    padding: 10px 12px;

    border-radius: 6px;

    cursor: pointer;

    display: flex;

    align-items: center;

    gap: 8px;

    font-weight: 500;

    transition: all 0.3s ease;

    width: 100%;

    justify-content: center;

    max-width: fit-content;

    margin-left: auto;

}



.clear-filters-btn:hover {

    background: #dc2626;

    /* transform: translateY(-1px); */

    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);

}



/* Search Suggestions */

.search-suggestions {

    position: absolute;

    top: 100%;

    left: 0;

    right: 0;

    background: #ffffff;

    border-radius: 6px;

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);

    z-index: 1000;

    margin-top: 8px;

    max-height: 300px;

    overflow-y: auto;

}



.suggestion-item {

    display: flex;

    align-items: center;

    padding: 12px 16px;

    cursor: pointer;

    transition: background-color 0.2s ease;

    border-bottom: 1px solid #f3f4f6;

}



.suggestion-item:last-child {

    border-bottom: none;

}



.suggestion-item:hover,

.suggestion-item.active {

    background-color: #f8fafc;

}



.suggestion-thumbnail {

    width: 40px;

    height: 40px;

    border-radius: 8px;

    object-fit: cover;

    margin-right: 12px;

}



.suggestion-content {

    flex: 1;

}



.suggestion-label {

    font-size: 12px;

    color: #6b7280;

    margin-bottom: 2px;

}



.suggestion-name {

    font-weight: 500;

    color: #1f2937;

    margin-bottom: 2px;

}



.suggestion-count {

    font-size: 12px;

    color: #9ca3af;

}



.no-suggestions {

    text-align: center;

    padding: 40px 20px;

    color: #9ca3af;

}



/* Loading Animation */

.tour-search-loader {

    text-align: center;

    padding: 40px 20px;

    background: #ffffff;

    border-radius: 6px;

    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);

    margin: 20px 0;

}



.loader-spinner {

    width: 40px;

    height: 40px;

    margin: 0 auto 16px;

    border: 4px solid #f3f4f6;

    border-top: 4px solid #3b82f6;

    border-radius: 50%;

    animation: spin 1s linear infinite;

}



@keyframes spin {

    0% { transform: rotate(0deg); }

    100% { transform: rotate(360deg); }

}



.tour-search-loader p {

    color: #6b7280;

    font-size: 16px;

    margin: 0;

}



/* Error Message */

.tour-search-error {

    background: #ef4444;

    color: #ffffff;

    padding: 16px 20px;

    border-radius: 6px;

    margin: 20px 0;

    text-align: center;

}



.tour-search-error p {

    margin: 0;

    font-weight: 500;

}



/* Animation for panel show/hide */

.advanced-filters-panel {

    animation: slideDown 0.3s ease-out;

}



@keyframes slideDown {

    from {

        opacity: 0;

        transform: translateY(-10px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}





/* ===== TABLET & MOBILE RESPONSIVE ===== */



/* Mobile Filter Toggle */

.mobile-filter-toggle-wrapper {

    display: none;

}



.mobile-filter-toggle {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 16px 20px;

    background: #f8fafc;

    border: 2px solid #e5e7eb;

    border-radius: 10px;

    cursor: pointer;

    font-weight: 600;

    color: #374151;

    transition: all 0.3s ease;

    position: relative;

    width: 100%;

    justify-content: center;

}



.mobile-filter-toggle:hover {

    border-color: #3b82f6;

    background: #eff6ff;

    color: #3b82f6;

}



.mobile-filter-toggle.active {

    background: #3b82f6;

    border-color: #3b82f6;

    color: white;

}



.filter-badge {

    background: #ef4444;

    color: white;

    border-radius: 50%;

    width: 20px;

    height: 20px;

    font-size: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 700;

    position: absolute;

    top: -8px;

    right: -8px;

}



/* Mobile Filters Panel */

.mobile-filters-panel {

    height: 90vh;

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: white;

    z-index: 9999;

    overflow-y: auto;

    border-radius: 10px;

    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);

    animation: slideInFromBottom 0.3s ease-out;

}



.mobile-filters-panel.active {

    display: flex;

    flex-direction: column;

}



@keyframes slideInFromBottom {

    from {

        transform: translateY(100%);

    }

    to {

        transform: translateY(0);

    }

}



.mobile-filters-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 20px 24px;

    border-bottom: 1px solid #e5e7eb;

    background: #f8fafc;

    position: sticky;

    top: 0;

    z-index: 10;

}



.mobile-filters-header h3 {

    font-size: 18px;

    font-weight: 700;

    color: #171717;

    margin: 0;

}



.close-mobile-filters {

    background: none;

    border: none;

    padding: 8px;

    border-radius: 8px;

    color: #6b7280;

    cursor: pointer;

    transition: all 0.2s ease;

}



.close-mobile-filters:hover {

    background: #e5e7eb;

    color: #374151;

}



.mobile-filters-content {

    /* flex: 1; */

    padding: 24px;

    overflow-y: auto;

}



.mobile-filter-group {

    margin-bottom: 32px;

}



.mobile-filter-group h4 {

    font-size: 16px;

    font-weight: 700;

    color: #171717;

    margin-bottom: 16px;

    padding-bottom: 8px;

    border-bottom: 2px solid #e5e7eb;

}



/* Date Row Mobile */

.date-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 16px;

}



.mobile-date .tour-date-input {

    padding: 16px;

    font-size: 16px;

    border: 2px solid #e5e7eb;

    border-radius: 10px;

    background: #f8fafc;

}



.mobile-date .tour-date-input:focus {

    border-color: #3b82f6;

    background: white;

    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);

}



/* Budget Options Mobile */

.mobile-budget-options {

    display: grid;

    grid-template-columns: 1fr;

    gap: 12px;

}



.budget-option {

    display: flex;

    align-items: center;

    padding: 16px;

    border: 2px solid #e5e7eb;

    border-radius: 10px;

    cursor: pointer;

    transition: all 0.3s ease;

    background: #f8fafc;

}



.budget-option:hover {

    border-color: #3b82f6;

    background: #eff6ff;

}



.budget-option input[type="radio"] {

    margin-right: 12px;

    accent-color: #3b82f6;

    transform: scale(1.2);

}



.budget-option input[type="radio"]:checked + .option-label {

    color: #3b82f6;

    font-weight: 600;

}



.budget-option:has(input[type="radio"]:checked) {

    border-color: #3b82f6;

    background: #eff6ff;

}



/* Advanced Filters Mobile */

.advanced-filters-mobile {

    display: flex;

    flex-direction: column;

    gap: 20px;

}



.mobile-select .searchable-select {

    border: 2px solid #e5e7eb;

    border-radius: 10px;

    background: #f8fafc;

    padding: 4px;

}



.mobile-select .searchable-input {

    padding: 16px;

    font-size: 16px;

    border: none;

    background: transparent;

}



.mobile-select .searchable-input:focus {

    box-shadow: none;

}



.mobile-select .searchable-select:focus-within {

    border-color: #3b82f6;

    background: white;

    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);

}



/* Mobile Filters Footer */

.mobile-filters-footer {

    display: grid;

    grid-template-columns: 1fr 2fr;

    gap: 16px;

    padding: 20px 24px;

    border-top: 1px solid #e5e7eb;

    background: #f8fafc;

    position: sticky;

    bottom: 0;

}



.clear-all-filters {

    padding: 16px 24px;

    background: white;

    border: 2px solid #e5e7eb;

    border-radius: 10px;

    font-weight: 600;

    color: #6b7280;

    cursor: pointer;

    transition: all 0.3s ease;

}



.clear-all-filters:hover {

    border-color: #ef4444;

    color: #ef4444;

    background: #fef2f2;

}



.apply-filters {

    padding: 16px 24px;

    background: linear-gradient(135deg, #3b82f6, #1d4ed8);

    border: none;

    border-radius: 10px;

    color: white;

    font-weight: 700;

    cursor: pointer;

    transition: all 0.3s ease;

}



.apply-filters:hover {

    background: linear-gradient(135deg, #1d4ed8, #1e40af);

    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);

}



/* Desktop Advanced Filters */

.desktop-advanced-filters {

    display: contents;

}





@media screen and (min-width: 1025px) {

   .search-main-row {

    display: grid;

    grid-template-columns: repeat(12, 1fr);

    grid-template-rows: repeat(2, 1fr);

    row-gap: 16px;

    column-gap: 8px;

}

    

.search-input-wrapper.search-primary {

    grid-column: span 3 / span 3;

}



.desktop-quick-filters {

    grid-column: span 9 / span 9;

    grid-column-start: 4;

}





.desktop-quick-filters {

    display: grid;

    grid-template-columns: repeat(12, 1fr);

    gap: 5px;

}

    





.date-input-wrapper.ngayve {

    grid-column: span 4 / span 4;

    grid-column-start: 5;

}

.date-input-wrapper.ngaydi,

.date-input-wrapper.ngayve,

.budget-dropdown-wrapper {

    padding: 0px 8px;

}

.date-input-wrapper.ngaydi {

    grid-column: span 4 / span 4;

    padding: 0px;

}

.budget-dropdown-wrapper {

    grid-column: span 3 / span 3;

    grid-column-start: 9;

}



.search-button-wrapper {

    grid-column-start: 12;

}

        

.loaitour {

    grid-column: span 3 / span 3;

    grid-row-start: 2;

}



.luhanh {

    grid-column: span 3 / span 3;

    grid-column-start: 4;

    grid-row-start: 2;

}



.danhmuc {

    grid-column: span 3 / span 3;

    grid-column-start: 7;

    grid-row-start: 2;

}



.filter-group.group-clear {

    grid-column-start: 12;

    grid-row-start: 2;

}



.button_search_mb {

    display: none;

}    

.search-input-container {

    display: block;

}

    

}



/* ===== TABLET STYLES (768px - 1024px) ===== */

@media (max-width: 1024px) {

     .date-input-wrapper::after,

.search-input-wrapper::after,

.loaitour::after,

.luhanh::after {

    content: none;

}

   .flatpickr-wrapper {

        width: 100%;

    }

    .search-input-container .gr {

    flex: 1;        

    }

    .search-input-container {

        display: flex;

        flex-direction: row;

        gap: 8px;

        align-items: flex-end;

    }

    .advanced-tour-search {

        padding: 20px;

        }

    

    .search-main-row {

        grid-template-columns: 1fr;

        gap: 20px;

    }

    

    .search-primary {

        order: 1;

    }

    

    .mobile-filter-toggle-wrapper {

        display: block;

        order: 2;

    }

    

    .desktop-quick-filters {

        display: none;

    }

    

    .desktop-advanced-filters {

        display: none;

    }

    

    /* Search button in mobile panel only */

    .search-button-wrapper {

        display: none;

    }

    

    /* Tabs responsive */

    .tabs-container {

        justify-content: flex-start;

        padding: 0 4px;

    }

    

    .tab-item {

        padding: 12px 16px;

        font-size: 14px;

        min-width: auto;

        flex-shrink: 0;

    }

    

    /* .tab-icon {

        width: 18px;

        height: 18px;

    } */

}



/* ===== MOBILE STYLES (< 768px) ===== */

@media (max-width: 768px) {

   

 .container_archive_product {

    top: 370px;

 }

 .section-archive-product {

    padding-top: 200px;

 }

    .advanced-tour-search {

        padding: 16px;

        border-radius: 10px;

    }

    

    /* Make search input more prominent */

    .tour-search-input {

        padding: 18px 20px;

        font-size: 16px;

        border-radius: 10px;

        border: 2px solid #e5e7eb;

        background: #f8fafc;

    }

    

    .tour-search-input:focus {

        border-color: #3b82f6;

        background: white;

        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);

    }

    

    /* Mobile filter toggle styling */

    .mobile-filter-toggle {

        padding: 18px 24px;

        font-size: 16px;

        border-radius: 10px;

    }

    

    /* Suggestions responsive */

    .search-suggestions {

        max-height: 250px;

        border-radius: 8px;

    }

    

    .suggestion-item {

        padding: 16px;

    }

    

    .suggestion-thumbnail {

        width: 48px !important;

        height: 48px !important;

        border-radius: 8px;

    }

    

    .suggestion-location-icon {

        width: 48px;

        height: 48px;

        border-radius: 8px;

    }

    

    .suggestion-name {

        font-size: 16px;

        font-weight: 600;

    }

    

    .suggestion-count {

        font-size: 14px;

    }

    

    /* Tabs mobile optimization */

    .service-tabs {

        margin-bottom: 16px;

        border-bottom: 1px solid #e5e7eb;

    }

    

    .tabs-container {

        padding: 0 8px;

        gap: 4px;

    }

    

    .tab-item {

        padding: 12px 12px;

        font-size: 13px;

        gap: 6px;

        border-radius: 8px 8px 0 0;

    }

    

    .tab-item span {

        display: none;

    }

    

    .tab-item.active span {

        display: inline;

    }

    

    /* Only show icon for inactive tabs on mobile */

    .tab-item:not(.active) span {

        display: none;

    }

    

    /* .tab-icon {

        width: 16px;

        height: 16px;

    } */

    

    /* Mobile filters panel optimization */

    .mobile-filters-content {

        padding: 20px;

    }

    

    .mobile-filter-group {

        margin-bottom: 28px;

    }

    

    .mobile-filter-group h4 {

        font-size: 15px;

        margin-bottom: 12px;

    }

    

    .date-row {

        grid-template-columns: 1fr;

        gap: 12px;

    }

    

    .mobile-budget-options {

        gap: 10px;

    }

    

    .budget-option {

        padding: 14px;

        border-radius: 8px;

    }

    

    .advanced-filters-mobile {

        gap: 16px;

    }

    

    /* Footer buttons mobile */

    .mobile-filters-footer {

        grid-template-columns: 1fr;

        gap: 12px;

        padding: 16px 20px;

    }

    .woocommerce-result-count {
        font-size: 14px !important;
    }

    .clear-all-filters,

    .apply-filters {

        padding: 18px 24px;

        font-size: 16px;

        border-radius: 10px;

    }

}

@media (max-width: 578px) {
     .section-archive-product {padding-top: 240px;}
}

/* ===== SMALL MOBILE (< 480px) ===== */

@media (max-width: 480px) {
 .section-archive-product {

    padding-top: 220px;

 }
    .advanced-tour-search {

        margin: 8px;

        padding: 12px;

    }

    

    .mobile-filters-header {

        padding: 16px 20px;

    }

    

    .mobile-filters-content {

        padding: 16px;

    }

    

    .mobile-filters-footer {

        padding: 12px 16px;

    }

    

    /* Tabs very small screens */

    .tab-item {

        padding: 10px 8px;

        min-width: 44px; /* Touch target minimum */

    }

    

    .tab-item span {

        display: none !important;

    }

    

    .tab-item.active::after {

        content: none;

      

    }

}



/* ===== LANDSCAPE MOBILE ===== */

/* @media (max-width: 896px) and (orientation: landscape) {

    .mobile-filters-panel {

        flex-direction: row;

    }

    

    .mobile-filters-content {

        max-width: 70%;

        border-right: 1px solid #e5e7eb;

    }

    

    .mobile-filters-footer {

        max-width: 30%;

        border-top: none;

        border-left: 1px solid #e5e7eb;

        grid-template-columns: 1fr;

        align-content: start;

    }

} */



/* ===== ACCESSIBILITY & TOUCH OPTIMIZATION ===== */

@media (hover: none) and (pointer: coarse) {

    /* Touch device optimizations */

    .mobile-filter-toggle,

    .close-mobile-filters,

    .clear-all-filters,

    .apply-filters,

    .budget-option {

        min-height: 44px; /* iOS recommended touch target */

        min-width: 44px;

    }

    

    .suggestion-item {

        min-height: 60px;

    }

    

    .tab-item {

        min-height: 48px;

        min-width: 48px;

    }

}



/* High contrast mode support */

@media (prefers-contrast: high) {

    .mobile-filter-toggle,

    .budget-option,

    .mobile-date .tour-date-input,

    .mobile-select .searchable-select {

        border-width: 3px;

    }

}



/* Reduced motion support */

@media (prefers-reduced-motion: reduce) {

    .mobile-filters-panel,

    .mobile-filter-toggle,

    .budget-option,

    .apply-filters {

        animation: none;

        transition: none;

    }

}



/* Shared form inputs hidden */

.shared-form-inputs {

    display: none !important;

}



/* Desktop vs Mobile select visibility */

@media (max-width: 1024px) {

    .desktop-advanced-filters {

        display: none !important;

    }

}



@media (min-width: 1025px) {

    .mobile-filters-panel {

        display: none !important;

    }

    

    .mobile-filter-toggle-wrapper {

        display: none !important;

    }

}