/* JotForm  Styles */

/*
  When developing in Jotform, use the following form which points to localhost:3000 for styling
  @import url('http://localhost:3000/styles/jotform.css');

  For production uses, add the following, and adjust CB as needed
  @import url('https://www.wecantaffordit.us/styles/jotform.css?cb=1');
 */

/* Import custom fonts */

/* Fakt (sans) */

@font-face {
  font-family: Fakt;
  font-weight: 400;
  src: url("/fonts/fakt/fp-normal.woff2") format("woff2"),
    url("/fonts/fakt/fp-normal.woff") format("woff");
}

@font-face {
  font-family: Fakt;
  font-weight: 500;
  src: url("/fonts/fakt/fp-medium.woff2") format("woff2"),
    url("/fonts/fakt/fp-medium.woff") format("woff");
}

@font-face {
  font-family: Fakt;
  font-weight: 700;
  src: url("/fonts/fakt/fp-bold.woff2") format("woff2"),
    url("/fonts/fakt/fp-bold.woff") format("woff");
}

@font-face {
  font-family: Fakt;
  font-weight: 900;
  src: url("/fonts/fakt/fp-black.woff2") format("woff2"),
    url("/fonts/fakt/fp-black.woff") format("woff");
}

/* Define variables */
:root {
  /* Jotform specific variables */
  --background: #000;
  --page-background: #000;
  --form-background: #000;
  --font-family: "Fakt", arial, sans-serif;
  --font-family-btn: "Fakt", arial, sans-serif;
  --font-size: 18px;
  --font-color: #f3eede;
  --form-shadow: none;

  /* buttons */
  --button-background: transparent;
  --button-background-hover: #f3eede;
  --button-color: #f3eede;
  --button-text-transform: uppercase;
  --button-font-size: 16px;
  --button-font-weight: 700;
  --button-border-color: #f3eede;
  --button-border-radius: 0;
  --button-border-width: 2px;
  --button-color-hover: #000;
  --button-letter-spacing: 1px;

  /* inputs */
  --input-background: var(--form-background);
  --input-border: #f3eede;
  --input-border-radius: 0;
  --input-border-width: 2px;
  --input-color: #f3eede;
  --label-color: #f3eede;
  --error-background: #000;
  --error-border: #ed2024;
  --error-text: #ed2024;
  --active-background: var(--form-background);
  --form-footer-border: none;
  --placeholder-color: #f3eede;
}

/* Supernova is the default theme */
.supernova,
.supernova body {
  padding: 0 !important;
  margin: 0 !important;
  background: var(--page-background) !important;
}

.form-all {
  margin-top: 0 !important;
  background-color: var(--form-background) !important;
  box-shadow: var(--form-shadow);
  color: var(--font-color) !important;
  font-family: var(--font-family) !important;
}

/* Hide header */
.form-header-group {
  display: none;
}

.form-label-top,
.form-label-left,
.form-label-right,
.form-sub-label {
  color: var(--label-color);
  display: none;
}
.form-textbox,
.form-textarea,
.form-dropdown,
.form-radio-other-input,
.form-checkbox-other-input,
.form-captcha input,
.form-spinner input {
  border-width: var(--input-border-width) !important;
  border-color: var(--input-border) !important;
  background-color: var(--input-background) !important;
  border-radius: var(--input-border-radius) !important;
  color: var(--input-color) !important;
}

.form-section.page-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 16px;
}

ul.form-section.page-section > li {
  margin-top: 0 !important;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.form-line-active {
  background-color: var(--active-background) !important;
}

.form-line-error {
  background-color: var(--error-background) !important;
}

.form-line-error input:not(#coupon-input),
.form-line-error textarea,
.form-line-error .form-validation-error {
  border-color: var(--error-border);
  color: var(--error-text);
}

.form-buttons-wrapper {
  border: var(--form-footer-border);
  padding: 15px;
}

.form-submit-button {
  border-width: var(--button-border-width);
  border-color: var(--button-border-color);
  background-color: var(--button-background);
  border-radius: var(--button-border-radius);
  color: var(--button-color);
  font-family: var(--font-family-btn);
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  letter-spacing: var(--button-letter-spacing);
  text-transform: var(--button-text-transform);
}

.form-submit-button:hover,
.form-submit-button:focus {
  border-color: var(--button-background-hover);
  background-color: var(--button-background-hover);
  color: var(--button-color-hover);
}

/* Error and hovers */
.error-navigation-container {
  display: none;
}

/* Placeholder styles - white color */
.form-textbox::placeholder,
.form-textarea::placeholder,
.form-dropdown::placeholder,
.form-radio-other-input::placeholder,
.form-checkbox-other-input::placeholder,
.form-captcha input::placeholder,
.form-spinner input::placeholder,
.form-number-input::placeholder {
  color: var(--placeholder-color);
}

/* Firefox specific placeholder styling */
.form-textbox::-moz-placeholder,
.form-textarea::-moz-placeholder,
.form-dropdown::-moz-placeholder,
.form-radio-other-input::-moz-placeholder,
.form-checkbox-other-input::-moz-placeholder,
.form-captcha input::-moz-placeholder,
.form-spinner input::-moz-placeholder,
.form-number-input::-moz-placeholder {
  color: var(--placeholder-color) !important;
  opacity: 1 !important;
}

/* WebKit browsers (Chrome, Safari, Edge) placeholder styling */
.form-textbox::-webkit-input-placeholder,
.form-textarea::-webkit-input-placeholder,
.form-dropdown::-webkit-input-placeholder,
.form-radio-other-input::-webkit-input-placeholder,
.form-checkbox-other-input::-webkit-input-placeholder,
.form-captcha input::-webkit-input-placeholder,
.form-spinner input::-webkit-input-placeholder,
.form-number-input::-webkit-input-placeholder {
  color: var(--placeholder-color) !important;
  opacity: 1 !important;
}