/* OKOIE - Overlay de estilo para modais + toques visuais na tela de compra.
   Aplicado por cima do totem.css (MAQUINA DE GRAOS) sem mexer no layout dos
   cards de produto. Inspiracao: prototype Okoie do Vending_granel.
*/

:root {
  --okoie-cream: #FBEDD0;
  --okoie-cream-card: #FFF5DE;
  --okoie-ink: #183F2F;
  --okoie-ink-soft: rgba(24, 63, 47, 0.62);
  --okoie-lime: #B5CC3A;
  --okoie-lime-dark: #9EB52C;
  --okoie-orange: #DC5F30;
  --okoie-orange-2: #C44E23;
}

/* =========================================================
   CHECKOUT BAR (toques verde lime + icones)
   ========================================================= */

.checkout-bar .checkout-action {
  background: var(--okoie-lime) !important;
  color: var(--okoie-ink) !important;
  border: 3px solid var(--okoie-ink) !important;
  box-shadow: 0 6px 0 rgba(24, 63, 47, 0.18) !important;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.checkout-bar .checkout-action:hover {
  background: var(--okoie-lime-dark) !important;
}
.checkout-bar .checkout-action .ok-cart-icon {
  width: 28px; height: 28px;
  flex-shrink: 0;
}
/* "Finalizar compra" + total numa linha so, sem quebrar (pedido Ana) */
.checkout-bar .checkout-action { flex-wrap: nowrap; white-space: nowrap; }
.checkout-bar .checkout-action span,
.checkout-bar .checkout-action strong { white-space: nowrap; }
.checkout-bar .clear-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.checkout-bar .clear-action .ok-trash-icon {
  width: 20px; height: 20px;
}

/* Status pill verde lime quando "Pronto" */
.status-pill {
  border: 2px solid var(--okoie-ink) !important;
}

/* Small icon dentro do slot-box (decorativo) */
.product-tile .slot-box .ok-grain-icon {
  width: 16px;
  height: 16px;
  margin-bottom: 2px;
  opacity: 0.7;
}

/* =========================================================
   MODAL OKOIE (cart, payment-method, pix, card, confirmed)
   ========================================================= */

.flow-modal {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  width: 100% !important;
  height: 100% !important;
}
.flow-modal::backdrop {
  background: rgba(251, 237, 208, 0.78) !important;
  backdrop-filter: blur(3px);
}

.flow-stage {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 100vh;
  padding: 40px 20px 40px;
  box-sizing: border-box;
}

.okoie-card {
  position: relative;
  width: 680px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  background: var(--okoie-cream-card);
  border: 3px solid var(--okoie-ink);
  border-radius: 30px;
  box-shadow: 0 32px 80px rgba(24, 63, 47, 0.25);
  overflow: visible;
  animation: okoie-pop 220ms ease-out;
}
.okoie-card-header { flex: 0 0 auto; }
.okoie-card-body   { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.okoie-card-footer { flex: 0 0 auto; background: var(--okoie-cream-card); border-bottom-left-radius: 27px; border-bottom-right-radius: 27px; }
@keyframes okoie-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

.okoie-tab {
  position: absolute;
  top: -22px;
  left: -22px;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  background: var(--okoie-lime);
  border: 3px solid var(--okoie-ink);
  border-radius: 20px;
  font-weight: 900;
  font-size: 28px;
  color: var(--okoie-ink);
  z-index: 3;
}
.okoie-tab svg { width: 32px; height: 32px; }
.okoie-tab.okoie-tab-money { background: var(--okoie-orange); color: var(--okoie-cream-card); }
.okoie-tab.okoie-tab-check { background: var(--okoie-lime); }
.okoie-tab.okoie-tab-cart  { background: var(--okoie-orange); color: var(--okoie-cream-card); }

.okoie-card-header {
  padding: 28px 40px;
  background: var(--okoie-lime);
  border-top-left-radius: 27px;
  border-top-right-radius: 27px;
  border-bottom: 3px solid var(--okoie-ink);
  text-align: center;
}
.okoie-card-header h3 {
  font-size: 32px;
  font-weight: 800;
  color: var(--okoie-ink);
  letter-spacing: 0.06em;
  margin: 0;
}

.okoie-card-body {
  padding: 30px 40px 24px;
  color: var(--okoie-ink);
}
.okoie-card-body.center { text-align: center; }
.okoie-caption {
  font-size: 22px;
  line-height: 1.45;
  color: var(--okoie-ink);
}
.okoie-caption + .okoie-caption { margin-top: 18px; }
.okoie-muted {
  font-size: 17px;
  color: var(--okoie-ink-soft);
  margin-top: 10px;
}

.okoie-card-footer {
  padding: 0 40px 32px;
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ----------- Buttons pill Okoie ----------- */

.okoie-btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 48px;
  min-height: 68px;
  background: var(--okoie-lime);
  color: var(--okoie-ink);
  border: 3px solid var(--okoie-ink);
  border-radius: 999px;
  font-weight: 800;
  font-size: 24px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
  box-shadow: 0 6px 0 rgba(24, 63, 47, 0.18);
}
.okoie-btn-pill:hover { transform: translateY(-2px); background: var(--okoie-lime-dark); }
.okoie-btn-pill:active { transform: translateY(0); box-shadow: 0 3px 0 rgba(24, 63, 47, 0.2); }
.okoie-btn-pill[disabled] { opacity: 0.6; cursor: not-allowed; }

.okoie-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 48px;
  min-height: 68px;
  background: transparent;
  color: var(--okoie-ink);
  border: 3px solid var(--okoie-ink);
  border-radius: 999px;
  font-weight: 800;
  font-size: 24px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 120ms ease;
}
.okoie-btn-outline:hover { background: rgba(24, 63, 47, 0.07); }

.okoie-btn-small {
  min-height: 54px;
  padding: 12px 32px;
  font-size: 18px;
}

/* ----------- Cart list ----------- */

.okoie-cart-list {
  display: grid;
  gap: 10px;
}
.okoie-cart-row {
  display: grid;
  grid-template-columns: 1.2fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 14px 8px;
  border-bottom: 1.5px solid rgba(24, 63, 47, 0.15);
}
.okoie-cart-row:last-child { border-bottom: 0; }
.okoie-cart-name { font-size: 20px; font-weight: 700; color: var(--okoie-ink); }
.okoie-cart-pill {
  padding: 6px 18px;
  border: 2px solid var(--okoie-ink);
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
}
.okoie-cart-price {
  font-size: 22px;
  font-weight: 800;
  min-width: 100px;
  text-align: right;
}
.okoie-cart-total {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 3px solid var(--okoie-ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.okoie-cart-total .label { font-size: 22px; font-weight: 800; letter-spacing: 0.04em; }
.okoie-cart-total .value { font-size: 32px; font-weight: 900; }

/* ----------- Method stack ----------- */

.okoie-method-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
}
.okoie-btn-method {
  min-width: 420px;
  max-width: 100%;
  font-size: 24px;
}

/* ----------- QR Box ----------- */

.okoie-qr-box {
  width: 320px;
  height: 320px;
  margin: 18px auto 16px;
  padding: 16px;
  background: var(--okoie-cream-card);
  border: 3px solid var(--okoie-ink);
  border-radius: 22px;
  display: grid;
  place-items: center;
}
.okoie-qr-box canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* ----------- Card illustration ----------- */

.okoie-card-illu {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: center;
  margin: 24px 0 20px;
}
.okoie-card-illu-plastic {
  width: 200px;
  height: 130px;
  padding: 14px 18px;
  border: 3px solid var(--okoie-ink);
  border-radius: 18px;
  background: var(--okoie-cream-card);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.okoie-card-chip {
  width: 34px;
  height: 26px;
  border-radius: 5px;
  background: linear-gradient(135deg, #c9b46e 0%, #a8923f 60%, #d8c57f 100%);
  border: 1px solid rgba(24, 63, 47, 0.35);
}
.okoie-card-label {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--okoie-ink);
}
.okoie-card-reader {
  width: 130px;
  height: 130px;
  background: var(--okoie-lime);
  border: 3px solid var(--okoie-ink);
  border-radius: 18px;
  display: grid;
  place-items: center;
}
.okoie-card-reader .mos {
  width: 70%;
  height: 70%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 5px;
}
.okoie-card-reader .mos span { background: var(--okoie-ink); border-radius: 5px; }
.okoie-card-reader .mos span.cream { background: var(--okoie-cream-card); }
.okoie-card-reader .mos span.dot   { background: var(--okoie-orange); border-radius: 50%; }

/* ----------- Status loading ----------- */

.okoie-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
  font-size: 18px;
  color: var(--okoie-ink-soft);
}
.okoie-loading .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--okoie-orange);
  animation: okoie-blink 1.1s ease-in-out infinite;
}
@keyframes okoie-blink { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
@keyframes okoie-arrow-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(8px); }
}

/* ----------- Receipt ----------- */

.okoie-receipt {
  background: var(--okoie-cream-card);
  border: 2px dashed var(--okoie-ink);
  border-radius: 14px;
  padding: 16px;
  margin: 16px 0 12px;
  font-family: "Cascadia Mono", "Consolas", monospace;
  font-size: 13px;
  line-height: 1.45;
  white-space: pre;
  text-align: left;
  overflow-x: auto;
  max-height: 260px;
  overflow-y: auto;
  color: var(--okoie-ink);
}

/* =========================================================
   LAYOUT-GRADE AUTO-AJUSTAVEL (rascunho oficial Bryan)
   A grade preenche a tela sem scroll. Colunas/linhas vem de --cols/--rows
   (calculados em JS por orientacao + nº de produtos). O card usa container
   queries (cqh/cqw/cqmin) pra escalar fontes e imagem com o proprio tamanho,
   evitando amontoar. Ordem do card: contador, imagem, +, -, nome, descricao,
   preco/porcao, preco/kg.
   ========================================================= */

.product-board.grade-auto {
  display: grid !important;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)) !important;
  grid-template-rows: repeat(var(--rows, 3), minmax(0, 1fr)) !important;
  grid-auto-rows: 0 !important;          /* impede linha-fantasma fora do calculo do solver */
  grid-auto-columns: 0 !important;
  gap: 8px;                              /* DEVE bater com FIT.GAP no totem.js */
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden !important;           /* trava: o board NUNCA rola */
  padding: 2px;
}

.grade-auto .product-tile {
  container-type: size;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  background: #fff;
  border: 1.5px solid #143b2b;
  border-radius: 2.2cqmin;
  /* zera estilos do layout antigo */
  grid-template-columns: none;
  grid-template-rows: none;
  /* respiro: afasta o conteudo da margem + espaca os textos (pedido Ana) */
  padding: 1.6cqh 3.5cqw;
  gap: 0.5cqh;
}
.grade-auto .product-tile.is-selected {
  border-color: var(--lime, #b4c907);
  outline: 0.7cqmin solid var(--lime, #b4c907);
}

.grade-auto .pg-count {
  flex: 0 0 auto; text-align: center; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: min(5.4cqh, 20px); line-height: 1; padding: 0 1cqw 0.6cqh;
  color: #143b2b;
  /* linha entre porcoes e imagem REMOVIDA (pedido Ana) */
}
.grade-auto .pg-count strong { font-size: min(8cqh, 32px); }

/* imagem MENOR + preenchendo o quadro (so os graos, sem borda/fundo) — Ana */
.grade-auto .pg-img {
  flex: 1 1 auto; min-height: 14cqh; max-height: 42cqh; margin: 0;
  border: 0; border-radius: 2cqmin;
  overflow: hidden; background: transparent;
}
.grade-auto .pg-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.grade-auto .pg-img-fallback {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: min(16cqh, 60px); color: var(--accent, #176b45);
}

/* botoes +/- LADO A LADO em duas caixas arredondadas com espaco entre elas:
   − ESQUERDA (rosa/salmao), + DIREITA (verde). Convencao do modo toque + design Ana.
   min-height garante alvo de toque confortavel (pedido do Bryan). */
.grade-auto .pg-btns {
  flex: 0 0 auto; display: flex; gap: 4cqw; padding: 0.6cqh 0.5cqw;
}
.grade-auto .pg-btn {
  flex: 1 1 0; border: 0; border-radius: 2.6cqmin;
  background: transparent; font-weight: 800; line-height: 1;
  font-size: min(9cqh, 38px); padding: 1.4cqh 0; min-height: 2rem; cursor: pointer;
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.grade-auto .pg-minus { color: #b23a1a; background: #f6d7d0; }
.grade-auto .pg-plus  { color: #3d6b1e; background: #dcecb4; }
.grade-auto .pg-btn[disabled] { opacity: .3; }

.grade-auto .pg-name {
  flex: 0 0 auto; text-align: center; font-weight: 800; text-transform: uppercase;
  font-size: min(6cqh, 30px); line-height: 1.04; margin-top: 1.2cqh; padding: 0 1cqw; color: #143b2b;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere;
}
.grade-auto .pg-sub {
  flex: 0 0 auto; text-align: center; color: #5f625f; font-size: min(4.8cqh, 22px); line-height: 1.1;
  padding: 0.2cqh 1.5cqw 0; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.grade-auto .pg-price {
  flex: 0 0 auto; text-align: center; font-weight: 700; font-size: min(5cqh, 26px); margin-top: 0.3cqh; color: #143b2b;
}
.grade-auto .pg-kg {
  flex: 0 0 auto; text-align: center; color: #7a7d77; font-size: min(4.2cqh, 20px); padding-bottom: 1cqh;
}

/* ----- Densidade: desafoga o card ANTES de amontoar nome/preco -----
   .dense   (card < 230px de altura): esconde a linha "preco/kg" (secundaria).
   .dense-2 (card < 175px, ex.: muitos produtos numa tela 7"): esconde tambem
   a descricao e aumenta nome/preco com o espaco liberado. O board nunca rola
   em nenhum caso — so reduz decoracao. */
.product-board.grade-auto.dense .pg-kg { display: none; }
/* o espaco liberado pelo /kg vai pra nome+preco (prioridade), nao pra imagem */
.product-board.grade-auto.dense .pg-name  { font-size: min(7cqh, 30px); }
.product-board.grade-auto.dense .pg-price { font-size: min(6cqh, 26px); }
.product-board.grade-auto.dense-2 .pg-kg,
.product-board.grade-auto.dense-2 .pg-sub { display: none; }
.product-board.grade-auto.dense-2 .pg-name  { font-size: min(8.5cqh, 30px); }
.product-board.grade-auto.dense-2 .pg-price { font-size: min(7.5cqh, 28px); }

/* Fallback para engines sem unidades de container (improvavel em Chromium 108
   do SK210/RPi, mas seguro): fontes em rem pra continuar legivel. */
@supports not (height: 1cqh) {
  .grade-auto .pg-count        { font-size: 0.95rem; }
  .grade-auto .pg-count strong { font-size: 1.3rem; }
  .grade-auto .pg-btn          { font-size: 1.6rem; }
  .grade-auto .pg-name         { font-size: 1rem; }
  .grade-auto .pg-sub          { font-size: 0.8rem; }
  .grade-auto .pg-price        { font-size: 0.95rem; }
  .grade-auto .pg-kg           { font-size: 0.72rem; }
  .grade-auto .pg-img-fallback { font-size: 2rem; }
}

/* =========================================================
   MODO TOQUE (rascunho antigo): clicar em cima = +1, embaixo = -1
   Ativado por ?toque=1. Esconde botoes +/- e usa o card inteiro.
   ========================================================= */

.modo-toque .portion-buttons { display: none !important; }

.modo-toque .product-tile {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

/* zona ESQUERDA (－) e DIREITA (＋) — gradiente nas bordas, centro limpo */
.modo-toque .product-tile::before,
.modo-toque .product-tile::after {
  position: absolute;
  top: 0; bottom: 0;
  width: 42%;
  z-index: 5;
  pointer-events: none;
  display: flex;
  align-items: center;
  font-weight: 900;
  font-size: 2.6rem;
  line-height: 1;
}
/* esquerda = subtrai (－, laranja) */
.modo-toque .product-tile::before {
  content: "－";
  left: 0;
  justify-content: flex-start;
  padding-left: 8px;
  color: #8a2f15;
  background: linear-gradient(to right, rgba(220, 95, 48, 0.42), rgba(220, 95, 48, 0));
}
/* direita = adiciona (＋, verde lime) */
.modo-toque .product-tile::after {
  content: "＋";
  right: 0;
  justify-content: flex-end;
  padding-right: 8px;
  color: #1f3d2b;
  background: linear-gradient(to left, rgba(181, 204, 58, 0.55), rgba(181, 204, 58, 0));
}
/* quando tem item selecionado, realca a zona + (direita) */
.modo-toque .product-tile.is-selected::after {
  background: linear-gradient(to left, rgba(181, 204, 58, 0.85), rgba(181, 204, 58, 0));
}
/* contador grande e legivel acima das zonas */
.modo-toque .portion-count {
  position: relative;
  z-index: 6;
  font-size: 2rem;
  font-weight: 900;
  color: #143;
}
.modo-toque .count-label { position: relative; z-index: 6; }

/* =========================================================
   PRODUCT BOARD (pequenos toques sem alterar muito)
   ========================================================= */

.product-tile .product-image,
.product-tile .grain-art {
  border: 2px solid rgba(24, 63, 47, 0.15);
  border-radius: 12px;
  overflow: hidden;
}

/* Quando o produto esta selecionado, badge verde lime no canto */
.product-tile.is-selected {
  outline: 3px solid var(--okoie-lime);
}