/* ========================================
   Store Badges - Colores Corporativos
   ======================================== */

/* Badge base - Diseño limpio y minimalista */
.store-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    background: white;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: all 0.2s;
}

.store-badge:hover {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border-color: #d1d5db;
}

.store-icon {
    width: 18px;
    height: 18px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5rem;
    font-weight: 700;
    background: var(--bg-gray);
    color: var(--text);
}

/* Logo SVG - Más pequeño y limpio con mejor visibilidad */
.store-logo {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border-radius: 3px;
    opacity: 1;
    /* Sombra sutil para mejor contraste en cualquier fondo */
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

/* Colores por tienda - Acentos sutiles en hover */

/* Supermercados */
.store-plaza-vea:hover { border-color: #00a651; }
.store-wong:hover { border-color: #e31837; }
.store-metro:hover { border-color: #003da5; }
.store-vivanda:hover { border-color: #6b1f7b; }
.store-makro:hover { border-color: #ffc72c; }
.store-tottus:hover { border-color: #e31e25; }

/* Tiendas por departamento */
.store-falabella:hover, .store-saga-falabella:hover { border-color: #009639; }
.store-ripley:hover { border-color: #6b2d5c; }
.store-oechsle:hover { border-color: #c8102e; }

/* Electrónica */
.store-coolbox:hover { border-color: #0066cc; }
.store-hiraoka:hover { border-color: #e31e24; }

/* Mejoramiento del hogar */
.store-promart:hover { border-color: #ff6600; }
.store-sodimac:hover { border-color: #ff0000; }

/* Centros comerciales */
.store-real-plaza:hover { border-color: #0066b3; }
.store-jockey-plaza:hover { border-color: #1e3a8a; }

/* Marketplaces */
.store-mercado-libre:hover { border-color: #ffe600; }
.store-juntoz:hover { border-color: #ff385c; }

/* Tiendas especializadas */
.store-tai-loy:hover { border-color: #ff6b35; }
.store-quality-products:hover { border-color: #0F172A; }

/* Genérico (para tiendas no mapeadas) */
.store-generic:hover { border-color: #6b7280; }

/* ========================================
   Responsive - Móviles
   ======================================== */
@media (max-width: 768px) {
    .store-badge {
        font-size: 0.8125rem;
        padding: 0.375rem 0.625rem;
        gap: 0.375rem;
    }

    .store-logo {
        width: 20px;
        height: 20px;
        border-radius: 4px;
    }

    .store-icon {
        width: 20px;
        height: 20px;
        border-radius: 4px;
        font-size: 0.625rem;
    }
}

@media (max-width: 480px) {
    .store-badge {
        font-size: 0.875rem;
        padding: 0.5rem 0.75rem;
        gap: 0.5rem;
    }

    .store-logo {
        width: 22px;
        height: 22px;
        border-radius: 4px;
    }

    .store-icon {
        width: 22px;
        height: 22px;
        border-radius: 4px;
        font-size: 0.6875rem;
    }
}