@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --primary: #F58220;
    --primary-hover: #E67300;
    --bg-main: #F9FAFB;
    --bg-card: #FFFFFF;
    --text-main: #111827;
    --text-secondary: #374151;
    --text-muted: #6B7280;
    --border-color: #E5E7EB;
  }
  
  body {
    @apply bg-[#F9FAFB] text-[#111827] antialiased;
  }
}

@layer components {
  /* Cards */
  .card {
    @apply bg-white border border-gray-200 shadow-sm rounded-lg transition-all duration-200;
  }

  /* Product Card Hover */
  .product-card {
    @apply card;
  }
  .product-card:hover {
    @apply -translate-y-0.5 shadow-md border-[#F58220];
  }

  /* Category Tab Active */
  .category-tab {
    @apply text-gray-500 bg-transparent transition-colors duration-200;
  }
  .category-tab.active {
    @apply bg-[#F58220] text-white;
  }

  /* Custom Option Selected */
  .custom-option {
    @apply border border-gray-200 bg-white transition-colors duration-200;
  }
  .custom-option.selected {
    @apply bg-[#FFF3E0] border-[#F58220];
  }

  /* Qty buttons */
  .qty-btn {
    @apply bg-gray-100 text-gray-900 transition-colors duration-200;
  }
  .qty-btn:hover {
    @apply bg-[#F58220] text-white;
  }

  /* Mobile Nav Bar */
  .mobile-nav {
    @apply bg-white shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.1)];
  }

  /* Toast Notifications */
  .toast {
    @apply bg-white text-gray-900 border-l-4 border-[#F58220] shadow-md;
  }

  /* Modal Backdrop */
  .modal-backdrop {
    @apply bg-black/50 backdrop-blur-sm;
  }
}

@layer utilities {
  /* Scrollbar */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  ::-webkit-scrollbar-track {
    background: #FFFFFF;
  }
  ::-webkit-scrollbar-thumb {
    background: #D1D5DB;
    border-radius: 4px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #F58220;
  }

  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  
  /* Remove dark glassmorphism effects */
  .glass {
    @apply bg-white backdrop-blur-none border-gray-200 shadow-sm !important;
  }
}

/* Animations */
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes toastSlideIn {
  from { opacity: 0; transform: translateX(100%); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes toastSlideOut {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(100%); }
}
@keyframes pulseSubtle {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.slide-down { animation: slideDown 0.3s ease-out; }
.toast-enter { animation: toastSlideIn 0.3s forwards; }
.toast-exit { animation: toastSlideOut 0.3s forwards; }
.pulse-subtle { animation: pulseSubtle 2s infinite ease-in-out; }

/* Leaflet & Custom Marker Styles */
.leaflet-container {
  font-family: inherit;
  z-index: 10;
}
.custom-div-icon {
  background: transparent !important;
  border: none !important;
}
@keyframes bounceSlow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.animate-bounce-slow {
  animation: bounceSlow 2.2s infinite ease-in-out;
}


.cart-addon-products { display:flex; gap:8px; overflow-x:auto; max-height:88px; padding-bottom:6px; }
.cart-addon-button { flex:0 0 auto; max-width:230px; border:1px solid #fed7aa; background:#fff; border-radius:12px; padding:10px 12px; font-size:11px; font-weight:700; color:#9a3412; text-align:left; white-space:normal; }
.cart-addon-button:hover { background:#fff7ed; border-color:#fb923c; }

/* Address suggestions stay readable above the Leaflet map, including error states. */
#map-search-candidates {z-index:1000; background:#fff; color:#334155; border:1px solid #e2e8f0; border-radius:14px; box-shadow:0 12px 32px #0f172a26; max-height:260px; overflow-y:auto; font-size:12px; line-height:1.5; padding:8px;}
#map-search-candidates button {display:block; width:100%; padding:11px 12px; text-align:left; background:white; border:0; border-bottom:1px solid #f1f5f9; border-radius:8px; cursor:pointer;}
#map-search-candidates button:hover,#map-search-candidates button[aria-selected="true"] {background:#fff7ed;}
#map-search-candidates strong,#map-search-candidates span {display:block;}
#map-search-candidates span {font-size:11px; color:#64748b; margin-top:3px;}