/*
 * Cartão de aviso da coluna de compra, no lugar do preço e do Comprar. Dois usos, com o mesmo visual:
 * - joia indisponível (Partials/jv/pdp-notify.template): "Ops, Produto indisponível", formulário do Avise-me e produtos
 *   similares; ideia de um XD antigo do redesenho (prints do usuário, 15/10/2026);
 * - produto sob consulta (Partials/jv/pdp-consult.template): "Produto sob consulta" e o WhatsApp das personal shoppers
 *   (pedido do usuário, 15/10/2026).
 * Com os tokens do site:
 * - cartão no cinza dos campos, com a etiqueta roxa e o "i" de informação;
 * - destaque em roxo; o link e o botão de contorno levam o verde como sublinhado e borda, porque o verde não é cor de
 *   texto (contraste 1,8; guia, 7.2). Pelo mesmo motivo, os botões verdes têm texto escuro;
 * - campos lado a lado no computador, um embaixo do outro no celular; 16px para o iPhone não dar zoom;
 * - no celular, 12px de respiro no cartão e etiqueta com 16px, para "Ops, Produto indisponível" caber numa linha (360px);
 * - depois do cadastro do Avise-me: ✓ lilás e "Aviso cadastrado com sucesso" em roxo, e o botão de produtos similares.
 */

.jv-pdp-notice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--jv-space-4);
  padding: var(--jv-space-3);
  border-radius: var(--jv-radius-md);
  background: var(--jv-color-surface-alt);
}

/* Joia com variações: o cartão só aparece quando a variação escolhida está esgotada (o product.js põe .unavailable no body). */
.jv-pdp-notice[data-jv-avise-variacao] {
  display: none;
}

body.unavailable .jv-pdp-notice[data-jv-avise-variacao] {
  display: flex;
}

.jv-pdp-notice__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--jv-space-2);
  padding: var(--jv-space-1) var(--jv-space-4) var(--jv-space-1) var(--jv-space-1);
  border-radius: var(--jv-radius-lg);
  background: var(--jv-color-brand);
  color: var(--jv-color-on-brand);
  font-size: var(--jv-size-subheading);
  font-weight: var(--jv-weight-bold);
  line-height: var(--jv-leading-tight);
}

/* Texto e emoji juntos: numa tela estreita, a etiqueta quebra a linha sem separar o emoji. */
.jv-pdp-notice__badge-text {
  min-inline-size: 0;
}

/* O ícone do sprite é de traço: cor e espessura vêm daqui. */
.jv-pdp-notice__badge-icon {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.jv-pdp-notice__form,
.jv-pdp-notice__success {
  display: flex;
  flex-direction: column;
  gap: var(--jv-space-4);
  inline-size: 100%;
}

/* O [hidden] perde para o display acima: sem esta regra, formulário e sucesso apareceriam juntos. */
.jv-pdp-notice__form[hidden],
.jv-pdp-notice__success[hidden] {
  display: none;
}

.jv-pdp-notice__text {
  color: var(--jv-color-text);
  font-size: var(--jv-size-body);
  line-height: var(--jv-leading-normal);
}

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

.jv-pdp-notice__highlight {
  color: var(--jv-color-brand);
}

.jv-pdp-notice__link {
  color: var(--jv-color-text);
  font-weight: var(--jv-weight-bold);
  text-decoration: underline;
  text-decoration-color: var(--jv-color-action);
  text-decoration-thickness: var(--jv-border-thick);
  text-underline-offset: 0.2em;
}

/* O CSS antigo pinta todo link no hover; aqui o texto continua escuro e o sublinhado fica lilás. */
.jv-pdp-notice__link:hover {
  color: var(--jv-color-text);
  text-decoration-color: var(--jv-color-accent);
}

.jv-pdp-notice__fields {
  display: grid;
  gap: var(--jv-space-3);
}

.jv-pdp-notice__field {
  display: flex;
  flex-direction: column;
  gap: var(--jv-space-2);
  margin: 0;
  color: var(--jv-color-text);
  font-size: var(--jv-size-body);
  font-weight: var(--jv-weight-regular);
  line-height: var(--jv-leading-tight);
}

/* As duas classes porque o input[type="text"] do CSS antigo pesa mais que uma. */
.jv-pdp-notice__field .jv-pdp-notice__input {
  inline-size: 100%;
  min-block-size: var(--jv-touch-min);
  margin: 0;
  padding: 0 var(--jv-space-3);
  border: var(--jv-border-thin) solid var(--jv-color-border);
  border-radius: var(--jv-radius-sm);
  background: var(--jv-color-surface);
  color: var(--jv-color-text);
  font-size: var(--jv-size-body);
}

/* Aviso do formulário (e-mail já cadastrado, falha de envio): informação no azul do Figma, com o "i", e não o vermelho
   de erro (usuário, 15/10/2026). */
.jv-pdp-notice__message {
  color: var(--jv-color-info);
  font-size: var(--jv-size-label);
  font-weight: var(--jv-weight-bold);
  line-height: var(--jv-leading-tight);
}

.jv-pdp-notice__message-icon {
  margin-inline-end: var(--jv-space-1);
  vertical-align: -0.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.jv-pdp-notice__actions {
  display: flex;
  flex-direction: column;
  gap: var(--jv-space-3);
}

/* Botões do cartão: verde cheio (Avise-me) e de contorno (Produtos similares), no formato do Comprar; lilás no hover. */
.jv-pdp-notice__button {
  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-action);
  border-radius: var(--jv-radius-pill);
  background: var(--jv-color-action);
  color: var(--jv-color-on-action);
  text-align: center;
  text-decoration: none;
  transition: background-color var(--jv-duration-fast) var(--jv-ease), border-color var(--jv-duration-fast) var(--jv-ease);
}

.jv-pdp-notice__button-icon {
  flex: none;
  margin-inline-end: var(--jv-space-2);
}

.jv-pdp-notice__button--stroke {
  background: transparent;
}

/* Depois do cadastro, o botão fica do tamanho do Comprar no computador, como no XD. */
.jv-pdp-notice__button--fit {
  max-inline-size: var(--jv-size-button-max);
}

.jv-pdp-notice__button:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* O CSS antigo pinta todo link no hover; aqui vale o padrão dos botões do site. */
.jv-pdp-notice__button:hover {
  color: var(--jv-color-on-accent);
  text-decoration: none;
}

@media (hover: hover) {
  .jv-pdp-notice__button:hover {
    border-color: var(--jv-color-accent);
    background: var(--jv-color-accent);
  }
}

.jv-pdp-notice__success-title {
  display: flex;
  align-items: center;
  gap: var(--jv-space-3);
  color: var(--jv-color-brand);
  font-size: var(--jv-size-subheading);
  font-weight: var(--jv-weight-bold);
  line-height: var(--jv-leading-tight);
}

.jv-pdp-notice__success-icon {
  flex: none;
  color: var(--jv-color-accent);
}

@media (min-width: 1024px) {
  .jv-pdp-notice {
    padding: var(--jv-space-6);
  }

  .jv-pdp-notice__fields {
    grid-template-columns: 1fr 1fr;
  }
}