/* ===========================================================
   Kosmetologi AnnaB — Premium Off-canvas Menu (Final)
   Белая карточка + двойная полоса (золото + зелёный)
   Мягкий световой переход от границы внутрь панели
   =========================================================== */

/* Основная панель */
.offcanvas-menu {
  background: #ffffff !important; /* светлая премиальная основа */
  position: fixed !important;
  top: 0; right: 0; bottom: 0; left: auto;
  z-index: 9999;
  box-shadow: -6px 0 24px rgba(0,0,0,0.08);
  overflow: hidden;
}

/* Двойная вертикальная линия (глубина и свет) */
.offcanvas-menu::before {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 6px;
  background: linear-gradient(180deg, #0A3B2A 0%, #0B5D3B 100%); /* зелёная */
}
.offcanvas-menu::after {
  content: "";
  position: absolute;
  top: 0; left: 6px; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #C2A661 0%, #E6D5A3 100%); /* золотая */
  box-shadow: 0 0 12px rgba(194,166,97,.25);
}

/* Мягкая внутренняя тень от левой линии внутрь */
.offcanvas-menu .offcanvas-inner {
  position: relative;
  background: linear-gradient(90deg, rgba(11,93,59,0.08) 0%, rgba(255,255,255,1) 80%);
  padding: 20px 20px 140px 20px;
  z-index: 1;
}

/* Пункты меню */
.offcanvas-menu .sp-mobile-menu > li > a {
  color: #0A3B2A !important; /* зелёный текст */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 0.8rem 0.5rem;
  border-radius: 8px;
  transition: all 0.25s ease;
}
.offcanvas-menu .sp-mobile-menu > li > a:hover,
.offcanvas-menu .sp-mobile-menu > li.active > a {
  color: #C2A661 !important; /* золото при наведении */
  background: rgba(194,166,97,0.08);
  transform: translateX(4px);
}

/* Подменю */
.offcanvas-menu .sp-mobile-menu li ul {
  margin: 8px 0 0 16px;
  border-left: 1px solid rgba(11,93,59,0.2);
}
.offcanvas-menu .sp-mobile-menu li ul a {
  color: #0A3B2A !important;
  font-weight: 600;
}
.offcanvas-menu .sp-mobile-menu li ul a:hover {
  color: #C2A661 !important;
}

/* Контакты внизу панели */
.offcanvas-menu .offcanvas-contacts,
.offcanvas-menu .contact-block {
  position: absolute;
  left: 0; right: 0; bottom: 25px;
  text-align: center;
  color: #0A3B2A !important;
  font-weight: 500;
  font-size: 15px;
  opacity: 1;
}
.offcanvas-menu .offcanvas-contacts a,
.offcanvas-menu .contact-block a {
  color: #0A3B2A !important;
}
.offcanvas-menu .offcanvas-contacts a:hover,
.offcanvas-menu .contact-block a:hover {
  color: #C2A661 !important;
}

/* Тонкая золотая линия над контактами */
.offcanvas-menu .offcanvas-contacts::before,
.offcanvas-menu .contact-block::before {
  content: "";
  display: block;
  width: 88%;
  height: 1px;
  margin: 0 auto 14px;
  background: linear-gradient(90deg, transparent, #C2A661, transparent);
  opacity: .6;
}

/* Иконки соцсетей */
.offcanvas-menu .offcanvas-contacts .fa,
.offcanvas-menu .offcanvas-contacts .fab,
.offcanvas-menu .contact-block .fa,
.offcanvas-menu .contact-block .fab {
  font-size: 18px;
  margin: 0 8px;
  color: #0A3B2A !important;
  transition: transform .2s, color .2s;
}
.offcanvas-menu .offcanvas-contacts .fa:hover,
.offcanvas-menu .offcanvas-contacts .fab:hover,
.offcanvas-menu .contact-block .fa:hover,
.offcanvas-menu .contact-block .fab:hover {
  color: #C2A661 !important;
  transform: translateY(-2px);
}

/* Крестик закрытия */
.offcanvas-menu .offcanvas-close {
  color: #C2A661 !important;
  font-size: 22px;
  top: 18px; right: 18px;
  transition: transform .2s, color .2s;
}
.offcanvas-menu .offcanvas-close:hover {
  transform: rotate(90deg);
  color: #B89448 !important;
}