/* ========================================
   CRITICAL Z-INDEX FIX FOR ALL MESSAGES
   ======================================== */

/* Toast Notifications - Should appear above everything */
.toast {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 12px 20px;
  border-radius: 4px;
  color: white;
  font-weight: 500;
  z-index: 99999 !important; /* ✅ HIGHEST PRIORITY */
  opacity: 0;
  transition: opacity 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.toast.show {
  opacity: 1;
}

.toast.success {
  background: #4CAF50;
}

.toast.error {
  background: #f44336;
}

/* Cart Menu - High priority but below modals */
.cart-menu {
  position: absolute;
  background-color: white;
  border-radius: 20px;
  top: 110%;
  right: 1rem;
  z-index: 10001 !important; /* ✅ BELOW MODALS, ABOVE NAVBAR */
  padding: 20px;
  text-transform: none;
  font-family: 'Montserrat', sans-serif;
  width: 450px;
  box-shadow: 2px 2px 10px 4px rgb(14 55 54 / 15%);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.cart-menu.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Checkout Message - Must be visible above cart items */
.checkout-message {
  min-height: 40px;
  max-height: 70px;
  height: auto !important;
  padding: 14px 20px;
  overflow: hidden;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  margin-bottom: 0;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Cart Container - Ensure proper stacking context */
.cart-cont {
  margin-top: 25px;
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
  max-height: 300px;
  overflow-y: auto;
  padding-right: 8px;
  border: none;
  position: relative;
  z-index: 1; /* ✅ BELOW MESSAGES */
}

/* #uni container - Proper stacking */
#uni {
  font-weight: 600;
  padding: 10px 0;
  font-size: 16px;
  display: flex;
  flex-direction: column;
  align-items: end;
  position: relative;
  z-index: 5; /* ✅ ABOVE CART ITEMS, BELOW MODALS */
}

/* Modal Overlays - Highest priority for user interaction */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 50000 !important; /* ✅ ABOVE EVERYTHING EXCEPT TOASTS */
  justify-content: center;
  align-items: center;
  animation: fadeIn 0.3s ease;
}

.modal-overlay.active {
  display: flex;
}

/* Logout Modal */
.logout-modal {
  background: white;
  padding: 2rem;
  border-radius: 12px;
  max-width: 400px;
  width: 90%;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  z-index: 50001 !important; /* ✅ ABOVE MODAL OVERLAY */
  position: relative;
}

/* Custom Modal (Unsaved Changes, etc.) */
.custom-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  z-index: 50000 !important; /* ✅ SAME AS OTHER MODALS */
}

.custom-modal.active {
  display: flex;
}

.custom-modal .modal-content {
  background: #fff;
  padding: 2rem;
  border-radius: 12px;
  text-align: center;
  max-width: 400px;
  width: 90%;
  z-index: 50001 !important;
  position: relative;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Auth Modals */
.auth-modal {
  background: white;
  border-radius: 15px;
  overflow: hidden;
  display: flex;
  max-width: 900px;
  width: 90%;
  max-height: 85vh;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.4s ease;
  z-index: 50001 !important;
  position: relative;
}

.simple-modal {
  background: white;
  border-radius: 15px;
  padding: 50px 45px;
  max-width: 500px;
  width: 90%;
  max-height: 75vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.4s ease;
  z-index: 50001 !important;
  position: relative;
}

/* Address Modal */
#addressModal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  justify-content: center;
  align-items: center;
  z-index: 50000 !important;
  padding: 2rem;
}

#addressModal .modal-content,
#addressModal > div {
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  max-width: 600px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  z-index: 50001 !important;
  position: relative;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Navbar - Below cart and modals */

/* User Dropdown - Above navbar, below cart */
.user-dropdown {
  position: absolute;
  top: 55px;
  right: 0;
  background: white;
  border-radius: 8px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
  min-width: 200px;
  padding: 10px 0;
  display: none;
  z-index: 10002 !important; /* ✅ ABOVE NAVBAR, BELOW CART */
}

.user-dropdown.active {
  display: block;
}

/* Error/Success Messages in Forms */
.error-message,
.success-message {
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 20px;
  font-size: 13px;
  z-index: 10 !important;
  position: relative;
  animation: slideDown 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.error-message {
  background: #fee;
  color: #c33;
  border-left: 4px solid #c33;
}

.success-message {
  background: #efe;
  color: #383;
  border-left: 4px solid #383;
}

/* ========================================
   Z-INDEX HIERARCHY SUMMARY
   ======================================== */
/*
   99999 - Toast notifications (highest)
   50001 - Modal content (dialogs, forms)
   50000 - Modal overlays (backgrounds)
   10002 - User dropdown
   10001 - Cart menu
   10000 - Navbar
   5     - #uni container
   1-10  - Messages and alerts
   1     - Cart content
   
   This ensures proper layering for all interactive elements
*/

/* Additional fix for cart message positioning */
.cart-menu #uni {
  margin-top: 1rem;
}

.cart-menu .checkout-message {
  margin-top: 15px !important;
  margin-bottom: 0;
}

/* Ensure message is visible when displayed */
.checkout-message[style*="display: block"] {
  display: block !important;
  z-index: 15 !important;
}