/*
 * Government of the Virgin Islands Conflict / Private Interest Webform
 * Gowilds / ThemeForest override with GOV.UK-inspired spacing, labels,
 * hints, radios, checkboxes, warning text and error treatment.
 *
 * Buttons are intentionally left to the Gowilds/theme defaults.
 */

.webform-submission-form {
  --gvi-text: #0b0c0c;
  --gvi-muted: #505a5f;
  --gvi-border: #b1b4b6;
  --gvi-focus: #ffdd00;
  --gvi-error: #d4351c;
  --gvi-link-blue: #1d70b8;
}

/* Overall vertical rhythm. */
.webform-submission-form .js-form-item:not(.js-form-type-radio):not(.js-form-type-checkbox),
.webform-submission-form .form-item:not(.form-type-radio):not(.form-type-checkbox),
.webform-submission-form .form-wrapper,
.webform-submission-form .js-form-wrapper,
.webform-submission-form .webform-element,
.webform-submission-form .webform-element-type-processed_text {
  margin-bottom: 2rem !important;
}

/* Prevent radio/checkbox options from inheriting large field spacing. */
.webform-submission-form .js-form-type-radio,
.webform-submission-form .js-form-type-checkbox,
.webform-submission-form .form-type-radio,
.webform-submission-form .form-type-checkbox,
.webform-submission-form .form-check {
  margin-bottom: 0.85rem !important;
}

/* Flexbox rows need vertical and horizontal separation. */
.webform-submission-form .webform-flexbox,
.webform-submission-form .webform-flex--container,
.webform-submission-form .form-type-webform-flexbox {
  gap: 1.75rem 2rem !important;
  margin-bottom: 2.25rem !important;
  align-items: flex-start !important;
}

.webform-submission-form .webform-flexbox .js-form-item,
.webform-submission-form .webform-flexbox .form-item,
.webform-submission-form .webform-flex--container .js-form-item,
.webform-submission-form .webform-flex--container .form-item,
.webform-submission-form .form-type-webform-flexbox .js-form-item,
.webform-submission-form .form-type-webform-flexbox .form-item {
  margin-bottom: 1.25rem !important;
}

/* Main field labels. */
.webform-submission-form .js-form-item > label:not(.option):not(.form-check-label),
.webform-submission-form .form-item > label:not(.option):not(.form-check-label),
.webform-submission-form .js-form-wrapper > legend,
.webform-submission-form .form-wrapper > legend,
.webform-submission-form .fieldset-legend,
.webform-submission-form .webform-element > label:not(.option):not(.form-check-label) {
  display: block !important;
  margin: 0 0 0.75rem 0 !important;
  padding: 0 !important;
  color: var(--gvi-text) !important;
  font-size: 26px !important;
  line-height: 1.18 !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* Make radio/checkbox group questions a little larger. */
.webform-submission-form .govuk-style-choice-list:not(.js-form-type-checkbox):not(.form-type-checkbox) > label:not(.option),
.webform-submission-form .govuk-style-choice-list:not(.js-form-type-checkbox):not(.form-type-checkbox) > .form-item__label,
.webform-submission-form .govuk-style-choice-list:not(.js-form-type-checkbox):not(.form-type-checkbox) > legend,
.webform-submission-form .govuk-style-choice-list:not(.js-form-type-checkbox):not(.form-type-checkbox) > legend .fieldset-legend,
.webform-submission-form .govuk-style-choice-list:not(.js-form-type-checkbox):not(.form-type-checkbox) .fieldset-legend {
  font-size: 32px !important;
  line-height: 1.15 !important;
  margin-bottom: 1rem !important;
}

/* Hint/help text. Do not target input.form-text here. */
.webform-submission-form .description,
.webform-submission-form .form-item__description,
.webform-submission-form .webform-element-description,
.webform-submission-form .fieldset-description,
.webform-submission-form .form-item--description,
.webform-submission-form .form-textarea-wrapper + .description,
.webform-submission-form .help-block:not(.error) {
  margin: 0.5rem 0 1rem 0 !important;
  padding: 0 !important;
  color: var(--gvi-muted) !important;
  font-size: 19px !important;
  line-height: 1.55 !important;
  font-weight: 400 !important;
  text-transform: none !important;
}

/* Inputs. */
.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="date"],
.webform-submission-form input[type="time"],
.webform-submission-form input.form-text,
.webform-submission-form input.form-email,
.webform-submission-form input.form-tel,
.webform-submission-form input.form-number,
.webform-submission-form input.form-date,
.webform-submission-form input.form-time,
.webform-submission-form select,
.webform-submission-form select.form-select,
.webform-submission-form textarea,
.webform-submission-form textarea.form-textarea {
  min-height: 48px !important;
  padding: 10px 12px !important;
  font-size: 19px !important;
  line-height: 1.31579 !important;
  margin-top: 0.35rem !important;
  color: var(--gvi-text) !important;
}

.webform-submission-form textarea,
.webform-submission-form textarea.form-textarea {
  min-height: 140px !important;
}

/* SHS / chained select spacing. */
.webform-submission-form .shs-widget-container,
.webform-submission-form .shs-container {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
  margin-top: 0.5rem !important;
}

.webform-submission-form .shs-widget-container select,
.webform-submission-form .shs-container select {
  min-width: 280px !important;
}

/* GOV.UK-style choice lists. */
.webform-submission-form .govuk-style-choice-list {
  margin-bottom: 2.4rem !important;
}

.webform-submission-form .govuk-style-choice-list .form-radios,
.webform-submission-form .govuk-style-choice-list .form-checkboxes,
.webform-submission-form .govuk-style-choice-list .js-webform-radios,
.webform-submission-form .govuk-style-choice-list .js-webform-checkboxes,
.webform-submission-form .govuk-style-choice-list .webform-options-display-one-column {
  margin-top: 1rem !important;
  margin-bottom: 0 !important;
}

.webform-submission-form .govuk-style-choice-list .form-radios > .js-form-item,
.webform-submission-form .govuk-style-choice-list .form-radios > .form-item,
.webform-submission-form .govuk-style-choice-list .form-checkboxes > .js-form-item,
.webform-submission-form .govuk-style-choice-list .form-checkboxes > .form-item,
.webform-submission-form .govuk-style-choice-list .js-webform-radios > .js-form-item,
.webform-submission-form .govuk-style-choice-list .js-webform-radios > .form-item,
.webform-submission-form .govuk-style-choice-list .js-webform-checkboxes > .js-form-item,
.webform-submission-form .govuk-style-choice-list .js-webform-checkboxes > .form-item,
.webform-submission-form .govuk-style-choice-list .webform-options-display-one-column > .js-form-item,
.webform-submission-form .govuk-style-choice-list .webform-options-display-one-column > .form-item,
.webform-submission-form .govuk-style-choice-list .form-check,
.webform-submission-form .govuk-style-choice-list.js-form-type-checkbox,
.webform-submission-form .govuk-style-choice-list.form-type-checkbox {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) !important;
  align-items: center !important;
  column-gap: 18px !important;
  min-height: 44px !important;
  margin: 0 0 0.85rem 0 !important;
  padding: 0 !important;
  position: relative !important;
  clear: both !important;
}

.webform-submission-form .govuk-style-choice-list input[type="radio"],
.webform-submission-form .govuk-style-choice-list input[type="checkbox"],
.webform-submission-form .govuk-style-choice-list input.form-radio,
.webform-submission-form .govuk-style-choice-list input.form-checkbox,
.webform-submission-form .govuk-style-choice-list .form-check-input {
  grid-column: 1 !important;
  grid-row: 1 !important;
  position: static !important;
  float: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: inline-block !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  left: auto !important;
  top: auto !important;
  cursor: pointer !important;
  accent-color: var(--gvi-text);
}

.webform-submission-form .govuk-style-choice-list input[type="radio"] + label,
.webform-submission-form .govuk-style-choice-list input[type="checkbox"] + label,
.webform-submission-form .govuk-style-choice-list label.option,
.webform-submission-form .govuk-style-choice-list .form-check-label,
.webform-submission-form label.option,
.webform-submission-form .form-check-label {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--gvi-text) !important;
  font-size: 19px !important;
  line-height: 1.31579 !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  cursor: pointer !important;
}

.webform-submission-form .govuk-style-choice-list label.option::before,
.webform-submission-form .govuk-style-choice-list label.option::after,
.webform-submission-form .govuk-style-choice-list .form-check-label::before,
.webform-submission-form .govuk-style-choice-list .form-check-label::after {
  content: none !important;
  display: none !important;
}

/* Focus treatment. */
.webform-submission-form .govuk-style-choice-list input[type="radio"]:focus,
.webform-submission-form .govuk-style-choice-list input[type="checkbox"]:focus,
.webform-submission-form .govuk-style-choice-list input.form-radio:focus,
.webform-submission-form .govuk-style-choice-list input.form-checkbox:focus,
.webform-submission-form .govuk-style-choice-list .form-check-input:focus,
.webform-submission-form input:focus,
.webform-submission-form select:focus,
.webform-submission-form textarea:focus {
  outline: 3px solid var(--gvi-focus) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* Composite/multiple fields. */
.webform-submission-form .webform-multiple-table,
.webform-submission-form .webform-multiple-add,
.webform-submission-form .webform-multiple-table-responsive {
  margin-top: 1rem !important;
  margin-bottom: 2.25rem !important;
}

.webform-submission-form .webform-multiple-table th,
.webform-submission-form .webform-multiple-table td {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

/* Processed text and review checklist spacing. */
.webform-submission-form .webform-element-type-processed_text ul,
.webform-submission-form .form-type-processed-text ul,
.webform-submission-form [data-drupal-selector="edit-review-checklist"] ul {
  margin: 1rem 0 1.5rem 1.25rem !important;
  padding-left: 1.25rem !important;
}

.webform-submission-form [data-drupal-selector="edit-review-checklist"] {
  border-left: 10px solid var(--gvi-border) !important;
  padding: 1rem 0 1rem 1rem !important;
  margin: 2rem 0 !important;
}

/* Alert/information panel used on the Before you start page. */
.webform-submission-form .alert-info {
  border: 0 !important;
  border-left: 10px solid var(--gvi-link-blue) !important;
  background: #f3f2f1 !important;
  color: var(--gvi-text) !important;
  padding: 1rem 1.25rem !important;
  margin: 2rem 0 !important;
  font-size: 19px !important;
  line-height: 1.55 !important;
}

.webform-submission-form .alert-info p:last-child {
  margin-bottom: 0 !important;
}

/* GOV.UK Design System-inspired inset text. */
.webform-submission-form .govuk-inset-text {
  border-left: 10px solid var(--gvi-border) !important;
  margin: 2rem 0 !important;
  padding: 1rem 0 1rem 1rem !important;
  color: var(--gvi-text) !important;
  font-size: 19px !important;
  line-height: 1.31579 !important;
  background: transparent !important;
}

/* GOV.UK Design System-inspired warning text. */
.webform-submission-form .govuk-warning-text {
  position: relative !important;
  margin: 2rem 0 !important;
  padding: 0.75rem 0 0.75rem 60px !important;
  color: var(--gvi-text) !important;
  font-size: 19px !important;
  line-height: 1.31579 !important;
  font-weight: 700 !important;
  background: transparent !important;
  border: 0 !important;
}

.webform-submission-form .govuk-warning-text__icon {
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: inline-block !important;
  width: 35px !important;
  height: 35px !important;
  border: 3px solid var(--gvi-text) !important;
  border-radius: 50% !important;
  color: #ffffff !important;
  background: var(--gvi-text) !important;
  font-size: 30px !important;
  line-height: 29px !important;
  text-align: center !important;
  font-weight: 700 !important;
}

.webform-submission-form .govuk-warning-text__text {
  display: block !important;
  font-weight: 700 !important;
}

.webform-submission-form .govuk-warning-text p {
  margin: 0.5rem 0 0 0 !important;
  font-weight: 400 !important;
}

.webform-submission-form .govuk-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

/* Error treatment for Drupal/Webform error states. */
.webform-submission-form .form-item--error,
.webform-submission-form .has-error,
.webform-submission-form .error {
  border-left: 5px solid var(--gvi-error) !important;
  padding-left: 15px !important;
}

.webform-submission-form .form-item--error-message,
.webform-submission-form .form-item__error-message,
.webform-submission-form .error-message,
.webform-submission-form .help-block.error {
  display: block !important;
  margin: 0 0 1rem 0 !important;
  color: var(--gvi-error) !important;
  font-size: 19px !important;
  line-height: 1.31579 !important;
  font-weight: 700 !important;
}

.webform-submission-form .messages--error,
.webform-submission-form .alert-danger {
  border: 5px solid var(--gvi-error) !important;
  padding: 1.25rem !important;
  margin: 2rem 0 !important;
  color: var(--gvi-text) !important;
  background: #ffffff !important;
}

/* Buttons separated from content, but button styles remain the Gowilds/theme defaults. */
.webform-submission-form .form-actions,
.webform-submission-form .webform-actions {
  margin-top: 2.5rem !important;
  padding-top: 1rem !important;
}

@media (max-width: 640px) {
  .webform-submission-form {
    max-width: 100% !important;
  }

  .webform-submission-form .js-form-item > label:not(.option):not(.form-check-label),
  .webform-submission-form .form-item > label:not(.option):not(.form-check-label),
  .webform-submission-form .js-form-wrapper > legend,
  .webform-submission-form .form-wrapper > legend,
  .webform-submission-form .fieldset-legend,
  .webform-submission-form .webform-element > label:not(.option):not(.form-check-label) {
    font-size: 24px !important;
    line-height: 1.2 !important;
  }

  .webform-submission-form .govuk-style-choice-list:not(.js-form-type-checkbox):not(.form-type-checkbox) > label:not(.option),
  .webform-submission-form .govuk-style-choice-list:not(.js-form-type-checkbox):not(.form-type-checkbox) .fieldset-legend {
    font-size: 28px !important;
    line-height: 1.15 !important;
  }

  .webform-submission-form .webform-flexbox,
  .webform-submission-form .webform-flex--container,
  .webform-submission-form .form-type-webform-flexbox,
  .webform-submission-form .shs-widget-container,
  .webform-submission-form .shs-container {
    display: block !important;
  }

  .webform-submission-form .shs-widget-container select,
  .webform-submission-form .shs-container select {
    min-width: 100% !important;
    width: 100% !important;
    margin-bottom: 1rem !important;
  }
}