/* Footer Styles */
footer {
  background-color: #020D1C;
  padding: var(--space-20) 0;
}

.footer-container {
  max-width: 1640px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.footer-top {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: var(--space-8);
  padding-bottom: var(--space-12);
  align-items: start;
}

/* Left Column - Logo & Newsletter */
.footer-left {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 450px;
}

.footer-logo img {
  max-width: 280px;
  height: auto;
}

.footer-newsletter {
  .wpcf7 form {
    display: flex;
    flex-direction: column;
    gap: 0;

    input[type="email"] {
      background-color: var(--white);
      border: none;
      color: var(--primary-color);
      padding: var(--space-3) var(--space-4);
      font-size: var(--text-base);
      width: 100%;
      margin: 0 0 var(--space-4) 0;
      font-family: var(--font-body);
    }

    input[type="email"]::placeholder {
      color: var(--primary-color);
      opacity: 0.6;
      text-transform: uppercase;
      font-size: var(--text-sm);
      letter-spacing: 0.05em;
    }

    input[type="submit"] {
      background-color: #0A1F3D;
      color: var(--white);
      border: none;
      padding: var(--space-3) var(--space-4);
      font-size: var(--text-base);
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
      width: 100%;
      font-family: var(--font-body);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    input[type="submit"]:hover {
      background-color: #0D2A52;
    }

    .wpcf7-not-valid-tip {
      color: var(--color-error);
      font-size: var(--text-sm);
      margin-top: var(--space-2);
    }

    .wpcf7-response-output {
      color: var(--white);
      font-size: var(--text-sm);
      margin-top: var(--space-2);
    }
  }
}

/* Middle - Footer Menus */
.footer-menus {
  display: flex;
  justify-content: center;
  flex: 1;
  max-width: 800px;
}

.footer-menus ul.footer-menu {
  display: flex;
  gap: var(--space-16);
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;

  > li.menu-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);

    > a {
      color: var(--white);
      font-size: var(--text-base);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      text-decoration: none;
      margin-bottom: var(--space-2);
      padding-bottom: var(--space-2);
      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
      font-family: var(--font-body);
    }

    .sub-menu {
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
      list-style: none;
      margin: 0;
      padding: 0;

      li a {
        color: var(--white);
        font-size: var(--text-sm);
        text-decoration: none;
        transition: color 0.2s ease;
        font-weight: 400;
      }

      li a:hover {
        color: var(--secondary-color);
      }
    }
  }
}

/* Right Column - Support & Social */
.footer-support {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 200px;
}

.footer-column-title {
  color: var(--white);
  font-size: var(--text-base);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 var(--space-2) 0;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  font-family: var(--font-body);
}

.footer-column-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);

  li a {
    color: var(--white);
    font-size: var(--text-sm);
    text-decoration: none;
    transition: color 0.2s ease;
  }

  li a:hover {
    color: var(--secondary-color);
  }
}

/* Social Icons */
.footer-social {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.footer-social-link {
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--white);
  border-radius: 4px;
  transition: all 0.2s ease;
  text-decoration: none;

  svg {
    width: 18px;
    height: 18px;
    margin: auto;
  }
}

.footer-social-link:hover {
  background-color: var(--white);
  color: var(--primary-color);
}

/* Bottom - Payment Banner */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: var(--space-8);
  margin-top: var(--space-8);
}

.footer-payment {
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-payment-banner {
  max-width: 400px;
  width: 100%;
  height: auto;
}

/* Responsive */
@media (max-width: 1024px) {
  .footer-top {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .footer-menus ul.footer-menu {
    flex-direction: column;
    gap: var(--space-6);
  }

  .footer-support {
    min-width: auto;
  }
}

@media (max-width: 768px) {
  .footer-menus ul.footer-menu {
    gap: var(--space-4);
  }

  .footer-payment-icons {
    flex-wrap: wrap;
    justify-content: center;
  }
}