/*
 * "Deseja excluir o produto?" no carrinho (Widgets/checkout.onepage/components/basket.template; usuário, 21/10/2026).
 * Abre na lixeira, que toma o lugar do − quando a joia tem 1 unidade (o X saiu). Cores do Figma do celular nos dois: o
 * vermelho do Figma do computador saiu porque a exclusão é informação, não erro (usuário). No computador, o formato do
 * Figma do computador (usuário, 21/10/2026): horizontal, ícone grande à esquerda, título na fonte de título, Excluir e
 * Voltar lado a lado, sem logo e sem o X. Logo colorido
 * (Shared/Svg/logo.svg, o do topo do checkout; o logo-jv.svg é o negativo, cinza-claro), a carinha
 * triste (ExcluirCarrinho do sprite), título e ícone no azul de informação, Voltar com contorno verde e Excluir azul.
 * A janela é o <modal> do checkout (molde #tpl-modal e CSS da Linx); aqui só a roupa dela, pela classe jv-excluir. O
 * fundo claro com desfoque vale só enquanto ela está aberta (body.jv-excluir-aberto, posto pelo main.custom.bundle.js).
 */

.modal.jv-excluir {
  position: fixed;
  inset: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  inline-size: min(calc(100vw - 2rem), 22.5rem);
  max-block-size: calc(100vh - 2rem);
  overflow-y: auto;
  padding: var(--jv-space-6);
  border-radius: var(--jv-radius-md);
  background: var(--jv-color-bg);
  box-shadow: var(--jv-shadow-popover);
  font-family: var(--jv-font-sans);
  color: var(--jv-color-text);
  text-align: center;
}

.modal.jv-excluir .modal-wrapper {
  inline-size: 100%;
  align-items: center;
  gap: var(--jv-space-4);
}

.modal.jv-excluir header {
  justify-content: center;
  inline-size: 100%;
}

/* O × do molde vira o círculo com X do site (Shared/Svg/close-button.svg), no canto. */
.modal.jv-excluir .close {
  position: absolute;
  top: var(--jv-space-3);
  right: var(--jv-space-3);
  inline-size: 2.25rem;
  block-size: 2.25rem;
  background: url("/Custom/Content/Themes/Shared/Svg/close-button.svg") center / contain no-repeat;
  font-size: 0;
  line-height: 0;
  color: transparent;
}

.jv-excluir__logo {
  display: block;
  inline-size: 7rem;
  block-size: auto;
}

.modal.jv-excluir .body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--jv-space-4);
}

.jv-excluir__icone {
  inline-size: 4.5rem;
  block-size: 4.5rem;
  color: var(--jv-color-info);
}

.jv-excluir__titulo {
  display: block;
  font-size: var(--jv-text-2xl);
  font-weight: var(--jv-weight-bold);
  line-height: var(--jv-leading-heading);
  color: var(--jv-color-info);
  text-wrap: balance; /* "Deseja excluir / o produto?", como no Figma */
}

.jv-excluir__texto {
  margin: 0;
  font-size: var(--jv-size-body);
  line-height: var(--jv-leading-normal);
  color: var(--jv-color-text);
}

.modal.jv-excluir .actions {
  flex-direction: column;
  align-items: stretch;
  gap: var(--jv-space-3);
  inline-size: 100%;
  margin-block-start: var(--jv-space-2);
}

.jv-excluir__botao {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  min-block-size: var(--jv-touch-min);
  margin: 0;
  padding: var(--jv-space-3) var(--jv-space-6);
  border: var(--jv-border-thick) solid var(--jv-color-info);
  border-radius: var(--jv-radius-pill);
  background: var(--jv-color-info);
  color: var(--jv-color-text-inverse);
  font-family: var(--jv-font-sans);
  cursor: pointer;
}

.jv-excluir__botao--voltar {
  border-color: var(--jv-color-action);
  background: var(--jv-color-surface);
  color: var(--jv-color-text);
}

.jv-excluir__botao-icone {
  flex: none;
  inline-size: 1rem;
  block-size: 1rem;
  margin-inline-end: var(--jv-space-2);
}

.jv-excluir__botao:focus-visible {
  outline: 2px solid var(--jv-color-focus);
  outline-offset: 2px;
}

body.jv-excluir-aberto #backdrop {
  background: color-mix(in srgb, var(--jv-palette-white) 55%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Computador: horizontal, como no Figma do computador. A .body vira "contents" para o ícone, o título e o texto entrarem
   na grade da janela: o ícone na 1ª coluna, nas 3 linhas; título, texto e botões na 2ª. */
@media (min-width: 1024px) {
  .modal.jv-excluir {
    inline-size: min(calc(100vw - 4rem), 42.5rem);
    max-inline-size: none; /* a Linx limita a janela a 600px, e o título quebrava em 2 linhas */
    padding: var(--jv-space-10);
    text-align: start;
  }

  .modal.jv-excluir .modal-wrapper {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--jv-space-6);
    row-gap: var(--jv-space-3);
    align-items: center;
  }

  /* Sem logo e sem o X: fecham o Voltar, o Esc e o clique fora. */
  .modal.jv-excluir header {
    display: none;
  }

  .modal.jv-excluir .body {
    display: contents;
  }

  .jv-excluir__icone {
    grid-column: 1;
    grid-row: 1 / span 3;
    inline-size: 8.75rem;
    block-size: 8.75rem;
  }

  .jv-excluir__titulo,
  .jv-excluir__texto,
  .modal.jv-excluir .actions {
    grid-column: 2;
  }

  .jv-excluir__titulo {
    font-family: var(--jv-font-display);
    font-size: var(--jv-size-heading);
    text-wrap: wrap;
  }

  .modal.jv-excluir .actions {
    flex-direction: row;
    margin-block-start: var(--jv-space-2);
  }

  .modal.jv-excluir .actions .jv-excluir__botao {
    flex: 1 1 0;
  }

  /* Excluir à esquerda e Voltar à direita, como no Figma do computador (o foco continua começando no Voltar). */
  .jv-excluir__botao--voltar {
    order: 1;
  }
}