/* ============================================================
   Campanha Ricardo Ceda — Cadastro de Apoiadores
   Arte (background.png 941x1672) como fundo; formulário real
   posicionado no degradê abaixo da foto.
   ============================================================ */

:root {
  --orange:      #f3811f;
  --orange-soft: #ffb066;
  --orange-grad: linear-gradient(135deg, #ffae5c 0%, #f3811f 48%, #e06d10 100%);
  --navy:        #010a19;   /* = cor da base do degradê da arte */
  --text:        #eef1fb;
  --text-dim:    #9aa3c6;
  --error:       #ff7a7a;
  --sans: 'Montserrat', system-ui, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  color: var(--text);
  background: var(--navy);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ===================== LOADING ===================== */
.loading {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  background: var(--navy);
  transition: opacity .6s ease, visibility .6s ease;
  /* Backup 100% CSS: some sozinho depois de 2.6s, mesmo se o JS travar/cachear */
  animation: loadingAutohide .5s ease 2.6s forwards;
}
.loading.is-hidden { opacity: 0; visibility: hidden; }
@keyframes loadingAutohide { to { opacity: 0; visibility: hidden; } }
.loading__inner { display: flex; flex-direction: column; align-items: center; gap: 24px; }
/* Logo recortado do logo.png (mesmo recorte do que usávamos antes) */
.loading__logo {
  width: min(240px, 62vw);
  position: relative; overflow: hidden; display: block;
  aspect-ratio: 1.795;
  animation: floatY 2.4s ease-in-out infinite;
}
.loading__logo img {
  position: absolute; display: block; height: auto;
  width: 164.9%; left: -36.07%; top: -138.7%;
}
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.loading__bar { width: 180px; height: 5px; border-radius: 4px; background: rgba(255,255,255,.12); overflow: hidden; }
.loading__bar span { display: block; height: 100%; width: 40%; border-radius: 4px; background: var(--orange-grad); animation: slide 1.2s ease-in-out infinite; }
@keyframes slide { 0% { transform: translateX(-120%);} 100% { transform: translateX(360%);} }

/* ===================== APP / ARTE DE FUNDO ===================== */
.app {
  opacity: 0;
  transition: opacity .9s ease;
  position: relative;
  max-width: 520px;
  margin: 0 auto;
  min-height: 100vh;
  /* Arte no topo (largura total da coluna) + navy pra emendar embaixo */
  background:
    url('../assets/background1.png') top center / 100% auto no-repeat,
    var(--navy);
}
.app.is-visible { opacity: 1; }

/* Espaçador = altura da arte até onde o degradê fica bom pro form.
   A arte é 941x1672 (H/W = 1.777). O conteúdo termina ~41%.
   padding-top é % da LARGURA, então empurra proporcionalmente em qualquer tela. */
.hero-spacer { width: 100%; padding-top: 81%; }

/* ===================== FORM ===================== */
.form-wrap {
  position: relative;
  margin: 0 16px;
  background: rgba(6, 12, 30, 0.55);
  border: 1.5px solid rgba(243, 129, 31, 0.55);
  border-radius: 22px;
  padding: 24px 18px 22px;
  box-shadow: 0 0 26px rgba(243,129,31,0.12), 0 22px 55px rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
}
.form__titulo {
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .01em; color: #fff; margin-bottom: 22px; line-height: 1.12;
}
.form__titulo-txt { text-align: center; }
.form__titulo .hl { color: var(--orange); }

.field { margin-bottom: 18px; }
.field > label {
  display: block; font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: #cfd5ea; margin-bottom: 8px;
}
.field > label span { color: var(--orange); }

.input-icon { position: relative; }
.input-icon svg {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; color: var(--orange); pointer-events: none;
}
.input-icon input,
.input-icon select {
  width: 100%; padding: 15px 16px 15px 46px;
  font-size: 1rem; font-family: var(--sans); color: #fff;
  background: rgba(4, 8, 22, 0.68);
  border: 1.5px solid rgba(243, 129, 31, 0.45);
  border-radius: 12px; outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.input-icon input::placeholder { color: #7d86a8; }
.input-icon input:focus,
.input-icon select:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(243,129,31,0.18);
}

/* Combo "Liderança": digite pra filtrar, mas só vale escolhendo da lista */
.combo { position: relative; }
.combo > input[type="text"] {
  padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f3811f' 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 16px center; background-size: 18px;
}
.combo__lista {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px);
  z-index: 40; margin: 0; padding: 6px; list-style: none;
  max-height: 232px; overflow-y: auto;
  background: #0a1030;
  border: 1.5px solid rgba(243,129,31,0.45);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.55);
}
.combo__lista li {
  padding: 11px 14px; border-radius: 8px; cursor: pointer;
  font-size: .95rem; color: #eef1fb;
}
.combo__lista li:hover,
.combo__lista li.is-ativo { background: rgba(243,129,31,0.20); color: #fff; }
/* opção catch-all: separada dos nomes, em itálico */
.combo__lista li.combo__outra {
  margin-top: 5px; padding-top: 13px;
  border-top: 1px solid rgba(255,255,255,0.10);
  font-style: italic; color: #b9c0d8;
}
.combo__vazio { padding: 11px 14px; color: #7d86a8; font-size: .88rem; }

/* Consentimento */
.consent { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.consent input { width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--orange); }
.consent span {
  font-size: .78rem; line-height: 1.45; color: #cfd5ea;
  text-transform: uppercase; letter-spacing: .02em; font-weight: 600;
}
.consent span em { color: var(--orange); font-style: normal; }

/* Botão */
.btn {
  position: relative; width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 20px; margin-top: 4px;
  font-size: 1.05rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; color: #1a1407; cursor: pointer;
  background: var(--orange-grad); border: 0; border-radius: 14px;
  box-shadow: 0 10px 26px rgba(243,129,31,0.35);
  transition: transform .12s ease, box-shadow .18s ease, filter .18s ease;
}
.btn:hover { filter: brightness(1.05); box-shadow: 0 12px 30px rgba(243,129,31,0.45); }
.btn:active { transform: translateY(1px); }
.btn__arrow { width: 22px; height: 22px; }
.btn.is-loading .btn__label, .btn.is-loading .btn__arrow { visibility: hidden; }
.btn__loader {
  display: none; position: absolute; width: 22px; height: 22px;
  border: 3px solid rgba(26,20,7,.35); border-top-color: #1a1407; border-radius: 50%;
  animation: spin .7s linear infinite;
}
.btn.is-loading .btn__loader { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn--ghost {
  background: transparent; color: var(--orange);
  border: 1.5px solid var(--orange); box-shadow: none;
}

.form__note { margin-top: 14px; text-align: center; font-size: .74rem; color: var(--text-dim); }

/* ===================== SUCESSO ===================== */
.success { text-align: center; padding: 14px 6px; }
.success__check {
  width: 68px; height: 68px; margin: 0 auto 16px; border-radius: 50%;
  display: grid; place-items: center; font-size: 2rem; color: #fff;
  background: var(--orange-grad); box-shadow: 0 10px 30px rgba(243,129,31,.4);
  animation: pop .4s ease;
}
@keyframes pop { 0% { transform: scale(.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.success h2 { font-size: 1.4rem; margin-bottom: 8px; }
.success p { color: #cfd5ea; margin-bottom: 20px; }
.success #successName { color: var(--orange); font-weight: 700; }

/* ===================== ADMIN FAB ===================== */
.admin-fab {
  position: fixed; right: 14px; bottom: 14px; z-index: 50;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; font-size: .78rem; font-weight: 600;
  color: var(--text-dim); text-decoration: none;
  background: rgba(6, 12, 30, .82); border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px; backdrop-filter: blur(4px);
  transition: color .18s ease, border-color .18s ease;
}
.admin-fab:hover { color: var(--orange-soft); border-color: rgba(243,129,31,.5); }

/* ===================== PADDING INFERIOR ===================== */
.app { padding-bottom: 34px; }

/* ============================================================
   DESKTOP (>= 1025px) — arte widescreen de fundo + form à direita
   Não afeta o mobile.
   ============================================================ */
@media (min-width: 1025px) {
  .app {
    /* Arte larga preenchendo a tela inteira (sem barras) */
    max-width: none;
    width: 100vw;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    background:
      url('../assets/backgrounddesktop.png') center center / cover no-repeat,
      var(--navy);
  }

  /* Espaçador do mobile não serve aqui */
  .hero-spacer { display: none; }

  /* Formulário real posicionado na área direita (vazia) da arte */
  .form-wrap {
    position: absolute;
    top: 50%;
    right: 1vw;
    transform: translateY(-50%);
    width: min(34vw, 560px);
    max-width: none;
    margin: 0;
    padding: 48px 34px 42px;
    background: rgba(6, 12, 30, 0.8);
    border-radius: 24px;
  }

  .form__titulo { font-size: clamp(1.6rem, 2.1vw, 2.3rem); margin-bottom: 34px; }
  .field { margin-bottom: 28px; }
  .field > label { font-size: .82rem; margin-bottom: 8px; }
  .form-wrap .input-icon input,
  .form-wrap .input-icon select { padding-top: 21px; padding-bottom: 21px; font-size: 1.02rem; }
  .consent { margin: 26px 0; }
  .btn { padding: 20px 22px; font-size: 1.05rem; }
  .form__note { margin-top: 22px; }
}