/* ============================================================================
   APP SKIN · skin.css   v3 (rede de agentes: tipografia + cor + ritmo + parity)
   Re-skin componente a componente, alinhado ao app (Manrope, paleta quente,
   pesos leves). Estrutura de varejo_moderno.css fica intacta; aqui só "pele".
   Acento (var(--cor-tema)) só em AÇÃO: categoria ativa, botão +, CTA, sacola,
   nav, foco, "hoje". Preços e títulos = cinza-escuro.
   Referência viva: tastti-app/src/screens/{LojaScreen,ProdutoScreen}.js
   ============================================================================ */

/* =========================== CABEÇALHO DA LOJA =========================== */
.store-info-card { border-radius: 0 0 var(--app-r-lg) var(--app-r-lg) !important; box-shadow: var(--app-shadow) !important; }
.store-top { border-bottom: 1px solid var(--app-line) !important; }

.store-logo { border-radius: 14px !important; box-shadow: 0 4px 12px -6px rgba(var(--cor-tema-rgb), .35), 0 0 0 1px var(--app-border) !important; }
.store-logo img { border-radius: 11px !important; }

/* App: nome da loja 14/500. Aqui 15/600 — leve, hierarquia por peso+cor (era 17/700). */
.store-name { font-size: 15px !important; font-weight: 600 !important; color: var(--app-strong) !important; letter-spacing: -0.005em !important; }
.store-subtitulo { color: var(--app-muted) !important; font-weight: 500 !important; font-size: 12.5px !important; }
.store-subtitulo .sep { color: var(--app-line-2) !important; }

.status-inline { font-weight: 600 !important; }
.status-inline.open { color: var(--app-green) !important; }
.status-inline.closed { color: var(--app-muted) !important; }
.status-inline .pulse-dot, .store-badge-status .pulse-dot { background: #22c55e !important; }

/* Nota/estrela — 600, sem virar destaque "preto" */
.store-rating i { color: var(--app-star) !important; }
.store-rating #store-nota { color: var(--app-strong) !important; font-weight: 600 !important; font-size: 14px !important; }
.store-rating .rating-count { color: var(--app-muted) !important; font-weight: 500 !important; }

/* "Aberto/Fechado" = label leve (não pílula cheia gritante) */
.store-badge-status { font-weight: 600 !important; letter-spacing: 0 !important; padding: 2px 0 !important; }
.store-badge-status.open { background: transparent !important; color: var(--app-green) !important; }
.store-badge-status.closed { background: transparent !important; color: var(--app-muted) !important; }

/* Grid Entrega | Retirada | Mínimo */
.store-grid-col + .store-grid-col::before { background: var(--app-line) !important; }
.store-grid-col i { color: var(--app-muted) !important; }
.store-grid-col .valor { color: var(--app-soft) !important; font-weight: 600 !important; }
.store-grid-col .valor .sep { color: var(--app-line-2) !important; }
.store-grid-col .valor .destaque { color: var(--app-strong) !important; font-weight: 700 !important; }
.store-grid-col .valor .text-green-600 { color: var(--app-green) !important; }

/* =========================== BUSCA (campo) =========================== */
.search-input { border: 1px solid var(--app-border) !important; border-radius: var(--app-r-md) !important; color: var(--app-text) !important; font-weight: 500 !important; box-shadow: var(--app-shadow-sm) !important; }
.search-input::placeholder { color: var(--app-muted) !important; font-weight: 500 !important; }
.search-input:focus { border-color: var(--app-brand) !important; box-shadow: 0 0 0 3px rgba(var(--cor-tema-rgb), .12) !important; }

/* =========================== CATEGORIAS (chips) =========================== */
.btn-categoria { color: var(--app-muted) !important; font-weight: 500 !important; font-size: 13px !important; border: 1px solid transparent !important; }
.btn-categoria:hover { color: var(--app-text) !important; }
.btn-categoria.active { background: var(--cor-tema) !important; color: var(--cor-botao-texto, #fff) !important; font-weight: 600 !important; box-shadow: 0 4px 12px -5px rgba(var(--cor-tema-rgb), .35) !important; transform: none !important; }
.btn-busca-icon { color: var(--app-muted) !important; }
.btn-busca-icon:hover { color: var(--cor-tema) !important; background: var(--app-fill) !important; }

/* =========================== TÍTULOS DE SEÇÃO =========================== */
/* App: título de seção 13/600 textSoft. Respiro maior antes do 1º card. */
.section-heading { font-size: 13px !important; font-weight: 600 !important; color: var(--app-soft) !important; letter-spacing: -0.005em !important; margin: 18px 0 12px !important; }
.section-heading .accent { width: 5px !important; height: 5px !important; background: var(--cor-tema) !important; }

/* =========================== CARDS DE PRODUTO =========================== */
/* App: linha de item com respiro (pad ~16) e divisória visível (line #d4d7de). */
.product-card { padding: 16px 8px !important; border-bottom: 1px solid var(--app-line-2) !important; }
.product-card:hover { background: #fafafb !important; }
.product-card:active { background: var(--app-fill) !important; }
.product-card .image-container { width: 80px !important; height: 80px !important; border-radius: var(--app-r-sm) !important; background: var(--app-fill) !important; }

/* App: nome do item 13/400~500, descrição 10/muted, preço 11/400 (NUNCA acento). */
.product-card .nome { font-size: 13.5px !important; font-weight: 500 !important; color: var(--app-strong) !important; }
.product-card .desc { font-size: 11px !important; font-weight: 400 !important; color: var(--app-muted) !important; line-height: 1.35 !important; }
.product-card .preco-atual,
.product-card .preco-atual small { color: var(--app-text) !important; }   /* "A partir de" + valor: cinza, não laranja */
.product-card .preco-atual { font-weight: 600 !important; font-size: 12.5px !important; }
.product-card .preco-atual small { font-weight: 600 !important; }
.product-card .preco-antigo { color: var(--app-muted) !important; font-weight: 500 !important; }
.product-card .btn-add { border-radius: 12px !important; box-shadow: 0 4px 10px -4px rgba(var(--cor-tema-rgb), .45) !important; }

/* Tags/badges de canto */
.tag-faixa, .badge-corner { font-weight: 700 !important; letter-spacing: 0.04em !important; border-radius: 7px !important; box-shadow: 0 2px 6px -2px rgba(28,28,46,.18) !important; }
.tag-faixa.tema, .badge-corner.tema { background: var(--cor-tema) !important; }
.tag-faixa.novo, .badge-corner.new { background: #2563eb !important; }
.tag-faixa.top,  .badge-corner.top { background: #d97706 !important; }
.tag-faixa.oferta, .badge-corner.discount { background: var(--app-red) !important; }
.tag-promo-foto { font-weight: 700 !important; letter-spacing: 0.06em !important; }
.sold-out-overlay { border-radius: var(--app-r-sm) !important; font-weight: 700 !important; letter-spacing: 0.08em !important; }

/* =========================== BARRA DO CARRINHO =========================== */
.cart-bar-inner { box-shadow: 0 -6px 18px -10px rgba(28,28,46,.18) !important; }
.cart-bar-label { font-weight: 600 !important; }
.cart-bar-total-v { font-weight: 700 !important; }
.cart-badge { font-weight: 700 !important; background: rgba(255,255,255,.24) !important; }

/* =========================== BOTTOM NAV =========================== */
.bottom-nav { border-top: 1px solid var(--app-border) !important; box-shadow: 0 -2px 14px -10px rgba(28,28,46,.12) !important; }
.bottom-nav-item { color: var(--app-muted) !important; font-weight: 500 !important; }
.bottom-nav-item.active { color: var(--cor-tema) !important; font-weight: 600 !important; }
.bottom-nav-dot { background: var(--app-green) !important; }

/* =========================== OVERLAY DE BUSCA =========================== */
.busca-overlay { background: var(--app-card) !important; }
.busca-overlay-header { border-bottom: 1px solid var(--app-line) !important; }
.busca-overlay-back { background: var(--app-fill) !important; color: var(--app-soft) !important; }
.busca-overlay-field { background: var(--app-fill) !important; border-radius: 14px !important; }
.busca-overlay-field:focus-within { background: var(--app-card) !important; border-color: var(--cor-tema) !important; box-shadow: 0 0 0 3px rgba(var(--cor-tema-rgb), .12) !important; }
.busca-overlay-field input { color: var(--app-text) !important; font-weight: 500 !important; }
.busca-overlay-field input::placeholder { color: var(--app-muted) !important; }
#busca-overlay-limpar { background: var(--app-faint) !important; }
.busca-overlay-body { background: var(--app-bg) !important; }
.busca-result-card { border: 1px solid var(--app-border) !important; border-radius: var(--app-r-md) !important; }
.busca-result-card .img { background-color: var(--app-fill) !important; }
.busca-result-card .nome { font-weight: 600 !important; color: var(--app-strong) !important; }
.busca-result-card .desc { color: var(--app-muted) !important; }
.busca-result-card .preco { color: var(--app-text) !important; font-weight: 700 !important; }

/* =========================== SKELETON =========================== */
.skeleton-card { border: 1px solid var(--app-line) !important; border-radius: var(--app-r-md) !important; box-shadow: var(--app-shadow-sm) !important; }
.sk-shimmer { background: linear-gradient(90deg, #eeeef1 0%, #e3e3e8 50%, #eeeef1 100%) !important; background-size: 200% 100% !important; }

/* =========================== DESTAQUES (carrossel) =========================== */
.destaque-card { border: 1px solid var(--app-border) !important; border-radius: var(--app-r-md) !important; box-shadow: var(--app-shadow-sm) !important; }
.destaque-card .img { background-color: var(--app-fill) !important; }
.destaque-card .nome { font-weight: 600 !important; color: var(--app-strong) !important; }
.destaque-card .preco { color: var(--app-text) !important; font-weight: 700 !important; }
.destaque-card .btn-mini { border-radius: 9px !important; }

/* =========================== FILTROS RÁPIDOS (chips) =========================== */
.chip-filtro { background: var(--app-card) !important; border: 1px solid var(--app-border) !important; color: var(--app-soft) !important; font-weight: 500 !important; }
.chip-filtro i { color: var(--app-muted) !important; }
.chip-filtro.active { background: var(--app-brand-l) !important; border-color: var(--cor-tema) !important; color: var(--cor-tema) !important; }
.chip-filtro.active i { color: var(--cor-tema) !important; }

/* =========================== PERFIL/HEADER ICON =========================== */
.btn-perfil, .btn-header-icon { color: var(--app-strong) !important; border: 1px solid var(--app-border) !important; box-shadow: var(--app-shadow) !important; }
.btn-perfil .dot, .btn-header-icon .dot { background: var(--app-green) !important; }
.store-action-btn { background: var(--app-fill) !important; border: 1px solid var(--app-border) !important; color: var(--app-soft) !important; font-weight: 600 !important; border-radius: var(--app-r-sm) !important; }
.store-action-btn:hover { background: var(--app-border) !important; color: var(--app-strong) !important; }

/* =========================== AVALIAÇÕES =========================== */
.rating-stars i { color: var(--app-border) !important; }
.rating-stars i.active { color: var(--app-star) !important; }
.review-item { border: 1px solid var(--app-line) !important; border-radius: var(--app-r-md) !important; }
.review-item:last-child { margin-bottom: 24px !important; }
.review-item .nome { font-weight: 600 !important; color: var(--app-strong) !important; }
.review-item .data { color: var(--app-muted) !important; font-weight: 500 !important; }
.review-item .stars { color: var(--app-star) !important; }
.review-item .texto { color: var(--app-soft) !important; }
.avaliacoes-resumo { border: 1px solid var(--app-border) !important; border-radius: var(--app-r-md) !important; box-shadow: var(--app-shadow-sm) !important; margin-bottom: 14px !important; }
.avaliacoes-resumo .resumo-nota { background: rgba(245,158,11,.10) !important; border-radius: 12px !important; }
.avaliacoes-resumo .resumo-nota .num { font-weight: 600 !important; color: var(--app-star) !important; }
.avaliacoes-resumo .resumo-nota i { color: var(--app-star) !important; }
.avaliacoes-resumo .resumo-info .total { font-weight: 600 !important; color: var(--app-strong) !important; }
.avaliacoes-resumo .resumo-info .legenda { color: var(--app-muted) !important; font-weight: 500 !important; }

/* =========================== ABAS (Cardápio/Info/Avaliações) =========================== */
.store-tabs-sticky { background: rgba(245,245,247,.86) !important; backdrop-filter: saturate(140%) blur(8px); -webkit-backdrop-filter: saturate(140%) blur(8px); }
.store-tabs { background: var(--app-fill) !important; border-radius: 999px !important; padding: 3px !important; }
.store-tab { color: var(--app-muted) !important; font-weight: 500 !important; border-radius: 999px !important; }
.store-tab:hover { color: var(--app-soft) !important; }
.store-tab.active { background: var(--app-card) !important; color: var(--cor-tema) !important; font-weight: 600 !important; box-shadow: var(--app-shadow-sm) !important; }

/* =========================== TAB INFORMAÇÕES =========================== */
.info-block { border: 1px solid var(--app-line) !important; border-radius: var(--app-r-md) !important; margin-bottom: 12px !important; }
.info-block:last-child { margin-bottom: 24px !important; }
.info-heading { color: var(--app-muted) !important; font-weight: 600 !important; letter-spacing: 0.04em !important; }
.horario-row { background: var(--app-fill) !important; margin-bottom: 4px !important; border-radius: 8px !important; }
.horario-row.hoje { background: rgba(var(--cor-tema-rgb), .06) !important; border-color: rgba(var(--cor-tema-rgb), .22) !important; }
.horario-row .dia { color: var(--app-soft) !important; font-weight: 600 !important; }
.horario-row.hoje .dia { color: var(--cor-tema) !important; }
.horario-row .hora { color: var(--app-text) !important; font-weight: 600 !important; }
.horario-row .hora.fechado { color: var(--app-muted) !important; font-weight: 500 !important; }   /* fechado discreto, não vermelho gritante */
.horario-row .badge-hoje { background: var(--cor-tema) !important; font-weight: 700 !important; font-size: 9.5px !important; letter-spacing: 0.04em !important; padding: 2px 6px !important; border-radius: 6px !important; }
.info-tile { background: var(--app-fill) !important; border-radius: 12px !important; }
.info-tile i { color: var(--app-soft) !important; }   /* ícone = informação, não ação → cinza */
.info-tile .valor { font-weight: 600 !important; color: var(--app-strong) !important; }
.info-tile .label { color: var(--app-muted) !important; font-weight: 500 !important; }
.info-tile:last-child:nth-child(odd) { grid-column: 1 / -1 !important; }   /* tile órfão ocupa a linha */

/* =========================== MODAL DE PRODUTO (pp-*) =========================== */
.pp-hero-overlay { background: linear-gradient(180deg, rgba(0,0,0,.16) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0) 72%, rgba(255,255,255,.96) 100%) !important; }
/* App: botão fechar = círculo branco 38px + sombra suave, ícone text */
.pp-btn-voltar { width: 38px !important; height: 38px !important; background: #fff !important; color: var(--app-text) !important; box-shadow: var(--app-shadow) !important; }
.pp-badge-promo { background: var(--cor-tema) !important; font-weight: 700 !important; box-shadow: 0 6px 16px -8px rgba(var(--cor-tema-rgb), .5) !important; }

.pp-scroll { border-radius: var(--app-r-lg) var(--app-r-lg) 0 0 !important; }
.pp-info { border-bottom: 1px solid var(--app-line) !important; }
/* App: nome domina (15/600), preço secundário (13/600), nunca 700/laranja */
.pp-nome { font-size: 15px !important; font-weight: 600 !important; color: var(--app-strong) !important; }
.pp-preco { font-size: 13px !important; font-weight: 600 !important; color: var(--app-text) !important; }
.pp-preco-antigo { color: var(--app-muted) !important; font-weight: 500 !important; }
.pp-descricao { color: var(--app-soft) !important; }
.pp-meta-chip { background: var(--app-fill) !important; color: var(--app-soft) !important; font-weight: 500 !important; border-radius: 999px !important; }

/* Grupos de opções — separador limpo de 6px (= bandaModal do app), respiro no 1º */
.pp-grupo { border-bottom: 6px solid var(--app-bg) !important; }
.pp-grupo:last-child { border-bottom: none !important; }
.pp-grupo:first-child { padding-top: 16px !important; }
.pp-grupo-titulo { font-size: 14px !important; font-weight: 600 !important; color: var(--app-strong) !important; }
.pp-grupo-subtitulo { color: var(--app-muted) !important; }
/* App tagReq: fundo #eef0f3 + texto muted, raio sm, peso 600, sem contorno */
.pp-badge-obrig { background: #eef0f3 !important; color: var(--app-muted) !important; border: 0 !important; border-radius: var(--app-r-sm) !important; font-weight: 600 !important; letter-spacing: normal !important; text-transform: none !important; }
.pp-gratis { color: var(--app-green) !important; font-weight: 700 !important; }

/* OPÇÕES — no app são LINHAS PLANAS com hairline (sem moldura/fundo/raio).
   O estado selecionado vive SÓ no controle (radio/check vira sólido brand). */
.pp-item-radio, .pp-item-stepper, .pp-item-check {
  border: 0 !important; border-radius: 0 !important; background: transparent !important;
  border-bottom: 1px solid var(--app-line) !important;
  padding: 12px 2px !important;
}
.pp-item-radio:hover, .pp-item-check:hover { background: transparent !important; border-color: transparent transparent var(--app-line) transparent !important; }
.pp-item-radio:has(input:checked), .pp-item-stepper.is-active, .pp-item-check:has(input:checked) { background: transparent !important; }
.pp-item-nome { color: var(--app-soft) !important; font-weight: 500 !important; }   /* app: opcaoNome 13/textSoft */
.pp-item-preco { color: var(--app-muted) !important; font-weight: 500 !important; }

/* Radio = círculo 22px; selecionado = SÓLIDO brand (sem dot interno, como o app) */
.pp-radio-dot { width: 22px !important; height: 22px !important; border: 2px solid var(--app-border) !important; }
.pp-item-radio input:checked ~ .pp-radio-dot { background: var(--cor-tema) !important; border-color: var(--cor-tema) !important; }
.pp-radio-dot { position: relative !important; }
/* selecionado NÃO é um blob chapado: tem marca branca dentro (igual ao app) */
/* escolha única (radio) → ponto branco */
.pp-item-radio input[type="radio"]:checked ~ .pp-radio-dot::after {
  content: '' !important; position: absolute !important; top: 50% !important; left: 50% !important;
  width: 8px !important; height: 8px !important; border-radius: 999px !important;
  background: #fff !important; transform: translate(-50%, -50%) !important; display: block !important;
}
/* vários sabores (checkbox) → check branco */
.pp-item-radio input[type="checkbox"]:checked ~ .pp-radio-dot::after {
  content: '' !important; position: absolute !important; top: 44% !important; left: 50% !important;
  width: 5px !important; height: 9px !important; background: transparent !important;
  border: solid #fff !important; border-width: 0 2px 2px 0 !important; border-radius: 0 !important;
  transform: translate(-50%, -50%) rotate(45deg) !important; display: block !important;
}
/* Check = quadrado 6px; selecionado sólido brand */
.pp-check-box { width: 22px !important; height: 22px !important; border: 2px solid var(--app-border) !important; border-radius: 6px !important; }
.pp-item-check input:checked ~ .pp-check-box { background: var(--cor-tema) !important; border-color: var(--cor-tema) !important; }

/* Stepper = UM pill contínuo (botões sem borda própria) */
.pp-stepper { border: 1px solid var(--app-border) !important; border-radius: 999px !important; }
.pp-stepper button { border: 0 !important; color: var(--app-soft) !important; }
.pp-stepper button:hover { color: var(--cor-tema) !important; }
.pp-stepper-qtd { color: var(--app-strong) !important; font-weight: 700 !important; }

/* Chips de adicionais — pílula clara; acento só no ativo */
.pp-chip { background: var(--app-fill) !important; border: 1px solid transparent !important; color: var(--app-soft) !important; font-weight: 500 !important; margin: 0 6px 6px 0 !important; }
.pp-chip:hover { background: var(--app-border) !important; }
.pp-chip.is-on { background: var(--app-brand-l) !important; border-color: var(--cor-tema) !important; color: var(--cor-tema) !important; }
.pp-meta-chip { margin: 0 6px 6px 0 !important; }

/* Observações */
.pp-textarea-wrap textarea { background: var(--app-fill) !important; border: 1.5px solid var(--app-border) !important; color: var(--app-text) !important; border-radius: 12px !important; }
.pp-textarea-wrap textarea:focus { border-color: var(--cor-tema) !important; background: var(--app-card) !important; }
.pp-obs-contador { color: var(--app-muted) !important; }

/* Grupo Quantidade — separador como os outros grupos */
.pp-grupo-qtd { border-top: 1px solid var(--app-line) !important; padding-bottom: 18px !important; }

/* Rodapé do modal + CTA (app: addBtn raio 16, altura 48, total solto sem cápsula) */
.pp-footer { border-top: 1px solid var(--app-line) !important; box-shadow: 0 -6px 18px -10px rgba(28,28,46,.10) !important; }
.pp-resumo-linha { color: var(--app-soft) !important; font-weight: 500 !important; }
.pp-resumo-linha.pp-resumo-total { color: var(--app-strong) !important; font-weight: 600 !important; }
.pp-cta { border-radius: var(--app-r-md) !important; height: 48px !important; font-weight: 700 !important; box-shadow: 0 8px 18px -10px rgba(var(--cor-tema-rgb), .5) !important; }
.pp-cta-preco { background: transparent !important; padding: 0 !important; font-weight: 700 !important; }

/* =========================== BOTÕES DE AÇÃO (cor da loja) =========================== */
/* go-live: o bloco inline antigo sai; o skin garante a cor do botão finalizar */
#btn-enviar-pedido, .bg-\[var\(--cor-tema\)\] {
  background-color: var(--cor-tema) !important;
  color: var(--cor-botao-texto, #fff) !important;
}

/* =========================== RODAPÉ TASTTI =========================== */
.cd-footer-txt { color: var(--app-muted) !important; }

/* =========================== PIZZA MEIA-A-MEIA =========================== */
.pz-secao { color: var(--app-muted) !important; font-weight: 700 !important; letter-spacing: 0.3px !important; }
.pz-sabor-desc { color: var(--app-muted) !important; font-weight: 400 !important; }
.pz-aviso { background: var(--app-fill) !important; color: var(--app-soft) !important; border-radius: var(--app-r-sm) !important; }
.pz-aviso i { color: var(--app-muted) !important; }

/* ============================================================================
   CHECKOUT (sacola + entrega + pagamento + endereço) — rede de 4 agentes
   Mesma disciplina do drawer: acento só em AÇÃO, pesos leves, bordas finas,
   radio sólido, raios/sombra do app. Tudo override (markup Tailwind intacto).
   ============================================================================ */

/* ÍCONES decorativos de cabeçalho de seção → cinza (não laranja) */
#modal-checkout .uppercase > i.fa-solid { color: var(--app-muted) !important; }

/* RÓTULOS de seção (uppercase): peso 600, muted, menos tracking */
#modal-checkout .uppercase.tracking-widest,
#modal-checkout h3.uppercase,
#modal-editar-endereco .uppercase.tracking-widest {
  font-weight: 600 !important; color: var(--app-muted) !important;
  letter-spacing: .04em !important; font-size: 11px !important;
}

/* TÍTULOS dos modais: 16/600 strong; subtítulo muted 600 */
#modal-checkout h2, #modal-editar-endereco h2, #modal-mapa h2 {
  font-weight: 600 !important; font-size: 16px !important; color: var(--app-strong) !important;
}
#titulo-modal-checkout + p, #modal-editar-endereco h2 + p, #modal-mapa h2 + p {
  font-weight: 600 !important; color: var(--app-muted) !important;
}

/* NOMES de item/opção em font-black → 600 (700 só em botão) */
#modal-checkout .opt-pagamento .font-black,
#modal-checkout .opt-cartao, #modal-checkout .opt-troco,
#btn_tipo_retirada .font-black, #btn_tipo_delivery .font-black,
#lista-itens-checkout .font-black,
#modal-checkout span.font-black,
#modal-checkout button.border-dashed { font-weight: 600 !important; }

/* LINKS de ação inline (Trocar/Adicionar/Remover) → 600 */
#modal-checkout span.font-black.text-\[var\(--cor-tema\)\],
#modal-checkout button.font-black.text-\[var\(--cor-tema\)\] { font-weight: 600 !important; }

/* BADGE "1x" do item */
#lista-itens-checkout .bg-\[var\(--cor-tema\)\]\/10 { font-weight: 600 !important; border-radius: 6px !important; }

/* TOTAL: texto escuro (fiel ao app — linhaBold usa colors.text, não acento) */
#modal-total-valor { font-size: 17px !important; font-weight: 700 !important; letter-spacing: -.01em !important; color: var(--app-strong) !important; }

/* botão "Adicionar mais itens" (dashed): hairline do app */
#modal-checkout button.border-dashed { border-color: var(--app-border) !important; font-weight: 600 !important; }

/* ====== COMPONENTES FIÉIS AO APP (CarrinhoScreen): segmento + linhas planas ====== */
/* rótulo de seção (entrega/pagamento novos) */
.chk-secao { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; color: var(--app-muted); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 12px; }
.chk-secao i { color: var(--app-muted); }

/* Entrega = toggle SEGMENTADO (2 botões lado a lado) */
.chk-seg-wrap { display: flex; gap: 8px; }
.chk-seg { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; border-radius: var(--app-r-md); border: 1px solid var(--app-border); background: var(--app-card); color: var(--app-muted); font-weight: 600; font-size: 13px; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.chk-seg i { font-size: 14px; }
.chk-seg.is-on { background: var(--cor-tema); border-color: var(--cor-tema); color: #fff; }

/* Endereço = linha plana tocável (ícone + resumo + chevron) */
.chk-endereco-area { margin-top: 12px; }
.chk-endereco-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 2px; background: transparent; border: 0; text-align: left; cursor: pointer; }
.chk-endereco-ico { width: 36px; height: 36px; border-radius: var(--app-r-sm); background: var(--app-brand-l); color: var(--cor-tema); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.chk-endereco-main { flex: 1; min-width: 0; }
.chk-endereco-rua { display: block; font-size: 13px; font-weight: 600; color: var(--app-strong); }
.chk-endereco-sub { display: block; font-size: 11px; color: var(--app-muted); margin-top: 1px; }
.chk-endereco-main-vazio, #btn_informar_endereco_texto { font-size: 13px; font-weight: 600; color: var(--cor-tema); }
.chk-endereco-alterar { font-size: 11px; font-weight: 600; color: var(--cor-tema); flex-shrink: 0; }
.chk-endereco-chev { color: var(--app-muted); font-size: 13px; flex-shrink: 0; }
.chk-taxa-erro { font-size: 11px; font-weight: 600; color: var(--app-red); margin-top: 8px; padding-left: 2px; }

/* Pagamento = LINHAS PLANAS: ícone-box + nome/desc + rádio à DIREITA */
.chk-pag-grupo { display: flex; flex-direction: column; }
.chk-pag-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 2px; background: transparent; border: 0; border-top: 1px solid var(--app-line); text-align: left; cursor: pointer; }
.chk-pag-row:first-child { border-top: 0; }
.chk-pag-ico { width: 34px; height: 34px; border-radius: var(--app-r-sm); background: var(--app-fill); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 15px; }
.chk-pag-main { flex: 1; min-width: 0; }
.chk-pag-nome { display: block; font-size: 13px; font-weight: 600; color: var(--app-strong); }
.chk-pag-desc { display: block; font-size: 11px; color: var(--app-muted); margin-top: 1px; }
.opt-pagamento.is-on .chk-pag-desc { color: var(--cor-tema); font-weight: 600; }
.chk-pag-radio { width: 20px; height: 20px; border-radius: 999px; border: 2px solid var(--app-border); flex-shrink: 0; position: relative; transition: border-color .15s; }
.opt-pagamento.is-on .chk-pag-radio { border-color: var(--cor-tema); }
.opt-pagamento.is-on .chk-pag-radio::after { content: ''; position: absolute; inset: 3px; border-radius: 999px; background: var(--cor-tema); }

/* Sub-painéis (tipo de cartão / troco) */
.chk-sub { padding: 4px 0 10px 46px; }
.chk-sub-label { font-size: 10px; font-weight: 600; color: var(--app-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.chk-sub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.chk-chip { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px; border-radius: var(--app-r-sm); border: 1px solid var(--app-border); background: var(--app-card); color: var(--app-soft); font-weight: 600; font-size: 13px; cursor: pointer; transition: all .15s; }
.chk-chip i { color: var(--app-muted); }
.chk-chip.is-on { border-color: var(--cor-tema); background: var(--app-brand-l); color: var(--cor-tema); }
.chk-chip.is-on i { color: var(--cor-tema); }
.chk-troco-campo { margin-top: 8px; }
.chk-troco-input { display: flex; align-items: center; gap: 6px; border: 1px solid var(--app-border); border-radius: var(--app-r-md); padding: 0 12px; height: 46px; background: var(--app-card); }
.chk-troco-input span { color: var(--app-muted); font-weight: 600; font-size: 13px; }
.chk-troco-input input { flex: 1; border: 0; outline: 0; font-size: 13px; color: var(--app-text); background: transparent; }
.chk-troco-input:focus-within { border-color: var(--cor-tema); box-shadow: 0 0 0 3px rgba(var(--cor-tema-rgb), .12); }
.chk-troco-hint { font-size: 10px; color: var(--app-muted); margin-top: 4px; padding-left: 2px; }

/* CTA principal: raio md(16) + sombra brand suave (não shadow-xl genérico) */
#btn-acao-checkout, #modal-editar-endereco button.font-black {
  border-radius: var(--app-r-md) !important; font-weight: 700 !important;
  box-shadow: 0 8px 18px -10px rgba(var(--cor-tema-rgb), .5) !important;
}

/* DRAWERS de endereço/mapa: raio do app (22, não 32) */
#modal-editar-endereco .modal-drawer, #modal-mapa .modal-drawer {
  border-radius: var(--app-r-lg) var(--app-r-lg) 0 0 !important;
}

/* DIVISÓRIA subtotal→total: tom canônico */
#modal-checkout .h-px.bg-slate-200\/70 { background: var(--app-line-2) !important; }

/* INPUTS do endereço: raio md(16) + foco suave (anel .12 do app) */
#modal-editar-endereco input[type="text"] { border-radius: var(--app-r-md) !important; }
#modal-editar-endereco input:focus { box-shadow: 0 0 0 3px rgba(var(--cor-tema-rgb), .12) !important; }

/* =========================== SCROLLBAR =========================== */
.custom-scrollbar::-webkit-scrollbar-thumb { background-color: var(--app-border) !important; }