/* ===================== */
/*  MELS TRAVEL — DESIGN */
/* ===================== */

/* Токены темы */
:root{
  --brand:#0A7BDA;
  --brand-600:#0869B7;
  --brand-50:#F0F7FF;

  --ink:#0F172A;
  --muted:#475569;
  --bg:#FFFFFF;
  --bg-soft:#F7FAFE;
  --line:#E5EEF8;
  --ok:#12B886;
  --warn:#FFA500;

  --shadow:0 8px 28px rgba(10,123,218,.08);
}

@media (prefers-color-scheme: dark){
  :root{
    --ink:#E6EDF6;
    --muted:#9FB3C8;
    --bg:#0B1220;
    --bg-soft:#0F1930;
    --line:#243454;
    --brand:#6CB7FF;
    --brand-600:#489CEB;
    --brand-50:#0F1930;
    --shadow:0 12px 32px rgba(0,0,0,.4);
  }
}

/* Типографика + отступы */
:root{
  --fs-xs: clamp(12px, .8vw, 13px);
  --fs-sm: clamp(14px, 1vw, 15px);
  --fs-base: clamp(15px, 1.15vw, 17px);
  --fs-lg: clamp(17px, 1.35vw, 19px);
  --fs-xl: clamp(20px, 1.9vw, 24px);
  --fs-2xl: clamp(26px, 3.8vw, 36px);
  --fs-3xl: clamp(32px, 5.2vw, 48px);
  --fs-4xl: clamp(40px, 7vw, 64px);
  --lh-tight:1.15;
  --lh-snug:1.25;
  --lh:1.6;
  --lh-loose:1.75;

  --s-1:4px;
  --s-2:8px;
  --s-3:12px;
  --s-4:16px;
  --s-5:20px;
  --s-6:24px;
  --s-7:28px;
  --s-8:32px;
  --s-10:40px;
  --s-12:48px;
  --s-16:64px;
  --s-20:80px;

  --r-1:8px;
  --r-2:14px;
  --r-3:20px;
  --r-round:999px;

  --container-max:1200px;
  --container-pad: clamp(16px, 3vw, 32px);
}

/* База */

html{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
}

body{
  margin:0;
}

.container{
  max-width:var(--container-max);
  margin:0 auto;
  padding:0 var(--container-pad);
}

.section{
  padding: var(--s-12) 0;
}

.section.soft{
  background:var(--bg-soft);
}

.muted{
  color:var(--muted);
}

/* Заголовки и текст */

h1,h2,h3{
  margin:0 0 var(--s-4);
  line-height:var(--lh-tight);
  letter-spacing:-.01em;
}

h1{ font-size:var(--fs-4xl); }
h2{ font-size:var(--fs-3xl); }
h3{ font-size:var(--fs-2xl); }

p,li{
  font-size:var(--fs-base);
  line-height:var(--lh);
}

.eyebrow{
  font-size:var(--fs-sm);
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--brand);
  font-weight:700;
}

/* ===================== */
/*        КНОПКИ         */
/* ===================== */

/* Общая система кнопок */

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  border-radius: var(--r-round);
  padding: 12px 18px;
  font-weight:700;
  text-decoration:none;
  transition:.2s ease;
  border:1px solid transparent;
}

.btn.primary{
  background:var(--brand);
  color:#fff;
  box-shadow: var(--shadow);
}

.btn.primary:hover{
  background:var(--brand-600);
  transform: translateY(-1px);
}

.btn.ghost{
  background:transparent;
  color:var(--brand);
  border-color:var(--brand);
}

.btn.ghost:hover{
  background:var(--brand-50);
}

/* Отдельная кнопка-капсула (OTP) */

.ButtonOtp{
  width: 275px;
  height: 60px;
  background-color: #038DCE;
  color: #ffffff;
  border: none;
  border-radius: 100px;
  font-size: 1.2rem;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.ButtonOtp:hover{
  background-color: #84C44A;
}



/* по умолчанию первая (primary) активна: синяя с белым текстом */
.contact-bar .btn.primary{
  background: var(--brand);
  color: #ffffff;
  box-shadow: var(--shadow);
}

/* когда мышь внутри бара, но не на первой */
.contact-bar .inner:hover .btn.primary:not(:hover){
  background: transparent;
  color: var(--brand);
  box-shadow: none;
}

/* наведённая кнопка — всегда синяя с белым текстом */
.contact-bar .inner .btn:hover{
  background: var(--brand);
  color: #ffffff;
  box-shadow: var(--shadow);
}

/* ===================== */
/*      ЛЕЙАУТ / HERO    */
/* ===================== */

.hero{
  position:relative;
  padding: clamp(56px, 12vw, 140px) 0;
  isolation:isolate;
}

.hero .bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(10,123,218,.25), transparent),
    linear-gradient(180deg, rgba(10,123,218,.10), transparent 40%);
  z-index:-1;
}

.hero h1{ max-width: 16ch; }
.hero p{ max-width: 56ch; margin: var(--s-4) 0 var(--s-6); }

.hero .cta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

/* GRID */

.grid{
  display:grid;
  gap: clamp(16px, 2.2vw, 28px);
}

@media (min-width:720px){
  .grid.cols-2{ grid-template-columns: repeat(2, 1fr); }
}

@media (min-width:960px){
  .grid.cols-3{ grid-template-columns: repeat(3, 1fr); }
}

@media (min-width:1200px){
  .grid.cols-4{ grid-template-columns: repeat(4, 1fr); }
}

/* Cards */

.card{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--r-2);
  padding: clamp(16px, 2.4vw, 24px);
  box-shadow: var(--shadow);
}

.card h4{
  margin:0 0 8px;
  font-size: var(--fs-lg);
}

.kpi{
  display:flex;
  align-items:center;
  gap:12px;
}

.kpi .dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--brand);
  flex:0 0 auto;
}

/* Списки с точками */

.list{
  display:grid;
  gap:10px;
}

.list li{
  list-style:none;
  position:relative;
  padding-left:26px;
}

.list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
  border: none;
}

/* Pills — сезоны и погода */

.pills{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.pill{
  padding: 8px 14px;
  border-radius: var(--r-round);
  font-size: var(--fs-sm);
  line-height: 1.4;
  background: rgba(10,123,218,.04);
  border: 1px solid rgba(10,123,218,.18);
  color: var(--ink);
  font-weight: 500;
}

/* Media */

.thumb{
  position:relative;
  overflow:hidden;
  border-radius: var(--r-2);
  aspect-ratio: 3/2;
  background:linear-gradient(135deg, #E8F2FF, #F6FBFF);
  border:1px dashed var(--line);
}

.thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:inherit;
}

.hero-media{
  position:absolute;
  inset:0;
  z-index:-2;
  overflow:hidden;
}

.hero-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 45%;
  filter:saturate(1.05) contrast(1.02);
  display:block;
}

/* ===================== */
/*        FAQ / Q&A      */
/* ===================== */

details{
  --faq-dur: .28s;
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  padding: 14px 16px;
  background: var(--bg);
}

details + details{
  margin-top: 12px;
}

details[open]{
  box-shadow: var(--shadow);
}

/* Заголовок вопроса */

summary{
  cursor: pointer;
  font-weight: 700;
  font-size: var(--fs-base);
  list-style: none;
  display: flex;
  align-items: center;
  outline: none;
}

summary::-webkit-details-marker{ display:none; }
summary::marker{ content:""; }

/* Стрелка */

summary::before{
  content: "▾";
  margin-right: 8px;
  font-size: 18px;
  line-height: 1;
  color: var(--brand);
  transform: rotate(-90deg);
  transform-origin: center;
  transition: transform var(--faq-dur) ease;
}

details[open] summary::before{
  transform: rotate(0deg);
}

/* Контент ответа с анимацией */

.faq-content{
  margin-top: 8px;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    max-height var(--faq-dur) ease,
    opacity    var(--faq-dur) ease,
    transform  var(--faq-dur) ease;
}

details[open] .faq-content{
  max-height: 400px;
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce){
  .faq-content{ transition: none !important; }
}

summary:focus-visible,
details:focus-visible{
  outline: none;
}

/* ===================== */
/*     CONTACT BAR       */
/* ===================== */

.contact-bar{
  position:sticky;
  bottom:12px;
  display:flex;
  justify-content:center;
  padding: 0 var(--container-pad);
  z-index:50;
}

.contact-bar .inner{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius: var(--r-round);
  padding:8px;
  display:flex;
  gap:8px;
  box-shadow: var(--shadow);
}

/* ===================== */
/*       FOOTER CTA      */
/* ===================== */

.footer-cta{
  text-align:center;
  padding: var(--s-16) 0 var(--s-12);
}

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:12px;
  margin-bottom: var(--s-6);
}

.section-head p{
  margin:0;
}

/* ===================== */
/*   Фон по умолчанию    */
/* ===================== */

html,
body{
  background-color: #ffffff !important;
}
/* Кнопки в contact-bar — нормальное поведение */

.contact-bar .btn {
  background: transparent;
  border-color: var(--brand);
  color: var(--brand) !important;   /* перебиваем стили ссылок Тильды */
  box-shadow: none;
}

/* По умолчанию первая (primary) — синяя с белым текстом */
.contact-bar .btn.primary {
  background: var(--brand);
  color: #ffffff !important;
  box-shadow: var(--shadow);
}

/* Когда мышь внутри бара, но НЕ на первой — первая становится "как остальные" */
.contact-bar .inner:hover .btn.primary:not(:hover) {
  background: transparent;
  color: var(--brand) !important;
  box-shadow: none;
}

/* Любая наведённая кнопка — синяя с белым текстом */
.contact-bar .inner .btn:hover {
  background: var(--brand);
  color: #ffffff !important;
  box-shadow: var(--shadow);
}
/* Дополнительный отступ в секции "Бюджет" между заголовком/кнопкой и карточкой */
.section-budget .section-head{
  margin-bottom: var(--s-8); /* было var(--s-6); можно увеличить до --s-10, если хочешь ещё больше воздуха */
}
/* Отступ между карточкой бюджета и блоком с кнопками */
.section-budget .card{
  margin-bottom: var(--s-8);  /* можно var(--s-6) если хочешь поменьше */
}
/* После всего, в самом конце CSS */
:root{
  color-scheme: light;              /* говорим браузеру: только светлая тема */
  --ink:#0F172A;
  --muted:#475569;
  --bg:#FFFFFF;
  --bg-soft:#F7FAFE;
  --line:#E5EEF8;
  --brand:#0A7BDA;
  --brand-600:#0869B7;
  --brand-50:#F0F7FF;
  --shadow:0 8px 28px rgba(10,123,218,.08);
}
.nowrap{
  white-space: nowrap;
}
@media (max-width: 640px){
  .contact-bar{
    position: static;              /* чтобы на очень маленьких экранах не липла к низу */
    margin-top: var(--s-4);
  }

  .contact-bar .inner{
    width: 100%;
    justify-content: stretch;
  }

  .contact-bar .btn{
    flex: 1 1 0;                   /* три равные колонки */
    justify-content: center;
    text-align: center;
    white-space: nowrap;           /* текст в одну строку */
    padding-inline: 10px;          /* чуть меньше внутренних отступов */
    font-size: var(--fs-sm);       /* можно чуть уменьшить текст для мобилы */
  }
}
.section-budget .card{
  margin-bottom: var(--s-6);   /* можно попробовать --s-8, если хочешь ещё больше воздуха */
}
@media (max-width: 768px){
  .section-head{
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .section-head .btn{
    align-self: stretch;                /* кнопка под заголовком */
    justify-content: center;
    text-align: center;
  }
}
@media (max-width: 640px){
  .contact-bar{
    position: static;                    /* чтобы не прилипала снизу на very small screens */
    margin-top: var(--s-4);
    padding: 0;                          /* чтобы не съезжала */
  }

  .contact-bar .inner{
    width: 100%;
    flex-direction: column;              /* СТРОЧКА → СТОЛБИК */
    gap: 10px;
  }

  .contact-bar .btn{
    width: 100%;
    justify-content: center;
    text-align: center;
    white-space: nowrap;                 /* текст в одну строку */
    font-size: var(--fs-sm);
    padding-inline: 16px;
  }
}
@media (max-width: 640px){
  h1{ font-size: clamp(32px, 10vw, 40px); }
  h2{ font-size: clamp(22px, 7vw, 28px); }
}
/* МОБИЛЬНАЯ ВЕРСИЯ: кнопки контактов в столбик, без внешней капсулы */
@media (max-width: 767px){
  .contact-bar{
    position: static;                 /* убираем липкость */
    padding: 0 var(--container-pad);  /* как у контента */
    margin-top: var(--s-6);
  }

  .contact-bar .inner{
    width: 100%;
    background: transparent;          /* убираем белый ореол */
    border: none;
    box-shadow: none;
    padding: 0;
    display: flex;
    flex-direction: column;           /* КНОПКИ В СТОЛБИК */
    align-items: stretch;
    gap: 12px;
  }

  .contact-bar .btn{
    width: 100%;                      /* все кнопки одинаковой ширины */
    justify-content: center;          /* текст строго по центру */
    border-radius: var(--r-round);
  }
}
/* ===== МОБИЛЬНАЯ ВЁРСТКА КНОПОК (до 640px) ===== */
@media (max-width: 640px){

  /* Заголовок + кнопка в секциях (например, "Бюджет") */
  .section-head{
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-4);
  }

  .section-head .btn{
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  /* Контакт-бар с ботом / WhatsApp / Telegram */
  .contact-bar{
    position: static;                 /* убираем прилипающий овал */
    padding: 0 var(--container-pad);  /* как обычный контейнер */
    margin-top: var(--s-6);
    margin-bottom: var(--s-8);
  }

  .contact-bar .inner{
    width: 100%;
    box-shadow: none;                 /* убираем светящийся ореол */
    border-radius: var(--r-2);
    flex-direction: column;           /* в СТОЛБИК */
    align-items: stretch;
    gap: 10px;
  }

  .contact-bar .btn{
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}
/* ===================== */
/*   МОБИЛЬНАЯ ВЫРАВНИВКА КНОПОК  */
/* ===================== */

/* 1) Заголовок + кнопка (Бюджет, Топ-отели и т.п.) */
@media (max-width: 640px){

  /* заголовок и кнопка — в колонку, по сетке */
  .section-head{
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .section-head .btn{
    width: 100%;
    max-width: 100%;
    justify-content: center;
  }

  /* 2) Блок с тремя кнопками: Бот / WhatsApp / Telegram */
  .contact-bar{
    position: static;          /* без липкости на мобайле */
    padding: 0;
    margin-top: 24px;
  }

  .contact-bar .inner{
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    flex-direction: column;
    align-items: stretch;
    border-radius: var(--r-2);
  }

  .contact-bar .btn{
    width: 100%;
    max-width: 100%;
    justify-content: center;
  }
}

/* На всякий случай — запрещаем горизонтальный скролл,
   если где-то что-то на пиксель вылезет */
/*html, body{
  overflow-x: hidden;*
}*/
/* ===== МОБИЛЬНОЕ ВЫРАВНИВАНИЕ КНОПОК В СЕТКЕ ===== */
@media (max-width: 640px){

  /* Все кнопки внутри наших секций — на всю ширину контейнера */
  .section .btn{
    display: flex;              /* вместо inline-flex */
    justify-content: center;    /* текст по центру */
    text-align: center;
    width: 100%;
    box-sizing: border-box;     /* чтобы padding не вылезал за контейнер */
  }

  /* Блок с ботом / WhatsApp / Telegram */
  .contact-bar{
    position: static;
    padding: 0 var(--container-pad);
    margin-top: var(--s-6);
    margin-bottom: var(--s-8);
  }

  .contact-bar .inner{
    width: 100%;
    margin: 0;
    padding: 0;
    box-shadow: none;           /* убираем ореол-капсулу на мобиле */
    border-radius: var(--r-2);
    border: none;
    display: flex;
    flex-direction: column;     /* в столбик */
    align-items: stretch;
    gap: 10px;
  }

  .contact-bar .btn{
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}
/* ===== ГЛОБАЛЬНОЕ ВЫРАВНИВАНИЕ КНОПОК НА МОБИЛКЕ ===== */
@media (max-width: 640px){

  /* Наши кастомные .btn */
  .btn{
    display: flex;              /* вместо inline-flex */
    justify-content: center;    /* текст по центру */
    text-align: center;
    width: 100%;                /* во всю ширину контейнера */
    max-width: 100%;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
  }

  /* Кнопки Тильды (если где-то используются стандартные t-btn) */
  .t-btn{
    display: block;
    text-align: center;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
  }
}