/* CSS proprio do projeto para o angular-ui-tour — a lib (angular-ui-tour + hone) so cria os
   elementos do backdrop via JS, sem nenhum estilo visual empacotado. Sem isso, o "escurecido"
   ao redor do campo em destaque nao aparece (os divs existem, mas ficam transparentes). */
.ui-tour-backdrop-component {
    background-color: rgba(0, 0, 0, 0.55);
}

/* O balao NAO segue mais o campo via Tether (o calculo dele erra conforme a pagina rola,
   mesmo com appendToBody/fixed configurados — ver PDVController.js/application.js). Em vez
   disso ele fica fixo num canto da tela e o backdrop e quem aponta pro campo real.
   !important e necessario aqui porque o Tether continua escrevendo top/left/transform via
   style inline a cada reposicionamento — uma regra de CSS com !important vence esse inline
   (inline sem !important perde para stylesheet com !important), entao a posicao fixa se
   mantem mesmo com o calculo da lib rodando por baixo.
   max-width/max-height em funcao de vw/vh garantem que o balao nunca fique cortado,
   independente do tamanho da tela. */
.ui-tour-popup {
    position: fixed !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    bottom: 20px !important;
    right: 20px !important;
    max-width: min(360px, calc(100vw - 40px));
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}

/* Alternado via JS (PDVController.js onTourStepShown) quando o campo em destaque fica por
   baixo do canto padrao (bottom-right) — move o balao pro canto oposto (top-left). */
.ui-tour-popup.ui-tour-popup-alt-corner {
    bottom: auto !important;
    right: auto !important;
    top: 20px !important;
    left: 20px !important;
}