/*
 * Compatibilidade de utilitários Bootstrap 4 para o site público.
 *
 * O site público carrega Bootstrap 3 (assets/bootstrap/) + o utilitário de
 * espaçamento próprio do tema (assets/css/default.css, escala em px de 5 em
 * 5: .pt-5 a .pt-200). Várias views (antigas e novas) usam classes de
 * utilitário do Bootstrap 4 (.d-flex, .d-none, .card, .form-check-*,
 * .col-xl-*, .mb-0..5, .my-*, .px-*, etc.) que não existem em nenhum dos
 * dois — ficam sem efeito, quebrando espaçamento/visibilidade/estrutura
 * (ex.: o loader "d-none" da página de produtos nunca ficava escondido).
 *
 * Este arquivo cobre só o que falta, sem redefinir nada que default.css já
 * cobre (steps de 5px pra cima em pt-/pb-/pl-/pr-/mt-/mb-) — evita colisão
 * de valores com o que as páginas antigas já esperam daquele arquivo.
 */

/* Display ------------------------------------------------------------- */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: flex !important; }

/* Flexbox --------------------------------------------------------------*/
.flex-wrap { flex-wrap: wrap !important; }
.flex-column { flex-direction: column !important; }
.align-items-center { align-items: center !important; }
.align-items-stretch { align-items: stretch !important; }
.justify-content-start { justify-content: flex-start !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }

/* Tamanho ----------------------------------------------------------------*/
.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }

/* Espaçamento (escala Bootstrap 4: 0, .25rem, .5rem, 1rem, 1.5rem, 3rem)
   Só os tamanhos 0-5 que default.css não cobre (ele só tem múltiplos de 5,
   sem shorthand de eixo/todos os lados) — sem colisão de valores. */
:root {
    --sp-0: 0;
    --sp-1: .25rem;
    --sp-2: .5rem;
    --sp-3: 1rem;
    --sp-4: 1.5rem;
    --sp-5: 3rem;
}
.m-0 { margin: var(--sp-0) !important; }
.m-1 { margin: var(--sp-1) !important; }
.m-2 { margin: var(--sp-2) !important; }
.m-3 { margin: var(--sp-3) !important; }
.m-4 { margin: var(--sp-4) !important; }
.m-5 { margin: var(--sp-5) !important; }
.p-0 { padding: var(--sp-0) !important; }
.p-1 { padding: var(--sp-1) !important; }
.p-2 { padding: var(--sp-2) !important; }
.p-3 { padding: var(--sp-3) !important; }
.p-4 { padding: var(--sp-4) !important; }
.p-5 { padding: var(--sp-5) !important; }

.mt-0 { margin-top: var(--sp-0) !important; }
.mt-1 { margin-top: var(--sp-1) !important; }
.mt-2 { margin-top: var(--sp-2) !important; }
.mt-3 { margin-top: var(--sp-3) !important; }
.mt-4 { margin-top: var(--sp-4) !important; }
.mb-0 { margin-bottom: var(--sp-0) !important; }
.mb-1 { margin-bottom: var(--sp-1) !important; }
.mb-2 { margin-bottom: var(--sp-2) !important; }
.mb-3 { margin-bottom: var(--sp-3) !important; }
.mb-4 { margin-bottom: var(--sp-4) !important; }
.ml-0 { margin-left: var(--sp-0) !important; }
.ml-1 { margin-left: var(--sp-1) !important; }
.ml-2 { margin-left: var(--sp-2) !important; }
.ml-3 { margin-left: var(--sp-3) !important; }
.ml-4 { margin-left: var(--sp-4) !important; }
.mr-0 { margin-right: var(--sp-0) !important; }
.mr-1 { margin-right: var(--sp-1) !important; }
.mr-2 { margin-right: var(--sp-2) !important; }
.mr-3 { margin-right: var(--sp-3) !important; }
.mr-4 { margin-right: var(--sp-4) !important; }
.mx-0 { margin-left: var(--sp-0) !important; margin-right: var(--sp-0) !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.mx-1 { margin-left: var(--sp-1) !important; margin-right: var(--sp-1) !important; }
.mx-2 { margin-left: var(--sp-2) !important; margin-right: var(--sp-2) !important; }
.mx-3 { margin-left: var(--sp-3) !important; margin-right: var(--sp-3) !important; }
.my-0 { margin-top: var(--sp-0) !important; margin-bottom: var(--sp-0) !important; }
.my-1 { margin-top: var(--sp-1) !important; margin-bottom: var(--sp-1) !important; }
.my-2 { margin-top: var(--sp-2) !important; margin-bottom: var(--sp-2) !important; }
.my-3 { margin-top: var(--sp-3) !important; margin-bottom: var(--sp-3) !important; }
.my-4 { margin-top: var(--sp-4) !important; margin-bottom: var(--sp-4) !important; }
.my-5 { margin-top: var(--sp-5) !important; margin-bottom: var(--sp-5) !important; }

.pt-0 { padding-top: var(--sp-0) !important; }
.pt-1 { padding-top: var(--sp-1) !important; }
.pt-2 { padding-top: var(--sp-2) !important; }
.pt-3 { padding-top: var(--sp-3) !important; }
.pt-4 { padding-top: var(--sp-4) !important; }
.pb-0 { padding-bottom: var(--sp-0) !important; }
.pb-1 { padding-bottom: var(--sp-1) !important; }
.pb-2 { padding-bottom: var(--sp-2) !important; }
.pb-3 { padding-bottom: var(--sp-3) !important; }
.pb-4 { padding-bottom: var(--sp-4) !important; }
.pl-0 { padding-left: var(--sp-0) !important; }
.pl-1 { padding-left: var(--sp-1) !important; }
.pl-2 { padding-left: var(--sp-2) !important; }
.pl-3 { padding-left: var(--sp-3) !important; }
.pl-4 { padding-left: var(--sp-4) !important; }
.pr-1 { padding-right: var(--sp-1) !important; }
.pr-2 { padding-right: var(--sp-2) !important; }
.pr-3 { padding-right: var(--sp-3) !important; }
.pr-4 { padding-right: var(--sp-4) !important; }
.px-0 { padding-left: var(--sp-0) !important; padding-right: var(--sp-0) !important; }
.px-1 { padding-left: var(--sp-1) !important; padding-right: var(--sp-1) !important; }
.px-2 { padding-left: var(--sp-2) !important; padding-right: var(--sp-2) !important; }
.px-3 { padding-left: var(--sp-3) !important; padding-right: var(--sp-3) !important; }
.py-0 { padding-top: var(--sp-0) !important; padding-bottom: var(--sp-0) !important; }
.py-1 { padding-top: var(--sp-1) !important; padding-bottom: var(--sp-1) !important; }
.py-2 { padding-top: var(--sp-2) !important; padding-bottom: var(--sp-2) !important; }
.py-3 { padding-top: var(--sp-3) !important; padding-bottom: var(--sp-3) !important; }

/* Card (Bootstrap 3 não tem, usa .panel) --------------------------------*/
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 4px;
}
.card-body { flex: 1 1 auto; padding: 1.25rem; }
.card-header {
    padding: .75rem 1.25rem;
    background: #f7f8fa;
    border-bottom: 1px solid rgba(0,0,0,.125);
}
.card-header:first-child { border-radius: 4px 4px 0 0; }
.card-title { margin-bottom: .75rem; }
.card-footer {
    padding: .75rem 1.25rem;
    background: #f7f8fa;
    border-top: 1px solid rgba(0,0,0,.125);
}

/* Formulários (radio/checkbox em linha, Bootstrap 4) --------------------*/
.form-check { position: relative; display: block; padding-left: 1.25rem; }
.form-check-inline {
    display: inline-flex;
    align-items: center;
    padding-left: 0;
    margin-right: .75rem;
}
.form-check-input { margin-right: .4rem; }
.form-check-inline .form-check-input { margin-top: 0; }
.form-check-label { margin-bottom: 0; }

/* Grid: breakpoint xl (Bootstrap 3 só vai até .col-lg-*, >=1200px) ------*/
@media (min-width: 1200px) {
    .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6,
    .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
        float: left;
        position: relative;
        min-height: 1px;
        padding-left: 15px;
        padding-right: 15px;
    }
    .col-xl-1 { width: 8.3333%; }
    .col-xl-2 { width: 16.6667%; }
    .col-xl-3 { width: 25%; }
    .col-xl-4 { width: 33.3333%; }
    .col-xl-5 { width: 41.6667%; }
    .col-xl-6 { width: 50%; }
    .col-xl-7 { width: 58.3333%; }
    .col-xl-8 { width: 66.6667%; }
    .col-xl-9 { width: 75%; }
    .col-xl-10 { width: 83.3333%; }
    .col-xl-11 { width: 91.6667%; }
    .col-xl-12 { width: 100%; }
}

/* Título de seção (usado nas páginas novas: cadastro, carrinho, pesquisa) */
.section_title { text-align: center; margin-bottom: 2rem; }
.section_title h3 { color: #0033CC; font-weight: 700; margin-bottom: .5rem; }
.section_title p { color: #666; margin-bottom: 0; }

/* Faixa de topo (usada pela Área do Aluno via faixa_topo.php) — o arquivo
   assets/css/faixa_topo.css referenciado pela view nunca existiu (404), então
   este bloco inteiro (título + breadcrumb) nunca teve estilo nenhum. */
.home { position: relative; background: #000c3e; overflow: hidden; }
.home .parallax_background {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center; opacity: .35;
}
.home .home_container { position: relative; padding: 50px 0; }
.home .home_content { color: #fff; text-align: center; }
.home .home_title h1 { color: #fff; font-weight: 700; margin: 0 0 .5rem; text-align: center; }
.breadcrumbs { display: inline-block; }
.breadcrumbs ul { list-style: none; padding-left: 0; margin: 0; }
.breadcrumbs ul li { color: #fff; }
.breadcrumbs ul li:not(:last-child)::after { content: "/"; margin: 0 .4rem; opacity: .6; }
.breadcrumbs ul li a { color: inherit; opacity: .85; }
.breadcrumbs ul li a:hover { opacity: 1; }
