/*!
Theme Name: extaz
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: extaz
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

extaz is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/* Переменные и сброс стилей */


html,body{
    scroll-behavior: smooth;
}

:root {
  /* Цвета и фоны */
  --bg-main: #100e09;
  --text-main: var(--text-main);
  --text-muted: #8e8e8e;
  --card-bg: rgba(255, 255, 255, 0.03);
  --card-border: rgba(255, 255, 255, 0.08);

  /* Золотистый градиент по вашему ТЗ */
  --gold-gradient:
    linear-gradient(0deg, #d09742, #d09742),
    linear-gradient(
      339.03deg,
      rgba(255, 255, 255, 0) 52.79%,
      rgba(255, 255, 255, 0.25) 95.95%
    ),
    linear-gradient(
      76.82deg,
      #576265 11.6%,
      #9ea1a1 25.31%,
      #848b8a 48.06%,
      #576265 55.72%,
      #576265 77.23%,
      #757a7b 85.34%,
      #576265 91.31%
    ),
    rgba(255, 255, 255, 0.04);

  /* Переменные для кнопок */
  --btn-gold-bg: var(--gold-gradient);
  --btn-gold-text: #000000;
  --btn-dark-bg: rgba(255, 255, 255, 0.05);
  --btn-dark-border: rgba(255, 255, 255, 0.1);
  --btn-dark-text: var(--text-main);

  /* Шрифты и сетка */
  --font-family: "Inter", sans-serif;
  --container-width: 1160px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg-main);
  color: var(--text-main);
  font-family: var(--font-family);
  -webkit-font-smoothing: antialiased;
}

a{
    text-decoration: none;
}

[class^="ri-"],
[class*=" ri-"] {
  font-weight: 400;
}

/* Контейнер 1160px */
.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 20px;
}

.section-title{
    font-size: 48px;
    line-height: 1.2;
}

/* Базовые стили кнопок */
.btn {
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 600;
  padding: 14px 24px;
  justify-content: center;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition:
    opacity 0.2s ease,
    background-color 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.btn-gold {
  background: var(--btn-gold-bg);
  background-blend-mode: color, overlay, normal, normal;
  color: var(--text-main) !important;

  text-shadow: 0px 0px 24px #000000;
}

.btn-gold:hover {
  opacity: 0.9;
}

.btn-dark {
  background: var(--btn-dark-bg);
  border: 1px solid var(--btn-dark-border);
  color: var(--btn-dark-text);
}

.btn-dark:hover {
  background: rgba(255, 255, 255, 0.1);
}

.btn-large {
  padding: 16px 32px;
  border-radius: 12px;
  font-size: 16px;
}

/* Шапка (Header) */
.header {
  padding: 24px 0;
}

.header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.header-left,
.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lang-select {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--btn-dark-bg);
  border: 1px solid var(--btn-dark-border);
  border-radius: 8px;
  font-size: 14px;
}

.social-links {
  display: flex;
  gap: 8px;
}

.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.social-icon i {
    font-size: 20px; /* Нужный размер иконки */
    
    /* Магия градиентного текста */
    background: var(--gold-gradient);
    background-blend-mode: color, overlay, normal, normal;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent; /* Делаем сам шрифт прозрачным, проявляя фон */
    
    display: inline-block;
}



.social-icon {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--btn-dark-bg);
  border: 1px solid var(--btn-dark-border);
  border-radius: 8px;
}

.logo {
  text-align: center;
}

.logo-title {
  font-size: 28px;
  font-weight: 700;
  tracking-content: 0.2em;
  letter-spacing: 4px;
  background: var(--gold-gradient);
  background-blend-mode: color, overlay, normal, normal;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.logo-subtitle {
  font-size: 8px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 4px;
}

.phone-link {
  color: var(--text-main);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  /* background: var(--btn-dark-bg);
    border: 1px solid var(--btn-dark-border);
    padding: 12px 32px;
    border-radius: 8px; */
}


/* Состояние при открытом меню (блокировка скролла) */
body.menu-open {
    overflow: hidden;
}

/* Стили мобильного меню */
.mobile-menu {
    position: fixed;
    top: 0;
    left: -100%; /* Спрятано слева */
    width: 100%;
    height: 100vh;
    background: var(--bg-main);
    z-index: 1000;
    padding: 24px;
    display: flex;
    flex-direction: column;
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-menu.is-active {
    left: 0;
}

.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60px;
}

.btn-close {
    background: none;
    border: none;
    color: var(--text-main);
    font-size: 32px;
    cursor: pointer;
}

.mobile-nav ul {
    list-style: none;
    padding: 0;
}

.mobile-nav li {
    margin-bottom: 20px;
}

.mobile-nav .nav-link {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-main);
    text-decoration: none;
    text-transform: uppercase;

}

.mobile-menu-footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-bottom: 20px;
}

/* Адаптив основной шапки */
@media (max-width: 1200px) {
    .header-left .social-links,
    .header-left .lang-select {
        display: none; /* Прячем соцсети и язык из шапки на планшетах */
    }
}

@media (max-width: 992px) {
    .header-right .phone-link {
        display: none; /* Прячем телефон на средних экранах */
    }

    .mobile-nav .nav-link {
        font-size: 16px;
    }
    
    .section-title {
        font-size: 36px; /* Уменьшаем заголовки */
    }
}

@media (max-width: 768px) {
    .header {
        padding: 16px 0;
    }

    .header-left span {
        display: none; /* Скрываем текст "Меню сайта", оставляем иконку */
    }

    .header-left .btn {
        padding: 12px;
    }

    .logo img {
        width: 100px; /* Уменьшаем логотип */
        height: auto;
    }

    
    .section-title {
        font-size: 28px;
    }

    

}

/* Баннер (Hero Section) */
.hero-banner {
  position: relative;
  width: 100%;
  height: 460px;
  border-radius: 16px;
  /* overflow: hidden; */
  margin-top: 20px;
  margin-bottom: 100px;
}

.banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left;
  border-radius: 16px;
}

/* Карточка на баннере (Glassmorphism) */
.location-card {
  position: absolute;
  top: 20px;
  left: 32px;
  background: 
        linear-gradient(0deg, rgba(207, 110, 31, 0.6), rgba(207, 109, 18, 0.6)), 
        linear-gradient(76.82deg, rgba(87, 98, 101, 0.2) 11.6%, rgba(158, 161, 161, 0.2) 25.31%, rgba(132, 139, 138, 0.2) 48.06%, rgba(87, 98, 101, 0.2) 55.72%, rgba(87, 98, 101, 0.2) 77.23%, rgba(117, 122, 123, 0.2) 85.34%, rgba(87, 98, 101, 0.2) 91.31%), 
        rgba(0, 0, 0, 0.6);

   background-blend-mode: color, normal, normal;
border: 1px solid var(--btn-dark-bg);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
  padding: 24px;
  border-radius: 16px;
  width: 430px;
}

.card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.card-top i {
  font-size: 32px;
}

.address-link {
  color: var(--text-main);
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 4px;
  line-height: 1.4;
  max-width: 300px;
}


.rating-block {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.rating-value {
  font-size: 24px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 30px;
}

.rating-stars {
  
  font-size: 24px;
}

.rating-count {
  font-size: 14px;
}

.tags-list {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.tag {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--card-border);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 16px;
 
}

/* Контент под баннером */
.hero-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  margin-top: 48px;
  align-items: center;
  margin-bottom: 120px;
  
  /* Включаем реверс колонок для десктопа */
  direction: rtl; 
}

/* Сбрасываем направление для дочерних элементов, чтобы текст не прижался к правому краю */
.hero-content > * {
  direction: ltr; 
}
.hero-content-right iframe{
 border-radius: 15px;
 box-shadow: 0 3px 30px rgba(0, 0, 0, 0.2);
}

.badge {
    width: fit-content;
  display: inline-block;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  padding: 8px 16px;
  border-radius: 30px;
  font-size: 18px;
  color: var(--text-main);
  margin-bottom: 24px;
}

.main-title {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 20px;
  
  /* ХАК ДЛЯ SAFARI: Принудительно заставляем браузер изолировать */
  /* контекст рендеринга заголовка, чтобы он не ломал соседей */
  display: block;
  position: relative;
  z-index: 1;
}

.main-title span {
  /* Твой градиент и бленд-мод */
  background: var(--gold-gradient);
  background-blend-mode: color, overlay, normal, normal;
  
  /* Жесткая кроссбраузерная обрезка текста */
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent; /* Фолбек для старых версий */
  
  /* ХАК ДЛЯ SAFARI #2: Обязательно объявляем тип отображения, */
  /* иначе Safari на iOS считает ширину спана как 0 */
  display: inline-block;
  
  /* Сброс возможных глюков трансформации в WebKit */
  -webkit-perspective: 1000;
  backface-visibility: hidden;
}

.description-text {
  color: var(--text-main) !important;
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 32px;
}

.cta-buttons {
  display: flex;
  gap: 16px;
}




@media (max-width: 768px) {

    .hero-content{
        margin-bottom: 60px;
        text-align: center;
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    .hero-content-right {
 width: 100%;
    }

    .hero-content-right iframe{
       
        height: 300px;
    }

    .cta-buttons{
        flex-direction: column;
    }

    .hero-banner {
        height: 350px; /* Увеличиваем высоту, чтобы влезла карточка */
        margin-bottom: 250px; /* Увеличиваем отступ снизу из-за вылета карточки */
    }

    .banner-img {
        object-position: center; /* Центрируем фото */
    }

    .location-card {
        position: relative; /* Выводим карточку из абсолютного позиционирования */
        bottom: 60px; /* Наплыв на баннер */
        right: 0;
        top: auto;
        left: 0;
        width: 90%; /* Почти на всю ширину */
        margin: 0 auto;
        padding: 20px;
        
    }

    .main-title {
        font-size: 32px; /* Уменьшаем заголовок */
    }

    .rating-value {
        gap: 15px;
        font-size: 20px;
    }

    .rating-stars {
        font-size: 18px;
    }

    .tag {
        font-size: 14px;
        padding: 4px 10px;
    }
}




/* Секция преимуществ */
.features {
   margin-bottom: 90px;
}

.features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Две колонки */
    gap: 24px; /* Отступ между карточками */
}

.feature-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 24px;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.feature-card:hover {
    border-color: rgba(208, 151, 66, 0.3); /* Легкий золотистый отблеск при наведении */
    transform: translateY(-5px);
}

.feature-img-wrapper {
    width: 100%;
    height: 280px;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 24px;
}

.feature-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.feature-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--text-main);
}

.feature-desc {
    font-size: 14px;
    line-height: 1.5;
    opacity: .8;
    max-width: 90%;
}


/* Сбрасываем дисплей грид для Swiper на мобилках, чтобы слайды шли в ряд */
@media (max-width: 992px) {
    .features-grid {
        display: flex; /* Swiper требует flex для wrapper */
        gap: 0;
    }
    
    .feature-card {
        height: auto;
        padding: 10px; /* Немного отступов внутри слайда */
    }

    /* Настройка стрелочек */
    .features-next, .features-prev {
        color: #D09742; /* Твой золотой цвет */
        top: 40%; /* Смещаем к центру картинок */
    }
    
    .features-next::after, .features-prev::after {
        font-size: 24px;
        font-weight: bold;
    }
}

@media (max-width: 768px){
    .features{
        margin-bottom: 60px;
    }
} 

/* Прячем стрелки на десктопе, если сетка полная */
@media (min-width: 993px) {
    .features-next, .features-prev,
    .discount-next, .discount-prev,
    .insta-next, .insta-prev {
        display: none;
    }
    /* Swiper может добавлять лишние стили, фиксируем: */
    .features-slider {
        overflow: visible;
    }
}



/* Секция "О баре" */
.about {
    margin-bottom: 90px;
}

.about-banner {
    background: var(--gold-gradient);
    background-blend-mode: color, overlay, normal, normal;
    border-radius: 32px;
    padding: 64px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    position: relative;
    overflow: hidden;
}

/* Эффект легкого глянца поверх баннера */
.about-banner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 50%);
    pointer-events: none;
}

.about-left {
    flex: 1;
}

.about-title {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-main);
    margin-bottom: 32px;
    max-width: 400px;
}

/* Тот самый бейдж-кнопка внутри баннера */
.about-badge {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 8px 24px;
    border-radius: 100px;
    font-size: 18px;
    color: var(--text-main);
    font-weight: 500;


    
}

.about-right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.about-text {
    max-width: 446px;
    font-size: 16px;
    line-height: 1.6;
    text-align: right;
    color: rgba(255, 255, 255, 0.75);
}

.about-text strong {
    font-weight: 700;
}

@media (max-width: 992px) {
    .about-banner {
        padding: 40px;
        flex-direction: column; /* Текст уходит под заголовок */
        text-align: center;
        gap: 24px;
    }

    .about-title {
        max-width: 100%;
        font-size: 32px;
        margin-bottom: 20px;
    }

    .about-right {
        justify-content: center; /* Центрируем текст */
    }

    .about-text {
        text-align: center; /* Сбрасываем правое выравнивание */
        max-width: 100%;
        font-size: 15px;
    }

    .about-badge {
        font-size: 16px;
        padding: 6px 20px;
    }
}

@media (max-width: 768px) {
    .about-banner {
        padding: 32px 20px;
        border-radius: 24px; /* Чуть меньше скругление для мобилок */
    }

    .about-title {
        font-size: 28px;
    }

    .about {
        margin-bottom: 60px; /* Уменьшаем отступ между секциями */
    }
}

/* Секция Акции и События */
.discount {
    margin-bottom: 90px;
}

.discount-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 64px;
}



.discount-title {
    font-size: 48px;
    font-weight: 700;
    margin-top: 16px;
    color: var(--text-main);
}

/* Сетка карточек */
.discount-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.discount-card {
    position: relative;
    height: 540px;
    border-radius: 24px;
    overflow: hidden;
    background: #1A1813;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 24px;
    text-decoration: none;
    border: 1px solid var(--card-border);
    transition: transform 0.3s ease;
}

.discount-card:hover {
    
}

/* Фоновое изображение карточки */
.discount-card-img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 1;

    transition: scale 0.5s ease;
}

.discount-card:hover .discount-card-img {
    scale: 1.05;
}

/* Затемнение снизу для текста */
.discount-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 60%;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
    z-index: 2;
}

/* Бейдж даты */
.date-badge {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 3;
    background: var(--gold-gradient);
    background-blend-mode: color, overlay, normal, normal;
    color: var(--text-main);
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 400;
}

/* Контент карточки */
.discount-card-content {
    position: relative;
    z-index: 3;
}

.discount-card-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.2;
    margin-bottom: 12px;
}

.discount-card-desc {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
}

/* Позиционирование стрелок в заголовке */
.discount-controls {
    display: flex;
    align-items: center;
    gap: 24px;
}

.swiper-nav-group {
    display: flex;
    gap: 12px;
    position: relative;
    width: 80px; /* Фиксируем ширину для стрелок */
    height: 40px;
}

/* Стили стрелок как у features */
    .discount-next, .discount-prev {
        color: #D09742 !important;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
    }

    .discount-next::after, .discount-prev::after {
        font-size: 24px;
        font-weight: bold;
    }

.show-mobile { display: none; }

@media (max-width: 992px) {
    .discount-top {
        margin-bottom: 32px;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .discount-grid {
        display: flex; /* Для Swiper */
        gap: 0;
    }

    .discount-card {
        height: 450px; /* Чуть меньше на мобилках */
    }

    .hide-mobile { display: none; }
    .show-mobile { display: inline-flex; }
    
    .discount-controls {
        width: 100%;
        justify-content: space-between;
    }
}

@media(max-width:768px){
    .discount{
        margin-bottom: 60px;
    }
}

@media (max-width: 480px) {
   
    .discount-card-title {
        font-size: 20px;
    }
}



/* Секция Меню */
.menu {
   margin-bottom: 90px;
}

.menu-banner {
    position: relative;
    width: 100%;
    min-height: 440px;
    border-radius: 32px;
    overflow: hidden;
    display: flex;
    align-items: center;
    background-color: #1a1813;
    border: 1px solid var(--card-border);
}

/* Фоновое изображение с затемнением слева */
.menu-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.menu-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;

}

/* Градиент поверх фото: от черного слева к прозрачному справа */
.menu-banner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, 
        rgba(0,0,0,0.9) 0%, 
        rgba(0,0,0,0.8) 35%, 
        rgba(0,0,0,0) 70%
    );
    z-index: 2;
}

/* Контентная часть */
.menu-content {
    position: relative;
    z-index: 3;
    padding: 64px;
    
}

.menu-badge {
    display: inline-block;
    padding: 8px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 100px;
    color: var(--text-main);
    font-size: 14px;
    margin-bottom: 24px;
}

.menu-title {
    font-size: 48px;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 20px;
}

.menu-description {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 40px;
    max-width: 430px;
}




@media (max-width: 768px) {
    .menu {
        margin-bottom: 60px; /* Четко 60px, как просил */
    }

    .menu-banner {
        flex-direction: column; /* Стек: картинка над текстом */
        min-height: auto;
        border-radius: 24px;
    }

    .menu-bg {
      
        width: 100%;
    }

    /* Меняем градиент: теперь он идет снизу вверх, чтобы подложить тень под текст */
    .menu-banner::before {
        /* Разворачиваем градиент сверху вниз */
        background: linear-gradient(180deg, 
            rgba(0,0,0,0) 0%, 
            rgba(0,0,0,0.6) 40%, 
            rgba(0,0,0,0.9) 100%
        );
        /* Убеждаемся, что он перекрывает весь баннер */
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .menu-content {
        padding: 32px 20px 40px;
        text-align: center;
        width: 100%;
    }

    .menu-title {
        font-size: 28px;
        margin-bottom: 16px;
    }

    .menu-description {
        font-size: 14px;
        margin: 0 auto 32px;
        max-width: 100%;
    }

    /* Если там есть кнопка, растягиваем её */
    .menu-content .btn {
        width: 100%;
    }
}


/* Секция Галерея */
.gallery {
    margin-bottom: 90px;
}

.gallery-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 40px;
}

.gallery-title {
    font-size: 48px;
    font-weight: 700;
    color: var(--text-main);
    margin-top: 16px;
}

/* Контейнер слайдера */
.swiper-container-wrapper {
    width: 100%;
    height: 400px;
    border-radius: 32px;
    overflow: hidden;
    border: 1px solid var(--card-border);
}

.gallery-swiper {
    width: 100%;
    height: 100%;
}

.gallery-swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Чтобы фото заполняло все 400px высоты без искажений */
}

/* Позиционирование стрелок внутри обертки */
.swiper-container-wrapper {
    position: relative;
}

/* Общие стили для кнопок-стрелок */
.gallery-nav-btn.swiper-button-prev,
.gallery-nav-btn.swiper-button-next {
    width: 56px;
    height: 56px;
    background: rgba(16, 14, 9, 0.6); /* Полупрозрачный темный фон под цвет сайта */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: var(--text-main);
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    z-index: 10;
}

/* Уменьшаем стандартный размер стрелочек Swiper внутри кнопок */
.gallery-nav-btn::after {
    font-size: 20px !important;
    font-weight: 700;
}

/* Сдвигаем стрелки чуть глубже внутрь слайдера от краев */
.gallery-nav-btn.swiper-button-prev {
    left: 24px;
}

.gallery-nav-btn.swiper-button-next {
    right: 24px;
}

/* Эффект при наведении (hover) */
.gallery-nav-btn:hover {
    background: rgba(208, 151, 66, 0.2); /* Легкое золотое свечение */
    border-color: #D09742; /* Золотая рамка */
    color: #D09742; /* Сама стрелка становится золотой */
    cursor: pointer;
}

/* Кастомные точки пагинации (опционально) */
.swiper-pagination-bullet {
    background: var(--text-main);
    opacity: 0.5;
}

.swiper-pagination-bullet-active {
    background: #D09742;
    opacity: 1;
}

@media(max-width:768px){
    .gallery{
        margin-bottom: 60px;
    }
    .gallery-header,.instagram-header {
        flex-direction: column;
        align-items: baseline !important;
        gap: 25px;
    }

    .gallery-nav-btn.swiper-button-prev,
    .gallery-nav-btn.swiper-button-next {
        width: 40px;  /* Уменьшаем с 56px */
        height: 40px; /* Уменьшаем с 56px */
    }

    /* Уменьшаем размер самих стрелок (иконок) внутри кнопок */
    .gallery-nav-btn.swiper-button-prev::after,
    .gallery-nav-btn.swiper-button-next::after {
        font-size: 18px !important; /* Уменьшаем стандартный размер Swiper-иконки */
    }

    .gallery-nav-btn.swiper-button-next{
        right: 10px;
    }
    .gallery-nav-btn.swiper-button-prev{
        left: 10px;
    }
}

/* Секция Instagram */
.instagram {
    margin-bottom: 90px; /* Только нижний отступ по ТЗ */
}

.instagram-header {
    display: flex;
    justify-content: space-between;
    align-items: end; /* Выравниваем кнопку по центру текстового блока */
    margin-bottom: 64px;
}


/* Бедж и подзаголовок (стили для .section-title пропускаем) */
.instagram-subtitle {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 16px;
}

/* Обертка для будущей интеграции. 
   Сюда будет монтироваться виджет инсты */
.instagram-feed-wrapper {
    width: 100%;
}

/* Временная сетка для шаблонов */
.instagram-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* Шаблонная карточка Instagram */
.insta-card {
    background: var(--text-main);
    border-radius: 16px;
    overflow: hidden;
    color: #000000;
    display: flex;
    flex-direction: column;
}

/* Шапка карточки */
.insta-card-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    gap: 12px;
}

.insta-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #1A1813;
    overflow: hidden;
}

.insta-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.insta-info {
    display: flex;
    flex-direction: column;
}

.insta-name {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}

.insta-location {
    font-size: 11px;
    color: #737373;
    margin-top: 2px;
}

/* Изображение поста */
.insta-image {
    width: 100%;
    aspect-ratio: 4 / 5; /* Стандартная вертикальная пропорция Instagram */
    background: #EFEFEF;
}

.insta-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Подвал с иконками */
.insta-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
}

.insta-actions-left {
    display: flex;
    gap: 16px;
}
.insta-icon {
    font-size: 24px; /* Управляем размером шрифта вместо width/height */
    color: #797596;  /* Цвет иконки по умолчанию на белом фоне карточки */
    cursor: pointer;
    transition: opacity 0.2s, color 0.2s;
}

.insta-icon:hover {
    opacity: 0.7;
    /* Если захочешь, чтобы лайк при наведении краснел: */
    /* &.ri-heart-3-line:hover { color: #FF3040; opacity: 1; } */
}

/* Адаптив 768px */
@media (max-width: 768px) {
    .instagram {
        margin-bottom: 60px;
    }

    .instagram-header {
       
        margin-bottom: 32px;
    }

   

    .instagram-grid {
        display: flex; /* Для корректной работы Swiper */
        gap: 0;
    }

    /* Стрелки как у features */
    .insta-next, .insta-prev {
        color: #D09742 !important;
        top: 45%;
    }

    .insta-next::after, .insta-prev::after {
        font-size: 24px;
    }

    .show-mobile {
        display: inline-flex;
        width: 100%;
        justify-content: center;
    }
}

/* Секция Контактов */
.contact-section {
    padding-bottom: 90px;
}

.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: stretch;

    direction: rtl;
}


.contact-wrapper > * {
  direction: ltr; 
}

.contact-content {
    display: flex;
    flex-direction: column;
}

.contact-subtitle {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 16px;
    margin-bottom: 32px;
}

/* Список контактов */
.contact-details {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 32px;
}

/* Плашка каждого контакта */
.contact-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid #d0974293; 
    border-radius: 12px;
    color: var(--text-main);
    font-size: 15px;
    font-weight: 500;
}

.contact-item i {
    font-size: 20px;
    color: var(--text-main);
}

/* Нижний ряд (Часы работы + Соцсети) */
.contact-row {
    display: flex;
    gap: 16px;
}

.contact-item.hours {
    flex: 1; /* Растягиваем блок с часами на всё доступное место */
}

.social-boxes {
    display: flex;
    gap: 12px;
}

.social-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid #d0974293; 
    border-radius: 12px;
    color: #D09742; /* Золотые иконки соцсетей */
    font-size: 24px;
    text-decoration: none;
    transition: background 0.3s ease, border-color 0.3s ease;
}


.social-box i{
    font-size: 24px; /* Нужный размер иконки */
    
    /* Магия градиентного текста */
    background: var(--gold-gradient);
    background-blend-mode: color, overlay, normal, normal;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent; /* Делаем сам шрифт прозрачным, проявляя фон */
    
    display: inline-block;
}



.social-box:hover {
    background: rgba(208, 151, 66, 0.1);
    border-color: #D09742;
}

/* Кнопка на всю ширину */
.btn-full {
    width: 100%;
    justify-content: center;
    padding: 16px;
    font-size: 16px;
    border-radius: 12px;
}

/* Блок с картой */
.contact-map {
    width: 100%;
    height: 100%;
    min-height: 480px;
    border-radius: 24px;
    overflow: hidden;
    background: #2a2a2a; /* Заглушка, пока грузится карта */
}

.contact-map img, 
.contact-map iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: none;
}

@media (max-width: 768px) {
    .contact-section {
        padding-bottom: 60px; /* Твой стандарт */
    }

    .contact-wrapper {
        grid-template-columns: 1fr; /* Одна колонка */
        gap: 40px;
    }

    .contact-content {
        text-align: center;
        align-items: center;
    }

    .contact-subtitle {
        font-size: 14px;
        margin-bottom: 24px;
    }

    .contact-details {
        width: 100%;
        gap: 12px;
    }

    .contact-item {
        justify-content: center; /* Центрируем иконку и текст внутри плашки */
        padding: 14px 20px;
        font-size: 14px;
    }

    /* Ряд с часами и соцсетями */
    .contact-row {
        flex-direction: column; /* Часы сверху, соцсети снизу */
        width: 100%;
        gap: 12px;
    }

    .contact-item.hours {
        width: 100%;
    }

    .social-boxes {
        justify-content: center; /* Центрируем иконки соцсетей */
        width: 100%;
    }

    .social-box {
        flex: 1; /* Растягиваем иконки поровну на мобилке */
        height: 50px;
        max-width: auto;
    }

    /* Карта */
    .contact-map {
        min-height: 350px; /* Уменьшаем высоту на мобилках */
        height: 350px;
        border-radius: 16px;
        order: 2; /* Карта идет после текста */
    }

    .complaint{
        margin-bottom: 60px !important;
    }
}

@media (max-width: 480px) {
    .section-title {
        font-size: 26px;
    }

    .contact-map {
        height: 300px;
        min-height: 300px;
    }
}

.complaint{
    margin-bottom: 90px;
}


.reviews-section {
    margin-bottom: 90px;
}

.reviews-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}


/* Стили формы (правая колонка) */
.reviews-form-content {
    display: flex;
    flex-direction: column;
}

.reviews-form {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-size: 16px;
    color: var(--text-main);
}

.form-input {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 16px;
    color: var(--text-main);
    font-size: 15px;
    outline: none;
}


.stars-group{
    align-items: center;
}

.star-rating-select {
    display: flex;
    gap: 8px;
}

.star-rating-select i {
    font-size: 40px;
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
    color: rgba(255, 255, 255, 0.2); /* Цвет пустых звезд */
}

/* Цвет активных и подсвеченных звезд */
.star-rating-select i.active,
.star-rating-select i:hover {
    color: #D09742; /* Твое золото */
}

/* Легкое увеличение при клике/наведении */
.star-rating-select i:active {
    transform: scale(1.2);
}


@media (max-width: 991px) {
    .reviews-section {
        margin-bottom: 60px; /* Твой стандарт */
    }

    .reviews-wrapper {
        grid-template-columns: 1fr; /* В одну колонку */
        gap: 48px;
    }

   

    .reviews-form {
        gap: 20px;
    }

    /* Центрируем звезды на мобилке */
    .star-rating-select {
        justify-content: center;
    }

    .star-rating-select i {
        font-size: 32px; /* Чуть меньше звезды, чтобы влезли в ряд на мелких экранах */
    }

    

    /* Хакаем инлайновые стили Яндекса */
    .yandex-iframe-wrapper div[style*="width:560px"] {
        width: 100% !important; 
        max-width: 100% !important;
        height: 500px !important; /* Уменьшаем высоту на мобилке, чтобы не скроллить вечность */
    }

    .yandex-iframe-wrapper iframe {
        border-radius: 16px !important;
    }
}

@media (max-width: 480px) {
    .reviews-form-content .section-title {
        font-size: 28px;
    }
    
    .form-input {
        padding: 14px;
    }
}


/* Секция Футера */
.footer {
}

/* Золотой контейнер футера */
.footer-inner {
    background: var(--gold-gradient); /* Тот же градиент, что в about-banner */
    background-blend-mode: color, overlay, normal, normal;
    border-radius: 40px 40px 0 0;
    padding: 60px 80px 0 80px; /* Сверху чуть больше, снизу меньше из-за копирайта */
    position: relative;
    overflow: hidden;
}

/* Легкий глянец, как на баннере */
.footer-inner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 50%);
    pointer-events: none;
}

/* Верхняя часть (колонки) */
.footer-top {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1.5fr; /* Левая, центр, правая (шире под контакты) */
    gap: 40px;
    position: relative;
    z-index: 2;
}

/* Колонка 1: Логотип и текст */
.footer-col-info {
    display: flex;
    flex-direction: column;
}

.footer-logo {
    max-width: 160px;
    margin-bottom: 40px;
}

.footer-desc {
    font-size: 18px;
    line-height: 1.5;

   
}

/* Колонка 2: Навигация */
.footer-nav-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 24px;
}

.footer-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer-nav-list a {
    text-decoration: none;
    color:var(--text-main);
    font-size: 18px;
    transition: color 0.2s;
}

.footer-nav-list a:hover {
    color: var(--text-main);
}

/* Колонка 3: Контакты */
.footer-contacts-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Плашки контактов с эффектом темного стекла */
.footer-contact-item {
    display: flex;
    align-items: center;
    font-size: 18px;
    line-height: 1.4;
    gap: 16px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: var(--text-main);
    font-size: 14px;
    font-weight: 500;
}

.footer-contact-item i {
    font-size: 24px;
    color: var(--text-main);
}

/* Блок соцсетей в футере */
.footer-socials {
    display: flex;
    gap: 12px;
    margin-top: 12px;
}

.footer-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: var(--text-main);
    font-size: 20px;
    text-decoration: none;
    transition: background 0.2s;
}

.footer-social-btn i{
    font-size: 24px;
}

.footer-social-btn:hover {
    background: rgba(0, 0, 0, 0.1);
}

/* Нижняя часть (Копирайт) */
.footer-bottom {
    position: relative;
    z-index: 2;
    margin-top: 60px;
    padding-top: 64px;
    padding-bottom: 64px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;

}

.footer-bottom a {
    color: var(--text-main);
    text-decoration: none;
    transition: color 0.2s;
}

.footer-bottom a:hover {
    color: var(--text-main);
}


@media (max-width: 768px) {
    .footer-inner {
        padding: 48px 20px 0 20px; /* Уменьшаем боковые отступы */
        border-radius: 32px 32px 0 0;
    }

    .footer-top {
        grid-template-columns: 1fr; /* Колонки в один ряд */
        gap: 40px;
        
    }

    /* Центрируем логотип */
    .footer-logo {
        margin: 0 auto 24px;
        max-width: 140px;
    }

    .footer-desc {
        font-size: 15px;
      
    }

    /* Навигация */
    .footer-nav-title {
        font-size: 20px;
        margin-bottom: 20px;
    }

    .footer-nav-list {
        gap: 12px;
    }

    .footer-nav-list a {
        font-size: 16px;
    }

    /* Контакты */
    .footer-contacts-list {
        gap: 10px;
    }

    .footer-contact-item {
      
        padding: 12px;
        font-size: 14px;
    }

    /* Соцсети в ряд */
    .footer-socials {
        justify-content: center;
    }

    .footer-social-btn {
        flex: 1 !important;
        width: 60px; /* На мобилке лучше фиксированные кнопки, чем на всю ширину */
        flex: none;
    }

    /* Копирайт */
    .footer-bottom {
        margin-top: 40px;
        padding: 32px 0;
        flex-direction: column; /* Складываем копирайт и ссылки друг под друга */
        gap: 16px;
        text-align: center;
        font-size: 14px;
    }
}




/* --- СТРАНИЦА МЕНЮ --- */
.menu-page {
    padding: 40px 0 100px;
}

/* Хлебные крошки */
.breadcrumbs {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 24px;
}

.breadcrumbs a {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    transition: color 0.3s;
}

.breadcrumbs a:hover {
    color: var(--text-main);
}

.breadcrumbs .sep {
    margin: 0 8px;
}

.breadcrumbs .current {
    color: var(--text-main);
}

/* Заголовок */
.page-title {
    font-size: 48px;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 40px;
}

/* Блок фильтров */
.menu-filters {
    margin-bottom: 16px;
}

/* Фиксированный контейнер для фильтров */
.menu-filters-sticky {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bg-main);
    padding: 24px 0 0;
    margin-bottom: 32px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    
}

.filter-label {
    font-size: 14px;
    color: var(--text-main);
    margin-bottom: 16px;
}

.filter-group {
    display: flex;

    gap: 12px;
}

/* Кнопки-таблетки */
.filter-btn {
    padding: 10px 20px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-main);
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.filter-btn.active {
    background: var(--btn-gold-bg);
    background-blend-mode: color, overlay, normal, normal;
    text-shadow: 0px 0px 24px #000000;
    color: var(--text-main);
    font-weight: 500;
}

/* Контейнер-обертка */
.filter-carousel {
    position: relative;
    width: 100%;
    /* Изначально маски нет, пока JS не посчитает скролл */
    mask-image: none;
    -webkit-mask-image: none;
}

/* Эффект только справа (когда скролл в самом начале) */
.filter-carousel.fade-right {
    mask-image: linear-gradient(to right, #000 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 85%, transparent 100%);
}

/* Эффект только слева (когда доскроллили до самого конца) */
.filter-carousel.fade-left {
    mask-image: linear-gradient(to right, transparent 0%, #000 15%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 15%);
}

/* Эффект с обеих сторон (когда мы где-то посередине) */
.filter-carousel.fade-both {
    mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
}

/* Твой контейнер #sub-category-filters */
#sub-category-filters {
    display: flex;
    gap: 8px;                  /* Отступ между кнопками */
    overflow-x: auto;          /* Включаем горизонтальный скролл */
    overflow-y: hidden;
    scroll-behavior: smooth;   /* Плавное смещение при клике из JS */
    
    /* Инерционный скролл на iOS (чтобы свайпалось мягко) */
    -webkit-overflow-scrolling: touch; 
    
    /* Внутренние отступы, чтобы кнопки не прилипали к краям экрана */
    padding: 4px 16px 12px 16px; 
    margin: 0 -16px;           /* Компенсируем паддинги */
}

/* Полностью прячем системный скроллбар во всех браузерах */
#sub-category-filters::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}
#sub-category-filters {
    -ms-overflow-style: none;  /* IE / Edge */
    scrollbar-width: none;     /* Firefox */
}

/* Стили для кнопок-фильтров */
#sub-category-filters .filter-btn {
    flex-shrink: 0;            /* КРИТИЧНО: запрещает кнопкам сжиматься */
    white-space: nowrap;       /* Запрещает перенос текста внутри кнопок */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    
    /* Твои стили для кнопок (настрой цвета под себя) */
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Активное состояние кнопки */
#sub-category-filters .filter-btn.active {
    background: var(--gold-gradient);
    background-blend-mode: color, overlay, normal, normal;
  
    border-color: #D09742;
}

/* Курсор "руки" при наведении на фильтры */
#sub-category-filters {
    cursor: grab;
}

/* Изменяем курсор во время активного перетаскивания и отключаем плавность */
#sub-category-filters:active,
#sub-category-filters.dragging {
    cursor: grabbing;
    scroll-behavior: auto !important; /* Отключает smooth, чтобы скролл шел за мышкой без задержек */
}

/* Чтобы текст кнопок случайно не выделялся синим цветом при свайпе мышкой */
#sub-category-filters .filter-btn {
    user-select: none;
    -webkit-user-select: none;
}



/* Список блюд */
.menu-list-container {
    margin-top: 48px;
    display: flex;
    flex-direction: column;
}

/* Карточка блюда (строка) */
.menu-item {
    display: flex;
    align-items: flex-end; /* Прижимаем к низу, чтобы точки шли по нижней линии */
    padding: 32px 0;
    transition: opacity 0.4s ease-in-out;
    border-bottom: 1px solid rgba(208, 151, 66, 0.15); /* Легкий золотой разделитель */
}

#menu-list {
  transition: opacity 0.4s ease-in-out;
  opacity: 1;
}

#menu-list.fade-out {
  opacity: 0;
}

.menu-item:last-child {
    border-bottom: none;
}

.menu-item-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 65%;
}

.menu-item-title {
    font-size: 22px;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.2;
}

.menu-item-desc {
    font-size: 15px;
    font-style: italic;
    color: #D09742; /* Цвет описания из макета */
    opacity: 0.9;
}

/* Пунктирная линия */
.menu-item-dots {
    flex-grow: 1;
    border-bottom: 2px dotted rgba(255, 255, 255, 0.2);
    margin: 0 20px 8px 20px; /* Отступы по бокам и снизу, чтобы выровнять по тексту */
}

.menu-item-price {
    font-size: 26px;
    font-weight: 700;
    color: var(--text-main);
    white-space: nowrap;
    margin-bottom: -4px; /* Легкая корректировка выравнивания */
}

/* Адаптив */
@media (max-width: 768px) {
    .page-title { font-size: 36px; margin-bottom: 32px; }
    
    .menu-filters-sticky {
        padding: 16px 0;
        margin-bottom: 24px;
        top: 0;
    }
    
    .filter-btn { padding: 8px 16px; font-size: 14px; }
    
    .menu-item {
        flex-direction: column;
        align-items: flex-start;
        padding: 24px 0;
        gap: 12px;
    }

    .menu-item-info { max-width: 100%; }
    
    .menu-item-dots { display: none; /* На мобилках точки скрываем, выглядит кашей */ }
    
    .menu-item-price {
        font-size: 22px;
        align-self: flex-start; /* Цена слева под описанием */
        color: #D09742; /* На мобилке цену можно выделить цветом */
    }
}


.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: rgba(16, 14, 9, 0.6); /* Темный фон с прозрачностью */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(208, 151, 66, 0.4); /* Золотистая полупрозрачная рамка */
    border-radius: 50%;
    color: #D09742; /* Твое золото */
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1000;
    opacity: 0; /* Скрыта по умолчанию */
    visibility: hidden;
    transition: all 0.4s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
    bottom: 100px; /* Эффект "всплытия" при появлении */
}

.back-to-top:hover {
    background: var(--btn-gold-bg);
    background-blend-mode: color, overlay, normal, normal;
    color: var(--text-main);
    border-color: #D09742;
    transform: translateY(-5px);
}

/* Адаптив под 768px */
@media (max-width: 768px) {
    .back-to-top {
        bottom: 20px;
        right: 20px;
        width: 44px;
        height: 44px;
        font-size: 20px;
    }
    .back-to-top.show {
        bottom: 30px;
    }
}


/* =========================
   ENTRY CONTENT STYLES
========================= */

.entry-content {
  
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-main);
}

.entry-content > *:first-child {
    margin-top: 0;
}

.entry-content > *:last-child {
    margin-bottom: 0;
}

/* Заголовки */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    font-weight: 700;
    line-height: 1.3;
    margin: 40px 0 20px;
    color: var(--text-main);
}

.entry-content h1 {
    font-size: 42px;
}

.entry-content h2 {
    font-size: 34px;
}

.entry-content h3 {
    font-size: 28px;
}

.entry-content h4 {
    font-size: 24px;
}

.entry-content h5 {
    font-size: 20px;
}

.entry-content h6 {
    font-size: 18px;
}

/* Параграфы */
.entry-content p {
    margin-bottom: 20px;
}

/* Ссылки */
.entry-content a {
    color: #2b7fff;
    text-decoration: none;
    transition: .2s ease;
}

.entry-content a:hover {
    color: #005ae0;
    text-decoration: underline;
}

/* Списки */
.entry-content ul,
.entry-content ol {
    margin: 20px 0 20px 25px;
}

.entry-content li {
    margin-bottom: 10px;
}

/* Цитаты */
.entry-content blockquote {
    border-left: 4px solid #2b7fff;
    padding: 20px 25px;
    background: #f5f8ff;
    margin: 30px 0;
    font-style: italic;
    border-radius: 12px;
}

/* Картинки */
.entry-content img {
    max-width: 100%;
    height: auto;
    border-radius: 16px;
    margin: 25px 0;
    display: block;
}

/* Таблицы */
.entry-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 30px 0;
}

.entry-content table th,
.entry-content table td {
    border: 1px solid #ddd;
    padding: 14px;
    text-align: left;
}

.entry-content table th {
    background: #f7f7f7;
    font-weight: 600;
}

/* Код */
.entry-content code {
    background: #f3f3f3;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 14px;
}

.entry-content pre {
    background: #111;
    color: var(--text-main);
    padding: 20px;
    border-radius: 14px;
    overflow-x: auto;
    margin: 30px 0;
}

.entry-content pre code {
    background: transparent;
    padding: 0;
    color: inherit;
}

/* HR */
.entry-content hr {
    border: none;
    border-top: 1px solid #ddd;
    margin: 40px 0;
}

/* iframe / video */
.entry-content iframe,
.entry-content video {
    width: 100%;
    border-radius: 16px;
    margin: 30px 0;
}

/* Адаптив */
@media (max-width: 768px) {
    .entry-content {
        font-size: 15px;
        line-height: 1.7;
    }

    .entry-content h1 {
        font-size: 32px;
    }

    .entry-content h2 {
        font-size: 28px;
    }

    .entry-content h3 {
        font-size: 24px;
    }

    .entry-content h4 {
        font-size: 20px;
    }
}


.signature-badge {
    font-weight: bold;
    margin-left: 6px;
    display: inline-block;
    font-size: 14px;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}



/* Плавающая кнопка */
.floating-cart {
    position: fixed;
    bottom: 30px;
    right: -200px; /* Скрыта изначально */
    background: #111;
    border: 1px solid #d0974293; /* Золотой контур */
    color: #fff;
    padding: 12px 20px;
    border-radius: 40px;
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    z-index: 999;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    transition: right 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 0.2s;
}
.floating-cart.visible {
    right: 30px;
}
.floating-cart:hover {
    transform: translateY(-3px);
}
.cart-icon-wrapper {
    position: relative;
    font-size: 22px;
    color: #d0974293;
}
#cart-count {
    position: absolute;
    top: -8px;
    right: -10px;
    background: var(--gold-gradient);
    background-blend-mode: color, overlay, normal, normal;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cart-info-short {
    display: flex;
    flex-direction: column;
    font-size: 13px;
}
.cart-info-short .cart-label {
    color: #888;
    font-size: 11px;
    text-transform: uppercase;
}

.cart-total-details {

   
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cart-subtotal-row, 
.cart-service-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #888;
}
/* Сбрасываем верхний бордер у итоговой строки, так как мы перенесли его выше */
.cart-modal-footer .cart-total-row {
    border-top: none;
    padding-top: 0;
    margin-bottom: 20px;
}

/* Модалка корзины */
.cart-modal {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    max-width: 420px;
    height: 100%;
    background: var(--bg-main);
    border-left: 1px solid #222;
    z-index: 1000;
    box-shadow: -10px 0 40px rgba(0,0,0,0.4);
    transition: right 0.4s ease;
}
.cart-modal.active {
    right: 0;
}
.cart-modal-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 30px;
}
.cart-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #222;
    padding-bottom: 20px;
}
.cart-modal-header h3 {
    color: #fff;
  
    margin: 0;
}
.close-cart {
    background: none;
    border: none;
    color: #888;
    font-size: 28px;
    cursor: pointer;
}
.cart-items-list {
    flex: 1;
    overflow-y: auto;
    padding: 20px 0;
}
.cart-modal-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #1a1a1a;
}
.cart-item-name {
    color: #fff;
    font-size: 14px;
    width: 50%;
}
.cart-item-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}
.cart-item-controls button {
    background: #222;
    border: none;
    color: #fff;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
}
.cart-item-price {
    color: #d0974293;
    font-weight: bold;
}
.cart-modal-footer {
    border-top: 1px solid #222;
    padding-top: 20px;
}
.cart-total-row {
    display: flex;
    justify-content: space-between;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 20px;
}
.btn-send-whatsapp {
    width: 100%;
    background: var(--gold-gradient);
    background-blend-mode: color, overlay, normal, normal;
    color: #fff;
    border: none;
    padding: 15px;
    border-radius: 30px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* Кнопка плюса в меню */
.menu-item-price-block {
    display: flex;
    align-items: center;
    gap: 15px;
}
.btn-add-to-cart {
    background: none;
    border: 1px solid #d0974293;
    color: #d0974293;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.btn-add-to-cart:hover {
    background: var(--gold-gradient);
    background-blend-mode: color, overlay, normal, normal;
    color: #fff;
}
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}
.pulse { animation: pulse 0.3s ease-in-out; }


.home__btn{
    color:#ffffff !important;
    opacity: 1 !important;
    filter: drop-shadow(0 0 1px #D09742) !important;
    z-index: 10;
}



/* Десктопные базовые стили для контейнера (если их не было) */
#sbi_images {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

/* Мобильная адаптация и кастомный слайдер */
@media (max-width: 768px) {
    :root {
        /* Жестко фиксируем высоту контентной части карточки в зависимости от ширины экрана, 
           чтобы она всегда сохраняла пропорции, близкие к 3:4 */
        --insta-card-width: 82vw;
        --insta-height: calc(var(--insta-card-width) * 1.333); /* 4 / 3 */
    }

    #sb_instagram {
        position: relative;
        padding-bottom: 35px !important;
        width: 100% !important;
        overflow: hidden;
    }

    #sbi_images {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        grid-template-columns: none !important;
        
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        
        width: 100% !important;
        padding: 0 15px !important;
        box-sizing: border-box;

        /* Градиент затухания */
        -webkit-mask-image: linear-gradient(to right, black 82%, transparent 98%);
        mask-image: linear-gradient(to right, black 82%, transparent 98%);
        transition: opacity 0.3s ease;
    }

    #sbi_images::-webkit-scrollbar {
        display: none !important;
    }

    #sbi_images.last-slide-active {
        -webkit-mask-image: none;
        mask-image: none;
    }

    /* Адаптация карточки */
    #sbi_images .sbi_item {
        display: block !important;
        width: var(--insta-card-width) !important;
        min-width: var(--insta-card-width) !important;
        max-width: var(--insta-card-width) !important;
        flex: 0 0 var(--insta-card-width) !important;
        box-sizing: border-box;
        padding-right: 15px !important;
        
        scroll-snap-align: start !important;
        scroll-snap-stop: always !important;
    }

    /* ПРИНУДИТЕЛЬНАЯ НОРМАЛИЗАЦИЯ ВЫСОТЫ ДЛЯ ФОТО И РИЛСОВ */
    #sbi_images .sbi_photo_wrap {
        height: var(--insta-height) !important; /* Жестко фиксируем высоту */
        width: 100% !important;
        overflow: hidden; /* Обрезаем всё, что не влезает */
        position: relative;
    }

    /* Стилизация картинок и видео внутри зафиксированной высоты */
    #sbi_images .sbi_photo_wrap img,
    #sbi_images .sbi_photo_wrap video,
    #sbi_images .sbi_photo {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important; /* Вписываем контент без искажений, обрезая края */
        object-position: center !important; /* Центрируем */
        position: absolute;
        top: 0;
        left: 0;
    }

    /* Пагинация */
    .sbi-slider-dots {
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 8px;
        z-index: 99;
        pointer-events: none;
    }

    .sbi-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.25);
        transition: all 0.25s ease;
    }

    .sbi-dot.active {
        background: #c5a880;
        transform: scale(1.2);
    }
}


.lang-select {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px; /* Задаем фиксированный отступ между текстом и стрелкой */
    cursor: pointer;
    
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #ffffff;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.lang-select::after {
    content: '';
    display: block; /* Меняем на block, так как gap сам сделает отступ */
    width: 5px;
    height: 5px;
    border-right: 1.5px solid rgba(255, 255, 255, 0.7);
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.7);
    transform: rotate(45deg);
    transition: transform 0.3s ease, border-color 0.3s ease;
    /* Убираем относительное позиционирование top, центровка идет за счет flex */
    margin-top: -3px; /* Компенсируем наклон стрелки, чтобы визуально она была на линии шрифта */
}

/* Состояния при ховере и открытии */
.lang-select-wrapper:hover .lang-select::after,
.lang-select-wrapper.is-open .lang-select::after {
    border-color: #c5a880;
    transform: rotate(-135deg);
    margin-top: 1px; /* Корректируем центровку при перевороте */
}


/* Общий контейнер */
.lang-select-wrapper {
    position: relative;
    display: inline-block;
}

/* Сама выпадашка */
.lang-dropdown {
    position: absolute;
    top: 100%;
    left: 0; /* Выравниваем по левому краю кнопки */
    background: #111111 !important;
    border: 1px solid rgba(197, 168, 128, 0.3) !important;
    padding: 4px 0 !important;
    min-width: 100% !important; /* Ширина дропдауна ровно по ширине кнопки */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8) !important;
    border-radius: 8px !important;
    /* Скрываем по дефолту */
    display: none !important; 
    z-index: 999999 !important; 
}

/* Показываем при ховере на родительский враппер */
.lang-select-wrapper:hover .lang-dropdown,
.lang-select-wrapper.is-open .lang-dropdown {
    display: flex !important;
    flex-direction: column !important;
}

/* Ссылки внутри */
.lang-dropdown .lang-item {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 8px 12px !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    transition: all 0.2s ease !important;
}

.lang-dropdown .lang-item:hover {
    color: #c5a880 !important;
    background: rgba(197, 168, 128, 0.1) !important;
}


/* По умолчанию (на компьютерах) мобильный переключатель скрыт */
.lang-mobile {
    display: none !important;
}

/* На экранах меньше 768px (настройте брейкпоинт под себя) */
@media (max-width: 1200px) {
    .lang-desktop {
        display: none !important; /* Прячем левый */
    }
    .lang-mobile {
        display: inline-block !important; /* Показываем правый */
    }
}