/* ============================================================
   Custom Idea Shop — Overrides CSS
   ----
   Aplicado em cima do bundle de produção (build 2026-05-22).
   Estratégia: target seletores estáveis (data-attrs, structural)
   pra sobreviver ao bundle minificado.

   Cada bloco refere ao item N de server-edits.md.
   ============================================================ */

/* Reset placeholder pra que o CSS carregue sem warning */
:root { --custom-overrides-loaded: 1; }

/* ============================================================
   #2 #4  Galeria de miniaturas (thumbnails) — esconder em qualquer viewport
   ------------------------------------------------------------
   JS marca como [data-cid-thumb-gallery] o <div> que contém
   múltiplos buttons 44×44 com img dentro do ProductModal.
   ============================================================ */
[data-cid-thumb-gallery] {
  display: none !important;
}
/* Imagem do produto ocupa o espaço da galeria removida */
[role="dialog"][data-modal="product"] .scrollbar-hide {
  flex: 1 1 auto !important;
}
[role="dialog"][data-modal="product"] .scrollbar-hide > div,
[role="dialog"][data-modal="product"] .product-img-container {
  height: 100% !important;
}
/* Mobile: aspect 5/4 (~30% menor que o 4/5 anterior) */
@media (max-width: 768px) {
  [role="dialog"][data-modal="product"] .scrollbar-hide {
    aspect-ratio: 5 / 4;
    min-height: 240px !important;
    max-height: 360px !important;
    flex: 0 0 auto !important;
  }
}
/* Desktop: full height do leftCol */
@media (min-width: 769px) {
  [role="dialog"][data-modal="product"] .scrollbar-hide {
    min-height: 0 !important;
  }
}
/* Fundo branco no container da imagem (antes era --surface-sunken cinza) */
[role="dialog"][data-modal="product"] > div:first-child,
[role="dialog"][data-modal="product"] [class*="md:w-[48%"] {
  background: #ffffff !important;
}

/* Badge "Bleach Safe" e qualquer overlay top-left ficam acima do crossfade */
[role="dialog"][data-modal="product"] .absolute.top-3.left-3,
[role="dialog"][data-modal="product"] [class*="absolute"][class*="top-3"][class*="left-3"] {
  z-index: 10 !important;
}
/* Compatibilidade legacy */
html[data-hide-lifestyle="1"] [role="dialog"] [data-slot="lifestyle-gallery"],
html[data-hide-lifestyle="1"] [role="dialog"] .lifestyle-gallery {
  display: none !important;
}

/* ============================================================
   #10  Botão Contato — desktop only (BottomNav mobile já tem)
   ============================================================ */
@media (max-width: 768px) {
  [data-cid-contact] {
    display: none !important;
  }
}

/* ============================================================
   ProductModal — X close button não pode tampar "A PARTIR DE $X"
   ------------------------------------------------------------
   O DialogContent do Radix tem close button absolute top-right.
   Damos padding-right no header e no conteúdo logo abaixo do
   título, pra que o preço ("A PARTIR DE $ 60.00") fique antes
   do X.
   ============================================================ */
[role="dialog"][data-modal="product"] > div:first-child,
[role="dialog"][data-modal="product"] [data-slot="dialog-header"],
[role="dialog"][data-modal="product"] [data-slot="dialog-title"],
[role="dialog"][data-modal="product"] h1,
[role="dialog"][data-modal="product"] h2 {
  padding-right: 40px;
}
/* Marcador adicionado por JS no elemento que tem "A PARTIR DE" */
[data-cid-from-price] {
  padding-right: 40px !important;
}

/* ============================================================
   #3  Animação de troca de cor — dissolução suave
   ------------------------------------------------------------
   Bundle aplica scroll-into-view ao clicar cor. Override:
   1. Suavizar transição da imagem principal (opacity fade)
   2. Cancelar scroll-margin para evitar movimentação brusca
   ============================================================ */
[role="dialog"] img[data-product-cover],
[role="dialog"] [data-slot="product-cover"] img {
  transition: opacity 280ms var(--ease-out, ease-out) !important;
}
[role="dialog"] [data-slot="color-swatches"] button {
  scroll-margin: 0 !important;
}

/* ============================================================
   #7  Preço carrinho quebrando layout
   ------------------------------------------------------------
   Force a coluna de preço a não quebrar, mantendo tabular numerals.
   ============================================================ */
[data-page="cart"] [data-line-price],
[data-page="cart"] .item-price {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ============================================================
   #8  Remover botões +/- de quantidade no checkout/cart
   ------------------------------------------------------------
   Esconde controles de qty quando o CID-overrides.js marca a
   linha como "enhanced" com a breakdown nova.
   ============================================================ */
[data-page="checkout"] [data-qty-btn="dec"],
[data-page="checkout"] [data-qty-btn="inc"] {
  display: none !important;
}
[data-page="checkout"] [data-qty-display] {
  pointer-events: none;
}

/* No cart, esconder o bloco inteiro de qty + attribute strings antigas */
[data-page="cart"] [data-cart-line][data-cid-enhanced="1"] [data-cid-old-qty],
[data-page="cart"] [data-cart-line][data-cid-enhanced="1"] [data-cid-old-attrs] {
  display: none !important;
}

/* Esconder cards do mesmo produto que foram mesclados */
[data-cart-line][data-cid-merged="1"] {
  display: none !important;
}

/* Esconder preço-linha-velho quando temos breakdown (mantemos só o total no header) */
[data-cart-line][data-cid-enhanced="1"] [data-line-price] {
  /* deixa visível mas dessaturado, é o total geral do produto */
}

/* Breakdown injetado: agrupado por cor */
[data-cid-breakdown] {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
[data-cid-color-header] {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary, #4b5563);
  letter-spacing: 0;
}
[data-cid-color-header]:first-child {
  margin-top: 0;
}
[data-cid-color-code] {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--surface-sunken, #f3f4f6);
  color: var(--text-tertiary, #6b7280);
  margin-right: 4px;
}
[data-cid-sku] {
  font-size: 11px;
  color: var(--text-tertiary, #6b7280);
  font-family: var(--font-mono, ui-monospace, monospace);
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}
[data-cid-breakdown-row] {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-tertiary, #6b7280);
  font-variant-numeric: tabular-nums;
  padding-left: 4px;
}
[data-cid-breakdown-row] .cid-bd-label {
  font-weight: 500;
  color: var(--text-secondary, #4b5563);
}
[data-cid-breakdown-row] .cid-bd-unit {
  font-weight: 400;
  color: var(--text-tertiary, #9ca3af);
  margin-left: 2px;
}
[data-cid-breakdown-row] .cid-bd-total {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
  font-weight: 500;
  color: var(--text-tertiary, #6b7280);
}

/* ============================================================
   #9  Botão "Finalizar" fixo no mobile (cart e checkout)
   ------------------------------------------------------------
   Em ambas as páginas o botão final fica acima da bottom nav
   (Catálogo/Carrinho/Contato). margin-bottom: 110px deixa o
   botão visível sem ser tampado pela barra inferior.
   ============================================================ */
@media (max-width: 768px) {
  [data-page="cart"] a[href="/checkout"],
  [data-page="checkout"] form button[type="submit"] {
    position: fixed !important;
    bottom: 110px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    max-width: 94% !important;
    width: 94% !important;
    padding: 16px !important;
    height: auto !important;
    z-index: 50;
    box-shadow: 0 12px 32px oklch(0.2 0 0 / 0.25);
  }
  /* Padding pra não tampar conteúdo (mínimo — botão fica fixo bottom 110px) */
  [data-page="cart"],
  [data-page="checkout"] form {
    padding-bottom: 24px;
  }
}

/* ============================================================
   #11  Tipos de entrega em uma linha (mobile incluso)
   ------------------------------------------------------------
   O RadioGroup do deliveryType usa "grid-cols-1 sm:grid-cols-3"
   (1 col abaixo de 640px). Forçamos 3 cols em qualquer tamanho.
   Marcador adicionado por JS: [data-cid-delivery-type].
   ============================================================ */
[data-cid-delivery-type] {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
}
[data-cid-delivery-type] label {
  font-size: 12px !important;
  white-space: normal !important;
  text-align: center;
  line-height: 1.2;
}
/* Padding interno de 16px em cada card do radio (Entrega Local / Envio Nacional / Retirada) */
[data-cid-delivery-type] > div > [data-slot="form-control"] {
  padding: 16px !important;
}

/* ============================================================
   #12  "Aceito e concordo" embaixo (não quebrar layout)
   ------------------------------------------------------------
   Container do checkbox de privacy: força flex column em mobile +
   garante texto não quebrar em palavra única.
   ============================================================ */
[data-page="checkout"] [data-field="acceptedPrivacy"] {
  flex-wrap: wrap;
}
[data-page="checkout"] [data-field="acceptedPrivacy"] label,
[data-page="checkout"] [data-field="acceptedPrivacy"] [data-slot="form-label"] {
  hyphens: auto;
  word-wrap: break-word;
}

/* ============================================================
   #22  Remover botão "Recalcular" + texto "50-50"
   ------------------------------------------------------------
   Aplicado em qualquer tela do admin (não só OrderDetailModal).
   JS marca buttons "Recalcular" com [data-cid-recalc].
   ============================================================ */
[data-cid-recalc],
[data-modal="order-detail"] [data-text="50-50"],
[data-modal="order-detail"] button[data-action="recalc"] {
  display: none !important;
}

/* ============================================================
   CHECKOUT: esconder popup "Confirmar Pedido" + overlay imediatamente
   (JS auto-clica em Confirmar dentro)
   ============================================================ */
[role="dialog"][data-modal="confirm-order"],
[role="dialog"][data-modal="confirm-order"] *,
html:has([role="dialog"][data-modal="confirm-order"]) [data-slot="dialog-overlay"],
html:has([role="dialog"][data-modal="confirm-order"]) [data-state="open"][class*="fixed"],
html:has([role="dialog"][data-modal="confirm-order"]) [data-radix-popper-content-wrapper],
html:has([role="dialog"][data-modal="confirm-order"]) [data-radix-portal] {
  visibility: hidden !important;
  opacity: 0 !important;
  background: transparent !important;
  pointer-events: none !important;
}

/* Máscara branca durante transição checkout→success/payment pra esconder qualquer flash */
[data-cid-navigating]::after {
  content: "";
  position: fixed;
  inset: 0;
  background: #ffffff;
  z-index: 99999;
  pointer-events: none;
}

/* ============================================================
   ADMIN: padding-bottom desnecessário em desktop (BottomNav é md:hidden)
   ============================================================ */
@media (min-width: 768px) {
  main.pb-24,
  main[class*="pb-24"] {
    padding-bottom: 0 !important;
  }
}

/* ============================================================
   ORDER SUCCESS: esconder elementos antigos imediatamente
   pra não ter flash do React render → JS rewrite.
   - "1 XS · Daisy" (text-purple-700)
   - "palette Daisy" (text-secondary)
   São substituídos pelo [data-cid-breakdown] do custom-overrides.js.
   ============================================================ */
[data-page="success"] [data-success-item] .text-purple-700,
[data-page="success"] [data-success-item] [class*="text-secondary"][class*="font-semibold"]:not(.text-sm),
[data-page="success"] .flex-1 > div.text-purple-700,
[data-page="success"] .flex-1 > div[class*="text-[color:var(--text-secondary)]"][class*="font-semibold"] {
  display: none !important;
}

/* Alinhamento de preços por linha (mesma coluna) */
[data-cid-breakdown-row] {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  column-gap: 12px;
  align-items: baseline;
}
[data-cid-breakdown-row] .cid-bd-total {
  min-width: 70px;
  text-align: right;
}
/* Total do produto (header) + Subtotal + Total + linhas de Resumo
   todos com mesma min-width pra alinhar na mesma coluna direita. */
[data-page="success"] [data-success-item] > span:last-child,
[data-page="success"] .flex.justify-between > span:last-child,
[data-page="success"] .flex.justify-between > strong:last-child,
[data-page="cart"] [data-cart-line] [data-line-price] {
  min-width: 80px;
  text-align: right;
  display: inline-block;
}

/* ============================================================
   #29  Impressão cortada — ajusta margens e tamanho de fonte
   ============================================================ */
@media print {
  body, [data-print-receipt], [data-print-report] {
    font-size: 11pt !important;
    line-height: 1.35 !important;
  }
  [data-print-receipt] table,
  [data-print-report] table {
    width: 100% !important;
    page-break-inside: auto;
  }
  [data-print-receipt] tr,
  [data-print-report] tr {
    page-break-inside: avoid;
  }
  /* Esconde itens decorativos no print */
  [data-no-print], button[data-no-print] {
    display: none !important;
  }
}

/* ============================================================
   #30  Coluna preço duplicada no relatório de produção
   ------------------------------------------------------------
   No tbody do relatório de compra, esconde a segunda coluna de
   preço (idx 7 normalmente, ajustável via data-attr).
   ============================================================ */
[data-print-report] table th:nth-child(7),
[data-print-report] table td:nth-child(7) {
  display: none !important;
}

/* ============================================================
   #38  Hover mídia: barra "disponível" embaixo (substitui overlay escuro)
   ============================================================ */
[data-admin-tab="media"] [data-media-card]:hover [data-media-overlay] {
  background: transparent !important;
}
[data-admin-tab="media"] [data-media-card] [data-media-status] {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
  pointer-events: none;
  opacity: 0;
  transition: opacity 140ms ease-out;
}
[data-admin-tab="media"] [data-media-card]:hover [data-media-status] {
  opacity: 1;
}

/* ============================================================
   #51  Ocultar ícone impressora (qualquer área do admin)
   ============================================================ */
[data-page="admin"] button[title*="impress"],
[data-page="admin"] button[title*="Impress"],
[data-page="admin"] button[title*="auto-impress"],
[data-admin-tab="suppliers"] button[data-action="print"],
[data-admin-tab="suppliers"] [data-icon="printer"] {
  display: none !important;
}

/* ============================================================
   Helper: classe pra elementos que custom-overrides.js adiciona
   ============================================================ */
[data-cid-injected] {
  display: contents;
}

/* ============================================================
   MÍDIAS: lightbox + hover 'disponível'
   ============================================================ */
[data-cid-lightbox] {
  position: fixed;
  inset: 0;
  z-index: 99998;
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-cid-lightbox-bg] {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.85);
  cursor: zoom-out;
}
[data-cid-lightbox-content] {
  position: relative;
  z-index: 99999;
  max-width: 92vw;
  max-height: 92vh;
  background: #fff;
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.35);
}
[data-cid-lightbox-content] img {
  max-width: 86vw;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 4px;
}
[data-cid-lightbox-close] {
  position: absolute;
  top: 6px;
  right: 8px;
  background: transparent;
  border: 0;
  font-size: 24px;
  line-height: 1;
  color: #6b7280;
  cursor: pointer;
  padding: 4px 8px;
}
[data-cid-lightbox-close]:hover { color: #111827; }
[data-cid-lightbox-bar] {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 4px 6px;
  border-top: 1px solid #f3f4f6;
}
[data-cid-lightbox-filename] {
  flex: 1;
  font-size: 12px;
  color: #4b5563;
  word-break: break-all;
}
[data-cid-lightbox-rename] {
  padding: 6px 12px;
  background: var(--brand-blue, #2563eb);
  color: #fff;
  border: 0;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
[data-cid-lightbox-rename]:hover { background: #1d4ed8; }

[data-cid-media-card] {
  position: relative;
  cursor: zoom-in;
}
[data-cid-media-card][data-cid-usage]::after {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 4px 8px;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  opacity: 0;
  transition: opacity 140ms ease-out;
  pointer-events: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
[data-cid-media-card][data-cid-usage="used"]::after {
  content: "Disponível";
  background: rgba(34, 197, 94, 0.55);
}
[data-cid-media-card][data-cid-usage="unused"]::after {
  content: "Não usado";
  background: rgba(107, 114, 128, 0.55);
}
[data-cid-media-card]:hover::after { opacity: 1; }

/* DASHBOARD: esconde o BarChart gigante de "Vendas por Produto" */
[data-cid-dash-chart-hidden] { display: none !important; }
/* ============================================================
   #20  Chip "Em Produção" — Padding e styling melhorado
   ============================================================
   Status badge de produção exibido no /success quando pedido está
   em preparação (status: "preparando"). Melhoramos:
   - Padding interno (px-3 py-1.5 → 12px 8px)
   - Border-radius em pílula (999px)
   - Font-weight 600 para melhor contraste
   - Cor laranja vibrante (#f59e0b) com text escuro
   - Spacing apropriado para se destacar sem tampar conteúdo
   ============================================================ */
[data-cid-production-chip] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #78350f;
  background: #fef3c7;
  border-radius: 999px;
  margin-top: 8px;
  margin-bottom: 4px;
  width: fit-content;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
[data-cid-production-chip] svg {
  width: 13px;
  height: 13px;
  stroke-width: 2;
  flex-shrink: 0;
}

/* Variante com fundo mais escuro (alternativa se preferir mais contraste) */
[data-cid-production-chip][data-variant="dark"] {
  background: #f59e0b;
  color: #fff;
}

/* Esconde se productionChipEnabled = false (JS adiciona [data-prod-chip-disabled]) */
[data-prod-chip-disabled] [data-cid-production-chip] {
  display: none !important;
}
/* CHECKOUT: seção "Troco" — wrapper amarelo claro, input branco padrão */
[data-cid-troco-section] {
  background-color: #fef3c7 !important;
  border: 1px solid #f59e0b !important;
  border-radius: 10px !important;
  padding: 14px !important;
  margin-top: 8px !important;
}
[data-cid-troco-section] label {
  color: #78350f !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}
input[name="change-for"],
input[id="change-for"] {
  background-color: #ffffff !important;
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
  color: #111827 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 8px 12px !important;
  box-shadow: none !important;
  transform: none !important;
}
input[name="change-for"]:focus,
input[id="change-for"]:focus {
  outline: none !important;
  border-color: #f59e0b !important;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2) !important;
}
input[name="change-for"]::placeholder,
input[id="change-for"]::placeholder {
  color: #9ca3af !important;
  font-weight: 400 !important;
}

/* ============================================================
   POPUP CLIENTE: limitar altura + scroll interno (só no admin)
   ============================================================ */
[data-page="admin"] [role="dialog"]:not([data-modal="product"]):not([data-modal="confirm-order"]) {
  max-height: 90vh !important;
  overflow-y: auto !important;
}
[data-page="admin"] [role="dialog"]:not([data-modal="product"]):not([data-modal="confirm-order"]) > div:first-child {
  max-height: 90vh !important;
  overflow-y: auto !important;
}
@media (max-width: 640px) {
  [data-page="admin"] [role="dialog"]:not([data-modal="product"]):not([data-modal="confirm-order"]) {
    max-height: 85vh !important;
  }
}

/* CHECKOUT: markers de hide (seletor ="1" — atributo ausente OU ="0" mostra) */
[data-cid-ups-time-hidden]               { display: none !important; }
[data-cid-frete-manual-hidden="1"]       { display: none !important; }
[data-cid-nat-hidden="1"]                { display: none !important; }
[data-cid-pm-hidden="1"]                 { display: none !important; }

/* Botão "Confirmar Pedido" desabilitado quando loja fechada */
button[data-cid-store-closed] {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Banner de loja fechada na home */
[data-cid-closed-banner] { animation: cidFadeIn 200ms ease-out; }
@keyframes cidFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* Seções inteiras escondidas quando 0 toggles ativos */
[data-cid-pm-section-hidden="1"],
[data-cid-delivery-section-hidden="1"] { display: none !important; }

/* ADMIN: esconde cards inúteis (Tempo de Preparo / Cidades de Delivery / Horários de Operação) */
[data-page="admin"] [data-cid-admin-hide="1"] { display: none !important; }

/* ADMIN: reposiciona card "Fuso Horário" pro espaço vazio (col 2 row 1) */
[data-page="admin"] [data-cid-fuso-card="1"] {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

/* Modal de pedido — esconde área de VARIAÇÕES até nosso JS injetar (anti-flash) */
[role="dialog"][data-cid-modal-loading="1"][data-cid-enhance-done="0"]:not([data-cid-enhance-done="1"]) [class*="VARIA"],
[role="dialog"][data-cid-modal-loading="1"]:not([data-cid-enhance-done]) p { /* nada — placeholder */ }
[role="dialog"][data-cid-modal-loading="1"]:not([data-cid-enhance-done]) [data-cid-was-hidden] { display: none !important; }

/* Hide individual: scheduling, entrega local, retirada */
[data-cid-scheduling-hidden="1"] { display: none !important; }
[data-cid-local-hidden="1"]      { display: none !important; }
[data-cid-pickup-hidden="1"]     { display: none !important; }

/* ============================================================ */
/* LOTE 1: Cards de produto na home — fundo branco + image contain */
/* ============================================================ */
:root:not([data-page="admin"]) .group.overflow-hidden > div:first-child,
body:not([data-page="admin"]) [class*="group"][class*="overflow-hidden"] > div:first-child {
  background-color: #ffffff !important;
}
:root:not([data-page="admin"]) .group.overflow-hidden img,
body:not([data-page="admin"]) [class*="group"][class*="overflow-hidden"] img {
  object-fit: contain !important;
  background-color: #ffffff !important;
}

/* LOTE 5: hide via JS marker (fallback caso JS atrase) */
button[data-cid-import-wp-hidden="1"] { display: none !important; }

/* ============================================================ */
/* LOTE 6.1/6.2: esconder botões de delete/avançar dos cards Kanban */
/* (Theo quer que esses acesso fiquem APENAS dentro do modal de detalhes) */
/* Mantém: meu botão Concluir verde (data-cid-kanban-complete-injected) */
/* ============================================================ */
[data-cid-kanban-card-actions-hidden="1"] { display: none !important; }

/* ============================================================ */
/* Switcher qty OFF: esconde stepper – 1 + no modal de produto */
/* ============================================================ */
[data-cid-qty-hidden="1"] { display: none !important; }