/* Forms CSS cleared for debugging multi-column layout */

/* Horizontal radio scale */
.EPiServerForms .rating-horizontal ul.FormChoices {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.EPiServerForms .rating-horizontal ul.FormChoices > li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.EPiServerForms .rating-horizontal input[type="radio"] {
  width: 20px !important;
  height: 20px;
  accent-color: #57a436;
}

/* Broader selector to match default Forms markup (div/Form__Element__Value) */
.EPiServerForms .rating-horizontal .Form__Element__Value,
.EPiServerForms .rating-horizontal .Form__Element__Value > ul,
.EPiServerForms .rating-horizontal .Form__Element__Value > div,
.EPiServerForms .rating-horizontal .FormChoice,
.EPiServerForms .rating-horizontal .FormChoice__Items {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  flex-wrap: nowrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.EPiServerForms .rating-horizontal .Form__Element__Value > *,
.EPiServerForms .rating-horizontal .FormChoice > *,
.EPiServerForms .rating-horizontal .FormChoice__Items > * {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: auto !important;
}

/* Tame common structures that force vertical stacking */
.EPiServerForms .rating-horizontal .Form__Element__Value br {
  display: none;
}
.EPiServerForms .rating-horizontal label {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
}

/* Exact structure you shared: FormChoice contains a fieldset with div items */
.EPiServerForms .FormChoice.rating-horizontal fieldset {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  border: 0; /* keep default visuals minimal */
  margin: 0;
  padding: 0;
}

.EPiServerForms .FormChoice.rating-horizontal fieldset > legend {
  flex: 0 0 100%; /* keep legend on its own line */
  margin-bottom: 8px;
}

.EPiServerForms .FormChoice.rating-horizontal fieldset > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* Panels */
.forms-panel {
  position: relative;
  background: #f5f6f7;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 28px 20px 20px; /* extra top space for title chip */
  margin: 16px 0;
  overflow: visible; /* allow title chip to hang outside */
}

.forms-panel__title {
  position: absolute;
  top: -12px;
  left: 16px;
  background: #ffffff;
  border: 2px solid #e5e7eb;
  border-radius: 6px;
  padding: 4px 10px;
  font-weight: 600;
  color: #2e7d32;
  line-height: 1.2;
  z-index: 1; /* keep above panel */
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
}

/* ================================ */
/* Free Quote form layout + styling */
/* ================================ */

.EPiServerForms .Form__MainBody,
.EPiServerForms form {
  max-width: 760px;
  margin: 40px auto;
  padding: 24px 20px;
  background: #fff;
  border-radius: 12px;
}

.EPiServerForms .Form__Elements {
  display: grid;
  grid-template-columns: 1fr 1fr; /* two columns by default */
  gap: 24px;
}

/* Form element wrapper spacing */
.EPiServerForms .Form__Element {
  margin-bottom: 0;
}

/* Default form elements take one column */
.EPiServerForms .FormTextbox,
.EPiServerForms .FormEmail,
.EPiServerForms .FormTelephone,
.EPiServerForms .FormNumber {
  grid-column: span 1;
}

/* force full-width rows for specific elements */
.EPiServerForms .FormDropdown,
.EPiServerForms .FormParagraphText,
.EPiServerForms .FormSubmitButton,
.EPiServerForms .FormChoice {
  grid-column: 1 / -1;
}

@media (max-width: 767px) {
  .EPiServerForms .Form__Elements {
    grid-template-columns: 1fr; /* single column on mobile */
  }

  .EPiServerForms .FormDropdown,
  .EPiServerForms .FormParagraphText,
  .EPiServerForms .FormSubmitButton {
    grid-column: 1;
  }
}

.EPiServerForms .Form__Element__Caption {
  display: block;
  margin-bottom: 16px;
  font-weight: 400;
  font-size: 16px;
  color: #313131;
}

.EPiServerForms input[type="text"],
.EPiServerForms input[type="email"],
.EPiServerForms input[type="tel"],
.EPiServerForms select,
.EPiServerForms textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #75797c;
  border-radius: 10px;
  background: #f0f0f0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease,
    background-color 0.15s ease;
}

/* When input has value (filled) */
.EPiServerForms input[type="text"]:not(:placeholder-shown),
.EPiServerForms input[type="email"]:not(:placeholder-shown),
.EPiServerForms input[type="tel"]:not(:placeholder-shown),
.EPiServerForms select:not([value=""]),
.EPiServerForms textarea:not(:placeholder-shown) {
  background: #fff;
}

/* When input is active/focused */
.EPiServerForms input:focus,
.EPiServerForms select:focus,
.EPiServerForms textarea:focus {
  outline: none;
  border-color: #6eb43f;
  box-shadow: 0 0 0 3px rgba(110, 180, 63, 0.2);
  background: #fff;
}

.EPiServerForms .FormSubmitButton {
  width: 100%;
  margin-top: 32px;
}

.EPiServerForms .FormSubmitButton input[type="submit"],
.EPiServerForms .FormSubmitButton button,
.EPiServerForms form .FormSubmitButton input[type="submit"],
.EPiServerForms form .FormSubmitButton button,
button.FormSubmitButton,
input[type="submit"].FormSubmitButton {
  width: 100% !important;
  padding: 14px 24px !important;
  background: #6eb43f !important;
  background-color: #6eb43f !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, opacity 0.2s ease !important;
}

.EPiServerForms .FormSubmitButton input[type="submit"]:hover:not(:disabled),
.EPiServerForms .FormSubmitButton button:hover:not(:disabled),
.EPiServerForms
  form
  .FormSubmitButton
  input[type="submit"]:hover:not(:disabled),
.EPiServerForms form .FormSubmitButton button:hover:not(:disabled),
button.FormSubmitButton:hover:not(:disabled),
input[type="submit"].FormSubmitButton:hover:not(:disabled) {
  background: #5a9633 !important;
  background-color: #5a9633 !important;
}

.EPiServerForms .FormSubmitButton input[type="submit"]:disabled,
.EPiServerForms .FormSubmitButton button:disabled,
button.FormSubmitButton:disabled,
input[type="submit"].FormSubmitButton:disabled {
  background: #9ca3af !important;
  background-color: #9ca3af !important;
  color: #d1d5db !important;
  cursor: not-allowed !important;
  opacity: 0.6 !important;
}