:root {
  --brand-primary: #005d8e;
  --brand-white: #fff;
  --brand-black: #000;
  --brand-brown: rgb(129, 22, 24);
  --brand-gray: #f5f7f7;
}

@font-face {
  font-family: 'mont_for_ankerheavy';
  src: url('/wp-content/themes/child-theme/assets/fonts/montforanker-heavy-webfont.woff2') format('woff2'),
    url('/wp-content/themes/child-theme/assets/fonts/montforanker-heavy-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'mont_for_ankerregular';
  src: url('/wp-content/themes/child-theme/assets/fonts/montforanker-regular-webfont.woff2') format('woff2'),
    url('/wp-content/themes/child-theme/assets/fonts/montforanker-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'mont_for_ankersemibold';
  src: url('/wp-content/themes/child-theme/assets/fonts/montforanker-regular-webfont.woff2') format('woff2'),
    url('/wp-content/themes/child-theme/assets/fonts/montforanker-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

#gform_85 label {
  font-family: 'mont_for_ankersemibold';
  color: var(--brand-blue);
}

html {
  background-color: var(--brand-primary);
}

/* Initially hide the page */
body {
  position: relative;

  #hbe-perifit-steps,
  #gf_85,
  .et_pb_section_0_tb_header {
    opacity: 0;
    transition: opacity 600ms cubic-bezier(0.2, 0, 0, 1);
  }

  .gfield-select {
    accent-color: #1D1D1F;
  }
}

#et-main-area {
  min-height: 90dvh;
  position: relative;

  #main-content {
    padding-block-end: 50px;
  }
}

footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

.yith-quick-view-close {
  color: var(--brand-gray);
}

#yith-quick-view-content div.images.classic>a>img.attachment-quick_view_image_size {
  height: 95%;
  border-radius: 8px;
}

/* After the page has loaded, the opacity will change to 1 */
body.loaded {

  #gf_85,
  .et_pb_section_0_tb_header {
    opacity: 1;
  }
}

#gfield_instruction_85_15 {
  display: none;
}

#hbe-loading-message {
  text-align: center;
}

/* Form Resume Link */
a.resume_form_link {
  color: var(--brand-primary);
}

.gform_page_fields {
  padding-inline: 1rem;
}

#gform_85 .gfield :is(select, input) {
  border-radius: 4px !important;
  /* changed from 12px */
  border: 1px solid #ccc !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;

  &:focus,
  &:focus-within {
    outline: none !important;
    border-color: var(--brand-primary) !important;
    box-shadow:
      inset 0 1px 3px color-mix(in srgb, var(--brand-primary) 15%, transparent),
      0 0 0 3px color-mix(in srgb, var(--brand-primary) 15%, transparent) !important;
  }
}

/* Form footer buttons */
#gform_85 .gform_page_footer {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
  gap: 8px;
  padding-inline: 1rem;

  & button {
    margin-right: auto !important;
    margin-left: 0;
  }

  & .gform_next_button {
    text-transform: uppercase !important;
    font-weight: 700;
  }

  & .gform_next_button,
  & [type="submit"] {
    order: -1;
  }


  @media (max-width: 500px) {

    & {
      justify-content: space-between;
      place-content: center;
      column-gap: 8px;
      row-gap: 16px;
      display: grid;
      grid-template-columns: 1fr 1fr;

      #gform_save_85_link_link {
        grid-column: 1 / all;
        grid-row-start: 2;
      }

      .gform_previous_button {
        grid-column: 1;
        grid-row-start: 1;
        margin-inline-end: 4px;
      }

      .gform_next_button {
        grid-column: 2;
        grid-row-start: 1;
        margin-inline-start: 4px;
      }

      >* {
        width: 100%;
        margin: 0;
      }
    }

    #gform_ajax_spinner_85 {
      position: absolute;
      height: 10px;
      width: 10px;
      left: 0;
      right: 0;
      margin: 0 auto;
      border-block-end-color: var(--brand-primary, #666);
      border-inline-start-color: var(--brand-primary, #666);
    }
  }
}

.accessoryoption {
  &[data-product_id="99301"] {
    order: -2;
  }
}

div#hbe-accessory-widget {
  margin-block-start: 24px;
  padding: 8px 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(200px, 1fr));

  @media (max-width: 500px) {
    grid-template-columns: 1fr;
  }

  h3 {
    grid-column: 1 / -1;
    text-align: left;
    color: var(--brand-primary);
  }

  & .accessory-item {
    grid-column-start: 1;
    align-self: baseline;
    margin-block-start: 8px;

    &+.accessory-item {
      margin-block-start: 8px;
    }

    .price {
      color: var(--brand-primary);
    }
  }

  & .total {
    font-weight: 700;
    text-align: right;
    align-self: flex-end;
    font-size: 21px;
    line-height: 1.35;

    .price {
      color: var(--brand-primary);
    }
  }
}

.hbe-company-notice {
  h3 {
    font-size: 0.8rem !important;
    line-height: 1;
    margin: 0;
    padding-block-start: 0;
  }

  p {
    font-size: 9px;
    line-height: 1.15;
  }
}

.hbe-form-page-title {
  text-align: center;

  h2 {
    color: var(--brand-primary);
    max-inline-size: 30ch;
    text-align: center;
    margin-inline: auto;
  }

  a {
    text-align: center;
    margin-inline: auto;
    color: var(--brand-primary);
    text-decoration: underline;
  }
}

/* file upload cancel links */
#gform_preview_85_41 a.gfield_fileupload_cancel {
  color: var(--brand-primary);
}

/* Form Steps to be displayed in a single row */
#gf_page_steps_85 {
  display: none;

  .gf_step:not(.gf_step_active) {
    opacity: 0.7;
  }

  .gf_step_active {
    .gf_step_number {
      background-color: var(--brand-gray);
      color: var(--brand-primary);
      font-weight: bold;
    }

    .gf_step_label {
      color: var(--brand-primary);
    }
  }
}

div#gform_85_validation_container {
  max-inline-size: fit-content;
  margin-inline: auto;
  margin-block: 1.5rem;
}

/* Company information field */
.gfield.company {
  background-color: #f5f7f7;
  padding: 12px 8px;
  border-radius: 10px;
  margin-block-start: 24px;

  h3 {
    font-size: 1rem;
    line-height: 1.25;
    color: var(--brand-primary);
  }

  p {
    font-size: 0.8rem;
  }
}

#gform_85 .gform_next_button,
#gform_submit_button_85,
#gform_send_resume_link_button_85 {
  background-color: var(--brand-primary);
  color: #fff;
  border-radius: 999px;
  font-size: 18px;
  padding: 8px 16px;
  filter: brightness(100%);
  border: 2px solid var(--brand-primary);
  outline: unset;
  transition: all cubic-bezier(0.61, 0.01, 0.36, 0.98) 250ms;

  &:hover {
    filter: brightness(120%);
  }
}

:has(> #gform_send_resume_link_button_85) {
  justify-content: center;
}

#gform_resume_email {
  max-inline-size: 70ch;
}

#gform_85 .gform_previous_button {
  color: var(--brand-primary);
  border: 2px solid var(--brand-primary);
  border-radius: 999px;
  font-size: 18px;
  padding: 8px 16px;
  filter: brightness(100%);
  transition: all cubic-bezier(1, 0, 0, 1) 250ms;

  &:hover {
    filter: brightness(110%);
  }
}

#gform_85 .gform_save_link {
  padding: 8px 16px;
  border-radius: 999px;
  filter: brightness(95%);
  transition: all cubic-bezier(0.61, 0.01, 0.36, 0.98) 250ms;

  &:hover {
    filter: brightness(100%);
  }
}

div#gform_fields_85 {
  padding: 16px;
}

#input_85_50_2_cardinfo_left .gform-field-label {
  display: none;
}

/* Hide some select page elements if the form progresses past page 1 */
body:not(:has(#gf_step_85_1.gf_step_active:not(.gf_step_completed))) {
  .hide-if-after-page-2 {
    display: none;
  }

  .steps-container {
    position: relative;
    max-width: 100%;
    margin: 50px auto;

    &::before,
    &::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      width: 150px;
      pointer-events: none;
      z-index: 10;
    }

    &::before {
      left: 0;
      background: linear-gradient(to right,
          var(--brand-gray) 0%,
          rgba(245, 247, 247, 0.8) 20%,
          rgba(245, 247, 247, 0) 100%);
    }

    &::after {
      right: 0;
      background: linear-gradient(to left,
          var(--brand-gray) 0%,
          rgba(245, 247, 247, 0.8) 20%,
          rgba(245, 247, 247, 0) 100%);
    }
  }

  #gf_page_steps_85 {
    display: flex !important;
    gap: 20px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 20px 150px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: auto;

    &::-webkit-scrollbar {
      display: none;
    }

    &:before {
      left: 0;
      background: linear-gradient(to right,
          rgba(245, 245, 245, 1) 0%,
          rgba(245, 245, 245, 0.8) 20%,
          rgba(245, 245, 245, 0) 100%);
    }

    &:after {
      right: 0;
      background: linear-gradient(to left,
          rgba(245, 245, 245, 1) 0%,
          rgba(245, 245, 245, 0.8) 20%,
          rgba(245, 245, 245, 0) 100%);
    }

    .gf_step {
      flex: 0 0 auto;
      scroll-snap-align: center;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px 24px;
      background: var(--brand-white);
      border-radius: 12px;
      box-shadow: none;
      transition: all 0.3s ease;
      border: 2px solid transparent;
      min-width: 200px;
      cursor: pointer;
      pointer-events: auto;
      user-select: none;

      &.gf_step_completed {
        background: var(--brand-white);
        border-color: transparent;

        .gf_step_number {
          background: #ccc;
          color: var(--brand-white);
        }

        .gf_step_label {
          color: var(--brand-black);
        }

        &:hover {
          border-color: var(--brand-primary);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

          .gf_step_number {
            background: var(--brand-primary);
          }
        }
      }

      &.gf_step_active {
        border: 2px solid var(--brand-primary);
        background: var(--brand-white);
        transform: scale(1.05);
        box-shadow:
          inset 0 1px 3px color-mix(in srgb, var(--brand-primary) 20%, transparent),
          0 0 0 2px color-mix(in srgb, var(--brand-primary) 25%, transparent);

        .gf_step_number {
          background: var(--brand-primary);
          color: var(--brand-white);
        }

        .gf_step_label {
          color: var(--brand-primary);
        }
      }

      &.gf_step_pending {
        opacity: 0.7;
        border-color: transparent;

        .gf_step_label {
          color: var(--brand-black);
        }

        &:hover {
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        }
      }

      &.gf_step_hidden {
        display: none;
      }

      .gf_step_number {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: rgba(65, 64, 66, 0.08);
        font-weight: 600;
        font-size: 14px;
        color: var(--brand-black);

        :has(>&) {
          display: flex;
          align-items: center;
        }
      }

      .gf_step_label {
        font-size: 14px;
        font-weight: 500;
        white-space: nowrap;
        color: var(--brand-black);
      }

    }
  }
}

#gform_85 {
  accent-color: var(--brand-primary);

  #input_85_406 .gchoice_85_406_1 {
    display: flex;
    align-items: flex-start;

    input {
      margin-block-start: 4px;
    }
  }

  .gfield_label {
    color: #4f4f4f;
    font-size: 16px;
  }


  .hbe-order-summary {
    >* {
      display: grid;
      grid-template-columns: 2fr 1fr auto;
      gap: 16px;
      align-items: center;
      place-content: space-between;

      >div {
        display: flex !important;
        gap: 16px 8px;
        align-items: center;

        @media (max-width: 500px) {
          flex-direction: column;
        }
      }

      &>*:nth-child(2) {
        justify-self: center;
      }

      &>*:last-child {
        justify-self: flex-end;
        text-align: right;
      }


      h3 {
        max-inline-size: 20ch;
        color: #232323;
        margin-inline-start: 1rem;
        font-size: 1.15rem;
        font-weight: 400;
      }

      img {
        max-width: 150px;
        align-self: flex-start;
        border-radius: 4px;
      }

      .hbe-order-line-header {
        div:first-child {
          align-self: flex-start;
        }
      }

      &+& {
        margin-block-start: 16px;
      }

      & strong>p {
        color: color-mix(in srgb, currentcolor 30%, transparent 70%);
      }

      strong {
        color: var(--brand-primary);
      }

      &.secondary-line-item,
      &:last-child {
        display: flex;
        justify-content: space-between;
      }

      &.secondary-line-item>* {
        color: color-mix(in srgb, var(--brand-primary) 65%, transparent 35%);
      }
    }
  }

  .nest-logo-block {
    display: flex;
    gap: 16px;
    align-items: flex-end;
    margin-block-end: 16px;

    img {
      height: 60px;
    }
  }

  #hbe-accessory-selection,
  #hbe-pump-selection {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;

    &:is(#hbe-accessory-selection) {
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;

      @media (min-width: 600px) {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    [data-product_id="99302"] {
      order: -2;
    }

    [data-product_id="99320"] {
      order: -1;
    }
  }

  .pumpoption,
  .accessoryoption {
    display: grid;
    align-items: flex-start;
    justify-content: space-between;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
    border-radius: 12px;
    padding: 8px;
    transition: box-shadow cubic-bezier(0.16, 0.58, 0.83, 0.67) 100ms;
    will-change: box-shadow;

    @media (max-width: 450px) {
      width: 100%;
    }

    &:is(.accessoryoption) {
      display: flex;
      flex-direction: column;
    }

    &.selected {
      --_shadow-color: color-mix(in srgb, var(--brand-primary), transparent 76%);
      box-shadow:
        0 2px 3px var(--_shadow-color),
        0 2px 3px var(--_shadow-color);
    }

    /* Product Information */
    .woocommerce {
      width: 100%;

      .product-price {
        font-size: 26px;
        font-weight: 700;
        margin-block-end: 16px;
        margin-block-start: 8px;
        color: var(--brand-primary);
        line-height: 1.3;

        @media (max-width: 600px) {
          font-size: 22px;
          line-height: 1.3;
        }
      }

      h3 {
        font-size: 24px;
        color: #232323;
        text-wrap: pretty;
        line-height: 24px;

        @media (max-width: 600px) {
          font-size: 1.25rem;
          line-height: 1.2;
        }
      }

      p.msrp {
        text-decoration: line-through;
        color: #999;
        font-size: 14px;
        margin-block-end: 4px;
      }

      p.discount-provided {
        font-style: italic;
        color: #666;
        font-size: 13px;
        margin-block-end: 12px;
      }

      p {
        line-height: 1.2;
        margin-block-end: 8px;
        padding-block-end: 0;

        em {
          text-decoration: line-through;
        }
      }

      .product-promotional-discount {
        color: #666;
        font-size: 12px;
        display: block;
        margin-block-end: 8px;
      }

      label {
        padding-block-start: 16px;
        display: block;

        &+a {
          margin-block-start: 8px;
          color: var(--brand-primary);
          text-decoration: underline;
        }
      }

      .action-buttons {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
        margin-block-start: 20px;

        >* {
          border-radius: 999px;
          transition: all 300ms ease-in-out;
          font-size: 16px;
          width: 100%;
          text-align: center;
          padding: 12px 16px;
        }

        .select-pump,
        .remove-pump,
        .remove-accessory,
        .select-accessory {
          background-color: var(--brand-primary);
          color: #fff;
          white-space: nowrap;
          font-weight: 600;
          order: 1;

          &:hover {
            background-color: var(--brand-primary) !important;
            filter: brightness(120%);
          }

          &:is(.remove-pump, .remove-accessory) {
            background-color: #dc3545;
            border: 2px solid #dc3545;
            color: #fff;

            &:hover {
              background-color: #c82333 !important;
              filter: none;
            }
          }

          &:is(.select-pump, .select-accessory) {
            background-color: var(--brand-primary);
            border: 2px solid var(--brand-primary);
          }
        }

        .yith-wcqv-button {
          background-color: transparent !important;
          color: var(--brand-primary);
          text-decoration: underline;
          padding: 8px 0;
          font-size: 14px;
          font-weight: normal;
          order: 2;
          width: auto;
          text-align: left;

          ::after {
            display: none;
          }
        }
      }
    }

    img {
      width: 100%;
      object-fit: contain;
      border-radius: 8px;
    }
  }
}

#yith-quick-view-content {
  display: flex;
  align-items: center;
  padding: 16px;

  ul {
    margin-bottom: 16px;
  }

  li {
    &+& {
      margin-block-start: 8px;
    }
  }
}

/* Hide form introduction on save and continue message */
#main-content:has(.form_saved_message) #hbe-perifit-steps {
  display: none;
}

/* Hiding redundant form fields on final page */
/* Hiding some specific field labels */
#field_85_509,
#field_85_52,
#field_85_1 label,
#field_85_3 label {
  display: none;
}

#gfield_instruction_85_54 {
  display: none;
}

.form_saved_message {
  text-align: center;

  a {
    text-decoration: underline;
  }
}

div#yith-quick-view-content {
  .price {
    display: none;
  }

  form {
    display: none;
  }

  .product_meta {
    display: none;
  }
}

.hbe-order-summary {
  transition: min-height 0.3s ease-out;
  min-height: 200px;
  /* Set an initial min-height (this can be whatever height is needed before the order summary is populated) */
}