/**
 * Fix for webform layout container after Bootstrap 5 upgrade
 * Restores float-based horizontal layout for event registration forms
 */

/* ============================================
   LAYOUT CONTAINER BASE STYLES
   ============================================ */

/* Ensure layout container uses block display, not flex/grid */
.webform-layoutcontainer--equal {
  display: block !important;
  width: 100% !important;
}

/* Clearfix for floated children */
.webform-layoutcontainer--equal::before,
.webform-layoutcontainer--equal::after {
  content: '' !important;
  display: table !important;
}

.webform-layoutcontainer--equal::after {
  clear: both !important;
}

/* ============================================
   FIVE ITEMS LAYOUT (17.6% each + 3% margin)
   ============================================ */

@media (min-width: 768px) {
  .webform-layoutcontainer--equal > .js-form-item:first-child:nth-last-child(5),
  .webform-layoutcontainer--equal > .js-form-item:first-child:nth-last-child(5) ~ .js-form-item {
    display: block !important;
    float: left !important;
    clear: none !important;
    text-align: inherit !important;
    width: 17% !important;
    margin-left: 0% !important;
    margin-right: 3% !important;
    margin-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  .webform-layoutcontainer--equal > .js-form-item:last-child {
    margin-right: 0% !important;
  }
}

/* ============================================
   FOUR ITEMS LAYOUT (22.75% each + 3% margin)
   ============================================ */

@media (min-width: 768px) {
  .webform-layoutcontainer--equal > .js-form-item:first-child:nth-last-child(4),
  .webform-layoutcontainer--equal > .js-form-item:first-child:nth-last-child(4) ~ .js-form-item {
    display: block !important;
    float: left !important;
    clear: none !important;
    text-align: inherit !important;
    width: 22% !important;
    margin-left: 0% !important;
    margin-right: 3% !important;
    margin-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }
}

/* ============================================
   FORM ITEM STYLES
   ============================================ */

/* Ensure all form items can be floated */
.webform-layoutcontainer--equal > .js-form-item {
  display: block !important;
}

/* Inputs should fill their container */
.webform-layoutcontainer--equal > .js-form-item input,
.webform-layoutcontainer--equal > .js-form-item select,
.webform-layoutcontainer--equal > .js-form-item textarea {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Labels should be block */
.webform-layoutcontainer--equal > .js-form-item label {
  display: block !important;
  margin-bottom: 5px !important;
}


/* ============================================
   EMAIL CONFIRM FIELDSET (Panel Styling)
   ============================================ */

/* Restore panel appearance for email confirm fieldset */
.webform-email-confirm--wrapper {
  margin-bottom: 20px !important;
  background-color: #fff !important;
  border: 1px solid #ddd !important;
  border-radius: 4px !important;
  box-shadow: 0 1px 1px rgba(0,0,0,.05) !important;
}

/* Make the legend visible and styled like panel-heading */
.webform-email-confirm--wrapper legend {
  display: block !important;
  width: 100% !important;
  padding: 10px 15px !important;
  margin-bottom: 0 !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #333 !important;
  background-color: #f5f5f5 !important;
  border-bottom: 1px solid #ddd !important;
  border-radius: 3px 3px 0 0 !important;
}

/* Make legend text visible */
.webform-email-confirm--wrapper legend span {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
}

/* Style the fieldset body like panel-body */
.webform-email-confirm--wrapper .fieldset-wrapper {
  padding: 15px !important;
}

/* ============================================
   EXTRA VISITORS / WEBFORM MULTIPLE TABLE
   ============================================ */

/* Info message styling */
.edit-extra-visitors-extra-tic-msg {
  background-color: #d9edf7 !important;
  border: 1px solid #bce8f1 !important;
  color: #31708f !important;
  padding: 10px 15px !important;
  border-radius: 4px !important;
  margin-bottom: 15px !important;
}

/* Remove the border/line above the add button area */
.webform-multiple-add {
  border-top: none !important;
  padding-top: 0 !important;
  margin-top: 15px !important;
}

/* Hide borders from table wrapper and table */
.webform-multiple-table,
.webform-multiple-table .table-responsive,
.webform-multiple-table table {
  border: none !important;
  border-bottom: none !important;
  margin-bottom: 0 !important;
}

/* Hide table header border */
.webform-multiple-table table thead {
  border-bottom: none !important;
}

.webform-multiple-table table thead tr,
.webform-multiple-table table thead th {
  border: none !important;
}

/* Hide the "more items" number input */
.webform-multiple-add .js-form-item-extra-visitors-add-more-items {
  display: none !important;
}

/* Change add visitor button from green to white/default */
.webform-multiple-add .btn-success[name*="add"] {
  background-color: #fff !important;
  border: 1px solid #ccc !important;
  color: #333 !important;
}

.webform-multiple-add .btn-success[name*="add"]:hover {
  background-color: #e6e6e6 !important;
  border-color: #adadad !important;
}

/* Style the "more items" input group to look inline */
.webform-multiple-add .input-group {
  display: inline-flex !important;
  width: auto !important;
  vertical-align: middle !important;
  margin-left: 10px !important;
}

.webform-multiple-add .input-group .form-number {
  width: 60px !important;
  display: inline-block !important;
}

.webform-multiple-add .input-group-text {
  background-color: transparent !important;
  border: none !important;
  padding-left: 5px !important;
  padding-right: 0 !important;
  font-size: 14px !important;
  color: #333 !important;
}

/* Make the container-inline actually inline */
.webform-multiple-add.container-inline {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* Style toggle weight button like BS3 btn-default */
.tabledrag-toggle-weight-wrapper .tabledrag-toggle-weight {
  background-color: #fff !important;
  border: 1px solid #ccc !important;
  color: #333 !important;
}

.tabledrag-toggle-weight-wrapper .tabledrag-toggle-weight:hover {
  background-color: #e6e6e6 !important;
  border-color: #adadad !important;
}

/* ============================================
   CHECKBOX AND RADIO BUTTON ALIGNMENT
   ============================================ */

/* Remove Bootstrap 5 form-check padding */
.webform-submission-form .form-check,
.webform-submission-add-form .form-check {
  padding-left: 0 !important;
}

/* Position checkbox input properly */
.webform-submission-form .form-check input[type="checkbox"],
.webform-submission-add-form .form-check input[type="checkbox"] {
  margin-left: 0 !important;
  position: static !important;
}