/* ============================================
   CUSTOM SEARCH AUTOCOMPLETE STYLES
   Replaces Kendo UI Autocomplete
   Designed for Wisco.com
   ============================================ */

/* ===== SEARCH INPUT WRAPPER ===== */
.custom-search-wrapper {
  position: relative;
  flex: 1;
}

/* Search input inherits existing site-search-input styles */
.custom-search-input {
  width: 100%;
  /* Existing .site-search-input styles will apply via class */
}

/* Loading spinner - positioned inside input on far right */
.custom-search-loading {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--light-gray-text); /* #999999 */
  font-size: 14px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.custom-search-loading.show {
  opacity: 1;
}

/* Spinning animation for loading icon */
@keyframes spin {
  from { transform: translateY(-50%) rotate(0deg); }
  to { transform: translateY(-50%) rotate(360deg); }
}

.custom-search-loading.show i {
  animation: spin 0.8s linear infinite;
}

/* ===== DROPDOWN CONTAINER ===== */
.custom-search-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: var(--white); /* #fefefe */
  border: 1px solid var(--gray); /* #cccccc */
  border-radius: 3px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  max-height: 400px; /* Shows ~6-7 items, allows scroll for more */
  min-width: 450px; /* Make wider than input to prevent text wrapping */
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.custom-search-dropdown.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Smooth scrolling */
.custom-search-dropdown {
  scroll-behavior: smooth;
}

/* Custom scrollbar for webkit browsers */
.custom-search-dropdown::-webkit-scrollbar {
  width: 8px;
}

.custom-search-dropdown::-webkit-scrollbar-track {
  background: var(--x-light-gray); /* #fafafa */
  border-radius: 0 3px 3px 0;
}

.custom-search-dropdown::-webkit-scrollbar-thumb {
  background: var(--gray); /* #cccccc */
  border-radius: 4px;
}

.custom-search-dropdown::-webkit-scrollbar-thumb:hover {
  background: var(--dark-gray); /* #808080 */
}

/* ===== SECTION HEADERS ===== */
.custom-search-section-header {
  padding: 8px 12px;
  background: var(--gray-text); /* #3b3131 */
  border-bottom: 1px solid #e0e0e0;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--white); /* #fefefe */
  letter-spacing: 0.5px;
  cursor: default;
  user-select: none;
}

/* First section header has no top border from dropdown */
.custom-search-section-header:first-child {
  border-top: none;
}

/* ===== DROPDOWN ITEMS ===== */
.custom-search-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid #e0e0e0; /* Thin separator line */
  transition: background-color 0.15s ease;
}

.custom-search-item:last-child {
  border-bottom: none;
}

/* Hover state */
.custom-search-item:hover,
.custom-search-item.hover {
  background-color: var(--x-light-gray); /* #fafafa */
}

/* Keyboard focus state - with red accent border */
.custom-search-item.focused {
  background-color: var(--light-gray); /* #f0f0f0 */
  border-left: 3px solid var(--primary-color); /* rgb(194,24,7) */
  padding-left: 9px; /* Compensate for border */
}

/* ===== ITEM IMAGE/BADGE CONTAINER ===== */
.custom-search-item-image {
  flex-shrink: 0;
  width: 60px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--x-light-gray); /* #fafafa */
  border-radius: 3px;
  overflow: hidden;
}

.custom-search-item-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Type badge for items without images */
.custom-search-item-badge {
  width: 60px;
  height: 40px;
  background: var(--x-light-gray); /* #fafafa */
  border: 1px solid var(--gray); /* #cccccc */
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem; /* 10px */
  font-weight: 600;
  text-transform: uppercase;
  color: var(--gray-text); /* #3b3131 */
  letter-spacing: 0.5px;
  line-height: 1.2;
  text-align: center;
  padding: 4px;
}

/* Icon fallback for items without images */
.custom-search-item-icon {
  width: 60px;
  height: 40px;
  background: var(--x-light-gray); /* #fafafa */
  border: 1px solid var(--gray); /* #cccccc */
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: var(--dark-gray); /* #808080 */
}

/* ===== ITEM CONTENT ===== */
.custom-search-item-content {
  flex: 1;
  min-width: 0; /* Allow text truncation */
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ===== ITEM NAME ===== */
.custom-search-item-name {
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--black); /* #222222 */
  word-break: break-word;
}

/* ===== EMPTY/NO RESULTS STATE ===== */
/* Note: We don't show dropdown at all when there are no results */
/* This CSS is kept for future use if needed */
.custom-search-empty {
  padding: 20px 12px;
  text-align: center;
  color: var(--gray-text); /* #3b3131 */
  font-size: 0.875rem;
  line-height: 1.6;
}

.custom-search-empty-title {
  font-weight: 600;
  margin-bottom: 4px;
}

.custom-search-empty-hint {
  color: var(--light-gray-text); /* #999999 */
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */

/* Tablet and below */
@media only screen and (max-width: 63.9375em) {
  .custom-search-dropdown {
    max-height: 350px;
    min-width: 400px; /* Still wider on tablets */
  }
  
  .custom-search-item {
    padding: 12px;
  }
  
  .custom-search-item-image,
  .custom-search-item-badge {
    width: 55px;
    height: 38px;
  }
  
  .custom-search-item-badge {
    font-size: 0.6rem;
  }
}

/* Mobile specific */
@media only screen and (max-width: 39.9375em) {
  /* Fix mobile input border radius */
  input#acSiteSearchMobile {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
  }
  
  .custom-search-dropdown {
    max-height: 300px;
    min-width: 100%; /* Match input width on mobile */
    max-width: calc(100vw - 24px); /* Account for padding */
    border-radius: 0 0 3px 3px;
    margin-top: 4px; /* Add space between input and dropdown */
    left: 0;
    right: auto; /* Don't constrain right side */
    /* Make dropdown wider to match input + button width */
    width: calc(100% + 48px); /* Add ~button width */
    /* Ensure dropdown is visible on mobile */
    position: absolute !important;
    z-index: 10000 !important;
    /* Remove transition delay on mobile for instant visibility */
    transition: none !important;
  }
  
  /* Force visibility when show class is present */
  .custom-search-dropdown.show {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    transform: translateY(0) !important;
  }
  
  /* Make sure wrapper has proper positioning */
  .custom-search-wrapper {
    position: relative !important;
  }
  
  /* FIX: Badge icons being cut off on mobile - add more padding */
  .custom-search-item-icon {
    width: 55px;
    height: 38px;
    padding: 2px; /* Add padding to prevent cutoff */
  }
  
  /* Make icon slightly smaller to fit better */
  .custom-search-item-icon i {
    font-size: 1.1rem;
  }
  
  /* FIX: Override all parent overflow:hidden that clips dropdown */
  /* Target all possible class combinations */
  .mobile-inline-search,
  .mobile-inline-search.show,
  .mobile-inline-search.hide,
  #mobile-inline-search {
    overflow: visible !important;
  }
  
  .mobile-nav-container,
  .mobile-nav-container.search-expanded,
  #mobile-nav-container {
    overflow: visible !important;
  }
  
  .nav-search-mobile-wrapper,
  .input-group.nav-search-mobile-wrapper,
  #acSiteSearchMobile-container {
    overflow: visible !important;
  }
  
  /* Also fix the off-canvas wrapper */
  .off-canvas-wrapper,
  .article-offcanvas-wrapper,
  .off-canvas-wrapper.article-offcanvas-wrapper {
    overflow: visible !important;
  }
  
  .custom-search-item {
    padding: 14px 12px;
    gap: 10px;
  }
  
  .custom-search-item-name {
    font-size: 0.9375rem; /* Slightly larger for mobile readability */
  }
}

/* ===== ACCESSIBILITY ===== */

/* Remove default focus outline - already handled by browser/Foundation */
.custom-search-input:focus,
.custom-search-input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-color: inherit !important;
}

/* Ensure input looks normal when focused */
input.custom-search-input:focus {
  outline: none;
  box-shadow: none;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .custom-search-dropdown {
    border: 2px solid var(--black);
  }
  
  .custom-search-item.focused {
    border-left-width: 4px;
    border-left-color: var(--black);
  }
  
  .custom-search-item-badge {
    border: 2px solid var(--black);
  }
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .custom-search-dropdown,
  .custom-search-item,
  .custom-search-loading {
    transition: none;
  }
  
  .custom-search-loading.show i {
    animation: none;
  }
}