/* ==========================================
   CLOZEE BAG — DESIGN SYSTEM
   Complementa app.css (Bootstrap 5 overrides)
   Padrão scanner-first, foto-primeiro, responsivo
   ========================================== */

/* ==========================================
   BLOCO 9 — Sinalização de promoção
   Reutilizado em /loja/vendas (PDV), /escolher
   e /p/{codigo}.
   ========================================== */

/* Selo "PROMO" no canto superior direito do card. */
.cb-badge-promo {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    background: var(--cb-ds-danger, #DC2626);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 2px 8px;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    text-transform: uppercase;
}

/* Preço de tabela (riscado) — original antes da promoção. */
.cb-preco-original {
    text-decoration: line-through;
    color: var(--cb-ds-ink-2, #94A3B8);
    font-size: 0.85em;
}

/* Preço promocional efetivo — destaque verde. */
.cb-preco-promo {
    color: var(--cb-ds-ok, #16A34A);
    font-weight: 700;
}

/* Bloco "De / Por" centralizado pra páginas de produto. */
.cb-de-por {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.1;
}

.cb-de-por .de {
    color: var(--cb-ds-ink-2, #94A3B8);
    font-size: 0.85em;
    text-decoration: line-through;
}

.cb-de-por .por {
    color: var(--cb-ds-ok, #16A34A);
    font-weight: 700;
    font-size: 1.15em;
}

:root {
    /* --- Design tokens (marca + status) --- */
    --cb-ds-brand: #7C3AED;          /* roxo ClozeeBag */
    --cb-ds-brand-dark: #6D28D9;
    --cb-ds-brand-light: #EDE9FE;

    --cb-ds-ink: #0F172A;            /* texto forte */
    --cb-ds-ink-2: #334155;          /* texto médio */
    --cb-ds-ink-3: #64748B;          /* texto fraco */
    --cb-ds-line: #E2E8F0;           /* bordas */
    --cb-ds-surface: #F8FAFC;        /* fundo cinza */
    --cb-ds-white: #FFFFFF;

    --cb-ds-ok: #16A34A;             /* verde sucesso */
    --cb-ds-ok-bg: #DCFCE7;
    --cb-ds-warn: #F59E0B;           /* âmbar alerta */
    --cb-ds-warn-bg: #FEF3C7;
    --cb-ds-danger: #DC2626;         /* vermelho erro */
    --cb-ds-danger-bg: #FEE2E2;
    --cb-ds-info: #0EA5E9;
    --cb-ds-info-bg: #E0F2FE;

    --cb-ds-locked: #6366F1;         /* cadeado item pago */
    --cb-ds-locked-bg: #E0E7FF;

    /* --- Espaçamento (múltiplos de 4) --- */
    --cb-ds-s1: 4px;
    --cb-ds-s2: 8px;
    --cb-ds-s3: 12px;
    --cb-ds-s4: 16px;
    --cb-ds-s5: 20px;
    --cb-ds-s6: 24px;
    --cb-ds-s8: 32px;
    --cb-ds-s10: 40px;

    /* --- Raios --- */
    --cb-ds-r-sm: 8px;
    --cb-ds-r-md: 12px;
    --cb-ds-r-lg: 16px;
    --cb-ds-r-xl: 20px;
    --cb-ds-r-full: 999px;

    /* --- Sombras --- */
    --cb-ds-shadow-sm: 0 1px 2px rgba(15,23,42,0.06);
    --cb-ds-shadow-md: 0 4px 12px rgba(15,23,42,0.08);
    --cb-ds-shadow-lg: 0 10px 32px rgba(15,23,42,0.12);

    /* --- Transições --- */
    --cb-ds-t-fast: 0.15s ease;
    --cb-ds-t-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================
   PAGE HEADER (título + subtítulo + ações)
   ========================================== */
.cb-page {
    padding: var(--cb-ds-s6);
    max-width: 1600px;
    margin: 0 auto;
}

.cb-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--cb-ds-s4);
    flex-wrap: wrap;
    margin-bottom: var(--cb-ds-s6);
}

.cb-page-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--cb-ds-ink);
    margin: 0 0 4px 0;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: var(--cb-ds-s3);
}

.cb-page-title i {
    color: var(--cb-ds-brand);
    font-size: 24px;
}

.cb-page-sub {
    font-size: 14px;
    color: var(--cb-ds-ink-3);
    margin: 0;
}

.cb-page-actions {
    display: flex;
    gap: var(--cb-ds-s2);
    flex-wrap: wrap;
}

/* ==========================================
   GRID DO TURNO OPERACIONAL (scanner-first)
   Layout 2 colunas em desktop, empilha mobile
   ========================================== */
.cb-ops-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: var(--cb-ds-s5);
    align-items: start;
}

@media (max-width: 991.98px) {
    .cb-ops-grid {
        grid-template-columns: 1fr;
    }
    .cb-page {
        padding: var(--cb-ds-s4);
    }
}

/* ==========================================
   SCANNER BOX (input focus-first)
   ========================================== */
.cb-scanner {
    background: linear-gradient(135deg, var(--cb-ds-brand), var(--cb-ds-brand-dark));
    border-radius: var(--cb-ds-r-lg);
    padding: var(--cb-ds-s5);
    color: #fff;
    box-shadow: var(--cb-ds-shadow-md);
    display: flex;
    flex-direction: column;
    gap: var(--cb-ds-s3);
    position: sticky;
    top: var(--cb-ds-s4);
}

.cb-scanner-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.9;
    display: flex;
    align-items: center;
    gap: var(--cb-ds-s2);
}

.cb-scanner-label i {
    font-size: 16px;
}

.cb-scanner-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--cb-ds-s2);
}

.cb-scanner-input {
    flex: 1;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(8px);
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: var(--cb-ds-r-md);
    padding: 14px 16px;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    outline: none;
    transition: border-color var(--cb-ds-t-fast), background var(--cb-ds-t-fast);
    min-height: 52px;
}

.cb-scanner-input::placeholder {
    color: rgba(255,255,255,0.6);
    font-weight: 400;
}

.cb-scanner-input:focus {
    background: rgba(255,255,255,0.25);
    border-color: rgba(255,255,255,0.8);
}

.cb-scanner-cam {
    width: 52px;
    height: 52px;
    border-radius: var(--cb-ds-r-md);
    background: rgba(255,255,255,0.2);
    border: 2px solid rgba(255,255,255,0.3);
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--cb-ds-t-fast);
}

.cb-scanner-cam:hover,
.cb-scanner-cam:focus {
    background: rgba(255,255,255,0.3);
}

.cb-scanner-hint {
    font-size: 12px;
    opacity: 0.85;
    display: flex;
    align-items: center;
    gap: var(--cb-ds-s2);
}

.cb-scanner-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: rgba(255,255,255,0.2);
    border-radius: var(--cb-ds-r-full);
    font-size: 11px;
    font-weight: 600;
}

/* --- Flash verde ao ler código com sucesso --- */
@keyframes cb-scan-flash {
    0%   { box-shadow: 0 0 0 0 rgba(22,163,74,0.7); }
    70%  { box-shadow: 0 0 0 16px rgba(22,163,74,0); }
    100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
}

.cb-scanner.is-success {
    animation: cb-scan-flash 0.6s ease-out;
}

.cb-scanner.is-error .cb-scanner-input {
    border-color: #FCA5A5;
    background: rgba(239,68,68,0.25);
}

/* ==========================================
   QR CAMERA MODAL (html5-qrcode)
   ========================================== */
.cb-qr-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.9);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--cb-ds-s4);
}

.cb-qr-modal[hidden] {
    display: none;
}

.cb-qr-viewport {
    width: min(100%, 420px);
    aspect-ratio: 1;
    border-radius: var(--cb-ds-r-lg);
    overflow: hidden;
    background: #000;
    position: relative;
    box-shadow: 0 0 0 4px var(--cb-ds-brand), 0 20px 60px rgba(0,0,0,0.5);
}

.cb-qr-viewport video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cb-qr-close {
    margin-top: var(--cb-ds-s4);
    background: #fff;
    color: var(--cb-ds-ink);
    border: none;
    padding: 12px 24px;
    border-radius: var(--cb-ds-r-md);
    font-weight: 600;
    cursor: pointer;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    gap: var(--cb-ds-s2);
}

.cb-qr-hint {
    color: #fff;
    margin-top: var(--cb-ds-s3);
    font-size: 14px;
    opacity: 0.9;
    text-align: center;
    max-width: 300px;
}

/* ==========================================
   ITEM CARD (foto gigante + info essencial)
   ========================================== */
.cb-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--cb-ds-s3);
}

@media (max-width: 575.98px) {
    .cb-items-grid {
        grid-template-columns: 1fr;
    }
}

.cb-item-card {
    background: #fff;
    border: 2px solid var(--cb-ds-line);
    border-radius: var(--cb-ds-r-md);
    padding: var(--cb-ds-s3);
    display: grid;
    grid-template-columns: 96px 1fr auto;
    gap: var(--cb-ds-s3);
    align-items: center;
    transition: border-color var(--cb-ds-t-fast), background var(--cb-ds-t-fast),
                transform var(--cb-ds-t-fast), box-shadow var(--cb-ds-t-fast);
    position: relative;
    cursor: pointer;
}

.cb-item-card:hover {
    box-shadow: var(--cb-ds-shadow-sm);
}

.cb-item-card.is-selected {
    border-color: var(--cb-ds-ok);
    background: var(--cb-ds-ok-bg);
}

.cb-item-card.is-locked {
    border-color: var(--cb-ds-locked);
    background: var(--cb-ds-locked-bg);
    cursor: not-allowed;
}

.cb-item-card.is-flash {
    animation: cb-scan-flash 0.6s ease-out;
    border-color: var(--cb-ds-ok);
}

.cb-item-card.is-dim {
    opacity: 0.55;
}

.cb-item-card.is-danger {
    border-color: var(--cb-ds-danger);
    background: var(--cb-ds-danger-bg);
}

.cb-item-card-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cb-item-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--cb-ds-ink);
    margin: 0;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.cb-item-card-meta {
    font-size: 12px;
    color: var(--cb-ds-ink-3);
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
}

.cb-item-card-sku {
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    background: var(--cb-ds-surface);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11px;
    color: var(--cb-ds-ink-2);
}

.cb-item-card-price {
    font-size: 16px;
    font-weight: 700;
    color: var(--cb-ds-ink);
    white-space: nowrap;
}

.cb-item-card-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.cb-item-card .lock-ribbon {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--cb-ds-locked);
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    box-shadow: var(--cb-ds-shadow-sm);
}

@media (max-width: 575.98px) {
    .cb-item-card {
        grid-template-columns: 72px 1fr auto;
        padding: var(--cb-ds-s2);
        gap: var(--cb-ds-s2);
    }
}

/* ==========================================
   PRODUCT PHOTO (aspect-square, nunca < 96px)
   ========================================== */
.cb-photo {
    aspect-ratio: 1;
    width: 96px;
    border-radius: var(--cb-ds-r-sm);
    overflow: hidden;
    background: var(--cb-ds-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}

.cb-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cb-photo-placeholder {
    color: var(--cb-ds-ink-3);
    font-size: 24px;
}

.cb-photo.size-sm  { width: 56px;  border-radius: 6px; }
.cb-photo.size-md  { width: 96px;  }
.cb-photo.size-lg  { width: 140px; }
.cb-photo.size-xl  { width: 200px; }

@media (max-width: 575.98px) {
    .cb-photo { width: 72px; }
    .cb-photo.size-lg { width: 100px; }
    .cb-photo.size-xl { width: 140px; }
}

/* ==========================================
   STATUS PILL (badges visuais com variantes)
   ========================================== */
.cb-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--cb-ds-r-full);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.cb-pill i { font-size: 12px; }

.cb-pill.ok       { background: var(--cb-ds-ok-bg);     color: var(--cb-ds-ok); }
.cb-pill.warn     { background: var(--cb-ds-warn-bg);   color: #92400E; }
.cb-pill.danger   { background: var(--cb-ds-danger-bg); color: var(--cb-ds-danger); }
.cb-pill.info     { background: var(--cb-ds-info-bg);   color: #0369A1; }
.cb-pill.brand    { background: var(--cb-ds-brand-light); color: var(--cb-ds-brand-dark); }
.cb-pill.neutral  { background: var(--cb-ds-line);      color: var(--cb-ds-ink-2); }
.cb-pill.locked   { background: var(--cb-ds-locked-bg); color: var(--cb-ds-locked); }

.cb-pill.size-lg {
    padding: 6px 14px;
    font-size: 13px;
}

/* ==========================================
   LIVE SUMMARY (card de resumo lateral)
   ========================================== */
.cb-summary {
    background: #fff;
    border: 1px solid var(--cb-ds-line);
    border-radius: var(--cb-ds-r-md);
    padding: var(--cb-ds-s4);
    display: flex;
    flex-direction: column;
    gap: var(--cb-ds-s3);
    box-shadow: var(--cb-ds-shadow-sm);
    position: sticky;
    top: var(--cb-ds-s4);
}

.cb-summary-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--cb-ds-ink-3);
    margin: 0;
    padding-bottom: var(--cb-ds-s2);
    border-bottom: 1px solid var(--cb-ds-line);
}

.cb-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cb-ds-s2);
    font-size: 14px;
    color: var(--cb-ds-ink-2);
}

.cb-summary-row .label { color: var(--cb-ds-ink-3); font-size: 13px; }
.cb-summary-row .value { font-weight: 600; color: var(--cb-ds-ink); }

.cb-summary-row.highlight .value { color: var(--cb-ds-ok); font-size: 18px; }
.cb-summary-row.danger .value    { color: var(--cb-ds-danger); }

.cb-summary-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-top: var(--cb-ds-s3);
    border-top: 1px solid var(--cb-ds-line);
    font-size: 15px;
    color: var(--cb-ds-ink-2);
    font-weight: 600;
}

.cb-summary-total .value {
    font-size: 28px;
    font-weight: 700;
    color: var(--cb-ds-ink);
}

.cb-summary-actions {
    display: flex;
    flex-direction: column;
    gap: var(--cb-ds-s2);
    margin-top: var(--cb-ds-s2);
}

/* ==========================================
   QUANTITY STEPPER (+ / -)
   ========================================== */
.cb-qty {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid var(--cb-ds-line);
    border-radius: var(--cb-ds-r-md);
    overflow: hidden;
    background: #fff;
}

.cb-qty button {
    background: #fff;
    border: none;
    width: 36px;
    height: 36px;
    font-size: 18px;
    color: var(--cb-ds-ink-2);
    cursor: pointer;
    transition: background var(--cb-ds-t-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cb-qty button:hover:not(:disabled) {
    background: var(--cb-ds-surface);
}

.cb-qty button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.cb-qty-value {
    min-width: 44px;
    text-align: center;
    font-weight: 600;
    font-size: 15px;
    color: var(--cb-ds-ink);
    padding: 0 var(--cb-ds-s2);
    user-select: none;
}

/* ==========================================
   PAYMENT METHOD GRID (PIX, crédito, débito)
   ========================================== */
.cb-pay-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--cb-ds-s2);
}

@media (max-width: 480px) {
    .cb-pay-grid { grid-template-columns: 1fr; }
}

.cb-pay-option {
    background: #fff;
    border: 2px solid var(--cb-ds-line);
    border-radius: var(--cb-ds-r-md);
    padding: var(--cb-ds-s3);
    cursor: pointer;
    transition: all var(--cb-ds-t-fast);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
    min-height: 84px;
    justify-content: center;
}

.cb-pay-option i {
    font-size: 22px;
    color: var(--cb-ds-ink-3);
}

.cb-pay-option-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--cb-ds-ink-2);
}

.cb-pay-option-sub {
    font-size: 11px;
    color: var(--cb-ds-ok);
    font-weight: 600;
}

.cb-pay-option:hover {
    border-color: var(--cb-ds-brand);
}

.cb-pay-option.is-selected {
    border-color: var(--cb-ds-brand);
    background: var(--cb-ds-brand-light);
}

.cb-pay-option.is-selected i,
.cb-pay-option.is-selected .cb-pay-option-label {
    color: var(--cb-ds-brand-dark);
}

/* ==========================================
   CLIENT CHIP (avatar + nome + CPF opcional)
   ========================================== */
.cb-client-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--cb-ds-s2);
    padding: 6px 12px 6px 6px;
    background: var(--cb-ds-surface);
    border: 1px solid var(--cb-ds-line);
    border-radius: var(--cb-ds-r-full);
    max-width: 100%;
}

.cb-client-chip .avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--cb-ds-brand);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cb-client-chip .nome {
    font-size: 13px;
    font-weight: 600;
    color: var(--cb-ds-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cb-client-chip .meta {
    font-size: 11px;
    color: var(--cb-ds-ink-3);
}

/* ==========================================
   EMPTY STATE
   ========================================== */
.cb-empty {
    text-align: center;
    padding: var(--cb-ds-s10) var(--cb-ds-s6);
    color: var(--cb-ds-ink-3);
}

.cb-empty i {
    font-size: 48px;
    color: var(--cb-ds-line);
    margin-bottom: var(--cb-ds-s3);
    display: block;
}

.cb-empty h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--cb-ds-ink-2);
    margin: 0 0 4px 0;
}

.cb-empty p {
    font-size: 14px;
    margin: 0 0 var(--cb-ds-s4) 0;
}

/* ==========================================
   BOTÕES EXTRAS (variantes)
   ========================================== */
.cb-btn-gigante {
    width: 100%;
    min-height: 56px;
    font-size: 16px;
    font-weight: 600;
    border-radius: var(--cb-ds-r-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cb-ds-s2);
    border: none;
    cursor: pointer;
    transition: transform var(--cb-ds-t-fast), box-shadow var(--cb-ds-t-fast);
}

.cb-btn-gigante:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--cb-ds-shadow-md);
}

.cb-btn-gigante:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.cb-btn-gigante.variant-primary {
    background: linear-gradient(135deg, var(--cb-ds-brand), var(--cb-ds-brand-dark));
    color: #fff;
    box-shadow: 0 4px 12px rgba(124,58,237,0.35);
}

.cb-btn-gigante.variant-success {
    background: linear-gradient(135deg, #22C55E, var(--cb-ds-ok));
    color: #fff;
    box-shadow: 0 4px 12px rgba(22,163,74,0.35);
}

.cb-btn-gigante.variant-ghost {
    background: var(--cb-ds-surface);
    color: var(--cb-ds-ink-2);
    border: 1.5px solid var(--cb-ds-line);
    box-shadow: none;
}

/* ==========================================
   TOAST FEEDBACK (scanner success/error)
   ========================================== */
.cb-toast-stack {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    gap: var(--cb-ds-s2);
    max-width: 320px;
}

.cb-toast {
    background: #fff;
    border-left: 4px solid var(--cb-ds-ok);
    padding: var(--cb-ds-s3);
    border-radius: var(--cb-ds-r-sm);
    box-shadow: var(--cb-ds-shadow-md);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: var(--cb-ds-s2);
    animation: cb-toast-in 0.25s ease-out;
}

.cb-toast.variant-danger  { border-left-color: var(--cb-ds-danger); }
.cb-toast.variant-warn    { border-left-color: var(--cb-ds-warn); }
.cb-toast.variant-info    { border-left-color: var(--cb-ds-info); }

.cb-toast i {
    font-size: 18px;
    color: var(--cb-ds-ok);
    flex-shrink: 0;
}

.cb-toast.variant-danger i { color: var(--cb-ds-danger); }
.cb-toast.variant-warn i   { color: var(--cb-ds-warn); }
.cb-toast.variant-info i   { color: var(--cb-ds-info); }

@keyframes cb-toast-in {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

@media (max-width: 575.98px) {
    .cb-toast-stack {
        left: 12px;
        right: 12px;
        top: 70px;
        max-width: none;
    }
}

/* ==========================================
   MOBILE CHECKOUT (tela cliente — max 420px)
   ========================================== */
.cb-mobile-checkout {
    max-width: 420px;
    margin: 0 auto;
    padding: var(--cb-ds-s4);
    display: flex;
    flex-direction: column;
    gap: var(--cb-ds-s4);
    min-height: 100vh;
    background: var(--cb-ds-surface);
}

.cb-mobile-checkout .cb-item-card {
    grid-template-columns: 80px 1fr auto;
}

.cb-mobile-checkout .cb-photo {
    width: 80px;
}

.cb-mobile-checkout .cb-summary {
    position: static;
    margin-bottom: 80px; /* espaço pro botão fixo */
}

.cb-mobile-checkout-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--cb-ds-s3);
    background: #fff;
    border-top: 1px solid var(--cb-ds-line);
    z-index: 100;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.05);
}

.cb-mobile-checkout-cta .cb-btn-gigante {
    max-width: 420px;
    margin: 0 auto;
    display: flex;
}

.cb-mobile-success {
    text-align: center;
    padding: var(--cb-ds-s8) var(--cb-ds-s4);
    background: #fff;
    border-radius: var(--cb-ds-r-lg);
    box-shadow: var(--cb-ds-shadow-md);
}

.cb-mobile-success .icon-check {
    width: 72px;
    height: 72px;
    background: var(--cb-ds-ok);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    margin: 0 auto var(--cb-ds-s4);
    animation: cb-scan-flash 0.8s ease-out;
}

/* ==========================================
   UTILITIES
   ========================================== */
.cb-ds-stack     { display: flex; flex-direction: column; gap: var(--cb-ds-s3); }
.cb-ds-row       { display: flex; align-items: center; gap: var(--cb-ds-s2); flex-wrap: wrap; }
.cb-ds-row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--cb-ds-s2); }
.cb-ds-muted     { color: var(--cb-ds-ink-3); }
.cb-ds-bold      { font-weight: 600; }
.cb-ds-mono      { font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 13px; }
.cb-ds-hidden-mobile { }
.cb-ds-only-mobile   { display: none; }

@media (max-width: 767.98px) {
    .cb-ds-hidden-mobile { display: none !important; }
    .cb-ds-only-mobile   { display: block; }
}

/* ==========================================
   DARK MODE (integra com app.css existente)
   ========================================== */
[data-cb-tema="dark"] {
    --cb-ds-ink: #E2E8F0;
    --cb-ds-ink-2: #CBD5E1;
    --cb-ds-ink-3: #94A3B8;
    --cb-ds-line: #334155;
    --cb-ds-surface: #1E293B;
    --cb-ds-white: #0F172A;
}

[data-cb-tema="dark"] .cb-item-card,
[data-cb-tema="dark"] .cb-summary,
[data-cb-tema="dark"] .cb-qty,
[data-cb-tema="dark"] .cb-pay-option,
[data-cb-tema="dark"] .cb-toast,
[data-cb-tema="dark"] .cb-client-chip {
    background: #1E293B;
}

[data-cb-tema="dark"] .cb-qty button {
    background: #1E293B;
    color: var(--cb-ds-ink-2);
}

[data-cb-tema="dark"] .cb-mobile-checkout-cta {
    background: #1E293B;
}

/* =====================================================
   TABELAS RESPONSIVAS (desktop = tabela, mobile = cards)
   =====================================================

   HTML esperado:

   <table class="cb-table">
     <thead>
       <tr>
         <th>ID</th><th>Cliente</th><th>Status</th><th>Valor</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td data-label="ID">18</td>
         <td data-label="Cliente">Adryan</td>
         <td data-label="Status"><span class="badge bg-success">Pago</span></td>
         <td data-label="Valor">R$ 14,90</td>
       </tr>
     </tbody>
   </table>

   Em mobile (<768px), cada <tr> vira um card e cada <td> mostra o label
   à esquerda (via data-label) e o valor à direita.
*/

.cb-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--cb-ds-bg-0, #fff);
}

    .cb-table thead th {
        background: var(--cb-ds-bg-2, #F1F5F9);
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--cb-ds-ink-2, #475569);
        padding: 12px 14px;
        border-bottom: 1px solid var(--cb-ds-border, #E2E8F0);
        text-align: left;
        white-space: nowrap;
    }

    .cb-table tbody td {
        padding: 14px;
        border-bottom: 1px solid var(--cb-ds-border, #E2E8F0);
        font-size: 14px;
        color: var(--cb-ds-ink-1, #0F172A);
        vertical-align: middle;
    }

    .cb-table tbody tr:last-child td {
        border-bottom: none;
    }

    .cb-table tbody tr:hover {
        background: var(--cb-ds-bg-1, #F8FAFC);
    }

    .cb-table .cb-table-actions {
        text-align: right;
        white-space: nowrap;
    }

/* Wrapper para permitir scroll horizontal quando fizer sentido */
.cb-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ----- MOBILE/TABLET: tabela vira cards (abaixo de 992px) ----- */
@media (max-width: 991.98px) {

    /* Força layout de bloco — precisa vencer o display:table padrão */
    .cb-table,
    .cb-table thead,
    .cb-table tbody,
    .cb-table tfoot,
    .cb-table tr,
    .cb-table th,
    .cb-table td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .cb-table-wrap {
        overflow-x: hidden !important;
    }

    .cb-table thead {
        /* Esconde cabeçalho; cada célula mostra seu label via data-label */
        position: absolute !important;
        left: -9999px !important;
        top: -9999px !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    .cb-table tbody tr {
        background: var(--cb-ds-bg-0, #fff);
        border: 1px solid var(--cb-ds-border, #E2E8F0);
        border-radius: 12px;
        padding: 4px 0;
        margin-bottom: 12px;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
        overflow: hidden;
    }

        .cb-table tbody tr:hover {
            background: var(--cb-ds-bg-0, #fff);
        }

    .cb-table tbody td {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding: 10px 14px;
        border-bottom: 1px solid var(--cb-ds-border, #E2E8F0);
        font-size: 14px;
        text-align: right;
        min-height: 44px;
        white-space: normal;
        word-break: break-word;
    }

        .cb-table tbody td:last-child {
            border-bottom: none;
        }

        .cb-table tbody td::before {
            content: attr(data-label);
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: var(--cb-ds-ink-2, #475569);
            flex-shrink: 0;
            text-align: left;
        }

        /* Se a célula não tem data-label, empilha e ocupa largura total */
        .cb-table tbody td:not([data-label]) {
            justify-content: flex-start;
        }

            .cb-table tbody td:not([data-label])::before {
                content: none;
            }

    .cb-table .cb-table-actions {
        justify-content: flex-end !important;
        text-align: right;
        flex-wrap: wrap;
        gap: 6px;
    }

        .cb-table .cb-table-actions .btn-group,
        .cb-table .cb-table-actions > div {
            flex-wrap: wrap;
            justify-content: flex-end;
        }
}