/**
 * configurador.css — Coisoteca Progressive Configurator
 * Harmonizado com o tema Morelia.
 * Usa as CSS variables do tema em vez de cores próprias.
 */

/*
 * Ocultação global do "Comprar agora" nas páginas com configurador ativo.
 * Seletor ESPECÍFICO por data-testid (estável) pra não capturar classes
 * hash-compiladas do tema por engano.
 */
body.cc-configurador-ativo [data-testid="buy-now-panel-button"] {
  display: none !important;
}

/* ─── VARIÁVEIS LOCAIS ─────────────────────────────────────────────── */
#coisoteca-configurador {
  --cc-erro:       #861723;
  --cc-borda:      rgba(0,0,0,0.10);
  --cc-borda-forte:rgba(0,0,0,0.18);
  --cc-raio:       4px;
  --cc-transicao:  180ms ease;

  /* Herda do tema Morelia */
  --cc-fundo:      var(--main-background, #FAFAF8);
  --cc-texto:      var(--main-foreground, #231F20);
  --cc-acento:     var(--accent-color, #359265);
  --cc-btn-bg:     var(--button-background, var(--accent-color, #231F20));
  --cc-btn-fg:     var(--button-foreground, #FFFFFF);

  font-family: inherit;
  font-size: 15px;
  color: var(--cc-texto);
  max-width: 600px;
  margin: 0;
  padding-bottom: 20px;
}

#coisoteca-configurador *,
#coisoteca-configurador *::before,
#coisoteca-configurador *::after {
  box-sizing: border-box;
}

/* ─── BARRA DE PROGRESSO ─────────────────────────────────────────── */
#coisoteca-configurador .cc-progresso {
  padding: 16px 0 12px;
  margin-bottom: 24px;
}

#coisoteca-configurador .cc-progresso-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.5;
  margin: 0 0 8px 0;
}

#coisoteca-configurador .cc-progresso-track {
  height: 2px;
  background: var(--cc-borda);
  border-radius: 1px;
  overflow: hidden;
}

#coisoteca-configurador .cc-progresso-fill {
  height: 100%;
  background: var(--cc-acento);
  border-radius: 1px;
  transition: width 300ms ease;
}

#coisoteca-configurador .cc-progresso-passos {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
}

#coisoteca-configurador .cc-passo-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cc-borda);
  transition: background var(--cc-transicao);
}

#coisoteca-configurador .cc-passo-dot.ativo     { background: var(--cc-texto); }
#coisoteca-configurador .cc-passo-dot.concluido { background: var(--cc-acento); }

/* ─── ETAPAS ──────────────────────────────────────────────────────── */
/*
 * Três estados:
 *   (padrão)      = oculta
 *   .visivel      = aberta (etapa atual)
 *   .visivel.concluida = aberta mas colapsada (etapas anteriores)
 *
 * Sem !important — resolvemos overlap com especificidade normal.
 */
#coisoteca-configurador .cc-etapa {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 220ms ease, max-height 380ms ease, margin 220ms ease;
  margin: 0;
  padding: 0;
}

#coisoteca-configurador .cc-etapa.visivel {
  opacity: 1;
  max-height: 2000px;
  overflow: visible;
  pointer-events: auto;
}

/*
 * Etapas concluídas: ficam visíveis mas colapsadas em uma linha só.
 * Mostra só o header (número + título + valor escolhido), esconde o conteúdo.
 * São clicáveis pra reabrir e editar.
 */
#coisoteca-configurador .cc-etapa.concluida {
  max-height: 70px;
  opacity: 0.75;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  padding: 8px 0;
  transition: opacity var(--cc-transicao), max-height 350ms ease;
}
#coisoteca-configurador .cc-etapa.concluida:hover {
  opacity: 1;
}
#coisoteca-configurador .cc-etapa.concluida > *:not(.cc-etapa-header) {
  display: none;
}
#coisoteca-configurador .cc-etapa.concluida .cc-etapa-header {
  margin-bottom: 0;
}

/* Ícone "editar" aparece no hover de etapas concluídas */
#coisoteca-configurador .cc-etapa.concluida::after {
  content: '✏️';
  position: absolute;
  top: 10px;
  right: -6px;
  font-size: 12px;
  opacity: 0;
  transition: opacity var(--cc-transicao);
  pointer-events: none;
}
#coisoteca-configurador .cc-etapa.concluida:hover::after {
  opacity: 0.6;
}

#coisoteca-configurador .cc-etapa-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 16px;
  margin-top: 4px;
  flex-wrap: wrap;
}

#coisoteca-configurador .cc-etapa-numero {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.4;
  flex-shrink: 0;
  min-width: 20px;
}

#coisoteca-configurador .cc-etapa-titulo {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  color: var(--cc-texto);
}

/* Valor escolhido (aparece ao lado do título quando etapa está concluída).
   Vazio em etapas não concluídas; populado por JS (atualizarValoresEtapas). */
#coisoteca-configurador .cc-etapa-valor {
  font-size: 14px;
  font-weight: 500;
  color: var(--cc-texto);
  opacity: 0.75;
  margin-left: auto;
  text-align: right;
  line-height: 1.3;
}

/* Em etapa aberta, o valor só aparece se tiver conteúdo — fica sutil */
#coisoteca-configurador .cc-etapa:not(.concluida) .cc-etapa-valor {
  font-size: 12px;
  opacity: 0.5;
  font-weight: 400;
  font-style: italic;
}
#coisoteca-configurador .cc-etapa:not(.concluida) .cc-etapa-valor:empty {
  display: none;
}

/* Em etapa concluída, o valor tem destaque — é o "resumo vivo" */
#coisoteca-configurador .cc-etapa.concluida .cc-etapa-valor {
  font-weight: 600;
  opacity: 1;
}

#coisoteca-configurador .cc-proxima-etapa {
  font-size: 12px;
  opacity: 0.45;
  margin: 14px 0 0 0;
  display: none;
}
#coisoteca-configurador .cc-proxima-etapa.visivel { display: block; }

#coisoteca-configurador .cc-etapa-divider {
  height: 1px;
  background: var(--cc-borda);
  margin: 22px 0;
  transition: opacity var(--cc-transicao);
  display: none; /* controlado via JS em mostrarEtapa() */
}
#coisoteca-configurador .cc-etapa-divider.visivel {
  display: block;
}

/* ─── BOTÕES DE ENERGIA ───────────────────────────────────────────── */
#coisoteca-configurador .cc-opcoes-energia {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

#coisoteca-configurador .cc-btn-energia {
  background: transparent;
  border: 1px solid var(--cc-borda-forte);
  border-radius: var(--cc-raio);
  padding: 18px 12px;
  font-family: inherit;
  font-size: 14px;
  color: var(--cc-texto);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: all var(--cc-transicao);
}
#coisoteca-configurador .cc-btn-energia:hover {
  border-color: var(--cc-texto);
}
#coisoteca-configurador .cc-btn-energia.selecionado {
  background: var(--cc-texto);
  color: var(--cc-fundo);
  border-color: var(--cc-texto);
}
#coisoteca-configurador .cc-btn-energia-icone { font-size: 20px; line-height: 1; }
#coisoteca-configurador .cc-btn-energia-nome { font-weight: 600; }

/* Sub-seleção de voltagem */
#coisoteca-configurador .cc-sub-voltagem {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}
#coisoteca-configurador .cc-sub-voltagem.visivel { display: grid; }

#coisoteca-configurador .cc-btn-volt {
  background: transparent;
  border: 1px solid var(--cc-borda-forte);
  border-radius: var(--cc-raio);
  padding: 12px 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--cc-texto);
  cursor: pointer;
  transition: all var(--cc-transicao);
}
#coisoteca-configurador .cc-btn-volt:hover { border-color: var(--cc-texto); }
#coisoteca-configurador .cc-btn-volt.selecionado {
  background: var(--cc-texto);
  color: var(--cc-fundo);
  border-color: var(--cc-texto);
}

#coisoteca-configurador .cc-sub-voltagem-aviso {
  grid-column: 1 / -1;
  font-size: 11px;
  opacity: 0.6;
  margin: 4px 0 0 0;
  text-align: center;
  background: rgba(232,168,56,0.1);
  padding: 6px 10px;
  border-radius: var(--cc-raio);
}

/* ─── SWATCHES DE COR ─────────────────────────────────────────────── */
#coisoteca-configurador .cc-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#coisoteca-configurador .cc-swatch-wrap {
  position: relative;
}

#coisoteca-configurador .cc-swatch {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  transition: transform var(--cc-transicao), border-color var(--cc-transicao);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12);
}
#coisoteca-configurador .cc-swatch:hover { transform: scale(1.08); }
#coisoteca-configurador .cc-swatch.selecionado {
  border-color: var(--cc-texto);
  transform: scale(1.08);
}

#coisoteca-configurador .cc-swatch-tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--cc-texto);
  color: var(--cc-fundo);
  font-size: 11px;
  padding: 4px 8px;
  border-radius: var(--cc-raio);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--cc-transicao);
  z-index: 10;
}
#coisoteca-configurador .cc-swatch-wrap:hover .cc-swatch-tooltip { opacity: 1; }

/* ─── CARDS DE PLACAS ─────────────────────────────────────────────── */
#cc-cards-placas {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

#coisoteca-configurador .cc-card-placa {
  background: transparent;
  border: 1px solid var(--cc-borda-forte);
  border-radius: var(--cc-raio);
  padding: 14px 10px;
  font-family: inherit;
  color: var(--cc-texto);
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: all var(--cc-transicao);
  min-height: 110px;
  text-align: center;
}
#coisoteca-configurador .cc-card-placa:hover { border-color: var(--cc-texto); }
#coisoteca-configurador .cc-card-placa.selecionado {
  background: var(--cc-texto);
  color: var(--cc-fundo);
  border-color: var(--cc-texto);
}

#coisoteca-configurador .cc-card-placa-nome {
  font-size: 13px;
  font-weight: 700;
}

#coisoteca-configurador .cc-card-placa-preco {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  line-height: 1.3;
}

#coisoteca-configurador .cc-preco-atual {
  font-size: 15px;
  font-weight: 700;
}
#coisoteca-configurador .cc-preco-pendente {
  font-size: 11px;
  font-weight: 400;
  opacity: 0.6;
  font-style: italic;
}
#coisoteca-configurador .cc-preco-riscado {
  font-size: 11px;
  text-decoration: line-through;
  opacity: 0.5;
}
#coisoteca-configurador .cc-preco-extra {
  font-size: 10px;
  opacity: 0.7;
}

#coisoteca-configurador .cc-badge-valor {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--cc-acento);
  color: #FFF;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 10px;
  white-space: nowrap;
}

/* ─── CAMPOS DE FRASES ────────────────────────────────────────────── */
#coisoteca-configurador .cc-tipo-frase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}

#coisoteca-configurador .cc-btn-tipo-frase {
  background: transparent;
  border: 1px solid var(--cc-borda-forte);
  border-radius: var(--cc-raio);
  padding: 16px 12px;
  font-family: inherit;
  font-size: 13px;
  color: var(--cc-texto);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: all var(--cc-transicao);
}
#coisoteca-configurador .cc-btn-tipo-frase:hover { border-color: var(--cc-texto); }
#coisoteca-configurador .cc-btn-tipo-frase.selecionado {
  background: var(--cc-texto);
  color: var(--cc-fundo);
  border-color: var(--cc-texto);
}
#coisoteca-configurador .cc-btn-tipo-frase-icone { font-size: 18px; line-height: 1; }
#coisoteca-configurador .cc-btn-tipo-frase-label { font-weight: 600; }

#coisoteca-configurador .cc-campos-frases {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#coisoteca-configurador .cc-campo-frase-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#coisoteca-configurador .cc-campo-frase-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
}

#coisoteca-configurador .cc-input-frase,
#coisoteca-configurador .cc-select-frase {
  width: 100%;
  background: var(--cc-fundo);
  border: 1px solid var(--cc-borda-forte);
  border-radius: var(--cc-raio);
  padding: 12px 14px;
  font-family: inherit;
  font-size: 15px;
  color: var(--cc-texto);
  transition: border-color var(--cc-transicao);
  -webkit-appearance: none;
  appearance: none;
}
#coisoteca-configurador .cc-select-frase {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23231F20' d='M6 8L0 0h12z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
#coisoteca-configurador .cc-input-frase:focus,
#coisoteca-configurador .cc-select-frase:focus {
  outline: none;
  border-color: var(--cc-texto);
}

#coisoteca-configurador .cc-contador {
  align-self: flex-end;
  font-size: 11px;
  opacity: 0.55;
}
#coisoteca-configurador .cc-contador.limite {
  color: var(--cc-erro);
  opacity: 1;
}

/* Aviso de campo: aparece quando o cliente cola texto com emoji ou que
   excede o limite. Some automaticamente depois de alguns segundos. */
#coisoteca-configurador .cc-aviso-campo {
  font-size: 11px;
  color: var(--cc-erro);
  font-weight: 500;
  margin-top: 6px;
  line-height: 1.4;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 220ms ease, opacity 180ms ease, margin-top 220ms ease;
}
#coisoteca-configurador .cc-aviso-campo.visivel {
  max-height: 60px;
  opacity: 1;
}

/* Input com borda vermelha temporária quando há aviso */
#coisoteca-configurador .cc-input-frase.cc-input-erro {
  border-color: var(--cc-erro);
  background: rgba(134, 23, 35, 0.03);
}

/* Campo de comentário */
#coisoteca-configurador .cc-campo-comentario {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#coisoteca-configurador .cc-textarea-comentario {
  width: 100%;
  background: var(--cc-fundo);
  border: 1px solid var(--cc-borda-forte);
  border-radius: var(--cc-raio);
  padding: 12px 14px;
  font-family: inherit;
  font-size: 14px;
  color: var(--cc-texto);
  resize: vertical;
  min-height: 70px;
  transition: border-color var(--cc-transicao);
}
#coisoteca-configurador .cc-textarea-comentario:focus {
  outline: none;
  border-color: var(--cc-texto);
}

/* ─── BARRA DE PREÇO + BOTÃO ─────────────────────────────────────── */
/*
 * Barra inline abaixo da última etapa. Abandonei o 'position: fixed' no mobile
 * porque ele fica oculto por teclados virtuais, botões do tema, e é
 * imprevisível com o layout da Nuvemshop. Inline sempre funciona.
 */
#coisoteca-configurador .cc-sticky-footer {
  position: static;
  background: var(--cc-fundo);
  border: 1px solid var(--cc-borda-forte);
  border-radius: var(--cc-raio);
  padding: 14px 16px;
  margin-top: 24px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

#coisoteca-configurador .cc-sticky-preco-wrap { flex: 1; min-width: 120px; }

#coisoteca-configurador .cc-sticky-preco {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: var(--cc-texto);
}

#coisoteca-configurador .cc-sticky-frete {
  font-size: 11px;
  opacity: 0.55;
  margin-top: 4px;
}
#coisoteca-configurador .cc-sticky-frete.gratis {
  color: var(--cc-acento);
  opacity: 1;
  font-weight: 600;
}

#coisoteca-configurador .cc-btn-comprar-wrap {
  flex-shrink: 0;
  position: relative;
}

#coisoteca-configurador .cc-btn-comprar {
  background: var(--cc-btn-bg);
  color: var(--cc-btn-fg);
  border: none;
  border-radius: var(--cc-raio);
  padding: 14px 24px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity var(--cc-transicao);
  white-space: nowrap;
}
#coisoteca-configurador .cc-btn-comprar:hover:not(:disabled) { opacity: 0.88; }
#coisoteca-configurador .cc-btn-comprar:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

#coisoteca-configurador .cc-btn-comprar-hint {
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  background: var(--cc-texto);
  color: var(--cc-fundo);
  font-size: 10px;
  padding: 4px 8px;
  border-radius: var(--cc-raio);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--cc-transicao);
}
#coisoteca-configurador .cc-btn-comprar:disabled + .cc-btn-comprar-hint,
#coisoteca-configurador .cc-btn-comprar-wrap:hover .cc-btn-comprar-hint { opacity: 1; }

#coisoteca-configurador .cc-aviso {
  font-size: 13px;
  opacity: 0.6;
  font-style: italic;
  margin: 0;
}

/* ─── MOBILE: EMPILHA PREÇO E BOTÃO ──────────────────────────────── */
@media (max-width: 767px) {
  #coisoteca-configurador .cc-sticky-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 16px;
  }
  #coisoteca-configurador .cc-sticky-preco-wrap {
    text-align: center;
  }
  #coisoteca-configurador .cc-btn-comprar {
    width: 100%;
    padding: 16px 24px;
    font-size: 14px;
  }
}

/* ─── DESKTOP: AJUSTES DE TAMANHO ────────────────────────────────── */
@media (min-width: 768px) {
  #coisoteca-configurador { padding-bottom: 20px; }
  #coisoteca-configurador .cc-sticky-preco { font-size: 24px; }
  #coisoteca-configurador .cc-btn-comprar {
    padding: 14px 28px;
  }
}