/* Custom styles beyond Tailwind */

/* Toast notifications */
.toast {
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
  transform: translateX(100%);
  opacity: 0;
  width: 100%;
  max-width: 320px;
}

.toast.show {
  transform: translateX(0);
  opacity: 1;
}

/* Loading spinner */
@keyframes spinner {
  to { transform: rotate(360deg); }
}

/* Desktop layout with cart sidebar */
@media (min-width: 768px) {
  #main-content, .container {
    margin-right: 384px; /* 96 * 4 = 384px */
    width: auto;
    max-width: none;
  }
  
  #order-sidebar {
    border-left: 1px solid #e5e7eb;
    display: block !important;
  }
}

/* Form styles */
.form-control {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus {
  border-color: #4361ee;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(67, 97, 238, 0.25);
}

/* Dark mode form control */
.dark .form-control {
  background-color: #374151;
  border-color: #4b5563;
  color: #e5e7eb;
}

.dark .form-control:focus {
  border-color: #4361ee;
  box-shadow: 0 0 0 0.2rem rgba(67, 97, 238, 0.25);
}

/* Responsive table */
/* ... (no changes to table styles) ... */

/* Card shadow effect */
/* ... (no changes to card styles) ... */

/* Active navigation button */
.nav-btn.active {
  color: #4361ee !important;
}


/* --- NEW: Mobile UI/UX Improvements --- */

/* 1. Safe Area Insets for Modern Phones */
@media (max-width: 767px) {
  #bottom-nav {
    /* Add padding to the bottom to account for the home indicator */
    padding-bottom: env(safe-area-inset-bottom);
  }
  #mobile-cart-fab {
    /* Adjust FAB position to respect the safe area */
    bottom: calc(5rem + env(safe-area-inset-bottom)); /* 5rem is bottom-nav height + spacing */
  }
}


/* 2. Improved Mobile Touch Targets */
@media (max-width: 640px) {
  /* Increase minimum height for better tappability */
  .form-control, 
  button,
  select,
  input[type="text"],
  input[type="number"] {
    min-height: 44px;
  }
  
  /* Ensure quantity buttons are easy to tap */
  .increment-btn, .decrement-btn {
    min-width: 44px;
  }

  /* Prevent zooming on inputs in iOS by ensuring font-size is at least 16px */
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* 3. Active State Feedback for Touch Devices */
@media (hover: none) {
  button:active {
    opacity: 0.8;
    transform: scale(0.98);
    transition: transform 0.1s ease-out;
  }
}