/*
 * Avaliações do Discord: o cartão, a foto ampliada e a faixa que passa sozinha.
 *
 * O cartão saiu de homepage.css quando a página de produto passou a mostrar as
 * mesmas avaliações. Em dois arquivos, cada ajuste de cor ou de espaçamento
 * teria de ser feito duas vezes e uma das cópias acabaria esquecida.
 *
 * Escopo: .blz-reviews é a classe do contêiner que embrulha os cartões — a
 * grade na home, a faixa no produto. As duas primeiras seções daqui (cartão e
 * foto ampliada) são compartilhadas; a última, a faixa, é só da página de
 * produto — mas viaja junto porque é uma folha só para as duas rotas.
 */

/* === CARTÃO === */
.blz-reviews .testimonial-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 28px;
    transition: var(--blz-transition);
    /* A grade da home já iguala a altura dos cartões da mesma linha, mas em
       fluxo normal essa altura extra virava espaço morto no fim e o bloco do
       autor parava em posições diferentes conforme o tamanho do texto. Em
       coluna flex, o autor pode ser ancorado na base. */
    display: flex;
    flex-direction: column;
}
.blz-reviews .testimonial-card:hover {
    border-color: var(--blz-border-cyan);
    transform: translateY(-5px);
}
.blz-reviews .testimonial-stars {
    color: var(--blz-warning);                                                   /* Amarelo */
    font-size: 16px;
    margin-bottom: 16px;
    letter-spacing: 2px;
}
.blz-reviews .testimonial-stars-empty {                                          /* Estrelas "vazias" (review < 5) — cinza apagado */
    color: rgba(255, 255, 255, 0.15);
}
.blz-reviews .testimonial-text {
    color: var(--blz-text);
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 20px;
    font-style: italic;
}
.blz-reviews .testimonial-media {                                                /* Foto que o cliente anexou no Discord */
    /* A proporção é a BASE, não o teto: ela é o que impede um print vertical de
       esticar a linha inteira. O crescimento até 230px absorve parte da sobra
       do cartão de texto curto sem deixar as fotos da mesma linha com alturas
       muito diferentes nem cortar metade do print. */
    flex: 1 1 auto;
    aspect-ratio: 16 / 9;
    min-height: 150px;
    max-height: 230px;
    margin: 0 0 20px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}
.blz-reviews .testimonial-media-zoom {                                           /* Âncora que embrulha a foto */
    display: block;
    width: 100%; height: 100%;
    cursor: zoom-in;
    position: relative;
}
.blz-reviews .testimonial-media img {
    display: block;
    width: 100%; height: 100%;
    max-width: 100%;                                                             /* Sem isto, uma foto de 1920px estoura o cartão */
    object-fit: cover;
}
.blz-reviews .testimonial-media-hint {                                           /* Lupa: sinaliza que dá para ampliar */
    position: absolute;
    right: 10px; bottom: 10px;
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border-radius: 8px;
    background: rgba(2, 6, 23, 0.72);
    color: var(--blz-text-white);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.blz-reviews .testimonial-media-zoom:hover .testimonial-media-hint,
.blz-reviews .testimonial-media-zoom:focus-visible .testimonial-media-hint {
    opacity: 1;
}
@media (hover: none) {                                                           /* No toque não existe hover: a lupa fica sempre visível */
    .blz-reviews .testimonial-media-hint { opacity: 1; }
}
.blz-reviews .testimonial-media-zoom:focus-visible {
    outline: 2px solid var(--blz-cyan);
    outline-offset: 2px;
}
.blz-reviews .testimonial-author {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: auto;                                                            /* Absorve a sobra: autor sempre rente à base */
    min-height: 48px;                                                            /* Nunca menor que o avatar */
}
.blz-reviews .author-info {
    min-width: 0;                                                                /* Nome longo não estoura o filho flex */
}
.blz-reviews .author-avatar {                                                    /* Círculo: foto do Discord (img) ou inicial do nome (fallback) */
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--blz-gradient-cyan-purple);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    font-weight: 700;
    color: var(--blz-text-white);
    overflow: hidden;                                                            /* Recorta a <img> no círculo */
    flex-shrink: 0;                                                              /* Não deforma se o nome for longo */
}
.blz-reviews .author-avatar img {                                                /* Foto real do Discord */
    background: var(--blz-bg-darker);                                            /* Avatar com transparência não deixa vazar o gradiente */
    width: 100%; height: 100%;
    object-fit: cover;                                                           /* Preenche o círculo sem distorcer */
    border-radius: 50%;
    display: block;
}
.blz-reviews .author-info h4 {
    color: var(--blz-text-white);
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 4px 0;
    /*
     * Uma linha só, sempre. Com quebra permitida, um nome comprido empurrava o
     * selo para a linha de baixo, o bloco do autor ficava mais alto que o avatar
     * e a foto saía do lugar — o cartão do lado ficava desalinhado com este. Sem
     * quebra, é o nome que cede: encurta com reticências.
     */
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.blz-reviews .author-info h4 > span:first-child {                                /* O nome */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
/* Filho direto, e não qualquer span: o nome do autor e o selo vivem DENTRO do
   h4, e um seletor solto vencia os dois por especificidade — o nome saía em
   13px apagado em vez de 15px branco, e o selo perdia o ciano. */
.blz-reviews .author-info > span {
    color: var(--blz-text-dim);
    font-size: 13px;
}
.blz-reviews .verified-badge {                                                   /* "Avaliação do Discord" ao lado do nome */
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(34, 211, 238, 0.15);
    color: var(--blz-cyan);
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    margin-left: 0;                                                              /* O gap do h4 já faz o espaçamento */
    flex: 0 0 auto;
}

/* === FOTO AMPLIADA === */
/* Sem escopo de propósito: o <dialog> é modal, fica fora do contêiner dos
   cartões e existe um por página. */
.blz-review-lightbox {
    max-width: min(94vw, 1400px);
    max-height: 92vh;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    background: #0b1220;
    overflow: hidden;
}
.blz-review-lightbox::backdrop {
    background: rgba(2, 6, 23, 0.82);
}
.blz-review-lightbox img {
    display: block;
    max-width: min(94vw, 1400px);
    max-height: 92vh;
    width: auto; height: auto;
    object-fit: contain;                                                         /* Ampliar é para VER: nada de cortar */
}
.blz-review-lightbox-close {
    position: absolute;
    top: 8px; right: 10px;
    width: 36px; height: 36px;
    border: 0;
    border-radius: 8px;
    background: rgba(2, 6, 23, 0.72);
    color: var(--blz-text-white);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

/* === FAIXAS QUE PASSAM (página de produto) === */
/*
 * Duas faixas, cada uma com metade das vinte e quatro avaliações mais recentes,
 * correndo para lados opostos. É o contraste de direção que deixa claro, num
 * relance, que são avaliações diferentes em cima e embaixo — e não a mesma fila
 * repetida.
 *
 * Elas atravessam a página de ponta a ponta de propósito: cortadas na largura do
 * conteúdo, leriam como caixas com cartões dentro, e não como filas que
 * continuam para fora da tela.
 *
 * São marquises, não contêineres roláveis: não existe barra de rolagem porque
 * não há rolagem nenhuma. Quem quiser controlar usa as setas das pontas.
 *
 * Três camadas, e cada uma tem um motivo:
 *   .sp-reviews-lane      invólucro — segura as setas e responde ao ponteiro
 *   .sp-reviews-viewport  a janela que apara a fila e desvanece as bordas
 *   .sp-reviews-track     a fila em si, que é o que anda
 */
.sp-reviews {
    padding: 0 0 72px;
    /*
     * clip, não hidden: `overflow: hidden` esconde a barra mas continua sendo um
     * contêiner rolável — um Ctrl+F que casasse com o texto repetido de uma
     * cópia, ou o foco indo para um link fora da janela, deslocaria a fila para
     * sempre. `clip` recorta sem criar rolagem. O `hidden` fica antes como
     * reserva para navegador que não conhece `clip`.
     */
    overflow: hidden;
    overflow: clip;
}
.sp-reviews-header {
    /* Margem lateral própria: não há mais um contêiner de conteúdo em volta —
       a faixa roda na home e na página de produto, e só uma delas tem um. */
    text-align: center;
    margin: 0 auto 26px;
    max-width: 640px;
    padding-inline: 24px;
}
.sp-reviews-header h2 {
    font-family: var(--blz-font-heading);
    font-size: 26px;
    font-weight: 700;
    color: var(--blz-text-white);
    margin: 0 0 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.sp-reviews-header p {
    margin: 0;
    color: var(--blz-text-dim);
    font-size: 15px;
    line-height: 1.6;
}

/* === INVÓLUCRO DA FAIXA === */
.sp-reviews-lane {
    position: relative;                                                          /* Âncora das setas */
}
.sp-reviews-lane + .sp-reviews-lane {
    margin-top: 4px;                                                             /* O padding das janelas já faz quase todo o vão */
}

/* === SETAS === */
/*
 * Elas ficam AQUI, no invólucro, e não dentro da janela: a janela desvanece as
 * próprias bordas, e é exatamente nas bordas que as setas moram — lá dentro
 * nasceriam apagadas. Meio transparentes em repouso para não competir com o
 * cartão; inteiras quando o ponteiro chega na faixa.
 */
.sp-reviews-nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    background: rgba(2, 6, 23, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: var(--blz-text-white);
    cursor: pointer;
    opacity: 0.5;
    transition: var(--blz-transition);
}
.sp-reviews-lane:hover .sp-reviews-nav {
    opacity: 1;
}
.sp-reviews-nav:hover {
    border-color: var(--blz-border-cyan);
    background: rgba(2, 6, 23, 0.8);
    color: var(--blz-cyan);
}
.sp-reviews-nav:active {
    transform: translateY(-50%) scale(0.92);
}
.sp-reviews-nav:focus-visible {
    outline: 2px solid var(--blz-cyan);
    outline-offset: 2px;
    opacity: 1;
}
.sp-reviews-nav[hidden] {
    /* Obrigatório: sem isto o display acima derrota o [hidden] do navegador, e
       uma seta que ainda não faz nada apareceria. */
    display: none;
}
.sp-reviews-nav--prev { left: 16px; }
.sp-reviews-nav--next { right: 16px; }
@media (hover: none) {                                                           /* No toque não existe hover: as setas ficam sempre visíveis */
    .sp-reviews-nav { opacity: 0.85; }
}

/* === JANELA E TRILHA === */
.sp-reviews-viewport {
    position: relative;
    /* A folga vertical existe para o cartão poder subir os 5px do hover sem ter
       o topo aparado — e é justamente no hover que a pessoa fica, porque é ele
       que para a faixa. */
    padding: 8px 0;
    overflow: hidden;
    overflow: clip;
    /* Desvanecer as duas bordas: o corte reto entregava que o cartão está sendo
       aparado por uma caixa, em vez de parecer uma fila entrando e saindo. */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.sp-reviews-track {
    --blz-reviews-gap: 20px;
    display: flex;
    gap: var(--blz-reviews-gap);
    /* A trilha tem de medir o CONTEÚDO, não o contêiner: é sobre a largura dela
       que a porcentagem do translate é calculada. Com a largura do contêiner, a
       volta pararia no lugar errado. */
    width: max-content;
    animation: blz-reviews-roll var(--blz-reviews-duration, 40s) linear infinite;
    /* Sem will-change de propósito: a trilha passa de dez mil pixels de largura
       e forçar uma camada permanente desse tamanho custa memória à toa. O
       navegador promove sozinho enquanto a animação roda. */
}
/* A faixa de baixo corre ao contrário. Vale a volta inteira: `reverse` percorre
   o mesmo keyframe de trás para frente, e o ponto de emenda continua sendo o
   começo exato de uma cópia. */
.sp-reviews-lane--reverse .sp-reviews-track {
    animation-direction: reverse;
}

/*
 * === CARTÃO DENTRO DA FAIXA ===
 *
 * Mais compacto que o da grade da home, de propósito: são DUAS filas empilhadas,
 * e no tamanho da home elas sozinhas ocupavam a tela inteira, empurrando o
 * cabeçalho e o resto da página para fora. Aqui o cartão perde altura em todos
 * os lugares em que dava para perder — recheio, foto, linhas de texto, avatar —
 * sem mexer no cartão da home, que continua sendo o mesmo arquivo.
 *
 * Todas estas regras têm a mesma especificidade das de cima e vencem por ordem
 * de fonte, porque este bloco vem depois. Mover o bloco para antes do cartão
 * desfaz tudo isto em silêncio.
 */
.sp-reviews-track > .testimonial-card {
    /* Largura fixa: é ela que a conta das cópias assume no servidor, e o harness
       lê estes 340px daqui para conferir se as duas contas batem. Em tela
       estreita o cartão encolhe junto, e aí sobra cópia — nunca falta. */
    flex: 0 0 min(340px, 82vw);
    padding: 20px;
}
.sp-reviews-track .testimonial-stars {
    font-size: 14px;
    margin-bottom: 10px;
}
.sp-reviews-track .testimonial-text {
    /* Uma avaliação muito longa esticaria a faixa inteira: todos os cartões da
       fila ficam da altura do mais alto. O texto inteiro continua na home. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 14px;
}
.sp-reviews-track .testimonial-media {
    /*
     * Altura fixa, e não proporção elástica: na faixa os prints têm formatos
     * muito diferentes, e deixar cada moldura crescer conforme a sobra do cartão
     * fazia as fotos saírem de tamanhos diferentes lado a lado. Fixa, a fila
     * ganha uma linha só de moldura e os cartões alinham. O clique continua
     * abrindo a foto inteira, sem corte.
     */
    flex: 0 0 auto;
    aspect-ratio: auto;
    height: 124px;
    min-height: 0;
    max-height: none;
    margin-bottom: 14px;
}
.sp-reviews-track .testimonial-author {
    gap: 10px;
    min-height: 38px;
}
.sp-reviews-track .author-avatar {
    width: 38px;
    height: 38px;
    font-size: 16px;
}
.sp-reviews-track .author-info h4 {
    font-size: 14px;
    margin-bottom: 2px;
}
.sp-reviews-track .author-info > span {
    font-size: 12px;
}
.sp-reviews-track .verified-badge {
    font-size: 10px;
    padding: 2px 7px;
}

/*
 * A parada é a largura de UMA cópia da lista, mais o vão que a separa da
 * seguinte — é exatamente onde a próxima cópia começa, e é isso que faz a volta
 * ser contínua em vez de dar um salto quando a lista termina.
 *
 * A trilha inteira mede N cópias mais N-1 vãos, então dividir "100% + um vão"
 * por N dá justamente uma cópia mais um vão, seja qual for o N que o template
 * escolheu (--blz-reviews-copies).
 */
@keyframes blz-reviews-roll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(calc((-100% - var(--blz-reviews-gap)) / var(--blz-reviews-copies, 2)), 0, 0); }
}

/* === QUANDO A FAIXA PARA === */
/*
 * O gatilho é o invólucro, e não a janela, porque as setas ficam fora da janela:
 * com o ponteiro numa seta a fila precisa continuar parada, senão o cartão foge
 * entre um clique e o outro. Parar no ponteiro é também o que torna a foto
 * clicável. O foco do teclado para pelo mesmo motivo; fora da tela a animação
 * não precisa gastar quadro; e com a foto ampliada aberta o foco saiu da faixa e
 * ela andaria atrás do diálogo, deixando o cartão em outro lugar ao fechar.
 *
 * Cada faixa para sozinha — o ponteiro numa não segura a outra.
 */
.sp-reviews-lane:hover .sp-reviews-track,
.sp-reviews-lane:focus-within .sp-reviews-track,
.sp-reviews-lane.is-offscreen .sp-reviews-track,
.sp-reviews.is-dialog-open .sp-reviews-track {
    animation-play-state: paused;
}

/* === LINK PARA O CANAL === */
/*
 * A faixa mostra as vinte e quatro mais recentes; o canal tem todas. Este é o
 * caminho para o resto, e é secundário de propósito — contorno, não bloco cheio,
 * para não competir com o botão de comprar que está acima na página.
 */
.sp-reviews-more {
    text-align: center;
    margin-top: 30px;
    padding-inline: 24px;
}
.sp-reviews-more-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--blz-text-dim);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: var(--blz-transition);
}
.sp-reviews-more-link:hover {
    border-color: var(--blz-border-cyan);
    background: rgba(34, 211, 238, 0.08);
    color: var(--blz-text-white);
}
.sp-reviews-more-link:focus-visible {
    outline: 2px solid var(--blz-cyan);
    outline-offset: 2px;
}
.sp-reviews-more-link svg {
    flex: 0 0 auto;
    color: var(--blz-cyan);
}

/* === QUANDO A FAIXA NÃO ANDA === */
/*
 * Lista curta demais para formar uma fila. Cobrir a tela com três avaliações
 * exigiria repetir os mesmos cartões cinco ou seis vezes lado a lado, e a faixa
 * passaria a mentir sobre quantas avaliações a loja tem. Aí ela vira uma linha
 * parada, com a lista inteira à vista — e sem setas, porque não há o que mover.
 */
.sp-reviews-lane--static .sp-reviews-viewport {
    max-width: 1400px;
    margin: 0 auto;
    padding: 8px 24px;
    -webkit-mask-image: none;
    mask-image: none;
}
.sp-reviews-lane--static .sp-reviews-track {
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
    animation: none;
}

@media (max-width: 768px) {
    .sp-reviews { padding-bottom: 48px; }
    .sp-reviews-header { margin-bottom: 22px; }
    .sp-reviews-header h2 { font-size: 22px; }
    .sp-reviews-track .testimonial-media { height: 112px; }
    .sp-reviews-nav { width: 36px; height: 36px; }
    .sp-reviews-nav--prev { left: 8px; }
    .sp-reviews-nav--next { right: 8px; }
    .sp-reviews-more { margin-top: 24px; }
}