/* =========================================================
   BAZAR EL HATILLO — GLOBAL BRANDING
   ========================================================= */
:root {
    --bs-primary: #228B22;   /* Main brand green */
    --bs-secondary: #FFFFFF; /* Secondary color */
}

/* Navbar + Footer */
.navbar {
    background-color: var(--bs-primary) !important;
}

.footer {
    background-color: var(--bs-secondary) !important;
}

.navbar-brand img {
    max-height: 60px;
    width: auto;
}

/* =========================================================
   BUTTONS — SOLID, OUTLINE, SECONDARY
   ========================================================= */

/* Solid primary buttons */
.btn-primary,
.btn-success,
.btn-secondary {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: white !important;
}

.btn-primary:hover,
.btn-success:hover,
.btn-secondary:hover {
    background-color: #1e7a1e !important;
    border-color: #1e7a1e !important;
}

/* Outline buttons (e.g., Ver Detalles) */
.btn-outline-primary {
    color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

.btn-outline-primary:hover {
    background-color: var(--bs-primary) !important;
    color: white !important;
}

/* =========================================================
   CATEGORY LIST
   ========================================================= */
.categories a {
    color: var(--bs-primary) !important;
    font-weight: 600;
    text-decoration: none;
}

.categories a:hover {
    color: #1e7a1e !important;
}

/* =========================================================
   BOOTSTRAP PRIMARY OVERRIDES (remove blue everywhere)
   ========================================================= */
.bg-primary,
.text-primary,
.border-primary {
    background-color: var(--bs-primary) !important;
    color: white !important;
    border-color: var(--bs-primary) !important;
}

/* Card headers */
.card-header.bg-primary {
    background-color: var(--bs-primary) !important;
    color: white !important;
}

/* Badges (Admin, Seller, Customer) */
.badge.bg-primary,
.badge.bg-success {
    background-color: var(--bs-primary) !important;
}

/* =========================================================
   TABLES
   ========================================================= */
.table-hover tbody tr:hover {
    background-color: #e8f5e9 !important; /* soft green tint */
}

/* Borders */
.border,
.border-top,
.border-bottom,
.border-start,
.border-end {
    border-color: var(--bs-primary) !important;
}

/* =========================================================
   NAVBAR LINKS
   ========================================================= */
.nav-link {
    color: white !important;
    font-weight: 600;
}

.nav-link:hover {
    color: #ffc107 !important;
}

/* =========================================================
   FIX BLUE LINKS INSIDE CATEGORY CARD HEADER
   ========================================================= */
.card-header a,
.card-header .nav-link {
    color: white !important;
}

.card-header a:hover,
.card-header .nav-link:hover {
    color: #ffc107 !important;
}

/* Fix header text inside card-header */
.card-header h4,
.card-header h5 {
    color: white !important;
}


/* CATEGORY LIST FIX — Bootstrap list-group override */

/* .categories .list-group-item {
    color: var(--bs-primary) !important;
    font-weight: 600;
    border: none !important;
    background: transparent !important;
}

.categories .list-group-item:hover {
    color: #1e7a1e !important;
}
*/
.list-group-item a {
    color: var(--bs-primary) !important;
    font-weight: 600;
    text-decoration: none;
}

.list-group-item a:hover {
    color: #1e7a1e !important;
}

/* Active category */
.categories .list-group-item.active {
    background-color: var(--bs-primary) !important;
    color: white !important;
    border-color: var(--bs-primary) !important;
}
/* =========================================================
   SCROLLING BANNER
   ========================================================= */
.scroll-banner {
    width: 100%;
    overflow: hidden;
    background:  #228B22;
    padding: 10px 0;
    font-weight: bold;
    text-align: center;
    color: white;
}

.scroll-banner p {
    display: inline-block;
    white-space: nowrap;
    color: white;
    animation: scroll-left 12s linear infinite;
}

@keyframes scroll-left {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}
/* =========================================================
   PRODUCT IMAGES — consistent size across store/cart/etc.
   ========================================================= */
.product-image {
    width: 100%;
    height: 220px;
    object-fit: cover;
}