/* =========================================================
   Confete Pet: página de cadastro de clientes
   Usa os tokens e componentes de styles.css
   ========================================================= */

.page-cadastro { background: var(--c-cream); }

/* ---------- Cabeçalho (arte "Cadastro de Clientes") ---------- */
.cad-banner { background: #fff; border-bottom: 3px solid var(--c-ink); }
.cad-banner-inner {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: clamp(1.25rem, 5vw, 4rem); padding-block: clamp(1.5rem, 4vw, 2.75rem);
}
.cad-photo {
  width: clamp(150px, 26vw, 300px); aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  background: linear-gradient(135deg, var(--c-yellow) 0%, var(--c-orange) 55%, var(--c-orange-deep) 100%);
  border: 4px solid var(--c-ink); box-shadow: 8px 8px 0 var(--c-yellow);
}
.cad-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.cad-title { text-align: center; }
.cad-title h1 {
  font-size: clamp(1.9rem, 5.2vw, 3.6rem); font-weight: 700; color: #000; margin-bottom: .35em;
}
.cad-title img { width: min(100%, 620px); margin-inline: auto; }

/* ---------- Área do formulário ---------- */
.cad { position: relative; isolation: isolate; overflow: hidden; padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(3rem, 6vw, 4.5rem); }
.cad-wrap { max-width: 820px; }

.cad-card {
  background: #fff; border: 3px solid var(--c-ink); border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 4vw, 2.6rem); box-shadow: 10px 10px 0 var(--c-orange);
}
.cad-card > h2 { font-size: clamp(1.7rem, 3.4vw, 2.2rem); margin-bottom: .25em; }
.cad-lead { color: var(--c-ink-soft); margin-bottom: .4rem; }
.cad-hint { color: var(--c-ink-soft); font-size: .9rem; margin-bottom: 1.6rem; }
.req { color: var(--c-pink-deep); font-weight: 700; }

/* ---------- Campos ---------- */
.field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1.1rem; min-width: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.field-row--num { grid-template-columns: 160px 1fr; }
.field-row--city { grid-template-columns: 1fr 1fr 90px; }
.field-row--cep { grid-template-columns: 200px 1fr; align-items: start; }

.field label, .group legend {
  font-family: var(--f-display); font-weight: 600; font-size: 1.02rem; color: var(--c-ink);
}
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="date"] {
  width: 100%; min-height: 50px; padding: .7rem 1rem;
  font: inherit; font-size: 1rem; color: var(--c-ink); background: var(--c-cream);
  border: 2.5px solid var(--c-ink); border-radius: var(--radius-sm);
  transition: border-color .15s, box-shadow .15s, background .15s;
  appearance: none; -webkit-appearance: none;
}
.field input::placeholder { color: #a08b7e; }
.field input:hover { background: #fff; }
.field input:focus { outline: none; background: #fff; border-color: var(--c-orange); box-shadow: 0 0 0 4px rgb(255 102 0 / .2); }
.field.is-invalid input { border-color: var(--c-pink); background: #fff5f9; }
.field.is-invalid input:focus { box-shadow: 0 0 0 4px rgb(255 0 102 / .18); }
.field.is-valid input { border-color: #1f9d55; }
.error { margin: 0; min-height: 0; font-size: .86rem; font-weight: 600; color: var(--c-pink-deep); }
.error:empty { display: none; }

.input-prefix { display: flex; align-items: stretch; }
.input-prefix span {
  display: grid; place-items: center; padding: 0 .9rem; font-weight: 700; color: var(--c-ink);
  background: var(--c-yellow); border: 2.5px solid var(--c-ink); border-right: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.input-prefix input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important; }

.group {
  margin: .6rem 0 1.4rem; padding: 1.2rem 1.2rem .2rem; border: 2.5px dashed var(--c-orange); border-radius: var(--radius);
}
.group legend { padding: 0 .5rem; font-size: 1.15rem; }
.group--pet { border-color: var(--c-pink); background: rgb(255 0 102 / .03); }
.cep-status { margin: 2.2rem 0 0; font-size: .9rem; color: var(--c-ink-soft); }
.cep-status.is-loading::before { content: "⏳ "; }
.cep-status.is-ok { color: #1f7a44; font-weight: 600; }
.cep-status.is-error { color: var(--c-pink-deep); font-weight: 600; }

.field--check { display: grid; grid-template-columns: auto 1fr; gap: .4rem .8rem; align-items: start; margin-top: .4rem; }
.field--check input {
  appearance: none; -webkit-appearance: none; width: 30px; height: 30px; margin: 2px 0 0; cursor: pointer;
  border: 2.5px solid var(--c-ink); border-radius: 8px; background: #fff; display: grid; place-items: center;
}
.field--check input:checked { background: var(--c-orange); }
.field--check input:checked::after { content: "✓"; color: var(--c-ink); font-weight: 700; font-size: .95rem; }
.field--check input:focus-visible { outline: 3px solid var(--c-pink); outline-offset: 2px; }
.field--check label { font-family: var(--f-body); font-weight: 500; font-size: .93rem; color: var(--c-ink-soft); cursor: pointer; }
.field--check label a { color: var(--c-orange-text); font-weight: 600; }
.field--check .error { grid-column: 2; }

/* Anti-spam (honeypot) */
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Envio ---------- */
.cad-submit { width: 100%; margin-top: .6rem; position: relative; }
.cad-submit .spinner {
  display: none; width: 20px; height: 20px; border-radius: 50%;
  border: 3px solid rgb(43 26 18 / .25); border-top-color: var(--c-ink); animation: cad-spin .7s linear infinite;
}
.cad-submit.is-loading { pointer-events: none; opacity: .85; }
.cad-submit.is-loading .spinner { display: inline-block; }
@keyframes cad-spin { to { transform: rotate(360deg); } }

.form-status { margin-top: 1rem; border-radius: var(--radius-sm); font-weight: 600; }
.form-status:empty { display: none; }
.form-status.is-error { padding: .9rem 1.1rem; background: #fff0f6; border: 2px solid var(--c-pink); color: var(--c-pink-deep); }

.cad-success { text-align: center; padding: 1rem 0; }
.cad-success img { width: min(240px, 60%); margin: 0 auto 1rem; }
.cad-success h2 { font-size: clamp(1.8rem, 4vw, 2.4rem); }
.cad-success p { color: var(--c-ink-soft); max-width: 30em; margin-inline: auto; margin-bottom: 1.5rem; }
.cad-success:focus { outline: none; }

/* ---------- Privacidade ---------- */
.privacy { max-width: 820px; margin-top: 2.5rem; font-size: .92rem; color: var(--c-ink-soft); }
.privacy h2 { font-size: 1.3rem; color: var(--c-ink); }
.privacy a { color: var(--c-orange-text); font-weight: 600; }

.site-footer--mini { padding: 1.5rem 0; }
.site-footer--mini .footer-bottom { margin-top: 0; padding-top: 0; border-top: 0; }
.site-footer--mini a { color: #f5e9dc; }

/* ---------- Responsivo ---------- */
@media (max-width: 700px) {
  .cad-banner-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .cad-photo { width: min(220px, 60vw); }
  .field-row, .field-row--num, .field-row--cep { grid-template-columns: 1fr; }
  .field-row--city { grid-template-columns: 1fr 90px; }
  .field-row--city .field:first-child { grid-column: 1 / -1; }
  .cep-status { margin: -.6rem 0 1rem; }
  .cad-card { box-shadow: 6px 6px 0 var(--c-orange); }
}