/* ============================================
   REDESIGN 2026 — Override & Enhancement
   НЕ перебивает оригинальный main.css,
   только добавляет улучшения поверх
   ============================================ */

/* ---- Шрифты — Wix Madefor Display на ВСЁ (кроме админки WP) ---- */
*:not(#wpadminbar):not(#wpadminbar *):not(.wp-admin):not(.wp-admin *) {
  font-family: 'Wix Madefor Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- Фон страницы — оригинал #F5F8F9 сохранён ---- */

/* ============================================
   HEADER — backdrop blur + sticky
   ============================================ */
.header {
  margin-bottom: 0 !important;
  transition: background 0.3s ease, box-shadow 0.3s ease !important;
}

/* Когда header становится fixed — добавляем spacer через JS */
.header-spacer {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease;
}

/* ============================================
   FIRST SECTION
   ============================================ */
.first {
  position: relative;
  min-height: 56.25vw;
  padding-top: 13.770833vw;
  margin-top: -13.7708333333vw;
}

/* ============================================
   BREADCRUMBS — отступ от меню
   ============================================ */
.breadcrumbs {
  margin-top: 2vw !important;
  padding-top: 1vw !important;
}

/* ============================================
   FIRST CONTENT
   ============================================ */
.first__content {
  padding-top: 4.604167vw;
  padding-bottom: 2.6041666667vw;
}

.header.fixed {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

/* ---- Лого ---- */
.header__logo img {
  height: 250px !impotant;
  width:400px !impotant;
}

/* ---- Соцсети — без доп. стилей, оригинал сохранён ---- */

/* ---- Навигация — без зелёного фона при hover ---- */
.nav-wrap .nav .nav-item a {
  border-radius: 8px;
  transition: all 0.3s ease !important;
}

/* ---- Dropdown меню ---- */
.nav-wrap .nav .nav-item.dropdown-item .nav-menu {
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.1);
  border: 1px solid rgba(0,0,0,0.06);
  transition: all 0.3s ease;
}

/* ---- Телефон — hover ---- */
.header__contacts a {
  transition: color 0.3s ease !important;
}

.header__contacts a:hover {
  color: var(--main-color) !important;
}

/* ---- Обратный звонок ---- */
.call-back {
  transition: opacity 0.3s ease !important;
}

.call-back:hover {
  opacity: 0.7;
}

/* ============================================
   HERO — улучшения
   ============================================ */
.first__title {
  font-weight: 300 !important;
  letter-spacing: 0.02em;
}

.first__title b {
  font-weight: 700;
}

/* ---- Буллиты преимуществ — оригинал сохранён ---- */

/* ---- Кнопки — glow + shimmer ---- */
.first__buttons-btn,
.md-main-color-btn,
.form-btn {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease !important;
}

.first__buttons-btn:hover,
.md-main-color-btn:hover,
.form-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 0 40px rgba(49, 185, 57, 0.25) !important;
}

/* Shimmer effect */
.first__buttons-btn::before,
.md-main-color-btn::before,
.form-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s ease;
}

.first__buttons-btn:hover::before,
.md-main-color-btn:hover::before,
.form-btn:hover::before {
  left: 100%;
}

/* ---- Форма —卡片 стилизация ---- */
.first__form {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.1);
}

.form-input,
.form-select {
  border: 2px solid transparent !important;
  background: #F0F2F5 !important;
  border-radius: 10px;
  transition: all 0.3s ease !important;
}

.form-input:focus,
.form-select:focus {
  border-color: var(--main-color) !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(49, 185, 57, 0.12);
}

/* ---- Чекбокс — кастомный ---- */
.form-checkbox .checked {
  border: 2px solid #E4E8EE;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.form-checkbox .checked.active {
  background: var(--main-color);
  border-color: var(--main-color);
}

.form-checkbox a {
  color: var(--main-color);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}

.form-checkbox a:hover {
  border-bottom-color: var(--main-color);
}

/* ============================================
   КАРТОЧКИ — hover эффекты
   ============================================ */
.card,
.portfolio-item,
.services-item,
.reviews-item {
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.04);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  transition: all 0.3s ease !important;
  overflow: hidden;
}

.card:hover,
.portfolio-item:hover,
.services-item:hover,
.reviews-item:hover {
  box-shadow: 0 8px 30px rgba(0,0,0,0.1) !important;
  transform: translateY(-4px) !important;
  border-color: transparent;
}

/* ---- Бейджи ---- */
.hit-status,
.sale-status,
.new-status,
.product-status {
  border-radius: 9999px !important;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 4px 12px;
}

/* ============================================
   SWIPER — улучшения
   ============================================ */
.swiper-button-next,
.swiper-button-prev {
  width: 48px !important;
  height: 48px !important;
  background: #fff !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
  transition: all 0.3s ease !important;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  background: var(--main-color) !important;
  transform: scale(1.1);
}

.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 18px !important;
  color: #1A1D21 !important;
  transition: color 0.3s ease;
}

.swiper-button-next:hover::after,
.swiper-button-prev:hover::after {
  color: #fff !important;
}

.swiper-pagination-bullet {
  background: #E4E8EE !important;
  opacity: 1 !important;
  transition: all 0.3s ease !important;
}

.swiper-pagination-bullet-active {
  background: var(--main-color) !important;
  width: 24px !important;
  border-radius: 9999px !important;
}

/* ============================================
   FOOTER — улучшения
   ============================================ */
.footer a {
  transition: color 0.3s ease !important;
}

.footer a:hover {
  color: var(--main-color) !important;
}

.footer-list li a {
  transition: all 0.3s ease;
}

.footer-list li a:hover {
  padding-left: 4px;
}

/* ============================================
   ПОПАПЫ — скруглённые
   ============================================ */
.fancybox-content {
  border-radius: 16px !important;
  box-shadow: 0 16px 50px rgba(0,0,0,0.12) !important;
}

/* ============================================
   COOKIE — floating bar
   ============================================ */
#cookie_notification {
  border-radius: 16px;
  box-shadow: 0 16px 50px rgba(0,0,0,0.12);
  backdrop-filter: blur(20px);
}

#cookie_notification .btn-primary {
  border-radius: 10px;
  transition: background 0.3s ease;
}

#cookie_notification .btn-primary:hover {
  background: var(--main-color-darken);
}

/* ============================================
   ANIMATIONS — GSAP targets
   ============================================ */
.gsap-fade-in {
  opacity: 0;
  transform: translateY(30px);
}

.gsap-fade-in-left {
  opacity: 0;
  transform: translateX(-40px);
}

.gsap-fade-in-right {
  opacity: 0;
  transform: translateX(40px);
}

.gsap-scale-in {
  opacity: 0;
  transform: scale(0.9);
}

/* ---- Skeleton loading ---- */
.skeleton {
  background: linear-gradient(90deg, #F0F2F5 25%, #E4E8EE 50%, #F0F2F5 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  border-radius: 8px;
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---- Typed cursor ---- */
.typed-cursor {
  display: inline-block;
  width: 3px;
  height: 1em;
  background: var(--main-color);
  margin-left: 2px;
  animation: blink 0.7s step-end infinite;
  vertical-align: text-bottom;
}

@keyframes blink {
  50% { opacity: 0; }
}

/* ---- Three.js canvas ---- */
#hero-canvas {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* ---- Particles ---- */
#particles-js {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* ============================================
   RIPPLE EFFECT — на кнопках
   ============================================ */
@keyframes ripple {
  to { transform: scale(4); opacity: 0; }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip-to-content focus */
a:focus-visible {
  outline: 2px solid var(--main-color);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============================================
   ADAPTIVE — mobile
   ============================================ */
@media only screen and (max-width: 768px) {
  .rk {
    width: 20vw;
    position: absolute;
    top: 11vw;
    z-index: 2;
    pointer-events: none;
    animation: rotation 15s linear infinite;
    left: 5vw;
    display: none;
  }

  .first {
    padding-top: 9vw !important;
    min-height: auto;
    padding-bottom: 7.5vw;
    margin-bottom: 7.8125vw;
    margin-right: 4vw;
    margin-left: 4vw;
  }

  .first__content {
    padding-top: 14.604167vw !important;
    padding-bottom: 9vw;
  }

  /* Отключаем тяжёлые анимации */
  .gsap-fade-in,
  .gsap-fade-in-left,
  .gsap-fade-in-right,
  .gsap-scale-in {
    opacity: 1 !important;
    transform: none !important;
  }

  .card:hover,
  .portfolio-item:hover,
  .services-item:hover,
  .reviews-item:hover,
  .bullets-item:hover {
    transform: none !important;
  }

  #hero-canvas {
    display: none;
  }

  .first__form {
    border-radius: 12px;
  }

  .social-links a {
    width: 28px;
    height: 28px;
  }
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}