/* Make the proceed to next step and back button order reverse */

#edit-actions {
  display: flex;
  justify-content: flex-start; /* aligns left */
}

#edit-actions-wizard-next {
  order: 1; /* Proceed button first */
}

#edit-actions-wizard-prev,
#edit-actions-preview-prev {
  order: 2; /* Back button second */
}

/* Do not display required label inside the Select file upload */
.webform-submission-form .webform-file-button.form-required::after {
  content: none !important;
}

/* Remove "(optional)" spans */
.form-item-upload-a-file .checkbox-optional-span {
  display: none !important;
}

/* Prevent Webform/Drupal from switching required to optional */
#edit-upload-a-file--label.form-optional::after,
[id^="edit-upload-a-file--"][id$="--label"].form-optional::after {
  content: " (required)" !important;
}

/* French should show (obligatoire) not (required) */
:lang(fr) #edit-upload-a-file--label.form-optional::after,
:lang(fr) [id^="edit-upload-a-file--"][id$="--label"].form-optional::after {
  content: " (obligatoire)" !important;
}

/*Button*/
@media (max-width: 600px) {
  /* Target all webform action wrappers */
  .webform-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch;
  }

  /* Make each button take a full row */
  .webform-actions .form-submit {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
    margin-bottom: 10px;
  }
}

/*Mobile only*/
@media (max-width: 767px) {
  #edit-address-line-1,
  #edit-city,
  #edit-unit-number {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Unit number and address line 1 */
/* Desktop only */
@media (min-width: 768px) {

  .form-item-unit-number,
  .form-item-address-line-1 {
    display: flex !important;
    flex-direction: column;
  }

  .form-item-unit-number {
    float: left;
    width: 220px !important;
    margin-right: 20px;
  }

  .form-item-address-line-1 {
    float: left;
    width: calc(100% - 240px) !important;
  }

  /* Reset the next field so it starts below */
  .form-item-address-line-2 {
    clear: both;
  }
  
  /* hide the hidden form item when no reply */
  .js-webform-states-hidden.form-item-unit-number,
  .js-webform-states-hidden.form-item-address-line-1{
    display:none !important;
  }
  
  /* French unit number and line 1 */
  .path-fr-node-557444-webform-test .webform-submission-send-the-premier-a-message-form .form-item-unit-number .form-optional.form-label,
  .path-fr-forme-envoyer-un-message-au-premier-ministre .webform-submission-send-the-premier-a-message-form .form-item-unit-number .form-optional.form-label{
    width: max-content;
  }
}