/* Mês do Idoso – Niterói 2026 · página de inscrição · Feito por Michel Brotherhood */

/* ---------- Inscrição ---------- */
.insc-head { text-align: center; }
.insc-head .section-sub { margin-inline: auto; }
.form-wrap { max-width: 760px; margin: 36px auto 0; }
.form {
  display: grid; gap: 26px; padding: 28px 20px 24px;
  background: var(--cream); border-radius: 28px; box-shadow: var(--shadow);
}
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.field { display: grid; gap: 8px; min-width: 0; border: 0; padding: 0; margin: 0; }
.field.sub { margin-top: 14px; }
.field > label, .field > legend { font-size: 1.1rem; font-weight: 700; line-height: 1.3; padding: 0; }
.field > legend { margin-bottom: 8px; float: left; width: 100%; }
.field > legend + * { clear: both; }
.field input[type='text'] {
  width: 100%; min-height: 58px; padding: 12px 16px;
  font: inherit; font-size: 1.125rem; color: var(--slate-deep);
  background: var(--white); border: 2px solid #5d7777; border-radius: 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input[type='text']::placeholder { color: #6b7f7f; opacity: 1; }
.field input[type='text']:hover { border-color: var(--slate-deep); }
.field input[type='text']:focus-visible { border-color: var(--slate-deep); outline: 3px solid var(--gold); outline-offset: 2px; }
.field-hint { font-size: .95rem; color: #3f5959; }
.field-error { display: flex; gap: 8px; align-items: flex-start; font-size: 1rem; font-weight: 700; color: #B3261E; }
.field-error::before {
  content: '!'; flex: none; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%;
  display: grid; place-items: center; background: #B3261E; color: var(--white); font-size: .85rem; font-weight: 800;
}
.field-error[hidden] { display: none; }
.has-error input[type='text'] { border-color: #B3261E; background: #FFF6F5; }
.has-error .choice-box { border-color: #B3261E; }
.has-error .check-box { border-color: #B3261E; }

/* Escolhas (rádios em cartões) */
.choices { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.choice { display: block; position: relative; cursor: pointer; }
.choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choice-box {
  display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 12px 16px;
  background: var(--white); border: 2px solid #5d7777; border-radius: 14px;
  font-size: 1.125rem; font-weight: 600; line-height: 1.25;
  transition: background-color .15s ease, border-color .15s ease;
}
.choice:hover .choice-box { border-color: var(--slate-deep); }
.choice-mark { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #5d7777; background: var(--white); display: grid; place-items: center; }
.choice-mark::after { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--slate-deep); transform: scale(0); transition: transform .15s ease; }
.choice input:checked + .choice-box { background: #FBEBC8; border-color: var(--slate-deep); }
.choice input:checked + .choice-box .choice-mark { border-color: var(--slate-deep); }
.choice input:checked + .choice-box .choice-mark::after { transform: scale(1); }
.choice input:focus-visible + .choice-box { outline: 3px solid var(--gold); outline-offset: 2px; border-color: var(--slate-deep); }

/* Caixa de concordância */
.check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; cursor: pointer; position: relative; font-weight: 500 !important; }
.check input { position: absolute; opacity: 0; width: 28px; height: 28px; margin: 0; left: 0; top: 0; cursor: pointer; }
.check-box { width: 28px; height: 28px; border-radius: 8px; border: 2px solid #5d7777; background: var(--white); display: grid; place-items: center; color: var(--white); }
.check-box .ico { width: 20px; height: 20px; stroke-width: 3.5; opacity: 0; }
.check input:checked + .check-box { background: var(--slate-deep); border-color: var(--slate-deep); }
.check input:checked + .check-box .ico { opacity: 1; }
.check input:focus-visible + .check-box { outline: 3px solid var(--gold); outline-offset: 2px; }
.check-text { font-size: 1rem; line-height: 1.5; }

.btn-block { width: 100%; }
.form-alert { padding: 14px 16px; border-radius: 14px; background: #FFF6F5; border: 2px solid #B3261E; color: #7A1812; font-weight: 700; }
.form-alert[hidden] { display: none; }
.btn[disabled] { opacity: .7; cursor: progress; transform: none; }

.form-success {
  display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
  padding: 40px 24px; background: var(--cream); border-radius: 28px; box-shadow: var(--shadow);
}
.form-success[hidden] { display: none; }
.form-success h3 { font-size: 1.6rem; line-height: 1.2; }
.form-success:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.demo-note { padding: 10px 14px; border-radius: 12px; background: var(--white); font-size: .95rem; font-weight: 600; }
.demo-note[hidden] { display: none; }

/* Cabeçalho da página */
.page-head { background: linear-gradient(135deg, var(--slate-deep), var(--slate)); color: var(--white); padding-block: 14px; padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
.page-head-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.brand img { width: 150px; height: auto; }
.back-link { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 4px; font-weight: 700; text-decoration: none; }
.back-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.back-link .ico { width: 1.2em; height: 1.2em; }

.form-page { padding-top: 48px; }
.form-page h1.section-title { margin-top: 2px; }
.info-chips-light { margin: 22px auto 0; }
.info-chips-light li { background: var(--cream); border-color: #d9c9b0; color: var(--slate-deep); backdrop-filter: none; -webkit-backdrop-filter: none; }
.info-chips-light .ico { color: var(--gold-ink); }
.success-actions { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 360px; margin-top: 8px; }

/* ≥ 640px */
@media (min-width: 640px) {
  .choices-2, .choices-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form { padding: 40px 36px 36px; gap: 28px; }
  .brand img { width: 180px; }
}
/* ≥ 900px */
@media (min-width: 900px) {
  .choices-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .form-page { padding-top: 72px; padding-bottom: 96px; }
}

/* sem barra fixa nesta página */
.page-inscricao { padding-bottom: 0; }

/* Página de privacidade */
.legal { max-width: 46rem; margin-inline: auto; }
.legal .section-title { text-align: left; }
.legal .eyebrow { text-align: left; }
.legal-date { color: var(--slate); font-size: .95rem; margin-bottom: 20px; }
.legal h2 { font-size: 1.25rem; line-height: 1.3; margin: 32px 0 8px; color: var(--ink); }
.legal p, .legal li { font-size: 1.05rem; line-height: 1.7; color: var(--ink); overflow-wrap: anywhere; }
.legal p { margin: 0 0 12px; }
.legal ul { margin: 0 0 12px; padding-left: 1.3em; list-style: disc; }
.legal a:not(.btn) { color: var(--slate); text-decoration: underline; text-underline-offset: 3px; }
.legal-back { margin-top: 32px; }
.check-text a { color: var(--slate); text-decoration: underline; text-underline-offset: 3px; font-weight: 700; position: relative; z-index: 1; }

/* Seletor de núcleo */
.select-wrap { position: relative; }
.select-wrap select {
  appearance: none; -webkit-appearance: none; width: 100%; min-height: 58px; padding: 12px 52px 12px 16px;
  font: inherit; font-size: 1.125rem; color: var(--slate-deep); background: var(--white);
  border: 2px solid #5d7777; border-radius: 14px; cursor: pointer; text-overflow: ellipsis;
  transition: border-color .15s ease;
}
.select-wrap select:invalid { color: #4d6565; }
.select-wrap select:hover { border-color: var(--slate-deep); }
.select-wrap select:focus-visible { border-color: var(--slate-deep); outline: 3px solid var(--gold); outline-offset: 2px; }
.select-arrow { position: absolute; right: 16px; top: 50%; width: 24px; height: 24px; margin-top: -12px; pointer-events: none; color: var(--slate-deep); fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.has-error .select-wrap select { border-color: #B3261E; background: #FFF6F5; }

.sub-field { margin-top: 0; }