/* =====================================================================
   DEFENZ MARKETPLACE — CONCEITO "ARMADURA" (V2, revisado)
   REGRAS DE OURO DESTE ARQUIVO:
   1. NUNCA pintar `background` de classe cujo papel nao foi verificado.
      (.nav-dot e a pilula do menu; .tl-tick e a coluna da timeline —
       ambos foram pintados por engano na v1 e viraram blocos solidos.)
   2. NUNCA mexer em `position` de filhos — quebra elementos absolutos
      (foi o que tirou o escudo do hero do lugar).
   3. Ouro tem DOIS tons: claro sobre fundo escuro, escuro sobre fundo claro.
   ===================================================================== */
:root{
  /* texto auxiliar estava claro demais sobre Papel */
  --text-on-off-faint:#837B6C;
  --gold:#E0A93B;        /* sobre TINTA (fundo escuro) */
  --gold-bright:#F7D687;
  --gold-ink:#8A6114;    /* sobre PAPEL (fundo claro) — contraste real */
  /* acento secundario do sistema -> ouro (usado so em <em>, texto) */
  --teal:#C89A3C;
}

/* ---------- rotulos de telemetria ----------
   contraste por contexto: escuro -> ouro claro | claro -> ouro escuro */
.section-ink .sect-meta-num,
.section-ink .sect-meta-left,
.section-teal .sect-meta-num,
.section-ink .gz-layer-idx,
.section-ink .mkt-label,
.section-ink .tag{
  color:var(--gold) !important;
}
.section-off .sect-meta-num,
.section-off .sect-meta-left,
.section-mint .sect-meta-num,
.section-mint .sect-meta-left,
.section-off .mkt-label,
.section-mint .mkt-label,
.section-off .tag,
.section-mint .tag{
  color:var(--gold-ink) !important;
  font-weight:700 !important;
}
.gz-layer-idx .cur{ color:var(--gold-bright) !important; }

.section-ink .sect-meta{ border-bottom-color:rgba(224,169,59,.34) !important; }
.section-off .sect-meta,
.section-mint .sect-meta{ border-bottom-color:rgba(138,97,20,.34) !important; }

/* ---------- grade de HUD nas secoes escuras ----------
   aplicada como background-image na PROPRIA secao (sem pseudo-elemento e
   sem tocar em position dos filhos) */
.section-ink{
  background-color:var(--ink) !important;
  background-image:
    linear-gradient(90deg, rgba(224,169,59,.055) 0 1px, transparent 1px),
    linear-gradient(0deg,  rgba(224,169,59,.04)  0 1px, transparent 1px) !important;
  background-size:120px 100%, 100% 120px !important;
  background-repeat:repeat, repeat !important;
  background-position:0 0, 0 0 !important;
}

/* ---------- placas / cards: chanfro + fio de ouro (sem tocar em fundo) ---------- */
/* SEM clip-path em cards: em superficie grande o chanfro le como "cortado"
   e ainda recorta conteudo/sombra. Chanfro fica so nos BOTOES. */
.seal,
.gz-slab,
.mkt-tier-card,
.mkt-addon-card,
.mkt-support-card,
.mkt-feat-list-card,
.mkt-preview-chrome,
.tweaks-panel{
  border-color:rgba(224,169,59,.30) !important;
}
/* cards em secao clara: fio de ouro escuro, senao some */
.section-off .mkt-tier-card,
.section-off .mkt-addon-card,
.section-off .mkt-support-card,
.section-off .mkt-feat-list-card,
.section-mint .mkt-tier-card,
.section-mint .mkt-addon-card,
.section-mint .mkt-support-card,
.section-mint .mkt-feat-list-card{
  border-color:rgba(138,97,20,.32) !important;
}

/* ---------- estatisticas ---------- */
.section-ink .stat strong,
.section-ink .stat b,
.section-ink .stat-value{ color:var(--gold-bright) !important; }
.section-off .stat strong,
.section-off .stat b,
.section-off .stat-value{ color:var(--gold-ink) !important; }

/* ---------- botoes: mesmo padrao do site principal ----------
   O marketplace usa pilulas (radius 999px). Chanfrar uma pilula fica torto:
   entao viram retangulares chanfrados, como o botao aprovado do site. */
.btn{
  border-radius:14px !important;
  clip-path:polygon(13px 0,100% 0,100% calc(100% - 13px),calc(100% - 13px) 100%,0 100%,0 13px);
  position:relative; overflow:hidden;
  transition:box-shadow .35s ease, transform .25s ease, background .25s ease !important;
}
/* primario: crimson solido + fio de ouro (identico ao site) */
.btn-primary{
  background:linear-gradient(180deg,#D4141F,#A50F1A) !important;
  border:1px solid rgba(247,214,135,.55) !important;
  color:var(--off) !important;
}
.btn-primary::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 120% at 50% 120%, rgba(247,214,135,.55), transparent 70%);
  opacity:0; transition:opacity .35s ease;
}
.btn-primary:hover::after{ opacity:1; }
.btn-primary:hover{ box-shadow:0 0 26px rgba(224,169,59,.45) !important; }

/* ghost: a borda nativa e clara (feita p/ fundo escuro) e some no card claro */
.section-off .btn-ghost,
.section-mint .btn-ghost,
.mkt-tier-card .btn-ghost{
  border-color:rgba(138,97,20,.55) !important;
  color:var(--text-on-off) !important;
  background:rgba(224,169,59,.06) !important;
}
.section-off .btn-ghost:hover,
.section-mint .btn-ghost:hover,
.mkt-tier-card .btn-ghost:hover{
  border-color:var(--gold-ink) !important;
  background:rgba(224,169,59,.14) !important;
}
.section-ink .btn-ghost{ border-color:rgba(224,169,59,.45) !important; }
.section-ink .btn-ghost:hover{ border-color:var(--gold) !important; }

/* ---------- navegacao ----------
   .nav-dot e a PILULA inteira: nunca preencher. So o ativo recebe acento. */
.nav-dots{ border:1px solid rgba(224,169,59,.22) !important; }
.nav-dot.is-active{
  color:var(--gold-bright) !important;
  text-decoration-color:var(--gold) !important;
}

/* ---------- timeline ----------
   .tl-tick e a COLUNA inteira: so a divisoria e o ponto recebem ouro. */
.tl-tick{ border-right-color:rgba(138,97,20,.34) !important; }
.tl-tick.hot::before{
  background:var(--neon) !important;
  box-shadow:0 0 0 3px rgba(224,169,59,.35) !important;
}
.flow-step:hover{ border-color:var(--gold-ink) !important; }

/* ---------- formulario ---------- */
.mkt-form-input:focus, .mkt-qty-input:focus{
  border-color:var(--gold-ink) !important;
  box-shadow:0 0 0 3px rgba(224,169,59,.22) !important;
  outline:none !important;
}

/* ---------- sliders ---------- */
.mkt-slider::-webkit-slider-thumb{ background:var(--gold-ink) !important; }
.mkt-slider::-moz-range-thumb{ background:var(--gold-ink) !important; }

@media (prefers-reduced-motion:reduce){
  .btn, .nav-cta, .mkt-preview-cta{ transition:none !important; }
}

/* ---------- chips em card claro: o tom nativo foi feito p/ fundo escuro ---------- */
.section-off .mkt-chip-warn,
.section-mint .mkt-chip-warn,
.mkt-tier-card .mkt-chip-warn{
  background:#8A6114 !important;   /* bolinha SOLIDA escura */
  color:#F6F3EE !important;        /* texto claro por cima */
  font-weight:700 !important;
  border:1px solid rgba(0,0,0,.12) !important;
}
/* mesmo tratamento no chip de recomendacao, p/ nao ficar so um escuro */
.mkt-tier-card .mkt-chip-rec,
.section-off .mkt-chip-rec,
.section-mint .mkt-chip-rec{
  background:#9C4A0E !important;
  color:#F6F3EE !important;
  font-weight:700 !important;
}
