/* --- 1. ESTRUCTURA Y COLUMNAS (Simetría) --- */

.hp-listing-categories .hp-row {
    display: flex !important;
    flex-wrap: wrap !important;
}

.hp-listing-categories .hp-row > div {
    flex: 0 0 33.33% !important;
    max-width: 33.33% !important;
    padding: 10px !important;
}

.hp-listing-category__image img {
    height: 250px !important;
    width: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}

.hp-listing-category__image {
    height: 250px !important;
    overflow: hidden !important;
    border-radius: 8px;
    border: 2px solid #333333; /* Opcional: borde oscuro para las fotos */
}

/* --- 2. COLORES GENERALES: FONDO LADRILLO Y TEXTOS NEGROS --- */

/* Fondo general color LADRILLO para todas las secciones */
body, 
.hp-page, 
#content.site-content, 
.header-navbar, 
.site-footer, 
.page__text {
    background-color: #854949 !important;
}

/* Forzar letras NEGRAS en la mayoría de la página (textos, párrafos, menús, etiquetas) */
body, p, span, li, label, 
.hp-form__label, 
.hp-form__description, 
.footer-navbar__menu ul li a {
    color: #000000 !important;
}

/* Títulos principales (como "Categorías") en negro resaltado */
h1, h2, h3, h4, 
.hp-page__title,
.hp-widget__title {
    color: #000000 !important;
    font-weight: 800 !important;
}

/* --- 3. EXCEPCIÓN: LETRAS BLANCAS SOBRE LAS IMÁGENES (Tus "Carteles") --- */

/* Forzar letras BLANCAS y en negrita para el nombre de la categoría y contador */
.hp-listing-category__name, 
.hp-listing-category__count, 
.hp-listing__title a,
.hp-listing__count {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8) !important; /* Sombra para máxima legibilidad sobre cualquier foto */
}

/* Asegurar que los enlaces de las categorías no cambien de color al pasar el mouse */
.hp-listing-category--view-block:hover .hp-listing-category__name {
    color: #ffffff !important;
}

/* --- 4. AJUSTE DE FORMULARIOS Y BOTONES --- */

/* Campos de entrada: Fondo blanco con texto negro (Para facilidad de escritura) */
input, textarea, select {
    background-color: #ffffff !important;
    color: #000000 !important;
}

/* Botones Verdes con Letra Blanca */
.hp-form__button, .hp-button--action {
    background-color: #06ac3f !important;
    color: #ffffff !important;
    border: none !important;
}

/* Ajuste para celulares */
@media screen and (max-width: 768px) {
    .hp-listing-categories .hp-row > div {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}
/* Forzar que se vea el texto del botón Añadir Anuncio en móviles */
@media screen and (max-width: 768px) {
    .hp-menu__item--listing-submit span {
        display: inline-block !important; /* Muestra el texto oculto */
        margin-left: 5px;
        font-size: 12px; /* Un poco más chico para que no rompa el diseño */
        font-weight: 700;
    }

    .hp-menu__item--listing-submit i {
        margin-right: 0;
    }

    /* Ajuste para que el botón tenga lugar suficiente */
    .hp-menu__item--listing-submit {
        padding: 8px 12px !important;
        white-space: nowrap; /* Evita que el texto se parta en dos renglones */
    }
}