/* O atributo hidden precisa vencer os display:flex deste arquivo.
   Sem isto, a barra da sacola, a mensagem de sacola vazia e o campo de
   troco ficam permanentemente visiveis. */
[hidden] { display: none !important; }

/* =========================================================================
   carrinho.css — Doceria Doce Encanto
   Visual da sacola: barra flutuante, gaveta (drawer), checkout.
   O HTML e injetado por js/carrinho.js — aqui so ha aparencia.
   Depende dos tokens --if-* definidos em css/tema.css.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. BARRA FLUTUANTE "VER SACOLA"
   Fixa no rodape, largura cheia, vermelha. O JS mostra/esconde alternando
   o atributo hidden ou a propria montagem do elemento.
   ------------------------------------------------------------------------- */
.sacola-barra {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1200;

  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 20px;
  /* Respeita a area segura do iPhone (home indicator). */
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));

  border: 0;
  background: var(--if-red);
  color: var(--if-on-red);
  font-family: var(--if-fonte);
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  box-shadow: var(--if-sombra-alta);
  transition: background var(--if-transicao);
}

.sacola-barra:hover {
  background: var(--if-red-dark);
}

.sacola-barra:focus-visible {
  outline: 2px solid var(--if-on-red);
  outline-offset: -4px;
}

/* Bolinha com a quantidade de itens */
.sacola-barra__qtd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;

  border-radius: var(--if-raio-pill);
  background: var(--if-on-red);
  color: var(--if-red);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.sacola-barra__label {
  flex: 1 1 auto;
  text-align: center;
  letter-spacing: .01em;
}

.sacola-barra__total {
  flex: 0 0 auto;
  font-weight: 700;
  white-space: nowrap;
}

/* -------------------------------------------------------------------------
   2. CORTINA
   ------------------------------------------------------------------------- */
.overlay-sacola {
  position: fixed;
  inset: 0;
  z-index: 1290;

  background: var(--if-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}

.overlay-sacola--visivel {
  opacity: 1;
  visibility: visible;
}

/* -------------------------------------------------------------------------
   3. GAVETA DA SACOLA
   Desktop: entra pela direita (max-width 420px).
   Mobile:  sobe de baixo (ver bloco 8).
   ------------------------------------------------------------------------- */
.sacola,
.checkout {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1300;

  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 420px;

  background: var(--if-surface);
  color: var(--if-ink);
  font-family: var(--if-fonte);
  box-shadow: -4px 0 24px rgba(0, 0, 0, .18);

  transform: translateX(100%);
  visibility: hidden;
  transition: transform .28s ease, visibility .28s ease;
}

/* O checkout e a segunda etapa: fica por cima da gaveta. */
.checkout {
  z-index: 1310;
}

.sacola--aberta,
.checkout--aberto {
  transform: translateX(0);
  visibility: visible;
}

/* --- Cabecalho ----------------------------------------------------------- */
.sacola__cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: 0 0 auto;
  padding: 16px 20px;

  border-bottom: 1px solid var(--if-line);
  background: var(--if-surface);
  font-size: 17px;
  font-weight: 600;
}

.sacola__cabecalho h2,
.sacola__cabecalho h3 {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  color: var(--if-ink);
}

/* Botoes de acao do cabecalho (fechar, voltar, limpar) */
.sacola__cabecalho button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;

  border: 0;
  border-radius: var(--if-raio-pill);
  background: transparent;
  color: var(--if-muted);
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
  transition: background var(--if-transicao), color var(--if-transicao);
}

.sacola__cabecalho button:hover {
  background: var(--if-bg);
  color: var(--if-ink);
}

.sacola__cabecalho button:focus-visible {
  outline: 2px solid var(--if-red);
  outline-offset: 2px;
}

/* --- Lista de itens ------------------------------------------------------ */
.sacola__lista {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  padding: 4px 0;
  list-style: none;
}

.sacola__item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: start;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--if-line);
}

.sacola__item:last-child {
  border-bottom: 0;
}

.sacola__item-img {
  width: 56px;
  height: 56px;
  border: 1px solid var(--if-line);
  border-radius: var(--if-raio);
  object-fit: cover;
  background: var(--if-bg);
}

.sacola__item-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.sacola__item-nome {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--if-ink);
}

.sacola__item-opcoes {
  font-size: 13px;
  line-height: 1.4;
  color: var(--if-muted);
  /* Sabores e observacao podem ser longos: quebra sem estourar a gaveta. */
  overflow-wrap: anywhere;
}

.sacola__item-preco {
  font-size: 15px;
  font-weight: 700;
  color: var(--if-red);
  white-space: nowrap;
}

/* Coluna da direita: preco em cima, stepper embaixo. */
.sacola__item > .sacola__item-preco {
  grid-column: 3;
  text-align: right;
}

.sacola__item .stepper {
  grid-column: 3;
  justify-self: end;
}

/* --- Stepper de quantidade ---------------------------------------------- */
.stepper {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--if-line);
  border-radius: var(--if-raio-pill);
  background: var(--if-surface);
  overflow: hidden;
}

.stepper__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;

  border: 0;
  background: transparent;
  color: var(--if-red);
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background var(--if-transicao), color var(--if-transicao);
}

.stepper__btn:hover {
  background: var(--if-red-soft);
}

.stepper__btn:focus-visible {
  outline: 2px solid var(--if-red);
  outline-offset: -2px;
}

.stepper__btn:disabled {
  color: var(--if-disabled);
  cursor: not-allowed;
  background: transparent;
}

.stepper__valor {
  min-width: 24px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--if-ink);
  font-variant-numeric: tabular-nums;
}

/* --- Estado vazio -------------------------------------------------------- */
.sacola__vazia {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 24px;

  text-align: center;
  font-size: 15px;
  color: var(--if-muted);
}

/* --- Aviso (pedido minimo, loja fechada, erro) --------------------------- */
.sacola__aviso {
  margin: 0 0 12px;
  padding: 10px 12px;

  border: 1px solid var(--if-red);
  border-radius: var(--if-raio);
  background: var(--if-red-soft);
  color: var(--if-red-dark);
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
}

/* --- Rodape com totais e acoes ------------------------------------------ */
.sacola__rodape {
  flex: 0 0 auto;
  padding: 16px 20px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));

  border-top: 1px solid var(--if-line);
  background: var(--if-surface);
}

.sacola__linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;

  font-size: 14px;
  color: var(--if-muted);
}

/* "Grátis" na taxa de entrega. Verde escurecido (ver bloco 4): o verde puro
   fica em ~2,7:1 sobre branco, abaixo do minimo AA. */
.sacola__linha strong,
.sacola__linha .gratis {
  color: var(--if-green-ink);
  font-weight: 600;
}

.sacola__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 6px 0 14px;
  padding-top: 10px;

  border-top: 1px solid var(--if-line);
  font-size: 16px;
  font-weight: 700;
  color: var(--if-ink);
}

.sacola__total span:last-child {
  color: var(--if-red);
}

/* --- Botoes da gaveta ---------------------------------------------------- */
.sacola__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 20px;
  margin: 0;

  border: 2px solid var(--if-red);
  border-radius: var(--if-raio);
  background: var(--if-red);
  color: var(--if-on-red);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--if-transicao), border-color var(--if-transicao),
              color var(--if-transicao);
}

.sacola__btn:hover {
  background: var(--if-red-dark);
  border-color: var(--if-red-dark);
}

.sacola__btn:focus-visible {
  outline: 2px solid var(--if-red);
  outline-offset: 2px;
}

.sacola__btn:disabled {
  background: var(--if-disabled);
  border-color: var(--if-disabled);
  color: var(--if-on-red);
  cursor: not-allowed;
}

/* Variante secundaria: so contorno ("Continuar comprando", "Voltar") */
.sacola__btn--fantasma {
  margin-top: 8px;
  background: transparent;
  border-color: var(--if-line);
  color: var(--if-ink);
}

.sacola__btn--fantasma:hover {
  background: var(--if-bg);
  border-color: var(--if-muted);
  color: var(--if-ink);
}

/* =========================================================================
   4. CHECKOUT — etapas de dados do cliente
   Formulario em passos: cada passo e um cartao branco sobre fundo cinza.
   O HTML e injetado por js/carrinho.js; aqui so ha aparencia.
   ========================================================================= */

/* Verde escurecido, usado so em texto ("Gratis", selo de frete, PIX).
   O --if-green puro rende ~2,7:1 sobre branco — abaixo do minimo AA de
   4,5:1. Escurecido com --if-ink chega a ~4,9:1 e continua sendo o mesmo
   verde da marca, sem introduzir hex literal. Navegador sem color-mix
   recebe o verde original pela primeira declaracao. */
:root {
  --if-green-ink: var(--if-green);
}

@supports (color: color-mix(in srgb, white, black)) {
  :root {
    --if-green-ink: color-mix(in srgb, var(--if-green) 50%, var(--if-ink));
  }
}

/* --- Area rolavel -------------------------------------------------------- */
.checkout .sacola__lista,
.checkout form {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
}

/* Com passos, o fundo cinza da area rolavel e o que faz os cartoes
   brancos existirem. Sem passos (formulario simples), segue branco. */
.checkout form:has(.checkout__passo) {
  background: var(--if-bg);
}

/* -------------------------------------------------------------------------
   4.1 PASSOS DO FORMULARIO
   ------------------------------------------------------------------------- */
.checkout__passo {
  padding: 16px;
  margin: 0 0 12px;

  border: 1px solid var(--if-line);
  border-radius: var(--if-raio);
  background: var(--if-surface);
}

.checkout__passo:last-child {
  margin-bottom: 0;
}

.checkout__passo-topo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

/* Circulo com o numero da etapa. */
.checkout__passo-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;

  border-radius: var(--if-raio-pill);
  background: var(--if-red);
  color: var(--if-on-red);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.checkout__passo-titulo {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--if-ink);
}

/* --- Grade dos campos ----------------------------------------------------
   auto-fit + minmax faz a segunda coluna aparecer so quando ha largura
   real para ela; na gaveta estreita do celular tudo vira uma coluna. */
.checkout__campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 12px;
}

/* Por padrao o campo ocupa a linha inteira. */
.checkout__campos > .campo {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

/* Numero, bairro: metade da linha quando as duas colunas existem. */
.checkout__campos > .campo--metade {
  grid-column: auto;
}

/* Abaixo de 420px nao ha espaco util para duas colunas. */
@media only screen and (max-width: 419px) {
  .checkout__campos {
    grid-template-columns: 1fr;
  }

  .checkout__campos > .campo--metade {
    grid-column: 1 / -1;
  }
}

/* -------------------------------------------------------------------------
   4.2 CAMPOS
   ------------------------------------------------------------------------- */
.campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.checkout__passo > .campo:last-child {
  margin-bottom: 0;
}

.campo__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--if-muted);
}

.campo__input {
  width: 100%;
  /* 48px de alvo para o dedo; 16px de fonte evita o zoom automatico que o
     iOS aplica ao focar um campo com texto menor. */
  min-height: 48px;
  padding: 12px 14px;

  border: 1px solid var(--if-line);
  border-radius: var(--if-raio);
  background: var(--if-surface);
  color: var(--if-ink);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.35;
  transition: border-color var(--if-transicao), box-shadow var(--if-transicao);
}

/* textarea de observacoes: mesma moldura, mais respiro. */
textarea.campo__input {
  min-height: 84px;
  resize: vertical;
}

.campo__input::placeholder {
  color: var(--if-muted);
}

.campo__input:focus {
  border-color: var(--if-red);
}

.campo__input:focus-visible {
  outline: 0;
  border-color: var(--if-red);
  box-shadow: var(--if-foco);
}

/* Campo reprovado na validacao: o JS marca aria-invalid="true". */
.campo__input[aria-invalid="true"] {
  border-color: var(--if-red);
  background: var(--if-red-soft);
}

.campo__erro {
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
  color: var(--if-red-dark);
}

/* Erro fica oculto ate o JS preenche-lo. */
.campo__erro:empty {
  display: none;
}

/* -------------------------------------------------------------------------
   4.3 ESCOLHAS EM CARTAO — entrega e pagamento (formato antigo)
   ------------------------------------------------------------------------- */
.opcao-entrega {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  margin-bottom: 8px;

  border: 1px solid var(--if-line);
  border-radius: var(--if-raio);
  background: var(--if-surface);
  color: var(--if-ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--if-transicao), background var(--if-transicao),
              color var(--if-transicao);
}

.opcao-entrega:hover {
  border-color: var(--if-muted);
}

.opcao-entrega:focus-visible {
  outline: 2px solid var(--if-red);
  outline-offset: 2px;
}

.opcao-entrega--ativa {
  border-color: var(--if-red);
  background: var(--if-red-soft);
  color: var(--if-red-dark);
  font-weight: 600;
}

/* Marcador circular a esquerda, no lugar do radio nativo. */
.opcao-entrega::before {
  content: "";
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 2px solid var(--if-line);
  border-radius: var(--if-raio-pill);
  background: var(--if-surface);
  transition: border-color var(--if-transicao), box-shadow var(--if-transicao);
}

.opcao-entrega--ativa::before {
  border-color: var(--if-red);
  /* O "miolo" do radio e desenhado com sombra interna. */
  box-shadow: inset 0 0 0 3px var(--if-surface), inset 0 0 0 9px var(--if-red);
}

/* -------------------------------------------------------------------------
   4.4 OPCOES DE FRETE
   Cartao clicavel de largura total: marca, texto, valor a direita.
   ------------------------------------------------------------------------- */
.opcao-frete {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 12px 14px;
  margin: 0 0 8px;

  border: 2px solid var(--if-line);
  border-radius: var(--if-raio);
  background: var(--if-surface);
  color: var(--if-ink);
  font-family: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--if-transicao), background var(--if-transicao);
}

.opcao-frete:last-child {
  margin-bottom: 0;
}

.opcao-frete:hover {
  border-color: var(--if-muted);
}

.opcao-frete:focus-visible {
  outline: 2px solid var(--if-red);
  outline-offset: 2px;
}

.opcao-frete--ativa {
  border-color: var(--if-red);
  background: var(--if-red-soft);
}

/* Radio visual: circulo vazio que ganha miolo vermelho quando ativo. */
.opcao-frete__marca {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border: 2px solid var(--if-line);
  border-radius: var(--if-raio-pill);
  background: var(--if-surface);
  transition: border-color var(--if-transicao), box-shadow var(--if-transicao);
}

.opcao-frete--ativa .opcao-frete__marca {
  border-color: var(--if-red);
  box-shadow: inset 0 0 0 3px var(--if-surface), inset 0 0 0 10px var(--if-red);
}

.opcao-frete__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}

.opcao-frete__nome {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--if-ink);
}

.opcao-frete__desc {
  font-size: 12px;
  line-height: 1.35;
  color: var(--if-muted);
}

.opcao-frete__valor {
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 600;
  color: var(--if-ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Quando o frete sai de graca, o JS pode marcar o valor com o mesmo
   modificador do resumo (.checkout__resumo-valor--gratis): a regra do
   bloco 4.7 ja pinta de verde qualquer elemento com essa classe. */

/* -------------------------------------------------------------------------
   4.5 BLOCO DO PIX
   Nao e escolha, e informacao: cartao unico, verde suave, sem radio.
   Verde (e nao um segundo vermelho) para nao competir com o CTA.
   ------------------------------------------------------------------------- */
.pix-bloco {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;

  border-radius: var(--if-raio);
  background: var(--if-green-soft);
}

.pix-bloco__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;

  border-radius: var(--if-raio);
  background: var(--if-surface);
  color: var(--if-green-ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
}

.pix-bloco__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
}

.pix-bloco__nome {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--if-ink);
}

.pix-bloco__desc {
  font-size: 13px;
  line-height: 1.35;
  color: var(--if-muted);
}

/* Chip pequeno: "Confirmação em segundos". */
.pix-bloco__selo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  padding: 3px 9px;

  border-radius: var(--if-raio-pill);
  background: var(--if-surface);
  color: var(--if-green-ink);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
}

/* -------------------------------------------------------------------------
   4.6 SELO DE FRETE GRATIS
   Faixa verde suave. Le como conquista, nao como aviso: sem borda dura,
   sem icone de alerta.
   ------------------------------------------------------------------------- */
.selo-frete {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 10px 12px;

  border-radius: var(--if-raio);
  background: var(--if-green-soft);
  color: var(--if-green-ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.selo-frete:last-child {
  margin-bottom: 0;
}

.selo-frete__emoji {
  flex: 0 0 auto;
  font-size: 16px;
  line-height: 1;
}

.selo-frete__texto {
  min-width: 0;
}

/* -------------------------------------------------------------------------
   4.7 RESUMO DO PEDIDO
   ------------------------------------------------------------------------- */
.checkout__resumo {
  padding: 14px;
  margin: 0 0 12px;

  border-radius: var(--if-raio);
  background: var(--if-bg);
}

/* Dentro do rodape branco o resumo e a ultima coisa antes do CTA. */
.sacola__rodape .checkout__resumo {
  margin-bottom: 12px;
}

.checkout__resumo-linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  font-size: 14px;
}

.checkout__resumo-rotulo {
  color: var(--if-muted);
}

.checkout__resumo-valor {
  font-weight: 500;
  color: var(--if-ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* "Grátis": verde escurecido para passar em AA sobre o cinza claro. */
.checkout__resumo-valor--gratis {
  color: var(--if-green-ink);
  font-weight: 600;
}

.checkout__resumo-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  padding-top: 10px;

  border-top: 1px solid var(--if-line);
  font-size: 18px;
  font-weight: 700;
  color: var(--if-ink);
}

/* O rotulo do total acompanha o peso da linha, nao o cinza das parciais. */
.checkout__resumo-total .checkout__resumo-rotulo,
.checkout__resumo-total .checkout__resumo-valor {
  font-size: 18px;
  font-weight: 700;
  color: var(--if-ink);
}

/* -------------------------------------------------------------------------
   4.8 CTA FINAL
   O elemento de maior destaque da tela. Valor a direita, dentro do botao.
   ------------------------------------------------------------------------- */
.checkout__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  height: 54px;
  padding: 0 18px;
  margin: 0;

  border: 0;
  border-radius: var(--if-raio);
  background: var(--if-red);
  color: var(--if-on-red);
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  text-align: left;
  cursor: pointer;
  box-shadow: var(--if-sombra);
  transition: background var(--if-transicao), box-shadow var(--if-transicao);
}

.checkout__cta:hover {
  background: var(--if-red-dark);
}

.checkout__cta:focus-visible {
  outline: 2px solid var(--if-red);
  outline-offset: 2px;
}

.checkout__cta:disabled {
  background: var(--if-disabled);
  opacity: .75;
  cursor: not-allowed;
  box-shadow: none;
}

.checkout__cta-valor {
  margin-left: auto;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------
   4.9 MICRO-BENEFICIOS E SEGURANCA
   ------------------------------------------------------------------------- */
.checkout__beneficios {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;

  font-size: 12px;
  line-height: 1.35;
  color: var(--if-muted);
}

.checkout__beneficio {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* Separador discreto entre os beneficios (risquinho, nao bullet). */
.checkout__beneficio + .checkout__beneficio::before {
  content: "";
  flex: 0 0 auto;
  width: 1px;
  height: 12px;
  background: var(--if-line);
}

/* Telas muito estreitas: empilha e dispensa os separadores. */
@media only screen and (max-width: 379px) {
  .checkout__beneficios {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .checkout__beneficio + .checkout__beneficio::before {
    display: none;
  }
}

.checkout__seguranca {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;

  font-size: 12px;
  line-height: 1.35;
  color: var(--if-muted);
  text-align: left;
}

/* -------------------------------------------------------------------------
   5. MOBILE — a gaveta vira folha que sobe de baixo
   ------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
  .sacola,
  .checkout {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: none;

    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, .22);
    transform: translateY(100%);
  }

  .sacola {
    height: 92vh;
    max-height: 92dvh;
  }

  /* O checkout ocupa a tela inteira: formulario longo, sem gaveta pela
     metade nem cantos arredondados sobrando. */
  .checkout {
    height: 100vh;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
  }

  .sacola--aberta,
  .checkout--aberto {
    transform: translateY(0);
  }

  .sacola__item {
    grid-template-columns: 48px 1fr auto;
  }

  .sacola__item-img {
    width: 48px;
    height: 48px;
  }

  /* Rodape do checkout colado no fim da tela: o CTA fica sempre a um
     toque de distancia, acima da area segura do iPhone. */
  .checkout .sacola__rodape {
    position: sticky;
    bottom: 0;
    z-index: 2;

    border-top: 1px solid var(--if-line);
    background: var(--if-surface);
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }

  /* Caso o CTA seja montado dentro da propria area rolavel, ele mesmo gruda
     no fim e ganha uma faixa da cor do fundo para nao encostar no conteudo. */
  .checkout form > .checkout__cta {
    position: sticky;
    bottom: calc(env(safe-area-inset-bottom, 0px));
    z-index: 2;
    margin-top: 12px;
  }

  .checkout form:has(.checkout__passo) > .checkout__cta {
    box-shadow: 0 0 0 8px var(--if-bg), var(--if-sombra);
  }

  .checkout__cta {
    height: 56px;
  }
}

/* -------------------------------------------------------------------------
   6. MOVIMENTO REDUZIDO
   Sem deslizes: a gaveta simplesmente aparece.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sacola-barra,
  .overlay-sacola,
  .sacola,
  .checkout,
  .sacola__btn,
  .sacola__cabecalho button,
  .stepper__btn,
  .campo__input,
  .opcao-entrega,
  .opcao-entrega::before,
  .opcao-frete,
  .opcao-frete__marca,
  .checkout__cta {
    transition: none;
  }
}

/* =========================================================================
   7. TELA DE PIX — depois que o pedido e criado
   Aparece dentro do .checkout, no lugar do formulario. O HTML e injetado
   por js/carrinho.js; aqui so ha aparencia.

   Tom: "falta pouco". Nada de vermelho de alarme no corpo da tela — o
   vermelho fica reservado ao botao de copiar (a unica acao) e ao aviso de
   expiracao. O resto e a mesma linguagem dos passos do checkout: cartao
   branco, texto --if-ink, apoio em --if-muted.
   ========================================================================= */
.pix-tela {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding: 16px;
  margin: 0;

  border: 1px solid var(--if-line);
  border-radius: var(--if-raio);
  background: var(--if-surface);
  text-align: center;
}

/* Se o JS montar a tela direto na area rolavel do checkout (que ja tem
   padding proprio), o cartao continua sozinho na coluna, sem margem extra. */
.checkout form > .pix-tela,
.checkout .sacola__lista > .pix-tela {
  margin: 0;
}

/* --- Titulo -------------------------------------------------------------- */
.pix-tela__titulo {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--if-ink);
}

/* --- Valor a pagar -------------------------------------------------------
   Maior elemento da tela. tabular-nums para o valor nao "dancar" caso o
   JS reescreva o texto (ex.: recalculo do servidor). */
.pix-tela__valor {
  margin: 0;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--if-ink);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* --- Codigo copia e cola -------------------------------------------------
   O payload do PIX e uma linha unica e longuissima sem espacos: sem
   break-all ele estoura a gaveta na horizontal. A altura maxima evita que
   o codigo empurre o botao de copiar para fora da dobra no celular. */
.pix-tela__codigo {
  display: block;
  max-height: 132px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px;
  margin: 0;

  border: 1px solid var(--if-line);
  border-radius: var(--if-raio);
  background: var(--if-bg);
  color: var(--if-ink);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.5;
  text-align: left;

  /* Quebra em qualquer caractere e permite selecionar tudo com um toque,
     para quem prefere copiar na mao em vez de usar o botao. */
  overflow-wrap: anywhere;
  word-break: break-all;
  white-space: pre-wrap;
  -webkit-user-select: all;
  user-select: all;
}

.pix-tela__codigo:focus-visible {
  outline: 2px solid var(--if-red);
  outline-offset: 2px;
}

/* --- Botao copiar --------------------------------------------------------
   Largura total: como o botao ocupa 100% da coluna, trocar "Copiar codigo
   PIX" por "Copiado!" nao muda a largura. A altura fixa e o conteudo
   centralizado garantem que a linha tambem nao pule. O JS deve manter o
   aria-live no proprio botao para o leitor de tela anunciar a troca. */
.pix-tela__copiar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 48px;
  padding: 0 16px;
  margin: 0;

  border: 0;
  border-radius: var(--if-raio);
  background: var(--if-red);
  color: var(--if-on-red);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--if-sombra);
  transition: background var(--if-transicao), box-shadow var(--if-transicao);
}

.pix-tela__copiar:hover {
  background: var(--if-red-dark);
}

.pix-tela__copiar:focus-visible {
  outline: 2px solid var(--if-red);
  outline-offset: 2px;
}

.pix-tela__copiar:active {
  box-shadow: none;
}

.pix-tela__copiar:disabled {
  background: var(--if-disabled);
  opacity: .75;
  cursor: not-allowed;
  box-shadow: none;
}

/* Estado "Copiado!": confirma sem parecer um segundo botao a clicar.
   Tres ganchos porque o JS pode marcar de qualquer um dos jeitos —
   classe modificadora, classe de estado ou atributo de dado. */
.pix-tela__copiar--copiado,
.pix-tela__copiar.is-copiado,
.pix-tela__copiar[data-copiado] {
  background: var(--if-green-ink);
  color: var(--if-on-red);
  box-shadow: none;
}

.pix-tela__copiar--copiado:hover,
.pix-tela__copiar.is-copiado:hover,
.pix-tela__copiar[data-copiado]:hover {
  background: var(--if-green-ink);
}

/* --- Prazo (contagem regressiva) ----------------------------------------
   Discreto: e informacao, nao pressao. tabular-nums para os digitos nao
   deslocarem o texto a cada segundo. */
.pix-tela__prazo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  align-self: center;
  margin: 0;
  padding: 4px 10px;

  border-radius: var(--if-raio-pill);
  background: var(--if-bg);
  color: var(--if-muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  transition: background var(--if-transicao), color var(--if-transicao);
}

/* Faltando menos de 5 minutos o JS marca o prazo. Cor de alerta legivel
   (--if-red-dark passa em AA sobre o rosa claro), sem piscar nada. */
.pix-tela__prazo--alerta,
.pix-tela__prazo.is-alerta,
.pix-tela__prazo[data-alerta] {
  background: var(--if-red-soft);
  color: var(--if-red-dark);
  font-weight: 600;
}

/* --- Aguardando confirmacao --------------------------------------------- */
.pix-tela__aguardando {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;

  font-size: 13px;
  line-height: 1.4;
  color: var(--if-muted);
  text-align: left;
}

.pix-tela__spinner {
  display: inline-block;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  box-sizing: border-box;

  border: 2px solid var(--if-line);
  border-top-color: var(--if-red);
  border-radius: var(--if-raio-pill);
  animation: pix-tela-girar .8s linear infinite;
}

@keyframes pix-tela-girar {
  to { transform: rotate(360deg); }
}

/* --- Aviso de expiracao --------------------------------------------------
   Mesma gramatica do .sacola__aviso, para a tela nao inventar um estilo
   novo de alerta so aqui. */
.pix-tela__aviso {
  margin: 0;
  padding: 10px 12px;

  border: 1px solid var(--if-red);
  border-radius: var(--if-raio);
  background: var(--if-red-soft);
  color: var(--if-red-dark);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
}

/* --- Acoes secundarias ---------------------------------------------------
   "Gerar novo codigo", "Voltar ao carrinho": empilhadas, sempre abaixo do
   botao principal, com peso visual menor. */
.pix-tela__acoes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding-top: 2px;
}

/* Botao solto dentro das acoes (sem a classe .sacola__btn) ainda precisa
   parecer um botao-fantasma da casa. */
.pix-tela__acoes > button,
.pix-tela__acoes > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 0 16px;

  border: 1px solid var(--if-line);
  border-radius: var(--if-raio);
  background: var(--if-surface);
  color: var(--if-ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--if-transicao), border-color var(--if-transicao);
}

.pix-tela__acoes > button:hover,
.pix-tela__acoes > a:hover {
  background: var(--if-bg);
  border-color: var(--if-muted);
}

.pix-tela__acoes > button:focus-visible,
.pix-tela__acoes > a:focus-visible {
  outline: 2px solid var(--if-red);
  outline-offset: 2px;
}

.pix-tela__acoes > button:disabled {
  color: var(--if-disabled);
  cursor: not-allowed;
}

/* Se o JS reaproveitar os botoes da gaveta, eles ja tem estilo proprio:
   aqui so removemos a margem que o empilhamento resolve. */
.pix-tela__acoes > .sacola__btn {
  margin: 0;
}

/* --- Telas maiores -------------------------------------------------------
   Na gaveta larga do desktop sobra espaco: o valor cresce um pouco e o
   codigo pode mostrar mais linhas antes de rolar. */
@media only screen and (min-width: 768px) {
  .pix-tela {
    padding: 20px;
  }

  .pix-tela__valor {
    font-size: 38px;
  }

  .pix-tela__codigo {
    max-height: 168px;
  }
}

/* --- Movimento reduzido --------------------------------------------------
   Sem giro e sem transicoes. O spinner vira um anel parado com o arco
   vermelho visivel — continua legivel como "em andamento" ao lado do
   texto "Aguardando confirmacao do pagamento". */
@media (prefers-reduced-motion: reduce) {
  .pix-tela__spinner {
    animation: none;
  }

  .pix-tela__copiar,
  .pix-tela__prazo,
  .pix-tela__acoes > button,
  .pix-tela__acoes > a {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   QR Code do PIX (desenhado no navegador, só em telas grandes)

   No celular o cliente cola o código no app do banco; no computador ele
   precisa escanear com o telefone, e aí o desenho é a única saída.
   ------------------------------------------------------------------------ */
.pix-tela__qr {
	display: flex;
	justify-content: center;
	padding: 14px;
	margin-bottom: 4px;

	/* Fundo branco fixo, não o token de superfície: leitor de QR precisa de
	   contraste alto, e no tema escuro um fundo escuro impede a leitura. */
	background: #fff;
	border: 1px solid var(--if-line);
	border-radius: var(--if-raio);
}

.pix-tela__qr svg {
	display: block;
	width: 200px;
	height: 200px;
	shape-rendering: crispEdges;   /* sem antialias: as bordas dos módulos ficam nítidas */
}