/* _astro/form-options */

.wrap-quote-form {
  display: grid;
  grid-template-columns: 1fr max-content max-content max-content 1fr;
}

.form-field-name {
  grid-column: 2;
  grid-row: 1;
}

.form-field-email {
  grid-column: 3;
  grid-row: 1;
}

.form-field-phone {
  grid-column: 4;
  grid-row: 1;
}

.form-field-address-1 {
  grid-column: 2;
  grid-row: 2;
}

.form-field-address-2 {
  grid-column: 2;
  grid-row: 3;
}

.form-field-city {
  grid-column: 3;
  grid-row: 2;
}

.form-field-postcode {
  grid-column: 3;
  grid-row: 3;
}

.message {
  grid-column: 4;
  grid-row: 2 / 4;
  display: flex;
  flex-direction: column;
}

.message textarea {
    flex-grow: 1;
    margin-top: 0;
    min-height: none
}

.choose-services,
.chosen-services-title,
.chosen-services-tags,
.submit-button {
    grid-column: 1 / 6;
}

.red {
   color: var(--red);
}

.required {
   margin: 0 0 1rem 0;
}

.quote h2 {
   margin: 0 0 .5rem 0;
}

.choose-services input[type="checkbox"] {
   display: none;
}

.choose-services button,
.choose-services > label {
   margin: 0;
   padding: 1rem 0;
   color: inherit;
   display: flex;
   justify-content: center;
   align-items: center;
   transition: background-color .15s ease-in-out;
}

.choose-services > label {
   cursor: pointer;
}

.choose-services .services-icon {
   margin-right: .5rem;
   width: 1.5rem;
   fill: var(--violet);
   animation: fill-animate 16s ease-in-out infinite;
}

@keyframes fill-animate {
   0% {
      filter: hue-rotate(0);
   }
   25% {
      filter: hue-rotate(30deg);
   }
   50% {
      filter: hue-rotate(0);
   }
   75% {
      filter: hue-rotate(-45deg);
   }
   100% {
      filter: hue-rotate(0);
   }
}

.choose-services svg {
   width: 2rem;
   transition: transform .2s ease-in-out;
}

#choose-services-toggle:checked ~ label > svg:nth-child(2),
.choose-services button.active-toggle svg {
   transform: scaleY(-1);
}

.choose-services button.active-toggle {
   background: rgba(48, 0, 255, .06);
}

.choose-services-content {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: .5rem;
   max-height: 0;
   overflow: hidden;
   transition: max-height .2s ease-in-out;
}

.toggle-1,
.toggle-2,
.toggle-3 {
   grid-row: 1;
}

.toggle-4,
.toggle-5,
.toggle-6 {
   grid-row: 3;
}

.service-content {
   grid-column: 1 / -1;
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   gap: .5rem;
   max-height: 0;
   opacity: 0;
   overflow: hidden;
   transition: max-height 0.35s cubic-bezier(.24,.32,.36,.8), opacity 0.35s cubic-bezier(.92,.24,.24,.92) 0.15s;
}

.content-1,
.content-2,
.content-3 {
   grid-row: 2;
}

.content-4,
.content-5,
.content-6 {
   grid-row: 4;
}

.choose-service-option {
   margin: 0;
   flex-basis: calc((100% - 1rem) / 3);
   flex-grow: 0;
   transition: background .15s ease-in-out;
   height: 4rem;
   font-weight: 600;
   cursor: pointer;
}

.choose-service-option:has(input:checked) {
   background: rgba(48, 0, 255, .12);
}

.chosen-services-title {
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.35s ease-in-out;
}
.chosen-services-title p {
   text-align: center;
   margin: 1rem 0;
}

.chosen-services-tags {
   margin: 0 .5rem;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: .5rem;
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.35s ease-in-out;
}

.chosen-tag {
   box-sizing: border-box;
   padding: 0 .25rem;
   position: relative;
   height: 4rem;
   display: flex;
   justify-content: center;
   align-items: center;
   background: rgba(48, 0, 255, .12);
   opacity: 1;
   transition: opacity 0.25s ease-in-out;
}

.chosen-tag.removing {
   opacity: 0;
}

.tag-text-wrapper {
   display: flex;
   flex-direction: column;
}

.tag-category {
   /* transform: translateY(.125rem); */
   font-size: 1rem;
   opacity: 0.8;
   line-height: 1;
}

.tag-service {
   /* transform: translateY(-.125rem); */
   font-weight: 600;
   line-height: 1.2;
}

.remove-tag {
   position: absolute;
   right: 1rem;
   background: none;
   border: none;
   cursor: pointer;
   padding: 0;
}

.remove-tag svg {
   width: 1.5rem;
}

.quote .submit-button {
   margin-top: 1rem;
}




@media (max-width: 1280px) {
   .remove-tag {
      position: absolute;
      top: .5rem;
      right: 1rem;
   }
}

@media (max-width: 768px) {

div[class^='form-field'],
.message {
   margin: 0 .5rem;
}

.wrap-quote-form {
  display: flex;
  flex-direction: column;
  max-width: none;
  margin: 0 .5rem;
}

.message {
  order: 1;
}

.submit-button {
  order: 2;
}
  .choose-services > label  {
      padding: 1rem 0 0 0;
   }
   .choose-services-content {
      grid-template-columns: repeat(2, 1fr);
   }

   .toggle-3,
   .toggle-4 {
      grid-row: 3;
   }

   .toggle-5,
   .toggle-6 {
      grid-row: 5;
   }

   .content-1,
   .content-2 {
      grid-row: 2;
   }

   .content-3,
   .content-4 {
      grid-row: 4;
   }

   .content-5,
   .content-6 {
      grid-row: 6;
   }

.choose-service-option {
   flex-basis: calc((100% - .5rem) / 2);
}

   .chosen-services-tags {
      grid-template-columns: repeat(2, 1fr);
   }
   .remove-tag {
      top: .25rem;
      right: .25rem
   }
   .message {
      margin-bottom: 1rem;
   }
}

@media (max-width: 480px) {
   .chosen-tag {
      padding: .5rem .25rem;
      height: auto
   }
   .tag-text-wrapper {
      flex-grow: 1
   }
   .remove-tag {
      position: static;
      margin-left: auto;
   }
      .remove-tag svg {
      width: 1.25rem;
   }
}