/* Tailwind CSS Custom Styles for Flavour Fusion */

/* Fix mobile layout for menu items with images */
@media (max-width: 639px) {
  /* Force vertical stacking on mobile for image items */
  .menu-item .flex.flex-col.sm\\:flex-row {
    flex-direction: column !important;
  }
  
  /* Make image full width on mobile and appear below text */
  .menu-item .flex.flex-col.sm\\:flex-row .w-full.sm\\:w-28 {
    width: 100% !important;
    order: 2 !important;
    margin-top: 1rem !important;
  }
  
  /* Make text content appear first */
  .menu-item .flex.flex-col.sm\\:flex-row .flex-1 {
    order: 1 !important;
    width: 100% !important;
  }
  
  /* Optimize control row spacing on mobile */
  .menu-item .flex.items-center.justify-between {
    gap: 0.5rem !important; /* Reduce gap from gap-3 to gap-2 */
  }
  
  /* Make Add to Cart button more compact on mobile */
  .menu-item .add-to-cart {
    padding-left: 0.5rem !important;  /* px-2 = 8px instead of 12px */
    padding-right: 0.5rem !important; /* px-2 = 8px instead of 12px */
    font-size: 0.875rem !important;   /* text-sm */
    white-space: nowrap !important;    /* Prevent text wrapping */
    min-width: fit-content !important;
  }
  
  /* Also make quantity controls more compact on mobile */
  .menu-item .qty-decrease,
  .menu-item .qty-increase {
    padding-left: 0.5rem !important;  /* px-2 = 8px */
    padding-right: 0.5rem !important; /* px-2 = 8px */
  }
  
  .qty-display {
    padding-left: 0.5rem !important;  /* px-2 = 8px */
    padding-right: 0.5rem !important; /* px-2 = 8px */
    min-width: 32px !important;       /* Smaller min-width */
  }
}

/* Fix quantity controls to have consistent padding */
.menu-item .qty-decrease,
.menu-item .qty-increase {
  padding-left: 0.75rem !important;  /* px-3 = 12px */
  padding-right: 0.75rem !important; /* px-3 = 12px */
  padding-top: 0.5rem !important;    /* py-2 = 8px */
  padding-bottom: 0.5rem !important; /* py-2 = 8px */
  height: 42px !important;
  box-sizing: border-box !important;
}

/* Make quantity input fields match button padding exactly */
.qty-display {
  height: 42px !important;
  padding-left: 0.75rem !important;  /* px-3 = 12px */
  padding-right: 0.75rem !important; /* px-3 = 12px */
  padding-top: 0.5rem !important;    /* py-2 = 8px */
  padding-bottom: 0.5rem !important; /* py-2 = 8px */
  line-height: 1 !important;
  box-sizing: border-box !important;
}

/* Fix Add to Cart button to match quantity controls exactly */
.menu-item .flex.items-center.justify-between .add-to-cart {
  height: 42px !important;
  padding-left: 0.75rem !important;  /* px-3 = 12px to match qty controls */
  padding-right: 0.75rem !important; /* px-3 = 12px to match qty controls */
  padding-top: 0.5rem !important;    /* py-2 = 8px */
  padding-bottom: 0.5rem !important; /* py-2 = 8px */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

/* Ensure control row stays horizontal */
.menu-item .flex.items-center.justify-between {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
}