/* ============================================
   FERBIS BRAND - Overrides para Fruitables (web)
   Colores oficiales de https://ferbis.com
   Rojo #e71b23 | Verde #02481b | Carbón #232630
   ============================================ */

:root {
    --ferbis-red: #e71b23;
    --ferbis-red-dark: #bf0000;
    --ferbis-green: #02481b;
    --ferbis-green-dark: #013512;
    --ferbis-charcoal: #232630;
    --ferbis-gold: #d5a51f;
    --bs-primary: var(--ferbis-red);
    --bs-secondary: var(--ferbis-green);
}

/* --- Primario (rojo) para botones y enlaces --- */
.text-primary { color: var(--ferbis-red) !important; }
.bg-primary { background-color: var(--ferbis-red) !important; }
.btn-primary { background-color: var(--ferbis-red) !important; border-color: var(--ferbis-red) !important; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--ferbis-red-dark) !important;
    border-color: var(--ferbis-red-dark) !important;
}
.btn-primary:disabled {
    background-color: var(--ferbis-red) !important;
    border-color: var(--ferbis-red) !important;
}

/* --- Secundario (verde corporativo) --- */
.text-secondary { color: var(--ferbis-green) !important; }
.bg-secondary { background-color: var(--ferbis-green) !important; }
.btn-secondary { background-color: var(--ferbis-green) !important; border-color: var(--ferbis-green) !important; }

/* --- Topbar: verde corporativo --- */
.container-fluid.fixed-top .topbar {
    background-color: var(--ferbis-green) !important;
}
.topbar small { color: rgba(255, 255, 255, 0.85) !important; }
.topbar .text-secondary { color: var(--ferbis-gold) !important; }

/* --- Navbar: logo y enlaces --- */
.navbar-brand h1.text-primary { color: var(--ferbis-red) !important; }
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
    color: var(--ferbis-red) !important;
}
.btn-icon:hover { border-color: var(--ferbis-red) !important; }

/* --- Footer: carbón Ferbis --- */
.footer,
.copyright {
    background-color: var(--ferbis-charcoal) !important;
}
.footer .text-secondary,
.copyright .text-secondary {
    color: var(--ferbis-red) !important;
}
.footer a.text-body:hover {
    color: var(--ferbis-red) !important;
}
.footer .btn-primary { background-color: var(--ferbis-red) !important; border-color: var(--ferbis-red) !important; }

/* --- Precios / etiquetas de oferta --- */
.price,
.rating i.text-secondary,
.item-hover:hover h6,
.item-hover:hover .btn-icon {
    color: var(--ferbis-red) !important;
}
.btn-sm-square:hover,
.btn-square:hover {
    background-color: var(--ferbis-red) !important;
    border-color: var(--ferbis-red) !important;
}

/* --- Paginación: restaurar layout horizontal (Bootstrap flex) ---
   El tema Fruitables define .pagination { display: inline-block; },
   lo que apila los .page-item verticalmente. Al cargarse este archivo
   después de style.css, la regla flex gana y corrige la vista. */
.pagination {
    display: flex !important;
    flex-wrap: wrap !important;
    padding-left: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}
.pagination .page-item {
    display: inline-block;
}
.pagination .page-item .page-link {
    margin: 0 4px;
    color: var(--ferbis-charcoal);
}
.pagination .page-item.active .page-link {
    background-color: var(--ferbis-red) !important;
    border-color: var(--ferbis-green) !important;
    color: #fff !important;
}
.pagination .page-item .page-link:hover:not(.active) {
    background-color: var(--ferbis-red);
    border-color: var(--ferbis-green);
    color: #fff;
}