/*  Se implementa desde la [plantilla principal] del proyecto  */
:root {
    --omega-blue-deep: #121a77;
    --omega-blue-bright: #1e2dbf;
    --omega-orange: #f97316;
    --omega-orange-soft: #ffe2cc;
    --white: #ffffff;
}

/* ===============================
   BOTÓN PRINCIPAL DEL CARRITO (base)
   =============================== */
.custom-cart-btn {
    border: 1.8px solid var(--omega-blue-bright);
    color: var(--omega-blue-bright);
    background-color: var(--white);
    transition: all 0.3s ease;
    border-radius: 0.5rem;
    padding: 0.45rem 0.7rem;
    line-height: 1;
    font-size: 0.95rem;
}

.custom-cart-btn i {
    font-size: 1rem;
    transition: color 0.3s ease;
}

/* Contador (badge) */
.custom-cart-badge {
    background-color: var(--omega-orange);
    color: var(--white);
    font-weight: 600;
    font-size: 0.7rem;
    padding: 5px 10px;
    /* ← unificado (antes había padding duplicado) */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

/* Hover */
.custom-cart-btn:hover {
    background-color: var(--omega-orange-soft);
    border-color: var(--omega-orange);
    color: var(--omega-blue-deep);
    /* ← mejor contraste en hover */
}

.custom-cart-btn:hover i {
    color: var(--omega-blue-deep);
}

.custom-cart-btn:hover .custom-cart-badge {
    background-color: var(--omega-orange);
    color: var(--white);
}

/* Badge en pantallas pequeñas (tamaño) */
@media (max-width: 768px) {
    .custom-cart-badge {
        font-size: 0.65rem;
        padding: 4px 8px;
    }
}

/* =========================================
   NAV MÓVIL (≤992px): alinear como nav-links
   ========================================= */
@media (max-width: 992px) {

    .navbar-collapse.show .navbar-nav .custom-cart-btn,
    .navbar-nav .custom-cart-btn {
        display: block;
        width: 100%;
        text-align: left;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        margin: 0;
        padding: .8rem 1rem;
        /* mismo padding que los items de menú */
    }

    /* Evitar posición relativa del botón (círculo deformado) */
    .navbar-collapse.show .navbar-nav .custom-cart-btn.cart-fixed-mobile,
    .navbar-collapse.show .navbar-nav .custom-cart-btn.position-relative {
        position: static !important;
    }

    /* Ícono alineado con el texto */
    .navbar-nav .custom-cart-btn .fa-cart-shopping {
        margin-right: .6rem;
    }

    /* Badge en línea (no flotante en esquina) */
    .navbar-nav .custom-cart-badge {
        position: static !important;
        transform: none !important;
        /* anula translate-middle de Bootstrap */
        inset: auto !important;
        /* anula top/start utilidades */
        margin-left: .5rem;
        box-shadow: none;
    }
}

/* =========================================
   NAV ESCRITORIO (≥993px): botón compacto
   ========================================= */
@media (min-width: 993px) {
    .custom-cart-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        /* 40–48px según prefieras */
        height: 44px;
        padding: 0;
        /* ícono centrado */
        border-radius: .6rem;
        /* coherente con tus cards */
        background-color: var(--white);
        border: 1.8px solid var(--omega-blue-bright);
        box-shadow: none;
        text-align: center;
    }

    .custom-cart-btn i {
        font-size: 1.1rem;
        margin: 0;
    }

    /* Badge pequeño flotando en la esquina */
    .custom-cart-badge {
        position: absolute !important;
        top: -6px;
        right: -6px;
        transform: none !important;
        /* anula translate-middle */
        min-width: 20px;
        height: 20px;
        line-height: 20px;
        padding: 0 6px;
        font-size: .75rem;
        border-radius: 9999px;
        box-shadow: 0 0 0;
        /* limpio en nav */
    }

    /* Pulido para variante outline de Bootstrap */
    .custom-cart-btn.btn-outline-primary {
        color: var(--omega-blue-deep);
        border-color: var(--omega-blue-bright);
        background: var(--white);
    }

    .custom-cart-btn.btn-outline-primary:hover {
        background: var(--omega-orange-soft);
        border-color: var(--omega-blue-deep);
    }
}