/* ===========================================
   FLOATING LABELS - BRICKS BUILDER & JETFORM
   Estilo inspirado no Shopify
   Label ANTES do Input (estrutura padrão do Bricks)
   =========================================== */

/* Container dos campos - Bricks Builder */
.brxe-form,
.brxe-form .form-group,
.brxe-form-field {
  position: relative;
}

/* Container dos campos - WooCommerce Forms */
.form-group.username,
.form-group.password,
.woocommerce-form-row {
  position: relative;
}

/* Container dos campos - JetForm Builder */
.jet-form-builder-row {
  position: relative;
  padding: 0!important;
}

.jet-form-builder__field-wrap {
  position: relative;
}

/* Estilização dos inputs - Bricks */
.brxe-form input[type="text"],
.brxe-form input[type="email"],
.brxe-form input[type="tel"],
.brxe-form input[type="password"],
.brxe-form input[type="number"],
.brxe-form input[type="url"],
.brxe-form textarea,
.brxe-form select {
  width: 100%;
  height: 3rem;
  padding: 0.875rem 0.75rem; /* 14px top/bottom, 12px left/right quando vazio */
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-xxs);
  font-size: 1rem; /* 16px - previne zoom no mobile */
  line-height: 1.25rem;
  transition: all 0.2s ease;
  background-color: #fff;
  outline: none;
}

/* Padding ajustado quando campo está preenchido - Bricks */
.brxe-form.has-value input,
.brxe-form-field.has-value input,
.brxe-form .has-value input,
.brxe-form.has-value textarea,
.brxe-form-field.has-value textarea,
.brxe-form .has-value textarea,
.brxe-form.has-value select,
.brxe-form-field.has-value select,
.brxe-form .has-value select {
  padding: 1.25rem 0.75rem 0.5rem 0.75rem; /* 20px top, 8px bottom, 12px left/right quando preenchido */
}

/* Estilização dos inputs - WooCommerce Forms */
.form-group.username input.woocommerce-Input,
.form-group.password input.woocommerce-Input,
.woocommerce-form-row input.woocommerce-Input {
  width: 100%;
  height: 3rem;
  padding: 0.875rem 0.75rem; /* 14px top/bottom, 12px left/right quando vazio */
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-xxs);
  font-size: 1rem; /* 16px - previne zoom no mobile */
  line-height: 1.25rem;
  transition: all 0.2s ease;
  background-color: #fff;
  outline: none;
}

/* Padding ajustado quando campo está preenchido - WooCommerce */
.form-group.username.has-value input.woocommerce-Input,
.form-group.password.has-value input.woocommerce-Input,
.woocommerce-form-row.has-value input.woocommerce-Input {
  padding: 1.25rem 0.75rem 0.5rem 0.75rem; /* 20px top, 8px bottom, 12px left/right quando preenchido */
}

/* Estilização dos inputs - JetForm */
.jet-form-builder__field {
  width: 100%;
  height: 3rem;
  padding: 0.875rem 0.75rem; /* 14px top/bottom, 12px left/right quando vazio */
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-xxs);
  font-size: 1rem; /* 16px - previne zoom no mobile */
  line-height: 1.25rem;
  transition: all 0.2s ease;
  background-color: #fff;
  outline: none;
}

/* Padding ajustado quando campo está preenchido - JetForm */
.jet-form-builder-row.has-value .jet-form-builder__field {
  padding: 1.25rem 0.75rem 0.5rem 0.75rem; /* 20px top, 8px bottom, 12px left/right quando preenchido */
}

/* Estilo dos labels - Bricks */
.brxe-form label,
.brxe-form-field label {
  position: absolute;
  left: 0.75rem;
  top: 0.9375rem; /* Centraliza no input de 3rem (48px / 2 = 24px = 1.5rem, menos metade da altura do texto) */
  font-size: 0.875rem;
  font-weight: 400!important;
  letter-spacing: normal!important;
  line-height: 1.25rem;
  text-transform: inherit;
  color: var(--base-100);
  pointer-events: none;
  transition: all 0.2s ease;
  z-index: 1;
}

/* Estilo dos labels - WooCommerce Forms */
.form-group.username label,
.form-group.password label,
.woocommerce-form-row label {
  position: absolute;
  left: 0.75rem;
  top: 0.875rem; /* Centraliza no input de 3rem */
  font-size: 0.875rem;
  font-weight: 400!important;
  letter-spacing: normal!important;
  line-height: 1.25rem;
  text-transform: inherit;
  color: var(--base-100);
  pointer-events: none;
  transition: all 0.2s ease;
  z-index: 1;
}

/* Estilo dos labels - JetForm */
.jet-form-builder__label-text {
  position: absolute;
  left: 0.75rem;
  top: 0.875rem; /* Ajustado para centralizar sem transform */
  font-size: 0.875rem;
  font-weight: 400!important;
  letter-spacing: normal!important;
  line-height: 1.25rem;
  text-transform: inherit;
  color: var(--base-100);
  pointer-events: none;
  transition: all 0.2s ease;
  z-index: 1;
  width: auto;
  display: inline-block;
}

/* Label flutuante quando campo está em foco - Bricks */
.brxe-form input:focus + label,
.brxe-form textarea:focus + label,
.brxe-form select:focus + label,
.brxe-form-field input:focus + label,
.brxe-form-field textarea:focus + label,
.brxe-form input:focus ~ label,
.brxe-form textarea:focus ~ label,
.brxe-form select:focus ~ label {
  top: 0.40625rem;
  left: 0.75rem;
  font-size: 0.75rem;
  line-height: 0.75rem;
  color: var(--neutral-500);
  z-index: 5;
}

/* Label flutuante quando campo está preenchido - Bricks (via classe JS) */
.brxe-form.has-value label,
.brxe-form-field.has-value label,
.brxe-form .has-value label {
  top: 0.40625rem;
  left: 0.75rem;
  font-size: 0.625rem;
  line-height: 0.75rem;
  color: var(--neutral-500);
  z-index: 5;
}

/* Label flutuante quando campo está em foco - WooCommerce */
.form-group.username input:focus ~ label,
.form-group.password input:focus ~ label,
.woocommerce-form-row input:focus ~ label {
  top: 0.40625rem;
  left: 0.75rem;
  font-size: 0.75rem;
  line-height: 0.75rem;
  color: var(--neutral-500);
  z-index: 5;
}

/* Label flutuante quando campo está preenchido - WooCommerce (via classe JS) */
.form-group.username.has-value label,
.form-group.password.has-value label,
.woocommerce-form-row.has-value label {
  top: 0.40625rem;
  left: 0.75rem;
  font-size: 0.625rem;
  line-height: 0.75rem;
  color: var(--neutral-500);
  z-index: 5;
}

/* Label flutuante quando campo está em foco - JetForm */
/* Apenas quando tem valor, não no foco vazio */
.jet-form-builder-row.has-value .jet-form-builder__label,
.jet-form-builder-row.has-value .jet-form-builder__label-text {
  top: 0.40625rem;
  left: 0.75rem;
  font-size: 0.625rem;
  line-height: 0.75rem;
  color: var(--neutral-500);
  z-index: 5;
}

/* Borda do campo em foco - Bricks */
.brxe-form input:focus,
.brxe-form textarea:focus,
.brxe-form select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--secondary-100);
}

/* Borda do campo em foco - WooCommerce */
.form-group.username input:focus,
.form-group.password input:focus,
.woocommerce-form-row input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--secondary-100);
}

/* Borda do campo em foco - JetForm */
.jet-form-builder__field:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--secondary-100);
}

/* Remove o placeholder padrão */
.brxe-form input::placeholder,
.brxe-form textarea::placeholder,
.jet-form-builder__field::placeholder,
.form-group.username input::placeholder,
.form-group.password input::placeholder,
.woocommerce-form-row input::placeholder {
  opacity: 0;
  color: transparent;
}

/* Ajustes para textarea */
.brxe-form textarea,
.jet-form-builder__field[type="textarea"],
.jet-form-builder textarea {
  min-height: 120px;
  resize: vertical;
}

/* Suporte para validação de erro - Bricks */
.brxe-form .error input,
.brxe-form .error textarea,
.brxe-form .error select {
  border-color: #ef4444;
}

.brxe-form .error label {
  color: #ef4444 !important;
}

/* Suporte para validação de erro - JetForm */
.jet-form-builder-row.jet-form-builder__field--error .jet-form-builder__field {
  border-color: #ef4444;
}

.jet-form-builder-row.jet-form-builder__field--error .jet-form-builder__label,
.jet-form-builder-row.jet-form-builder__field--error .jet-form-builder__label-text {
  color: #ef4444 !important;
}

/* Ajuste para select (sempre manter label flutuante) */
.brxe-form select ~ label,
.jet-form-builder-row:has(select) .jet-form-builder__label,
.jet-form-builder-row:has(select) .jet-form-builder__label-text {
  top: 0.40625rem;
  left: 0.75rem;
  font-size: 0.75rem;
  line-height: 0.75rem;
  color: var(--neutral-500);
  font-weight: 400;
  z-index: 5;
}