/* Base Theme Variables */
:root {
  --font-body: 'Poppins', sans-serif;
  --font-heading: 'Lobster', cursive;
  --bg-color: #faf8f6;
  --surface-color: #fff9f7;
  --text-primary: #2d2520;
  --text-secondary: #7a6b64;
  --border-color: #ede5e0;
  --primary: #ff6f61;
  --primary-dark: #e6564a;
  --primary-light: #ffb2a8;
  --accent-green: #25d366;
  --shadow-color: rgba(255, 111, 97, 0.08);
  --shadow-color-strong: rgba(255, 111, 97, 0.15);
  --gradient-start: #fff9f7;
  --gradient-end: #fdf1ec;
}

/* Dark Theme Variables */
body.dark {
  --bg-color: #2b2520;
  --surface-color: #3a3430;
  --text-primary: #f5f0ed;
  --text-secondary: #c9b8af;
  --border-color: #524a46;
  --primary: #ff8a76;
  --primary-dark: #ff7b6b;
  --primary-light: #ffb2a8;
  --shadow-color: rgba(255, 138, 118, 0.15);
  --shadow-color-strong: rgba(255, 138, 118, 0.25);
  --gradient-start: #3a3430;
  --gradient-end: #4a4038;
}

/* Atma Font Utilities for Bengali Text */
.atma-light {
  font-family: "Atma", system-ui;
  font-weight: 300;
  font-style: normal;
}

.atma-regular {
  font-family: "Atma", system-ui;
  font-weight: 400;
  font-style: normal;
}

.atma-medium {
  font-family: "Atma", system-ui;
  font-weight: 500;
  font-style: normal;
}

.atma-semibold {
  font-family: "Atma", system-ui;
  font-weight: 600;
  font-style: normal;
}

.atma-bold {
  font-family: "Atma", system-ui;
  font-weight: 700;
  font-style: normal;
}

/* Patrick Hand Font for English Text */
.patrick-hand-regular {
  font-family: "Patrick Hand", cursive;
  font-weight: 400;
  font-style: normal;
}

/* Reset and Base Styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-color);
  color: var(--text-primary);
  transition: background-color 0.3s, color 0.3s;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Global Responsive Safety */
img,
video,
svg {
  max-width: 100%;
  height: auto;
}

button,
a,
input,
select,
textarea {
  touch-action: manipulation;
}

input,
select,
textarea {
  font-size: 16px;
}

/* Prevent iOS zoom on focus */

/* Layout */
.app-layout {
  display: grid;
  grid-template-columns: 260px 1fr 340px;
  gap: 30px;
  max-width: 1600px;
  margin: 0 auto;
  padding: 20px;
}

/* Header Styles — Glassmorphic Sticky */
.app-header {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 14px 0 0;
  border-bottom: 1px solid var(--border-color);
  background: linear-gradient(180deg, rgba(255, 111, 97, 0.04) 0%, transparent 100%);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background-color: rgba(250, 248, 246, 0.88);
  transition: box-shadow 0.3s ease, background-color 0.3s;
}

body.dark .app-header {
  background-color: rgba(43, 37, 32, 0.88);
}

.app-header.scrolled {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  border-bottom-color: transparent;
}

.header-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  gap: 12px;
}

/* Desktop: diet filter in center of header row */
.header-center-filter {
  flex: 1;
  display: flex;
  justify-content: center;
}

/* Mobile: diet filter in its own row */
.header-diet-row {
  display: none;
  justify-content: center;
  padding: 6px 0 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.04);
}

.logo {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  color: var(--primary);
  font-weight: 700;
  letter-spacing: -0.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.logo::before {
  content: '🍃';
  font-size: 1.8rem;
}

/* Controls and Buttons */
.top-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.control-btn {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background-color: var(--surface-color);
  border: 2px solid var(--border-color);
  color: var(--text-secondary);
  cursor: pointer;
  display: grid;
  place-content: center;
  font-size: 1.1rem;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  font-weight: 600;
  text-decoration: none;
}

.control-btn:hover {
  color: var(--primary);
  background-color: rgba(255, 111, 97, 0.1);
  border-color: var(--primary);
  transform: translateY(-3px);
  box-shadow: 0 8px 16px var(--shadow-color-strong);
}

.control-btn:active {
  transform: translateY(-1px);
}

/* Wishlist heart icon in header */
.control-btn[title="My Wishlist"] i {
  color: #e74c3c;
}

/* Wishlist toast animation */
@keyframes wishToastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Sidebar and Categories */
.sidebar {
  position: sticky;
  top: 20px;
  height: calc(100vh - 40px);
}

.sidebar h3 {
  font-size: 1.15rem;
  margin-bottom: 18px;
  color: var(--text-primary);
  font-weight: 700;
  letter-spacing: -0.5px;
}

.category-nav ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.category-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--text-secondary);
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  border: 2px solid transparent;
  font-size: 0.95rem;
}

.category-nav a:hover {
  background-color: rgba(255, 111, 97, 0.08);
  color: var(--primary);
  border-color: rgba(255, 111, 97, 0.2);
}

.category-nav a.active {
  background: linear-gradient(135deg, rgba(255, 111, 97, 0.15) 0%, rgba(255, 111, 97, 0.05) 100%);
  color: var(--primary);
  border-color: var(--primary);
  font-weight: 700;
}

.category-nav a.active i {
  color: var(--primary);
}

.category-nav i {
  font-size: 1.1rem;
  width: 20px;
  text-align: center;
  color: var(--text-secondary);
  transition: color 0.3s;
}

/* Mobile search (hidden on desktop, shown via media query) */
.mobile-search-form {
  display: none;
}

/* Product Grid Area */
.product-grid-area {
  min-width: 0;
}

/* Vendor Section */
.vendor-section {
  margin-bottom: 4px;
}

.vendor-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding: 0 4px;
}

.vendor-section-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.vendor-section-title i {
  color: var(--primary);
  font-size: 0.95rem;
}

.vendor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding: 0 15px;
}

.vendor-header h2 {
  font-size: 1.5rem;
  color: var(--text-primary);
  font-family: var(--font-heading);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.vendor-header h2 i {
  color: var(--primary);
  font-size: 1.4rem;
}

.clear-vendor-btn {
  background: var(--primary);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}

.clear-vendor-btn:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
}

.clear-vendor-btn.hidden {
  display: none;
}

.vendor-carousel {
  display: flex;
  gap: 15px;
  overflow-x: auto;
  padding: 0 15px;
  margin-bottom: 20px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.vendor-carousel::-webkit-scrollbar {
  height: 6px;
}

.vendor-carousel::-webkit-scrollbar-track {
  background: var(--border-color);
  border-radius: 10px;
}

.vendor-carousel::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: 10px;
}

.vendor-carousel::-webkit-scrollbar-thumb:hover {
  background: var(--primary-dark);
}

.vendor-card {
  flex: 0 0 auto;
  cursor: pointer;
  transition: transform 0.28s ease, box-shadow 0.28s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 110px;
}

.vendor-card-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(255, 111, 97, 0.08), rgba(230, 86, 74, 0.08));
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 50%;
  width: 74px;
  height: 74px;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
  box-shadow: 0 2px 8px rgba(45, 37, 32, 0.04);
  position: relative;
  overflow: hidden;
}

.vendor-card:hover {
  transform: translateY(-6px);
}

.vendor-card:hover .vendor-card-inner {
  border-color: rgba(255, 111, 97, 0.18);
  box-shadow: 0 10px 24px rgba(230, 86, 74, 0.12);
  transform: scale(1.03);
}

.vendor-card.active .vendor-card-inner {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-color: transparent;
  box-shadow: 0 12px 30px rgba(230, 86, 74, 0.18);
  transform: scale(1.02);
}

/* Background icon inside circle (faint) */
.vendor-card-inner .bg-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 46px;
  color: rgba(255, 255, 255, 0.12);
  pointer-events: none;
  transition: color 0.28s ease, transform 0.28s ease;
}

/* Shop name inside the circle */
.vendor-card-inner .vendor-name-in-circle {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 6px 8px;
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  line-height: 1.05;
}

/* When vendor active, make text white for contrast */
.vendor-card.active .vendor-name-in-circle {
  color: white;
}

/* Hide old vendor-info label that was below the circle */
.vendor-card .vendor-info.hidden-below {
  display: none;
}

/* Slightly scale the background icon when hovered/active */
.vendor-card:hover .bg-icon {
  transform: translate(-50%, -50%) scale(1.04);
}

.vendor-card.active .bg-icon {
  color: rgba(255, 255, 255, 0.14);
  transform: translate(-50%, -50%) scale(1.02);
}

.vendor-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.25rem;
  background: linear-gradient(135deg, #ff6f61, #e6564a);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
  transition: transform 0.28s ease;
}

.vendor-card:hover .vendor-avatar {
  transform: scale(1.1);
}

.vendor-card.active .vendor-avatar {
  background: rgba(255, 255, 255, 0.2) !important;
}

.vendor-card.active .vendor-info h4 {
  color: white;
}

.vendor-info h4 {
  font-size: 0.85rem;
  font-weight: 600;
  margin: 6px 0 0;
  color: var(--text-primary);
  line-height: 1.15;
  text-align: center;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.vendor-info .vendor-count {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin: 0;
}

.vendor-card.active .vendor-info .vendor-count {
  color: rgba(255, 255, 255, 0.85);
}

/* Search Bar */
.search-bar {
  max-width: 600px;
  margin: 0 auto 15px auto;
}

.search-container {
  position: relative;
  flex-grow: 1;
  display: flex;
  align-items: center;
}

.search-container .fa-magnifying-glass {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  pointer-events: none;
  font-size: 1rem;
  opacity: 0.7;
  z-index: 2;
}

input[type="search"] {
  width: 100%;
  padding: 13px 20px 13px 48px;
  border-radius: 14px;
  border: 2px solid var(--border-color);
  background-color: var(--surface-color);
  font-size: 1rem;
  color: var(--text-primary);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  font-family: var(--font-body);
  font-weight: 500;
}

input[type="search"]:focus {
  outline: none;
  border-color: var(--primary);
  background-color: var(--surface-color);
  box-shadow: 0 8px 20px var(--shadow-color-strong);
}

input[type="search"]::placeholder {
  color: var(--text-secondary);
  opacity: 0.6;
}

/* Search Mic Button */
.search-wrapper {
  position: relative;
  width: 100%;
}

.search-mic-btn {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 5;
}

.search-mic-btn:hover {
  color: var(--primary);
  background-color: rgba(255, 111, 97, 0.1);
}

.search-mic-btn.listening {
  color: var(--primary);
  background-color: transparent;
}

.search-mic-btn.listening::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  background-color: var(--primary);
  border-radius: 50%;
  z-index: -1;
  animation: pulseMicBg 1.5s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}

@keyframes pulseMicBg {
  0% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0.8;
  }

  100% {
    transform: translate(-50%, -50%) scale(2.5);
    opacity: 0;
  }
}

/* Hide native WebKit search icons to prevent double icons */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
  display: none;
}

/* Recent Searches Dropdown */
.recent-searches-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 100%;
  background: var(--surface-color);
  border-radius: 16px;
  box-shadow: 0 10px 30px var(--shadow-color-strong);
  border: 1px solid var(--border-color);
  z-index: 100;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-10px);
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.recent-searches-dropdown.visible {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.rs-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px 8px;
}

.rs-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.rs-clear-btn {
  background: none;
  border: none;
  color: var(--primary);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.rs-clear-btn:hover {
  text-decoration: underline;
}

.rs-list {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
}

.rs-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  cursor: pointer;
  transition: background 0.2s;
  color: var(--text-primary);
  font-size: 0.95rem;
}

.rs-item:hover {
  background: rgba(0, 0, 0, 0.03);
}

body.dark .rs-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.rs-icon {
  color: var(--text-secondary);
  font-size: 0.9rem;
  opacity: 0.7;
}

/* Product Grid */
#product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: clamp(15px, 3vw, 30px);
}

/* Product Cards */
.product-card {
  background-color: var(--surface-color);
  border-radius: 16px;
  box-shadow: 0 4px 12px var(--shadow-color);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  opacity: 0;
  transform: translateY(20px);
  border: 1px solid var(--border-color);
}

.product-card.visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.product-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 32px var(--shadow-color-strong);
  border-color: rgba(255, 111, 97, 0.3);
}

/* Product Image Container */
.product-image-container {
  width: 100%;
  height: 200px;
  position: relative;
  overflow: hidden;
  cursor: grab;
}

.product-image-container:active {
  cursor: grabbing;
}

/* Carousel */
.carousel-track {
  display: flex;
  height: 100%;
  transition: transform 0.4s ease-out;
}

.carousel-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
}

.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
}

.carousel-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 5;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(2px);
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
}

.dot.active {
  background-color: #fff;
  transform: scale(1.2);
}

/* Modal Carousel */
.modal-carousel {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  cursor: grab;
}

.modal-carousel:active {
  cursor: grabbing;
}

.modal-carousel-track {
  display: flex;
  height: 100%;
  transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.modal-carousel-track .modal-carousel-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-carousel-track .modal-carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  max-height: 520px;
  user-select: none;
  pointer-events: none;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.product-modal-content:hover .modal-carousel-slide img {
  transform: scale(1.04);
}

.modal-carousel-dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 5;
}

.modal-carousel-dots:empty {
  display: none;
}

.modal-carousel-dots .modal-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.25);
  border: 2px solid rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
}

.modal-carousel-dots .modal-dot.active {
  background-color: var(--primary, #ff6f61);
  border-color: white;
  transform: scale(1.25);
}

/* Out of Stock Overlay */
.out-of-stock-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(255, 248, 244, 0.55);
  backdrop-filter: blur(1.5px) grayscale(60%);
  display: grid;
  place-content: center;
  z-index: 10;
  pointer-events: none;
}

body.dark .out-of-stock-overlay {
  background-color: rgba(74, 59, 56, 0.55);
}

.out-of-stock-overlay .badge {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, #d9534f, #c0392b);
  color: white;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: .72rem;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  transform: rotate(-12deg);
  border: 4px solid white;
  box-shadow: 0 0 0 3px #d9534f, 0 4px 16px rgba(217, 83, 79, 0.35);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
  animation: oosGentlePulse 2.5s ease-in-out infinite;
}

.out-of-stock-overlay .badge i {
  font-size: 1.15rem;
  margin-bottom: 3px;
}

@keyframes oosGentlePulse {

  0%,
  100% {
    transform: rotate(-12deg) scale(1);
  }

  50% {
    transform: rotate(-12deg) scale(1.04);
  }
}

/* Out of Stock Card Styles */
.product-card.is-out-of-stock {
  opacity: 0.78;
  filter: saturate(0.5);
  border-color: rgba(217, 83, 79, 0.15);
}

.product-card.is-out-of-stock:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px var(--shadow-color);
  border-color: rgba(217, 83, 79, 0.25);
}

.product-card.is-out-of-stock .info .price {
  color: var(--text-secondary);
  text-decoration: line-through;
  text-decoration-color: rgba(217, 83, 79, 0.5);
}

.product-card.is-out-of-stock .info .name {
  color: var(--text-secondary);
}

.oos-disabled-btn {
  background: linear-gradient(135deg, #bbb, #999) !important;
  color: #fff !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  opacity: 0.85;
}

.oos-disabled-btn:hover {
  transform: none !important;
  box-shadow: none !important;
}

body.dark .product-card.is-out-of-stock {
  opacity: 0.65;
  filter: saturate(0.4);
}

body.dark .oos-disabled-btn {
  background: linear-gradient(135deg, #555, #444) !important;
}

/* Wishlist Button (top-right) */
.card-wishlist-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: none;
  border-radius: 50%;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  font-size: 0.95rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.25s ease;
}

.card-wishlist-btn:hover {
  transform: scale(1.15);
  color: #e74c3c;
}

.card-wishlist-btn.active {
  color: #e74c3c;
  background: rgba(255, 255, 255, 0.95);
}

.card-wishlist-btn.active i {
  font-weight: 900;
  font-family: "Font Awesome 6 Free";
}

body.dark .card-wishlist-btn {
  background: rgba(40, 35, 32, 0.8);
  color: rgba(255, 255, 255, 0.6);
}

body.dark .card-wishlist-btn.active {
  color: #e74c3c;
}

/* Rating Badge on Image (bottom-left) */
.card-rating-badge {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(30, 30, 30, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 3px;
  letter-spacing: 0.3px;
}

.card-rating-badge i {
  color: #ffc107;
  font-size: 0.65rem;
}

.card-rating-badge.card-badge-new {
  background: rgba(76, 175, 80, 0.85);
}

.card-rating-badge.card-badge-new i {
  color: #fff;
  font-size: 0.65rem;
}

.card-new-label {
  color: #4CAF50 !important;
  font-weight: 600;
}

.card-new-label i {
  color: #4CAF50;
}

/* Trust Badges (Bestseller / Fresh Today) */
.card-trust-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 4px;
  text-transform: uppercase;
}

.card-badge-bestseller {
  background: linear-gradient(135deg, #ff6f61, #e85d50);
  color: #fff;
  box-shadow: 0 2px 8px rgba(255, 111, 97, 0.3);
}

.card-badge-fresh {
  background: linear-gradient(135deg, #27ae60, #2ecc71);
  color: #fff;
  box-shadow: 0 2px 8px rgba(46, 204, 113, 0.3);
}

.card-badge-bestseller i {
  font-size: 0.6rem;
}

.card-badge-fresh i {
  font-size: 0.6rem;
}

/* Card Meta Row (shop name + variant) */
.card-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: -4px;
  margin-bottom: 4px;
}

.card-shop-name {
  font-size: 0.78rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.card-variant-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--primary);
  background: rgba(255, 111, 97, 0.08);
  padding: 2px 8px;
  border-radius: 20px;
  border: 1px solid rgba(255, 111, 97, 0.15);
}

/* Rating Row (inside info section) */
.card-rating-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
}

.card-rating-stars {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #1a1a1a;
}

body.dark .card-rating-stars {
  color: #fff;
}

.card-rating-stars i {
  color: #ffc107;
  font-size: 0.7rem;
}

.card-rating-count {
  font-size: 0.72rem;
  color: var(--text-secondary);
  font-weight: 500;
}

/* Price Block (price + MRP + discount tag) */
.card-price-block {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}

.card-mrp {
  font-size: 0.82rem;
  color: var(--text-secondary);
  text-decoration: line-through;
  font-weight: 500;
}

.card-discount-tag {
  font-size: 0.68rem;
  font-weight: 700;
  color: #27ae60;
  letter-spacing: 0.2px;
}

/* Product Info */
.product-card .info {
  padding: 14px 16px 16px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.product-card .name {
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 4px;
  color: var(--text-primary);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card .footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  gap: 8px;
  padding-top: 4px;
}

.product-card .price {
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--text-primary);
  letter-spacing: -0.5px;
}

/* Cart Buttons */
.add-to-cart-btn,
.view-options-btn,
.quantity-control {
  border: none;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  font-family: var(--font-body);
}

.add-to-cart-btn,
.view-options-btn {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff;
  padding: 9px 18px;
  font-size: 0.88rem;
  box-shadow: 0 4px 12px rgba(255, 111, 97, 0.25);
  border-radius: 10px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.add-to-cart-btn:hover,
.view-options-btn:hover {
  background: linear-gradient(135deg, #ff8a76 0%, #ff5a45 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255, 111, 97, 0.35);
}

.add-to-cart-btn:active,
.view-options-btn:active {
  transform: translateY(0);
}

.add-to-cart-btn[disabled] {
  background-color: #ccc;
  cursor: not-allowed;
  opacity: 0.6;
  box-shadow: none;
}

.quantity-control {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff;
  padding: 8px 10px;
}

.quantity-control button {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.3rem;
  width: 30px;
  height: 30px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.2s;
  font-weight: 700;
}

.quantity-control button:hover {
  background: rgba(0, 0, 0, 0.15);
  transform: scale(1.1);
}

.quantity-control span {
  font-size: 1.1rem;
  font-weight: 700;
  min-width: 25px;
  text-align: center;
}

/* Variant Selector */
.variant-selector {
  width: 100%;
  padding: 10px 40px 10px 14px;
  margin-bottom: 14px;
  border: 2px solid var(--border-color);
  border-radius: 16px;
  font-weight: 600;
  font-size: 1rem;
  appearance: none;
  background-repeat: no-repeat, repeat;
  background-position: right 14px center, 0 0;
  background-size: 20px 20px, 100%;
  cursor: pointer;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
  background-color: var(--surface-color);
  background-image: url("data:image/svg+xml,%3Csvg fill='%23757575' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"),
    linear-gradient(to bottom, var(--gradient-start) 0%, var(--gradient-end) 100%);
}

.variant-selector:hover,
.variant-selector:focus {
  border-color: var(--primary);
  box-shadow: 0 0 8px var(--primary);
  outline: none;
  background-image: url("data:image/svg+xml,%3Csvg fill='%23ff6f61' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"),
    linear-gradient(to bottom, var(--gradient-start) 0%, var(--gradient-end) 100%);
}

/* Cart Area */
.cart-area {
  position: sticky;
  top: 20px;
  height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
}

.cart-wrapper {
  background-color: var(--surface-color);
  border-radius: 16px;
  box-shadow: 0 8px 24px var(--shadow-color-strong);
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--border-color);
  overflow: hidden;
}

.cart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px;
  border-bottom: 2px solid var(--border-color);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-primary);
  background: linear-gradient(90deg, rgba(255, 111, 97, 0.03) 0%, transparent 100%);
}

.cart-items {
  flex-grow: 1;
  flex-shrink: 1;
  overflow-y: auto;
  padding: 12px 0;
  min-height: 60px;
}

.cart-empty-msg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 50px 20px;
  height: 100%;
  color: var(--text-secondary);
}

.cart-empty-msg i {
  font-size: 3.5rem;
  margin-bottom: 20px;
  color: var(--border-color);
  opacity: 0.6;
}

.cart-empty-msg p {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.cart-empty-msg span {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* Cart Items */
.cart-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  transition: background-color 0.2s;
}

.cart-item:hover {
  background-color: rgba(255, 111, 97, 0.05);
}

.cart-item img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 10px;
}

.cart-item .details {
  flex-grow: 1;
  font-size: 0.9rem;
}

.cart-footer {
  padding: 18px;
  border-top: 2px solid var(--border-color);
  background: linear-gradient(180deg, transparent 0%, rgba(255, 111, 97, 0.02) 100%);
  flex-shrink: 0;
}

.cart-total {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  font-size: 1.25rem;
  margin-bottom: 16px;
  color: var(--text-primary);
}

.cart-total span:last-child {
  color: var(--primary);
}

/* ===== V2 Cart Premium Redesign ===== */

/* Drag handle */
.cart-drag-handle {
  display: none;
  justify-content: center;
  padding: 10px 0 4px;
  cursor: grab;
}

.cart-drag-handle span {
  width: 40px;
  height: 5px;
  background: #d0d0d0;
  border-radius: 4px;
  display: block;
}

/* Header V2 */
.cart-header-v2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-color);
}

.cart-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
}

.cart-header-left i {
  color: var(--primary);
  font-size: 1.1rem;
}

.cart-badge {
  background: linear-gradient(135deg, #ff6f61, #e64a3a);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  min-width: 22px;
  height: 22px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 7px;
  letter-spacing: 0.3px;
}

/* Cart Item V2 */
.cart-item-v2 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  position: relative;
  transition: background 0.2s;
}

.cart-item-v2:last-child {
  border-bottom: none;
}

.cart-item-v2:active {
  background: rgba(255, 111, 97, 0.04);
}

.cart-item-oos {
  opacity: 0.55;
}

.cart-item-img-wrap {
  position: relative;
  flex-shrink: 0;
}

.cart-item-img-wrap img {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.oos-badge {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  background: #d32f2f;
  color: #fff;
  font-size: 0.58rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
  letter-spacing: 0.3px;
}

.cart-item-info {
  flex: 1;
  min-width: 0;
}

.cart-item-name {
  font-weight: 650;
  font-size: 0.92rem;
  color: var(--text-primary);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-item-meta {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

.cart-item-oos-label {
  color: #d32f2f;
  font-size: 0.75rem;
  font-weight: 700;
  margin-top: 4px;
}

.cart-item-qty-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
}

.cart-qty-stepper {
  display: inline-flex;
  align-items: center;
  background: #f5f5f5;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

body.dark .cart-qty-stepper {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

.cart-qty-stepper button {
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  color: var(--text-primary);
  transition: background 0.15s;
}

.cart-qty-stepper button:active {
  background: rgba(255, 111, 97, 0.15);
}

.cart-qty-stepper span {
  font-size: 0.85rem;
  font-weight: 700;
  min-width: 22px;
  text-align: center;
  color: var(--text-primary);
}

.cart-item-total {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--primary);
}

.cart-item-remove {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  color: #bbb;
  font-size: 0.75rem;
  cursor: pointer;
  padding: 4px;
  transition: color 0.15s;
}

.cart-item-remove:active {
  color: #d32f2f;
}

/* Footer V2 */
.cart-footer-v2 {
  padding: 12px 16px 16px;
  border-top: 1px solid var(--border-color);
  flex-shrink: 0;
  overflow-y: auto;
  max-height: 50vh;
}

/* Delivery Row */
.cart-delivery-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 12px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: background 0.2s;
  background: #f0f7ff;
  border: 1px solid #d0e4f7;
}

body.dark .cart-delivery-row {
  background: rgba(33, 150, 243, 0.08);
  border-color: rgba(33, 150, 243, 0.2);
}

.cart-delivery-row.loc-success {
  background: #e8f5e9;
  border-color: #a5d6a7;
}

body.dark .cart-delivery-row.loc-success {
  background: rgba(76, 175, 80, 0.1);
  border-color: rgba(76, 175, 80, 0.25);
}

.cart-delivery-row.loc-error {
  background: #ffebee;
  border-color: #ef9a9a;
}

body.dark .cart-delivery-row.loc-error {
  background: rgba(244, 67, 54, 0.08);
  border-color: rgba(244, 67, 54, 0.2);
}

.cart-delivery-left {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
}

.cart-delivery-left i {
  font-size: 0.95rem;
}

.loc-idle .cart-delivery-left i {
  color: #1976d2;
}

.loc-success .cart-delivery-left i {
  color: #2e7d32;
}

.loc-loading .cart-delivery-left i {
  color: #f57c00;
}

.loc-error .cart-delivery-left i {
  color: #c62828;
}

.pincode-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.pincode-valid {
  background: #c8e6c9;
  color: #2e7d32;
}

body.dark .pincode-valid {
  background: rgba(76, 175, 80, 0.2);
  color: #81c784;
}

.pincode-invalid {
  background: #fff3e0;
  color: #e65100;
}

body.dark .pincode-invalid {
  background: rgba(255, 152, 0, 0.12);
  color: #ffb74d;
}

/* Coupon Row V2 */
.cart-coupon-row {
  margin-bottom: 10px;
}

.cart-coupon-row .coupon-input-row {
  display: flex;
  align-items: center;
  gap: 0;
  background: #f8f8f8;
  border: 1.5px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s;
}

body.dark .cart-coupon-row .coupon-input-row {
  background: rgba(255, 255, 255, 0.05);
}

.cart-coupon-row .coupon-input-row:focus-within {
  border-color: #6c63ff;
  box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.08);
}

.coupon-icon-prefix {
  color: #999;
  padding: 0 0 0 12px;
  font-size: 0.85rem;
}

.cart-coupon-row .coupon-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  padding: 10px 8px 10px 8px;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-primary);
  outline: none;
}

.cart-coupon-row .coupon-apply-btn {
  padding: 10px 16px;
  border: none;
  background: linear-gradient(135deg, #6c63ff, #5a52e0);
  color: white;
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  border-radius: 0 10px 10px 0;
  transition: background 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}

.cart-coupon-row .coupon-apply-btn:active {
  background: linear-gradient(135deg, #5a52e0, #4840c4);
}

/* Coupon Applied */
.cart-coupon-applied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: linear-gradient(135deg, rgba(108, 99, 255, 0.08), rgba(108, 99, 255, 0.04));
  border: 1.5px dashed rgba(108, 99, 255, 0.3);
  border-radius: 12px;
  margin-bottom: 10px;
}

body.dark .cart-coupon-applied {
  background: rgba(108, 99, 255, 0.1);
}

.coupon-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #6c63ff;
}

.coupon-tag i {
  font-size: 0.9rem;
}

.coupon-savings {
  font-size: 0.78rem;
  color: #2e7d32;
  font-weight: 700;
  margin-left: 4px;
}

.cart-coupon-applied .coupon-remove-btn {
  background: none;
  border: none;
  color: #999;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 4px;
}

/* Price Summary */
.cart-price-summary {
  margin-bottom: 12px;
  padding: 0 2px;
}

.price-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--text-secondary);
  padding: 3px 0;
}

.price-row.discount-row {
  color: #2e7d32;
}

.price-row.discount-row span:last-child {
  font-weight: 700;
}

.price-row.total-row {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-primary);
  padding: 8px 0 0;
  margin-top: 6px;
  border-top: 1.5px dashed var(--border-color);
}

.price-row.total-row span:last-child {
  color: var(--primary);
}

/* Place Order Button */
.cart-action-bar {
  margin-bottom: 8px;
}

.cart-place-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #ff6f61 0%, #e64a3a 100%);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(255, 111, 97, 0.35);
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}

.cart-place-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.cart-place-btn:not(:disabled):active {
  transform: scale(0.98);
  box-shadow: 0 3px 12px rgba(255, 111, 97, 0.25);
}

.cart-place-btn-price {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.3px;
}

.cart-place-btn-text {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
}

.oos-warning {
  text-align: center;
  color: #d32f2f;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 8px;
  padding: 6px;
  background: #ffebee;
  border-radius: 8px;
}

/* Secondary Actions */
.cart-secondary-actions {
  display: flex;
  gap: 8px;
}

.cart-secondary-actions button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 10px;
  border: 1.5px solid var(--border-color);
  border-radius: 10px;
  background: var(--surface-color);
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.cart-secondary-actions button:active {
  background: rgba(255, 111, 97, 0.06);
  border-color: var(--primary);
  color: var(--primary);
}

/* ===== Coupon Input Section ===== */
.coupon-input-section {
  margin-bottom: 14px;
}

.coupon-input-row {
  display: flex;
  gap: 8px;
}

.coupon-input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border: 2px solid var(--border-color);
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-primary);
  background: var(--surface-color);
  outline: none;
  transition: all 0.3s ease;
}

.coupon-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(255, 111, 97, 0.1);
}

.coupon-input::placeholder {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--text-secondary);
  opacity: 0.6;
}

.coupon-apply-btn {
  padding: 10px 18px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #6c63ff, #5a52e0);
  color: white;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}

.coupon-apply-btn:hover {
  background: linear-gradient(135deg, #5a52e0, #4840c4);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(108, 99, 255, 0.3);
}

.coupon-apply-btn:active {
  transform: translateY(0);
}

/* Coupon Applied Badge */
.coupon-applied-section {
  margin-bottom: 14px;
}

.coupon-applied-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
  border: 2px solid #4caf50;
  border-radius: 10px;
  animation: couponApplied 0.4s ease;
}

body.dark .coupon-applied-badge {
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.2), rgba(76, 175, 80, 0.1));
}

@keyframes couponApplied {
  0% {
    transform: scale(0.95);
    opacity: 0;
  }

  60% {
    transform: scale(1.02);
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.coupon-applied-badge>i {
  color: #2e7d32;
  font-size: 1rem;
}

.coupon-applied-code {
  font-family: 'Courier New', monospace;
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 1.5px;
  color: #1b5e20;
}

body.dark .coupon-applied-code {
  color: #66bb6a;
}

.coupon-applied-savings {
  margin-left: auto;
  font-weight: 700;
  font-size: 0.88rem;
  color: #2e7d32;
}

body.dark .coupon-applied-savings {
  color: #81c784;
}

.coupon-remove-btn {
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  padding: 4px;
  font-size: 0.85rem;
  transition: all 0.2s;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.coupon-remove-btn:hover {
  color: #d32f2f;
  background: rgba(211, 47, 47, 0.1);
}

/* Coupon Message */
.coupon-message {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  animation: fadeIn 0.3s ease;
}

.coupon-message.hidden {
  display: none;
}

.coupon-message.error {
  background: #fce4ec;
  color: #c62828;
  border: 1px solid #ef9a9a;
}

body.dark .coupon-message.error {
  background: rgba(198, 40, 40, 0.15);
  border-color: rgba(239, 154, 154, 0.3);
}

.coupon-message.loading {
  background: #e3f2fd;
  color: #1565c0;
  border: 1px solid #90caf9;
}

.coupon-message.success {
  background: linear-gradient(135deg, #e8f5e9, #f1f8e9);
  color: #2e7d32;
  border: 1px solid #a5d6a7;
  animation: couponSuccessPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

body.dark .coupon-message.success {
  background: rgba(46, 125, 50, 0.15);
  border-color: rgba(165, 214, 167, 0.3);
  color: #81c784;
}

@keyframes couponSuccessPop {
  0% { transform: scale(0.95); opacity: 0; }
  60% { transform: scale(1.02); }
  100% { transform: scale(1); opacity: 1; }
}


@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Cart Total Breakdown */
.cart-total-breakdown {
  margin-bottom: 16px;
}

.cart-subtotal-row,
.cart-discount-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin-bottom: 6px;
  font-weight: 500;
}

.cart-discount-row {
  color: #2e7d32;
}

.cart-discount-row span {
  font-weight: 600;
}

/* Cart Actions */
.cart-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.action-btn {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: none;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  font-family: var(--font-body);
}

.whatsapp-btn {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(255, 111, 97, 0.25);
}

.whatsapp-btn:hover {
  background: linear-gradient(135deg, #ff8a76 0%, #ff5a45 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255, 111, 97, 0.35);
}

.secondary-btn {
  background-color: var(--surface-color);
  color: var(--text-primary);
  border: 2px solid var(--border-color);
}

.secondary-btn:hover {
  border-color: var(--primary);
  background-color: rgba(255, 111, 97, 0.05);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--shadow-color-strong);
}

.action-btn[disabled] {
  background-color: #ccc;
  cursor: not-allowed;
  opacity: 0.6;
  transform: none;
}

.location-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--primary);
  background-color: transparent;
  color: var(--primary);
  font-size: 1.2rem;
  cursor: pointer;
  display: grid;
  place-content: center;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.location-btn:hover {
  background-color: var(--primary);
  color: #fff;
}

.location-btn.loading i {
  animation: fa-spin 1.5s infinite linear;
}

.location-btn.success {
  background-color: #25D366;
  border-color: #25D366;
  color: #fff;
  cursor: default;
}

.location-btn.error {
  border-color: #d9534f;
  color: #d9534f;
}

/* Status Messages */
.location-status-msg,
.pincode-status-msg {
  padding: 10px;
  margin-bottom: 15px;
  border-radius: 8px;
  text-align: center;
  font-weight: 500;
  font-size: 0.9rem;
}

.location-status-msg.idle {
  background-color: color-mix(in srgb, var(--primary) 20%, transparent);
  border: 1px solid var(--primary);
}

.location-status-msg.success,
.pincode-status-msg.success {
  background-color: color-mix(in srgb, #25D366 20%, transparent);
  border: 1px solid #25D366;
}

.location-status-msg.error,
.pincode-status-msg.error {
  background-color: color-mix(in srgb, #d9534f 20%, transparent);
  border: 1px solid #d9534f;
}

/* Utility Classes */
.action-btn[disabled] {
  background-color: #ccc;
  cursor: not-allowed;
  opacity: 0.6;
}

.hidden {
  display: none !important;
}

#no-results {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: var(--text-secondary);
}

#no-results h3 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 10px;
}

/* Simple Footer */
.simple-footer {
  grid-column: 1 / -1;
  text-align: center;
  padding: 30px 20px;
  border-top: 2px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-top: 20px;
}

.simple-footer p {
  margin: 8px 0;
}

.social-links {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 16px;
}

.social-links a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--surface-color);
  border: 2px solid var(--border-color);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  text-decoration: none;
}

.social-links a:hover {
  background-color: var(--primary);
  color: white;
  border-color: var(--primary);
  transform: translateY(-3px);
}

/* Media Queries */
@media (max-width: 1024px) {
  .app-layout {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 10px;
    padding-bottom: 100px;
  }

  .sidebar,
  .cart-area,
  .search-bar {
    display: none;
  }

  /* Vendor section mobile adjustments */
  .vendor-header {
    padding: 0 10px;
    margin-bottom: 15px;
  }

  .vendor-header h2 {
    font-size: 1.3rem;
  }

  .vendor-carousel {
    padding: 0 10px;
  }

  .vendor-card {
    width: auto;
  }

  .vendor-card-inner {
    width: 64px;
    height: 64px;
  }

  .vendor-avatar {
    width: 36px;
    height: 36px;
    font-size: 1.05rem;
  }

  .vendor-info h4 {
    font-size: 0.78rem;
    max-width: 90px;
  }

  .vendor-info h4 {
    font-size: 0.85rem;
  }

  .vendor-info .vendor-count {
    font-size: 0.75rem;
  }

  .mobile-search-form {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 10px;
    box-shadow: 0 8px 25px rgba(255, 111, 97, 0.12);
    border: 2px solid transparent;
    border-radius: 50px;
    overflow: hidden;
    background-color: var(--surface-color);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
  }

  .mobile-search-form:focus-within {
    border-color: var(--primary);
    box-shadow: 0 8px 30px rgba(255, 111, 97, 0.2);
  }

  /* .mobile-search-form::before removed to prevent double search icon */

  .mobile-search-form input {
    flex-grow: 1;
    padding: 13px 16px 13px 45px;
    border: none;
    outline: none;
    background: transparent;
    font-size: 16px;
    line-height: normal;
    color: var(--text-primary);
    font-family: var(--font-body);
  }

  .mobile-search-form input::placeholder {
    color: var(--text-secondary);
  }

  .mobile-filter-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    align-items: center;
  }


  #product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  .product-card .info {
    padding: 12px;
  }

  #mobile-cart-btn {
    display: flex;
    flex-direction: column;
    position: fixed;
    bottom: 15px;
    left: 15px;
    right: 15px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(255, 111, 97, 0.4);
    cursor: pointer;
    z-index: 1000;
    animation: slideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    overflow: hidden;
    padding: 0;
  }

  .cart-progress-container.compact {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: rgba(0, 0, 0, 0.1);
    z-index: 2;
  }

  .cart-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #ff9800 0%, #4caf50 100%);
    transition: width 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 0 6px rgba(255, 152, 0, 0.5);
    border-radius: 0 4px 4px 0;
  }

  .cart-progress-bar.success {
    background: #4caf50;
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.6);
  }

  .cart-content.compact {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    padding: 0;
    position: relative;
    z-index: 1;
  }

  .cart-left.compact-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 12px 16px;
    flex: 1;
    min-width: 0;
  }

  .cart-title {
    font-size: 1.05rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .cart-title .dot-sep {
    opacity: 0.6;
    font-size: 0.9rem;
  }

  .cart-subtitle {
    font-size: 0.75rem;
    font-weight: 500;
    opacity: 0.95;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .cart-subtitle.success-text {
    color: #ffea00;
    font-weight: 600;
    opacity: 1;
    animation: pulseText 2s infinite;
  }

  .cart-right.compact-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.95rem;
    font-weight: 800;
    background: rgba(0, 0, 0, 0.15); /* Dark translucent instead of white */
    color: #fff;
    padding: 0 20px;
    flex-shrink: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
  }

  @keyframes pulseText {
    0% {
      opacity: 0.8;
    }

    50% {
      opacity: 1;
      text-shadow: 0 0 8px rgba(255, 234, 0, 0.5);
    }

    100% {
      opacity: 0.8;
    }
  }

  @keyframes slideUp {
    from {
      opacity: 0;
      transform: translateY(100px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

@media (max-width: 768px) {
  .app-header {
    padding: 10px 0 0;
  }

  .header-top-row {
    padding-bottom: 8px;
  }

  .logo {
    font-size: 1.8rem;
  }

  #product-grid {
    grid-template-columns: 1fr;
  }

  .search-container .fa-magnifying-glass {
    left: 14px;
  }

  input[type="search"] {
    padding: 12px 16px 12px 42px;
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .app-layout {
    padding: 8px;
  }

  .app-header {
    padding: 8px 0 0;
  }

  .header-top-row {
    padding-bottom: 6px;
  }

  .logo {
    font-size: 1.6rem;
  }

  .control-btn {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }

  .logo::before {
    font-size: 1.4rem;
  }

  #mobile-cart-btn {
    bottom: 12px;
    left: 12px;
    right: 12px;
    border-radius: 12px;
  }
  .cart-left.compact-info {
    padding: 10px 14px;
  }
  .cart-title {
    font-size: 1rem;
  }
  .cart-subtitle {
    font-size: 0.72rem;
  }
  .cart-right.compact-cta {
    padding: 0 16px;
    font-size: 0.9rem;
  }

  .product-card .info {
    padding: 10px;
  }

  .product-card .name {
    font-size: 1rem;
  }

  .product-card .price {
    font-size: 1.3rem;
  }

  .add-to-cart-btn,
  .view-options-btn,
  .quantity-control {
    padding: 8px 10px;
    font-size: 0.8rem;
    min-width: 0;
    white-space: nowrap;
  }

  input[type="search"] {
    font-size: 16px;
    padding: 11px 14px 11px 40px;
  }

  .search-container .fa-magnifying-glass {
    left: 12px;
  }

  .modal-content {
    padding: 20px 16px;
  }

  .modal-header h3 {
    font-size: 1.1rem;
  }
}

/* Very small phones — 360px and below (iPhone SE, Galaxy A series, budget phones) */
@media (max-width: 360px) {
  .app-layout {
    padding: 6px;
  }

  .logo {
    font-size: 1.4rem;
  }

  .logo::before {
    font-size: 1.2rem;
  }

  .control-btn {
    width: 36px;
    height: 36px;
    font-size: 0.9rem;
    border-radius: 10px;
  }

  .top-controls {
    gap: 4px;
  }

  #product-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .product-card .name {
    font-size: 0.95rem;
  }

  .product-card .price {
    font-size: 1.2rem;
  }

  .product-card .info {
    padding: 8px;
  }

  #mobile-cart-btn {
    bottom: 10px;
    left: 8px;
    right: 8px;
    border-radius: 10px;
  }
  .cart-left.compact-info {
    padding: 8px 12px;
  }
  .cart-title {
    font-size: 0.95rem;
  }
  .cart-subtitle {
    font-size: 0.7rem;
  }
  .cart-right.compact-cta {
    padding: 0 14px;
    font-size: 0.85rem;
  }

  .mobile-search-form input {
    padding: 11px 14px 11px 40px;
    font-size: 13px;
  }

  #category-filter-btn {
    width: 44px;
    height: 44px;
    font-size: 1rem;
  }

  .modal-content {
    padding: 16px 14px;
    border-radius: 14px;
  }

  .modal-header h3 {
    font-size: 1rem;
  }

  .modal-actions button {
    padding: 10px 16px;
    font-size: 0.85rem;
  }

  .vendor-card-inner {
    width: 56px;
    height: 56px;
  }

  .vendor-card-inner .vendor-name-in-circle {
    font-size: 0.7rem;
    padding: 4px 6px;
  }

  .vendor-card-inner .bg-icon {
    font-size: 36px;
  }

  .vendor-info h4 {
    font-size: 0.72rem;
    max-width: 70px;
  }

  .add-to-cart-btn,
  .view-options-btn {
    padding: 7px 8px;
    font-size: 0.75rem;
  }

  .quantity-control {
    padding: 6px 8px;
  }

  .quantity-control button {
    width: 26px;
    height: 26px;
    font-size: 1.1rem;
  }

  .quantity-control span {
    font-size: 0.95rem;
    min-width: 20px;
  }

  /* Product modal for very small screens */
  .product-modal-info-col {
    padding: 16px 14px 20px;
  }

  .product-modal-title {
    font-size: 1.3rem;
  }

  .product-modal-price {
    font-size: 1.5rem;
  }

  .product-modal-actions .add-to-cart-btn {
    height: 46px;
    padding: 10px 16px;
    font-size: 13px;
  }

  .product-modal-actions .qty-selector {
    height: 46px;
  }

  .product-modal-actions .qty-btn {
    width: 40px;
  }

  .product-modal-actions .qty-value {
    width: 36px;
    font-size: 15px;
    line-height: 46px;
  }

  .product-modal-actions>.share-btn {
    flex: 0 0 46px;
    height: 46px;
  }

  .product-modal-actions .in-cart-msg {
    height: 46px;
    font-size: 12px;
  }

  .variant-pill {
    min-width: 80px;
    padding: 8px 12px;
  }

  .variant-weight {
    font-size: 0.78rem;
  }

  .variant-price {
    font-size: 0.82rem;
  }

  /* Simple footer */
  .simple-footer {
    padding: 20px 12px;
  }

  .social-links {
    gap: 10px;
  }

  .social-links a {
    width: 36px;
    height: 36px;
  }

  /* Cart V2 - Premium bottom sheet for mobile */
  #mobile-cart-modal {
    align-items: flex-end;
  }

  #mobile-cart-modal .cart-wrapper {
    width: 100%;
    max-width: 100%;
    border-radius: 24px 24px 0 0;
    margin: 0;
    height: 88vh;
    max-height: 88vh;
    border: none;
    position: relative;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    background: var(--surface-color);
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.15);
  }

  #mobile-cart-modal.visible .cart-wrapper {
    transform: translateY(0);
  }

  /* Show drag handle on mobile */
  #mobile-cart-modal .cart-drag-handle {
    display: flex;
  }

  #mobile-cart-modal .cart-items {
    min-height: 80px;
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #mobile-cart-modal .cart-footer-v2 {
    padding: 10px 14px 16px;
    flex-shrink: 0;
    background: var(--surface-color);
    border-top: 1px solid var(--border-color);
    max-height: none;
    overflow: visible;
  }
}

/* Fix for devices with very short viewport height (landscape or short phones) */
@media (max-height: 700px) {
  #mobile-cart-modal .cart-wrapper {
    height: 92vh;
    max-height: 92vh;
  }

  #mobile-cart-modal .cart-footer-v2 {
    padding: 8px 12px 12px;
  }

  #mobile-cart-modal .cart-place-btn {
    padding: 10px 16px;
    font-size: 0.88rem;
  }

  #mobile-cart-modal .cart-secondary-actions button {
    padding: 7px 8px;
    font-size: 0.72rem;
  }
}

.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  pointer-events: none;
  backdrop-filter: blur(4px);
}

.modal.visible {
  opacity: 1;
  visibility: visible;
  display: flex;
  pointer-events: auto;
}

.modal-content {
  background: var(--surface-color);
  padding: 28px 32px;
  border-radius: 16px;
  max-width: 420px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: modalSlideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  border: 1px solid var(--border-color);
}

@keyframes modalSlideUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--border-color);
  padding-bottom: 16px;
}

.modal-header h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

#close-category-modal-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  color: var(--text-secondary);
  font-size: 1.8rem;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

#close-category-modal-btn:hover {
  background-color: var(--border-color);
  color: var(--text-primary);
}

/* Customer Info Modal */
#customer-info-modal label {
  display: block;
  margin-bottom: 8px;
  font-weight: 700;
  color: var(--text-primary);
  text-align: left;
  font-size: 0.95rem;
}

#customer-info-modal input {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 16px;
  border-radius: 10px;
  border: 2px solid var(--border-color);
  font-size: 1rem;
  font-family: var(--font-body);
  background-color: var(--bg-color);
  color: var(--text-primary);
  transition: all 0.3s;
}

#customer-info-modal input:focus {
  outline: none;
  border-color: var(--primary);
  background-color: white;
  box-shadow: 0 0 0 4px rgba(255, 111, 97, 0.1);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
}

.modal-actions button {
  padding: 11px 20px;
  border-radius: 10px;
  border: none;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s;
  font-family: var(--font-body);
  font-size: 0.95rem;
}

.modal-actions button[type="submit"] {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(255, 111, 97, 0.25);
}

.modal-actions button[type="submit"]:hover {
  background: linear-gradient(135deg, #ff8a76 0%, #ff5a45 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255, 111, 97, 0.35);
}

.modal-actions button[type="button"] {
  background-color: var(--bg-color);
  border: 2px solid var(--border-color);
  color: var(--text-primary);
}

.modal-actions button[type="button"]:hover {
  background-color: var(--border-color);
  border-color: var(--text-secondary);
}

/* Media Queries */
@media (max-width: 1024px) {
  .app-layout {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 10px;
    padding-bottom: 100px;
  }

  .sidebar,
  .cart-area,
  .search-bar {
    display: none;
  }

  .mobile-filter-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    align-items: center;
  }

  #category-filter-btn {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    padding: 0;
    border: 1px solid var(--border-color);
    background-color: var(--surface-color);
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.1rem;
    color: var(--text-secondary);
    display: grid;
    place-content: center;
  }

  #product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  .product-card .info {
    padding: 12px;
  }


}

/* Mobile Category Modal */
#category-modal .modal-content {
  transform: translateY(40px);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s ease-out;
}

#category-modal.visible .modal-content {
  transform: translateY(0);
  opacity: 1;
}

#category-modal .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
}

#category-modal .modal-header h3 {
  margin: 0;
  font-size: 1.5rem;
}

#close-category-modal-btn {
  background: none;
  border: none;
  font-size: 2rem;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  color: var(--text-secondary);
  padding: 0 5px;
  transition: color 0.2s;
}

#close-category-modal-btn:hover {
  color: var(--primary);
}

#category-modal-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

#category-modal-list a {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-primary);
  font-weight: 500;
  transition: background-color 0.2s;
}

#category-modal-list a:hover {
  background-color: var(--bg-color);
}

#category-modal-list a.active {
  background-color: var(--primary);
  color: #fff;
}

/* Footer Styles */
.simple-footer {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 20px;
  margin-top: 40px;
  background-color: var(--surface-color);
  border-top: 1px solid var(--border-color);
  color: var(--text-secondary);
}

.simple-footer p {
  margin-bottom: 10px;
  line-height: 1.6;
}

.simple-footer .social-links {
  display: flex;
  justify-content: center;
  gap: 25px;
  margin-top: 20px;
}

.simple-footer .social-links a {
  font-size: 1.5rem;
  color: var(--text-secondary);
  transition: color 0.2s, transform 0.2s;
}

.simple-footer .social-links a:hover {
  color: var(--primary);
  transform: translateY(-3px);
}

/* === Product Details Modal === */
.product-modal {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 10000;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(5px);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.product-modal.show {
  opacity: 1;
  visibility: visible;
}

.product-modal-content {
  background: var(--surface-color);
  width: 90%;
  max-width: 800px;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  transform: translateY(20px) scale(0.95);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: flex;
  flex-direction: row;
  max-height: 90vh;
}

.product-modal.show .product-modal-content {
  transform: translateY(0) scale(1);
}

.product-modal-drag-handle {
  display: none;
}

.product-modal-close {
  position: absolute;
  top: 15px;
  right: 15px;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 1.2rem;
  color: var(--text-primary, #333);
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.2s;
}

.product-modal-close:hover {
  background: white;
  color: var(--primary-coral, var(--primary, #ff6f61));
  transform: scale(1.1);
}

/* Image Column — Elegant Showcase */
.product-modal-image-col {
  width: 48%;
  background: linear-gradient(180deg, #f5eeeb 0%, #ece4df 100%);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

body.dark .product-modal-image-col {
  background: linear-gradient(180deg, #2a2320 0%, #1e1a17 100%);
}

.product-modal-image-col::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: transparent;
  pointer-events: none;
  z-index: 1;
}

.product-modal-image-col img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  max-height: 520px;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.product-modal-content:hover .product-modal-image-col img {
  transform: scale(1.04);
}

/* Info Column — Refined Layout */
.product-modal-info-col {
  width: 52%;
  padding: 36px 32px 28px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  position: relative;
}

/* Decorative accent line */
.product-modal-info-col::before {
  content: '';
  position: absolute;
  top: 0;
  left: 32px;
  right: 32px;
  height: 3px;
  background: linear-gradient(90deg, #ff6f61, #ff9a76, transparent);
  border-radius: 2px;
  opacity: 0.5;
}

/* Category Badge — Elegant Pill */
.product-modal-category {
  font-size: 0.78rem;
  color: #c7603e;
  font-weight: 700;
  margin-bottom: 14px;
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, rgba(255, 154, 118, 0.12), rgba(255, 111, 97, 0.08));
  padding: 6px 14px;
  border-radius: 50px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  border: 1px solid rgba(255, 111, 97, 0.15);
  width: fit-content;
}

.product-modal-category i {
  font-size: 0.7rem;
  opacity: 0.8;
}

/* Title — Premium Typography */
.product-modal-title {
  font-size: 1.75rem;
  font-weight: 800;
  color: #2d2520;
  margin-bottom: 16px;
  line-height: 1.2;
  letter-spacing: -0.5px;
  font-family: 'Poppins', sans-serif;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Price — Bold Statement */
.product-modal-price {
  font-size: 2rem;
  font-weight: 800;
  background: linear-gradient(135deg, #ff6f61, #e64a3a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 16px;
  letter-spacing: -0.5px;
  line-height: 1;
  position: relative;
  display: inline-block;
}

/* Product Description — Icon Toggle */
.product-modal-description {
  font-size: 0.92rem;
  color: #5a4f47;
  line-height: 1.7;
  margin: 0 0 18px 0;
  padding: 0;
  background: none;
  border-radius: 0;
  border: none;
  position: relative;
  word-wrap: break-word;
  box-shadow: none;
  font-family: 'Poppins', sans-serif;
}

.desc-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, #fff5f2 0%, #ffeee8 100%);
  border: 1.5px solid rgba(255, 111, 97, 0.2);
  border-radius: 50%;
  color: #c7603e;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 6px rgba(255, 111, 97, 0.1);
  flex-shrink: 0;
  margin-top: 2px;
}

.desc-icon-btn i {
  transition: transform 0.3s ease;
}

.desc-icon-btn:hover {
  background: linear-gradient(135deg, #ffede8 0%, #ffddd4 100%);
  border-color: rgba(255, 111, 97, 0.35);
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 4px 10px rgba(255, 111, 97, 0.2);
}

.desc-icon-btn.active {
  background: linear-gradient(135deg, #ff6f61 0%, #e64a3a 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 10px rgba(255, 111, 97, 0.3);
}

.desc-full-text {
  margin-top: 14px;
  padding: 22px 26px;
  background: #ffffff;
  border-radius: 18px;
  border: 1.5px solid rgba(255, 111, 97, 0.1);
  border-left: 5px solid #ff6f61;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.03),
    0 2px 8px rgba(255, 111, 97, 0.04);
  animation: descReveal 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transform-origin: top center;
  position: relative;
}

.desc-full-text::before {
  content: '\f10d';
  /* FontAwesome Quote icon */
  font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free';
  font-weight: 900;
  position: absolute;
  top: 14px;
  right: 20px;
  font-size: 24px;
  color: rgba(255, 111, 97, 0.08);
}

.desc-full-text p {
  margin: 0;
  color: #4a3f35;
  line-height: 1.8;
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.2px;
}

@keyframes descReveal {
  0% {
    opacity: 0;
    transform: translateY(-8px) scaleY(0.96);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}



/* Variant Pills Showcase */
.variant-pills-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
  margin-bottom: 8px;
}

.variant-pill {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 10px 16px;
  background: #faf8f6;
  border: 2px solid #ede5e0;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  flex: 1;
  min-width: 100px;
  font-family: 'Poppins', sans-serif;
}

.variant-pill:hover {
  border-color: rgba(255, 111, 97, 0.4);
  background: #fffafa;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 111, 97, 0.08);
}

.variant-pill.active {
  background: linear-gradient(135deg, #fff5f2 0%, #ffeee8 100%);
  border-color: #ff6f61;
  box-shadow: 0 4px 14px rgba(255, 111, 97, 0.15);
}

.variant-weight {
  font-size: 0.85rem;
  font-weight: 700;
  color: #4a3f35;
  margin-bottom: 4px;
  transition: color 0.2s;
}

.variant-pill.active .variant-weight {
  color: #c7603e;
}

.variant-price {
  font-size: 0.9rem;
  font-weight: 600;
  color: #8c7e73;
  transition: color 0.2s;
}

.variant-pill.active .variant-price {
  color: #e64a3a;
}

/* Actions Section — Luxury Controls */
.product-modal-actions {
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/* In Cart Message — Success State */
.product-modal-actions .in-cart-msg {
  order: 2;
  flex: 1;
  min-width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e8f8ea, #d4efdf);
  color: #1a8c3a;
  font-weight: 700;
  font-size: 13px;
  height: 52px;
  border-radius: 16px;
  gap: 8px;
  margin: 0;
  letter-spacing: 0.3px;
  border: 1px solid rgba(40, 167, 69, 0.15);
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.08);
}

.product-modal-actions .in-cart-msg i {
  font-size: 1rem;
}

/* Quantity Selector — Premium Stepper */
.product-modal-actions .qty-selector {
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #faf8f6, #f3eeeb);
  border-radius: 16px;
  border: 1.5px solid rgba(0, 0, 0, 0.06);
  overflow: hidden;
  height: 52px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), inset 0 1px 2px rgba(0, 0, 0, 0.02);
}

.product-modal-actions .qty-btn {
  width: 48px;
  height: 100%;
  background: transparent;
  border: none;
  color: #c7603e;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.product-modal-actions .qty-btn:hover {
  background: rgba(255, 111, 97, 0.1);
  color: #e64a3a;
}

.product-modal-actions .qty-btn:active {
  background: rgba(255, 111, 97, 0.2);
  transform: scale(0.92);
}

.product-modal-actions .qty-value {
  width: 44px;
  text-align: center;
  font-weight: 800;
  font-size: 17px;
  color: #2d2520;
  letter-spacing: -0.5px;
  border-left: 1px solid rgba(0, 0, 0, 0.05);
  border-right: 1px solid rgba(0, 0, 0, 0.05);
  line-height: 52px;
}

/* Add to Cart Button — Premium CTA */
.product-modal-actions .add-to-cart-btn {
  flex: 1;
  background: linear-gradient(135deg, #ff6f61 0%, #e64a3a 100%);
  color: #fff;
  border: none;
  padding: 14px 24px;
  border-radius: 16px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  letter-spacing: 0.4px;
  box-shadow:
    0 8px 24px rgba(255, 111, 97, 0.3),
    0 2px 6px rgba(255, 111, 97, 0.15);
  height: 52px;
  text-transform: none;
  position: relative;
  overflow: hidden;
}

.product-modal-actions .add-to-cart-btn i {
  font-size: 1.4rem;
}

.product-modal-actions .add-to-cart-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  transition: left 0.5s ease;
}

.product-modal-actions .add-to-cart-btn:hover::before {
  left: 100%;
}

.product-modal-actions .add-to-cart-btn:hover {
  transform: translateY(-3px);
  box-shadow:
    0 12px 32px rgba(255, 111, 97, 0.4),
    0 4px 12px rgba(255, 111, 97, 0.2);
}

.product-modal-actions .add-to-cart-btn:active {
  transform: translateY(-1px);
}

/* Share Button Styling */
.product-modal-actions>.share-btn {
  order: 3;
  flex: 0 0 52px;
  height: 52px;
  background: linear-gradient(135deg, #faf8f6, #f3eeeb);
  border: 1.5px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  color: #c7603e;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 1rem;
}

.product-modal-actions>.share-btn:hover {
  background: rgba(255, 111, 97, 0.1);
  color: #e64a3a;
  border-color: rgba(255, 111, 97, 0.2);
  transform: scale(1.05);
}

@media (max-width: 768px) {
  .product-modal {
    align-items: flex-end;
    padding: 0;
  }

  .product-modal-content {
    flex-direction: column;
    width: 100%;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    overflow: hidden;
    border-radius: 24px 24px 0 0;
    transform: translateY(100%);
    margin: 0;
    padding-bottom: 0;
    display: flex;
  }

  .product-modal.show .product-modal-content {
    transform: translateY(0);
  }

  .product-modal-drag-handle {
    display: flex;
    justify-content: center;
    padding: 12px 0 8px;
    cursor: grab;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
  }

  .product-modal-drag-handle span {
    width: 40px;
    height: 5px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    display: block;
  }

  body.dark .product-modal-drag-handle span {
    background: rgba(255, 255, 255, 0.2);
  }

  .product-modal-close {
    top: 15px;
    right: 15px;
  }

  .product-modal-image-col {
    width: 100%;
    height: 240px;
    max-height: 240px;
    min-height: 200px;
    flex: 0 0 auto;
    border-radius: 0;
  }

  .modal-carousel,
  .modal-carousel-track,
  .modal-carousel-slide {
    height: 240px !important;
    max-height: 240px !important;
  }

  .product-modal-image-col .modal-carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    max-height: 240px;
  }

  .product-modal-info-col {
    width: 100%;
    padding: 20px 20px 24px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
  }

  .product-modal-info-col::before {
    left: 20px;
    right: 20px;
  }

  .product-modal-title {
    font-size: 1.5rem;
  }

  .product-modal-actions {
    padding-bottom: 4px;
    padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    position: sticky;
    bottom: 0;
    background: var(--surface-color);
    margin: 0 -20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
  }

  .product-modal-actions>.qty-selector {
    order: 1;
    flex: 0 0 auto;
  }

  .product-modal-actions>.share-btn {
    order: 3;
    margin-left: auto;
  }

  .product-modal-actions>.add-to-cart-btn,
  .product-modal-actions>.in-cart-msg {
    order: 2;
    flex: 1;
    min-width: 100px;
  }

  .product-modal-description {
    font-size: 0.9rem;
    margin-bottom: 20px;
  }
}

/* Very short screens (landscape, small phones) */
@media (max-width: 768px) and (max-height: 600px) {
  .product-modal-content {
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
  }

  .product-modal-image-col {
    height: 180px;
    max-height: 180px;
    min-height: 150px;
  }

  .modal-carousel,
  .modal-carousel-track,
  .modal-carousel-slide {
    height: 180px !important;
    max-height: 180px !important;
  }

  .product-modal-image-col .modal-carousel-slide img {
    max-height: 180px;
  }

  .product-modal-info-col {
    padding: 14px 16px 20px;
  }

  .product-modal-category {
    margin-bottom: 8px;
    margin-top: 6px;
    padding: 4px 10px;
    font-size: 0.7rem;
  }

  .product-modal-title {
    font-size: 1.25rem;
    margin-bottom: 8px;
  }

  .product-modal-price {
    font-size: 1.5rem;
    margin-bottom: 8px;
  }

  .product-modal-actions {
    gap: 8px;
  }

  .product-modal-actions .qty-selector {
    height: 44px;
  }

  .product-modal-actions .add-to-cart-btn {
    height: 44px;
    padding: 10px 18px;
    font-size: 14px;
  }

  .product-modal-actions .in-cart-msg {
    height: 44px;
  }

  .product-modal-actions>.share-btn {
    flex: 0 0 44px;
    height: 44px;
  }
}

/* =============================================
   Vendor Welcome Banner (QR Code Landing)
   ============================================= */
.vendor-welcome-banner {
  margin: 0 15px 20px;
  animation: vendorBannerSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.vendor-welcome-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 50%, #d04a3e 100%);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(255, 111, 97, 0.3);
  position: relative;
  overflow: hidden;
}

.vendor-welcome-inner::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 200px;
  height: 200px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 50%;
  pointer-events: none;
}

.vendor-welcome-inner::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: 10%;
  width: 120px;
  height: 120px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 50%;
  pointer-events: none;
}

.vendor-welcome-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: white;
  flex-shrink: 0;
  backdrop-filter: blur(8px);
}

.vendor-welcome-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 1;
}

.vendor-welcome-label {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.vendor-welcome-name {
  font-size: 1.2rem;
  color: white;
  font-weight: 700;
  line-height: 1.2;
}

.vendor-welcome-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  transition: all 0.2s;
  flex-shrink: 0;
  z-index: 1;
}

.vendor-welcome-close:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

@keyframes vendorBannerSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes vendorBannerSlideOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  to {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
}

/* =============================================
   Veg / Non-Veg Diet Badges & Toggle
   ============================================= */

/* Diet badge on product cards */
.diet-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 5;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.diet-badge.diet-veg {
  border: 2px solid #2e7d32;
  background: rgba(255, 255, 255, 0.92);
}

.diet-badge.diet-nonveg {
  border: 2px solid #c62828;
  background: rgba(255, 255, 255, 0.92);
}

.diet-badge .diet-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.diet-veg .diet-dot {
  background: #2e7d32;
}

.diet-nonveg .diet-dot {
  background: #c62828;
}

/* Inline diet dot (used in toggle label) */
.diet-dot-inline {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}

.diet-dot-inline.veg {
  background: #2e7d32;
  box-shadow: 0 0 4px rgba(46, 125, 50, 0.4);
}

.diet-dot-inline.nonveg {
  background: #c62828;
}

/* =============================================
   Premium Diet Filter — Segmented Control
   ============================================= */
.premium-diet-filter {
  position: relative;
  display: inline-flex;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 50px;
  padding: 4px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(8px);
}

.diet-filter-slider {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 0;
  background: #fff;
  border-radius: 50px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.4s ease;
  z-index: 0;
}

.diet-filter-btn {
  position: relative;
  z-index: 1;
  background: transparent;
  border: none;
  padding: 8px 20px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #8c8c8c;
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  border-radius: 11px;
  transition: color 0.3s ease, transform 0.15s;
  font-family: 'Poppins', sans-serif;
  outline: none;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.2px;
}

.diet-filter-btn:active {
  transform: scale(0.96);
}

.diet-filter-btn i {
  font-size: 0.75rem;
}

/* Active state colors */
.diet-filter-btn.active[data-filter="all"] {
  color: #333;
}

.diet-filter-btn.active[data-filter="veg"] {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.diet-filter-btn.active[data-filter="nonveg"] {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* Diet icon boxes */
.diet-icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-radius: 3px;
}

.diet-icon-box .diet-dot {
  width: 7px;
  height: 7px;
  background: currentColor;
  border-radius: 50%;
}

.diet-filter-btn.active[data-filter="veg"] .diet-icon-box {
  border-color: rgba(255, 255, 255, 0.85);
}

.diet-filter-btn.active[data-filter="veg"] .diet-dot {
  background: rgba(255, 255, 255, 0.95);
}

.diet-filter-btn.active[data-filter="nonveg"] .diet-icon-box {
  border-color: rgba(255, 255, 255, 0.85);
}

.diet-filter-btn.active[data-filter="nonveg"] .diet-dot {
  background: rgba(255, 255, 255, 0.95);
}

.diet-icon-box.veg {
  color: #2e7d32;
}

.diet-icon-box.nonveg {
  color: #c62828;
}

/* === Mobile responsiveness === */
@media (max-width: 768px) {
  .header-diet-row {
    padding: 4px 0 6px;
  }

  .premium-diet-filter {
    padding: 3px;
    border-radius: 50px;
  }

  .diet-filter-btn {
    padding: 7px 14px;
    font-size: 0.78rem;
    gap: 5px;
    border-radius: 50px;
  }

  .diet-filter-slider {
    top: 3px;
    bottom: 3px;
    border-radius: 50px;
  }
}

@media (max-width: 360px) {
  .diet-filter-btn {
    padding: 6px 10px;
    font-size: 0.72rem;
    gap: 4px;
  }

  .diet-icon-box {
    width: 11px;
    height: 11px;
    border-width: 1.5px;
  }

  .diet-icon-box .diet-dot {
    width: 5px;
    height: 5px;
  }
}

/* =============================================
   REDESIGN — Greeting Banner (Premium)
   ============================================= */
.greeting-banner {
  position: relative;
  padding: 14px 16px;
  margin-bottom: 10px;
  background: linear-gradient(135deg,
      rgba(255, 111, 97, 0.12) 0%,
      rgba(255, 154, 118, 0.08) 50%,
      rgba(255, 200, 160, 0.06) 100%);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-radius: 14px;
  border: 1px solid rgba(255, 111, 97, 0.15);
  animation: greetingSlideIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
  z-index: 1;
  box-shadow:
    0 4px 16px rgba(255, 111, 97, 0.08),
    0 1px 3px rgba(0, 0, 0, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

body.dark .greeting-banner {
  background: linear-gradient(135deg,
      rgba(255, 111, 97, 0.1) 0%,
      rgba(255, 111, 97, 0.04) 50%,
      rgba(40, 30, 25, 0.6) 100%);
  border-color: rgba(255, 111, 97, 0.12);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.25),
    0 1px 4px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Floating background orbs */
.greeting-bg-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.18;
}

.greeting-bg-orb-1 {
  width: 120px;
  height: 120px;
  top: -40px;
  right: -30px;
  background: radial-gradient(circle, rgba(255, 111, 97, 0.2) 0%, transparent 70%);
  animation: orbFloat1 6s ease-in-out infinite alternate;
}

.greeting-bg-orb-2 {
  width: 70px;
  height: 70px;
  bottom: -20px;
  left: 25%;
  background: radial-gradient(circle, rgba(255, 154, 118, 0.18) 0%, transparent 70%);
  animation: orbFloat2 8s ease-in-out infinite alternate;
}

.greeting-bg-orb-3 {
  width: 50px;
  height: 50px;
  top: 40%;
  left: 8%;
  background: radial-gradient(circle, rgba(255, 200, 160, 0.15) 0%, transparent 70%);
  animation: orbFloat3 5s ease-in-out infinite alternate;
}

body.dark .greeting-bg-orb-1 {
  background: radial-gradient(circle, rgba(255, 111, 97, 0.2) 0%, transparent 70%);
}

body.dark .greeting-bg-orb-2 {
  background: radial-gradient(circle, rgba(255, 154, 118, 0.15) 0%, transparent 70%);
}

body.dark .greeting-bg-orb-3 {
  background: radial-gradient(circle, rgba(255, 200, 160, 0.1) 0%, transparent 70%);
}

@keyframes orbFloat1 {
  0% {
    transform: translate(0, 0) scale(1);
  }

  100% {
    transform: translate(-15px, 12px) scale(1.15);
  }
}

@keyframes orbFloat2 {
  0% {
    transform: translate(0, 0) scale(1);
  }

  100% {
    transform: translate(10px, -8px) scale(1.1);
  }
}

@keyframes orbFloat3 {
  0% {
    transform: translate(0, 0) scale(1);
  }

  100% {
    transform: translate(-8px, -6px) scale(1.2);
  }
}

/* Main layout row */
.greeting-main-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: relative;
  z-index: 1;
}

.greeting-text-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.greeting-text {
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--text-primary);
  letter-spacing: -0.3px;
  line-height: 1.25;
}

body.dark .greeting-text {
  color: #fff;
}

/* Inline waving hand */
.greeting-wave {
  display: inline-block;
  animation: greetingWave 2s ease-in-out infinite;
  transform-origin: 70% 70%;
  font-size: 1.15em;
}

@keyframes greetingWave {

  0%,
  60%,
  100% {
    transform: rotate(0deg);
  }

  10%,
  30% {
    transform: rotate(14deg);
  }

  20% {
    transform: rotate(-8deg);
  }

  40% {
    transform: rotate(-4deg);
  }
}

/* Delivery info row */
.greeting-delivery-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.greeting-location,
.greeting-eta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.greeting-location i {
  font-size: 0.72rem;
  color: var(--primary);
}

.greeting-eta i {
  font-size: 0.72rem;
  color: var(--primary);
}

.greeting-eta-divider {
  color: var(--text-secondary);
  opacity: 0.4;
  font-size: 0.6rem;
}

body.dark .greeting-location,
body.dark .greeting-eta {
  color: rgba(255, 255, 255, 0.7);
}

body.dark .greeting-eta-divider {
  color: rgba(255, 255, 255, 0.25);
}

/* Right-side time emoji ring */
.greeting-icon-ring {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255, 111, 97, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.3rem;
  border: 1px solid rgba(255, 111, 97, 0.12);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: transform 0.3s ease;
}

.greeting-icon-ring:hover {
  transform: scale(1.08) rotate(-4deg);
}

body.dark .greeting-icon-ring {
  background: rgba(255, 111, 97, 0.12);
  border-color: rgba(255, 111, 97, 0.2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

@keyframes greetingSlideIn {
  from {
    opacity: 0;
    transform: translateY(-12px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Old search-mic-icon styles removed, now handled by .search-mic-btn */

.search-container input[type="search"] {
  padding-right: 48px;
}

/* =============================================
   REDESIGN — Quick Filter Chips
   ============================================= */
.quick-filter-strip {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 4px 6px;
  margin-bottom: 2px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.quick-filter-strip::-webkit-scrollbar {
  display: none;
}

.quick-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: 50px;
  border: 1.5px solid var(--border-color);
  background: var(--surface-color);
  color: var(--text-secondary);
  font-size: 0.76rem;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

.quick-chip i {
  font-size: 0.78rem;
  transition: transform 0.3s ease;
}

.quick-chip:hover {
  border-color: rgba(255, 111, 97, 0.3);
  color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255, 111, 97, 0.1);
}

.quick-chip:hover i {
  transform: scale(1.15);
}

.quick-chip.active {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 16px rgba(255, 111, 97, 0.3);
}

.quick-chip.active i {
  animation: chipIconPulse 1.5s ease-in-out infinite;
}

@keyframes chipIconPulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }
}

body.dark .quick-chip {
  background: var(--surface-color);
  border-color: var(--border-color);
}

/* =============================================
   REDESIGN — Category Pill Scroller (Mobile)
   ============================================= */
.category-pill-scroller {
  display: flex;
  /* Unified filter strip — always visible */
  gap: 6px;
  overflow-x: auto;
  padding: 0 4px 8px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.category-pill-scroller::-webkit-scrollbar {
  display: none;
}

.category-pill-scroller:empty {
  display: none !important;
}

.pill-separator {
  flex: 0 0 auto;
  width: 1px;
  height: 20px;
  background: var(--border-color);
  margin: auto 2px;
  opacity: 0.5;
}

.cat-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 10px;
  border: 1.5px solid var(--border-color);
  background: var(--surface-color);
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.25s ease;
}

.cat-pill i {
  font-size: 0.85rem;
  width: 18px;
  text-align: center;
}

.cat-pill:hover {
  border-color: rgba(255, 111, 97, 0.35);
  color: var(--primary);
}

.cat-pill.active {
  background: linear-gradient(135deg, rgba(255, 111, 97, 0.12) 0%, rgba(255, 111, 97, 0.06) 100%);
  color: var(--primary);
  border-color: var(--primary);
  font-weight: 700;
  box-shadow: 0 3px 12px rgba(255, 111, 97, 0.12);
}

/* =============================================
   REDESIGN — Enhanced Vendor Cards
   ============================================= */
.vendor-card-inner {
  position: relative;
}

.vendor-status-dot {
  position: absolute;
  bottom: 3px;
  right: 3px;
  width: 14px;
  height: 14px;
  background: #25d366;
  border-radius: 50%;
  border: 2.5px solid var(--surface-color);
  z-index: 2;
  box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4);
  animation: statusPulse 2s ease-in-out infinite;
}

@keyframes statusPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4);
  }

  70% {
    box-shadow: 0 0 0 6px rgba(37, 211, 102, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

.vendor-product-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  z-index: 2;
  border: 2px solid var(--surface-color);
  letter-spacing: 0.2px;
}

.vendor-card.active .vendor-product-count {
  background: rgba(255, 255, 255, 0.25);
  border-color: transparent;
}

.vendor-card.active .vendor-status-dot {
  border-color: rgba(255, 255, 255, 0.3);
}

/* =============================================
   REDESIGN — Product Count Bar
   ============================================= */
.product-count-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 4px 4px;
  gap: 8px;
}

.product-count-text {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.product-count-filter {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary);
  background: rgba(255, 111, 97, 0.08);
  padding: 4px 10px;
  border-radius: 20px;
  display: none;
}

.product-count-filter:not(:empty) {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* =============================================
   Compact Delivery Info Bar
   ============================================= */
.delivery-info-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  margin-bottom: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: rgba(0, 0, 0, 0.025);
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.04);
}
body.dark .delivery-info-bar {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.06);
}
.delivery-info-bar i {
  font-size: 0.72rem;
  color: var(--primary);
}
.delivery-info-divider {
  opacity: 0.4;
  font-size: 0.6rem;
}

/* =============================================
   REDESIGN — Mobile Responsive Overrides
   ============================================= */
@media (max-width: 1024px) {

  /* Show mobile diet filter row, hide desktop center one */
  .header-center-filter {
    display: none;
  }

  .header-diet-row {
    display: flex;
  }

  .greeting-banner {
    margin-bottom: 8px;
  }

  .quick-filter-strip {
    margin-bottom: 2px;
  }
}

@media (max-width: 768px) {
  .greeting-banner {
    padding: 12px 14px;
    margin-bottom: 8px;
    border-radius: 12px;
  }

  .greeting-icon-ring {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 1.2rem;
  }

  .greeting-text {
    font-size: 1rem;
  }

  .greeting-delivery-row {
    gap: 5px;
  }

  .greeting-location,
  .greeting-eta {
    font-size: 0.74rem;
  }

  .vendor-section-header {
    padding: 0 2px;
  }

  .vendor-section-title {
    font-size: 0.85rem;
  }

  .quick-chip {
    padding: 5px 12px;
    font-size: 0.74rem;
  }
}

@media (max-width: 480px) {
  .greeting-banner {
    padding: 10px 12px;
    border-radius: 10px;
    margin-bottom: 6px;
  }

  .greeting-icon-ring {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    font-size: 1.1rem;
  }

  .greeting-text {
    font-size: 0.92rem;
  }

  .greeting-location,
  .greeting-eta {
    font-size: 0.7rem;
  }

  .quick-chip {
    padding: 5px 10px;
    font-size: 0.72rem;
    gap: 4px;
  }

  .cat-pill {
    padding: 5px 10px;
    font-size: 0.72rem;
  }
}

@media (max-width: 360px) {
  .greeting-banner {
    padding: 12px 14px;
  }

  .greeting-icon-ring {
    width: 38px;
    height: 38px;
    font-size: 1.15rem;
  }

  .greeting-text {
    font-size: 0.92rem;
  }

  .greeting-location,
  .greeting-eta {
    font-size: 0.7rem;
  }

  .quick-chip {
    padding: 6px 10px;
    font-size: 0.72rem;
  }

  .cat-pill {
    padding: 6px 10px;
    font-size: 0.72rem;
  }

  .product-count-text {
    font-size: 0.75rem;
  }
}

/* =============================================
   UX Microinteractions
   ============================================= */

/* Button Add/Success State */
.btn-added-state {
  background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%) !important;
  color: white !important;
  pointer-events: none;
}

.btn-pop-anim {
  animation: btnPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes btnPop {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.95);
  }

  70% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

/* Floating +1 Animation */
.floating-plus-one {
  position: fixed;
  color: var(--primary);
  font-weight: 800;
  font-size: 1.2rem;
  pointer-events: none;
  z-index: 9999;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  animation: floatUpAndFade 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

body.dark .floating-plus-one {
  color: #ff8a76;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

@keyframes floatUpAndFade {
  0% {
    transform: translate(-50%, 0) scale(0.8);
    opacity: 0;
  }

  15% {
    transform: translate(-50%, -10px) scale(1.2);
    opacity: 1;
  }

  100% {
    transform: translate(-50%, -45px) scale(1);
    opacity: 0;
  }
}

/* Cart Bounce Animation */
.cart-bounce {
  animation: cartBounceAnim 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes cartBounceAnim {
  0% {
    transform: scale(1);
  }

  40% {
    transform: scale(1.15) translateY(-4px);
  }

  70% {
    transform: scale(0.95) translateY(2px);
  }

  100% {
    transform: scale(1) translateY(0);
  }
}

/* =============================================
   Vendor Carousel Redesign
   ============================================= */

.vendor-section {
  margin: 8px 0 6px;
  width: 100%;
  overflow: hidden;
}

.vendor-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4px;
  margin-bottom: 8px;
}

.vendor-section-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.vendor-carousel {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 12px;
  padding: 4px 16px 8px 4px;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}

.vendor-carousel::-webkit-scrollbar {
  display: none;
}

.vendor-card-premium {
  position: relative;
  flex: 0 0 auto;
  min-width: 150px;
  max-width: 220px;
  scroll-snap-align: start;
  background: var(--surface);
  border-radius: 12px;
  padding: 12px 16px 12px 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.03);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  text-align: left;
}

body.dark .vendor-card-premium {
  background: rgba(40, 40, 40, 0.6);
  backdrop-filter: blur(10px);
  border-color: rgba(255, 255, 255, 0.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.vendor-card-premium:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

body.dark .vendor-card-premium:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.vendor-card-premium:hover .vendor-logo-bg {
  transform: scale(1.05);
}

.vendor-card-premium:active {
  transform: translateY(0) scale(0.98);
}

.vendor-card-premium.active {
  border: 2px solid var(--primary);
  background: rgba(255, 111, 97, 0.05);
}

body.dark .vendor-card-premium.active {
  border: 2px solid var(--primary);
  background: rgba(255, 111, 97, 0.1);
  box-shadow: 0 0 15px rgba(255, 111, 97, 0.25);
}

/* Vendor Logo */
.vendor-logo-wrapper {
  margin-bottom: 0;
  flex-shrink: 0;
  position: relative;
}

.vendor-logo-bg {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(240,240,240,0.5) 100%);
  border: 1px solid rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease;
}

body.dark .vendor-logo-bg {
  background: linear-gradient(135deg, rgba(60,60,60,0.8) 0%, rgba(40,40,40,0.5) 100%);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.vendor-initial {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--primary);
  z-index: 2;
}

.vendor-logo-bg .bg-icon {
  position: absolute;
  font-size: 1.8rem;
  color: rgba(0, 0, 0, 0.02);
  z-index: 1;
}

body.dark .vendor-logo-bg .bg-icon {
  color: rgba(255, 255, 255, 0.02);
}

/* Status Dot integrated into logo */
.vendor-status-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--surface);
  z-index: 5;
}

body.dark .vendor-status-dot {
  border-color: #2a2a2a;
}

.vendor-card-premium.active .vendor-status-dot {
  border-color: #ffeaea;
}

body.dark .vendor-card-premium.active .vendor-status-dot {
  border-color: #3b2b2b;
}

.vendor-status-dot.status-open {
  background: #2ecc71;
  box-shadow: 0 0 4px #2ecc71;
}

.vendor-status-dot.status-closed {
  background: #e74c3c;
}

/* Vendor Info */
.vendor-info-block {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.vendor-shop-name {
  font-size: 0.9rem;
  font-weight: 800;
  margin: 0;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.2px;
}

.vendor-rating-row {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
}

.vendor-rating-row .rating-stars {
  color: #f59e0b;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 3px;
}

.vendor-rating-row .rating-count {
  color: var(--text-secondary);
}

.vendor-meta-row {
  display: flex;
}

.premium-vendor-items {
  color: var(--text-secondary);
  font-size: 0.7rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* =============================================
   PER-ITEM NOTE (Add note / Edit note)
   ============================================= */
.cart-item-note-wrap {
  margin-top: 6px;
}

.cart-item-note-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 1.5px dashed var(--border-color);
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  padding: 4px 10px;
  transition: all 0.2s ease;
}

.cart-item-note-btn:hover {
  color: var(--primary);
  border-color: var(--primary);
  background: rgba(255, 111, 97, 0.04);
}

.cart-item-note-btn i {
  font-size: 0.65rem;
}

/* Green dot when note exists */
.item-note-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-green);
  display: inline-block;
  flex-shrink: 0;
}

/* Has-note state: show filled style */
.cart-item-note-wrap.has-note .cart-item-note-btn {
  border-style: solid;
  border-color: rgba(37, 211, 102, 0.3);
  color: var(--accent-green);
  background: rgba(37, 211, 102, 0.05);
}

/* Expandable note body */
.cart-item-note-body {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.2s ease,
              margin 0.3s ease;
  margin-top: 0;
}

.cart-item-note-wrap.expanded .cart-item-note-body {
  max-height: 90px;
  opacity: 1;
  margin-top: 6px;
}

.cart-item-note-input {
  width: 100%;
  padding: 7px 10px;
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--text-primary);
  background: var(--bg-color);
  resize: none;
  line-height: 1.35;
  min-height: 36px;
  max-height: 54px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.cart-item-note-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(255, 111, 97, 0.08);
}

.cart-item-note-input::placeholder {
  color: var(--text-secondary);
  opacity: 0.5;
  font-size: 0.75rem;
}

.cart-item-note-count {
  display: block;
  text-align: right;
  font-size: 0.62rem;
  color: var(--text-secondary);
  opacity: 0.6;
  margin-top: 2px;
}

/* ===== Vendor Category Badges ===== */
.vendor-categories-row {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.vendor-cat-badge {
    font-size: 0.62rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    background: rgba(255, 111, 97, 0.08);
    color: #e55a4a;
    white-space: nowrap;
    line-height: 1.4;
}

.vendor-cat-more {
    background: rgba(108, 117, 125, 0.1);
    color: #6c757d;
}
/* ===== Modal Overlay ===== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    backdrop-filter: blur(3px);
}
.modal-overlay.active {
    display: flex;
    animation: fadeIn 0.3s ease;
}
.modal-content {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    animation: slideUp 0.3s ease;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Location Tutorial Modal */
.loc-tutorial-modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.8);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}
.loc-tutorial-modal.visible {
    opacity: 1;
    visibility: visible;
}
.loc-tutorial-content {
    background: #2b2e35;
    color: #e8eaed;
    width: 100%;
    max-width: 360px;
    border-radius: 20px;
    padding: 24px;
    text-align: center;
    font-family: 'Arial', sans-serif;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    transform: translateY(20px);
    transition: all 0.3s ease;
}
.loc-tutorial-modal.visible .loc-tutorial-content {
    transform: translateY(0);
}
.loc-tutorial-icon {
    width: 50px;
    height: 50px;
    background: #1a73e8;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin: 0 auto 16px;
}
.loc-tutorial-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
    line-height: 1.4;
}
.loc-tutorial-mockup {
    background: #1f2126;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
    text-align: left;
    border: 1px solid #3c4043;
}
.loc-mock-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 8px;
}
.loc-mock-row.highlight {
    background: rgba(138, 180, 248, 0.1);
    border: 1px solid #8ab4f8;
}
.loc-mock-img {
    width: 44px;
    height: 44px;
    background: #3c4043;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #8ab4f8;
}
.loc-mock-text h4 { margin: 0 0 4px; font-size: 15px; font-weight: 500; color: #e8eaed; }
.loc-mock-text p { margin: 0; font-size: 12px; color: #9aa0a6; }
.loc-mock-radio {
    margin-left: auto;
    width: 20px; height: 20px;
    border-radius: 50%;
    border: 2px solid #9aa0a6;
}
.loc-mock-row.highlight .loc-mock-radio {
    border-color: #8ab4f8;
    background: #8ab4f8;
    display: flex;
    align-items: center;
    justify-content: center;
}
.loc-mock-row.highlight .loc-mock-radio::after {
    content: '';
    width: 8px; height: 8px;
    background: #1f2126;
    border-radius: 50%;
}
.loc-mock-btn {
    background: #0842a0;
    color: #d3e3fd;
    padding: 12px;
    border-radius: 24px;
    text-align: center;
    font-weight: 500;
    margin-top: 8px;
    font-size: 14px;
}
.loc-mock-btn.highlight {
    background: #1a73e8;
    color: white;
    font-weight: 600;
}
.loc-tutorial-instruction {
    font-size: 14px;
    color: #9aa0a6;
    margin-bottom: 24px;
    line-height: 1.5;
}
.loc-tutorial-instruction strong {
    color: #e8eaed;
}
.loc-tutorial-action {
    background: #ff6f61;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 15px;
    width: 100%;
    cursor: pointer;
    transition: background 0.2s;
}
.loc-tutorial-action:hover {
    background: #e55c50;
}
/* Tutorial Animations */
@keyframes pulseHighlight {
    0% { box-shadow: 0 0 0 0 rgba(138, 180, 248, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(138, 180, 248, 0); }
    100% { box-shadow: 0 0 0 0 rgba(138, 180, 248, 0); }
}
.loc-mock-row.highlight, .loc-mock-btn.highlight {
    animation: pulseHighlight 2s infinite;
    position: relative;
}
.loc-mock-row.highlight::before, .loc-mock-btn.highlight::before {
    content: '??';
    position: absolute;
    right: -20px;
    bottom: -15px;
    font-size: 24px;
    animation: pointerBounce 1.5s infinite;
    z-index: 10;
}
@keyframes pointerBounce {
    0%, 100% { transform: translateY(0) rotate(-15deg); }
    50% { transform: translateY(-8px) rotate(-15deg); }
}

/* =============================================
   DUAL-MODE ARCHITECTURE STYLES
   ============================================= */

/* Mode Header */
.mode-header {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    margin: 4px 0 8px;
    background: linear-gradient(135deg, rgba(255,111,97,0.08) 0%, rgba(255,154,118,0.05) 100%);
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary);
    border: 1px solid rgba(255,111,97,0.1);
}
.mode-header i {
    font-size: 1.1rem;
}
body.dark .mode-header {
    background: linear-gradient(135deg, rgba(255,111,97,0.12) 0%, rgba(255,154,118,0.06) 100%);
    border-color: rgba(255,111,97,0.15);
}

/* Breadcrumb Navigation */
.breadcrumb-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    margin: 0 0 8px;
    font-size: 0.78rem;
    color: var(--text-secondary);
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}
.breadcrumb-nav::-webkit-scrollbar { display: none; }
.breadcrumb-nav a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    transition: opacity 0.2s;
    display: flex;
    align-items: center;
    gap: 4px;
}
.breadcrumb-nav a:hover { opacity: 0.7; }
.breadcrumb-nav a i { font-size: 0.7rem; }
.breadcrumb-sep {
    color: var(--text-secondary);
    opacity: 0.4;
    font-size: 0.6rem;
}
#breadcrumbCurrent {
    font-weight: 700;
    color: var(--text-primary);
}

/* Vendor Type Badge (on product cards) */
.vendor-type-badge {
    font-size: 0.8rem;
    margin-right: 2px;
    vertical-align: middle;
}

/* =============================================
   FOOD MODE: Vendor-Centric Restaurant Cards
   ============================================= */
.vendor-restaurant-card {
    background: var(--surface);
    border-radius: 16px;
    margin-bottom: 16px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.04);
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    transition: all 0.3s ease;
    grid-column: 1 / -1; /* span full grid width */
}
body.dark .vendor-restaurant-card {
    background: rgba(30,30,30,0.6);
    border-color: rgba(255,255,255,0.05);
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}
.vendor-restaurant-card:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,0.08);
}

.vendor-restaurant-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    background: linear-gradient(135deg, rgba(255,111,97,0.03) 0%, transparent 100%);
}
body.dark .vendor-restaurant-header {
    border-bottom-color: rgba(255,255,255,0.05);
    background: linear-gradient(135deg, rgba(255,111,97,0.06) 0%, transparent 100%);
}

.vendor-restaurant-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.vendor-restaurant-avatar {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, #ff6f61 0%, #ff9a76 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    font-weight: 800;
    flex-shrink: 0;
    box-shadow: 0 3px 8px rgba(255,111,97,0.25);
}

.vendor-restaurant-details {
    flex: 1;
    min-width: 0;
}
.vendor-restaurant-details h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vendor-restaurant-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
    font-size: 0.72rem;
}
.vendor-type-label {
    color: var(--text-secondary);
    font-weight: 600;
    background: rgba(0,0,0,0.04);
    padding: 1px 8px;
    border-radius: 20px;
}
body.dark .vendor-type-label {
    background: rgba(255,255,255,0.08);
}
.vendor-restaurant-rating {
    color: #f59e0b;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 3px;
}
.vendor-restaurant-rating i {
    font-size: 0.65rem;
}
.vendor-restaurant-new {
    color: var(--primary);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 3px;
}

.vendor-restaurant-viewall {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    transition: opacity 0.2s;
    padding: 4px 8px;
    border-radius: 8px;
}
.vendor-restaurant-viewall:hover {
    opacity: 0.7;
    background: rgba(255,111,97,0.05);
}
.vendor-restaurant-viewall i {
    font-size: 0.7rem;
    transition: transform 0.2s;
}
.vendor-restaurant-viewall:hover i {
    transform: translateX(3px);
}

.vendor-restaurant-products {
    display: flex;
    overflow-x: auto;
    gap: 12px;
    padding: 14px 16px 16px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
}
.vendor-restaurant-products::-webkit-scrollbar { display: none; }

.vendor-restaurant-products .product-card {
    flex: 0 0 160px;
    min-width: 160px;
    scroll-snap-align: start;
}

@media (max-width: 480px) {
    .vendor-restaurant-products .product-card {
        flex: 0 0 145px;
        min-width: 145px;
    }
    .vendor-restaurant-header {
        padding: 12px 12px 8px;
    }
    .vendor-restaurant-products {
        padding: 10px 12px 14px;
        gap: 10px;
    }
    .vendor-restaurant-avatar {
        width: 36px;
        height: 36px;
        font-size: 1.1rem;
        border-radius: 10px;
    }
    .vendor-restaurant-details h3 {
        font-size: 0.88rem;
    }
    .breadcrumb-nav {
        padding: 4px 8px;
        font-size: 0.72rem;
    }
    .mode-header {
        padding: 8px 12px;
        font-size: 0.9rem;
    }
}

/* ──── Search Mode Indicator ──────────────────────────────────── */
.search-mode-indicator {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    margin: 6px 16px 2px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--primary, #ff6f61);
    background: linear-gradient(135deg, rgba(255,111,97,0.06), rgba(255,154,118,0.08));
    border-radius: 10px;
    border: 1px solid rgba(255,111,97,0.12);
    letter-spacing: 0.2px;
}
.search-mode-indicator i {
    font-size: 0.72rem;
    opacity: 0.8;
}
.search-mode-indicator strong {
    font-weight: 700;
}
body.dark .search-mode-indicator {
    background: rgba(255,111,97,0.1);
    border-color: rgba(255,111,97,0.18);
}
@media (max-width: 480px) {
    .search-mode-indicator {
        margin: 4px 12px 0;
        font-size: 0.72rem;
        padding: 4px 10px;
    }
}

/* ========================================== */
/*           PREMIUM SKELETON LOADERS         */
/* ========================================== */

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.skeleton-shimmer {
  background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%) !important;
  background-size: 200% 100% !important;
  animation: shimmer 1.4s ease infinite !important;
}

body.dark .skeleton-shimmer,
[data-theme="dark"] .skeleton-shimmer {
  background: linear-gradient(90deg, #1e1e1e 25%, #2d2d2d 37%, #1e1e1e 63%) !important;
  background-size: 200% 100% !important;
}

.skeleton-card {
  opacity: 1 !important;
  transform: none !important;
  pointer-events: none !important;
  user-select: none !important;
  background: var(--surface-color, #fff) !important;
  border: 1px solid var(--border-color, #f0f0f0) !important;
  box-shadow: none !important;
  transition: none !important;
}

.skeleton-card:hover {
  transform: none !important;
  box-shadow: none !important;
}

.skeleton-card .product-image-container {
  height: 160px;
  width: 100%;
  background: var(--border-color, #f5f5f5) !important;
  border-radius: 16px 16px 0 0 !important;
}

.skeleton-card .info {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 14px 16px 16px !important;
}

.skeleton-line {
  height: 14px;
  border-radius: 4px;
  display: block;
}

.skeleton-title {
  width: 80%;
  height: 18px;
  margin-bottom: 4px;
}

.skeleton-meta {
  width: 50%;
  height: 12px;
  margin-bottom: 8px;
}

.skeleton-footer {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: auto !important;
  padding-top: 12px !important;
  width: 100% !important;
}

.skeleton-price {
  width: 30%;
  height: 20px;
}

.skeleton-btn {
  width: 40%;
  height: 32px;
  border-radius: 8px;
}

/* Skeleton Vendor Card adjustments */
.skeleton-vendor-card {
  pointer-events: none !important;
  user-select: none !important;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
}

/* Count bar skeleton */
.skeleton-count-shimmer {
  display: inline-block;
  width: 120px;
  height: 16px;
  vertical-align: middle;
  border-radius: 4px;
}

/* ══════════════════════════════════════════════════════════════════
   MODE SELECTION OVERLAY
   ══════════════════════════════════════════════════════════════════ */
.mode-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.35s ease;
}
.mode-overlay.visible {
    opacity: 1;
}
.mode-overlay-card {
    background: #fff;
    border-radius: 24px;
    padding: 36px 28px 28px;
    max-width: 380px;
    width: 90vw;
    box-shadow: 0 24px 64px rgba(0,0,0,0.18);
    transform: translateY(30px) scale(0.95);
    transition: transform 0.4s cubic-bezier(.21,1.02,.73,1);
}
.mode-overlay.visible .mode-overlay-card {
    transform: translateY(0) scale(1);
}
.mode-overlay-header {
    text-align: center;
    margin-bottom: 24px;
}
.mode-overlay-logo {
    font-size: 2.5rem;
    margin-bottom: 8px;
    animation: modeBounce 1.5s ease infinite;
}
@keyframes modeBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
.mode-overlay-header h2 {
    font-size: 1.35rem;
    font-weight: 800;
    color: #1a1a2e;
    margin: 0 0 4px;
    letter-spacing: -0.3px;
}
.mode-overlay-header p {
    font-size: 0.88rem;
    color: #888;
    margin: 0;
    font-weight: 500;
}
.mode-overlay-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mode-overlay-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px 18px;
    border: 2px solid #f0f0f0;
    border-radius: 16px;
    background: #fafafa;
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: left;
    position: relative;
    overflow: hidden;
}
.mode-overlay-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.mode-overlay-food:hover {
    border-color: #ff6f61;
    background: linear-gradient(135deg, #fff5f4, #fff);
}
.mode-overlay-grocery:hover {
    border-color: #4CAF50;
    background: linear-gradient(135deg, #f2fdf3, #fff);
}
.mode-overlay-puja:hover {
    border-color: #ff9800;
    background: linear-gradient(135deg, #fff8e8, #fff);
}
.mode-overlay-vegetables:hover {
    border-color: #2e7d32;
    background: linear-gradient(135deg, #e8f5e9, #fff);
}
.mode-overlay-emoji {
    font-size: 1.8rem;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.mode-overlay-label {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a1a2e;
    display: block;
    line-height: 1.2;
}
.mode-overlay-desc {
    font-size: 0.75rem;
    color: #999;
    font-weight: 500;
    display: block;
    margin-top: 2px;
}
.mode-overlay-btn::after {
    content: '→';
    position: absolute;
    right: 18px;
    font-size: 1.1rem;
    color: #ccc;
    font-weight: 700;
    transition: all 0.25s;
}
.mode-overlay-btn:hover::after {
    right: 14px;
    color: #666;
}

/* Dark mode overlay */
body.dark .mode-overlay-card {
    background: #1e1e2e;
    box-shadow: 0 24px 64px rgba(0,0,0,0.5);
}
body.dark .mode-overlay-header h2 { color: #f0f0f0; }
body.dark .mode-overlay-header p { color: #888; }
body.dark .mode-overlay-btn {
    background: #252538;
    border-color: #333;
}
body.dark .mode-overlay-label { color: #f0f0f0; }
body.dark .mode-overlay-desc { color: #777; }
body.dark .mode-overlay-emoji {
    background: #1e1e2e;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
body.dark .mode-overlay-food:hover {
    border-color: #ff6f61;
    background: linear-gradient(135deg, rgba(255,111,97,0.08), #252538);
}
body.dark .mode-overlay-grocery:hover {
    border-color: #4CAF50;
    background: linear-gradient(135deg, rgba(76,175,80,0.08), #252538);
}
body.dark .mode-overlay-puja:hover {
    border-color: #ff9800;
    background: linear-gradient(135deg, rgba(255,152,0,0.08), #252538);
}
body.dark .mode-overlay-vegetables:hover {
    border-color: #2e7d32;
    background: linear-gradient(135deg, rgba(46,125,50,0.08), #252538);
}

/* ══════════════════════════════════════════════════════════════════
   SMART SEARCH DIVIDER
   ══════════════════════════════════════════════════════════════════ */
.smart-search-divider {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 4px 10px;
    margin: 8px 0;
}
.smart-search-divider-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, #ddd, transparent);
}
body.dark .smart-search-divider-line {
    background: linear-gradient(to right, transparent, #444, transparent);
}
.smart-search-divider-text {
    font-size: 0.78rem;
    font-weight: 700;
    color: #999;
    white-space: nowrap;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 6px;
}
.smart-search-divider-text i {
    font-size: 0.7rem;
    opacity: 0.7;
}

/* Other mode result cards — slightly subdued */
.other-mode-result {
    opacity: 0.75;
    transition: opacity 0.25s ease;
}
.other-mode-result:hover {
    opacity: 1;
}

/* ══════════════════════════════════════════════════════════════════
   MODE CHANGE PILL (in search mode indicator)
   ══════════════════════════════════════════════════════════════════ */
.mode-change-btn {
    margin-left: auto;
    padding: 2px 10px;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--primary, #ff6f61);
    background: rgba(255,111,97,0.08);
    border: 1px solid rgba(255,111,97,0.15);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.mode-change-btn:hover {
    background: rgba(255,111,97,0.15);
    transform: scale(1.03);
}
body.dark .mode-change-btn {
    background: rgba(255,111,97,0.12);
    border-color: rgba(255,111,97,0.2);
}

/* Mobile overlay adjustments */
@media (max-width: 480px) {
    .mode-overlay-card {
        padding: 28px 20px 22px;
        border-radius: 20px;
    }
    .mode-overlay-btn {
        padding: 14px 14px;
        gap: 12px;
    }
    .mode-overlay-emoji {
        font-size: 1.5rem;
        width: 38px;
        height: 38px;
    }
    .mode-overlay-label { font-size: 0.88rem; }
    .mode-overlay-header h2 { font-size: 1.2rem; }
}

/* ══════════════════════════════════════════════════════════════════
   VEGETABLES CATEGORY STYLES
   ══════════════════════════════════════════════════════════════════ */
.card-freshness-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 4px;
  text-transform: uppercase;
  background: linear-gradient(135deg, #2ecc71, #27ae60);
  color: #fff;
  box-shadow: 0 2px 8px rgba(46, 204, 113, 0.3);
}

.card-badge-combo {
  background: linear-gradient(135deg, #9b59b6, #8e44ad);
  color: #fff;
  box-shadow: 0 2px 8px rgba(155, 89, 182, 0.3);
}

/* Sibling offsets to prevent overlapping badges */
.card-trust-badge.card-badge-bestseller ~ .card-freshness-badge {
  top: 40px;
}
.card-trust-badge.card-badge-bestseller ~ .card-badge-combo {
  top: 40px;
}
.card-freshness-badge ~ .card-badge-combo {
  top: 70px;
}
.card-trust-badge.card-badge-bestseller ~ .card-freshness-badge ~ .card-badge-combo {
  top: 70px;
}

.stock-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  margin-top: 8px;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.03);
  width: fit-content;
}
body.dark .stock-indicator {
  background: rgba(255, 255, 255, 0.05);
}

.stock-indicator.stock-in {
  color: #2ecc71;
}
.stock-indicator.stock-limited {
  color: #e67e22;
}
.stock-indicator.stock-out {
  color: #e74c3c;
}

.price-per-unit {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-left: 2px;
}

/* ===== Cooking Companions Feature ===== */
.companion-banner {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, rgba(255, 111, 97, 0.06) 0%, rgba(255, 154, 139, 0.1) 100%);
  border: 1.5px dashed var(--primary);
  padding: 18px 20px;
  border-radius: 16px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 18px;
  box-shadow: 0 4px 15px rgba(255, 111, 97, 0.05);
  animation: slideInDown 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.companion-banner-icon {
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 111, 97, 0.12);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  color: var(--primary);
  border: 2px solid var(--primary);
  box-shadow: 0 4px 12px rgba(255, 111, 97, 0.15);
  flex-shrink: 0;
  animation: companionPulse 2s infinite ease-in-out;
}

.companion-banner-text {
  flex: 1;
}

.companion-banner-text h4 {
  margin: 0 0 4px;
  font-weight: 800;
  color: var(--text-primary);
  font-size: 1.15rem;
  font-family: var(--font-display);
}

.companion-banner-text p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.45;
  font-family: var(--font-body);
}

.card-badge-companion {
  background: linear-gradient(135deg, #ff7b54 0%, #ff5722 100%) !important;
  color: white !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 4px 10px rgba(255, 87, 34, 0.25) !important;
}

@keyframes companionPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 4px 12px rgba(255, 111, 97, 0.15);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 4px 20px rgba(255, 111, 97, 0.3);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 4px 12px rgba(255, 111, 97, 0.15);
  }
}

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

@media (max-width: 576px) {
  .companion-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
  }
  .companion-banner-icon {
    width: 48px;
    height: 48px;
    font-size: 1.6rem;
  }
}