/* Bottega D'Oro — checkout (rodada 7, frente 2: itens 30 a 34)
 *
 * Folha própria, enfileirada depois do style.css (dependência de
 * bottega-child em bottega-checkout-ux.php): vence por ordem de cascata, sem
 * inflar especificidade e sem disputar linha a linha a folha principal com a
 * frente do favoritar. Mesmo arranjo já usado por estados.css.
 *
 * Régua da casa: campos, fotos e fios RETOS; botões, chips e alvos de toque
 * em pílula (999px); Cormorant nos títulos, Lora no resto; marfim/bordô/ouro.
 */

/* ==========================================================================
   1. A LISTA DE OPÇÕES DO SELETOR (select2)

   A caixa de Estado abria com a faixa azul #007cba da biblioteca — a única
   cor no site inteiro que não é da marca. E o campo de busca dentro da lista
   nascia cinza, com borda #aaa e a fonte do WordPress, fora da régua dos
   demais campos. A lista é desenhada em body > .select2-container, fora da
   página, por isso as regras aqui não são presas ao checkout: valem também
   na calculadora de frete da sacola, no painel de filtros e no endereço da
   conta, que usam o mesmo componente.
   ========================================================================== */
.select2-dropdown{
  background:var(--surface);border:1px solid var(--line);border-radius:0;
  box-shadow:0 14px 34px rgba(58,26,36,.12)}
.select2-container--open .select2-dropdown--below{border-top-color:var(--gold)}
.select2-container--open .select2-dropdown--above{border-bottom-color:var(--gold)}

.select2-container--default .select2-results__option{
  font-family:var(--body);font-size:.9375rem;line-height:1.4;color:var(--ink);
  padding:10px 16px;transition:none}
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"]{
  background:var(--page);color:var(--ink)}
/* O destaque (teclado e ponteiro) passa a ser o bordô da casa com texto
   marfim — mesma dupla dos botões primários, contraste medido em 11,3:1. */
.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected]{
  background:var(--bordo);color:var(--on-bordo)}
.select2-container--default .select2-results__option--disabled,
.select2-container--default .select2-results__option[aria-disabled="true"]{color:var(--ink-soft)}

/* Campo de busca da lista na régua dos demais campos: 42px, reto, marfim,
   fio da casa, Lora — e o foco em ouro, como todo campo do site. */
.select2-container--default .select2-search--dropdown{padding:10px 10px 4px}
.select2-container--default .select2-search--dropdown .select2-search__field{
  height:42px;box-sizing:border-box;padding:0 14px;border-radius:0;
  border:1px solid var(--line);background:var(--surface);
  font-family:var(--body);font-size:1rem;color:var(--ink);outline:none}
.select2-container--default .select2-search--dropdown .select2-search__field:focus{
  border-color:var(--gold);box-shadow:none}
.select2-container--default .select2-search--dropdown .select2-search__field::placeholder{color:var(--ink-soft)}

/* A barra de rolagem da lista também é superfície nossa. */
.select2-results__options{
  scrollbar-width:thin;scrollbar-color:var(--gold-soft) transparent}
.select2-results__options::-webkit-scrollbar{width:8px}
.select2-results__options::-webkit-scrollbar-thumb{background:var(--gold-soft);border-radius:999px}
.select2-results__options::-webkit-scrollbar-track{background:transparent}

/* ==========================================================================
   2. ERROS DO FORMULÁRIO

   Antes cada erro aparecia duas vezes: embaixo do campo e outra vez numa
   caixa no fim do formulário, em links sublinhados. Fica só o de baixo do
   campo; no topo, uma linha única com a contagem, que leva ao primeiro campo
   pendente. A caixa do rodapé é removida pelo checkout.js — o display:none
   só evita o piscar de um quadro entre a chegada do erro e a remoção.
   ========================================================================== */
body.bd-chk-js.woocommerce-checkout .woocommerce-NoticeGroup-checkout{display:none}
/* O título "Falta preencher alguns dados" (rodada 4) é desenhado por
   .woocommerce-error::before e vale para QUALQUER aviso de erro. Com a caixa
   do rodapé fora, quem ainda pode carregar essa classe no checkout é o aviso
   que volta do recálculo do resumo — ali o título mentiria, como já mentia na
   sacola antes da rodada 5. */
.woocommerce-checkout .woocommerce-NoticeGroup-updateOrderReview .woocommerce-error::before{
  content:none!important;display:none!important}

.bd-erros-topo{
  margin:0 0 26px;padding:14px 18px;background:#FFF8F5;
  border:1px solid rgba(122,36,54,.3);outline:none}
.bd-erros-topo:focus-visible{border-color:var(--bordo-accent)}
.bd-erros-linha{
  display:inline-flex;align-items:center;gap:9px;min-height:24px;
  font-family:var(--body);font-size:.9375rem;line-height:1.4;color:var(--bordo);
  text-decoration:none;border-bottom:1px solid var(--gold);
  transition:color .25s var(--ease),border-color .25s var(--ease)}
.bd-erros-linha:hover,.bd-erros-linha:focus-visible{color:var(--bordo-accent);border-color:var(--bordo-accent)}
.bd-erros-linha::before{
  content:"";width:17px;height:17px;flex:0 0 auto;background:var(--bordo-accent);
  -webkit-mask:url(icones/warning-circle-light.svg) center/contain no-repeat;
  mask:url(icones/warning-circle-light.svg) center/contain no-repeat}
.bd-erros-outros{
  list-style:none;margin:10px 0 0;padding:0;
  font-family:var(--body);font-size:.8125rem;line-height:1.5;color:var(--bordo)}
.bd-erros-outros li{margin:0 0 4px;padding:0}
.bd-erros-outros li:last-child{margin-bottom:0}

/* O aviso junto do campo: 13px em bordô, colado no campo que ele descreve. */
.woocommerce-checkout .checkout-inline-error-message{
  margin:6px 0 0;padding:0;font-family:var(--body);font-size:.8125rem;
  line-height:1.45;color:var(--bordo-accent)}

/* ==========================================================================
   3. CUPOM

   Saiu da primeira tela (era a primeira coisa acima do formulário) e foi
   para junto do resumo do pedido, recolhido. O campo ganha caixa como todos
   os outros — antes era o único campo do site desenhado como um traço.
   ========================================================================== */
.woocommerce-checkout .bd-cupom{
  margin:0 0 18px;padding:16px 0 0;border-top:1px solid var(--line)}
.woocommerce-checkout .bd-cupom-abre{
  display:inline-flex;align-items:center;gap:9px;
  min-height:44px;padding:0;border:0;background:none;cursor:pointer;
  font-family:var(--body);font-size:.8125rem;letter-spacing:.02em;color:var(--ink-soft);
  transition:color .25s var(--ease)}
.woocommerce-checkout .bd-cupom-abre:hover,
.woocommerce-checkout .bd-cupom-abre:focus-visible{color:var(--bordo)}
.woocommerce-checkout .bd-cupom-abre::after{
  content:"";width:12px;height:12px;flex:0 0 auto;background:currentColor;
  -webkit-mask:url(icones/caret-down-light.svg) center/contain no-repeat;
  mask:url(icones/caret-down-light.svg) center/contain no-repeat;
  transition:transform .25s var(--ease)}
.woocommerce-checkout .bd-cupom.is-aberto .bd-cupom-abre::after{transform:rotate(180deg)}
.woocommerce-checkout .bd-cupom-abre-txt{border-bottom:1px solid var(--line)}
.woocommerce-checkout .bd-cupom-abre:hover .bd-cupom-abre-txt{border-color:var(--gold)}

.woocommerce-checkout .bd-cupom-caixa{padding:2px 0 0}
.woocommerce-checkout .bd-cupom-caixa label{
  display:block;margin:0 0 6px;font-family:var(--body);font-size:.6875rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-text)}
.woocommerce-checkout .bd-cupom-linha{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.woocommerce-checkout .bd-cupom-campo{
  flex:1 1 150px;min-width:0;height:42px;box-sizing:border-box;margin:0;
  padding:0 14px;border:1px solid var(--line);border-radius:0;background:var(--surface);
  font-family:var(--body);font-size:1rem;color:var(--ink);text-transform:uppercase}
.woocommerce-checkout .bd-cupom-campo:focus{outline:none;border-color:var(--gold);box-shadow:none}
.woocommerce-checkout .bd-cupom-campo::placeholder{text-transform:none;color:var(--ink-soft)}
.woocommerce-checkout .bd-cupom-aplica{
  flex:0 0 auto;height:40px;padding:0 22px;border-radius:999px;cursor:pointer;
  border:1px solid var(--bordo-accent);background:transparent;color:var(--bordo);
  font-family:var(--body);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  white-space:nowrap;transition:background .25s var(--ease),color .25s var(--ease)}
.woocommerce-checkout .bd-cupom-aplica:hover{background:var(--bordo);color:var(--on-bordo)}
.woocommerce-checkout .bd-cupom.is-enviando .bd-cupom-aplica{opacity:.55;pointer-events:none}
.woocommerce-checkout .bd-cupom-msg{
  margin:8px 0 0;font-family:var(--body);font-size:.8125rem;line-height:1.45;color:var(--ink-soft)}
.woocommerce-checkout .bd-cupom-msg.is-erro{color:var(--bordo-accent)}
.woocommerce-checkout .bd-cupom-msg.is-ok{color:var(--ok)}
.woocommerce-checkout .bd-cupom-msg:empty{display:none}

/* ==========================================================================
   4. LINHA "ENVIO" DO RESUMO

   Sem CEP, o aviso caía na coluna estreita da direita e quebrava em cinco
   linhas de duas ou três palavras. Quando é aviso — e não valor — a linha
   inteira passa a ser uma célula só, alinhada à esquerda, com o campo de CEP
   logo abaixo resolvendo ali. (Não dá para resolver isso só em CSS: um <tr>
   com display:block dentro de uma <table> é reembrulhado pelo navegador numa
   célula anônima e volta a obedecer a largura da primeira coluna — medido em
   203px de 296px no celular. Quem junta as duas colunas é o colspan que o
   checkout.js aplica, e o rótulo "Envio" vira a primeira linha da célula.)
   ========================================================================== */
.woocommerce-checkout table.shop_table tr.bd-envio-largo td{
  text-align:left;width:auto}
.bd-envio-rotulo{
  display:block;margin:0 0 6px;font-family:var(--body);font-weight:600;color:var(--ink)}
.bd-envio-aviso{display:block;text-align:left}
.bd-envio-aviso-txt{
  display:block;max-width:44ch;font-family:var(--body);font-size:.875rem;
  line-height:1.5;color:var(--ink-soft);text-wrap:pretty}
.bd-cep-linha{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:10px 0 0}
.woocommerce-checkout #bd-cep-rapido{
  flex:1 1 120px;min-width:0;max-width:180px;height:42px;box-sizing:border-box;margin:0;
  padding:0 14px;border:1px solid var(--line);border-radius:0;background:var(--surface);
  font-family:var(--body);font-size:1rem;color:var(--ink)}
.woocommerce-checkout #bd-cep-rapido:focus{outline:none;border-color:var(--gold)}
.woocommerce-checkout #bd-cep-rapido.is-erro{border-color:var(--bordo-accent);box-shadow:inset 0 0 0 1px var(--bordo-accent)}
.woocommerce-checkout .bd-cep-btn{
  flex:0 0 auto;height:40px;padding:0 22px;border-radius:999px;cursor:pointer;
  border:1px solid var(--bordo-accent);background:transparent;color:var(--bordo);
  font-family:var(--body);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  white-space:nowrap;transition:background .25s var(--ease),color .25s var(--ease)}
.woocommerce-checkout .bd-cep-btn:hover{background:var(--bordo);color:var(--on-bordo)}

/* Com mais de uma opção de entrega o aperto era o mesmo de outro jeito: duas
   linhas de texto espremidas na coluna estreita, com a bolinha de escolha
   solta na ponta direita, longe do nome do serviço. A lista passa a se ler da
   esquerda para a direita, com o alvo colado no texto que ele escolhe. */
.woocommerce .woocommerce-shipping-totals ul#shipping_method li{
  display:flex;align-items:center;gap:9px;min-height:32px}
.woocommerce .woocommerce-shipping-totals ul#shipping_method li label{
  white-space:normal;font-size:.9375rem;line-height:1.4}
.woocommerce .woocommerce-shipping-totals ul#shipping_method li input[type="radio"]{
  flex:0 0 auto;margin:0}

/* Linha do cupom aplicado: o valor do desconto encostava na última letra do
   código ("Cupom PRIMEIRACOMPRA-R$ 16,50"). */
.woocommerce-checkout table.shop_table tr.cart-discount th{padding-right:14px}

/* ==========================================================================
   5. FORMAS DE PAGAMENTO DO SANDBOX
   Os três gateways locais (Pix, cartão, boleto) dizem na própria caixa que
   são de exibição — quem abre o sandbox não pode confundir com a loja.
   ========================================================================== */
.bd-pg-sandbox{
  display:block;margin:8px 0 0;font-family:var(--body);font-size:.6875rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}

/* Coluna do resumo tem ~300px no celular: campo e botão continuam lado a
   lado (medido em 390px), e só quebram se o texto do botão crescer. */
@media (max-width:400px){
  .woocommerce-checkout .bd-cupom-aplica,
  .woocommerce-checkout .bd-cep-btn{padding:0 18px}
}

/* ==========================================================================
   6. ÁREA DE TOQUE
   Padrão da casa (style.css, bloco de 28/08): a caixa visual do botão
   secundário tem 40px e os 44px de alvo vêm de um pseudo-elemento
   transparente, não do desenho. Os três controles novos entram na mesma
   regra.
   ========================================================================== */
.woocommerce-checkout .bd-cupom-aplica,
.woocommerce-checkout .bd-cep-btn,
.bd-erros-linha{position:relative}
.woocommerce-checkout .bd-cupom-aplica::after,
.woocommerce-checkout .bd-cep-btn::after,
.bd-erros-linha::after{
  content:"";position:absolute;left:0;right:0;top:50%;height:max(100%,44px);
  transform:translateY(-50%);border-radius:inherit}