/* Paleta de fallback (YaraStore). Cada página injeta :root com a cor do tenant. */
:root {
  --yara-50:#fbf3ff;  --yara-100:#f5e3ff; --yara-200:#ecc8ff; --yara-300:#dd9eff;
  --yara-400:#c869f7; --yara-500:#b13ce6; --yara-600:#9624c4; --yara-700:#7a1ca0;
  --yara-800:#5b1378; --yara-900:#3b0764; --yara-950:#240540;
  --yara-300-rgb:221,158,255; --yara-400-rgb:200,105,247; --yara-500-rgb:177,60,230;
  --yara-700-rgb:122,28,160;
}

html { scroll-behavior: smooth; }
body { background-color: #0a0710; }

.bg-aurora {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60rem 40rem at 85% -10%,  rgba(var(--yara-500-rgb),.45), transparent 60%),
    radial-gradient(50rem 36rem at -10% 10%,  rgba(var(--yara-700-rgb),.55), transparent 60%),
    radial-gradient(40rem 36rem at 50% 110%,  rgba(var(--yara-300-rgb),.18), transparent 60%),
    linear-gradient(180deg, var(--yara-950) 0%, #0b0710 60%, #070409 100%);
}

.glass {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem; padding: .85rem 1.4rem; border-radius: 9999px;
  font-weight: 600; transition: all .25s ease;
  white-space: nowrap;
}
.btn-primary {
  background: linear-gradient(135deg, var(--yara-400) 0%, var(--yara-600) 50%, var(--yara-700) 100%);
  color: #fff;
  box-shadow: 0 18px 40px -12px rgba(var(--yara-500-rgb),.65), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-primary:hover { transform: translateY(-1px); filter: brightness(1.08); }
.btn-ghost {
  background: rgba(255,255,255,.06);
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
}
.btn-ghost:hover { background: rgba(255,255,255,.12); }

.card {
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 1.5rem;
  backdrop-filter: blur(14px);
}

.input,
.select,
.textarea,
input.input,
select.select,
textarea.textarea {
  width: 100%;
  background-color: rgba(255,255,255,.04) !important;
  background-image: none;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: #ffffff !important;
  border-radius: .9rem;
  padding: .85rem 1rem;
  font-size: 0.95rem;
  font-family: inherit;
  line-height: 1.4;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.input::placeholder,
.textarea::placeholder,
input.input::placeholder,
textarea.textarea::placeholder { color: rgba(255,255,255,.45) !important; opacity: 1; }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: rgba(var(--yara-300-rgb),.6);
  background: rgba(255,255,255,.07);
  box-shadow: 0 0 0 4px rgba(var(--yara-500-rgb),.18);
}

/* Corrige o auto-preenchimento do Chrome/Safari: força texto claro
   e mantém o fundo escuro do tema (pintando por dentro com box-shadow). */
.input:-webkit-autofill,
.input:-webkit-autofill:hover,
.input:-webkit-autofill:focus,
.input:-webkit-autofill:active,
.textarea:-webkit-autofill,
.select:-webkit-autofill,
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ffffff;
  -webkit-box-shadow: 0 0 0 1000px var(--yara-950) inset !important;
  box-shadow: 0 0 0 1000px var(--yara-950) inset !important;
  border: 1px solid rgba(var(--yara-300-rgb),.35) !important;
  transition: background-color 9999s ease-in-out 0s, color 9999s ease-in-out 0s;
}
/* Firefox */
.input:autofill, .textarea:autofill, .select:autofill {
  background: var(--yara-950) !important;
  color: #fff !important;
}
/* Garantia extra de cor do texto digitado */
.input, .textarea, .select { color: #fff !important; }
.input::-webkit-input-placeholder, .textarea::-webkit-input-placeholder { color: rgba(255,255,255,.45) !important; }

/* Reset agressivo: qualquer input/select/textarea visível segue o tema escuro,
   mesmo que algum reset de browser/Tailwind tente pintar de branco. */
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="file"]),
textarea,
select {
  color: #ffffff;
  caret-color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  background-color: rgba(255,255,255,.04);
}
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="file"])::placeholder,
textarea::placeholder { color: rgba(255,255,255,.45); opacity: 1; }
select option { background-color: var(--yara-950); color: #fff; }
select.select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--yara-300) 50%), linear-gradient(135deg, var(--yara-300) 50%, transparent 50%) !important;
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50% !important;
  background-size: 6px 6px !important;
  background-repeat: no-repeat !important;
  padding-right: 2.5rem;
}
.select option, select option { background-color: var(--yara-950) !important; color: #fff !important; }

.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .55rem .9rem; border-radius: 9999px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  color: #fff; font-size: .8rem; font-weight: 500;
  cursor: pointer; transition: all .2s ease;
  user-select: none;
}
.chip:hover { background: rgba(255,255,255,.1); }
.chip.active {
  background: linear-gradient(135deg, var(--yara-400), var(--yara-700));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 24px -10px rgba(var(--yara-500-rgb),.7);
}

.option-card {
  position: relative;
  display: flex; flex-direction: column; gap: .25rem;
  padding: 1rem 1.1rem;
  border-radius: 1rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  cursor: pointer;
  transition: all .2s ease;
}
.option-card:hover { background: rgba(255,255,255,.08); border-color: rgba(var(--yara-300-rgb),.35); }
.option-card.active {
  background: linear-gradient(135deg, rgba(var(--yara-500-rgb),.25), rgba(var(--yara-700-rgb),.15));
  border-color: rgba(var(--yara-300-rgb),.7);
  box-shadow: 0 0 0 4px rgba(var(--yara-500-rgb),.18);
}
.option-card .check {
  position: absolute; top: .8rem; right: .8rem;
  width: 1.1rem; height: 1.1rem; border-radius: 9999px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
  transition: all .2s ease;
}
.option-card.active .check {
  background: #fff; border-color: #fff;
}
.option-card.active .check::after {
  content: ''; width: .55rem; height: .55rem; border-radius: 9999px;
  background: linear-gradient(135deg, var(--yara-400), var(--yara-700));
}

.step-pill {
  display: flex; align-items: center; gap: .65rem;
  padding: .35rem .9rem; border-radius: 9999px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  font-size: .8rem; color: rgba(255,255,255,.7);
}
.step-pill .num {
  width: 1.4rem; height: 1.4rem; border-radius: 9999px;
  background: rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center;
  font-weight: 700;
}
.step-pill.active { background: linear-gradient(135deg, var(--yara-400), var(--yara-700)); border-color: transparent; color: #fff; }
.step-pill.active .num { background: #fff; color: var(--yara-800); }
.step-pill.done .num { background: var(--yara-300); color: var(--yara-950); }

.progress-bar {
  height: 4px; background: rgba(255,255,255,.06); border-radius: 9999px; overflow: hidden;
}
.progress-bar > span {
  display:block; height: 100%;
  background: linear-gradient(90deg, var(--yara-400), var(--yara-300));
  transition: width .35s ease;
  box-shadow: 0 0 18px rgba(var(--yara-500-rgb),.6);
}

.divider-grad {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--yara-300-rgb),.35), transparent);
}

.shine {
  background: linear-gradient(90deg, #fff 0%, var(--yara-300) 50%, #fff 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: shine 6s linear infinite;
}
@keyframes shine { to { background-position: -200% center; } }

.float { animation: float 6s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.scrollbar-thin::-webkit-scrollbar { width: 8px; height: 8px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: rgba(var(--yara-300-rgb),.3); border-radius: 9999px; }
.scrollbar-thin::-webkit-scrollbar-track { background: transparent; }

.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .25rem .65rem; border-radius: 9999px;
  font-size: .7rem; font-weight: 600; letter-spacing: .02em;
}
.badge-fuchsia { background: rgba(232,121,249,.15); color: #f0abfc; border: 1px solid rgba(232,121,249,.3); }
.badge-amber   { background: rgba(245,158,11,.15);  color: #fcd34d; border: 1px solid rgba(245,158,11,.3); }
.badge-sky     { background: rgba(56,189,248,.15);  color: #7dd3fc; border: 1px solid rgba(56,189,248,.3); }
.badge-emerald { background: rgba(16,185,129,.15);  color: #6ee7b7; border: 1px solid rgba(16,185,129,.3); }
.badge-zinc    { background: rgba(161,161,170,.15); color: #d4d4d8; border: 1px solid rgba(161,161,170,.3); }

.fade-up { animation: fadeUp .5s ease both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 768px) {
  .btn { padding: .75rem 1.1rem; }
}