/* =============================================================
   Diagnóstico de Vendas — page-specific styles
   Shared body background (body.ds-body) lives in smartsale-main.css
   ============================================================= */

.ds-wrap { max-width: 640px; }

.ds-processing-ring {
  width: 84px;
  height: 84px;
}

.ds-step { animation: dsFadeIn .35s ease; }
.ds-step.hidden { display: none; }
@keyframes dsFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ds-progress-track {
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}
.ds-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #A06F47, #c79567);
  border-radius: 999px;
  transition: width .35s ease;
}

.ds-option {
  display: flex;
  align-items: center;
  gap: .85rem;
  width: 100%;
  text-align: left;
  padding: 1rem 1.15rem;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  transition: border-color .2s ease, background .2s ease, transform .15s ease;
  cursor: pointer;
}
.ds-option:hover { border-color: rgba(160,111,71,.5); background: rgba(160,111,71,.06); }
.ds-option--selected {
  border-color: #A06F47;
  background: rgba(160,111,71,.14);
}
.ds-option__radio {
  width: 20px; height: 20px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.25);
  flex-shrink: 0;
  position: relative;
}
.ds-option--selected .ds-option__radio {
  border-color: #A06F47;
}
.ds-option--selected .ds-option__radio::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 999px;
  background: #A06F47;
}

.ds-back-btn {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .8rem;
  color: rgba(255,255,255,.45);
  transition: color .2s ease;
}
.ds-back-btn:hover { color: #A06F47; }

.ds-result-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 132px; height: 132px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(160,111,71,.18) 0%, rgba(160,111,71,.04) 70%);
  border: 2px solid rgba(160,111,71,.4);
}