/**
 * WPNearMe - Filter Bar & Recently Viewed Widget Styles
 * @package WPNearMe
 */

/* FILTER BAR */
.filter-bar {border: 1px solid var(--color-teal-1);border-radius: 10px;padding: 20px;margin-bottom: 20px;}
.filter-bar-inner {display: flex;flex-direction: column;gap: 15px;}

/* Filter Controls Row */
.filter-controls {display: flex;flex-wrap: wrap;gap: 15px;align-items: flex-end;}
.filter-group {display: flex;flex-direction: column;gap: 5px;}
.filter-label {font-size: 12px;font-weight: 600;color: var(--color-teal-4);}

/* Filter Dropdown */
.filter-dropdown {padding: 10px 14px;border: 1px solid #ddd;border-radius: 6px;font-size: 14px;min-width: 180px;background-color: #fff;cursor: pointer;transition: border-color 0.2s ease, box-shadow 0.2s ease;}
.filter-dropdown:hover {border-color: #bbb;}
.filter-dropdown:focus {outline: none;border-color: var(--color-teal-4);box-shadow: 0 0 0 3px rgba(23, 82, 96, 0.1);}

/* Filter Checkbox */
.filter-group-checkbox {justify-content: flex-end;}
.filter-checkbox {display: inline-flex;align-items: center;gap: 8px;padding: 10px 16px;border: 1px solid #ddd;border-radius: 6px;font-size: 14px;cursor: pointer;background-color: #fff;transition: all 0.2s ease;user-select: none;}
.filter-checkbox:hover {border-color: #2e7d32;background-color: #f8fff8;}
.filter-checkbox input[type="checkbox"] {display: none;}
.filter-checkbox-icon {display: flex;align-items: center;}
.filter-checkbox-icon .material-symbols-outlined {font-size: 18px;color: #999;transition: color 0.2s ease;}
.filter-checkbox:has(input:checked), .filter-checkbox.is-checked {background-color: #e8f5e9;border-color: #2e7d32;color: #2e7d32;}
.filter-checkbox:has(input:checked) .material-symbols-outlined, .filter-checkbox.is-checked .material-symbols-outlined {color: #2e7d32;}

/* Apply Filters Button */
.filter-group-submit {justify-content: flex-end;}
.button-filter {padding: 10px 24px;background-color: var(--color-teal-4);color: #fff;border: none;border-radius: 6px;font-size: 14px;font-weight: 600;cursor: pointer;transition: background-color 0.2s ease;}
.button-filter:hover {background-color: var(--color-teal-3);}
.button-filter:disabled {background-color: #ccc;cursor: not-allowed;}

/* FILTER META ROW (Active Filters + Sort) */
.filter-meta-row {display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;gap: 15px;padding-top: 15px;border-top: 1px solid #e9ecef;}

/* Active Filters */
.active-filters {display: flex;flex-wrap: wrap;gap: 8px;align-items: center;}
.filter-pill {display: inline-flex;align-items: center;gap: 6px;padding: 6px 10px;background-color: var(--color-teal-4);color: #fff;border-radius: 20px;font-size: 13px;font-weight: 500;}
.filter-pill .material-symbols-outlined {font-size: 14px;}
.filter-pill-remove {display: flex;align-items: center;justify-content: center;width: 18px;height: 18px;padding: 0;background: rgba(255,255,255,0.2);border: none;border-radius: 50%;color: #fff;font-size: 14px;line-height: 1;cursor: pointer;transition: background-color 0.2s ease;}
.filter-pill-remove:hover {background: rgba(255,255,255,0.4);}
.filter-clear-all {padding: 6px 12px;background: none;border: 1px solid #dc3545;border-radius: 20px;color: #dc3545;font-size: 13px;cursor: pointer;transition: all 0.2s ease;}
.filter-clear-all:hover {background-color: #dc3545;color: #fff;}

/* Sort Controls */
.sort-controls {display: flex;align-items: center;gap: 10px;}
.sort-label {font-size: 14px;color: #666;}
.sort-dropdown {padding: 8px 12px;border: 1px solid #ddd;border-radius: 6px;font-size: 14px;background-color: #fff;cursor: pointer;}
.sort-dropdown:focus {outline: none;border-color: var(--color-teal-4);}

/* RESULTS ROW */
.results-row {display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;padding: 10px 0;}
#results-message {font-size: 14px;color: #666;}

/* NO RESULTS */
.no-results {text-align: center;padding: 60px 20px;background-color: #f8f9fa;border-radius: 8px;}
.no-results p {margin-bottom: 10px;color: #666;}
.no-results a {color: var(--color-orange-2);font-weight: 600;}

/* LOADING STATE */
#business-archive-content.loading {opacity: 0.5;pointer-events: none;position: relative;}
#business-archive-content.loading::after {content: '';position: absolute;top: 50%;left: 50%;width: 40px;height: 40px;margin: -20px 0 0 -20px;border: 3px solid #f3f3f3;border-top: 3px solid var(--color-teal-4);border-radius: 50%;animation: spin 0.8s linear infinite;}
@keyframes spin {0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);}}

/* RESPONSIVE - TABLET */
@media (max-width: 992px) {
    .filter-controls {flex-direction: column;align-items: stretch;}
    .filter-group {width: 100%;}
    .filter-dropdown {width: 100%;min-width: auto;}
    .filter-checkbox {justify-content: center;}
    .button-filter {width: 100%;}
    .filter-meta-row {flex-direction: column;align-items: flex-start;}
    .sort-controls {width: 100%;}
    .sort-dropdown {flex: 1;}
}

/* RESPONSIVE - MOBILE */
@media (max-width: 768px) {
    .filter-bar {padding: 15px;}
    .business-indicators {flex-direction: column;align-items: flex-start;gap: 6px;}
    .active-filters {width: 100%;}
    .results-row {flex-direction: column;align-items: flex-start;gap: 10px;}
}

/* RECENTLY VIEWED WIDGET */
.rv-widget {position: fixed;right: 0;top: 50%;transform: translateY(-50%);z-index: 9999;display: none;}
.rv-widget.rv-visible {display: block;}

/* Trigger Button */
.rv-trigger {position: relative;display: flex;flex-direction: column;align-items: center;justify-content: center;width: 50px;height: 60px;padding: 8px;background: var(--color-teal-4);border: none;border-radius: 8px 0 0 8px;color: #fff;cursor: pointer;transition: all 0.3s ease;box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.15);}
.rv-trigger:hover {background: var(--color-teal-3);width: 55px;}
.rv-trigger:focus {outline: 2px solid var(--color-orange-2);outline-offset: 2px;}
.rv-icon {font-size: 24px;line-height: 1;}
.rv-count {font-size: 12px;font-weight: 600;margin-top: 2px;background: var(--color-orange-2);color: #fff;width: 20px;height: 20px;border-radius: 50%;display: flex;align-items: center;justify-content: center;line-height: 1;}

/* Flyout Panel */
.rv-flyout {position: absolute;right: 50px;top: 50%;transform: translateY(-50%) translateX(20px);width: 280px;max-height: 400px;background: #fff;border-radius: 12px;box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);opacity: 0;visibility: hidden;transition: all 0.3s ease;overflow: hidden;}
.rv-widget.rv-open .rv-flyout {opacity: 1;visibility: visible;transform: translateY(-50%) translateX(0);}

/* Flyout Header */
.rv-header {display: flex;align-items: center;justify-content: space-between;padding: 15px 15px 12px;border-bottom: 1px solid #eee;background: #fafafa;}
.rv-title {font-size: 14px;font-weight: 600;color: var(--color-main);text-transform: uppercase;letter-spacing: 0.5px;}
.rv-close {display: flex;align-items: center;justify-content: center;width: 28px;height: 28px;padding: 0;background: transparent;border: none;border-radius: 50%;color: #888;cursor: pointer;transition: all 0.2s ease;}
.rv-close:hover {background: #eee;color: var(--color-main);}
.rv-close .material-symbols-outlined {font-size: 18px;}

/* List Items */
.rv-list {list-style: none;margin: 0;padding: 0;max-height: 340px;overflow-y: auto;}
.rv-item {border-bottom: 1px solid #f0f0f0;}
.rv-item:last-child {border-bottom: none;}
.rv-item-link {display: flex;align-items: center;gap: 12px;padding: 12px 15px;text-decoration: none;color: var(--color-main);transition: background-color 0.2s ease;}
.rv-item-link:hover {background: var(--color-teal-1);}
.rv-item-logo-wrap {flex-shrink: 0;width: 40px;height: 40px;display: flex;align-items: center;justify-content: center;background: #f5f5f5;border-radius: 6px;overflow: hidden;}
.rv-item-logo {width: 100%;height: 100%;object-fit: cover;}
.rv-item-placeholder {font-size: 22px;color: #bbb;}
.rv-item-name {flex: 1;font-size: 14px;font-weight: 500;line-height: 1.3;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}

/* Scrollbar Styling */
.rv-list::-webkit-scrollbar {width: 6px;}
.rv-list::-webkit-scrollbar-track {background: #f5f5f5;}
.rv-list::-webkit-scrollbar-thumb {background: #ccc;border-radius: 3px;}
.rv-list::-webkit-scrollbar-thumb:hover {background: #aaa;}

/* MOBILE - WIDGET */
@media (max-width: 768px) {
    .rv-trigger {width: 44px;height: 52px;}
    .rv-trigger:hover {width: 44px;}
    .rv-icon {font-size: 20px;}
    .rv-count {font-size: 10px;width: 18px;height: 18px;}
    .rv-flyout {position: fixed;right: 10px;top: auto;bottom: 80px;transform: translateY(0) translateX(20px);width: calc(100vw - 20px);max-width: 300px;}
    .rv-widget.rv-open .rv-flyout {transform: translateY(0) translateX(0);}
}

/* PRINT */
@media print {
    .rv-widget {display: none !important;}
}