/* ==========================================================
   CAÇA LEILÕES — ONBOARDING (TOUR GUIADO)
   Reaproveita as variáveis já definidas em global.css
   (--cor-principal, --cor-texto, --sombra, --radius, --transicao).
========================================================== */

.tour-overlay{
    position:fixed;
    inset:0;
    background:transparent;
    z-index:2000000;
    transition:background .2s;
    /* O overlay é só visual (escurece o fundo) — nunca bloqueia
       cliques. O elemento real destacado continua 100% clicável
       durante o tour (ex.: clicar em "Ver imóvel" de verdade). */
    pointer-events:none;
}

.tour-overlay--escuro{
    background:rgba(0,0,0,.55);
}

/* O "buraco" é o próprio box-shadow gigante — nenhum elemento falso
   é criado, isto só desenha um contorno sobre o elemento real. */
.tour-spotlight{
    position:fixed;
    z-index:2000001;
    border-radius:12px;
    box-shadow:
        0 0 0 9999px rgba(0,0,0,.55),
        0 0 0 3px var(--cor-principal, #ff6b00);
    pointer-events:none;
    transition:top .3s ease, left .3s ease, width .3s ease, height .3s ease;
}

.tour-popover{
    position:fixed;
    z-index:2000002;
    width:340px;
    max-width:calc(100vw - 32px);
    background:var(--cor-branca, #fff);
    color:var(--cor-texto, #2d3748);
    border-radius:var(--radius, 18px);
    box-shadow:0 20px 50px rgba(0,0,0,.30);
    padding:22px 22px 18px;
    font-family:'Poppins', sans-serif;
    outline:none;
}

.tour-popover:focus-visible{
    outline:3px solid var(--cor-principal, #ff6b00);
    outline-offset:3px;
}

.tour-fechar{
    position:absolute;
    top:10px;
    right:12px;
    width:32px;
    height:32px;
    border:none;
    background:transparent;
    color:var(--cor-texto-claro, #6b7280);
    font-size:22px;
    line-height:1;
    cursor:pointer;
    border-radius:8px;
    transition:var(--transicao, .3s);
}

.tour-fechar:hover{
    background:var(--cor-fundo, #f7f8fc);
    color:var(--cor-texto, #2d3748);
}

.tour-fechar:focus-visible{
    outline:3px solid var(--cor-principal, #ff6b00);
    outline-offset:2px;
}

.tour-progresso{
    font-size:12px;
    font-weight:600;
    letter-spacing:.03em;
    color:var(--cor-principal, #ff6b00);
    text-transform:uppercase;
    margin:0 28px 8px 0;
}

.tour-titulo{
    font-size:19px;
    font-weight:700;
    color:var(--cor-texto, #2d3748);
    margin:0 0 8px;
}

.tour-texto{
    font-size:14px;
    line-height:1.6;
    color:var(--cor-texto-claro, #6b7280);
    margin:0 0 18px;
}

.tour-acoes{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
}

.tour-acoes-direita{
    display:flex;
    gap:8px;
}

.tour-btn{
    font-family:inherit;
    font-size:14px;
    font-weight:600;
    border-radius:10px;
    padding:10px 16px;
    cursor:pointer;
    transition:var(--transicao, .3s);
}

.tour-btn:focus-visible{
    outline:3px solid var(--cor-principal, #ff6b00);
    outline-offset:2px;
}

.tour-btn-texto{
    background:transparent;
    border:none;
    color:var(--cor-texto-claro, #6b7280);
    padding:10px 8px;
}

.tour-btn-texto:hover{
    color:var(--cor-texto, #2d3748);
    text-decoration:underline;
}

.tour-btn-secundario{
    background:#fff;
    border:2px solid var(--cor-borda, #e5e7eb);
    color:var(--cor-texto, #2d3748);
}

.tour-btn-secundario:hover{
    border-color:var(--cor-principal, #ff6b00);
    color:var(--cor-principal, #ff6b00);
}

.tour-btn-primario{
    background:var(--cor-principal, #ff6b00);
    border:2px solid var(--cor-principal, #ff6b00);
    color:#fff;
}

.tour-btn-primario:hover{
    background:var(--cor-principal-hover, #e55f00);
    border-color:var(--cor-principal-hover, #e55f00);
}

/* ===== MOBILE — popover vira uma folha fixa na parte de baixo da
   tela, garantindo que nunca saia da viewport nem corte texto,
   independente de onde o elemento destacado esteja. ===== */
@media (max-width:768px){
    .tour-popover--mobile{
        left:16px !important;
        right:16px !important;
        bottom:16px !important;
        top:auto !important;
        width:auto;
        max-width:none;
        max-height:60vh;
        overflow-y:auto;
    }
}