/* Search Bar Animations */

/* Smooth slide animation for search icon and input field */
.search-container {
  position: relative;
}

.search-input-wrapper {
  display: flex;
  align-items: center;
}

/* Input field grows from right to left */
.search-input {
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Icon slides smoothly with the input */
.search-icon-toggle {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Active state: full width input visible */
.search-input-wrapper.opacity-100 .search-input {
  width: 12rem; /* w-48 in Tailwind */
}

/* Dropdown fade and backdrop blur animation */
.search-dropdown {
  animation: slideDownFadeIn 0.2s ease-out;
}

.search-dropdown.hidden {
  display: none;
}

@keyframes slideDownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Smooth transition for dropdown items */
.search-results-science a,
.search-results-products a {
  transition: all 0.2s ease;
}

.search-results-science a:hover,
.search-results-products a:hover {
  background-color: rgba(27, 35, 43, 0.8); /* New dark blue-gray with opacity */
}

/* Icon appearance smooth transition */
@keyframes iconSlide {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(-12rem); /* Slide left by width of input */
    opacity: 1;
  }
}

/* Ensure cart icon doesn't shift */
.search-container {
  flex-shrink: 0;
}

/* Focus state for input */
.search-input:focus {
  box-shadow: 0 0 0 3px rgba(102, 142, 171, 0.1), inset 0 0 0 1px rgba(102, 142, 171, 0.5);
}

/* Dark mode specific styles */
@media (prefers-color-scheme: dark) {
  .search-input {
    background-color: #2a3543;
    border-color: #1b232b;
  }

  .search-input::placeholder {
    color: #b1c4d8;
  }

  .search-dropdown {
    background-color: rgba(27, 35, 43, 0.95);
    border-top-color: #668eab;
  }
}

/* Light mode specific styles */
@media (prefers-color-scheme: light) {
  .search-input {
    background-color: #f8fafc;
    border-color: #dde5f4;
    color: #1b232b;
  }

  .search-input::placeholder {
    color: #668eab;
  }

  .search-dropdown {
    background-color: #ffffff;
    border-top-color: #668eab;
  }
}

/* Accessibility: Focus visible states */
.search-icon-toggle:focus-visible,
.search-input:focus-visible {
  outline: 2px solid #668eab;
  outline-offset: 2px;
}

/* Smooth appearance/disappearance of search wrapper */
.search-input-wrapper {
  will-change: opacity;
}

/* Prevent layout shift when search bar opens */
.search-container {
  min-width: 40px; /* Width of the icon button */
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .search-input {
    width: 10rem !important; /* sm: w-40 */
  }

  .search-dropdown {
    width: 18rem; /* Fit smaller screens */
    right: -2rem;
  }
}


.search-input-wrapper {
  will-change: opacity;
}

.search-dropdown {
  animation: slideDownFadeIn 0.2s ease-out;
}

@keyframes slideDownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.search-results-science a,
.search-results-products a {
  transition: all 0.2s ease;
}

.search-icon-toggle:focus-visible,
.search-input:focus-visible {
  outline: 2px solid #668eab;
  outline-offset: 2px;
}

@media (prefers-color-scheme: dark) {
  .search-input {
    background-color: #a0aed0; 
    border-color: #525d77;
  }

  .search-input::placeholder {
    color: #94a3b8;
  }
}

@media (prefers-color-scheme: light) {
  .search-input {
    background-color: #f1f5f9; 
    border-color: #cbd5e1;
    color: #0f172a;
  }

  .search-input::placeholder {
    color: #64748b;
  }
}