/* ═══════════════════════════════════════════════════════════
   UX PREMIUM — Etapa 5
   Apenas apresentação/microinterações. Nenhuma regra de cálculo.
   ═══════════════════════════════════════════════════════════ */

/* ── 1. HIERARQUIA DO RESULTADO ──
   O Preço Final é o herói da tela. Reordena visualmente (preço primeiro)
   e amplia seu destaque; custos ficam secundários. */
.result-card.price{ order:-2; }
.result-card.profit{ order:-1; }
.result-card.highlight{ opacity:.92; }

.result-card.price{
  box-shadow:0 6px 24px rgba(255,201,71,.14);
  position:relative;
}
.result-card.price .rc-label{ font-size:11px; color:var(--yellow); opacity:.9; }
.result-card.price .rc-value{ font-size:30px; line-height:1.1; }
@media(min-width:480px){
  .result-card.price .rc-value{ font-size:34px; }
}

/* Lucro: claro, mas sem competir com o preço */
.result-card.profit .rc-value{ font-size:20px; }

/* ── 2. MICROANIMAÇÕES LEVES (120–220ms, ease-out) ── */
@keyframes uxFadeUp{ from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:none;} }
@keyframes uxFadeIn{ from{opacity:0;} to{opacity:1;} }

/* Resultado aparece suavemente após calcular */
#resultados[style*="block"]{ animation:uxFadeUp .2s ease-out; }

/* Troca de aba: fade curto (a classe .page já tem fadeIn; reforça suavidade) */
.page{ animation:uxFadeIn .18s ease-out; }

/* Feedback leve em botões */
.calc-btn, .save-btn, .btn-sm{ transition:transform .12s ease-out, box-shadow .15s ease-out, background .15s ease-out; }
.calc-btn:active{ transform:scale(.97); }
.save-btn:active{ transform:scale(.98); }

/* Cards com hover discreto (somente desktop / dispositivos com mouse) */
@media(hover:hover) and (pointer:fine){
  .history-item{ transition:border-color .15s ease-out, transform .12s ease-out; }
  .history-item:hover{ border-color:var(--accent); transform:translateY(-1px); }
}

/* Checkbox concluído: feedback sutil */
.hi-done-check input[type="checkbox"]{ transition:transform .12s ease-out; }
.hi-done-check input[type="checkbox"]:active{ transform:scale(.88); }

/* Accordions / blocos recolhíveis: abertura suave */
.ux-collapsible-body{
  overflow:hidden;
  max-height:0;
  opacity:0;
  transition:max-height .22s ease-out, opacity .18s ease-out, padding .2s ease-out;
}
.ux-collapsible-body.open{ max-height:1200px; opacity:1; }

.ux-collapsible-head{
  display:flex; align-items:center; justify-content:space-between;
  cursor:pointer; user-select:none;
}
.ux-collapsible-head .ux-arrow{
  transition:transform .2s ease-out;
  font-size:12px; color:var(--text3);
}
.ux-collapsible-head.open .ux-arrow{ transform:rotate(90deg); }

/* ── 6. CARDS DE PEDIDO: estados visuais discretos ── */
.history-item.is-concluido{ opacity:.6; }
.history-item.is-concluido::after{
  content:'✓'; position:absolute; top:10px; right:12px;
  color:var(--green); font-weight:800; font-size:13px;
}
.history-item{ position:relative; }

/* ── 10. MENU INFERIOR: safe-area + legibilidade ── */
.bottom-nav{
  padding-bottom:max(6px, env(safe-area-inset-bottom));
}
.bnav-btn{ transition:color .15s ease-out; }
.bnav-btn:active{ transform:none; }

/* ── prefers-reduced-motion: desliga animações ── */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .page, #resultados{ animation:none !important; }
}