/* ==========================================================================
   FORMULÁRIO BEES — versão moderna (largura total)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Cores */
  --bees-yellow: #f5d800;
  --bees-yellow-hover: #ffe94d;
  --bees-yellow-soft: rgba(245, 216, 0, 0.12);
  --bees-yellow-glow: rgba(245, 216, 0, 0.35);
  --bees-bg: #1c1b13;
  --bees-bg-elevated: #2b2a1f;
  --bees-surface: rgba(255, 255, 255, 0.04);
  --bees-border: rgba(245, 216, 0, 0.18);
  --bees-text: #f4f1e6;
  --bees-text-muted: #b5b09a;
  --bees-input-bg: #f3eddc;
  --bees-input-text: #1a1a1a;

  /* Espaçamento */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;

  /* Raios e sombras */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --shadow-card: 0 20px 50px -20px rgba(0, 0, 0, 0.6);
  --shadow-button: 0 10px 30px -10px var(--bees-yellow-glow);

  /* Movimento */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --duration: 0.3s;

  /* Ajuste vertical (só desktop): espaço que o tema deixa acima/abaixo do
     formulário. Aumente ou diminua até o fundo do formulário encostar no
     banner (topo) e na linha amarela do rodapé (base).
     No celular esses valores são zerados (ver seção 9). */
  --bees-gap-top: 100px;
  --bees-gap-bottom: 85px;
}

/* --------------------------------------------------------------------------
   2. Reset base + remoção da barra de rolagem
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  /* esconde a barra de rolagem (a página continua rolando normalmente) */
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
.webform-submission-form::-webkit-scrollbar,
.webform-submission-form *::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.webform-submission-form,
.webform-submission-form * {
  scrollbar-width: none !important;
}

/* --------------------------------------------------------------------------
   3. Wrapper do formulário (ocupa a largura total da tela)
   -------------------------------------------------------------------------- */
.webform-submission-form {
  /* escapa do container do tema e ocupa a tela inteira */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  /* escapa do espaçamento vertical do tema e devolve como padding interno */
  margin-top: calc(-1 * var(--bees-gap-top));
  margin-bottom: calc(-1 * var(--bees-gap-bottom));

  padding-top: calc(clamp(1.5rem, 4vw, 4rem) + var(--bees-gap-top));
  padding-bottom: calc(clamp(1.5rem, 4vw, 4rem) + var(--bees-gap-bottom));
  padding-left: clamp(0.5rem, 1.5vw, 1.5rem);
  padding-right: clamp(0.5rem, 1.5vw, 1.5rem);

  color: var(--bees-text);
  /* degradê do centro para as bordas: mais claro no meio, escurecendo até as laterais */
  background:
    radial-gradient(ellipse at center, var(--bees-yellow-soft) 0%, transparent 65%),
    radial-gradient(ellipse at center, var(--bees-bg-elevated) 0%, var(--bees-bg) 100%);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   4. Layout em colunas
   -------------------------------------------------------------------------- */
.webform-submission-form .linha-bees {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: none;
  margin: 0;
  gap: clamp(1rem, 2vw, 2rem);
}

/* Cada coluna vira um card */
.webform-submission-form .coluna-bees {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(1.25rem, 2.5vw, 2.5rem);
  background: var(--bees-surface);
  border: 1px solid var(--bees-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition:
    border-color var(--duration) var(--ease),
    transform var(--duration) var(--ease);
}

.webform-submission-form .coluna-bees:hover,
.webform-submission-form .coluna-bees:focus-within {
  border-color: rgba(245, 216, 0, 0.4);
}

/* --------------------------------------------------------------------------
   5. Fieldset e títulos
   -------------------------------------------------------------------------- */
.webform-submission-form fieldset {
  border: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.webform-submission-form .markup-element,
.webform-submission-form legend {
  position: relative;
  width: 100%;
  margin: 0 0 var(--space-3);
  padding: 0 0 var(--space-2);
  border: none;
  color: var(--bees-yellow);
  font-size: clamp(1.35rem, 1.1rem + 1.2vw, 2rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
}

/* Detalhe decorativo sob o título */
.webform-submission-form .markup-element::after,
.webform-submission-form legend::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 56px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--bees-yellow);
  transform: translateX(-50%);
  box-shadow: 0 0 18px var(--bees-yellow-glow);
}

/* --------------------------------------------------------------------------
   6. Labels (títulos dos campos) — amarelo
   -------------------------------------------------------------------------- */
.webform-submission-form label,
.webform-submission-form .form-item label,
.webform-submission-form .form-item > label,
.webform-submission-form .form-item__label {
  display: block;
  margin: var(--space-3) 0 var(--space-1);
  color: var(--bees-yellow) !important;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
}

/* --------------------------------------------------------------------------
   7. Inputs
   -------------------------------------------------------------------------- */
.webform-submission-form input[type="text"] {
  display: block;
  width: 92%;
  max-width: 900px;
  height: 52px;
  margin: 0 auto;
  padding: 0 var(--space-2);
  background: var(--bees-input-bg);
  color: var(--bees-input-text);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  font: inherit;
  font-size: 1rem;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(245, 216, 0, 0.35);
  transition:
    border-color var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease),
    transform var(--duration) var(--ease),
    background-color var(--duration) var(--ease);
}

.webform-submission-form input[type="text"]::placeholder {
  color: #8a8570;
}

.webform-submission-form input[type="text"]:hover {
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.08),
    0 0 0 1px var(--bees-yellow);
}

.webform-submission-form input[type="text"]:focus {
  outline: none;
  background: #fff;
  border-color: var(--bees-yellow);
  box-shadow:
    0 0 0 4px var(--bees-yellow-glow),
    0 8px 24px -8px rgba(0, 0, 0, 0.5);
  transform: translateY(-1px);
}

/* Sem linha vermelha em nenhum estado (normal, foco, erro, obrigatório, inválido).
   O !important é necessário porque o tema aplica a borda vermelha com mais força. */
.webform-submission-form input[type="text"],
.webform-submission-form input[type="text"]:hover,
.webform-submission-form input[type="text"]:active,
.webform-submission-form input[type="text"]:required,
.webform-submission-form input[type="text"]:invalid,
.webform-submission-form input[type="text"]:-moz-ui-invalid,
.webform-submission-form input[type="text"].error,
.webform-submission-form input[type="text"].required,
.webform-submission-form input[type="text"][aria-invalid="true"],
.webform-submission-form .form-item--error input[type="text"] {
  border: 2px solid transparent !important;
  outline: none !important;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(245, 216, 0, 0.35) !important;
}

/* Foco: contorno amarelo (nunca vermelho) */
.webform-submission-form input[type="text"]:focus,
.webform-submission-form input[type="text"]:focus-visible,
.webform-submission-form input[type="text"].error:focus,
.webform-submission-form input[type="text"][aria-invalid="true"]:focus,
.webform-submission-form .form-item--error input[type="text"]:focus {
  background: #fff !important;
  border: 2px solid var(--bees-yellow) !important;
  outline: none !important;
  box-shadow:
    0 0 0 4px var(--bees-yellow-glow),
    0 8px 24px -8px rgba(0, 0, 0, 0.5) !important;
}

/* --------------------------------------------------------------------------
   8. Botão de envio
   -------------------------------------------------------------------------- */
.webform-submission-form .webform-button--submit {
  position: relative;
  display: block;
  margin: var(--space-4) auto 0;
  padding: 1rem 3.75rem;
  overflow: hidden;
  background: linear-gradient(135deg, var(--bees-yellow), #ffc400);
  color: #1a1a1a;
  border: none;
  border-radius: var(--radius-pill);
  font: inherit;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--shadow-button);
  transition:
    transform var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease),
    filter var(--duration) var(--ease);
}

/* Brilho que atravessa o botão no hover */
.webform-submission-form .webform-button--submit::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 30%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 70%
  );
  transform: translateX(-120%);
  transition: transform 0.7s var(--ease);
}

.webform-submission-form .webform-button--submit:hover {
  transform: translateY(-3px);
  filter: brightness(1.05);
  box-shadow: 0 18px 40px -12px var(--bees-yellow-glow);
}

.webform-submission-form .webform-button--submit:hover::before {
  transform: translateX(120%);
}

.webform-submission-form .webform-button--submit:active {
  transform: translateY(0) scale(0.98);
}

.webform-submission-form .webform-button--submit:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}

/* --------------------------------------------------------------------------
   9. Tablet e celular (≤ 992px): colunas empilhadas
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
  /* no celular o tema não deixa o mesmo espaço vertical, então não compensa */
  :root {
    --bees-gap-top: 0px;
    --bees-gap-bottom: 0px;
  }

  .webform-submission-form {
    padding-left: var(--space-1);
    padding-right: var(--space-1);
  }

  .webform-submission-form .linha-bees {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    width: 100%;
    gap: var(--space-3);
  }

  .webform-submission-form .coluna-bees {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .webform-submission-form fieldset {
    width: 100%;
  }

  .webform-submission-form input[type="text"] {
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .webform-submission-form .webform-button--submit {
    width: 100%;
    max-width: 420px;
    margin-top: var(--space-3);
  }
}

/* --------------------------------------------------------------------------
   10. Celular pequeno (≤ 576px)
   -------------------------------------------------------------------------- */
@media (max-width: 576px) {
  .webform-submission-form .coluna-bees {
    padding: var(--space-3) var(--space-2);
    border-radius: var(--radius-md);
  }

  .webform-submission-form label,
  .webform-submission-form .form-item label {
    font-size: 0.8rem;
  }

  .webform-submission-form input[type="text"] {
    height: 48px;
    font-size: 16px; /* evita zoom automático no iOS */
  }

  .webform-submission-form .webform-button--submit {
    max-width: 100%;
    padding: 1rem;
    font-size: 1rem;
  }
}

/* --------------------------------------------------------------------------
   11. Acessibilidade: respeita quem reduz animações
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}