/* ============================================================
   FIGARO DS — точечный лоск ПОВЕРХ Elementor (salon-figaro.ru)
   Классы .fg-gold/.fg-reveal/.fg-hot навешивает site-init.js.
   ============================================================ */

/* ============================================================
   ГЛОБАЛЬНЫЙ СТИЛЬ КНОПОК ИЗ ДИЗАЙН-СИСТЕМЫ
   База — главная кнопка ДС (матовое стекло + золотая обводка, пилюля),
   читается на любом фоне. CTA (запись/покупка в YClients) — изумруд.
   ============================================================ */
.elementor-button,
a.elementor-button,
.elementor-button-link {
  background-color: rgba(34,34,34,.45) !important;
  background-image: none !important;
  -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%);
  color: #ffffff !important;
  border: 1.5px solid var(--figaro-gold) !important;
  border-radius: var(--r-pill) !important;
  font-family: var(--font-head) !important;
  letter-spacing: .04em;
  box-shadow: none !important;
  transition: transform var(--dur-fast) var(--ease), background-color var(--dur) var(--ease),
              color var(--dur) var(--ease), border-color var(--dur) var(--ease) !important;
}
.elementor-button:hover,
a.elementor-button:hover,
.elementor-button-link:hover {
  transform: translateY(-2px);
  background-color: rgba(196,181,131,.20) !important;
  color: var(--figaro-gold-soft) !important;
  border-color: var(--figaro-gold-soft) !important;
}
.elementor-button .elementor-button-text { color: inherit !important; }

/* Все кнопки единые — без отдельного изумрудного CTA (наследуют базовый стеклянный стиль выше) */

/* СВЕТЛЫЙ стеклянный вариант — для кнопок на светлом фоне (класс вешает site-init.js) */
.elementor-button.fg-btn-light,
a.elementor-button.fg-btn-light,
.elementor-button-link.fg-btn-light,
.ycm-book.fg-btn-light, .ycpl-promo-btn.fg-btn-light {
  background-color: rgba(255,255,255,.55) !important;
  -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%);
  color: #222222 !important;
  border-color: var(--figaro-gold) !important;
}
.elementor-button.fg-btn-light .elementor-button-text { color: #222222 !important; }
.elementor-button.fg-btn-light:hover,
a.elementor-button.fg-btn-light:hover,
.elementor-button-link.fg-btn-light:hover,
.ycm-book.fg-btn-light:hover, .ycpl-promo-btn.fg-btn-light:hover {
  background-color: rgba(255,255,255,.82) !important;
  color: #222222 !important;
  border-color: var(--figaro-gold-soft) !important;
}

/* FIX PRICE фильтр-пилюли (figaro-prices) → стекло */
.ycpl-promo-btn {
  background: rgba(34,34,34,.45) !important;
  -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%);
  border: 1.5px solid var(--figaro-gold) !important; color: #fff !important;
}
.ycpl-promo-btn.active {
  background: rgba(196,181,131,.28) !important;
  border-color: var(--figaro-gold-soft) !important; color: #fff !important;
}

/* ===== Карточка мастера (ycm) под ДС: тёмное стекло + золото ===== */
.ycm-block .ycm-card {
  background: rgba(44,44,44,.55) !important;
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(196,181,131,.30) !important;
  box-shadow: none !important;
}
.ycm-block .ycm-card-head { border-bottom-color: rgba(196,181,131,.22) !important; }
.ycm-block img.ycm-avatar { border: 2px solid var(--figaro-gold) !important; box-shadow: none !important; }
.ycm-block .ycm-name, .ycm-block .ycm-title { font-family: var(--font-head) !important; }

/* Кнопка «Записаться» у мастеров (figaro-prices) → тёмное стекло + золото (как все) */
.ycm-block a.ycm-book, .ycm-book {
  background: rgba(34,34,34,.45) !important;
  -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%);
  border: 1.5px solid var(--figaro-gold) !important; color: #fff !important;
}
.ycm-block a.ycm-book:hover, .ycm-book:hover {
  filter: none !important; box-shadow: none !important;
  background: rgba(196,181,131,.20) !important; color: var(--figaro-gold-soft) !important;
}

/* ===== ШРИФТЫ К СТАНДАРТУ (Playfair заголовки+кнопки / Roboto текст) ===== */
/* targи только наши Elementor-элементы; сторонние виджеты (YClients/отзывы) не трогаем */
.elementor-heading-title,
.elementor-button,
.elementor-image-box-title,
.elementor-icon-box-title,
.elementor-tab-title,
.elementor-toggle-title,
.elementor-accordion-title { font-family: var(--font-head) !important; }

.elementor-widget-text-editor, .elementor-widget-text-editor *,
.elementor-icon-list-text,
.elementor-price-list-title, .elementor-price-list-price, .elementor-price-list-description,
.elementor-image-box-description,
.elementor-icon-box-description,
.elementor-tab-content, .elementor-tab-content *,
.elementor-toggle-content, .elementor-toggle-content *,
.elementor-accordion-content, .elementor-accordion-content *,
.elementor-testimonial-content, .elementor-testimonial-name, .elementor-testimonial-job,
.elementor-widget-shortcode, .elementor-widget-shortcode * {
  font-family: var(--font-body) !important;
}

/* заголовки ВНУТРИ shortcode-виджетов (Контакты и пр.) — оставить Playfair
   (перебивает .elementor-widget-shortcode *, который иначе делает их Roboto) */
.elementor-widget-shortcode .elementor-heading-title,
.elementor-widget-shortcode h1, .elementor-widget-shortcode h2,
.elementor-widget-shortcode h3, .elementor-widget-shortcode h4,
.elementor-heading-title.elementor-heading-title {
  font-family: var(--font-head) !important;
}

/* D. Изумрудный акцент на «горячее» (скидки, Cash Back, подарок) */
.fg-hot { color: var(--figaro-accent-soft) !important; }

/* Нормализованный алерт-блок (класс вешает JS): тёмная карточка + золотой акцент */
.fg-alert { border-left: 3px solid var(--figaro-gold) !important; border-radius: var(--r-sm); }
.fg-alert, .fg-alert * { color: var(--text-base) !important; }
.fg-alert a { color: var(--figaro-gold) !important; }

/* Изумрудный badge (Cash Back и пр. «награды») */
.fg-badge-accent { border-radius: var(--r-pill) !important; border: none !important; }
.fg-badge-accent, .fg-badge-accent * { color: #fff !important; }

/* ============================================================
   МЕНЮ К СТАНДАРТУ ДИЗАЙН-СИСТЕМЫ
   ============================================================ */

/* --- Десктоп-меню: золотой hover + анимированное подчёркивание --- */
@media (min-width: 769px) {
  .navbar-nav > li > a {
    text-transform: uppercase; letter-spacing: .06em;
    position: relative; transition: color var(--dur) var(--ease) !important;
  }
  .navbar-nav > li > a::after {
    content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 1.5px;
    background: var(--figaro-gold); transform: scaleX(0); transform-origin: left;
    transition: transform var(--dur) var(--ease);
  }
  .navbar-nav > li > a:hover { color: var(--figaro-gold) !important; }
  .navbar-nav > li.current-menu-item > a,
  .navbar-nav > li.current_page_item > a { color: var(--figaro-gold) !important; }
  .navbar-nav > li > a:hover::after,
  .navbar-nav > li.current-menu-item > a::after,
  .navbar-nav > li.current_page_item > a::after { transform: scaleX(1); }
}

/* --- Мобильный нижний док: матовое стекло + золотые иконки --- */
.figaro-mobile-bar {
  background: rgba(34,34,34,.55) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
  border-top: 1px solid var(--glass-border) !important;
}
.figaro-mobile-bar-item { color: var(--text-base) !important; transition: transform var(--dur-fast) var(--ease); }
.figaro-mobile-bar-item svg, .figaro-mobile-bar-item i { color: var(--figaro-gold) !important; }
.figaro-mobile-bar-item:active { transform: scale(.92); }

/* --- Бургер: золотые полоски, без фона-бокса --- */
.navbar-toggle { background: transparent !important; border: none !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.navbar-toggle .icon-bar { background: var(--figaro-gold) !important; }

/* --- Шапка (моб): лого слева, бургер справа --- */
@media (max-width: 768px) {
  .navbar > .container { text-align: left !important; }
  .figaro-navbar .container { padding-left: 12px !important; padding-right: 12px !important; }
  .figaro-navbar .container .navbar-header.navbar-header {
    float: none !important; width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important;
    margin: 0 !important;
    display: flex !important; align-items: center !important; justify-content: space-between !important; }
  /* прижать лого влево, бургер вправо (надёжнее space-between) */
  .figaro-navbar .navbar-header .navbar-brand { margin: 0 auto 0 0 !important; }
  .figaro-navbar .navbar-header .navbar-toggle,
  .figaro-navbar .navbar-header #figaroNavToggle { margin: 0 0 0 auto !important; }
  .navbar-toggle, #figaroNavToggle.navbar-toggle { margin: 0 !important; }
}

/* --- Нижний док: все кнопки одинаковые (убрать рамку/тень у «СООБЩЕНИЕ») --- */
.figaro-mobile-bar-item {
  box-shadow: none !important; border: none !important; border-radius: 0 !important;
  background: transparent !important;
}
/* крестик закрытия модалки — без рамки/фона */
.figaro-modal-close { box-shadow: none !important; border: none !important; background: transparent !important; }

/* --- Мессенджеры: фирменные градиенты (как у Max) --- */
.figaro-modal-btn { color: #fff !important; }
.figaro-modal-btn-tg { background-image: linear-gradient(135deg,#37BBFE,#1C92D2) !important; background-color: transparent !important; }
.figaro-modal-btn-wa { background-image: linear-gradient(135deg,#42D778,#0FA958) !important; background-color: transparent !important; }
.figaro-modal-btn-vk { background-image: linear-gradient(135deg,#5286CF,#2787F5) !important; background-color: transparent !important; }

/* A. Микро-hover на кнопки */
.elementor-button {
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease) !important;
}
.elementor-button:hover { transform: translateY(-2px); }

/* A. Микро-hover на боксы (карточки услуг, мастера, «лучшее») */
.elementor-widget-image-box .elementor-image-box-img img,
.elementor-widget-icon-box .elementor-icon { transition: transform var(--dur) var(--ease); }
.elementor-widget-image-box:hover .elementor-image-box-img img { transform: translateY(-4px) scale(1.02); }
.elementor-widget-icon-box:hover .elementor-icon { transform: translateY(-4px); }

/* B. Reveal-on-scroll (стартовое состояние; .is-visible включает JS) */
.fg-reveal { opacity: 0; transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.fg-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .fg-reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .elementor-button, .elementor-image-box-img img, .elementor-icon { transition: none !important; }
}

/* ============================================================
   БЛОК «ВЫБЕРИ СВОЙ … СТИЛЬ»
   ============================================================ */
/* Анимированный заголовок: длинные слова не переносятся → нет скачка высоты/мерцания */
.elementor-headline-dynamic-wrapper,
.elementor-headline-dynamic-text { white-space: nowrap !important; }

/* Карусель изображений: слайды по вертикальному центру
   (горизонтальные фото больше не липнут к верхнему краю ряда) */
.elementor-image-carousel.swiper-wrapper { align-items: center !important; }
/* и сами картинки центрируем по вертикали (если object-fit обрезает) */
.elementor-image-carousel .swiper-slide img,
.elementor-image-carousel-wrapper .swiper-slide img { object-position: center center !important; }

/* ============================================================
   ПАГИНАЦИЯ КАРУСЕЛЕЙ ПОД ДС (золотая активная пилюля)
   ============================================================ */
.swiper-pagination-bullet {
  width: 8px !important; height: 8px !important;
  background: rgba(196,181,131,.40) !important; opacity: 1 !important;
  border-radius: 999px !important;
  transition: width var(--dur) var(--ease), background var(--dur) var(--ease) !important;
}
.swiper-pagination-bullet:hover { background: var(--figaro-gold-soft) !important; }
.swiper-pagination-bullet-active {
  width: 24px !important; background: var(--figaro-gold) !important;
}