.webform-file-button {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.btn-select-file {
  margin-top: 0 !important;
}
legend#edit-extension-approval--wrapper-legend::after {
    display: inline-block;
    content: "*";
    color: red;
}

/* Darken user-entered text so it passes WCAG contrast in all browsers. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
select,
textarea,
.form-control {
  color: #1C1D24 !important;
}

/* JS-controlled conditional sections: hidden until the date logic shows
   them. Scoped to the public submission form so the webform admin UI
   (whose Save button also lives in edit-actions) is not affected. */
.webform-submission-form div[id^="edit-info-notice-date-same-day"],
.webform-submission-form div[id^="edit-extension-approval-no"],
.webform-submission-form [data-drupal-selector="edit-extension-approval-wrapper"],
.webform-submission-form .info-notice-upload,
.webform-submission-form .details-review-section,
.webform-submission-form .declaration-section,
.webform-submission-form [data-drupal-selector="edit-actions"] {
  display: none;
}

/* Alert banners (self-contained so the form renders the same everywhere). */
.qps-messages {
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  /* Reserve room for the alert icon so it never overlaps the text,
     including environments whose stylesheets add their own icon. */
  padding-inline-start: 3.25rem;
  position: relative;
  margin-block: 1rem 1.5rem;
}
.qps-messages > :first-child p:first-child,
.qps-messages > p:first-child {
  margin-block-start: 0;
}
.qps-messages > :last-child p:last-child,
.qps-messages > p:last-child {
  margin-block-end: 0;
}
/* Beat the theme's high-specificity ".field-wrap.form-type-processed-text p"
   margin rule so banner paragraphs sit close together. */
.webform-component .forms-container .field-wrap .qps-messages p,
body.path--webform .forms-container .field-wrap .qps-messages p,
.qps-messages p {
  margin: 0 !important;
}
.webform-component .forms-container .field-wrap .qps-messages p + p,
body.path--webform .forms-container .field-wrap .qps-messages p + p,
.qps-messages p + p {
  margin-top: 0.75rem !important;
}
.qps-messages--error {
  background-color: #FFD3D3;
  color: #B30000;
}
.qps-messages--error::before {
  content: "";
  background: url("/themes/qldpol/assets/images/alert.svg") center center no-repeat;
  background-size: 22px 22px;
  display: inline-block;
  width: 22px;
  height: 22px;
  position: absolute;
  inset-inline-start: 1rem;
  top: 1.4rem;
}

/* Error messages (validation summary + file upload errors): match the
   qps-messages--error banner style. Covers both markups: core file.js
   errors use .messages--error, the radix theme renders server-side
   messages as Bootstrap .alert-danger. */
.messages--error,
.alert-danger {
  background-color: #FFD3D3 !important;
  color: #B30000 !important;
  border: 0;
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  padding-inline-start: 3.25rem;
  position: relative;
}
.messages--error::before,
.alert-danger::before {
  content: "";
  background: url("/themes/qldpol/assets/images/alert.svg") center center no-repeat;
  background-size: 22px 22px;
  display: inline-block;
  width: 22px;
  height: 22px;
  position: absolute;
  inset-inline-start: 1rem;
  top: 1.4rem;
}
.messages--error li,
.messages--error a,
.alert-danger li,
.alert-danger a {
  color: #B30000 !important;
}
.messages--error ul,
.alert-danger ul {
  margin-block: 0;
  padding-inline-start: 1.25rem;
}
/* A single-item alert reads as a sentence, not a list. */
.messages--error ul:has(> li:only-child),
.messages--error ul:has(> li:only-child) > li {
  list-style: none !important;
  padding-inline-start: 0;
}
.messages--error li,
.alert-danger li {
  margin-inline-start: 0;
}
.messages--error em,
.alert-danger em {
  font-style: normal;
}

#webform-submission-application-for-check-your-eligi-add-form,
#edit-suitability-title,
#edit-applicant-details-section,
#edit-application-details-section {

  #edit-suitability-title {
    legend.fieldset-legend {
      padding-block-end: 0.36rem;
    }
  }

  .radios--wrapper .js-webform-radios {
    margin-block-start: 1rem;
    flex-direction: column;
    gap: 0.75rem;

    input[type="radio"] {
      transform: scale(1.5);
    }
  }

  .form-type-checkbox {
    margin-block-start: 2rem;

    input[type="checkbox"] {
      transform: scale(1.5);
    }
  }

  .qps-messages--error {
    p:first-of-type {
      margin-block-start: 0px !important;
    }
  }

  .form-type-date.form-item-date-seized {
    .input-wrapper>div {
      display: flex;
      flex-direction: column-reverse;
    }
  }

  input,
  select,
  textarea {
    border-radius: 0.25rem;
    border: 1.2px solid #d9d9d9;
  }

  input[type="date"] {
    display: block;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0.25rem;
    height: 46px;
    /* right padding reserves space so date text never overlaps the dark button */
    /* padding: 0 46px 0 16px; */
    padding-inline-start: 1rem;
    border: 1.2px solid #d9d9d9;
    /* dark button rendered via background so it's consistent across browsers */
    background-color: white;
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"),
      linear-gradient(to left, #1C1D24 46px, white 46px);
    background-repeat: no-repeat;
    background-position: right 13px center, 0 0;
    background-size: 20px 20px, 100% 100%;
  }

  /* transparent but still opens the date picker on click */
  input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0;
    width: 46px;
    height: 46px;
    cursor: pointer;
  }

  ol li {
    margin-inline-start: 1rem;
  }
}

.form-control {
  border-radius: 0.25rem !important;
  border: 1.2px solid #d9d9d9 !important;
}