/*
* Archivo CSS principal
* - Wichy Alonzo para CactusWings
*/

:root {
    --cw-primary: #E60039;
    /* Rojo Antojo CactusWings */
    --cw-primary-hover: #CC0033;
    --cw-primary-text: #FFFFFF;

    --cw-accent: #FFC700;
    /* Amarillo Pollito */
    --cw-accent-text: #18191C;

    --cw-success: #00C853;
    /* Verde Ahorro/Conversión */
    --cw-dark: #1F242B;
    /* Dark Elegante original */
    --cw-dark-hover: #14171C;

    --cw-badge-bg: #f7cdcd;
    /* Badge Descuento Fondo */
    --cw-badge-text: #db1e1e;
    /* Badge Descuento Texto */

    --cw-radius: 12px;
}



/* Dynamic classes bound to custom properties */
.btn-brand-primary {
    background-color: var(--cw-primary);
    color: var(--cw-primary-text);
    border-radius: var(--cw-radius);
    transition: all 0.2s ease-in-out;
}

.btn-brand-primary:hover {
    background-color: var(--cw-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(230, 0, 57, 0.35);
}

.btn-brand-dark {
    background-color: var(--cw-dark);
    color: #FFFFFF;
    border-radius: var(--cw-radius);
    transition: all 0.2s ease-in-out;
}

.btn-brand-dark:hover {
    background-color: var(--cw-dark-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* .qty-box {
            background-color: var(--cw-dark);
            border-radius: var(--cw-radius);
            color: #FFFFFF;
        } */

.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #374151;
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #111827;
}

/* Limpia posicionamientos antiguos que encimaban la barra */
.alert-dialogante {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    background-color: #6200ee;
    /* O el tono morado/azul exacto de tu marca */
}

.logo {
    font-size: 24px;
    font-weight: 900;
    color: #53b573;
}

.logo span {
    color: #ff4757;
}


/* Borde negro resaltado en estado normal */
.form-check-input[type="checkbox"],
input[type="checkbox"] {
    border: 2px solid var(--cw-primary) !important;
    background-color: #ffffff;
    cursor: pointer;
}

/* Estado cuando está seleccionado (check activo) */
.form-check-input[type="checkbox"]:checked,
input[type="checkbox"]:checked {
    background-color: var(--cw-primary-hover) !important;
    border-color: var(--cw-primary-hover) !important;
}

/* Estado al hacer foco / click (quita el resplandor azul por defecto) */
.form-check-input[type="checkbox"]:focus,
input[type="checkbox"]:focus {
    border: 2px solid black !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.2) !important;
}

.view-controls {
    display: flex;
    gap: 10px;
}

.view-toggle {
    cursor: pointer;
    font-size: 1.2rem;
    color: #b0b0b0;
    /* Color gris suave */
    transition: all 0.2s ease;
}

.view-toggle:hover {
    color: #0d6efd;
    /* Cambia a azul al pasar el mouse */
    transform: scale(1.1);
}

.view-toggle.active {
    color: #0d6efd;
    /* Color fijo cuando está seleccionado */
}

/* Cuando la vista sea en lista, forza a que las columnas ocupen el 100% de ancho */
#product-list.vista-lista .product-card-wrapper {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

/* Opcional: Ajustar el layout de la tarjeta en horizontal cuando esté en lista */
#product-list.vista-lista .product-card {
    flex-direction: row !important;
}

#product-list.vista-lista .product-card img,
#product-list.vista-lista .product-card .position-relative {
    width: 110px !important;
    height: 100% !important;
    min-height: 90px;
}

/* --- Ajustes Responsive para la Cabecera en Móviles --- */
@media (max-width: 768px) {

    /* Oculta la etiqueta "Ver como" en pantallas chicas */
    #tabs-carritos .view-controls-label,
    #tabs-carritos span {
        display: none;
    }

    /* Asegura que los iconos de vista y el carrito mantengan su botón/badges visibles */
    #tabs-carritos .view-controls span,
    #tabs-carritos button span {
        display: inline-flex !important;
    }

    /* Evita que el buscador se reduzca demasiado */
    .custom-search {
        min-width: 140px;
    }
}


body {
    background-color: #f4f7f6;
    padding-bottom: 80px;
}

.product-card {
    border: none;
    border-radius: 12px;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    /* height: 1%!important; */
}

.product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.category-header {
    border-bottom: 2px solid #dee2e6;
    margin-top: 2rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
    color: #6c757d;
    font-weight: bold;
    letter-spacing: 1px;
    width: 100%;
}

#floating-cart-btn {
    z-index: 1050;
    border-radius: 50px;
}

.extra-small {
    font-size: 0.75rem;
}

main,
.container-fluid {
    /* El contenedor de tus acordeones */
    flex: 1 0 auto;
    /* Esto hace que el contenido crezca y empuje al footer */
}

footer {
    flex-shrink: 0;
    /* Evita que el footer se comprima */
}

/* Permite que el header se quede pegado aunque el contenedor tenga overflow-hidden */
.group-container {
    overflow: visible !important;
}

.group-header {
    border-bottom: 1px solid #dee2e6;
    /* Ajusta el top si tienes un navbar fijo arriba, ej: top: 56px; */
    top: 0;
}

/* Opcional: Sombra suave cuando el header está pegado para que no se pierda con el contenido */
.group-header.sticky-top {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Contenedor del buscador */
.custom-search {
    transition: all 0.3s ease;
    border: 2px solid transparent;
    /* Borde invisible inicial */
    background-color: white;
}

/* Efecto al hacer clic (focus) */
.custom-search:focus-within {
    border-color: color(srgb 0.536 0.7215 0.8317);
    /* Cambia al color de tu marca (ej. rojo Cactus) */
    box-shadow: 0 0 10px rgba(255, 107, 107, 0.2) !important;
}

/* Estilo del input */
.custom-search input::placeholder {
    color: #adb5bd;
    font-size: 0.95rem;
}

/* Quitamos el borde azul por defecto de Bootstrap */
.custom-search input:focus {
    box-shadow: none;
    outline: none;
}


.custom-search {
    transition: all 0.3s ease;
    border: 2px solid transparent;
    background-color: white;
}

.custom-search:focus-within {
    border-color: color(srgb 0.536 0.7215 0.8317);
    box-shadow: 0 0 10px rgba(255, 107, 107, 0.2) !important;
}

.custom-search input::placeholder {
    color: #adb5bd;
    font-size: 0.95rem;
}

.custom-search input:focus {
    box-shadow: none;
    outline: none;
}

/* --- ALERTA DIALOGANTE / BANNER INICIAL --- */
.alert-dialogante {
    color: #ffffff;
    padding: 12px 20px;
    font-size: 0.95rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    animation: fadeInDown 0.5s ease-in-out;
    position: absolute;
    z-index: 1;
    width: 100% !important;
    background-color: rgb(74, 0, 255);
    font-weight: bolder;
}