/* 02-hero-cotacao.css — Topo (hero) e o mock interativo da cotação do dia.
   Os arquivos css/ são carregados em ordem numérica pelo index.html: a ordem importa (cascata). */
/* ---------- Hero ---------- */
.hero {
  padding: 5rem 0 5.5rem;
  position: relative;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 340px at 85% 10%, rgba(31, 107, 67, 0.1), transparent 70%),
    radial-gradient(500px 300px at 5% 90%, rgba(42, 74, 140, 0.07), transparent 70%);
  pointer-events: none;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 4rem;
  align-items: center;
  position: relative;
}
/* inline-block e nao inline-flex: agora que nao ha mais o ponto piscando, o
   selo tem so texto, e o texto quebra sozinho dentro da pilula. Era o flexbox
   que causava o defeito no mobile — o texto solto virava um item anonimo e,
   com flex-wrap, pulava inteiro de linha, deixando o ponto sozinho em cima. */
.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--chip-text);
  background: var(--chip-bg);
  padding: 0.42rem 0.95rem;
  border-radius: 999px;
  margin-bottom: 1.4rem;
}
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}
h1 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.6vw, 3.7rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--heading);
  margin-bottom: 1.3rem;
}
h1 .hl {
  color: var(--accent);
  position: relative;
  white-space: nowrap;
}
.hero-sub {
  font-size: 1.13rem;
  color: var(--ink-soft);
  max-width: 34rem;
  margin-bottom: 2.2rem;
}
.hero-ctas {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2.6rem;
}
.hero-proof {
  display: flex;
  gap: 2.2rem;
  flex-wrap: wrap;
}
.proof-item strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--heading);
}
.proof-item small {
  font-size: 0.82rem;
  color: var(--ink-soft);
}

/* Mock: cotação do dia */
.mock {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  overflow: hidden;
  transform: rotate(1.2deg);
  transition: transform 0.35s ease;
}
.mock:hover {
  transform: rotate(0deg) translateY(-4px);
}

/* ---------- Previa fiel ao sistema real (front-cotacao-ceasa) ----------
   Tipografia: o sistema usa Barlow Condensed em titulo/preco/botao (sempre caixa
   alta) e DM Sans no corpo. Cores de status copiadas de
   features/checkin/itemDisplay.ts — ITEM_STATUS_COLORS / RECEIVING_STATUS_COLORS.
   Nao mexa nos rotulos sem conferir no sistema: "Adicionar/Adicionado",
   "Indisponivel", "Pendente/Parcial/Completo/Sobra/Encerrado" e "Recebido" sao
   exatamente os que aparecem na tela do cliente. */
.mock,
.feed {
  --sys-body: 'DM Sans', system-ui, sans-serif;
  --sys-cond: 'Barlow Condensed', system-ui, sans-serif;
  --sys-ok: #16a34a; /* COMPLETE / OK          */
  --sys-partial: #d97706; /* PARTIAL / INCONGRUENT  */
  --sys-idle: #9ca3af; /* PENDING / UNAVAILABLE  */
  --sys-surplus: #2563eb; /* SURPLUS / CARREGAMENTO */
  --sys-returned: #6b7280; /* DEVOLVIDO              */
  --sys-subst: #0f766e; /* SUBSTITUIDO            */
  font-family: var(--sys-body);
}

/* --- Cotacao do dia: mesma interface da Previa do sistema. As classes .sl-*
   vem de 06-previa-sistema.css; aqui ficam so os ajustes do cartao, que e
   interativo de verdade e nao passa pela escala das molduras. --- */
.mock {
  container-type: inline-size;
  width: 100%;
  max-width: 460px;
  justify-self: end;
  align-self: start; /* o formulário cresce para baixo, sem tirar o botão de sob o cursor */
  overflow: clip; /* hidden prenderia o sticky da barra do carrinho */
  background: var(--sl-page);
  color: var(--sl-tx);
}
.mock button,
.mock select,
.mock input {
  font-family: var(--sl-body);
}
.mock-body {
  padding: 14px 16px 10px;
}
.mock .sl-mhead {
  height: 46px;
  font-size: 20px;
}
.mock .sl-mhead img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}
.mock .sl-av {
  width: 32px;
  height: 32px;
  font-size: 10px;
}
.mock .sl-head {
  padding-bottom: 10px;
}
.mock .sl-head .sl-kicker {
  margin: 0 0 2px;
}
.mock .sl-date {
  font-size: 23px;
}
.mock .sl-days {
  margin-top: 10px;
  padding: 9px 10px 10px;
}
.mock .sl-days header {
  margin-bottom: 7px;
}
.mock .sl-head > b {
  flex: none;
}

/* Faixa de aviso e halo no primeiro botao: somem com .touched, no primeiro clique. */
.mock-hint {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 16px;
  max-height: 4rem;
  overflow: hidden;
  background: #e8f4ec;
  color: #176b46;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1.4;
  border-bottom: 1px solid var(--sl-bd);
  transition:
    max-height 0.45s ease,
    opacity 0.35s ease,
    padding 0.45s ease;
}
.mock-hint svg {
  flex: none;
}
.mock.touched .mock-hint {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-bottom-color: transparent;
}
@keyframes hintPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(25, 112, 73, 0.5);
  }
  55% {
    box-shadow: 0 0 0 7px rgba(25, 112, 73, 0);
  }
}
.mock .sl-add.is-hint {
  animation: hintPulse 2.4s ease-out infinite;
}
.mock.touched .sl-add.is-hint {
  animation: none;
}

/* Dias */
.mock .sl-day {
  width: 100%;
  min-height: 40px;
  flex-direction: row;
  gap: 6px;
  font-family: var(--sl-body);
  transition:
    background 0.2s,
    border-color 0.2s;
}
.mock .sl-day:not(.on):hover {
  border-color: #176b46;
}
.mock .sl-day strong {
  font-size: 19px;
}
.mock .sl-day.on svg {
  top: 12px;
  right: 8px;
}

/* Categorias recolhiveis */
.mock .sl-cat {
  width: 100%;
  min-height: 36px;
  padding-block: 6px;
  margin-top: 2px;
  text-align: left;
  font-family: var(--sl-body);
}
.mock .sl-cat b {
  font-size: 15px;
}
.mock .sl-cat svg {
  transition: transform 0.25s ease;
}
.mock .sl-cat[aria-expanded='false'] svg {
  transform: rotate(-90deg);
}
.mock-fold {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.28s ease;
}
.mock-fold > div {
  min-height: 0;
  overflow: hidden;
}
.mock-fold.is-closed {
  grid-template-rows: 0fr;
}

/* Produto */
.mock .sl-sum {
  grid-template-columns: minmax(0, 1fr) auto 104px;
  gap: 12px;
  min-height: 60px;
  padding: 7px 4px;
}
.mock .sl-row.is-open .sl-sum {
  padding-inline: 10px;
}
.mock .sl-add {
  width: 100%;
  cursor: pointer;
}
.mock .sl-add:hover {
  background: #145a3b;
  border-color: #145a3b;
}
.mock .sl-row.is-open .sl-add:hover {
  background: #ffe3df;
  border-color: #e0a6a0;
}
.mock .sl-row.is-added .sl-add:hover {
  background: #d3ebdc;
  border-color: #d3ebdc;
}
.mock .sl-qty label {
  margin: 0;
}
.mock .sl-qty label > span:first-child {
  display: block;
  margin-bottom: 5px;
}
.mock .sl-qty .fld:focus-within {
  border-color: var(--sl-btn);
  box-shadow: 0 0 0 2px rgba(29, 112, 75, 0.2);
}
.mock .sl-qty select,
.mock .sl-qty input {
  flex: 1;
  width: 100%;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: none;
  color: inherit;
  font-size: 13px;
  font-weight: 600;
}
.mock .sl-qty select {
  appearance: none;
  cursor: pointer;
  margin-right: -23px;
  padding-right: 23px;
}
.mock .sl-qty .fld svg {
  flex: none;
  pointer-events: none;
}
.mock .sl-qty .ok {
  width: 100%;
  cursor: pointer;
}
.mock .sl-qty .ok:hover {
  background: #145a3b;
}
.mock-off {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 4px;
  border-bottom: 1px solid #e6ebe7;
  font-size: 13px;
  color: #7b8981;
}
.mock-off span {
  font-size: 11px;
  font-weight: 700;
}

/* Barra do carrinho: acompanha a rolagem enquanto o cartao esta na tela. */
.mock .sl-cartbar {
  position: sticky;
  left: auto;
  bottom: 10px;
  width: auto;
  margin: 0 10px 10px;
}
.mock .sl-fin {
  text-decoration: none;
}
@container (max-width: 440px) {
  .mock .sl-head > b {
    display: none;
  }
  .mock .sl-sum {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }
  .mock .sl-add {
    grid-column: 1 / 3;
    height: 42px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mock .sl-add.is-hint {
    animation: none;
  }
  .mock-fold,
  .mock .sl-cat svg {
    transition: none;
  }
}