/* ========================================================
   MR BURGER 507 - DIGITAL MENU WEBAPP
   Estilo Minimalista Premium Estilo App (Light Theme)
   ======================================================== */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@700&family=Montserrat:ital,wght@0,600;0,700;0,800;0,900;1,700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --brand-orange: #FF5C00;
  --brand-orange-light: #FFF2EB;
  --brand-orange-hover: #E04E00;
  --brand-orange-shadow: rgba(255, 92, 0, 0.28);
  --brand-dark: #121316;
  --brand-charcoal: #27272A;
  --text-primary: #18181B;
  --text-secondary: #52525B;
  --text-muted: #71717A;
  --bg-page: #F8F9FA;
  --bg-card: #FFFFFF;
  --bg-subtle: #F4F5F7;
  --border-light: #EBECEF;
  --border-card: rgba(0, 0, 0, 0.06);
  --green-status: #10B981;
  --red-heart: #EF4444;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 9999px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02);
  --shadow-card: 0 4px 16px -2px rgba(0,0,0,0.05), 0 2px 6px -1px rgba(0,0,0,0.02);
  --shadow-elevated: 0 12px 32px -4px rgba(0,0,0,0.08), 0 4px 12px -2px rgba(0,0,0,0.03);
  --shadow-floating: 0 10px 30px -5px rgba(0,0,0,0.12), 0 4px 10px -2px rgba(0,0,0,0.06);
  --font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-script: 'Caveat', cursive, sans-serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --safe-bottom: env(safe-area-inset-bottom, 16px);
  --nav-height: 72px;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  background-color: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  height: 100%;
}

button {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
  outline: none;
}

input, textarea, select {
  font-family: inherit;
  outline: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ========================================================
   DESKTOP BLOCKER / LANDING VIEW
   (Solo se muestra en pantallas Desktop / Pantallas no móviles)
   "no debe abrir desde una version desktop solo desde el smartPhone,
    no crees un simulador en version desktop, solo un QR que redirija a la version movile"
   ======================================================== */

#desktop-landing {
  display: none;
  min-height: 100vh;
  width: 100%;
  background: radial-gradient(circle at 10% 20%, #FFF5EF 0%, #FFFFFF 60%, #F5F7FA 100%);
  color: var(--text-primary);
  padding: 40px 24px;
  position: fixed;
  inset: 0;
  z-index: 99999;
  overflow-y: auto;
}

@media (min-width: 820px) {
  #desktop-landing {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #mobile-app-root {
    display: none !important;
  }
}

.desktop-card {
  max-width: 720px;
  width: 100%;
  background: #FFFFFF;
  border-radius: var(--radius-xl);
  box-shadow: 0 25px 60px -15px rgba(255, 92, 0, 0.12), 0 10px 30px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(255, 92, 0, 0.15);
  padding: 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.desktop-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, #FF8A00, #FF5C00, #E04E00);
}

.desktop-header-logo {
  width: 110px;
  height: 110px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: #FFFFFF;
  padding: 6px;
  box-shadow: 0 10px 25px rgba(255, 92, 0, 0.18);
  border: 2px solid var(--brand-orange-light);
}

.desktop-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--brand-orange-light);
  color: var(--brand-orange);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  margin-bottom: 16px;
}

.desktop-title {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 900;
  color: var(--brand-dark);
  letter-spacing: -0.5px;
  line-height: 1.2;
  margin-bottom: 8px;
}

.desktop-script {
  font-family: var(--font-script);
  font-size: 26px;
  color: var(--brand-orange);
  display: block;
  margin-bottom: 16px;
}

.desktop-desc {
  font-size: 16px;
  color: var(--text-secondary);
  max-width: 520px;
  margin: 0 auto 32px;
  line-height: 1.6;
}

.desktop-qr-box {
  background: #FFFFFF;
  border: 2px dashed rgba(255, 92, 0, 0.3);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: inline-block;
  margin-bottom: 24px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}

#desktop-qrcode {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 12px;
}

#desktop-qrcode img, #desktop-qrcode canvas {
  width: 220px !important;
  height: 220px !important;
  border-radius: 12px;
}

.desktop-qr-instructions {
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.desktop-url-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 10px 16px;
  max-width: 480px;
  margin: 0 auto 28px;
  font-size: 13px;
  color: var(--text-secondary);
}

.desktop-url-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: monospace;
}

.btn-copy-link {
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  color: var(--brand-dark);
  font-weight: 600;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
  flex-shrink: 0;
  margin-left: 12px;
}

.btn-copy-link:hover {
  background: var(--brand-orange);
  color: #FFFFFF;
  border-color: var(--brand-orange);
}

.desktop-info-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding-top: 24px;
  border-top: 1px solid var(--border-light);
  font-size: 13px;
  color: var(--text-muted);
}

.desktop-info-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ========================================================
   MOBILE APP CONTAINER
   ======================================================== */

#mobile-app-root {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  background-color: var(--bg-page);
  position: relative;
  padding-bottom: calc(var(--nav-height) + var(--safe-bottom) + 24px);
}

/* Top App Header */
.app-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-card);
  padding: 12px 16px;
}

.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand-identity {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  border: 1px solid var(--border-light);
  object-fit: cover;
}

.brand-meta {
  display: flex;
  flex-direction: column;
}

.brand-name {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 900;
  color: var(--brand-dark);
  line-height: 1.1;
  letter-spacing: -0.3px;
}

.brand-subtitle-script {
  font-family: var(--font-script);
  font-size: 17px;
  color: var(--brand-orange);
  line-height: 1;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ECFDF5;
  color: #065F46;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid #A7F3D0;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green-status);
  animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1.1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* Modality Switcher (Mesa vs Domicilio) */
.modality-selector-container {
  padding: 14px 16px 6px;
}

.modality-toggle-card {
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-pill);
  padding: 4px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  box-shadow: var(--shadow-sm);
}

.modality-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  z-index: 1;
}

.modality-btn.active {
  color: #FFFFFF;
  background: var(--brand-orange);
  box-shadow: 0 4px 12px var(--brand-orange-shadow);
}

.modality-info-pill {
  margin-top: 8px;
  background: var(--brand-orange-light);
  border: 1px solid rgba(255, 92, 0, 0.15);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--brand-charcoal);
}

.modality-info-pill strong {
  color: var(--brand-orange);
}

/* Search and Quick Filters */
.search-wrapper {
  padding: 10px 16px 4px;
}

.search-input-box {
  display: flex;
  align-items: center;
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.search-input-box:focus-within {
  border-color: var(--brand-orange);
  box-shadow: 0 0 0 3px rgba(255, 92, 0, 0.12);
}

.search-input-box svg {
  color: var(--text-muted);
  margin-right: 10px;
  flex-shrink: 0;
}

.search-input {
  width: 100%;
  border: none;
  font-size: 14px;
  color: var(--text-primary);
  background: transparent;
}

.search-input::placeholder {
  color: var(--text-muted);
}

.search-clear-btn {
  color: var(--text-muted);
  padding: 2px 4px;
  display: none;
}

/* ========================================================
   HERO PROMO BANNER (Al inicio del menú)
   "crea un banner que haga referencia a los platos al inicio del menu"
   ======================================================== */

.hero-banner-section {
  padding: 14px 16px;
}

.hero-banner-card {
  position: relative;
  background: linear-gradient(135deg, #FFFFFF 0%, #FFF5EE 50%, #FFE8D6 100%);
  border-radius: var(--radius-lg);
  padding: 22px 20px;
  border: 1px solid rgba(255, 92, 0, 0.18);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.hero-banner-card::after {
  content: "";
  position: absolute;
  top: -20px;
  right: -20px;
  width: 130px;
  height: 130px;
  background: radial-gradient(circle, rgba(255, 92, 0, 0.12) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--brand-orange);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  margin-bottom: 10px;
  box-shadow: 0 2px 6px var(--brand-orange-shadow);
}

.hero-title {
  font-family: var(--font-heading);
  font-size: 21px;
  font-weight: 900;
  color: var(--brand-dark);
  line-height: 1.2;
  margin-bottom: 6px;
  letter-spacing: -0.4px;
}

.hero-slogan {
  font-family: var(--font-script);
  font-size: 20px;
  color: var(--brand-orange);
  display: block;
  margin-bottom: 10px;
}

.hero-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 14px;
}

.hero-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hero-feature-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 92, 0, 0.12);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--brand-charcoal);
}

/* ========================================================
   CATEGORY ICONS SELECTOR
   "las categorias deben ser a traves de iconos"
   ======================================================== */

.categories-nav-section {
  position: sticky;
  top: 71px;
  z-index: 90;
  background: rgba(248, 249, 250, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-card);
}

.categories-bar {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 2px;
}

.categories-bar::-webkit-scrollbar {
  display: none;
}

.category-icon-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 10px 14px;
  min-width: 82px;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  color: var(--text-secondary);
}

.category-icon-btn:hover {
  border-color: var(--brand-orange);
  transform: translateY(-1px);
}

.category-icon-btn.active {
  background: #FFFFFF;
  border-color: var(--brand-orange);
  box-shadow: 0 4px 16px var(--brand-orange-shadow);
  color: var(--brand-orange);
}

.cat-icon-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  transition: all 0.25s ease;
  color: var(--brand-dark);
}

.category-icon-btn.active .cat-icon-circle {
  background: var(--brand-orange);
  color: #FFFFFF;
  box-shadow: 0 4px 10px var(--brand-orange-shadow);
}

.category-icon-btn.active .cat-icon-circle svg {
  stroke: #FFFFFF !important;
  fill: #FFFFFF !important;
}

.cat-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.2px;
  white-space: nowrap;
}

/* ========================================================
   CATEGORY INTERMEDIATE BANNERS
   "usa un banner entre cada categoria que haga referencia a esa categoria"
   ======================================================== */

.category-section-banner {
  margin: 28px 16px 16px;
  position: relative;
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  padding: 18px 20px;
}

.cat-banner-accent-line {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 5px;
  background: var(--brand-orange);
}

.cat-banner-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--brand-orange-light);
  color: var(--brand-orange);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
}

.cat-banner-title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 900;
  color: var(--brand-dark);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 4px;
}

.cat-banner-subtitle {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.45;
}

/* ========================================================
   PRODUCT DISH CARDS (Clean White Background, Typography focused)
   "las imagenes de cada plato deben quedar en fondo blanco limpio,
    sino hay imagenes de los platos no las inventes no uses imagenes"
   ======================================================== */

.products-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0 16px;
}

.dish-card {
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-card);
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.dish-card:active {
  transform: scale(0.99);
}

.dish-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.dish-title-group {
  flex: 1;
}

.dish-name {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 900;
  color: var(--brand-dark);
  text-transform: uppercase;
  letter-spacing: 0.2px;
  line-height: 1.25;
  margin-bottom: 4px;
}

.dish-tag-badge {
  display: inline-block;
  background: var(--bg-subtle);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
}

.dish-actions-top {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Favorite Heart Button */
.btn-favorite {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.btn-favorite:hover {
  background: #FEE2E2;
  color: var(--red-heart);
}

.btn-favorite.is-favorite {
  background: #FEE2E2;
  color: var(--red-heart);
}

.btn-favorite.is-favorite svg {
  fill: var(--red-heart);
  stroke: var(--red-heart);
  transform: scale(1.1);
}

/* Ingredients Description */
.dish-desc {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 14px;
  font-weight: 450;
}

.dish-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid var(--border-card);
  margin-top: auto;
}

.dish-price-box {
  display: flex;
  flex-direction: column;
}

.dish-price-label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.dish-price {
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 900;
  color: var(--brand-orange);
  letter-spacing: -0.3px;
  line-height: 1;
}

.dish-price-currency {
  font-size: 13px;
  font-weight: 800;
  color: var(--brand-dark);
  margin-right: 2px;
}

/* Add to Cart button / quantity controller */
.btn-add-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--brand-orange);
  color: #FFFFFF;
  font-weight: 800;
  font-size: 12.5px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  box-shadow: 0 3px 10px var(--brand-orange-shadow);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-add-item:hover {
  background: var(--brand-orange-hover);
  transform: translateY(-1px);
}

.btn-add-item:active {
  transform: scale(0.96);
}

.qty-counter-group {
  display: inline-flex;
  align-items: center;
  background: var(--brand-orange-light);
  border: 1px solid rgba(255, 92, 0, 0.2);
  border-radius: var(--radius-pill);
  padding: 2px 4px;
}

.qty-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--brand-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  transition: all 0.15s ease;
}

.qty-btn:active {
  transform: scale(0.9);
}

.qty-number {
  min-width: 26px;
  text-align: center;
  font-weight: 800;
  font-size: 13px;
  color: var(--brand-dark);
}

/* Empty Favorites State */
.empty-favorites-box {
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  border: 1px dashed var(--border-light);
  padding: 40px 20px;
  text-align: center;
  margin: 20px 16px;
}

.empty-fav-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 12px;
  background: #FEE2E2;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--red-heart);
  font-size: 28px;
}

/* ========================================================
   FLOATING BOTTOM APP NAVIGATION BAR
   "añade un menu estilo app que vaya de acuerdo a los colores de la marca
    en la parte inferior, la barra de menu inferior debe tener bordes redondeados,
    a medida que voy seleccionando un item del menu debe encerrarse en un circulo
    del color de la marca"
   ======================================================== */

.bottom-nav-container {
  position: fixed;
  bottom: calc(var(--safe-bottom) + 10px);
  left: 0;
  right: 0;
  max-width: 440px;
  margin: 0 auto;
  padding: 0 16px;
  z-index: 999;
  pointer-events: none;
}

.bottom-nav-bar {
  pointer-events: auto;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 36px; /* BORDES REDONDEADOS */
  box-shadow: 0 16px 38px -6px rgba(0, 0, 0, 0.16), 0 6px 14px -3px rgba(255, 92, 0, 0.1);
  padding: 6px 8px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 12px;
  position: relative;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  color: var(--text-muted);
}

.nav-icon-wrapper {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nav-icon-wrapper svg {
  width: 21px;
  height: 21px;
  stroke: var(--text-secondary);
  transition: stroke 0.2s ease, transform 0.2s ease;
}

.nav-item-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--text-muted);
  transition: color 0.2s ease;
}

/* REQUIREMENT: "a medida que voy seleccionando un item del menu debe encerrarse en un circulo del color de la marca" */
.nav-item.active .nav-icon-wrapper {
  background-color: var(--brand-orange) !important;
  box-shadow: 0 4px 14px var(--brand-orange-shadow);
  transform: translateY(-4px) scale(1.08);
}

.nav-item.active .nav-icon-wrapper svg {
  stroke: #FFFFFF !important;
  fill: transparent;
}

.nav-item.active .nav-item-label {
  color: var(--brand-orange);
  font-weight: 800;
}

/* Badge count for cart and favorites */
.nav-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: var(--brand-orange);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #FFFFFF;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}

.nav-item.active .nav-badge {
  background: var(--brand-dark);
}

/* ========================================================
   MODALS / DRAWERS (Cart / Info / Checkout)
   ======================================================== */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.modal-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.bottom-sheet {
  background: #FFFFFF;
  width: 100%;
  max-width: 480px;
  border-radius: 28px 28px 0 0;
  box-shadow: var(--shadow-elevated);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.modal-backdrop.open .bottom-sheet {
  transform: translateY(0);
}

.sheet-handle-bar {
  width: 42px;
  height: 4px;
  background: #E4E4E7;
  border-radius: var(--radius-pill);
  margin: 12px auto 6px;
  flex-shrink: 0;
}

.sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px 14px;
  border-bottom: 1px solid var(--border-light);
}

.sheet-title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 900;
  color: var(--brand-dark);
}

.sheet-close-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

.sheet-body {
  padding: 16px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sheet-footer {
  padding: 14px 20px calc(14px + var(--safe-bottom));
  border-top: 1px solid var(--border-light);
  background: #FFFFFF;
}

/* Cart Item Rows */
.cart-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cart-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
}

.cart-item-info {
  flex: 1;
}

.cart-item-name {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 800;
  color: var(--brand-dark);
}

.cart-item-price {
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-orange);
}

.cart-item-notes {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Form Styles for Checkout */
.form-group {
  margin-bottom: 14px;
}

.form-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-charcoal);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.form-label span.required {
  color: var(--brand-orange);
}

.form-input, .form-select, .form-textarea {
  width: 100%;
  background: #FFFFFF;
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: 14px;
  color: var(--text-primary);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--brand-orange);
  box-shadow: 0 0 0 3px rgba(255, 92, 0, 0.12);
}

.table-quick-selector {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 6px;
}

.table-num-btn {
  padding: 8px 4px;
  border-radius: var(--radius-sm);
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  font-weight: 700;
  font-size: 13px;
  color: var(--text-secondary);
  text-align: center;
  transition: all 0.15s ease;
}

.table-num-btn.selected {
  background: var(--brand-orange);
  color: #FFFFFF;
  border-color: var(--brand-orange);
  box-shadow: 0 2px 6px var(--brand-orange-shadow);
}

/* WhatsApp CTA Button */
.btn-whatsapp-order {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  color: #FFFFFF;
  font-weight: 900;
  font-size: 15px;
  padding: 14px 20px;
  border-radius: var(--radius-pill);
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.35);
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.btn-whatsapp-order:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(37, 211, 102, 0.45);
}

.btn-whatsapp-order:active {
  transform: scale(0.98);
}

/* Info & Location View Styles */
.info-card {
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 18px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}

.info-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.info-card-title {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 800;
  color: var(--brand-dark);
}

.info-card-content {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.55;
}

.btn-external-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  color: var(--brand-dark);
  font-weight: 700;
  font-size: 13px;
  margin-top: 10px;
  transition: all 0.2s ease;
}

.btn-external-link:hover {
  background: var(--brand-orange-light);
  border-color: var(--brand-orange);
  color: var(--brand-orange);
}

/* Toast feedback notification */
.toast-notice {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(-100px);
  background: var(--brand-dark);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 13px;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  box-shadow: 0 10px 25px rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 10000;
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.toast-notice.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}