/* =========================================================
   Melhor Investimento — Custom CSS para Fider
   Cole no campo "Custom CSS" em Settings → Advanced.
   ========================================================= */

/* ---------- 1. Tipografia ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root,
.c-fider {
  /* Tokens da marca */
  --mi-bg:        #F7F8FA;
  --mi-paper:     #FFFFFF;
  --mi-ink:       #0B0F1A;
  --mi-ink-2:     #475065;
  --mi-ink-3:     #8A93A8;
  --mi-rule:      #E6E9EF;
  --mi-rule-soft: #EFF1F5;
  --mi-accent:        oklch(0.58 0.18 258);
  --mi-accent-hover:  oklch(0.50 0.20 268);
  --mi-accent-ink:    oklch(0.42 0.16 258);
  --mi-accent-soft:   oklch(0.96 0.04 258);

  /* Sobrescreve variáveis comuns do Fider/Tailwind */
  --color-primary-base:  oklch(0.58 0.18 258);
  --color-primary-hover: oklch(0.50 0.20 268);
  --color-primary-text:  #FFFFFF;
  --color-gray-100: var(--mi-rule-soft);
  --color-gray-200: var(--mi-rule);
}

/* ---------- 2. Body / background / fonte global ---------- */
html, body {
  background: var(--mi-bg) !important;
  color: var(--mi-ink) !important;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

/* Texto base e títulos com tracking mais elegante */
h1, h2, h3, h4 {
  color: var(--mi-ink) !important;
  letter-spacing: -0.015em;
  font-weight: 600;
}

/* ---------- 3. Header / topo ---------- */
header,
.c-header {
  background: var(--mi-paper) !important;
  border-bottom: 1px solid var(--mi-rule) !important;
  box-shadow: none !important;
}

/* Nome do site no header */
header h1,
.c-header h1,
.c-site-name {
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}

/* ---------- 4. Botões primários ---------- */
button[type="submit"],
.c-button--primary,
.c-button.c-button--positive,
button.bg-primary-base,
[class*="bg-primary"]:not(input):not(textarea) {
  background: var(--mi-accent) !important;
  border-color: var(--mi-accent) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  transition: background 120ms ease, transform 120ms ease;
}
button[type="submit"]:hover,
.c-button--primary:hover,
.c-button.c-button--positive:hover,
button.bg-primary-base:hover {
  background: var(--mi-accent-hover) !important;
  border-color: var(--mi-accent-hover) !important;
  transform: translateY(-1px);
}

/* Botões secundários (cancel / ghost) */
.c-button:not(.c-button--primary):not(.c-button--positive):not(.c-button--danger) {
  background: var(--mi-paper) !important;
  border: 1px solid var(--mi-rule) !important;
  color: var(--mi-ink) !important;
  border-radius: 8px !important;
}
.c-button:not(.c-button--primary):not(.c-button--positive):not(.c-button--danger):hover {
  border-color: var(--mi-ink-3) !important;
  background: var(--mi-rule-soft) !important;
}

/* ---------- 5. Links e textos accent ---------- */
a,
.c-link,
[class*="text-primary"] {
  color: var(--mi-accent-ink) !important;
  text-decoration: none;
}
a:hover,
.c-link:hover {
  color: var(--mi-accent) !important;
}

/* "Powered by Fider" — discreto */
.c-poweredby,
[class*="powered"] a {
  color: var(--mi-ink-3) !important;
  font-size: 11.5px !important;
}

/* ---------- 6. Cards / containers ---------- */
.c-tile,
.c-box,
.c-comment,
section,
article,
[class*="rounded-lg"][class*="border"] {
  background: var(--mi-paper) !important;
  border: 1px solid var(--mi-rule) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px oklch(0 0 0 / 0.025) !important;
}

/* Banner / aviso de recomendação (azul claro) */
.c-message,
.c-banner,
[role="alert"],
[class*="bg-blue-50"], [class*="bg-indigo-50"] {
  background: var(--mi-accent-soft) !important;
  border-left: 3px solid var(--mi-accent) !important;
  border-radius: 8px !important;
  color: var(--mi-ink) !important;
}
.c-message strong,
.c-banner strong { color: var(--mi-ink) !important; }

/* ---------- 7. Inputs e textareas ---------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
.c-input {
  background: var(--mi-paper) !important;
  border: 1px solid var(--mi-rule) !important;
  border-radius: 8px !important;
  color: var(--mi-ink) !important;
  font-family: inherit !important;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus,
.c-input:focus {
  outline: none !important;
  border-color: var(--mi-accent) !important;
  box-shadow: 0 0 0 3px var(--mi-accent-soft) !important;
}
::placeholder { color: var(--mi-ink-3) !important; }

/* ---------- 8. Sidebar / menu lateral (Advanced screen) ---------- */
.c-menu-item,
nav a {
  border-radius: 8px !important;
  color: var(--mi-ink-2) !important;
  font-weight: 500 !important;
  transition: background 100ms ease, color 100ms ease;
}
.c-menu-item:hover,
nav a:hover {
  background: var(--mi-rule-soft) !important;
  color: var(--mi-ink) !important;
}
.c-menu-item--active,
.c-menu-item.is-active,
nav a.active,
nav a[aria-current="page"] {
  background: var(--mi-accent-soft) !important;
  color: var(--mi-accent-ink) !important;
  font-weight: 600 !important;
}

/* ---------- 9. Tags / badges ---------- */
.c-tag,
[class*="badge"] {
  border-radius: 999px !important;
  font-weight: 500 !important;
  font-size: 11.5px !important;
}

/* ---------- 10. Voto / contadores ---------- */
.c-vote-counter,
.c-vote-counter--voted {
  border-radius: 10px !important;
  border: 1px solid var(--mi-rule) !important;
}
.c-vote-counter--voted {
  background: var(--mi-accent-soft) !important;
  border-color: var(--mi-accent) !important;
  color: var(--mi-accent-ink) !important;
}

/* ---------- 11. Ícones SVG dos clipboards (estado vazio) ---------- */
/* deixa o roxinho/indigo padrão alinhado com a marca */
svg [fill="#5850EC"],
svg [fill="#6366f1"],
svg [fill="#4f46e5"],
svg [stop-color="#5850EC"] {
  fill: var(--mi-accent) !important;
  stop-color: var(--mi-accent) !important;
}

.fider-branding,
[class*="poweredBy"],
a[href*="fider.io"] {
  display: none !important;
}

.c-themeswitcher,
button[aria-label="Toggle theme"] {
  display: none !important;
}