/* ============================================================
   CADASTRO DE AFILIADO — estilos do formulário
   (usa as variáveis de styles.css)
   ============================================================ */

.reg { position: relative; z-index: 1; padding: 7rem 0 4rem; min-height: 100vh; }
.reg__grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }

/* ----- Coluna lateral (contexto) ----- */
.reg__aside { position: sticky; top: 7rem; }
.reg__aside .eyebrow { margin-bottom: 1.4rem; }
.reg__aside-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1.1; margin-bottom: 1.2rem; }
.reg__aside-sub { font-weight: 300; color: var(--cream-dim); margin-bottom: 2.2rem; max-width: 42ch; }
.reg__perks { list-style: none; display: flex; flex-direction: column; gap: 1.1rem; margin-bottom: 2.4rem; }
.reg__perks li { display: flex; gap: .9rem; font-size: .95rem; color: var(--cream); align-items: flex-start; }
.reg__perks .ic { flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--bronze-glow); border: 1px solid var(--line); background: rgba(192,137,79,.08); }
.reg__perks b { display: block; font-weight: 600; }
.reg__perks span { font-size: .84rem; font-weight: 300; color: var(--cream-dim); }
.reg__brandstrip { display: flex; gap: .7rem; flex-wrap: wrap; }
.reg__brandstrip img { width: 46px; height: 46px; object-fit: cover; border-radius: 10px; background: var(--cream); }
.reg__brandstrip img.dark { background: #0d0d0d; border: 1px solid var(--line-soft); }

/* ----- Cartão do formulário ----- */
.form-card {
  position: relative; border: 1px solid var(--line); border-radius: 24px; overflow: hidden;
  background: linear-gradient(170deg, rgba(20,18,16,.85), rgba(10,10,10,.55));
  box-shadow: 0 50px 100px -50px rgba(0,0,0,.8);
}
.form-card__head { padding: 2rem clamp(1.5rem, 4vw, 2.6rem) 1.4rem; border-bottom: 1px solid var(--line-soft); }
.form-card__head h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; }
.form-card__head p { font-size: .88rem; font-weight: 300; color: var(--cream-dim); margin-top: .35rem; }
.form-card__body { padding: clamp(1.5rem, 4vw, 2.6rem); }

/* Barra de progresso */
.form-progress { display: flex; gap: .5rem; padding: 1.2rem clamp(1.5rem, 4vw, 2.6rem); border-bottom: 1px solid var(--line-soft); }
.form-progress__seg { flex: 1; height: 3px; border-radius: 2px; background: var(--line-soft); overflow: hidden; }
.form-progress__seg i { display: block; height: 100%; width: 100%; background: var(--grad-bronze-h); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.form-progress__seg.done i { transform: scaleX(1); }

/* Seções */
.fset { border: 0; margin-bottom: 2.4rem; }
.fset:last-of-type { margin-bottom: 1.4rem; }
.fset__legend { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.4rem; width: 100%; }
.fset__legend b { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-size: .82rem; color: var(--black); background: var(--grad-bronze); flex-shrink: 0; }
.fset__legend span { font-family: var(--font-display); font-size: 1.08rem; letter-spacing: .02em; color: var(--cream); }

/* Grid de campos */
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.2rem; }
.field { display: flex; flex-direction: column; gap: .5rem; }
.field.col-2 { grid-column: 1 / -1; }
.field label { font-size: .78rem; letter-spacing: .04em; color: var(--cream); font-weight: 500; }
.field label .req { color: var(--bronze); margin-left: .15rem; }
.field input, .field select {
  width: 100%; padding: .9rem 1rem; border-radius: 12px; border: 1px solid var(--line-soft);
  background: rgba(10,10,10,.5); color: var(--cream); font-family: var(--font-body); font-size: .92rem;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
  appearance: none;
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23C0894F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.6rem; cursor: pointer;
}
.field input::placeholder { color: rgba(184,175,163,.5); }
.field input:focus, .field select:focus { outline: 0; border-color: var(--bronze); box-shadow: 0 0 0 3px rgba(192,137,79,.14); background: rgba(10,10,10,.75); }
.field input:invalid:not(:placeholder-shown) { border-color: rgba(190,80,60,.55); }
.field .hint { font-size: .74rem; color: var(--cream-dim); }
.field .err { font-size: .74rem; color: #e08a6f; display: none; }
.field.has-error .err { display: block; }
.field.has-error input, .field.has-error select { border-color: rgba(190,80,60,.6); }

/* Grupos de opções (checkbox/radio estilizados) */
.optgroup { display: flex; flex-wrap: wrap; gap: .7rem; }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.opt span {
  display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.1rem; border-radius: 100px;
  border: 1px solid var(--line-soft); font-size: .85rem; color: var(--cream); cursor: pointer;
  background: rgba(10,10,10,.4); transition: .25s var(--ease); user-select: none;
}
.opt input:hover + span { border-color: var(--line); }
.opt input:checked + span { border-color: var(--bronze); color: var(--bronze-glow); background: rgba(192,137,79,.12); }
.opt input:focus-visible + span { box-shadow: 0 0 0 3px rgba(192,137,79,.2); }

/* Marcas — seleção com mini-logo */
.brandpick { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
.brandpick .opt span { justify-content: flex-start; width: 100%; padding: .8rem 1rem; border-radius: 12px; }
.brandpick .opt span img { width: 30px; height: 30px; object-fit: cover; border-radius: 7px; background: var(--cream); }
.brandpick .opt span img.dark { background: #0d0d0d; }

/* Aceite / termos */
.consent { display: flex; gap: .8rem; align-items: flex-start; margin-top: .4rem; }
.consent input { margin-top: .2rem; width: 18px; height: 18px; accent-color: var(--bronze); flex-shrink: 0; cursor: pointer; }
.consent label { font-size: .84rem; font-weight: 300; color: var(--cream-dim); }
.consent a { color: var(--bronze-light); text-decoration: underline; text-underline-offset: 3px; }

.form-actions { margin-top: 2rem; }
.form-actions .btn { width: 100%; }
.form-note { text-align: center; font-size: .78rem; color: var(--cream-dim); margin-top: 1.1rem; }

/* Estado de senha */
.pw-match { font-size: .74rem; margin-top: .1rem; }
.pw-match.ok { color: #7fc79a; }
.pw-match.no { color: #e08a6f; }

/* ----- Tela de sucesso ----- */
.success {
  position: fixed; inset: 0; z-index: 200; display: none; place-items: center;
  padding: 1.5rem; background: rgba(6,6,6,.86); backdrop-filter: blur(10px);
}
.success.show { display: grid; animation: fade .4s var(--ease); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.success__card {
  max-width: 480px; text-align: center; padding: clamp(2.4rem, 6vw, 3.4rem);
  border: 1px solid var(--line); border-radius: 26px;
  background: radial-gradient(circle at 50% 0%, rgba(192,137,79,.2), transparent 55%), linear-gradient(165deg, rgba(24,20,16,.96), rgba(12,10,8,.96));
  box-shadow: 0 50px 100px -40px rgba(0,0,0,.8); animation: pop .5s var(--ease);
}
@keyframes pop { from { transform: translateY(20px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
.success__check {
  width: 74px; height: 74px; margin: 0 auto 1.6rem; border-radius: 50%; display: grid; place-items: center;
  color: var(--black); background: var(--grad-bronze); box-shadow: 0 16px 40px -14px rgba(192,137,79,.7);
}
.success__card h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; margin-bottom: .8rem; }
.success__card p { font-weight: 300; color: var(--cream-dim); margin-bottom: 2rem; }
.success__card .btn { width: 100%; }

/* Nav simplificada da página de cadastro */
.nav--min { background: rgba(10,10,10,.82); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line-soft); }
.nav__back { display: inline-flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--cream-dim); transition: color .3s var(--ease); }
.nav__back:hover { color: var(--bronze-glow); }
.nav__back .btn__arrow { transform: rotate(180deg); }

@media (max-width: 900px) {
  .reg__grid { grid-template-columns: 1fr; }
  .reg__aside { position: static; }
}
@media (max-width: 560px) {
  .fgrid { grid-template-columns: 1fr; }
  .brandpick { grid-template-columns: 1fr; }
}