/* Custom styles for GM Supermarket */

/* Custom slider styles for toggle switches */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 34px;
}

/* Quantity input controls */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

input[type=number] {
  -moz-appearance: textfield;
}

/* Animations */
.add-to-cart {
  transition: transform 0.2s ease;
}

.add-to-cart:active {
  transform: scale(0.95);
}

/* Add subtle hover effect to product cards */
.transition.duration-200.hover\:shadow-lg:hover {
  transform: translateY(-4px);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Add animation to cart icon when item is added */
@keyframes cartBump {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.cart-bump {
  animation: cartBump 0.5s ease;
}

/* Notification animations */
@keyframes slideIn {
  0% { transform: translateY(20px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

.fixed.bottom-4.right-4 {
  animation: slideIn 0.3s ease forwards;
}

.fixed.bottom-4.right-4[style*="opacity: 0"] {
  animation: fadeOut 0.3s ease forwards;
}

/* Custom styling for radio buttons and checkboxes */
input[type="checkbox"], input[type="radio"] {
  cursor: pointer;
}

/* Modal animations */
.fixed.inset-0.bg-gray-600.bg-opacity-50:not(.hidden) {
  animation: fadeIn 0.3s ease forwards;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.fixed.inset-0.bg-gray-600.bg-opacity-50:not(.hidden) > div {
  animation: modalIn 0.3s ease forwards;
}

@keyframes modalIn {
  0% { transform: translateY(20px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* Add some subtle animations to icons in buttons */
button:hover i {
  transform: translateY(-1px);
  transition: transform 0.2s ease;
}

/* Special offers hover effect */
.bg-white.rounded-lg.shadow-md.overflow-hidden:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.3s ease;
}

/* Progress bar animation for order status */
.shadow-none.flex.flex-col.text-center.whitespace-nowrap.text-white.justify-center.bg-primary {
  animation: progressFill 1.5s ease-out;
}

@keyframes progressFill {
  0% { width: 0%; }
  100% { width: 100%; }
}

/* Indonesian Rupiah currency format */
.font-bold.text-primary::before {
  content: "Rp ";
}

.text-gray-900.font-medium::before {
  content: "Rp ";
}

.font-bold.text-lg.text-gray-800::before {
  content: "Rp ";
}

/* Custom focus styles for improved accessibility */
button:focus, a:focus, input:focus, select:focus, textarea:focus {
  outline: 2px solid rgba(218, 18, 18, 0.5);
  outline-offset: 2px;
}

/* Indonesian date format helper class */
.indo-date::before {
  content: attr(data-day) "/" attr(data-month) "/" attr(data-year);
}

/* Custom scrollbar for tables with horizontal scroll */
.overflow-x-auto::-webkit-scrollbar {
  height: 8px;
}

.overflow-x-auto::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.overflow-x-auto::-webkit-scrollbar-thumb {
  background: #DA1212;
  border-radius: 10px;
}

.overflow-x-auto::-webkit-scrollbar-thumb:hover {
  background: #b30f0f;
}