/* This stylesheet is for the WeForms "Responsible Business report Download" form. */
/* It is form specific as is uses .weforms-8945 class. It won't style other forms. */

/* Style the entire form container */
form.weforms-8945 {
    max-width: 100%;
    margin: 0 auto;
    background-color: #e5ebf1;
    padding: 2rem;
    border-radius: 6px;
}

/* Style all form list items (fields) */
form.weforms-8945 ul.wpuf-form li.wpuf-el {
    margin-bottom: 2rem !important;
}

/* Style labels */
form.weforms-8945 .wpuf-label label {
    font-weight: 600;
    color: #272324;
}

/* Style text input fields */
form.weforms-8945 input.textfield,
form.weforms-8945 input.email {
    width: 100% !important;
    padding: 0.75rem 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    box-sizing: border-box;
}

/* Style radio inputs container */
form.weforms-8945 .wpuf-fields[data-type="radio"] {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.5rem 1rem; /* space the radio inputs, 0.5 vertical, 1 horizontal */
}

/* Style radio labels */
form.weforms-8945 label.wpuf-radio-block,
form.weforms-8945 label.wpuf-radio-inline {
    font-weight: normal;
    cursor: pointer;
    margin-bottom: 0;
}

/* Style submit button */
form.weforms-8945 input.wpuf_submit_8945 {
    background-color: #0077be;
    color: #fff;
    padding: 1em 2em;
    border: none;
    border-radius: 6px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.3s ease;
    /* Make room on the right for the icon */
    padding-right: 3em !important;
    /* Background image: FontAwesome download icon SVG */
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzODQgNTEyIj48IS0tIUZvbnQgQXdlc29tZSBQcm8gdjUuMTUuNCBieSBAZm9udGF3ZXNvbWUgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbSBMaWNlbnNlIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20vbGljZW5zZSAoQ29tbWVyY2lhbCBMaWNlbnNlKSBDb3B5cmlnaHQgMjAyNiBGb250aWNvbnMsIEluYy4tLT48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJtMzQ4LjUgMjY0LTE0OCAxNDguNWMtNC43IDQuNy0xMi4zIDQuNy0xNyAwTDM1LjUgMjY0Yy00LjctNC43LTQuNy0xMi4zIDAtMTdsNy4xLTcuMWM0LjctNC43IDEyLjMtNC43IDE3IDBsMTE1LjQgMTE2VjQ0YzAtNi42IDUuNC0xMiAxMi0xMmgxMGM2LjYgMCAxMiA1LjQgMTIgMTJ2MzExLjlMMzI0LjQgMjQwYzQuNy00LjcgMTIuMy00LjcgMTcgMGw3LjEgNy4xYzQuNyA0LjYgNC43IDEyLjIgMCAxNi45TTM4NCA0Njh2LThjMC02LjYtNS40LTEyLTEyLTEySDEyYy02LjYgMC0xMiA1LjQtMTIgMTJ2OGMwIDYuNiA1LjQgMTIgMTIgMTJoMzYwYzYuNiAwIDEyLTUuNCAxMi0xMiIvPjwvc3ZnPg==');
    background-repeat: no-repeat;
    background-position: calc(100% - 1.5em) center;
    background-size: 18px 18px;
}
/* Darker colour on hover */
form.weforms-8945 input.wpuf_submit_8945:hover {
    background-color: #005f8a;
}

/* Style the input fields, placeholder text and input text */
.wpuf-name-field-first-name input.textfield,
.wpuf-name-field-last-name input.textfield,
.wpuf-fields input.email,
.wpuf-fields input.textfield {
  color: #272324; /* Default colour (fallback) */
  font-size: 2rem;
  background-color: #fff;
}

.wpuf-name-field-first-name input.textfield::placeholder,
.wpuf-name-field-last-name input.textfield::placeholder,
.wpuf-fields input.email::placeholder,
.wpuf-fields input.textfield::placeholder
 {
  color: #a4a4a4; /* Colour for empty input */
  font-size: 1rem;
  background-color: #fff;
}

.wpuf-name-field-first-name input.textfield:focus,
.wpuf-name-field-last-name input.textfield:focus,
.wpuf-fields input.email:focus,
.wpuf-fields input.textfield:focus {
  color: #272324; /* Colour when user focuses and types */
  outline: 2px solid #007BFF;  /* Blue outline on focus */
  background-color: #fff;   /* Light blue background on focus */
}

/* Force the inner field wrapper to take up the full container width */
form.weforms-8945 .wpuf-fields {
width: 100% !important;
max-width: 100% !important;
}

/* Ensure all input types inside the fields wrapper span 100% */
form.weforms-8945 .wpuf-fields input[type="text"],
form.weforms-8945 .wpuf-fields input[type="email"],
form.weforms-8945 .wpuf-fields input.textfield {
width: 100% !important;
display: block;
}

/* Make the input fields fill the width of the form */
/* 1. Force the parent list items to break out of their fixed column layouts */
form.weforms-8945 ul.wpuf-form li.wpuf-el {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  display: block !important;
  clear: both !important;
}

/* 2. Force the inner wrapper content columns to go full width */
form.weforms-8945 .wpuf-fields {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  display: block !important;
}

/* 3. Ensure the input fields fill out the now-expanded parents */
form.weforms-8945 input.textfield,
form.weforms-8945 input.email,
form.weforms-8945 .wpuf-fields input[type="text"] {
  width: 100% !important;
  min-width: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
  color: #272324;
  font-size: 1.125rem;
}


/* Add media queries so it follows the appropriate column grid */
/* Replicating Bootstrap 4 classes controlling page content above WeForm:
   col-md-10 offset-md-1 col-lg-6 offset-lg-3*/

/* Base: full width (or whatever default you want) */
  
/* Medium devices (≥768px) */
@media (min-width: 768px) {
  form.weforms-8945 {
    width: 83.3333%;       /* col-md-10 */
    margin-left: 8.3333%;  /* offset-md-1 */
    margin-right: 0;
  }
}

/* Large devices (≥992px) */
@media (min-width: 992px) {
  form.weforms-8945 {
    width: 50%;            /* col-lg-6 */
    margin-left: 25%;      /* offset-lg-3 */
    margin-right: 0;
  }
}