/* ===============================
   FOOTER.CSS
   Стили для футера Luxrem с адаптивом и анимациями
=============================== */

.footer {
    width: 100%;
    font-family: var(--font-primary);
    overflow: hidden;
    background-color: var(--color-white);
}

/* ===============================
   Анимации при появлении
=============================== */
.footer__container > * {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s ease-out forwards;
}

.footer__container > *:nth-child(1) { animation-delay: 0.1s; }
.footer__container > *:nth-child(2) { animation-delay: 0.2s; }
.footer__container > *:nth-child(3) { animation-delay: 0.3s; }
.footer__container > *:nth-child(4) { animation-delay: 0.4s; }
.footer__container > *:nth-child(5) { animation-delay: 0.5s; }

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Основная часть футера — белая */
.footer__main {
    background-color: var(--color-white);
    color: var(--color-dark);
    padding: var(--gap-lg) 0;
}

.footer__container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    display: flex;
    gap: var(--gap-lg);
    flex-wrap: wrap;
}

/* ===== 1. Логотип и слоган ===== */
.footer__logo-col {
    flex: 1 1 200px;
}

.footer__logo img {
    max-height: 60px;
    display: block;
    margin-bottom: var(--gap-sm);
    transition: transform var(--transition-medium);
}

.footer__logo img:hover {
    transform: scale(1.05);
}

.footer__slogan {
    font-size: var(--font-size-sm);
    color: var(--color-gray-dark);
    line-height: var(--line-height-md);
}

/* ===== 2 и 3. Навигация ===== */
.footer__nav-col,
.footer__nav-col-2 {
    flex: 1 1 150px;
}

.footer-menu {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
}

.footer-menu li a {
    color: var(--color-dark);
    text-decoration: none;
    font-size: var(--font-size-sm);
    transition: color var(--transition-fast), transform var(--transition-fast);
}

.footer-menu li a:hover {
    color: var(--color-primary);
    transform: translateX(4px);
}

/* ===== 4. Мессенджеры / Соцсети ===== */
.footer__messengers {
    flex: 1 1 150px;
    display: flex;
    gap: var(--gap-sm);
    flex-wrap: wrap;
}

.footer__messengers .messenger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background-color: var(--color-dark);
    border-radius: var(--radius-round);
    transition: transform var(--transition-fast), background-color var(--transition-fast);
    text-decoration: none;
}

.footer__messengers .messenger img {
    width: 24px;
    height: 24px;
    display: block;
    transition: transform var(--transition-fast);
}

.footer__messengers .messenger:hover {
    transform: scale(1.15) rotate(-10deg);
    background-color: var(--color-primary);
}

/* ===== 5. Адреса и контакты ===== */
.footer__contacts {
    flex: 1 1 200px;
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
}

.footer__contacts address,
.footer__contacts span {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    font-size: var(--font-size-sm);
    color: var(--color-dark);
}

.footer__contacts a {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    color: #23282d var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast), transform var(--transition-fast);
}

.footer__contacts a:hover {
    color: var(--color-accent-dark);
    transform: translateX(4px);
}

.footer__contacts img {
    display: inline-block;
    transition: filter var(--transition-fast);
}

/* ===============================
   Нижняя часть футера
=============================== */
.footer__bottom {
    background-color: var(--color-white);
    padding: var(--gap-md) 0;
    color: var(--color-white);
}

.footer__bottom-container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    font-size: var(--font-size-xs);
    color: var(--color-dark);
}

.footer__bottom-container p{
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
}

.footer__bottom-container a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer__bottom-container a:hover {
    color: var(--color-dark);
}

/* ===============================
   Адаптивность
=============================== */
@media (max-width: 1200px) {
    .footer__container {
        flex-direction: column;
        gap: var(--gap-md);
        align-items: center;
        text-align: center;
    }

    .footer__logo-col,
    .footer__nav-col,
    .footer__nav-col-2,
    .footer__messengers,
    .footer__contacts {
        flex: 1 1 100%;
    }
    
    .footer__logo{
        display: flex;
        justify-content: center;
    }

    .footer__messengers {
        justify-content: center;
        gap: var(--gap-md);
    }

    .footer__bottom-container {
        flex-direction: column;
        gap: var(--gap-sm);
        text-align: center;
    }
}

@media (max-width: 768px) {
    .footer__logo img {
        max-height: 50px;

    }

    .footer__slogan {
        font-size: var(--font-size-xs);
    }

    .footer-menu li a {
        font-size: var(--font-size-xs);
    }

    .footer__messengers .messenger {
        width: 40px;
        height: 40px;
    }

    .footer__messengers .messenger img {
        width: 20px;
        height: 20px;
    }
}

.page-about__consultation {
    margin-top: 80px;
}

@media (max-width: 768px) {
    .page-about__consultation {
        margin-top: 50px;
    }
}


.ll-to-top{
  position: fixed;
  right: 36px;
  bottom: 18px;
  z-index: 2147483647;

  width: 54px;
  height: 54px;
  border: 0;
  border-radius: var(--radius-round);
  background: var(--background-btns);
  box-shadow: var(--shadow-medium);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: var(--color-dark);
  font-family: var(--font-primary);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.ll-to-top.is-hidden{
  opacity: 0;
  transform: translateY(10px) scale(.98);
  pointer-events: none;
  transition: opacity var(--transition-medium), transform var(--transition-medium);
}