/**
 * ========================================
 * CUSTOM STYLES FOR RESTAURANT WEBSITE
 * ========================================
 * Additional styling beyond Tailwind CSS
 * Includes animations, custom layouts, and component-specific styles
 */

/* ============================================
   RESPONSIVE CARD LAYOUTS
   ============================================ */

/* Medium-large screens (1024px - 1440px) */
@media (min-width: 1024px) and (max-width: 1440px) {
  .card-1440 {
    width: calc(33.333% - 16px) !important;
    max-width: 450px;
  }
}

/* Extra large screens (1441px+) */
@media (min-width: 1441px) {
  .card-1440 {
    width: 496px !important;
  }
}

/* ============================================
   ANIMATIONS
   ============================================ */

/* Slide and fade animation for slider cards */
@keyframes slideFade {
  0% {
    opacity: 0.6;
    transform: translateX(30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

/* Stagger fade-in animation for product cards */
@keyframes staggerFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
   SLIDER STYLES
   ============================================ */

#slider {
  transition: transform 0.5s ease-in-out;
  will-change: transform;
}

.card-animate {
  animation: slideFade 0.5s ease-in-out;
}

/* ============================================
   BUTTON ANIMATIONS
   ============================================ */

.btn-animate {
  transition: transform 0.2s ease;
}

.btn-animate:hover {
  transform: scale(1.1);
}

.btn-animate:active {
  transform: scale(0.95);
}

.plus-btn {
  transition: transform 0.2s ease;
}

.plus-btn:hover {
  transform: scale(1.1);
}

.plus-btn:active {
  transform: scale(0.95);
}

/* ============================================
   PRODUCT CARD HOVER EFFECTS
   ============================================ */

.product-card-hover {
  transition: all 0.3s ease;
}

.product-card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.plus-button-hover {
  transition: all 0.2s ease;
}

.plus-button-hover:hover {
  transform: scale(1.1);
}

.plus-button-glow-hover:hover {
  filter: drop-shadow(0 0 8px rgba(252, 138, 6, 0.4));
}

.stagger-animate-child {
  opacity: 0;
  transform: translateY(20px);
  animation: staggerFadeIn 0.6s ease forwards;
}

/* ============================================
   SMOOTH SCROLLING
   ============================================ */

html {
  scroll-behavior: smooth;
}

/* ============================================
   SHOPPING CART STYLES
   ============================================ */

/* Default cart button styles */
.cart-btn {
  background-color: rgba(3, 8, 31, 1) !important;
  border: none !important;
}

.cart-btn i {
  color: white !important;
}

.cart-btn:hover {
  background-color: rgba(3, 8, 31, 0.8) !important;
}

/* Active cart item styles */
.cart-item-active {
  background-color: rgba(3, 8, 31, 1) !important;
}

.cart-item-active .item-name {
  color: rgba(252, 138, 6, 1) !important;
}

.cart-item-active .cart-divider {
  border-left-color: rgba(255, 255, 255, 0.6) !important;
}

.cart-item-active .cart-btn {
  background-color: rgba(217, 217, 217, 0.6) !important;
}

.cart-item-active .cart-btn i {
  color: white !important;
}

.cart-item-active .cart-btn:hover {
  background-color: rgba(180, 180, 180, 0.8) !important;
}

/* Quantity box always white with black text */
.quantity-box {
  background-color: white !important;
  color: black !important;
}

.cart-item-active .quantity-box {
  background-color: white !important;
  color: black !important;
}