/* =======================================================
   DUB FACTORY STUDIOS
   FORMS / CONTACT / INPUTS
======================================================= */

/* FORM WRAPPER PAGES */

.dfs-contact-page {
  background: var(--dfs-cream);
  padding: 90px 20px;
}

.dfs-contact-wrap {
  max-width: 960px;
  margin: 0 auto;
}

/* FORM PAGE TITLES */

.dfs-contact-wrap h1 {
  color: var(--dfs-black);

  font-size: 56px;
  font-weight: 900;

  text-transform: uppercase;
  text-align: center;

  margin-bottom: 18px;
}

/* FORM LAYOUT */

.dfs-contact-form {

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 24px 32px;

  background: var(--dfs-white);

  border: 1px solid var(--dfs-border);
  border-radius: 22px;

  padding: 42px;

  box-shadow: var(--dfs-shadow);
}

/* FORM GROUPS */

.dfs-contact-form .form-group {
  width: 100%;
  margin: 0;
}

/* FULL WIDTH FIELDS */

.dfs-contact-form .full {
  grid-column: 1 / -1;
}

/* NOTES / HELPER TEXT */

.dfs-contact-note {

  grid-column: 1 / -1;

  color: var(--dfs-gray);

  font-size: 13px;
  line-height: 1.7;

  margin: 4px 0 0;
}

/* STATUS MESSAGES */

.dfs-form-status {

  grid-column: 1 / -1;

  margin-top: 8px;

  font-weight: 800;

  min-height: 22px;
}

.dfs-form-status.success {
  color: #248a3d;
}

.dfs-form-status.error {
  color: var(--dfs-red);
}

/* HONEYPOT SPAM FIELD */

.tdf-honeypot,
.dfs-honeypot {

  position: absolute !important;

  left: -9999px !important;

  opacity: 0 !important;

  width: 0 !important;
  height: 0 !important;

  pointer-events: none !important;
}

/* SUBMIT BUTTON AREA */

.dfs-contact-submit {
  grid-column: 1 / -1;
  justify-self: start;
}

/* INPUTS */

.form-control,
input,
select,
textarea {

  display: block;

  width: 100%;

  min-height: 52px;

  padding: 14px 16px;

  background: var(--dfs-white);

  border: 1px solid var(--dfs-border);
  border-radius: 10px;

  color: var(--dfs-charcoal);

  font-size: 15px;
  line-height: 1.5;

  box-shadow: none;

  transition: all 0.25s ease;
}

/* TEXTAREA */

textarea {
  min-height: 190px;
  resize: vertical;
}

/* INPUT FOCUS */

.form-control:focus,
input:focus,
select:focus,
textarea:focus {

  outline: none;

  border-color: var(--dfs-orange);

  box-shadow:
    0 0 0 3px rgba(255,106,0,0.08);
}

/* LABELS */

label {

  display: block;

  margin-bottom: 8px;

  color: var(--dfs-black);

  font-size: 12px;
  font-weight: 800;

  letter-spacing: 1.4px;
  text-transform: uppercase;
}

/* PLACEHOLDERS */

input::placeholder,
textarea::placeholder {
  color: rgba(0,0,0,0.35);
}

/* SELECTS */

select {
  appearance: none;

  background-image:
    linear-gradient(45deg, transparent 50%, var(--dfs-orange) 50%),
    linear-gradient(135deg, var(--dfs-orange) 50%, transparent 50%);

  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px);

  background-size: 6px 6px;

  background-repeat: no-repeat;
}

/* CHECKBOXES / RADIOS */

input[type="checkbox"],
input[type="radio"] {
  width: auto;
  min-height: auto;
  margin-right: 8px;
}

/* INLINE FIELD GROUPS */

.dfs-inline-fields {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
}

/* SMALL FORM BUTTONS */

.dfs-small-btn {
  min-width: 90px;

  padding: 10px 18px;

  font-size: 12px;
}

/* FORM SECTIONS */

.dfs-form-section {
  margin-bottom: 42px;
}

.dfs-form-section:last-child {
  margin-bottom: 0;
}

.dfs-form-section-title {
  margin-bottom: 18px;

  color: var(--dfs-black);

  font-size: 18px;
  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: 1px;
}

/* FORM DIVIDERS */

.dfs-form-divider {
  width: 100%;
  height: 1px;

  margin: 10px 0 20px;

  background: rgba(0,0,0,0.08);
}

/* RESPONSIVE */

@media screen and (max-width: 768px) {

  .dfs-contact-page {
    padding: 70px 20px;
  }

  .dfs-contact-wrap h1 {
    font-size: 38px;
  }

  .dfs-contact-form {

    grid-template-columns: 1fr;

    padding: 30px 24px;
  }

  .dfs-contact-submit {
    width: 100%;
  }

  .dfs-inline-fields {
    flex-direction: column;
    align-items: stretch;
  }
}