/* ===================================================================
   SELO "TEST DATA"
   -------------------------------------------------------------------
   Marca visualmente os blocos que ainda mostram conteúdo de exemplo,
   para ninguém confundir dado de vitrine com dado real:

     .testimonial__item     depoimentos fixos da home e da lista de
                            resultados (Sarah Johnson, Ema Davis...)
     .form-wrapper-custom   o cartão padrão das telas de cadastro

   Fica isolado num arquivo próprio de propósito: quando o conteúdo de
   exemplo for substituído por dado real, basta remover o link deste
   CSS do index.html e o selo some de todas as telas de uma vez.

   O selo é decorativo — vai num ::before, com pointer-events: none,
   fora do fluxo, e não muda o layout de nenhum cartão.
   =================================================================== */

.testimonial__item,
.form-wrapper-custom {
    /* Âncora do selo. Algumas folhas de página já declaram isto; outras
       não, e sem a âncora o ::before escaparia para o primeiro ancestral
       posicionado. */
    position: relative !important;
}

.testimonial__item::before,
.form-wrapper-custom::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 8px;
    width: 46px;
    height: 46px;
    background: url("/img/badges/mockCheck.webp") no-repeat center / contain;
    /* Discreto: apagado e levemente inclinado, como um carimbo de canto.
       Visível o bastante para ser lido de perto, fraco o bastante para não
       competir com o conteúdo do cartão. */
    opacity: .38;
    transform: rotate(-12deg);
    pointer-events: none;
    z-index: 2;
}

/* Ao passar o mouse pelo cartão o selo fica legível, para quem quiser
   conferir o que ele diz. */
.testimonial__item:hover::before,
.form-wrapper-custom:hover::before {
    opacity: .72;
}

/* Nas telas de cadastro o canto superior esquerdo do cartão já é ocupado
   pelo ícone da etapa (.top-left-icon, 40px, primeiro item da linha
   .section-custom). Sem isto o selo — que é absoluto — passaria por cima
   dele. Empilhando a linha acima, o selo vira marca d'água ATRÁS do
   ícone, que é o comportamento certo para um carimbo de fundo. */
.form-wrapper-custom > .section-custom,
.form-wrapper-custom > form > .section-custom {
    position: relative;
    z-index: 3;
}

/* No celular o cartão tem pouca folga lateral: um selo do mesmo tamanho
   encostaria no primeiro campo. */
@media (max-width: 700px) {
    .testimonial__item::before,
    .form-wrapper-custom::before {
        width: 36px;
        height: 36px;
        top: 6px;
        left: 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .testimonial__item::before,
    .form-wrapper-custom::before {
        transform: none;
    }
}

/* ===================================================================
   CHECKOUT LOCATION — selo à DIREITA
   -------------------------------------------------------------------
   O selo é ancorado no canto superior esquerdo do cartão, que nas telas
   de cadastro é onde fica o ícone do passo. No Checkout Location esse
   canto é ocupado pela seta de voltar e pelo título, e o carimbo caía
   em cima deles. Aqui ele vai para o canto oposto, onde o cartão tem
   folga — mesma marca d'água, só que fora do caminho da leitura.
   =================================================================== */
body[data-page="checkoutLocation"] .form-wrapper-custom::before {
    left: auto;
    right: 8px;
}

@media (max-width: 700px) {
    body[data-page="checkoutLocation"] .form-wrapper-custom::before {
        right: 6px;
    }
}