body {
    background-color: #fafafa;
}

/* Logo do site: precisa caber em qualquer largura de tela sem sobrepor a busca */
.site-logo {
    max-width: 100%;
    height: auto;
    max-height: 110px;
    width: auto;
    object-fit: contain;
}

.site-logo-sm {
    max-height: 40px;
}

/* A logo usa laranja no texto "VIÇOSA"; sem um fundo claro por trás dela
   essa parte do texto some ao ficar em cima da faixa laranja do menu mobile. */
.site-logo-badge {
    background: #fff;
    border-radius: 10px;
    padding: 4px 10px;
    line-height: 0;
}

/* A regra do template zera o padding deste navbar; sem espaço a logo
   e o botão do menu ficam colados nas bordas da faixa laranja no celular. */
.nav-bar .navbar.site-navbar-mobile {
    padding: 10px 15px !important;
}

/* Com 24 categorias cadastradas, o menu "Categorias" (desktop e mobile) ficava
   maior que a tela; limita a altura e rola o conteúdo em vez de estourar o layout. */
#allCat .categories-bars,
#categoriasMobile .categories-bars {
    max-height: 60vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* Em telas pequenas a altura disponível é menor (barra de endereço, teclado etc.),
   então o limite também precisa ser menor pra não cobrir a tela toda. */
@media (max-width: 767.98px) {
    #allCat .categories-bars,
    #categoriasMobile .categories-bars {
        max-height: 45vh;
    }
}

/* Cards de anúncio */
.anuncio-card-img {
    width: 100%;
    height: 220px;
    object-fit: contain;
    background-color: #f8f8f8;
}

.product-item-inner {
    transition: box-shadow .2s ease, transform .2s ease;
}

.product-item:hover .product-item-inner {
    box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .1);
    transform: translateY(-3px);
}

.anuncio-galeria-principal img {
    width: 100%;
    max-height: 460px;
    object-fit: contain;
    background: #f8f8f8;
}

.anuncio-galeria-thumb img {
    width: 100%;
    height: 80px;
    object-fit: cover;
    cursor: pointer;
    transition: opacity .15s ease;
}

.anuncio-galeria-thumb img:hover {
    opacity: .8;
}

.anuncio-galeria-thumb-video .btn-video-thumb {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.anuncio-galeria-thumb-video video {
    width: 100%;
    height: 80px;
    object-fit: cover;
    border-radius: var(--bs-border-radius);
    border: 1px solid var(--bs-border-color);
    background: #000;
    pointer-events: none;
}

.anuncio-galeria-thumb-video-icone {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    transition: background .15s ease;
}

.anuncio-galeria-thumb-video .btn-video-thumb:hover .anuncio-galeria-thumb-video-icone {
    background: var(--bs-primary);
}

/* Player do modal de vídeo: acompanha as proporções do vídeo sem nunca passar
   da altura/largura visíveis da tela, evitando que o modal precise rolar. */
#modal-video-anuncio .modal-dialog {
    max-width: 90vw;
}

.anuncio-video-modal-player {
    max-width: 100%;
    max-height: 90vh;
    width: auto;
    height: auto;
    display: block;
}

@media (max-width: 575.98px) {
    #modal-video-anuncio .modal-dialog {
        max-width: 100vw;
    }

    .anuncio-video-modal-player {
        max-height: 100vh;
    }
}

.badge-status-ativo { background: var(--bs-primary); }
.badge-status-vendido { background: #6c757d; }
.badge-status-expirado { background: #dc3545; }
.badge-status-removido { background: #343a40; }

.compartilhar-btn-compacto {
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 .125rem .5rem rgba(0, 0, 0, .15);
}

.anuncio-preco {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--bs-primary);
}

/* Caixas de conteúdo (filtro, contato, formulários) */
.border.rounded {
    border-radius: .75rem !important;
    border-color: #ececec !important;
}

.border.rounded.p-3,
.border.rounded.p-4 {
    background: #fff;
}

.list-group-item.active {
    border-color: var(--bs-primary);
}

/* Formulários */
.form-label {
    font-weight: 600;
    font-size: .875rem;
    color: #484848;
}

.form-control,
.form-select {
    border-radius: .5rem;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .2rem rgba(242, 139, 0, .15);
}

/* Choices.js: substitui o dropdown nativo dos selects de filtro (Categoria,
   Finalidade, Estado, Cidade), cujo popup de opções o navegador desenha por
   fora do alcance do CSS da página. */
.choices {
    margin-bottom: 0;
}

.choices__inner {
    border: 1px solid #ced4da;
    border-radius: .5rem;
    padding: .375rem .75rem;
    min-height: calc(1.5em + .75rem + 2px);
    background-color: #fff;
}

.choices.is-focused .choices__inner,
.choices.is-open .choices__inner {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .2rem rgba(242, 139, 0, .15);
}

.choices__list--dropdown,
.choices__list[aria-expanded] {
    border-color: #ced4da;
    border-radius: .5rem;
    overflow: hidden;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background-color: var(--bs-primary);
    color: #fff;
}

.choices__list--single .choices__item {
    padding-right: 0;
}

.choices[data-type*="select-one"]::after {
    border-color: #6c757d transparent transparent;
}

.choices__input {
    background-color: transparent;
}

.btn {
    font-weight: 600;
}

/* Estado vazio */
.alert-light.border {
    border-radius: .75rem;
    background: #fff;
}

/* Rodapé */
.copyright {
    background: #1b1b1b;
    color: rgba(255, 255, 255, .6);
    font-size: .875rem;
}

/* As setas do lightbox só ficam visíveis no :hover (lightbox.min.css), o que
   as deixa invisíveis em telas touch, já que não existe hover no celular. */
@media (hover: none) {
    .lb-nav a.lb-prev,
    .lb-nav a.lb-next {
        opacity: 1;
        filter: alpha(Opacity=100);
    }
}

/* Preload de tela cheia durante requisições ajax */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, .35);
    z-index: 9999;
}