/* ============================================================
   FOURS MEDIA — START A PROJECT FORM
   Custom CSS for JetFormBuilder
   Paste into: WordPress Admin → Appearance → Customize → Additional CSS
   ============================================================ */


/* ============================================================
   RADIO & CHECKBOX → PILL SELECTORS
   ============================================================ */

/* Layout: horizontal wrap */
.jet-form-builder__field-wrap .jet-form-builder-row,
.jet-form-builder__fields-group {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

/* Force checkbox/radio wraps horizontal */
.jet-form-builder-row .jet-form-builder__fields-group,
.jet-form-builder-row .jet-form-builder__field-wrap {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

/* Hide checkbox/radio inputs but keep them clickable through the label */
.jet-form-builder .jet-form-builder__field-wrap input[type="radio"],
.jet-form-builder .jet-form-builder__field-wrap input[type="checkbox"],
.jet-form-builder__field-wrap .jet-form-builder__field[type="checkbox"],
.jet-form-builder__field-wrap .jet-form-builder__field[type="radio"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Pill label — default state */
.jet-form-builder .jet-form-builder__field-wrap label,
.jet-form-builder__field-wrap .jet-form-builder__field-label {
  display: inline-flex !important;
  align-items: center !important;
  padding: 10px 18px !important;
  border-radius: 980px !important;
  background: rgba(0, 0, 0, 0.03) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #6e6e73 !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  transition: all 0.3s ease !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

/* Pill label — hover */
.jet-form-builder .jet-form-builder__field-wrap label:hover,
.jet-form-builder__field-wrap .jet-form-builder__field-label:hover {
  border-color: rgba(0, 0, 0, 0.18) !important;
  background: rgba(0, 0, 0, 0.05) !important;
  color: #1d1d1f !important;
}

/* Pill label — selected/checked (using :has for wrapped inputs) */
.jet-form-builder__field-label.for-checkbox:has(input:checked),
.jet-form-builder__field-label.for-radio:has(input:checked) {
  border-color: #0071e3 !important;
  background: rgba(0, 113, 227, 0.08) !important;
  color: #1d1d1f !important;
}

/* Fallback checked state for sibling selectors */
.jet-form-builder .jet-form-builder__field-wrap input[type="radio"]:checked + label,
.jet-form-builder .jet-form-builder__field-wrap input[type="checkbox"]:checked + label,
.jet-form-builder .jet-form-builder__field-wrap input:checked + .jet-form-builder__field-label {
  border-color: #0071e3 !important;
  background: rgba(0, 113, 227, 0.08) !important;
  color: #1d1d1f !important;
}


/* ============================================================
   TEXT INPUTS & TEXTAREA
   ============================================================ */

.jet-form-builder .jet-form-builder__field[type="text"],
.jet-form-builder .jet-form-builder__field[type="email"],
.jet-form-builder .jet-form-builder__field[type="tel"],
.jet-form-builder .jet-form-builder__field[type="url"],
.jet-form-builder textarea.jet-form-builder__field,
.jet-form-builder input.jet-form-builder__field,
.jet-form-builder textarea {
  width: 100% !important;
  padding: 14px 18px !important;
  background: rgba(0, 0, 0, 0.02) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  border-radius: 12px !important;
  font-size: 16px !important;
  line-height: 1.47 !important;
  color: #1d1d1f !important;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif !important;
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s !important;
  outline: none !important;
  box-shadow: none !important;
}

.jet-form-builder .jet-form-builder__field:focus,
.jet-form-builder textarea:focus {
  border-color: #0071e3 !important;
  background: rgba(0, 113, 227, 0.03) !important;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.08) !important;
}

.jet-form-builder .jet-form-builder__field::placeholder,
.jet-form-builder textarea::placeholder {
  color: #aeaeb2 !important;
  font-weight: 400 !important;
}


/* ============================================================
   FIELD LABELS
   ============================================================ */

.jet-form-builder .jet-form-builder__label-text,
.jet-form-builder .jet-form-builder__label {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #86868b !important;
  margin-bottom: 8px !important;
  letter-spacing: 0.01em !important;
}

.jet-form-builder .jet-form-builder__required {
  color: #86868b !important;
}


/* ============================================================
   STEP HEADINGS
   ============================================================ */

.jet-form-builder h3 {
  font-size: 28px !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
  color: #1d1d1f !important;
  margin-bottom: 24px !important;
  margin-top: 0 !important;
  line-height: 1.18 !important;
}


/* ============================================================
   CONTINUE / NEXT BUTTON
   ============================================================ */

.jet-form-builder .jet-form-builder__next-page,
.jet-form-builder button[type="submit"],
.jet-form-builder .jet-form-builder__submit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px 32px !important;
  border-radius: 980px !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  background: #0071e3 !important;
  color: #ffffff !important;
  border: none !important;
  cursor: pointer !important;
  transition: background 0.3s, transform 0.2s !important;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif !important;
  letter-spacing: -0.01em !important;
  line-height: 1 !important;
  box-shadow: none !important;
  text-transform: none !important;
}

.jet-form-builder .jet-form-builder__next-page:hover,
.jet-form-builder button[type="submit"]:hover,
.jet-form-builder .jet-form-builder__submit:hover {
  background: #005bb5 !important;
}

.jet-form-builder .jet-form-builder__next-page:active,
.jet-form-builder button[type="submit"]:active {
  transform: scale(0.97) !important;
}


/* ============================================================
   BACK / PREVIOUS BUTTON
   ============================================================ */

.jet-form-builder .jet-form-builder__prev-page {
  padding: 8px 4px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #86868b !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  transition: color 0.3s !important;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif !important;
  text-transform: none !important;
  box-shadow: none !important;
}

.jet-form-builder .jet-form-builder__prev-page:hover {
  color: #1d1d1f !important;
}


/* ============================================================
   BUTTON ROW
   ============================================================ */

.jet-form-builder .jet-form-builder-row--buttons,
.jet-form-builder__buttons-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin-top: 36px !important;
}


/* ============================================================
   SUCCESS / ERROR MESSAGES
   ============================================================ */

.jet-form-builder .jet-form-builder-message--success {
  background: rgba(0, 113, 227, 0.04) !important;
  border: 1px solid rgba(0, 113, 227, 0.12) !important;
  border-radius: 16px !important;
  padding: 32px !important;
  color: #1d1d1f !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  text-align: center !important;
  margin-top: 24px !important;
}

.jet-form-builder .jet-form-builder-message--error {
  border-radius: 16px !important;
  padding: 24px !important;
  font-size: 14px !important;
  margin-top: 24px !important;
}

/* Hide success message until actually submitted */
.jet-form-builder-message--success {
  display: none !important;
}
.jet-form-builder-message--success[style*="display: block"] {
  display: block !important;
}


/* ============================================================
   PROGRESS BAR
   ============================================================ */

.jet-form-builder .jet-form-builder-progress-pages {
  display: flex !important;
  gap: 6px !important;
  margin-bottom: 40px !important;
}

.jet-form-builder .jet-form-builder-progress-pages__item {
  height: 3px !important;
  flex: 1 !important;
  max-width: 40px !important;
  border-radius: 2px !important;
  background: rgba(0, 0, 0, 0.06) !important;
  transition: background 0.4s !important;
}

.jet-form-builder .jet-form-builder-progress-pages__item--active,
.jet-form-builder .jet-form-builder-progress-pages__item--completed {
  background: #0071e3 !important;
}

.jet-form-builder .jet-form-builder-progress-pages__item span,
.jet-form-builder .jet-form-builder-progress-pages__text {
  display: none !important;
}


/* ============================================================
   SPACING & LAYOUT
   ============================================================ */

.jet-form-builder .jet-form-builder-row {
  margin-bottom: 16px !important;
}

.jet-form-builder .jet-form-builder-row--checkbox,
.jet-form-builder .jet-form-builder-row--radio {
  margin-bottom: 20px !important;
}

.jet-form-builder .wp-block-columns {
  gap: 16px !important;
  margin-bottom: 0 !important;
}

/* Lock form height so steps don't jump */
.jet-form-builder {
  min-height: 480px !important;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif !important;
}

.jet-form-builder form {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}


/* ============================================================
   EMOJI ICONS — Step 1 checkboxes only
   ============================================================ */

[data-page="1"] .checkboxes-wrap:nth-child(1) .for-checkbox span::before {
  content: '📡 ' !important;
}
[data-page="1"] .checkboxes-wrap:nth-child(2) .for-checkbox span::before {
  content: '🎬 ' !important;
}
[data-page="1"] .checkboxes-wrap:nth-child(3) .for-checkbox span::before {
  content: '💰 ' !important;
}
[data-page="1"] .checkboxes-wrap:nth-child(4) .for-checkbox span::before {
  content: '🚀 ' !important;
}
[data-page="1"] .checkboxes-wrap:nth-child(5) .for-checkbox span::before {
  content: '🔄 ' !important;
}
[data-page="1"] .checkboxes-wrap:nth-child(6) .for-checkbox span::before {
  content: '💬 ' !important;
}/* Kill the blue checkbox square behind emojis */
.jet-form-builder__field-label.for-checkbox input[type="checkbox"],
.jet-form-builder__field-label.for-radio input[type="radio"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  outline: none !important;
  opacity: 0 !important;
  position: absolute !important;
  overflow: hidden !important;
}
/* Also target the checked state specifically */
.jet-form-builder__field-label.for-checkbox input[type="checkbox"]:checked,
.jet-form-builder__field-label.for-radio input[type="radio"]:checked {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Override any accent-color styling */
.jet-form-builder input[type="checkbox"],
.jet-form-builder input[type="radio"] {
  accent-color: transparent !important;
}/* Remove blue background from emoji ::before pseudo-elements */
[data-page="1"] .for-checkbox span::before {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  display: inline !important;
}