/* ============================================================================
   PIZZA.IT — Design System Completo
   Dark Mode Premium · Glassmorphism · Mobile-First Exclusivo
   ============================================================================ */

/* ─── 1. CSS Variables (Design Tokens) ────────────────────────────────────── */
:root {
  /* Cores */
  --color-bg:              #0d0d0e;
  --color-bg-elevated:     #161618;
  --color-bg-card:         #1a1a1c;
  --color-accent:          #ffbc00;
  --color-accent-hover:    #ffd340;
  --color-accent-dark:     #cc9600;
  --color-text-primary:    #f5f5f5;
  --color-text-secondary:  #b3b3b3;
  --color-text-muted:      #666670;
  --color-border:          rgba(255, 255, 255, 0.08);
  --color-border-accent:   rgba(255, 188, 0, 0.4);
  --color-overlay:         rgba(13, 13, 14, 0.85);
  --color-success:         #34c759;
  --color-error:           #ff3b30;
  --color-warning:         #ff9f0a;

  /* Glassmorphism */
  --glass-bg:              rgba(13, 13, 14, 0.75);
  --glass-bg-light:        rgba(26, 26, 28, 0.6);
  --glass-blur:            blur(12px);
  --glass-border:          1px solid rgba(255, 255, 255, 0.08);
  --glass-border-radius:   16px;

  /* Tipografia */
  --font-family:           system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-xs:          11px;
  --font-size-sm:          13px;
  --font-size-base:        15px;
  --font-size-md:          17px;
  --font-size-lg:          20px;
  --font-size-xl:          24px;
  --font-size-2xl:         32px;
  --font-weight-normal:    400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;

  /* Espaçamentos */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   32px;
  --space-2xl:  48px;

  /* Sombras */
  --shadow-card:   0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-accent: 0 0 24px rgba(255, 188, 0, 0.25);
  --shadow-modal:  0 -8px 48px rgba(0, 0, 0, 0.6);

  /* Animações */
  --ease-smooth:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;

  /* Z-index */
  --z-base:    0;
  --z-card:    10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-header:  300;
  --z-toast:   400;
}

/* ─── 2. Reset & Base ──────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
  -webkit-tap-highlight-color: transparent;
}

html {
  font-size:                  var(--font-size-base);
  -webkit-text-size-adjust:   100%;
  text-size-adjust:           100%;
}

body {
  font-family:      var(--font-family);
  font-size:        var(--font-size-base);
  color:            var(--color-text-primary);
  background-color: var(--color-bg);
  /* Layout travado — comporta como app nativo */
  width:            100vw;
  height:           100vh;
  overflow:         hidden;
  position:         fixed;
  top:              0;
  left:             0;
  line-height:      1.5;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; }
button   { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea { font-family: inherit; }
a { text-decoration: none; color: inherit; }

/* ─── 3. Utilitários ───────────────────────────────────────────────────────── */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* ─── 4. Telas (Screens) ───────────────────────────────────────────────────── */
.screen {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  display:    none;
  opacity:    0;
  transition: opacity var(--duration-base) var(--ease-smooth);
}

.screen.active {
  display: flex;
  opacity: 1;
  flex-direction: column;
}

/* ─── 5. Tela 0: Loading ───────────────────────────────────────────────────── */
#screen-loading {
  align-items:     center;
  justify-content: center;
  flex-direction:  column;
  gap:             var(--space-lg);
  background:      var(--color-bg);
}

.loading-logo {
  font-size:   var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color:       var(--color-accent);
  letter-spacing: -0.5px;
}

.loading-logo span { color: var(--color-text-primary); }

/* Spinner */
.spinner {
  width:  48px;
  height: 48px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius:    50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-text {
  color:     var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

/* ─── 6. Header Glassmorphism ──────────────────────────────────────────────── */
.app-header {
  position:        fixed;
  top:             env(safe-area-inset-top, 0);
  left:            var(--space-md);
  right:           var(--space-md);
  margin-top:      var(--space-sm);
  z-index:         var(--z-header);
  /* Glassmorphism */
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  background:      var(--glass-bg);
  border:          var(--glass-border);
  border-radius:   var(--glass-border-radius);
  padding:         var(--space-sm) var(--space-md);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-sm);
  /* Altura consistente */
  min-height:      56px;
}

.header-logo {
  font-size:   var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color:       var(--color-text-primary);
  flex:        1;
  min-width:   0;
  overflow:    hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

.header-logo .brand-dot {
  color: var(--color-accent);
}

.table-badge {
  display:         flex;
  align-items:     center;
  gap:             var(--space-xs);
  background:      rgba(255, 188, 0, 0.12);
  border:          1px solid rgba(255, 188, 0, 0.25);
  border-radius:   20px;
  padding:         4px var(--space-sm);
  white-space:     nowrap;
  flex-shrink:     0;
}

.table-badge .table-icon {
  font-size: 14px;
}

.table-badge .table-label {
  font-size:   var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color:       var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.table-badge .table-number {
  font-size:   var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color:       var(--color-text-primary);
}

/* ─── 7. Tela 1: Cardápio ──────────────────────────────────────────────────── */
#screen-menu {
  background: var(--color-bg);
  flex-direction: column;
  overflow: hidden;
}

/* ─── 8. model-viewer (Visualizador 3D/AR) ─────────────────────────────────── */
.viewer-container {
  position: relative;
  flex:     1;
  overflow: hidden;
  /* Espaço para o header fixo */
  padding-top: calc(72px + env(safe-area-inset-top, 0));
}

model-viewer {
  width:  100%;
  height: 100%;
  --progress-bar-color:   var(--color-accent);
  --progress-mask:        transparent;
  --poster-color:         var(--color-bg);
}

/* Garante que o botão de AR nativo fique oculto (usamos o nosso) */
model-viewer::part(default-ar-button) {
  display: none !important;
}

/* Hint de rotação */
.viewer-hint {
  position:        absolute;
  bottom:          var(--space-md);
  left:            50%;
  transform:       translateX(-50%);
  color:           var(--color-text-muted);
  font-size:       var(--font-size-xs);
  display:         flex;
  align-items:     center;
  gap:             var(--space-xs);
  pointer-events:  none;
  animation:       fadeInOut 3s ease-in-out 1s forwards;
}

@keyframes fadeInOut {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ─── 9. Animação Steam (Vapor sobre a pizza) ──────────────────────────────── */
.steam-container {
  position: absolute;
  /* Centralizado sobre o modelo */
  bottom:   55%;
  left:     50%;
  transform: translateX(-50%);
  width:    80px;
  height:   60px;
  pointer-events: none;
  z-index:  var(--z-card);
}

.steam-particle {
  position: absolute;
  bottom:   0;
  width:    8px;
  height:   8px;
  background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(3px);
  animation: steam var(--duration-slow) ease-out infinite;
}

.steam-particle:nth-child(1) {
  left:             15px;
  animation-delay:  0s;
  animation-duration: 2.2s;
}
.steam-particle:nth-child(2) {
  left:             35px;
  animation-delay:  0.4s;
  animation-duration: 2s;
}
.steam-particle:nth-child(3) {
  left:             55px;
  animation-delay:  0.8s;
  animation-duration: 2.4s;
}

@keyframes steam {
  0%   { opacity: 0;   transform: translateY(0)     scaleX(1);   }
  30%  { opacity: 0.5; transform: translateY(-12px)  scaleX(1.1); }
  60%  { opacity: 0.6; transform: translateY(-26px)  scaleX(1.3); }
  100% { opacity: 0;   transform: translateY(-45px)  scaleX(0.7); }
}

/* ─── 10. Footer do Cardápio ───────────────────────────────────────────────── */
.menu-footer {
  position: relative;
  z-index:  var(--z-card);
  /* Gradiente que funde com o fundo */
  background: linear-gradient(to top,
    var(--color-bg) 0%,
    var(--color-bg) 60%,
    transparent 100%
  );
  padding: var(--space-sm) 0 calc(var(--space-md) + env(safe-area-inset-bottom, 0));
}

/* ─── 11. Categorias (Tabs) ────────────────────────────────────────────────── */
.categories-scroll {
  display:    flex;
  gap:        var(--space-xs);
  padding:    var(--space-xs) var(--space-md);
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  /* Esconder scrollbar */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

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

.category-tab {
  display:         flex;
  align-items:     center;
  gap:             var(--space-xs);
  padding:         6px var(--space-md);
  border-radius:   20px;
  border:          1px solid var(--color-border);
  background:      var(--glass-bg-light);
  color:           var(--color-text-secondary);
  font-size:       var(--font-size-sm);
  font-weight:     var(--font-weight-medium);
  white-space:     nowrap;
  transition:      all var(--duration-fast) var(--ease-smooth);
  flex-shrink:     0;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.category-tab.active,
.category-tab:active {
  background:  rgba(255, 188, 0, 0.15);
  border-color: var(--color-accent);
  color:        var(--color-accent);
  font-weight:  var(--font-weight-semibold);
}

/* ─── 12. Carrossel de Produtos ────────────────────────────────────────────── */
.products-carousel {
  display:    flex;
  gap:        var(--space-md);
  padding:    var(--space-sm) var(--space-md);
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Snapping */
  scroll-snap-type: x mandatory;
}

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

/* ─── 13. Cards de Produto ─────────────────────────────────────────────────── */
.product-card {
  flex-shrink:     0;
  width:           160px;
  background:      var(--color-bg-card);
  border:          1px solid var(--color-border);
  border-radius:   var(--glass-border-radius);
  padding:         var(--space-sm);
  cursor:          pointer;
  scroll-snap-align: start;
  transition:      all var(--duration-base) var(--ease-smooth);
  position:        relative;
  overflow:        hidden;
}

/* Estado hover/tap */
.product-card:active {
  transform: scale(0.96);
}

/* Estado ativo (produto selecionado no viewer) */
.product-card.active {
  border-color: var(--color-accent);
  box-shadow:   var(--shadow-accent);
  background:   rgba(255, 188, 0, 0.06);
}

/* Estado: carregando modelo */
.product-card.loading::after {
  content:  '';
  position: absolute;
  inset:    0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 188, 0, 0.08) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.2s ease infinite;
}

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

/* Estado: esgotado */
.product-card.sold-out {
  opacity: 0.5;
  pointer-events: none;
}

.product-card.sold-out::before {
  content:         attr(data-sold-out-label);
  position:        absolute;
  top:             var(--space-xs);
  right:           var(--space-xs);
  background:      var(--color-error);
  color:           #fff;
  font-size:       var(--font-size-xs);
  font-weight:     var(--font-weight-bold);
  padding:         2px 6px;
  border-radius:   4px;
  text-transform:  uppercase;
  letter-spacing:  0.5px;
}

/* Badge: popular / novo */
.product-badge {
  position:        absolute;
  top:             var(--space-xs);
  left:            var(--space-xs);
  font-size:       var(--font-size-xs);
  font-weight:     var(--font-weight-bold);
  padding:         2px 6px;
  border-radius:   4px;
  text-transform:  uppercase;
  letter-spacing:  0.5px;
}

.product-badge.popular {
  background: rgba(255, 188, 0, 0.2);
  color:      var(--color-accent);
}

.product-badge.new-item {
  background: rgba(52, 199, 89, 0.2);
  color:      var(--color-success);
}

/* Emoji/ícone do produto */
.product-emoji {
  font-size:    40px;
  text-align:   center;
  line-height:  1;
  margin-bottom: var(--space-xs);
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
}

.product-name {
  font-size:    var(--font-size-sm);
  font-weight:  var(--font-weight-semibold);
  color:        var(--color-text-primary);
  line-height:  1.3;
  margin-bottom: var(--space-xs);
  /* Clamp a 2 linhas */
  display:      -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:     hidden;
}

.product-price {
  font-size:   var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color:       var(--color-accent);
}

/* ─── 14. Botões CTA ───────────────────────────────────────────────────────── */
.cta-area {
  display:         flex;
  flex-direction:  column;
  gap:             var(--space-sm);
  padding:         0 var(--space-md);
  margin-top:      var(--space-sm);
}

/* Botão AR: branco, texto escuro */
.btn-ar {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-sm);
  width:           100%;
  padding:         16px var(--space-lg);
  background:      #ffffff;
  color:           #0d0d0e;
  border-radius:   14px;
  font-size:       var(--font-size-sm);
  font-weight:     var(--font-weight-bold);
  letter-spacing:  0.5px;
  text-transform:  uppercase;
  transition:      all var(--duration-base) var(--ease-smooth);
  box-shadow:      0 4px 16px rgba(255, 255, 255, 0.15);
}

.btn-ar:active {
  transform:  scale(0.97);
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
}

.btn-ar .btn-icon { font-size: 18px; }

/* Botão Confirmar: âmbar, texto escuro */
.btn-confirm {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-sm);
  width:           100%;
  padding:         16px var(--space-lg);
  background:      var(--color-accent);
  color:           #0d0d0e;
  border-radius:   14px;
  font-size:       var(--font-size-sm);
  font-weight:     var(--font-weight-bold);
  letter-spacing:  0.5px;
  text-transform:  uppercase;
  transition:      all var(--duration-base) var(--ease-smooth);
  box-shadow:      var(--shadow-accent);
}

.btn-confirm:active {
  transform:   scale(0.97);
  background:  var(--color-accent-hover);
  box-shadow:  0 0 32px rgba(255, 188, 0, 0.4);
}

.btn-confirm:disabled {
  opacity:        0.5;
  pointer-events: none;
}

/* Botão secundário */
.btn-secondary {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-xs);
  padding:         12px var(--space-lg);
  background:      var(--glass-bg-light);
  border:          var(--glass-border);
  border-radius:   12px;
  color:           var(--color-text-secondary);
  font-size:       var(--font-size-sm);
  font-weight:     var(--font-weight-medium);
  transition:      all var(--duration-fast) var(--ease-smooth);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.btn-secondary:active {
  background: rgba(255, 255, 255, 0.08);
  color:      var(--color-text-primary);
}

/* ─── 15. Tela 2: Customização (Slide-up) ──────────────────────────────────── */
#screen-customize {
  flex-direction: column;
  background:     transparent;
}

/* Overlay escuro atrás do painel */
.customize-overlay {
  position:   absolute;
  inset:      0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.customize-panel {
  position:         absolute;
  bottom:           0;
  left:             0;
  right:            0;
  /* Slide-up animation */
  transform:        translateY(100%);
  animation:        slideUp var(--duration-slow) var(--ease-spring) forwards;
  /* Glassmorphism */
  backdrop-filter:  var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  background:       rgba(18, 18, 20, 0.95);
  border:           var(--glass-border);
  border-top-left-radius:  24px;
  border-top-right-radius: 24px;
  max-height:       88vh;
  overflow-y:       auto;
  /* Safe area inferior */
  padding-bottom:   calc(var(--space-lg) + env(safe-area-inset-bottom, 0));
  box-shadow:       var(--shadow-modal);
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* Alça (drag handle) */
.panel-handle {
  width:        40px;
  height:       4px;
  background:   var(--color-text-muted);
  border-radius: 2px;
  margin:       var(--space-md) auto var(--space-sm);
}

.customize-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         0 var(--space-md) var(--space-md);
  border-bottom:   1px solid var(--color-border);
}

.customize-title {
  font-size:   var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color:       var(--color-text-primary);
}

.customize-price {
  font-size:   var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color:       var(--color-accent);
}

.customize-body {
  padding: var(--space-md);
}

/* Seções dentro do painel */
.customize-section {
  margin-bottom: var(--space-lg);
}

.section-title {
  font-size:     var(--font-size-sm);
  font-weight:   var(--font-weight-semibold);
  color:         var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: var(--space-sm);
}

/* Chips de ingredientes removíveis */
.ingredients-grid {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--space-xs);
}

.ingredient-chip {
  display:         flex;
  align-items:     center;
  gap:             var(--space-xs);
  padding:         6px var(--space-sm);
  background:      var(--glass-bg-light);
  border:          1px solid var(--color-border);
  border-radius:   20px;
  font-size:       var(--font-size-sm);
  color:           var(--color-text-primary);
  transition:      all var(--duration-fast) var(--ease-smooth);
  cursor:          pointer;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

/* Ingrediente removido → riscado */
.ingredient-chip.removed {
  background:   rgba(255, 59, 48, 0.1);
  border-color: rgba(255, 59, 48, 0.3);
  color:        var(--color-text-muted);
  text-decoration: line-through;
}

.ingredient-chip .chip-remove {
  font-size:  12px;
  opacity:    0.6;
}

/* Extras (ingredientes adicionais) */
.extras-list {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-xs);
}

.extra-item {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         var(--space-sm) var(--space-md);
  background:      var(--glass-bg-light);
  border:          1px solid var(--color-border);
  border-radius:   12px;
  transition:      all var(--duration-fast) var(--ease-smooth);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.extra-item.selected {
  background:   rgba(255, 188, 0, 0.08);
  border-color: var(--color-border-accent);
}

.extra-name {
  font-size:  var(--font-size-sm);
  color:      var(--color-text-primary);
}

.extra-price {
  font-size:   var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color:       var(--color-accent);
}

/* Toggle switch para extras */
.extra-toggle {
  display:      flex;
  align-items:  center;
  gap:          var(--space-sm);
}

.toggle-btn {
  width:           32px;
  height:          32px;
  border-radius:   50%;
  border:          1.5px solid var(--color-border);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       18px;
  color:           var(--color-text-muted);
  transition:      all var(--duration-fast) var(--ease-smooth);
}

.toggle-btn.add-btn.active {
  background:   var(--color-accent);
  border-color: var(--color-accent);
  color:        #0d0d0e;
}

/* Textarea de observações */
.notes-textarea {
  width:            100%;
  min-height:       80px;
  background:       var(--glass-bg-light);
  border:           1px solid var(--color-border);
  border-radius:    12px;
  padding:          var(--space-sm) var(--space-md);
  color:            var(--color-text-primary);
  font-size:        var(--font-size-sm);
  resize:           none;
  transition:       border-color var(--duration-fast) var(--ease-smooth);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter:  var(--glass-blur);
}

.notes-textarea:focus {
  outline:      none;
  border-color: var(--color-accent);
}

.notes-textarea::placeholder {
  color: var(--color-text-muted);
}

/* ─── 16. Tela 3: Confirmação ──────────────────────────────────────────────── */
#screen-confirm {
  flex-direction: column;
  background:     var(--color-bg);
  padding:        calc(var(--space-2xl) + env(safe-area-inset-top, 0)) var(--space-md) calc(var(--space-lg) + env(safe-area-inset-bottom, 0));
  overflow-y:     auto;
}

.confirm-icon {
  font-size:    64px;
  text-align:   center;
  margin-bottom: var(--space-md);
  animation:    popIn var(--duration-slow) var(--ease-spring);
}

@keyframes popIn {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

.confirm-title {
  font-size:   var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color:       var(--color-text-primary);
  text-align:  center;
  margin-bottom: var(--space-xs);
}

.confirm-subtitle {
  font-size:   var(--font-size-sm);
  color:       var(--color-text-secondary);
  text-align:  center;
  margin-bottom: var(--space-xl);
}

.order-summary-card {
  background:     var(--color-bg-card);
  border:         1px solid var(--color-border);
  border-radius:  var(--glass-border-radius);
  padding:        var(--space-md);
  margin-bottom:  var(--space-lg);
}

.order-summary-row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         var(--space-xs) 0;
  font-size:       var(--font-size-sm);
  color:           var(--color-text-secondary);
}

.order-summary-row.total {
  border-top:  1px solid var(--color-border);
  margin-top:  var(--space-sm);
  padding-top: var(--space-sm);
  font-size:   var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color:       var(--color-text-primary);
}

.order-summary-row.total .row-value {
  color: var(--color-accent);
}

/* ─── 17. Tela 4: Tracking ─────────────────────────────────────────────────── */
#screen-tracking {
  flex-direction: column;
  background:     var(--color-bg);
  padding:        calc(var(--space-2xl) + env(safe-area-inset-top, 0)) var(--space-md) calc(var(--space-lg) + env(safe-area-inset-bottom, 0));
}

.tracking-header {
  text-align:    center;
  margin-bottom: var(--space-xl);
}

.tracking-order-num {
  font-size:   var(--font-size-sm);
  color:       var(--color-text-secondary);
  margin-bottom: var(--space-xs);
}

.tracking-pizza-name {
  font-size:   var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color:       var(--color-text-primary);
}

.tracking-eta {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--space-xs);
  background:      rgba(255, 188, 0, 0.1);
  border:          1px solid var(--color-border-accent);
  border-radius:   20px;
  padding:         4px var(--space-md);
  font-size:       var(--font-size-sm);
  color:           var(--color-accent);
  margin-top:      var(--space-sm);
}

/* Linha de progresso */
.tracking-steps {
  display:        flex;
  flex-direction: column;
  gap:            0;
  flex:           1;
}

.tracking-step {
  display:  flex;
  gap:      var(--space-md);
  position: relative;
}

/* Linha vertical conectando os steps */
.tracking-step:not(:last-child) .step-line {
  position:   absolute;
  left:       19px; /* centro do ícone (40px/2 - 1px) */
  top:        40px;
  bottom:     0;
  width:      2px;
  background: var(--color-border);
  transition: background var(--duration-slow) var(--ease-smooth);
}

.tracking-step.done .step-line,
.tracking-step.active .step-line {
  background: var(--color-accent);
}

/* Ícone do step */
.step-icon-wrap {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  width:            40px;
  height:           40px;
  border-radius:    50%;
  background:       var(--color-bg-card);
  border:           2px solid var(--color-border);
  font-size:        18px;
  flex-shrink:      0;
  transition:       all var(--duration-slow) var(--ease-smooth);
  z-index:          1;
  position:         relative;
}

.tracking-step.done .step-icon-wrap {
  background:   rgba(52, 199, 89, 0.15);
  border-color: var(--color-success);
}

.tracking-step.active .step-icon-wrap {
  background:     rgba(255, 188, 0, 0.15);
  border-color:   var(--color-accent);
  /* Pulsação */
  animation:      pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0   rgba(255, 188, 0, 0.4); }
  50%       { box-shadow: 0 0 0 10px rgba(255, 188, 0, 0);   }
}

.step-content {
  flex:          1;
  padding:       8px 0 var(--space-xl);
}

.step-label {
  font-size:   var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color:       var(--color-text-muted);
  transition:  color var(--duration-slow) var(--ease-smooth);
}

.tracking-step.done  .step-label { color: var(--color-success); }
.tracking-step.active .step-label { color: var(--color-accent); }

.step-sublabel {
  font-size:  var(--font-size-sm);
  color:      var(--color-text-muted);
  margin-top: var(--space-xs);
}

/* ─── 18. Indicador NFC ────────────────────────────────────────────────────── */
#nfc-indicator {
  display:          none; /* Mostrado via JS se NFC disponível */
  align-items:      center;
  justify-content:  center;
  gap:              var(--space-sm);
  position:         fixed;
  bottom:           calc(var(--space-2xl) + env(safe-area-inset-bottom, 0));
  left:             50%;
  transform:        translateX(-50%);
  background:       var(--glass-bg);
  border:           var(--glass-border);
  border-radius:    20px;
  padding:          var(--space-sm) var(--space-lg);
  font-size:        var(--font-size-sm);
  color:            var(--color-text-secondary);
  z-index:          var(--z-overlay);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter:  var(--glass-blur);
  cursor:           pointer;
  white-space:      nowrap;
  transition:       all var(--duration-fast) var(--ease-smooth);
}

#nfc-indicator::before {
  content:   '📡';
  font-size: 16px;
}

#nfc-indicator.nfc-reading {
  border-color:    var(--color-accent);
  color:           var(--color-accent);
  animation:       nfcPulse 1s ease-in-out infinite;
}

#nfc-indicator.nfc-error {
  border-color: var(--color-error);
  color:        var(--color-error);
}

@keyframes nfcPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.6; }
}

/* ─── 19. Toast de Erro ────────────────────────────────────────────────────── */
.toast {
  position:         fixed;
  top:              calc(80px + env(safe-area-inset-top, 0));
  left:             var(--space-md);
  right:            var(--space-md);
  background:       rgba(255, 59, 48, 0.15);
  border:           1px solid rgba(255, 59, 48, 0.3);
  border-radius:    12px;
  padding:          var(--space-sm) var(--space-md);
  font-size:        var(--font-size-sm);
  color:            var(--color-text-primary);
  z-index:          var(--z-toast);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter:  var(--glass-blur);
  animation:        toastIn var(--duration-base) var(--ease-spring);
  display:          flex;
  align-items:      center;
  gap:              var(--space-sm);
}

.toast.success {
  background: rgba(52, 199, 89, 0.15);
  border-color: rgba(52, 199, 89, 0.3);
}

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

/* ─── 20. Tela de Erro Global ──────────────────────────────────────────────── */
#screen-error {
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-md);
  padding:         var(--space-xl);
  background:      var(--color-bg);
  text-align:      center;
}

.error-emoji    { font-size: 64px; }
.error-title    { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); }
.error-message  { font-size: var(--font-size-sm); color: var(--color-text-secondary); }

/* ─── 21. Acessibilidade & Focus ───────────────────────────────────────────── */
:focus-visible {
  outline:        2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius:  4px;
}

/* Reduz animações se o usuário preferir */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:   0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:  0.01ms !important;
  }
}