/* ============================================================
   components.css — peças reutilizadas no formulário e no admin
   ============================================================ */

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 22px;
  border: 1.5px solid var(--line); border-radius: var(--r-sm);
  background: var(--card); color: var(--ink);
  font-weight: 700; font-size: 14px; white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.btn:hover { border-color: var(--line-strong); background: #FBFAF7; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .55; cursor: default; transform: none; }

.btn--primary { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); box-shadow: 0 8px 20px var(--accent-ring); }

.btn--ghost { background: transparent; color: var(--muted); }
.btn--ghost:hover { background: rgba(21, 23, 28, .04); color: var(--ink); }

.btn--danger { background: var(--danger-soft); border-color: #F3C4C0; color: var(--danger); }
.btn--danger:hover { background: #F9D6D3; border-color: #EBA9A3; }

.btn--sm { min-height: 36px; padding: 0 14px; font-size: 13px; border-radius: 10px; }

.btn-icon {
  width: 34px; height: 34px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--line); border-radius: 10px;
  background: var(--card); color: var(--muted);
  transition: all var(--t-fast);
}
.btn-icon:hover { border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft); }
.btn-icon--danger:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-soft); }

/* ---------- Campos ---------- */
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.label { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-weight: 700; font-size: 14px; }
.label small { font-weight: 500; color: var(--muted); font-size: 12.5px; }
.req { color: var(--accent-text); }
.hint { font-size: 12.5px; color: var(--muted); }

.input {
  width: 100%; min-height: 46px; padding: 11px 14px;
  border: 1.5px solid var(--line); border-radius: var(--r-sm);
  background: var(--card); color: var(--ink); font-size: 15px;
  appearance: none; -webkit-appearance: none; outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.input::placeholder { color: #8A8E98; }
.input:hover { border-color: var(--line-strong); }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); }
textarea.input { resize: vertical; min-height: 96px; line-height: 1.5; }
select.input {
  padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235F636E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}

/* Estados do campo (erro, válido, aviso, consultando) */
.input.is-error { border-color: var(--danger); box-shadow: 0 0 0 4px var(--danger-soft); }
.input.is-valid { border-color: var(--ok); }
.input.is-warn  { border-color: #D9A441; }
.input.is-loading {
  border-color: var(--line-strong);
  background-image: linear-gradient(90deg, transparent, rgba(228, 87, 46, .10), transparent);
  background-size: 200% 100%; animation: shimmer 1.1s linear infinite;
}
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.field-error { font-size: 13px; line-height: 1.4; color: var(--danger); }
.field-error:empty { display: none; }
.field-error[data-tone="ok"]      { color: var(--ok); }
.field-error[data-tone="warn"]    { color: var(--warn); }
.field-error[data-tone="muted"]   { color: var(--muted); }

/* ---------- Opções (rádio e checkbox viram "pílulas") ---------- */
.options { display: flex; flex-wrap: wrap; gap: 10px; }
.options--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); }

.option {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 10px 16px;
  border: 1.5px solid var(--line); border-radius: var(--r-sm); background: var(--card);
  font-weight: 600; font-size: 14px; line-height: 1.25; user-select: none; cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.option:hover { border-color: var(--accent); }
.option input {            /* o input cobre a pílula inteira: clique e teclado funcionam em qualquer ponto */
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.option:has(input:checked) {
  border-color: var(--accent); background: var(--accent-soft);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.option:has(input:checked)::before { content: '✓'; color: var(--accent-text); font-weight: 800; }
.option:focus-within { outline: 3px solid var(--accent-ring); outline-offset: 2px; }

/* Interruptor "mesmo endereço" e semelhantes */
.option--inline { align-self: flex-start; }

/* ---------- Cartão e títulos ---------- */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-card);
}
.eyebrow {
  font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-text);
}

/* ---------- Marca e equalizador ---------- */
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand__name { font-weight: 800; font-size: 17px; letter-spacing: -.01em; }

.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 18px; }
.eq i { display: block; width: 3px; height: 100%; border-radius: 2px; background: var(--accent); transform-origin: bottom; animation: eq 1.1s ease-in-out infinite alternate; }
.eq i:nth-child(1) { animation-delay: -.1s; height: 45%; }
.eq i:nth-child(2) { animation-delay: -.5s; height: 90%; }
.eq i:nth-child(3) { animation-delay: -.3s; height: 65%; }
.eq i:nth-child(4) { animation-delay: -.8s; height: 100%; }
.eq i:nth-child(5) { animation-delay: -.6s; height: 55%; }
@keyframes eq { from { transform: scaleY(.45); } to { transform: scaleY(1); } }

/* ---------- Selo ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: var(--r-pill);
  background: var(--accent-soft); color: var(--accent-text);
  font-size: 12px; font-weight: 700;
}