/*
 * Compartilhar a joia (Partials/jv/pdp-share.template, dentro da galeria), onde o Figma tinha o favorito (1448:8995,
 * oculto). Proposta do DEV a pedido do usuário (15/10/2026), sem quadro no Figma:
 * - botão com contorno fino e fundo de vidro (branco transparente com desfoque do que está atrás), para a transparência
 *   aparecer até sobre a foto de fundo branco. No celular, só o ícone, num círculo (a pílula cobria a foto); no computador,
 *   ícone e "Compartilhar" (usuário, 15/10/2026). O texto continua no código para o leitor de tela;
 * - cartão de vidro, como o botão (pedido do usuário, 15/10/2026; antes, cinza-claro #F8F8F8), com contorno lilás,
 *   sombra e uma setinha para o botão;
 * - cada opção com o ícone preto num círculo de borda verde, que ganha fundo lilás no hover (como os botões do site);
 *   ao copiar, o círculo fica verde-claro com o ✓. Ajustes do usuário (15/10/2026): sem título, sem fundo branco.
 */

.jv-pdp-share {
  position: absolute;
  inset-block-start: var(--jv-space-3);
  inset-inline-end: var(--jv-space-3);
  z-index: var(--jv-z-raised);
}

.jv-pdp-share__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--jv-space-2);
  inline-size: var(--jv-touch-min);
  min-block-size: var(--jv-touch-min);
  padding-inline: 0;
  border: var(--jv-border-thin) solid var(--jv-color-border);
  border-radius: var(--jv-radius-pill);
  background: var(--jv-color-glass);
  -webkit-backdrop-filter: blur(var(--jv-blur-glass));
  backdrop-filter: blur(var(--jv-blur-glass));
  color: var(--jv-color-text);
  font-size: var(--jv-size-label);
  font-weight: var(--jv-weight-bold);
  line-height: var(--jv-leading-none);
  list-style: none;
  cursor: pointer;
}

/* Sem o triângulo do navegador no <summary>. */
.jv-pdp-share__toggle::-webkit-details-marker {
  display: none;
}

/* No celular o texto fica só para o leitor de tela (as mesmas regras do .jv-visually-hidden). */
.jv-pdp-share__toggle-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* O ícone do sprite é de traço: a espessura vem daqui. */
.jv-pdp-share__toggle-icon {
  flex: none;
  stroke-width: 2;
}

.jv-pdp-share[open] .jv-pdp-share__toggle {
  border-color: var(--jv-color-brand);
  color: var(--jv-color-brand);
}

/* Cartão do menu, com a setinha (um quadrado girado) apontando para o botão. */
.jv-pdp-share__menu {
  position: absolute;
  inset-block-start: calc(100% + var(--jv-space-3));
  inset-inline-end: 0;
  display: flex;
  flex-direction: column;
  gap: var(--jv-space-1);
  inline-size: max-content;
  padding: var(--jv-space-3);
  border: var(--jv-border-thin) solid var(--jv-color-accent);
  border-radius: var(--jv-radius-md);
  background: var(--jv-color-glass);
  -webkit-backdrop-filter: blur(var(--jv-blur-glass));
  backdrop-filter: blur(var(--jv-blur-glass));
  box-shadow: var(--jv-shadow-popover);
  animation: jv-pdp-share-abrir var(--jv-duration-fast) var(--jv-ease);
}

.jv-pdp-share__menu::before {
  content: "";
  position: absolute;
  inset-block-start: calc(-1 * var(--jv-space-2) / 2 - var(--jv-border-thin));
  inset-inline-end: calc(var(--jv-touch-min) / 2 - var(--jv-space-2) / 2);
  inline-size: var(--jv-space-2);
  block-size: var(--jv-space-2);
  border-block-start: var(--jv-border-thin) solid var(--jv-color-accent);
  border-inline-start: var(--jv-border-thin) solid var(--jv-color-accent);
  background: var(--jv-color-glass);
  -webkit-backdrop-filter: blur(var(--jv-blur-glass));
  backdrop-filter: blur(var(--jv-blur-glass));
  /* Só a metade de fora do cartão: a de dentro somaria duas camadas de vidro. */
  clip-path: polygon(0 0, 100% 0, 0 100%);
  transform: rotate(45deg);
}

@keyframes jv-pdp-share-abrir {
  from {
    opacity: 0;
    transform: translateY(calc(-1 * var(--jv-space-1)));
  }
}

.jv-pdp-share__option {
  display: flex;
  align-items: center;
  gap: var(--jv-space-3);
  min-block-size: var(--jv-touch-min);
  padding: 0 var(--jv-space-2);
  border: 0;
  border-radius: var(--jv-radius-sm);
  background: none;
  color: var(--jv-color-text);
  font-size: var(--jv-size-label);
  font-weight: var(--jv-weight-bold);
  line-height: var(--jv-leading-none);
  text-align: start;
  text-decoration: none;
  white-space: nowrap;
}

/* O [hidden] do Tailwind perde para o display acima: sem JavaScript, o "Copiar link" fica escondido. */
.jv-pdp-share__option[hidden] {
  display: none;
}

/* O CSS antigo pinta todo link no hover; aqui o texto continua escuro. */
.jv-pdp-share__option:hover {
  color: var(--jv-color-text);
}

.jv-pdp-share__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  inline-size: var(--jv-size-icon-circle);
  block-size: var(--jv-size-icon-circle);
  border: var(--jv-border-thick) solid var(--jv-color-action);
  border-radius: var(--jv-radius-pill);
  color: var(--jv-color-text);
  transition: background-color var(--jv-duration-fast) var(--jv-ease), border-color var(--jv-duration-fast) var(--jv-ease);
}

/* Hover (e foco do teclado) na opção: o círculo ganha o fundo lilás, como os botões do site. */
.jv-pdp-share__option:focus-visible .jv-pdp-share__icon {
  border-color: var(--jv-color-accent);
  background: var(--jv-color-accent);
}

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

/* Link copiado: o círculo fica verde-claro e o ✓ entra no lugar do ícone do link. */
.jv-pdp-share__glyph--ok,
.jv-pdp-share__option[data-copiado] .jv-pdp-share__glyph {
  display: none;
}

.jv-pdp-share__option[data-copiado] .jv-pdp-share__glyph--ok {
  display: block;
}

.jv-pdp-share__option[data-copiado] .jv-pdp-share__icon {
  border-color: var(--jv-color-success);
  background: var(--jv-color-success-bg);
  color: var(--jv-color-success-text);
}

/* No computador cabe a pílula com o texto; a setinha do cartão aponta para a ponta direita dela. */
@media (min-width: 1024px) {
  .jv-pdp-share__toggle {
    inline-size: auto;
    padding-inline: var(--jv-space-4);
  }

  .jv-pdp-share__toggle-text {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
  }
}