/* ==========================================================================
   Advanced Search UI
   ========================================================================== */
.search-container {
  max-width: 1200px; margin: -100px auto 0; position: relative; z-index: 10; padding: 0 20px;
}
.search-tabs {
  display: flex; background: var(--surface-color); width: max-content;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; overflow: hidden; padding: 8px 8px 0; gap: 4px;
}
.search-tab {
  padding: 12px 24px; font-weight: 600; color: var(--text-secondary);
  cursor: pointer; border-radius: var(--radius-md) var(--radius-md) 0 0;
  transition: all var(--transition-fast); background: transparent; border: none;
}
.search-tab:hover { color: var(--text-primary); }
.search-tab.active { background: var(--primary-gradient); color: white; }

.search-box {
  padding: 32px; border-radius: 0 var(--radius-xl) var(--radius-xl) var(--radius-xl);
}

.search-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: end;
}

.search-input-group {
  position: relative; display: flex; flex-direction: column; gap: 8px;
}
.search-input-group label {
  font-size: 0.875rem; font-weight: 600; color: var(--text-secondary); margin: 0;
}
.search-input-group i.input-icon {
  position: absolute; left: 16px; bottom: 16px; color: var(--text-secondary); pointer-events: none;
}
.search-input-group .form-control-premium, .search-input-group .form-select-premium {
  padding-left: 44px;
}

/* Specific Search Grid Spans */
.col-span-2 { grid-column: span 2; }
.col-span-4 { grid-column: span 4; }

/* Filter Toggles */
.filter-toggles {
  display: flex; gap: 16px; flex-wrap: wrap; margin-top: 24px; align-items: center;
}
.filter-toggle-switch {
  display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--text-secondary); font-size: 0.875rem; font-weight: 500;
}
.filter-toggle-switch input { display: none; }
.filter-toggle-switch .slider {
  width: 40px; height: 24px; background: var(--border-color); border-radius: 20px;
  position: relative; transition: 0.3s;
}
.filter-toggle-switch .slider::before {
  content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  background: white; top: 3px; left: 3px; transition: 0.3s; box-shadow: var(--shadow-sm);
}
.filter-toggle-switch input:checked + .slider { background: var(--primary-blue); }
.filter-toggle-switch input:checked + .slider::before { transform: translateX(16px); }

/* Search Suggestions Dropdown */
.search-suggestions {
  position: absolute; top: calc(100% + 4px); left: 0; width: 100%;
  background: var(--surface-color); border: 1px solid var(--border-color);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  z-index: 100; max-height: 300px; overflow-y: auto; display: none;
}
.search-suggestions.active { display: block; }
.suggestion-item {
  padding: 12px 16px; display: flex; align-items: center; gap: 12px;
  cursor: pointer; transition: 0.2s; border-bottom: 1px solid var(--border-color);
}
.suggestion-item:last-child { border-bottom: none; }
.suggestion-item:hover { background: var(--bg-color); }
.suggestion-item i { color: var(--text-secondary); }
.suggestion-item-text { display: flex; flex-direction: column; }
.suggestion-item-title { font-weight: 600; color: var(--text-primary); font-size: 0.875rem; }
.suggestion-item-type { font-size: 0.75rem; color: var(--text-secondary); text-transform: uppercase; }

/* Sticky Search Bar (appears on scroll) */
.sticky-search {
  position: fixed; top: -100px; left: 0; width: 100%; background: var(--surface-color);
  box-shadow: var(--shadow-md); z-index: 999; transition: transform var(--transition-normal);
  padding: 12px 0; border-bottom: 1px solid var(--border-color);
}
.main-header.scrolled + .sticky-search-wrapper .sticky-search {
  transform: translateY(72px); 
}

/* ==========================================================================
   Skeleton Loading Animation
   ========================================================================== */
@keyframes shimmer {
  0% { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}
.skeleton {
  background: #f6f7f8;
  background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
  background-repeat: no-repeat;
  background-size: 1000px 100%;
  animation: shimmer 2s infinite linear forwards;
  border-radius: var(--radius-sm);
}
.skeleton-img { width: 100%; height: 250px; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
.skeleton-text { height: 16px; margin-bottom: 12px; width: 100%; }
.skeleton-text.short { width: 60%; }
.skeleton-avatar { width: 32px; height: 32px; border-radius: 50%; }