/* Synedica Custom Styles */

/* Smooth transitions */
* { transition-property: color, background-color, border-color, box-shadow, transform, opacity; transition-duration: 0.15s; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f9fafb; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* Product card hover effect */
.group:hover .group-hover\:scale-105 { transform: scale(1.05); }

/* Announcement bar animation */
@keyframes slideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
#announcement-bar { animation: slideDown 0.3s ease-out; }

/* Grid columns toggle */
.grid-1 { grid-template-columns: 1fr !important; }
.grid-2 { grid-template-columns: repeat(2, 1fr) !important; }
.grid-3 { grid-template-columns: repeat(3, 1fr) !important; }
.grid-4 { grid-template-columns: repeat(4, 1fr) !important; }

/* Mobile bottom bar padding */
@media (max-width: 768px) {
  main { padding-bottom: 60px; }
}

/* Product detail sticky bar animation */
#sticky-cart-bar {
  animation: slideUp 0.3s ease-out;
}
@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* FAQ accordion arrow */
.rotate-45 { transform: rotate(45deg); }

/* Contact banner gradient overlay with vials */
.bg-gradient-to-r.from-gray-100 { position: relative; }
.bg-gradient-to-r.from-gray-100::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,71,179,0.7) 0%, rgba(26,86,219,0.5) 100%);
  z-index: -1;
}

/* Accent underline on hover */
a:hover { text-decoration-color: #0047b3; }

/* Range input styling */
input[type="range"] {
  -webkit-appearance: none;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, #0047b3, #0047b3);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #0047b3;
  cursor: pointer;
  border: 2px solid white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* File input styling */
input[type="file"]::file-selector-button {
  cursor: pointer;
}