/* ===================================
   07 - Feedback e indicadores
   Spinner, skeleton y pasos del checkout.
   Depende de 03-animations.css (spin, loading).

   .progress-bar y .badge-* se movieron a 99-sin-uso.css
   por no tener uso en el proyecto.
   =================================== */

/* ===== Spinner de carga ===== */
.spinner {
    border: 3px solid rgba(201, 169, 110, 0.1);
    border-top-color: var(--color-gold);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

/* ===== Skeleton loader ===== */
/* NOTA: estaba declarado dos veces (gradiente oscuro + parche claro).
   Consolidado al gradiente claro, que era el que ganaba. */
.skeleton {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%) !important;
    background-size: 200% 100% !important;
    animation: loading 1.5s ease-in-out infinite;
}

/* ===== Indicador de pasos del checkout ===== */
.checkout-step-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ===== Aviso al agregar al carrito =====
   Antes era un rectangulo verde de sistema; ahora habla el idioma
   de la casa: carbon, filete dorado y tipografia de etiqueta. */
.cart-toast {
    position: fixed;
    top: 5.5rem;
    right: 1.5rem;
    z-index: 80;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.9rem 1.25rem;
    border-left: 2px solid var(--color-gold);
    border-radius: 3px;
    background: rgba(26, 23, 18, 0.95);
    box-shadow: 0 20px 50px -25px rgba(0, 0, 0, 0.8);
    font-size: 0.82rem;
    color: #ffffff;
    animation: fadeInUp 0.4s ease-out;
}

.cart-toast i {
    font-size: 0.75rem;
    color: var(--color-gold);
}

/* Boton dentro del aviso (lo usa el de "hay version nueva") */
.cart-toast__action {
    margin-left: 0.4rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid rgba(201, 169, 110, 0.55);
    border-radius: 999px;
    background: transparent;
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-gold-light);
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease;
}

.cart-toast__action:hover {
    background: var(--color-gold);
    color: #16120A;
}

@media (max-width: 640px) {
    .cart-toast {
        top: auto;
        bottom: 1.25rem;
        left: 1.25rem;
        right: 1.25rem;
    }
}