/* Personal data requests. Both form classes are repeated so these win over
   the theme's general webform rules. */

/* The page around the form: tabs and form stay close to the header. */
.node__content:has(.webform-submission-personal-data-requests-form) > div:first-child {
  margin-top: 0;
}

.node__content:has(.webform-submission-personal-data-requests-form) > div:not(:last-child) {
  margin-bottom: 24px;
}

/* Form and sidebar as two thirds and one third, as in the design. */
@media screen and (min-width: 768px) {
  .row:has(> .col-md-9 .webform-submission-personal-data-requests-form) > .col-md-9 {
    flex: 0 0 66.6667%;
    max-width: 66.6667%;
  }

  .row:has(> .col-md-9 .webform-submission-personal-data-requests-form) > .col-md-3 {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
}

/* One column of fields, 24px apart, 320px wide, Send at the end edge. */
.webform-submission-form.webform-submission-personal-data-requests-form {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
}

.webform-submission-form.webform-submission-personal-data-requests-form .form-item {
  margin-bottom: 24px;
}

.webform-submission-form.webform-submission-personal-data-requests-form .form-item input:not([type="radio"]):not([type="checkbox"]),
.webform-submission-form.webform-submission-personal-data-requests-form .form-item textarea {
  width: 320px;
  max-width: 100%;
}

.webform-submission-form.webform-submission-personal-data-requests-form .form-item textarea {
  height: 124px;
}

/* Typed text is darker than the placeholder (which keeps the theme's grey). */
.webform-submission-form.webform-submission-personal-data-requests-form .form-item input:not([type="radio"]):not([type="checkbox"]),
.webform-submission-form.webform-submission-personal-data-requests-form .form-item textarea {
  color: #384250;
}

/* The focus underline spans the whole field item, so the item is as wide
   as its input. */
.webform-submission-form.webform-submission-personal-data-requests-form .form-item:not(.form-type-radio) {
  width: 320px;
  max-width: 100%;
}

/* Type: required label, then one option per line, 8px apart. */
.webform-submission-form.webform-submission-personal-data-requests-form .js-webform-type-radios {
  margin-bottom: 32px;
}

.webform-submission-form.webform-submission-personal-data-requests-form .js-webform-type-radios .form-radios {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 8px;
}

.webform-submission-form.webform-submission-personal-data-requests-form .js-webform-type-radios .js-form-item.js-form-type-radio.form-type-radio {
  margin-bottom: 0;
}

.webform-submission-form.webform-submission-personal-data-requests-form .form-actions {
  align-self: flex-end;
  margin-top: 8px;
}

.webform-submission-form.webform-submission-personal-data-requests-form .js-webform-type-radios .js-form-item.js-form-type-radio.form-type-radio {
  min-height: 32px;
}

.webform-submission-form.webform-submission-personal-data-requests-form .js-webform-type-radios .js-form-item.js-form-type-radio.form-type-radio label {
  font-size: 16px;
  line-height: 24px;
}

/* Greyed out until the required fields are filled. */
.webform-submission-form.webform-submission-personal-data-requests-form .form-actions .webform-button--submit:disabled {
  border-color: #e5e7eb;
  background: #e5e7eb;
  color: #9da4ae;
  cursor: not-allowed;
}