/**
 * @package     Joomla.Site
 * @subpackage  com_turismo
 *
 * Estilos do wizard/tour guiado (ver media/com_turismo/js/wizard.js).
 * z-index acima de modais do Bootstrap (1055) para o tour cobrir a tela.
 */

/* Tiras escuras do overlay (formam o "buraco" sobre o elemento destacado). */
.tw-strip {
    position: fixed;
    background: rgba(0, 0, 0, .62);
    z-index: 2000;
    pointer-events: auto;
    transition: top .15s ease, left .15s ease, width .15s ease, height .15s ease;
}

/* Anel realçando o elemento explicado (o item fica claro; o resto, escuro). */
.tw-ring {
    position: fixed;
    z-index: 2001;
    border: 2px solid #0d6efd;
    border-radius: 6px;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, .35);
    pointer-events: none;
    transition: top .15s ease, left .15s ease, width .15s ease, height .15s ease;
}

/* Balão explicativo (card Bootstrap posicionado junto ao item). */
.tw-balloon {
    position: fixed;
    z-index: 2002;
    max-width: 92vw;
    border: 0;
}

.tw-balloon .card-body {
    padding: .75rem 1rem;
}