/* ============================================================
   ElectroShop — CSS Personalizado
   Bootstrap 5.3 como base; aquí solo estilos propios.
   ============================================================ */

/* ── Variables ───────────────────────────────────────────────── */
:root {
    --ec-primary:      #0d6efd;
    --ec-primary-dark: #0a58ca;
    --ec-card-radius:  .75rem;
    --ec-transition:   .2s ease;
    --ec-shadow:       0 2px 12px rgba(0,0,0,.08);
    --ec-shadow-hover: 0 6px 24px rgba(13,110,253,.18);
}

/* ── Base ────────────────────────────────────────────────────── */
body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background-color: #f8f9fa;
    color: #212529;
}

a { transition: color var(--ec-transition); }

/* ── Navbar ──────────────────────────────────────────────────── */
.navbar { padding-top: .75rem; padding-bottom: .75rem; }
.navbar-brand { font-size: 1.4rem; letter-spacing: -.3px; }

/* ── Hero Banner ─────────────────────────────────────────────── */
.hero-banner {
    border-radius: 1.25rem;
    position: relative;
    overflow: hidden;
}

/* ── Category Card ───────────────────────────────────────────── */
.category-card {
    border-radius: var(--ec-card-radius);
    transition: transform var(--ec-transition), box-shadow var(--ec-transition);
    cursor: pointer;
}
.category-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--ec-shadow-hover);
}
.category-icon i { transition: transform .3s ease; }
.category-card:hover .category-icon i { transform: scale(1.2); }

/* ── Product Card ────────────────────────────────────────────── */
.product-card {
    border-radius: var(--ec-card-radius);
    transition: transform var(--ec-transition), box-shadow var(--ec-transition);
    overflow: hidden;
}
.product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ec-shadow-hover);
}

/* Imagen de producto */
.product-img-wrap {
    height: 220px;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
}
.product-img {
    max-height: 220px;
    width: 100%;
    object-fit: contain;
    transition: transform .35s ease;
}
.product-card:hover .product-img { transform: scale(1.05); }

/* Overlay sin stock */
.product-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(2px);
}

/* Precio oferta */
.product-card .badge.bg-danger {
    font-size: .72rem;
    z-index: 2;
}

/* ── Product Detail ──────────────────────────────────────────── */
.product-detail-img {
    background: #f8f9fa;
    min-height: 400px;
}

/* ── Qty Selector ────────────────────────────────────────────── */
.qty-selector input[type=number] {
    -moz-appearance: textfield;
}
.qty-selector input[type=number]::-webkit-inner-spin-button,
.qty-selector input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

/* ── Cart Table ──────────────────────────────────────────────── */
.cart-img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: .5rem;
}

/* ── Forms ───────────────────────────────────────────────────── */
.form-control:focus, .form-select:focus {
    border-color: var(--ec-primary);
    box-shadow: 0 0 0 .2rem rgba(13,110,253,.18);
}

/* ── Toast notifications ─────────────────────────────────────── */
#toast-container {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.ec-toast {
    min-width: 260px;
    border-radius: var(--ec-card-radius);
    box-shadow: 0 4px 18px rgba(0,0,0,.15);
    animation: slideIn .3s ease;
}
@keyframes slideIn {
    from { transform: translateX(120%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

/* ── Password strength bar ───────────────────────────────────── */
#pwd-strength-bar {
    transition: width .4s ease, background-color .4s ease;
    border-radius: 4px;
}

/* ── Pagination ──────────────────────────────────────────────── */
.page-link {
    border-radius: .5rem !important;
    margin: 0 2px;
}

/* ── Sticky sidebar filters ──────────────────────────────────── */
#category-filters a {
    padding: .3rem .5rem;
    border-radius: .4rem;
    transition: background var(--ec-transition);
}
#category-filters a:hover { background: rgba(13,110,253,.06); }

/* ── Breadcrumb ──────────────────────────────────────────────── */
.breadcrumb-item a { text-decoration: none; color: var(--ec-primary); }

/* ── Footer ──────────────────────────────────────────────────── */
/* Bootstrap 5.3 usa variables CSS para text-muted que en bg-dark
   resuelven a gris muy oscuro. Forzamos colores explícitos. */
footer                    { color: rgba(255,255,255,.75) !important; }
footer h5,
footer h6                 { color: #fff !important; }
footer p,
footer li,
footer .text-muted        { color: rgba(255,255,255,.65) !important; }
footer a                  { color: rgba(255,255,255,.65) !important; text-decoration: none; }
footer a:hover            { color: #fff !important; }
footer .badge.bg-secondary { background-color: rgba(255,255,255,.15) !important; color: #fff !important; }

/* ── Loading spinner overlay ─────────────────────────────────── */
.ec-loading {
    pointer-events: none;
    opacity: .6;
    position: relative;
}
.ec-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.5);
    border-radius: inherit;
}

/* ── Responsive tweaks ───────────────────────────────────────── */
@media (max-width: 576px) {
    .hero-banner { min-height: 280px !important; padding: 2rem 1.5rem !important; }
    .product-img-wrap { height: 170px; }
    .display-4 { font-size: 1.8rem; }
}