/* =============================================================================
   ONCARD LOJA — elementos do carrinho dentro do site (index.php)
   Prefixo ljs- para não conflitar com o main.css nem com o Bootstrap.
   ========================================================================== */

/* Grupo à direita da barra: carrinho + Entrar */
.ljs-nav-direita { display: flex; align-items: center; gap: 18px; }

.ljs-nav-carrinho { position: relative; display: inline-flex; align-items: center; font-size: 20px; }
.ljs-contador {
    position: absolute; top: -6px; right: -12px;
    min-width: 19px; height: 19px; padding: 0 5px;
    font-family: 'Open Sans', sans-serif; font-size: 11px; font-weight: 700;
    line-height: 19px; text-align: center; color: #fff;
    background: #00A651; border-radius: 10px;
}
.ljs-contador[hidden] { display: none; }

/* Botão enquanto adiciona */
.ljs-carregando { opacity: .6; cursor: progress !important; }

/* Aviso flutuante "adicionado ao carrinho" */
.ljs-aviso {
    position: fixed; right: 16px; bottom: 96px; z-index: 10000;
    width: min(360px, calc(100vw - 32px));
    padding: 16px 18px; border-radius: 12px;
    background: #333; color: #fff; border-left: 5px solid #00A651;
    font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 1.45; text-align: left;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
    opacity: 0; transform: translateY(12px); pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}
.ljs-aviso--visivel { opacity: 1; transform: none; pointer-events: auto; }
.ljs-aviso--erro { border-left-color: #e74c3c; }
.ljs-aviso__texto { margin: 0 0 12px; font-weight: 600; }
.ljs-aviso__acoes { display: flex; justify-content: flex-end; align-items: center; gap: 16px; }
.ljs-aviso__continuar {
    background: none !important; border: 0; padding: 0; margin: 0 !important;
    font: inherit; font-size: 14px; color: #cfd8d3 !important; text-decoration: underline; cursor: pointer;
}
.ljs-aviso__ver {
    display: inline-block; padding: 8px 16px; border-radius: 10px;
    background: #00A651; color: #fff !important; font-weight: 700; font-size: 14px; text-decoration: none;
}
.ljs-aviso__ver:hover { background: rgb(27, 99, 22); }

@media (prefers-reduced-motion: reduce) {
    .ljs-aviso { transition: none; }
}