body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.footer-wrapper {
  background-color: var(--secondary100);
  overflow: hidden;
  margin-top: auto;
}

/* Main section */
.footer-main {
  display: flex;
  align-items: flex-start;
  gap: 64px;
  padding-top: 32px;
  padding-bottom: 32px;
}

.footer-logo {
  flex-shrink: 0;
  margin-right: auto;
  max-width: 218.992px;
  height: 80px;
  aspect-ratio: 219/80;
}

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

/* Section labels */
.footer-section-label {
  text-transform: uppercase;
  color: var(--surface700);
  margin-bottom: 24px;
}

/* Nav + Newsletter container */
.footer-nav-newsletter {
  display: flex;
  align-items: flex-start;
}

/* Navigation group */
.footer-nav-group {
  flex-shrink: 0;
}

.footer-nav-menus {
  display: flex;
  text-transform: capitalize;
}

.footer-nav-menus ul {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 186px;
}

.footer-nav-menus ul li a {
  color: var(--surface700);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}

.footer-nav-menus ul li a:hover {
  border-bottom-color: var(--surface700);
}

/* Newsletter */
.footer-newsletter {
  flex-shrink: 0;
  width: 332px;
  margin-right: 32px;
}

.footer-newsletter-desc {
  color: var(--surface700);
  margin-bottom: 16px;
}

.footer-newsletter-input-row {
  position: relative;
  display: flex;
  height: 48px;
  align-items: center;
  align-self: stretch;
  background-color: var(--surface50);
  border-radius: 4px;
  border: 1px solid var(--surface150);
  overflow: hidden;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease;
}

.footer-newsletter-input-row:hover {
  border-color: var(--surface200);
  background-color: var(--surface100);
}

.footer-newsletter-input-row:has(input:disabled) {
  border-color: var(--surface150);
  background-color: var(--surface150);
  cursor: not-allowed;
  pointer-events: none;
}

.footer-newsletter-input-row
  input[type="email"]:disabled::-webkit-input-placeholder {
  color: var(--surface200);
}

.footer-newsletter-input-row input[type="email"]:disabled::-moz-placeholder {
  color: var(--surface200);
}

.footer-newsletter-input-row
  input[type="email"]:disabled:-ms-input-placeholder {
  color: var(--surface200);
}

.footer-newsletter-input-row
  input[type="email"]:disabled::-ms-input-placeholder {
  color: var(--surface200);
}

.footer-newsletter-input-row
  input[type="email"]:disabled::-webkit-input-placeholder {
  color: var(--surface200);
}

.footer-newsletter-input-row input[type="email"]:disabled::-moz-placeholder {
  color: var(--surface200);
}

.footer-newsletter-input-row
  input[type="email"]:disabled:-ms-input-placeholder {
  color: var(--surface200);
}

.footer-newsletter-input-row
  input[type="email"]:disabled::-ms-input-placeholder {
  color: var(--surface200);
}

.footer-newsletter-input-row input[type="email"]:disabled::placeholder {
  color: var(--surface200);
}

.footer-newsletter-input-row:has(input:disabled) button[type="submit"] {
  opacity: 0.4;
}

.footer-newsletter-input-row:focus-within {
  border-color: var(--primary500);
  background-color: var(--surface50);
}

.footer-newsletter-input-row input[type="email"] {
  flex: 1 0 0;
  padding: 12px 96px 12px 12px;
  border: none;
  background: transparent;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  color: var(--surface500);
  outline: none;
}

.footer-newsletter-input-row input[type="email"]::-webkit-input-placeholder {
  color: var(--surface300);
}

.footer-newsletter-input-row input[type="email"]::-moz-placeholder {
  color: var(--surface300);
}

.footer-newsletter-input-row input[type="email"]:-ms-input-placeholder {
  color: var(--surface300);
}

.footer-newsletter-input-row input[type="email"]::-ms-input-placeholder {
  color: var(--surface300);
}

.footer-newsletter-input-row input[type="email"]::placeholder {
  color: var(--surface300);
}

.footer-newsletter-input-row button[type="submit"] {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  padding: 0 12px;
  color: var(--primary500);
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  gap: 4px;
}

.footer-newsletter-input-row button[type="submit"] img {
  height: 18px;
  width: 18px;
  min-width: 18px;
}

.footer-newsletter-btn-arrow-grey {
  display: none;
}

#footer-newsletter-message {
  display: none;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  color: var(--success400);
}

#footer-newsletter-message.is-success,
#footer-newsletter-message.is-error {
  display: flex;
}

#footer-newsletter-message .footer-newsletter-success-icon {
  display: none;
  flex-shrink: 0;
}

#footer-newsletter-message.is-success .footer-newsletter-success-icon {
  display: block;
}

#footer-newsletter-message.is-error .footer-newsletter-message-text {
  color: var(--danger300);
}

.footer-newsletter-input-row.has-error {
  border-color: var(--danger300);
}

/* Bottom bar */

.footer-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 32px;
  padding-bottom: 32px;
}

.footer-bottom-inner {
  border-top: 1px solid var(--surface50);
}

.footer-copyright {
  font-family: "Inter", sans-serif;
  color: var(--surface700);
}

.footer-bottom .menu {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}

.footer-bottom .menu li a {
  color: var(--surface700);
  text-transform: capitalize;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}

.footer-bottom .menu li a:hover {
  border-bottom-color: var(--surface700);
}

/* Responsive: tablet */
@media (max-width: 1057px) {
  .footer-main {
    flex-wrap: wrap;
  }

  .footer-newsletter {
    max-width: 330px;
  }
}

/* Responsive: mobile */
@media (max-width: 768px) {
  .footer-main {
    flex-direction: column;
    gap: 32px;
    padding-bottom: 24px;
  }

  .footer-logo {
    margin-right: 0;
    width: 164.244px;
    height: 60px;
    aspect-ratio: 164.24/60;
  }

  .footer-nav-group {
    width: 100%;
  }

  .footer-section-label {
    margin-bottom: 16px;
  }

  .footer-nav-newsletter {
    flex-direction: column;
    gap: 32px;
    width: 100%;
  }

  .footer-newsletter {
    width: 100%;
    max-width: unset;
  }

  .footer-nav-menus ul {
    gap: 12px;
  }

  .footer-nav-menus {
    gap: 32px;
    justify-content: space-between;
  }

  .footer-newsletter-desc {
    margin-bottom: 8px;
  }

  .footer-newsletter-input-row input[type="email"] {
    padding-right: 44px;
  }

  .footer-newsletter-btn-label,
  .footer-newsletter-btn-arrow-green {
    display: none;
  }

  .footer-newsletter-btn-arrow-grey {
    display: block;
  }

  .footer-copyright {
    text-align: center;
  }

  .footer-bottom-inner {
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding-top: 24px;
  }

  .footer-bottom .menu {
    justify-content: center;
  }
}