/* =============================================================================
   carrinho.css — Módulo 3 (Plan B / Nartex)
   Escopo isolado (.cart-control e .pb-cart*) para não conflitar com main.css.
   ========================================================================== */

:root {
    --pb-azul: #0a5; /* ajuste para a cor da marca quando definirmos */
    --pb-azul-escuro: #084;
    --pb-cinza: #e9e9e9;
    --pb-cinza-txt: #555;
    --pb-borda: #d8d8d8;
}

/* ---- Stepper dentro de cada tamanho -------------------------------------- */
.cart-control {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}
.cart-control .cart-minus,
.cart-control .cart-plus {
    width: 26px;
    height: 26px;
    border: 1px solid var(--pb-borda);
    background: #fff;
    border-radius: 6px;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    color: var(--pb-cinza-txt);
    transition: background .12s, border-color .12s;
}
.cart-control .cart-plus { color: var(--pb-azul); font-weight: 700; }
/* o "−" fica sempre visível; apagado (cinza) quando não há item no tamanho */
.cart-control:not(.ativo) .cart-minus {
    color: #ccc;
    border-color: #e8e8e8;
    cursor: default;
}
.cart-control .cart-minus:hover,
.cart-control .cart-plus:hover { background: var(--pb-cinza); border-color: #bbb; }
.cart-control:not(.ativo) .cart-minus:hover { background: #fff; border-color: #e8e8e8; }
.cart-control .cart-minus:focus-visible,
.cart-control .cart-plus:focus-visible {
    outline: 2px solid var(--pb-azul);
    outline-offset: 1px;
}
.cart-control .cart-qty {
    min-width: 18px;
    text-align: center;
    font-weight: 600;
    color: #222;
}
.cart-control:not(.ativo) .cart-qty { color: #bbb; }

/* Linha tamanho · preço · stepper com respiro entre eles */
.size-price {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;   /* deixa o stepper cair p/ a linha de baixo se não couber */
    row-gap: 4px;
}
/* Mobile (≤699px): cada tamanho vira um bloco com fundo (zebra) + respiro.
   Tons da mesma família do site: base = fundo do site; alternado ~10% + escuro.
   1ª linha: tamanho (qtd) + preço · 2ª linha: botões de adicionar. */
@media (max-width: 699px) {
    .size-price {
        background: #f1f1f1;          /* mesmo tom do fundo do site */
        border-radius: 6px;
        padding: 8px 10px;
        margin: 8px 0;
        gap: 2px 8px;
    }
    .size-price.sp-alt { background: #d9d9d9; }  /* mesma família, ~10% mais escuro */
    .size-price .cart-control {
        flex-basis: 100%;
        margin-left: 0;
        margin-top: 4px;
        justify-content: flex-start;
    }
}

/* ---- Versão web (≥700px): tamanho · preço · stepper na MESMA linha,
   sem fundo colorido (a zebra é só no mobile). --------------------------- */
@media (min-width: 700px) {
    .size-price {
        flex-wrap: nowrap;             /* não quebra: tudo numa linha */
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        margin: 4px 0;
        padding: 2px 0;
        background: transparent;       /* sem cor no desktop */
        border-radius: 0;
    }
    .size-price.sp-alt { background: transparent; }   /* sem zebra no desktop */
    .size-price .cart-control {
        flex-basis: auto;              /* fica na mesma linha (não força quebra) */
        margin-left: auto;             /* empurra o stepper para a direita */
        margin-top: 0;
        justify-content: flex-end;
    }
}
.cart-control.ativo { /* gancho para realce futuro */ }

/* ---- Botão flutuante ------------------------------------------------------ */
.pb-cart-toggle {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 1000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: none;
    border-radius: 50%;
    background: var(--pb-azul);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.pb-cart-toggle:hover { background: var(--pb-azul-escuro); }
.pb-cart-toggle:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.pb-cart-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    border-radius: 11px;
    background: #d33;
    color: #fff;
    font: 700 12px/22px system-ui, sans-serif;
    text-align: center;
}

/* ---- Overlay + gaveta ----------------------------------------------------- */
.pb-cart-overlay {
    position: fixed;
    inset: 0;
    z-index: 1001;
    background: rgba(0,0,0,.4);
}
.pb-cart {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1002;
    width: min(380px, 92vw);
    height: 100%;
    background: #fff;
    box-shadow: -4px 0 18px rgba(0,0,0,.2);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .22s ease;
    font: 14px/1.4 system-ui, -apple-system, sans-serif;
}
.pb-cart.aberto { transform: translateX(0); }

.pb-cart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--pb-borda);
    font-size: 16px;
}
.pb-cart-close {
    border: none;
    background: none;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    color: #888;
}
.pb-cart-close:focus-visible { outline: 2px solid var(--pb-azul); }

.pb-cart-itens {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 8px 16px;
}
.pb-cart-vazio { padding: 24px 16px; color: var(--pb-cinza-txt); text-align: center; }

#pb-cart, #pb-cart * { box-sizing: border-box; }

/* Esconde linhas marcadas com [hidden] mesmo sendo flex */
.pb-cart-linha[hidden] { display: none; }

.pb-item {
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}
.pb-item-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}
.pb-item-nome { font-weight: 600; color: #222; min-width: 0; overflow-wrap: anywhere; }
.pb-item-linha { font-weight: 600; white-space: nowrap; }
.pb-item-sub { color: var(--pb-cinza-txt); font-size: 13px; margin-top: 2px; }
.pb-item-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
}
.pb-item-ctrl { display: inline-flex; align-items: center; gap: 8px; }
.pb-item-ctrl button {
    width: 26px; height: 26px;
    border: 1px solid var(--pb-borda); background: #fff;
    border-radius: 6px; cursor: pointer; font-size: 15px; color: var(--pb-cinza-txt);
}
.pb-item-ctrl button:hover { background: var(--pb-cinza); }
.pb-item-rem {
    border: none; background: none; color: #c33;
    cursor: pointer; font-size: 13px; padding: 0;
}
.pb-item-rem:hover { text-decoration: underline; }

.pb-cart-foot { border-top: 1px solid var(--pb-borda); padding: 14px 16px; }
.pb-cart-aviso {
    margin-bottom: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.35;
}
.pb-cart-aviso.bloqueio { background: #fdecea; color: #b3261e; }
.pb-cart-aviso.taxa     { background: #fff4e0; color: #8a5300; }
.pb-cart-aviso.ok       { background: #e9f7ef; color: #0a6b3a; }

.pb-cart-resumo { margin-bottom: 12px; }
.pb-cart-linha {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: var(--pb-cinza-txt);
    padding: 2px 0;
}
.pb-cart-linha.pb-cart-total {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--pb-borda);
    font-size: 17px;
    font-weight: 700;
    color: #222;
}
.pb-cart-enviar {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 8px;
    background: var(--pb-azul);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}
.pb-cart-enviar:hover { background: var(--pb-azul-escuro); }
.pb-cart-enviar:disabled { background: #bbb; cursor: not-allowed; }
.pb-cart-limpar {
    width: 100%;
    margin-top: 8px;
    padding: 8px;
    border: none;
    background: none;
    color: var(--pb-cinza-txt);
    font-size: 13px;
    cursor: pointer;
}
.pb-cart-limpar:hover { text-decoration: underline; }

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