/*
Theme Name: ETF Minimal
Theme URI: https://elitechforce.com
Author: Elite Tech Force
Author URI: https://elitechforce.com
Description: Lightweight custom theme that renders the original ETF landing (HTML/CSS) inside WordPress.
Version: 1.1.0
License: GPLv2 or later
Text Domain: etf-minimal
*/

:root { color-scheme: dark; }

/* =========================================================
   ETF Minimal – Gravity Forms (Form ID 1)
   Goal: compact spacing + vertical centering + consistent UI
   Scope: ONLY inside .etf-form
   ========================================================= */

.etf-form #gform_wrapper_1,
.etf-form #gform_wrapper_1 * {
  box-sizing: border-box;
}

/* Hide honeypot (it creates visual spacing in some themes) */
.etf-form #gform_wrapper_1 .gfield--type-honeypot {
  display: none !important;
}

/* --- Spacing between fields (this is the “gap” you hate) --- */
.etf-form #gform_wrapper_1 .gform_fields > .gfield {
  margin: 0 0 12px !important;
  padding: 0 !important;
}

/* Labels */
.etf-form #gform_wrapper_1 .gfield_label,
.etf-form #gform_wrapper_1 .gform-field-label {
  color: rgba(230, 237, 246, 0.82) !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
}

/* Reduce extra space GF adds under sublabels (First/Last) */
.etf-form #gform_wrapper_1 .gform-field-label--type-sub {
  margin-top: 6px !important;
  color: rgba(230, 237, 246, 0.72) !important;
}

/* Container spacing (GF adds top margin sometimes) */
.etf-form #gform_wrapper_1 .ginput_container {
  margin: 0 !important;
}

/* ---- Controls: shared look ---- */
.etf-form #gform_wrapper_1 input[type="text"],
.etf-form #gform_wrapper_1 input[type="email"],
.etf-form #gform_wrapper_1 input[type="tel"],
.etf-form #gform_wrapper_1 textarea,
.etf-form #gform_wrapper_1 select.gfield_select {
  width: 100%;
  background: rgba(18, 26, 38, 0.72) !important;
  color: #E6EDF6 !important;
  border: 1px solid rgba(230, 237, 246, 0.22) !important;
  border-radius: 14px !important;

  /* This is the key: same “visual height” as Submit */
  min-height: 44px !important;
  padding: 10px 14px !important;

  /* vertical centering */
  line-height: 24px !important;

  outline: none !important;
}

/* Textarea: keep it bigger but still compact */
.etf-form #gform_wrapper_1 textarea {
  min-height: 120px !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  resize: vertical;
}

/* Placeholders */
.etf-form #gform_wrapper_1 input::placeholder,
.etf-form #gform_wrapper_1 textarea::placeholder {
  color: rgba(230, 237, 246, 0.55) !important;
}

/* --- SELECT fixes: vertical centering + consistent arrow behavior --- */
.etf-form #gform_wrapper_1 select.gfield_select {
  -webkit-appearance: none;
  appearance: none;

  /* Avoid using line-height equal to height (breaks in Safari/Chrome mixed) */
  padding-right: 44px !important; /* space for arrow */
  background-image: none; /* let GF theme draw its arrow OR yours below */
}

/* If you want a consistent arrow across browsers, uncomment this:
.etf-form #gform_wrapper_1 .ginput_container_select {
  position: relative;
}
.etf-form #gform_wrapper_1 .ginput_container_select::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 10px;
  height: 6px;
  transform: translateY(-50%);
  opacity: .7;
  pointer-events: none;
  background: currentColor;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
*/

/* Placeholder option color (the text you said is not centered / looks off) */
.etf-form #gform_wrapper_1 select.gfield_select option.gf_placeholder {
  color: rgba(230, 237, 246, 0.55) !important;
}

/* Dropdown options background */
.etf-form #gform_wrapper_1 select.gfield_select option {
  background: #0f1720 !important;
  color: #E6EDF6 !important;
}

/* Focus states */
.etf-form #gform_wrapper_1 input:focus,
.etf-form #gform_wrapper_1 textarea:focus,
.etf-form #gform_wrapper_1 select:focus {
  background: rgba(18, 26, 38, 0.92) !important;
  border-color: rgba(140, 185, 255, 0.75) !important;
  box-shadow: 0 0 0 3px rgba(80, 140, 255, 0.28) !important;
}

/* Required indicator */
.etf-form #gform_wrapper_1 .gfield_required,
.etf-form #gform_wrapper_1 .gfield_required_text {
  color: #ff6b6b !important;
}

/* Submit button: match the same vertical rhythm as inputs */
.etf-form #gform_wrapper_1 .gform_footer {
  margin-top: 14px !important;
  padding: 0 !important;
}

.etf-form #gform_wrapper_1 input[type="submit"].gform_button,
.etf-form #gform_wrapper_1 button.gform_button {
  border-radius: 16px !important;
  padding: 10px 18px !important;
  min-height: 44px !important;
  line-height: 24px !important;
  font-weight: 700 !important;
}

/* Autofill fix (Chrome/Safari) */
.etf-form #gform_wrapper_1 input:-webkit-autofill,
.etf-form #gform_wrapper_1 textarea:-webkit-autofill,
.etf-form #gform_wrapper_1 select:-webkit-autofill {
  -webkit-text-fill-color: #E6EDF6 !important;
  box-shadow: 0 0 0 1000px rgba(18, 26, 38, 0.92) inset !important;
  transition: background-color 9999s ease-in-out 0s;
}

/* Mobile */
@media (max-width: 480px) {
  .etf-form #gform_wrapper_1 .gform_fields > .gfield {
    margin-bottom: 10px !important;
  }
}

/* ================================
   GF (Form 1) – tighten gaps more
   ================================ */

/* Gap general entre campos */
.etf-form #gform_wrapper_1 .gform_fields {
  row-gap: 10px !important; /* si no aplica, no pasa nada */
}

/* Asegura que cada field no tenga margen extra */
.etf-form #gform_wrapper_1 .gform_fields > .gfield {
  margin-bottom: 8px !important; /* baja el gap aquí */
}

/* Name field: a veces trae margen/padding adicional por ser grid */
.etf-form #gform_wrapper_1 .ginput_container--name,
.etf-form #gform_wrapper_1 .gform-grid-row {
  margin: 0 !important;
  row-gap: 8px !important;
}

/* Footer submit: sin espacio extra arriba */
.etf-form #gform_wrapper_1 .gform_footer {
  margin-top: 10px !important;
}

/* =========================================
   GF (Form 1) – replace "(Required)" with *
   ========================================= */

/* Oculta el texto "(Required)" */
.etf-form #gform_wrapper_1 .gfield_required_text {
  display: none !important;
}

/* Muestra * al lado del label (incluye legend del Name field) */
.etf-form #gform_wrapper_1 .gfield_label .gfield_required::before,
.etf-form #gform_wrapper_1 .gfield_label_before_complex .gfield_required::before {
  content: " *";
  color: #ff6b6b;
  font-weight: 700;
}

/* Evita que el span required meta espacios raros */
.etf-form #gform_wrapper_1 .gfield_required {
  margin-left: 0 !important;
}

/* Legend: required fields (above Gravity Form) */
.etf-required-legend{
  font-size: 12.5px;
  letter-spacing: .01em;
  color: rgba(230, 237, 246, 0.62);
  margin: 8px 0 18px !important;
}

/* Red asterisk */
.etf-required-legend > span{
  color: #ff6b6b;
  font-weight: 900;
}

/* Ensure the first field doesn't "eat" the legend spacing */
.etf-form #gform_wrapper_1 .gform_fields > .gfield:first-child{
  margin-top: 6px !important;
}

/* Recaptcha note - subtle + spaced */
.smallnote .etf-recaptcha-note{
  display:block;
  margin-top:24px !important;   /* <-- aire real */
  font-size:11px;
  opacity: 9;
  line-height:1.35;
  color: rgba(230,237,246,.45);
}

.smallnote .etf-recaptcha-note a{
  color: rgba(140,185,255,.75);
  text-underline-offset: 2px;
  font-weight: 500;
}

body.page .gform_wrapper .gfield--type-checkbox .gchoice label,
body.page .gform_wrapper .gfield--type-consent .gfield_consent_label,
body.page .gform_wrapper .gfield--type-checkbox .gfield_label,
body.page .gform_wrapper .gfield--type-consent .gfield_label {
  color: #e8eef9 !important;
  opacity: 1 !important;
}

body.page .gform_wrapper .gfield--type-checkbox a,
body.page .gform_wrapper .gfield--type-consent a {
  color: #d7e4ff !important;
  text-decoration: underline !important;
}

body.page .gform_wrapper input[type="checkbox"] {
  accent-color: #ffffff;
}