/* =========================================================
   Layout Simples Belovety

   Prefixo exclusivo:
   bvls = Belovety Layout Simples
   ========================================================= */

html {
    min-height: 100%;
    background: #f4f6fa;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body.bvls-layout {
    width: 100%;
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    background: linear-gradient( 180deg, #f8f9fc 0%, #f4f6fa 100% );
    color: #252936;
    font-family: var( --font-family-base, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif );
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@supports (min-height: 100dvh) {
    body.bvls-layout {
        min-height: 100dvh;
    }
}

body.bvls-layout .bvls-page-root {
    width: 100%;
    min-height: 100vh;
    position: relative;
}
@supports (min-height: 100dvh) {
    body.bvls-layout .bvls-page-root {
        min-height: 100dvh;
    }
}

body.bvls-layout button,
body.bvls-layout a,
body.bvls-layout input,
body.bvls-layout select,
body.bvls-layout textarea {
    -webkit-tap-highlight-color: transparent;
}

body.bvls-layout img,
body.bvls-layout video {
    max-width: 100%;
}

body.bvls-layout ::selection {
    background: rgba(255, 0, 127, .18);
    color: inherit;
}

/*
 * Evita que elementos extensos provoquem rolagem horizontal
 * sem interferir em componentes que possuem scroll próprio.
 */
@supports (overflow: clip) {
    body.bvls-layout {
        overflow-x: clip;
    }
}

/*
 * Mantém a largura estável em desktop quando uma modal
 * remove temporariamente a barra de rolagem.
 */
@media (min-width: 769px) {
    html {
        scrollbar-gutter: stable;
    }
}

/* =========================================================
   Utilitário de acessibilidade
   ========================================================= */

.bvls-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}


/* =========================================================
   Camadas de modais

   O header simples usa z-index 1100.
   Backdrop e modal precisam permanecer acima dele.
   ========================================================= */

body.bvls-layout .modal-backdrop {
    z-index: 1300 !important;
}

body.bvls-layout .modal {
    z-index: 1310 !important;
}