/**
 * Branded styling for Drupal webform pages (/webform/<id>, /form/<name>).
 *
 * These pages render the raw webform with core's default form markup, which the
 * site's custom enquiry-form CSS never targeted, so they appeared as plain
 * unstyled inputs on an otherwise branded page. This brings them to the CSB
 * look (same palette/metrics as css/account-forms.css): bordered inputs, orange
 * focus, block labels, orange uppercase submit.
 *
 * Scope: `.webform-submission-form` for the fields (so it never touches the
 * custom-HTML enquiry forms, which don't use webform markup, nor any other
 * site form) and `.page-webform` (body class set in csb_preprocess_html) for
 * the page title. Applies to every webform — the held enquiry forms and the
 * Contact form alike — so they stay consistent.
 */

/* --- Page title: present the webform label as a CSB section heading --------- */
.page-webform #content .title,
.page-webform h1.title {
  font-family: "Dinpro-Regular", "DINPro-Regular", Arial, sans-serif;
  font-size: 26px;
  color: #004a8f;
  margin: 10px 0 22px;
  padding-bottom: 12px;
  border-bottom: 2px solid #ff6600;
}

/* --- Form container -------------------------------------------------------- */
.webform-submission-form {
  max-width: 760px;
  margin: 10px 0 40px;
  font-family: "Dinpro-Regular", "DINPro-Regular", Arial, sans-serif;
}

.webform-submission-form .form-item,
.webform-submission-form .js-form-item {
  margin-bottom: 18px;
}

/* --- Labels ---------------------------------------------------------------- */
.webform-submission-form label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: #333333;
  font-size: 15px;
}

/* Required marker in CSB orange. */
.webform-submission-form .form-required::after,
.webform-submission-form label.js-form-required::after {
  color: #ff6600;
}

/* --- Text-like inputs, selects, textareas ---------------------------------- */
.webform-submission-form input[type="text"],
.webform-submission-form input[type="email"],
.webform-submission-form input[type="tel"],
.webform-submission-form input[type="number"],
.webform-submission-form input[type="url"],
.webform-submission-form input[type="password"],
.webform-submission-form input[type="date"],
.webform-submission-form input.form-text,
.webform-submission-form input.form-tel,
.webform-submission-form input.form-email,
.webform-submission-form input.form-number,
.webform-submission-form select,
.webform-submission-form textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid #cccccc;
  border-radius: 3px;
  font-size: 15px;
  font-family: inherit;
  color: #333333;
  background-color: #ffffff;
}

.webform-submission-form textarea {
  min-height: 96px;
  resize: vertical;
}

.webform-submission-form input:focus,
.webform-submission-form select:focus,
.webform-submission-form textarea:focus {
  border-color: #ff6600;
  outline: none;
  box-shadow: 0 0 0 1px rgba(255, 102, 0, 0.25);
}

/* --- Radios & checkboxes: box inline with its label ------------------------ */
.webform-submission-form .form-type-radio,
.webform-submission-form .form-type-checkbox,
.webform-submission-form .js-form-type-radio,
.webform-submission-form .js-form-type-checkbox {
  margin-bottom: 8px;
}

.webform-submission-form .form-type-radio label,
.webform-submission-form .form-type-checkbox label,
.webform-submission-form .js-form-type-radio label,
.webform-submission-form .js-form-type-checkbox label {
  display: inline-block;
  font-weight: 400;
  margin: 0 0 0 6px;
  vertical-align: middle;
}

.webform-submission-form input[type="radio"],
.webform-submission-form input[type="checkbox"] {
  vertical-align: middle;
}

/* --- Description / help text ----------------------------------------------- */
.webform-submission-form .description,
.webform-submission-form .webform-element-description {
  font-size: 13px;
  color: #777777;
  margin-top: 4px;
}

/* --- Managed file upload (e.g. branch-auditor bio-data / e-edition PDFs) ---- */
.webform-submission-form .form-managed-file,
.webform-submission-form .js-form-managed-file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px dashed #cccccc;
  border-radius: 3px;
  background-color: #fafafa;
}

/* --- Fieldsets / sections -------------------------------------------------- */
.webform-submission-form fieldset {
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  padding: 14px 18px;
  margin: 0 0 22px;
}

.webform-submission-form fieldset > legend {
  font-weight: 700;
  color: #004a8f;
  padding: 0 6px;
  font-size: 16px;
}

/* --- CAPTCHA --------------------------------------------------------------- */
.webform-submission-form .captcha {
  margin: 18px 0;
  padding: 14px;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  background-color: #fafafa;
}

/* --- Submit button --------------------------------------------------------- */
.webform-submission-form .form-actions .form-submit,
.webform-submission-form .webform-button--submit,
.webform-submission-form input[type="submit"] {
  background-color: #ff6600;
  color: #ffffff;
  border: none;
  padding: 11px 32px;
  border-radius: 3px;
  font-weight: 600;
  font-size: 15px;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
}

.webform-submission-form .form-actions .form-submit:hover,
.webform-submission-form .webform-button--submit:hover,
.webform-submission-form input[type="submit"]:hover {
  background-color: #e65c00;
}

/* --- Inline validation errors ---------------------------------------------- */
.webform-submission-form input.error,
.webform-submission-form select.error,
.webform-submission-form textarea.error {
  border-color: #d32f2f;
}