/* Custom theme overrides (hand-written). */

/* Header: phone + social icons under callback button */
.header__callback-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.8rem;
}

.header__contacts-row {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
}

.header__contacts-phone {
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.2;
  color: #f5f5f5;
  white-space: nowrap;
  cursor: default;
}

.header__contacts-social {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
}

.header__social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: #f5f5f5;
  text-decoration: none;
  outline: none;
  transition: color 0.3s ease;
}

.header__social-ico {
  width: 100%;
  height: 100%;
  display: block;
}

/* Ensure nested SVG scales to the button box */
.header__social-ico svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Support custom SVG pasted in options */
.header__social-ico svg,
.header__social-ico path,
.header__social-ico circle,
.header__social-ico rect,
.header__social-ico polygon,
.header__social-ico polyline,
.header__social-ico line,
.header__social-ico g {
  fill: currentColor !important;
  stroke: currentColor !important;
}

@media (any-hover: hover) {
  .header__social-btn:hover {
    color: #9352d4;
  }
}

/* Show/hide utilities for desktop/mobile toggles */
@media (min-width: 901px) {
  .hide-desktop {
    display: none !important;
  }
}

@media (max-width: 900px) {
  .hide-mobile {
    display: none !important;
  }
  .header__contacts-social--mobile .header__social-btn {
    color: #fff;
  }
}

/* Footer: messenger icons under callback button (mobile) */
.footer__mob-messengers {
  justify-content: center;
  margin-top: 1rem;
}

/* Header (sec + plug): force back label to Grato Grotesk (not Aptos) */
.header.header--sec.header--plug .header__back-text,
.header.header--sec.header--plug.header--visible .header__back-text {
  font-family: "Grato Grotesk", sans-serif !important;
}

/* Put button and messenger row one under another on mobile */
@media (max-width: 600px) {
  .footer__mob-callback {
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
  }

  /* Make messenger icons a bit larger on mobile */
  .footer__mob-messengers {
    gap: 1rem;
  }

  .footer__mob-messengers .header__social-btn {
    width: 2.6rem;
    height: 2.6rem;
  }
}