/*
 * IsleIQ form styling, including Ninja Forms.
 */

.iq-form-card,
.nf-form-cont {
  background: var(--iq-white);
  border: 1px solid var(--iq-border);
  border-radius: var(--iq-radius-xl);
}

.iq-form-card {
  padding: var(--iq-space-6);
}

.nf-form-cont {
  padding: clamp(var(--iq-space-5), 4vw, var(--iq-space-8));
}

.nf-form-cont .nf-form-title h3 {
  margin-bottom: var(--iq-space-3);
  color: var(--iq-slate);
  font-family: var(--iq-font-display);
  font-size: var(--iq-text-2xl);
  font-weight: 800;
}

.nf-form-cont .nf-form-fields-required {
  margin-bottom: var(--iq-space-5);
  color: var(--iq-text-muted);
  font-size: var(--iq-text-sm);
}

.nf-form-cont .nf-field-container {
  margin-bottom: var(--iq-space-4);
}

.nf-form-cont .nf-field-label label,
.iq-label {
  display: inline-block;
  margin-bottom: var(--iq-space-2);
  color: var(--iq-slate);
  font-family: var(--iq-font-display);
  font-size: var(--iq-text-sm);
  font-weight: 800;
}

.nf-form-cont input[type="text"],
.nf-form-cont input[type="email"],
.nf-form-cont input[type="tel"],
.nf-form-cont input[type="url"],
.nf-form-cont input[type="number"],
.nf-form-cont select,
.nf-form-cont textarea,
.iq-input,
.iq-select,
.iq-textarea {
  width: 100%;
  min-height: 2.9rem;
  padding: 0.78rem 0.9rem;
  border: 1px solid var(--iq-border-strong);
  border-radius: var(--iq-radius);
  background: var(--iq-white);
  color: var(--iq-slate);
  font-family: var(--iq-font-body);
  font-size: var(--iq-text-base);
  line-height: 1.3;
  transition:
    border-color var(--iq-duration-fast) var(--iq-ease),
    box-shadow var(--iq-duration-fast) var(--iq-ease);
}

.nf-form-cont textarea,
.iq-textarea {
  min-height: 8rem;
  resize: vertical;
}

.nf-form-cont input:focus,
.nf-form-cont select:focus,
.nf-form-cont textarea:focus,
.iq-input:focus,
.iq-select:focus,
.iq-textarea:focus {
  border-color: var(--iq-teal);
  box-shadow: 0 0 0 4px rgba(46, 196, 182, 0.18);
  outline: 0;
}

.nf-form-cont .nf-error-msg,
.nf-form-cont .ninja-forms-req-symbol {
  color: #b42318;
}

.nf-form-cont .nf-error.field-wrap .nf-field-element::after {
  background: #b42318;
}

.nf-form-cont .nf-response-msg {
  padding: var(--iq-space-4) var(--iq-space-5);
  border: 1px solid rgba(46, 196, 182, 0.34);
  border-left: 4px solid var(--iq-mint);
  border-radius: 0 var(--iq-radius-lg) var(--iq-radius-lg) 0;
  background: var(--iq-mint-050);
  color: var(--iq-slate);
}

.nf-form-cont input[type="button"],
.nf-form-cont input[type="submit"],
.nf-form-cont button[type="submit"],
.iq-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.9rem;
  padding: 0.8rem 1.25rem;
  border: 1px solid var(--iq-amber);
  border-radius: var(--iq-radius);
  background: var(--iq-amber);
  color: var(--iq-navy);
  font-family: var(--iq-font-display);
  font-size: var(--iq-text-sm);
  font-weight: 800;
  line-height: 1.1;
  transition:
    transform var(--iq-duration) var(--iq-ease),
    background-color var(--iq-duration) var(--iq-ease),
    box-shadow var(--iq-duration) var(--iq-ease);
}

.nf-form-cont input[type="button"]:hover,
.nf-form-cont input[type="submit"]:hover,
.nf-form-cont button[type="submit"]:hover,
.iq-submit:hover {
  background: var(--iq-amber-600);
  box-shadow: 0 10px 24px rgba(244, 162, 97, 0.28);
  transform: translateY(-1px);
}

.iq-consent,
.nf-form-cont .checkbox-wrap .nf-field-label label {
  color: var(--iq-text-muted);
  font-family: var(--iq-font-body);
  font-size: var(--iq-text-sm);
  font-weight: 400;
  line-height: var(--iq-leading-normal);
}

.iq-dark .nf-form-cont,
.iq-bg-dark .nf-form-cont,
.iq-bg-deep .nf-form-cont,
.iq-hero .nf-form-cont {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(14px);
}

.iq-dark .nf-form-cont .nf-form-title h3,
.iq-bg-dark .nf-form-cont .nf-form-title h3,
.iq-bg-deep .nf-form-cont .nf-form-title h3,
.iq-hero .nf-form-cont .nf-form-title h3,
.iq-dark .nf-form-cont .nf-field-label label,
.iq-bg-dark .nf-form-cont .nf-field-label label,
.iq-bg-deep .nf-form-cont .nf-field-label label,
.iq-hero .nf-form-cont .nf-field-label label {
  color: var(--iq-white);
}

@media (max-width: 520px) {
  .nf-form-cont input[type="button"],
  .nf-form-cont input[type="submit"],
  .nf-form-cont button[type="submit"],
  .iq-submit {
    width: 100%;
  }
}