/*
 * Resumo do pedido no checkout (Widgets/checkout.onepage/components/order-summary.template).
 * "Você economiza R$ X nesta compra": fora da conta, logo abaixo do botão de compra (pedido do usuário, 14/10/2026).
 * Sem fundo, só com uma linha embaixo, no mesmo cinza da linha que separa o Total.
 */

/* Respiro entre o total e o botão de compra (pedido do usuário, 14/10/2026): soma 16px aos 16px da caixa. */
.jv-checkout-cta {
  margin-block-start: var(--jv-space-4);
}

/* Botão de compra com 48px de altura, no carrinho e na finalização (usuário, 14/10/2026). */
.jv-checkout-cta.btn,
.jv-checkout-cta .btn {
  min-height: var(--jv-space-12);
}

/* Colado no botão: só os 16px da caixa em cima; o respiro fica embaixo, antes da linha. */
.jv-savings {
  padding-block-end: var(--jv-space-2);
  border-block-end: var(--jv-border-thin) solid var(--jv-color-divider);
  color: var(--jv-color-text);
  font-size: var(--jv-text-sm);
  text-align: center;
}

.jv-savings strong {
  font-weight: var(--jv-weight-bold);
}

/* Cupom aplicado embaixo do Subtotal: código em negrito, valor e X para tirar (Figma CHECKOUT-RESUME; usuário, 14/10/2026). */
.jv-coupon strong {
  font-weight: var(--jv-weight-bold);
}

.jv-coupon__value {
  display: inline-flex;
  align-items: center;
  gap: var(--jv-space-2);
}

/* Só o X, na cor do texto da linha, sem cara de botão. */
.jv-coupon__remove {
  position: relative;
  display: inline-flex;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

/* 16px, o tamanho do ícone icon-fechar_excluir no Figma. */
.jv-coupon__remove svg {
  width: var(--jv-space-4);
  height: var(--jv-space-4);
}

/* Área de toque de 24px em volta do X (WCAG 2.2), sem mudar o desenho. */
.jv-coupon__remove::after {
  content: "";
  position: absolute;
  inset: calc(var(--jv-space-1) * -1);
}

.jv-coupon__remove:focus-visible {
  outline: var(--jv-focus-width) solid var(--jv-color-focus);
  outline-offset: var(--jv-focus-offset);
}

/*
 * Campo com o botão Aplicar dentro da "pílula": cupom e CEP do resumo (usuário, 14/10/2026).
 * O texto de exemplo continua dentro da caixa; sai o rótulo pequeno que aparecia nela ao digitar e espremia o texto.
 * Uma borda só, a da pílula: a do campo somava outra por dentro e, no foco, um contorno escuro de 2px.
 * No foco, a pílula fica com o contorno roxo dos outros campos do checkout (opc.css, 11/10/2026).
 */
body #onepage .rounded-full > .input-group > label {
  display: none;
}

/* !important: a borda do campo vem do !border-gray do template. */
body #onepage .rounded-full > .input-group > input,
body #onepage .rounded-full > .input-group > input:focus {
  padding-block: 0;
  border-color: transparent !important;
  box-shadow: none;
}

body #onepage .rounded-full:focus-within {
  border-color: var(--jv-color-focus);
  box-shadow: 0 0 0 var(--jv-border-thin) var(--jv-color-focus);
}

/*
 * Barra do resumo presa embaixo da tela no celular (proposta 2 do CRM, no formato do usuário, 14/10/2026):
 * "Ver detalhes" em cima, Total e valor na mesma linha, "Você economiza" e o botão na largura toda embaixo (era 271px).
 * Aberta (.opened), o total, a economia e o botão ficam iguais aos da barra fechada (usuário, 14/10/2026).
 * Muda só a arrumação e o tamanho; cor, fonte e textos ficam os de hoje. No computador, nada muda.
 * "body #onepage #summary" na frente para passar o CSS da Linx (onepagecheckout.css) e o opc.css.
 * Com o teclado aberto a barra já sai de baixo da tela: regra de 11/10/2026 no opc.css.
 */
@media (max-width: 1023px) {
  /* A aba sai metade para fora da barra: no fim da página, esse espaço fica antes da barra, para a aba não cobrir a última forma de pagamento (usuário, 14/10/2026). */
  body #onepage #summary {
    margin-block-start: calc(var(--jv-touch-min) / 2);
  }

  /* A folga de baixo soma a área da barra do iPhone, quando o aparelho informa (env). Em cima, a metade da aba "Ver detalhes" que fica dentro da barra. */
  body #onepage #summary #order-summary:not(.opened) {
    padding-block-start: var(--jv-space-8);
    padding-block-end: calc(var(--jv-space-3) + env(safe-area-inset-bottom, 0px));
  }

  /* A aba fica presa na barra (#summary), não no resumo: aberto, o resumo rola e cortaria a parte de fora. */
  body #onepage #summary #order-summary {
    position: static;
  }

  /*
   * Aberto, no máximo 80% da altura da tela, e com muitas joias a rolagem fica só dentro do resumo (usuário, 14/10/2026).
   * A aba "Ocultar detalhes" fica sempre à vista em cima; o total, a economia e o botão, embaixo. Rola só o que fica entre eles.
   * svh: a tela com a barra do navegador aparecendo; navegador antigo fica com o vh.
   */
  body #onepage #summary #order-summary.opened {
    max-height: 80vh;
    max-height: 80svh;
    padding-block-end: 0;
    overscroll-behavior: contain;
  }

  /* Total, economia e botão presos embaixo do resumo aberto, com a linha em cima do Total igual à do computador. A folga de baixo vem para cá: o fundo cobre o que rola por trás. */
  body #onepage #summary #order-summary.opened .total {
    position: sticky;
    bottom: 0;
    z-index: 1;
    margin-block-start: var(--jv-space-2);
    padding-block: var(--jv-space-4) calc(var(--jv-space-3) + env(safe-area-inset-bottom, 0px));
    border-block-start: var(--jv-border-thin) solid var(--jv-color-divider);
    background-color: inherit;
  }

  /* "Ver detalhes" como aba: metade para fora da barra, na cor da barra (usuário, 14/10/2026). Fica por cima das fotos que rolam no resumo aberto. */
  body #onepage #summary #order-summary .show-all {
    z-index: 1;
    top: calc(var(--jv-touch-min) / -2);
    min-height: var(--jv-touch-min);
    padding-inline: var(--jv-space-6);
    border-radius: var(--jv-radius-pill);
    background-color: inherit;
    color: var(--jv-color-text);
    font-weight: var(--jv-weight-bold);
  }

  /* Lilás com o resumo aberto e enquanto é tocada. */
  body #onepage #summary #order-summary.opened .show-all,
  body #onepage #summary #order-summary .show-all:active {
    background-color: var(--jv-color-accent);
    color: var(--jv-color-on-accent);
  }

  body #onepage #summary #order-summary .show-all:focus-visible {
    outline: var(--jv-focus-width) solid var(--jv-color-focus);
    outline-offset: var(--jv-focus-offset);
  }

  /* Uma coluna, fechada e aberta (formato do usuário, 14/10/2026, 2ª versão): Total e valor na mesma linha, "Você economiza" embaixo e o botão na largura toda por último. */
  body #onepage #summary #order-summary .total {
    flex-direction: column;
    gap: var(--jv-space-2);
    margin-block-end: 0;
  }

  /* Na barra fechada, tocar no total abre os detalhes (order-summary.template). */
  body #onepage #summary #order-summary:not(.opened) .total {
    cursor: pointer;
  }

  /* O valor nunca quebra entre o "R$" e o número. */
  body #onepage #summary #order-summary .total > ul > li > div:first-child > div > strong {
    white-space: nowrap;
  }

  /* No código o botão vem antes da economia; no celular a economia sobe. */
  body #onepage #summary #order-summary .jv-checkout-cta {
    order: 2;
    margin-block-start: 0;
  }

  /* No celular ficam de fora o ícone do carrinho no botão e a linha "ou R$ X no PIX/boleto ou até 12x…"; no computador continuam. */
  body #onepage #summary #order-summary .jv-checkout-cta svg,
  body #onepage #summary #order-summary .jv-total-options {
    display: none;
  }

  /* Sem a linha de baixo no celular. */
  body #onepage #summary #order-summary .jv-savings {
    order: 1;
    padding-block-end: 0;
    border-block-end: 0;
  }
}

/* Frete do carrinho (Widgets/checkout.onepage/components/delivery.template), como no Figma (usuário, 19/10/2026): título
   em roxo, CEP e endereço embaixo do campo, rádio maior nas opções e "Grátis" em roxo. As outras linhas do resumo e o
   tamanho dos textos continuam como estavam. */
#onepage .jv-frete__titulo {
  color: var(--jv-color-brand);
  font-size: var(--jv-text-lg);
  font-weight: var(--jv-weight-bold);
}

#onepage .jv-frete__local {
  display: flex;
  flex-direction: column;
  gap: var(--jv-space-1);
  color: var(--jv-color-text);
  font-size: var(--jv-text-sm);
}

#onepage .jv-frete__local strong {
  font-weight: var(--jv-weight-bold);
}

#onepage .jv-frete .options > li {
  cursor: pointer;
}

/* Rádio de 24px, com a bolinha roxa de 16 (no resto do checkout, 12 e 7, do opc.css). */
#onepage .jv-frete .input-radio {
  inline-size: auto;
  block-size: auto;
}

#onepage .jv-frete input[type=radio] {
  display: block;
  flex: none;
  inline-size: var(--jv-size-radio);
  block-size: var(--jv-size-radio);
}

#onepage .jv-frete input[type=radio]:checked::after {
  inline-size: var(--jv-size-radio-dot);
  block-size: var(--jv-size-radio-dot);
}

#onepage .jv-frete__valor--gratis {
  color: var(--jv-color-brand);
  font-weight: var(--jv-weight-bold);
}