/**
 * Advanced Search Panel Component - Usit Holidays
 * Collapsible panel with smooth animations
 */

/* Advanced fields container */
#advanced-fields {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height var(--transition-slow), opacity var(--transition-base), padding var(--transition-slow);
}

#advanced-fields:not(.hidden) {
  max-height: 1000px; /* Large enough to fit content */
  opacity: 1;
  padding-top: var(--space-6);
  margin-bottom: var(--space-6);
}

/* Toggle button */
#toggle-advanced {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--font-semibold);
  color: var(--primary-purple);
  transition: color var(--transition-fast);
}

#toggle-advanced:hover {
  color: var(--primary-pink);
}

/* Toggle icon rotation */
#toggle-icon {
  transition: transform var(--transition-base);
}

#toggle-advanced:not(.collapsed) #toggle-icon {
  transform: rotate(180deg);
}

/* Advanced search grid layout */
#advanced-fields .grid {
  animation: slideDown var(--transition-slow) ease-out;
}

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

/* Enhanced styling for advanced fields */
#advanced-fields input[type="number"],
#advanced-fields select {
  transition: all var(--transition-fast);
}

#advanced-fields input[type="number]:focus,
#advanced-fields select:focus {
  border-color: var(--primary-purple);
  ring: 2px solid rgba(115, 85, 174, 0.2);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Checkbox styling in advanced panel */
#advanced-fields input[type="checkbox"] {
  width: 18px;
  height: 18px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border-light);
  transition: all var(--transition-fast);
}

#advanced-fields input[type="checkbox"]:checked {
  background-color: var(--primary-purple);
  border-color: var(--primary-purple);
}

#advanced-fields input[type="checkbox"]:hover {
  border-color: var(--primary-purple);
}

/* Mobile responsive */
@media (max-width: 768px) {
  #advanced-fields:not(.hidden) {
    max-height: 1500px; /* More space for mobile stacked layout */
  }
}