@import "variables.css";

#footer {
  #vt_top_footer {
    background: var(--main_footer);
    border-bottom: 1px solid #457fb5;
    padding: 25px 40px;
    @media only screen and (max-width: 1475px) {
      padding: 25px 20px;
    }
    .legal_stuff {
      p {
        color: var(--white);
        margin: 0;
        font-size: 12px;
        line-height: 14px;
        text-align: left;
      }
    }
  }
  #main_footer {
    background: var(--main_footer);
    padding: 30px 0;
    .container {
      padding: 0 40px;
      @media only screen and (max-width: 1475px) {
        padding: 0 20px;
      }
      #top_footer {
        display: flex;
        @media only screen and (max-width: 1020px) {
          justify-content: space-between;
        }
        @media only screen and (max-width: 863px) {
          flex-direction: column;
        }
        #logo_badges {
          width: 55%;
          padding: 0 40px 0 0;
          @media only screen and (max-width: 1020px) {
            width: 65%;
            padding: 0;
          }
          @media only screen and (max-width: 863px) {
            width: auto;
          }
          #footer_logo {
            display: block;
            padding: 30px 0;
            margin: 0;
            width: 300px;
            @media only screen and (max-width: 863px) {
              width: 250px;
              margin: 0 auto;
              padding: 0 0 40px 0;
            }
          }
          #badges {
            display: flex;
            justify-content: flex-start;
            color: var(--white);
            text-align: left;
            font-size: 17px;
            line-height: 20px;
            margin: 0 0 35px 0;
            width: 100%;
            @media only screen and (max-width: 863px) {
              margin: 0 0 30px 0;
            }
            .badge_item {
              display: flex;
              height: 75px;
              align-items: flex-start;
              column-gap: 20px;
              justify-content: flex-start;
              @media only screen and (max-width: 863px) {
                flex-direction: column;
                align-items: center;
                height: unset;
              }
            }
            #returns {
              width: 180px;
              @media only screen and (max-width: 863px) {
                order: 2;
                width: 30%;
              }
              .fa-stack {
                height: 40px;
                line-height: 40px;
                width: 40px;
                @media only screen and (max-width: 863px) {
                  height: 50px;
                  line-height: unset;
                  width: 2.5em;
                }
                .fa-box {
                  font-size: 40px;
                  font-weight: 100;
                  @media only screen and (max-width: 863px) {
                    font-size: 30px;
                    line-height: 30px;
                  }
                }
                .fa-stack {
                  height: 2em;
                  line-height: 2em;
                  position: absolute;
                  right: -16px;
                  bottom: -35px;
                  @media only screen and (max-width: 863px) {
                    right: -13px;
                    top: 15px;
                  }
                  .fa-shield {
                    color: var(--yellow);
                    line-height: 66px;
                    font-size: 30px;
                    @media only screen and (max-width: 863px) {
                      font-size: 30px;
                      line-height: 30px;
                    }
                  }
                  .fa-arrow-rotate-right {
                    font-size: 15px;
                    color: var(--blue);
                    @media only screen and (max-width: 863px) {
                      font-size: 12px;
                      line-height: 30px;
                    }
                  }
                }
              }
            }
            #customer_support {
              width: 250px;
              @media only screen and (max-width: 863px) {
                order: 1;
                width: 35%;
              }
              .fa-stack {
                width: 50px;
                @media only screen and (max-width: 863px) {
                  height: 50px;
                }
                .fa-user-hair {
                  font-size: 40px;
                  width: 40px;
                  @media only screen and (max-width: 863px) {
                    font-size: 30px;
                    width: unset;
                  }
                }
                .fa-clock {
                  color: var(--yellow);
                  line-height: 66px;
                  font-size: 30px;
                  position: absolute;
                  right: 3px;
                  bottom: -10px;
                  @media only screen and (max-width: 863px) {
                    font-size: 30px;
                    line-height: 30px;
                    right: 12px;
                    bottom: 3px;
                  }
                }
              }
            }
            #satisfaction {
              width: 260px;
              @media only screen and (max-width: 863px) {
                order: 3;
                width: 35%;
              }
              .fa-stack {
                @media only screen and (max-width: 863px) {
                  height: 50px;
                }
                .fa-money-bill {
                  font-size: 40px;
                  @media only screen and (max-width: 863px) {
                    font-size: 30px;
                  }
                }
                .fa-badge-check {
                  color: var(--yellow);
                  line-height: 66px;
                  font-size: 30px;
                  position: absolute;
                  right: 3px;
                  bottom: -2px;
                  @media only screen and (max-width: 863px) {
                    font-size: 30px;
                    line-height: 30px;
                    right: 6px;
                    bottom: 5px;
                  }
                }
              }
            }
            p {
              font-size: 16px;
              color: var(--light_grey);
              line-height: 20px;
              margin: 0;
              width: 59%;
              @media only screen and (max-width: 960px) {
                width: 55%;
              }
              @media only screen and (max-width: 863px) {
                font-size: 14px;
                line-height: 16px;
                text-align: center;
                width: 100%;
              }
              strong {
                color: var(--white);
              }
            }
          }
          #payment_connect {
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            column-gap: 50px;
            @media only screen and (max-width: 863px) {
              flex-direction: column;
              align-items: center;
            }
            #payment_cards {
              display: flex;
              flex-direction: column;
              @media only screen and (max-width: 1200px) {
                margin: 0 0 50px 0;
              }
              @media only screen and (max-width: 863px) {
                margin: 0 0 15px 0;
              }
              #cards {
                img {
                  padding: 0 3px;
                  @media only screen and (max-width: 863px) {
                    height: 26px;
                    width: auto;
                  }
                }
              }
              #otherMethods {
                display: flex;
                column-gap: 10px;
                justify-content: space-between;
                @media only screen and (max-width: 863px) {
                  column-gap: 15px;
                  justify-content: center;
                }
                .icon {
                  height: 30px;
                  width: 85px;
                }
                .paypal-wordmark {
                  filter: brightness(0) invert(1);
                  object-fit: contain;
                }
                img.icon {
                  object-fit: contain;
                }
              }
            }
            #connect_with {
              color: var(--white);
              @media only screen and (max-width: 1200px) {
                margin: 0 0 20px 0;
              }
              p {
                font-size: 20px;
                line-height: 16px;
                font-family: "Futura PT", sans-serif;
                text-align: left;
                margin: 0 0 10px 0;
                @media only screen and (max-width: 1200px) {
                  text-align: center;
                }
              }
              #socials {
                display: flex;
                justify-content: center;
                column-gap: 20px;
                height: 30px;
                svg {
                  color: var(--light_grey);
                  height: 30px;
                  width: 30px;
                }
              }
            }
          }
        }
        #footer_nav {
          display: flex;
          text-align: left;
          width: 45%;
          justify-content: space-between;
          column-gap: 10px;
          @media only screen and (max-width: 960px) {
            width: 25%;
            flex-direction: column;
          }
          @media only screen and (max-width: 863px) {
            display: none;
          }
          ul {
            list-style: none;
            margin: 4px 0 0 0;
            li {
              display: block;
              font-size: 16px;
              line-height: 30px;
              color: var(--white);
              strong {
                font-size: 20px;
                font-family: "Futura PT", sans-serif;
              }
              a {
                color: var(--footer_nav);
                display: block;
                text-decoration: none;
              }
              &:last-child {
                border: none;
              }
            }
          }
        }
        #footer_nav_mobile {
          display: none;
          @media only screen and (max-width: 863px) {
            display: block;
            width: auto;
          }
          ul {
            list-style: none;
            margin: 4px 0 15px 0;
            row-gap: 10px;
            text-align: left;
            li {
              display: block;
              font-size: 20px;
              line-height: 36px;
              color: var(--white);
              @media only screen and (max-width: 1020px) {
                font-size: 16px;
                line-height: 32px;
              }
              strong {
                font-size: 22px;
                font-family: "Futura PT", sans-serif;
                font-weight: normal;
              }
              a {
                color: var(--footer_nav);
                display: flex;
                text-decoration: none;
                justify-content: space-between;
                align-items: center;
                line-height: 36px;
              }
              .footer_links {
                display: none;
              }
            }
          }
        }
      }
    }
    #legal {
      border-top: 1px solid rgba(255, 255, 255, 0.25);
      padding: 40px 0 10px 0;
      margin: 50px 0 0 0;
      @media only screen and (max-width: 960px) {
        padding: 30px 0 20px 0;
        margin: 30px 0 0 0;
      }
      p {
        color: var(--light_grey);
        font-size: 13px;
        text-align: center;
        margin: 0;
        @media only screen and (max-width: 960px) {
          font-size: 12px;
          line-height: 20px;
        }
        a {
          color: var(--light_grey);
        }
      }
    }
  }
}

iframe[name="google_conversion_frame"] {
  height: 0 !important;
  width: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
  margin-top: -13px;
  float: left;
}

/* Mobile footer accordion. footer.css only ever declares the closed state
   (`#footer_nav_mobile ul li .footer_links { display: none }`) because prod drives the open state
   from jQuery - slideDown writes an inline display and animates height, so no open-state rule was
   ever needed. We toggle a class instead, which means declaring both halves here.

   Same technique as the mobile nav panels in header.css: animate max-height so it slides rather
   than snaps, and use visibility (delayed to the end of the transition on close) to keep the
   links out of the tab order while shut, since the hidden attribute would cancel the transition. */
@media only screen and (max-width: 863px) {
  #footer #main_footer .container #top_footer #footer_nav_mobile ul li a.dropdown {
    cursor: pointer;
  }

  #footer #main_footer .container #top_footer #footer_nav_mobile ul li .footer_links {
    display: block;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, visibility 0s linear 0.4s;
    visibility: hidden;
  }

  #footer #main_footer .container #top_footer #footer_nav_mobile ul li .footer_links.active {
    max-height: 400px;
    transition: max-height 0.4s ease, visibility 0s;
    visibility: visible;
  }
}