/*
Theme Name: HETT  Theme v3
Theme URI: https://hett.nl
Author: HETT
Description: Industrial Vercel-style theme with built-in configurator & project modals.
Version: 3.0
*/
/* =========================================
   HETT Configurator – Gravity Form styling
   Alleen op configurator-pagina
========================================= */

#hett-config-form .gform_wrapper {
  --hett-radius: 24px;
  --hett-border: #e5e7eb;
  --hett-bg: #f9fafb;
  --hett-label: #6b7280;
  --hett-text: #111827;
  --hett-accent: #3b2a23; /* zelfde als hett-brown */
  --hett-accent-dark: #20140f;
  margin: 0;
}

/* Grid layout voor velden */
#hett-config-form .gform_body .gform_fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  #hett-config-form .gform_body .gform_fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Volledige breedte velden (optioneel: geef veld CSS class `gfield--full`) */
#hett-config-form .gform_body .gfield.gfield--full {
  grid-column: 1 / -1;
}

/* Label-stijl zoals stappenkopjes */
#hett-config-form .gform_body .gfield_label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--hett-label);
  margin-bottom: 0.35rem;
}

/* Beschrijving / sublabel */
#hett-config-form .gform_body .gfield_description,
#hett-config-form .gform_body .gfield_description.gfield_description_before,
#hett-config-form .gform_body .ginput_complex label {
  font-size: 0.75rem;
  color: #9ca3af;
  margin-bottom: 0.25rem;
}

/* Input / textarea / select – zelfde look als configurator */
#hett-config-form .gform_body input[type="text"],
#hett-config-form .gform_body input[type="email"],
#hett-config-form .gform_body input[type="tel"],
#hett-config-form .gform_body input[type="number"],
#hett-config-form .gform_body input[type="url"],
#hett-config-form .gform_body select,
#hett-config-form .gform_body textarea {
  width: 100%;
  border-radius: 14px;
  border: 1px solid var(--hett-border);
  background-color: #f3f4f6;
  padding: 0.9rem 1rem;
  font-size: 0.95rem;
  color: var(--hett-text);
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
  outline: none;
}

#hett-config-form .gform_body textarea {
  min-height: 140px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Focus states */
#hett-config-form .gform_body input:focus,
#hett-config-form .gform_body select:focus,
#hett-config-form .gform_body textarea:focus {
  border-color: var(--hett-accent);
  background-color: #ffffff;
  box-shadow: 0 0 0 1px rgba(59, 42, 35, 0.35);
}

/* Foutmeldingen */
#hett-config-form .gform_body .gfield_error input,
#hett-config-form .gform_body .gfield_error select,
#hett-config-form .gform_body .gfield_error textarea {
  border-color: #dc2626;
  background-color: #fef2f2;
}

#hett-config-form .gform_body .gfield_error .gfield_description {
  color: #b91c1c;
}

/* Submit-gebied */
#hett-config-form .gform_footer,
#hett-config-form .gform_page_footer {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e5e7eb;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: flex-end;
}

/* Submit-knop in HETT-stijl */
#hett-config-form .gform_footer .gform_button,
#hett-config-form .gform_page_footer .gform_button {
  border-radius: 999px;
  background-color: #111827; /* hett-dark */
  color: #ffffff;
  border: none;
  padding: 0.95rem 2.6rem;
  font-weight: 800;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.45);
  transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

#hett-config-form .gform_footer .gform_button:hover,
#hett-config-form .gform_page_footer .gform_button:hover {
  background-color: var(--hett-accent-dark);
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.65);
}

/* Progress / spinner etc. iets subtieler */
#hett-config-form .gform_ajax_spinner {
  margin-left: 0.75rem;
}

/* Configuratieveld iets “card”-achtig */
#hett-config-form .hett-config-json {
  grid-column: 1 / -1;
}

#hett-config-form .hett-config-json textarea {
  background: #0b1120;
  color: #e5e7eb;
  border-color: #111827;
  font-size: 0.8rem;
  line-height: 1.4;
}

/* Label van configuratieveld iets subtieler */
#hett-config-form .hett-config-json .gfield_label {
  color: #9ca3af;
}