/*
 * ASC Director Election — Bit Form Pro Custom CSS
 * Minimal underline style, modern and refined
 *
 * HOW TO USE:
 * In Bit Form Pro → your form → Style → Custom CSS
 * Paste this entire block in there and save.
 */

/* ── Form wrapper ─────────────────────────────────────────────────────────── */

.bitform-wrapper,
.bitform-container {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  max-width: 620px;
  margin: 0 auto;
}

/* ── Field labels ─────────────────────────────────────────────────────────── */

.bitform-label,
.bf-label,
.label-container label,
[class*="label"] {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #888 !important;
  margin-bottom: 6px !important;
  display: block;
}

/* Required asterisk */
.bitform-label .required,
.bf-label .required,
label .required,
label span[style*="color: red"],
label span[style*="color:red"] {
  color: #c0a060 !important;
  margin-left: 3px;
}

/* ── Text inputs ──────────────────────────────────────────────────────────── */

.bitform-wrapper input[type="text"],
.bitform-wrapper input[type="email"],
.bitform-wrapper input[type="tel"],
.bitform-wrapper input[type="number"],
.bitform-wrapper textarea {
  background: transparent !important;
  border: none !important;
  border-bottom: 1.5px solid #ddd !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 10px 0 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  color: #1a1a1a !important;
  width: 100% !important;
  transition: border-color 0.2s ease !important;
}

.bitform-wrapper input[type="text"]:focus,
.bitform-wrapper input[type="email"]:focus,
.bitform-wrapper input[type="tel"]:focus,
.bitform-wrapper textarea:focus {
  border-bottom-color: #1a1a1a !important;
  box-shadow: none !important;
}

/* Placeholder */
.bitform-wrapper input::placeholder,
.bitform-wrapper textarea::placeholder {
  color: #bbb !important;
  font-size: 14px !important;
}

/* ── Select / Dropdown ────────────────────────────────────────────────────── */

.bitform-wrapper select,
.bitform-wrapper .bf-select,
.bitform-wrapper [class*="select"] select {
  background: transparent !important;
  border: none !important;
  border-bottom: 1.5px solid #ddd !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 10px 28px 10px 0 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  color: #1a1a1a !important;
  width: 100% !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 4px center !important;
  cursor: pointer !important;
  transition: border-color 0.2s ease !important;
}

.bitform-wrapper select:focus,
.bitform-wrapper .bf-select:focus,
.bitform-wrapper [class*="select"] select:focus {
  border-bottom-color: #1a1a1a !important;
  box-shadow: none !important;
}

/* Dropdown wrapper — remove any box/shadow Bit Form adds */
.bitform-wrapper [class*="select-field"],
.bitform-wrapper [class*="dropdown"],
.bitform-wrapper .bf-select-wrapper {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* ── Field groups / rows ──────────────────────────────────────────────────── */

.bitform-wrapper .bf-field-group,
.bitform-wrapper [class*="field-group"],
.bitform-wrapper [class*="form-group"] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-bottom: 28px !important;
}

/* ── Helper text ──────────────────────────────────────────────────────────── */

.bitform-wrapper .bf-helper,
.bitform-wrapper [class*="helper"] {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 11px !important;
  color: #bbb !important;
  margin-top: 5px !important;
  display: none; /* hide if empty — remove this line if you want helper text to show */
}

/* ── Rank number badge (visual label for each choice) ─────────────────────── */
/* Adds a subtle rank indicator before each dropdown label */

.bitform-wrapper [class*="b19-2"] .bitform-label::before { content: "01 "; }
.bitform-wrapper [class*="b19-3"] .bitform-label::before { content: "02 "; }
.bitform-wrapper [class*="b19-4"] .bitform-label::before { content: "03 "; }
.bitform-wrapper [class*="b19-5"] .bitform-label::before { content: "04 "; }
.bitform-wrapper [class*="b19-6"] .bitform-label::before { content: "05 "; }
.bitform-wrapper [class*="b19-7"] .bitform-label::before { content: "06 "; }

/* ── Submit button ────────────────────────────────────────────────────────── */

.bitform-wrapper button[type="submit"],
.bitform-wrapper .bf-submit-btn,
.bitform-wrapper [class*="submit"] button,
.bitform-wrapper input[type="submit"] {
  background: #1a1a1a !important;
  color: #fff !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 14px 40px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background 0.2s ease, transform 0.1s ease !important;
  box-shadow: none !important;
  margin-top: 12px !important;
}

.bitform-wrapper button[type="submit"]:hover,
.bitform-wrapper .bf-submit-btn:hover {
  background: #333 !important;
  transform: translateY(-1px) !important;
}

.bitform-wrapper button[type="submit"]:active,
.bitform-wrapper .bf-submit-btn:active {
  transform: translateY(0) !important;
}

/* ── Error states ─────────────────────────────────────────────────────────── */

.bitform-wrapper input.bf-error,
.bitform-wrapper select.bf-error,
.bitform-wrapper [class*="error"] input,
.bitform-wrapper [class*="error"] select {
  border-bottom-color: #c0392b !important;
}

.bitform-wrapper .bf-error-msg,
.bitform-wrapper [class*="error-msg"] {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 11px !important;
  color: #c0392b !important;
  margin-top: 4px !important;
}

/* ── Import DM Sans from Google Fonts ─────────────────────────────────────── */
/* Add this to your WordPress theme's <head> or via a plugin like WPCode:     */
/* <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&display=swap" rel="stylesheet"> */