/* ═══════════════════════════════════════════════════════════════
   MELS TRAVEL — SITE STYLES v4.1
   Единая палитра #3E8CC9 / #A1D9F2 · фон #F1F7FF · Golos Text
   Обновлено: 2026-07-18

   ГЛАВНОЕ ОТЛИЧИЕ ОТ v4.0:
   • Все наши стили ОГРАНИЧЕНЫ классом .container (наши блоки),
     чтобы не ломать системные блоки Tilda (футер, крошки, TourVisor).
     → чинит: наложение текста в футере, «Эмираты» заплывает, глюки поиска.
   • Шрифт больше НЕ форсится !important на классы Tilda.
     ⚠️ ВАЖНО: Golos Text задать в Настройки сайта → Шрифты (тогда блоки
        Tilda пересчитают раскладку правильно и текст не будет наезжать).
   • Логотип: подмена файла на всех версиях, включая мобильные.
═══════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────
   01. DESIGN TOKENS
──────────────────────────────────────────────── */
:root {
  color-scheme: light;

  --bg-main:#F1F7FF; --bg-card:#FFFFFF; --bg-dark:#0D1B2A; --bg-dark-card:#162232;

  --text-primary:#1E1E1E; --text-secondary:#3D4756; --text-muted:#5B6270;
  --text-on-dark:#FFFFFF; --text-on-dark-2:#C7D2E9;

  --brand:#3E8CC9; --brand-dark:#2A6FA3; --brand-darkest:#1A4F7A;
  --brand-on-dark:#A1D9F2; --brand-pale:#F1F7FF; --brand-light:#C4DEFF; --brand-text:#FFFFFF;
  --shadow-brand:0 6px 20px rgba(62,140,201,.28);

  --accent:#FF5A36; --accent-hover:#E84520; --accent-pale:#FFF0EC;
  --shadow-accent:0 6px 20px rgba(255,90,54,.22);

  --n-900:#1E1E1E; --n-800:#2D3340; --n-700:#3D4756; --n-600:#515762;
  --n-500:#5B6270; --n-400:#8C919C; --n-300:#B8BCC5; --n-200:#D5D8DF;
  --n-150:#DDE5F0; --n-100:#EBF1FA; --n-50:#F5F9FF;

  --success:#0F7A4A; --success-bg:#E6F5EF;
  --warning:#A86000; --warning-bg:#FEF2D6;
  --error:#C41A1A; --error-bg:#FDEAEA;
  --star:#E9A126; --verified:#0F7A4A;

  --font:'Golos Text',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --fs-xs:clamp(11px,.75vw,12px); --fs-sm:clamp(12px,.9vw,14px);
  --fs-base:clamp(14px,1vw,16px); --fs-lg:clamp(16px,1.25vw,20px);
  --fs-xl:clamp(20px,1.9vw,26px); --fs-2xl:clamp(24px,3vw,34px);
  --fs-3xl:clamp(30px,4.6vw,48px); --fs-4xl:clamp(36px,6vw,56px);
  --lh-tight:1.1; --lh-snug:1.25; --lh:1.6; --lh-loose:1.65;

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px;
  --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px; --s-20:80px;
  --r-xs:3px; --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-2xl:24px; --r-full:9999px;
  --shadow-sm:0 1px 3px rgba(30,60,120,.06);
  --shadow-md:0 4px 12px rgba(30,60,120,.09);
  --shadow-lg:0 8px 24px rgba(30,60,120,.11);
  --container-max:1200px; --container-pad:clamp(16px,3vw,32px);
}

/* ────────────────────────────────────────────────
   02. ШРИФТ — только мягко, без !important, без классов Tilda
   Golos Text ОБЯЗАТЕЛЬНО задать в Настройки сайта → Шрифты!
──────────────────────────────────────────────── */
body { font-family: var(--font); }          /* наследуется в наши блоки, НЕ ломает Tilda */
.container, .container * { font-family: var(--font); }

/* ────────────────────────────────────────────────
   03. БАЗА — фон/цвет страницы (безопасно глобально)
──────────────────────────────────────────────── */
html { color:var(--text-primary); background:var(--bg-main); scroll-behavior:smooth; }
body { margin:0; padding-bottom:0 !important; background:var(--bg-main) !important;
  color:var(--text-primary); font-size:15px; line-height:var(--lh); -webkit-font-smoothing:antialiased; }

/* Резеты — ТОЛЬКО внутри наших блоков, чтобы не трогать Zero-блоки Tilda */
.container, .container *, .container *::before, .container *::after { box-sizing:border-box; }
.container img, .container svg, .container video { max-width:100%; }
.container img { display:block; }
.container a { color:inherit; }

.container { max-width:var(--container-max); margin:0 auto; padding:0 var(--container-pad); }
.section { padding:var(--s-12) 0; }
.section.soft { background:transparent; }   /* единый фон Tilda, без разнотона */
.container .muted { color:var(--text-secondary); }
.nowrap { white-space:nowrap; }

/* ────────────────────────────────────────────────
   04. ТИПОГРАФИКА — ТОЛЬКО в .container (не течёт в Tilda/TourVisor)
──────────────────────────────────────────────── */
.container h1,.container h2,.container h3 {
  margin:0 0 var(--s-4); color:var(--text-primary); letter-spacing:-.01em; line-height:var(--lh-tight); }
.container h1 { font-size:var(--fs-4xl); font-weight:900; }
.container h2 { font-size:var(--fs-3xl); font-weight:800; }
.container h3 { font-size:var(--fs-2xl); font-weight:700; }
.container h4 { margin:0 0 var(--s-2); font-size:var(--fs-lg); font-weight:700; line-height:var(--lh-snug); color:var(--text-primary); }
.container p,.container li { font-size:var(--fs-base); line-height:var(--lh-loose); }
.container p { margin:0 0 var(--s-4); }
.container .eyebrow { display:inline-block; margin-bottom:var(--s-3); font-size:var(--fs-xs);
  text-transform:uppercase; letter-spacing:.14em; color:var(--brand-dark); font-weight:800; }

/* ────────────────────────────────────────────────
   05. КНОПКИ (по классам — безопасно)
──────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:0 22px; border:1.5px solid transparent; border-radius:var(--r-md);
  font-family:var(--font); font-size:14px; font-weight:700; line-height:1; letter-spacing:.1px;
  text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:background-color .14s, border-color .14s, transform .1s, box-shadow .14s; }
.btn:focus-visible { outline:3px solid rgba(62,140,201,.40); outline-offset:3px; }
.btn:active { transform:scale(.97); }

.btn.primary,.btn-brand,a.btn.primary,a.btn-brand {
  background:var(--brand); color:var(--brand-text) !important; border-color:var(--brand); }
.btn.primary:hover,.btn-brand:hover,a.btn.primary:hover,a.btn-brand:hover {
  background:var(--brand-dark); border-color:var(--brand-dark); transform:translateY(-1px); box-shadow:var(--shadow-brand); }

.btn.accent,.btn-accent,a.btn.accent,a.btn-accent {
  background:var(--accent); color:#fff !important; border-color:var(--accent); }
.btn.accent:hover,.btn-accent:hover { background:var(--accent-hover); border-color:var(--accent-hover); }

.btn.ghost,.btn-ghost,a.btn.ghost,a.btn-ghost {
  background:transparent; color:var(--text-secondary) !important; border-color:var(--n-200); }
.btn.ghost:hover,.btn-ghost:hover { background:var(--n-100); color:var(--text-primary) !important; border-color:var(--n-300); }

.btn.outline,.btn-outline-brand,a.btn.outline,a.btn-outline-brand {
  background:transparent; color:var(--brand-dark) !important; border-color:var(--brand); }
.btn.outline:hover,.btn-outline-brand:hover { background:var(--brand-pale); color:var(--brand-darkest) !important; }

.btn.secondary,.btn-secondary,a.btn.secondary,a.btn-secondary {
  background:var(--brand-pale); color:var(--brand-darkest) !important; border-color:var(--brand-light); }
.btn.secondary:hover,.btn-secondary:hover { background:var(--n-100); }

.btn.dark,.btn-dark,a.btn.dark,a.btn-dark {
  background:var(--text-primary); color:#fff !important; border-color:var(--text-primary); }
.btn.dark:hover,.btn-dark:hover { background:var(--n-800); border-color:var(--n-800); }

.btn-pill { border-radius:var(--r-full) !important; }
.btn-xl { min-height:48px; padding:0 28px; border-radius:var(--r-lg); font-size:15px; }
.btn-lg { min-height:44px; padding:0 22px; border-radius:var(--r-md); font-size:14px; }
.btn-md { min-height:38px; padding:0 17px; border-radius:var(--r-md); font-size:13px; }
.btn-sm { min-height:32px; padding:0 13px; border-radius:var(--r-sm); font-size:12px; }

.ButtonOtp { width:275px; height:56px; border:none; border-radius:var(--r-full);
  background:var(--brand); color:var(--brand-text); font-family:var(--font); font-size:15px;
  font-weight:800; text-transform:uppercase; cursor:pointer; box-shadow:var(--shadow-brand);
  transition:background-color .14s, transform .1s; }
.ButtonOtp:hover { background:var(--brand-dark); }
.ButtonOtp:active { transform:scale(.97); }

/* ────────────────────────────────────────────────
   06. ТЁМНЫЕ СЕКЦИИ — синий → #A1D9F2
──────────────────────────────────────────────── */
.card-dark, .section-dark, .bg-dark { background:var(--bg-dark); color:var(--text-on-dark); }
.card-dark .accent, .card-dark a, .card-dark .highlight,
.section-dark .accent, .section-dark a, .section-dark .highlight,
.bg-dark a, .bg-dark .accent, .bg-dark .highlight { color:var(--brand-on-dark) !important; }
.card-dark .btn.primary, .section-dark .btn.primary, .bg-dark .btn.primary {
  background:var(--brand-on-dark) !important; color:var(--bg-dark) !important; border-color:var(--brand-on-dark) !important; }

/* ────────────────────────────────────────────────
   07. КАРТОЧКИ / СЕТКА (по классам)
──────────────────────────────────────────────── */
.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); } }
.card { background:var(--bg-card); border:1px solid var(--n-150); border-radius:var(--r-xl);
  padding:clamp(16px,2.4vw,24px); box-shadow:var(--shadow-sm); }
.card-dark { border-radius:var(--r-xl); padding:clamp(18px,2.6vw,28px); }
.thumb { position:relative; overflow:hidden; border-radius:var(--r-xl); aspect-ratio:3/2;
  background:linear-gradient(135deg,var(--brand-pale),#fff); border:1px dashed var(--n-150); }
.thumb img { width:100%; height:100%; object-fit:cover; border-radius:inherit; }

/* ────────────────────────────────────────────────
   08. ПИЛЮЛИ / БЕЙДЖИ / СПИСКИ (по классам)
──────────────────────────────────────────────── */
.pills { display:flex; flex-wrap:wrap; gap:10px; }
.pill,.badge { display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--r-full); font-weight:700; line-height:1.2; }
.pill { padding:8px 14px; font-size:var(--fs-sm); background:#FFF;
  border:1px solid var(--brand-light); color:var(--brand-darkest); }
:not(.phone) > .badge { gap:4px; padding:3px 9px; font-size:11px; background:#FFF;
  border:1px solid var(--brand-light); color:var(--brand-darkest); }
.badge-hot,.badge-accent { background:var(--accent); color:#fff; border:none; }
.badge-success { background:var(--success-bg); color:var(--success); border:none; }
.badge-verified { background:var(--success-bg); color:var(--verified); border:none; }
.stars { color:var(--star); }
.container .list { display:grid; gap:10px; margin:0; padding:0; }
.container .list li { list-style:none; position:relative; padding-left:26px; }
.container .list li::before { content:""; position:absolute; left:0; top:.6em; width:8px; height:8px;
  border-radius:50%; background:var(--brand); }

/* ────────────────────────────────────────────────
   09. ФОРМЫ — ТОЛЬКО в наших блоках (не трогаем формы Tilda/TourVisor)
──────────────────────────────────────────────── */
.container input,.container select,.container textarea {
  background:#FFF; border:1.5px solid var(--n-200); border-radius:var(--r-md);
  color:var(--text-primary); font-family:var(--font); }
.container input:focus,.container select:focus,.container textarea:focus {
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(62,140,201,.18); }

/* ────────────────────────────────────────────────
   10. FAQ — в наших блоках
──────────────────────────────────────────────── */
.container details { border:1px solid var(--n-150); border-radius:var(--r-lg); padding:14px 16px; background:var(--bg-card); }
.container details + details { margin-top:12px; }
.container details[open] { box-shadow:var(--shadow-md); }
.container summary { cursor:pointer; font-weight:700; font-size:var(--fs-base); list-style:none;
  display:flex; align-items:center; outline:none; }
.container summary::-webkit-details-marker { display:none; }
.container summary::marker { content:""; }
.container summary::before { content:"▾"; margin-right:8px; font-size:18px; line-height:1;
  color:var(--brand-dark); transform:rotate(-90deg); transform-origin:center; transition:transform .28s ease; }
.container details[open] summary::before { transform:rotate(0deg); }
.container .faq-content { margin-top:8px; overflow:hidden; max-height:0; opacity:0; transform:translateY(-4px);
  transition:max-height .28s ease, opacity .28s ease, transform .28s ease; }
.container details[open] .faq-content { max-height:420px; opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){ .container .faq-content{ transition:none !important; } }

/* ────────────────────────────────────────────────
   11. SECTION HEAD / CONTACT BAR (по классам)
──────────────────────────────────────────────── */
.site-section-head,.section-head,.section .section-head {
  display:flex; justify-content:space-between; align-items:flex-end; gap:12px; margin-bottom:var(--s-6); }
.site-section-head p,.section-head p,.section-head .muted { margin:0; color:var(--text-secondary); }
.contact-bar { position:sticky; bottom:12px; display:flex; justify-content:center; padding:0 var(--container-pad); z-index:50; }
body.page-app .contact-bar { display:none !important; }
.contact-bar .inner { background:var(--bg-card); border:1px solid var(--n-150); border-radius:var(--r-full);
  padding:8px; display:flex; justify-content:center; align-items:center; gap:8px; box-shadow:var(--shadow-md); }
.contact-bar .btn { background:transparent; border-color:var(--brand); color:var(--brand-dark) !important; box-shadow:none; }
.contact-bar .btn.primary { background:var(--brand); color:var(--brand-text) !important; box-shadow:var(--shadow-brand); }
.contact-bar .inner .btn:hover { background:var(--brand-dark); color:var(--brand-text) !important; }

/* ────────────────────────────────────────────────
   12. TILDA КНОПКИ — только hover-анимация (безопасно)
──────────────────────────────────────────────── */
.t-btn.t-btnflex.t-btnflex_type_button2 { transition:transform .2s ease, box-shadow .2s ease !important; }
.t-btn.t-btnflex.t-btnflex_type_button2:hover { transform:translateY(-2px) !important; box-shadow:0 10px 24px rgba(62,140,201,.28) !important; }
.t-btn.t-btnflex.t-btnflex_type_button2:active { transform:translateY(0) scale(.97) !important; }

/* ────────────────────────────────────────────────
   13. ШАПКА (t228) — только ЦВЕТА (не влияет на раскладку)
──────────────────────────────────────────────── */
body.header-light .t228__centerside .t-menu__link-item,
body.header-light .t228__centerside .t-menu__link-item span { color:#1E1E1E !important; }
body.header-dark .t228:not(.t228__positionfixed) .t228__centerside .t-menu__link-item,
body.header-dark .t228:not(.t228__positionfixed) .t228__centerside .t-menu__link-item span { color:#FFFFFF !important; }
.t228__positionfixed .t-menu__link-item, .t228__positionfixed .t-menu__link-item span,
.t228[style*="background-color: rgb(241, 247, 255)"] .t-menu__link-item,
.t228[style*="background-color: rgb(241, 247, 255)"] .t-menu__link-item span,
.t228[style*="background-color: rgb(255, 255, 255)"] .t-menu__link-item,
.t228[style*="background-color: rgb(255, 255, 255)"] .t-menu__link-item span { color:#1E1E1E !important; }
.t228__centerside .t-menu__link-item:hover, .t228__centerside .t-menu__link-item:hover span,
.t228__centerside .t-menu__link-item.t-active, .t228__centerside .t-menu__link-item.t-active span { color:#3E8CC9 !important; }
.t-menusub,.t-menusub *,.t-menusub__menu,.t-menusub__menu *,.t-menusub__link-item,.t-menusub__link-item span { color:#1E1E1E !important; }
.t-menusub__link-item:hover,.t-menusub__link-item:hover span { color:#3E8CC9 !important; }
.t228 .t-btn,.t228 .t-btn *,.t228 .t-btnflex,.t228 .t-btnflex *,.t228 .t-btnflex__text { color:#FFFFFF !important; }
body.header-light .t228__rightcontainer, body.header-light .t228__rightcontainer a,
body.header-light .t228__rightcontainer div, body.header-light .t228__rightcontainer span { color:#1E1E1E !important; }
body.header-dark .t228:not(.t228__positionfixed) .t228__rightcontainer,
body.header-dark .t228:not(.t228__positionfixed) .t228__rightcontainer a,
body.header-dark .t228:not(.t228__positionfixed) .t228__rightcontainer div,
body.header-dark .t228:not(.t228__positionfixed) .t228__rightcontainer span { color:#FFFFFF !important; }
.t228__positionfixed .t228__rightcontainer, .t228__positionfixed .t228__rightcontainer a,
.t228__positionfixed .t228__rightcontainer div, .t228__positionfixed .t228__rightcontainer span { color:#1E1E1E !important; }
.t228 .t228__rightcontainer .t-btn, .t228 .t228__rightcontainer .t-btn *,
.t228 .t228__rightcontainer .t-btnflex, .t228 .t228__rightcontainer .t-btnflex *,
.t228 .t228__rightcontainer .t-btnflex__text,
.t228.t228__positionfixed .t228__rightcontainer .t-btn,
.t228.t228__positionfixed .t228__rightcontainer .t-btn *,
.t228.t228__positionfixed .t228__rightcontainer .t-btnflex,
.t228.t228__positionfixed .t228__rightcontainer .t-btnflex *,
.t228.t228__positionfixed .t228__rightcontainer .t-btnflex__text { color:#FFFFFF !important; }
.t228 .t-menusub,.t228 .t-menusub *,.t228 .t-menusub__menu,.t228 .t-menusub__menu *,
.t228 .t-menusub__link-item,.t228 .t-menusub__link-item span { color:#1E1E1E !important; }
.t228 .t-menusub__link-item:hover,.t228 .t-menusub__link-item:hover span { color:#3E8CC9 !important; }

/* ────────────────────────────────────────────────
   14. ЛОГОТИП — белый на тёмном, тёмный на светлом. ВСЕ версии (вкл. мобильные)
   Работает вместе с флаг-скриптом на странице (body.header-dark / header-light)
──────────────────────────────────────────────── */

.t280__logo__img {
  content: url("https://static.tildacdn.com/tild3337-3231-4637-a533-343738383832/vector.svg") !important;
}

/* Dark hero: white lettering. */
body.header-dark .t228__imglogo,
body.header-dark .t228__imglogomobile,
body.header-dark .t280__logo__img {
  content: url("https://static.tildacdn.com/tild3337-3231-4637-a533-343738383832/vector.svg") !important;
}

/* Light hero or scrolled header: dark lettering. */
body.header-light .t228__imglogo,
body.header-light .t228__imglogomobile,
body.header-light .t280__logo__img {
  content: url("https://static.tildacdn.com/tild6332-6435-4630-b335-656230636239/logo.svg") !important;
}


/* ────────────────────────────────────────────────
   15. МОБИЛЬНОЕ МЕНЮ (#rec350163849)
──────────────────────────────────────────────── */
@media(max-width:980px){
  html,body { overflow-x:hidden !important; }
  #rec350163849 .t280__menu__wrapper, #rec350163849 .t280__menu__wrapper_2, #rec350163849 .t280__menu__container {
    left:0 !important; right:0 !important; width:100vw !important; max-width:100vw !important;
    margin:0 !important; padding:0 !important; border-radius:0 !important; transform:none !important;
    overflow-x:hidden !important; visibility:visible !important; }
  #rec350163849 .t280__menu__container {
    background:linear-gradient(rgba(13,27,42,.42),rgba(13,27,42,.42)),
      url("https://static.tildacdn.com/tild3463-6633-4330-a435-636366626632/__.jpg") center center / cover no-repeat !important; }
  #rec350163849 .t280__menu__bg { background:transparent !important; }
  #rec350163849 .t280__menu__container a, #rec350163849 .t280__menu__container a span,
  #rec350163849 .t-menu__link-item, #rec350163849 .t-menu__link-item span {
    color:#FFFFFF !important; font-size:16px !important; font-weight:700 !important; line-height:1.1 !important;
    text-align:left !important; visibility:visible !important; opacity:1 !important; }
  #rec350163849 .t280__menu__container a, #rec350163849 .t-menu__link-item {
    display:block !important; width:100% !important; padding:7px 0 7px 32px !important; margin:0 !important;
    border:none !important; text-decoration:none !important; }
  #rec350163849 .t-menusub, #rec350163849 .t-menusub__menu { background:transparent !important; border:none !important; box-shadow:none !important; }
  #rec350163849 .t-menusub__link-item, #rec350163849 .t-menusub__link-item span {
    color:#FFFFFF !important; font-size:15px !important; text-align:left !important; }
  #rec350163849 .t-menusub__link-item { padding:5px 0 5px 48px !important; }
  #rec350163849 .t280__contacts *, #rec350163849 .t280__bottom * { text-align:left !important; }
  #rec350163849 .t280__socials, #rec350163849 .t-sociallinks, #rec350163849 .t-sociallinks__wrapper {
    justify-content:center !important; text-align:center !important; padding-left:0 !important; padding-right:0 !important;
    margin-left:auto !important; margin-right:auto !important; box-sizing:border-box !important; left:auto !important; right:auto !important; }
  #rec350163849 .t280__descr.t280__bottom__item {
    display:block !important; position:static !important; left:auto !important; right:auto !important;
    width:auto !important; max-width:none !important; margin:0 !important; padding-left:32px !important;
    text-align:left !important; transform:none !important; }
}

/* ────────────────────────────────────────────────
   16. МОБИЛЬНЫЕ ПРАВКИ (наши блоки)
──────────────────────────────────────────────── */
@media(max-width:767px){
  body { padding-bottom:0 !important; }
  .container h1 { font-size:clamp(32px,10vw,40px); }
  .container h2 { font-size:clamp(22px,7vw,28px); }
  .section { padding:var(--s-10) 0; }
  .site-section-head,.section-head { flex-direction:column; align-items:stretch; gap:var(--s-4); }
  .contact-bar { position:static; padding:0 var(--container-pad); margin:var(--s-6) 0 var(--s-8); }
  .contact-bar .inner { width:100%; padding:0; background:transparent; border:none; box-shadow:none;
    border-radius:var(--r-xl); flex-direction:column; align-items:stretch; gap:12px; }
  .contact-bar .btn { width:100%; justify-content:center; padding-inline:16px; font-size:var(--fs-sm); }
  .ButtonOtp { width:100%; max-width:275px; }
}
@media(prefers-reduced-motion:reduce){
  .btn,.t-btn.t-btnflex.t-btnflex_type_button2 { transition:none !important; }
  .btn:hover,.btn:active { transform:none !important; }
}

/* ────────────────────────────────────────────────
   17. TOURVISOR — стеклянная форма (цвета + фон, без клипа результатов)
──────────────────────────────────────────────── */
.TVMainForm,.TVFilterForm,.TVFormTypes {
  background:rgba(241,247,255,.88) !important; backdrop-filter:blur(16px) !important;
  -webkit-backdrop-filter:blur(16px) !important; box-shadow:none !important; }
.TVMainForm { border-top:1px solid rgba(62,140,201,.20) !important; }
.TVFilterForm { border-top:1px solid rgba(62,140,201,.20) !important; }
.TVMainForm *,.TVFilterForm *,.TVFormTypes * { color:#1E1E1E !important; }
.TVButtonColor,.TVSearchButton,.TVButtonHover {
  background-color:#3E8CC9 !important; background-image:none !important; color:#FFFFFF !important; font-weight:700 !important; }
.TVButtonColor:hover,.TVSearchButton:hover { background-color:#2A6FA3 !important; }
.TVButtonColor svg,.TVSearchButton svg,.TVButtonColor svg path,.TVSearchButton svg path {
  fill:#FFFFFF !important; stroke:#FFFFFF !important; }
  
  /* ТЕГИ — единый стиль на всех страницах (эталон с главной) */
.t976__menu-link {
  border-radius: 30px !important;
  border: 1px solid #0D1B2A !important;
  background-color: #F0F7FF !important;
  color: #1E1E1E !important;
  padding: 8px 16px !important;
  font-family: 'Golos Text', sans-serif !important;
  font-weight: 500 !important;
  transition: background-color .15s, border-color .15s, color .15s !important;
}
.t976__menu-link:hover {
  background-color: #3E8CC9 !important;
  border-color: #3E8CC9 !important;
  color: #FFFFFF !important;
}

/*
 * Дополнение к MELS TRAVEL — SITE STYLES v4.1.
 * Добавьте в конец общего CSS либо подключите отдельным файлом после него.
 * Предыдущие стили .mels-why замените этим дополнением, если добавляли их.
 * .container, .section, .grid, .card, .btn и переменные берём из общего CSS.
 * Все правила ниже действуют только внутри блока .mels-why.
 */

.mels-why .mels-why__controls { display: none; }

/* Блок размещайте в HTML-блоке Tilda на полную ширину.
 * В настройках этого HTML-блока разрешите показ на всех экранах.
 * Дочерний CSS не может показать содержимое скрытого родителя.
 * Строго ниже 1180 px. От 1180 px остаётся исходная сетка сайта.
 */
@media not all and (min-width: 1180px) {
  .mels-why.is-ready > .mels-why__container {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: 10px;
  }

  .mels-why.is-ready .site-section-head > div,
  .mels-why.is-ready .mels-why__slider {
    min-width: 0;
    max-width: 100%;
  }

  .mels-why.is-ready .mels-why__viewport {
    width: 100%;
    overflow: hidden;
    border-radius: var(--r-xl);
    touch-action: pan-y pinch-zoom;
  }

  .mels-why.is-ready .mels-why__track {
    display: flex;
    gap: 0;
    width: 100%;
    min-width: 0;
    transition: transform .5s cubic-bezier(.4, 0, .2, 1);
    cursor: grab;
  }

  .mels-why.is-ready .mels-why__track.is-dragging {
    transition: none;
    cursor: grabbing;
    user-select: none;
  }

  /* Фон, рамка, тень, отступы и типографика остаются от общей .card. */
  .mels-why.is-ready .mels-why__track > .card {
    flex: 0 0 100%;
    min-width: 0;
    max-width: 100%;
  }

  /* Навигация после текста, без абсолютного позиционирования. */
  .mels-why.is-ready .mels-why__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-3);
    margin-top: var(--s-3);
  }

  /* Базовая раскладка, фокус и нажатие наследуются от .btn. */
  .mels-why .mels-why__arrow {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    padding: 0;
    border-color: var(--n-150);
    border-radius: var(--r-full);
    background: var(--bg-card);
    color: var(--text-primary);
    touch-action: manipulation;
  }

  .mels-why .mels-why__arrow svg { width: 20px; height: 20px; }

  .mels-why .mels-why__arrow:hover {
    border-color: var(--brand-light);
    box-shadow: var(--shadow-md);
  }

  .mels-why .mels-why__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
  }

  /* Видимые точки небольшие; область нажатия увеличена. */
  .mels-why .mels-why__dot {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 28px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    cursor: pointer;
    touch-action: manipulation;
    transition: width .3s ease;
  }

  .mels-why .mels-why__dot::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: var(--r-full);
    background: var(--n-200);
    transition: width .3s ease, background-color .3s ease;
  }

  .mels-why .mels-why__dot:hover::before { background: var(--n-400); }
  .mels-why .mels-why__dot[aria-current="true"] { width: 40px; }

  .mels-why .mels-why__dot[aria-current="true"]::before {
    width: 28px;
    background: var(--brand);
  }

  .mels-why .mels-why__dot:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
  }
}

@media (max-width: 480px) {
  .mels-why.is-ready .mels-why__controls { gap: var(--s-2); }
  .mels-why .mels-why__dot { width: 24px; }
  .mels-why .mels-why__dot[aria-current="true"] { width: 32px; }
  .mels-why .mels-why__dot[aria-current="true"]::before { width: 24px; }
}

/* У .btn сокращение анимации уже предусмотрено в общем CSS. */
@media (prefers-reduced-motion: reduce) {
  .mels-why.is-ready .mels-why__track,
  .mels-why .mels-why__dot,
  .mels-why .mels-why__dot::before { transition: none; }
}

/*
 * Курорты Черногории: дополнение к общим стилям MELS TRAVEL v4.1.
 * Заменяет предыдущий montenegro-resorts-slider.css целиком.
 * Подключить после общего CSS. Все правила ограничены .mels-resorts.
 * От 1180 px — 3 колонки; ниже — слайдер после запуска JavaScript.
 */

.mels-resorts .mels-resorts__layout,
.mels-resorts .site-section-head > div,
.mels-resorts .mels-resorts__container { min-width: 0; }

.mels-resorts .mels-resorts__track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  min-width: 0;
}

/* Карточка как в образце: белая, фото сверху, текст под ним. */
.mels-resorts .mels-resorts__slide {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 410px;
  padding: 20px;
  border-radius: 20px;
  text-decoration: none;
  color: var(--text-primary);
  box-shadow: none;
  -webkit-user-drag: none;
}

.mels-resorts .mels-resorts__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 332 / 230;
  object-fit: cover;
  border-radius: 20px;
  flex-shrink: 0;
  pointer-events: none;
}

.mels-resorts .mels-resorts__content { padding-top: 10px; }

/* Локальная типографика из исходных карточек Zero Block: 20 / 18 px. */
.mels-resorts .mels-resorts__title {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0;
  color: var(--text-primary);
}

.mels-resorts .mels-resorts__description {
  margin: 0;
  font-size: 18px;
  line-height: 1.56;
  color: var(--text-primary);
}

.mels-resorts .mels-resorts__button,
.mels-resorts .mels-resorts__dots { display: none; }

.mels-resorts .mels-resorts__slide:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: -4px;
}

@media not all and (min-width: 1180px) {
  .mels-resorts > .mels-resorts__layout {
    width: 100%;
    max-width: none;
    padding-inline: 10px;
  }

  /* Если JS недоступен, карточки остаются читаемым списком. */
  .mels-resorts .mels-resorts__track { grid-template-columns: 1fr; }

  .mels-resorts.is-ready .mels-resorts__container {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 20px;
    background: var(--bg-dark);
    touch-action: pan-y pinch-zoom;
  }

  .mels-resorts.is-ready .mels-resorts__track {
    display: flex;
    gap: 0;
    transition: transform .5s cubic-bezier(.4, 0, .2, 1);
  }

  .mels-resorts.is-ready .mels-resorts__track.is-dragging {
    transition: none;
    cursor: grabbing;
    user-select: none;
  }

  /* Сохраняем фото-слайдер на узких экранах. */
  .mels-resorts.is-ready .mels-resorts__slide {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    min-height: 260px;
    aspect-ratio: 16 / 10;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--bg-dark);
    color: var(--text-on-dark);
  }

  .mels-resorts.is-ready .mels-resorts__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
  }

  .mels-resorts.is-ready .mels-resorts__content {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.3) 60%, rgba(0,0,0,.6) 100%);
  }

  .mels-resorts.is-ready .mels-resorts__title {
    margin-bottom: 12px;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-on-dark);
  }

  .mels-resorts.is-ready .mels-resorts__description {
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-on-dark);
    opacity: .95;
  }

  .mels-resorts.is-ready .mels-resorts__button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.8);
    color: var(--bg-dark);
    cursor: pointer;
    touch-action: manipulation;
    transition: background .3s ease, box-shadow .3s ease, transform .3s ease;
  }

  .mels-resorts .mels-resorts__button--prev { left: 20px; }
  .mels-resorts .mels-resorts__button--next { right: 20px; }
  .mels-resorts .mels-resorts__button svg { width: 24px; height: 24px; }
  .mels-resorts .mels-resorts__button:hover { background: #fff; box-shadow: var(--shadow-lg); }
  .mels-resorts .mels-resorts__button:active { transform: translateY(-50%) scale(.95); }

  .mels-resorts.is-ready .mels-resorts__dots {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 12px;
  }

  .mels-resorts .mels-resorts__dot {
    display: grid;
    place-items: center;
    width: 28px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    cursor: pointer;
    touch-action: manipulation;
  }

  .mels-resorts .mels-resorts__dot::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--n-200);
    transition: width .3s ease, background .3s ease, border-radius .3s ease;
  }

  .mels-resorts .mels-resorts__dot:hover::before { background: var(--n-400); }
  .mels-resorts .mels-resorts__dot[aria-current="true"]::before {
    width: 28px;
    border-radius: 5px;
    background: var(--brand);
  }

  .mels-resorts button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
}

@media (max-width: 960px) {
  .mels-resorts.is-ready .mels-resorts__content { padding: 32px 24px; }
  .mels-resorts.is-ready .mels-resorts__title { font-size: 24px; }
  .mels-resorts.is-ready .mels-resorts__description { font-size: 15px; }
  .mels-resorts.is-ready .mels-resorts__button { width: 44px; height: 44px; }
  .mels-resorts .mels-resorts__button svg { width: 20px; height: 20px; }
}

@media (max-width: 640px) {
  .mels-resorts.is-ready .mels-resorts__slide { aspect-ratio: 16 / 12; }
  .mels-resorts.is-ready .mels-resorts__content { padding: 24px 16px; }
  .mels-resorts.is-ready .mels-resorts__title { font-size: 20px; }
  .mels-resorts.is-ready .mels-resorts__description { font-size: 14px; }
  .mels-resorts .mels-resorts__button--prev { left: 12px; }
  .mels-resorts .mels-resorts__button--next { right: 12px; }
  .mels-resorts .mels-resorts__dot::before { width: 8px; height: 8px; }
  .mels-resorts .mels-resorts__dot[aria-current="true"]::before { width: 24px; }
}

@media (max-width: 480px) {
  .mels-resorts.is-ready .mels-resorts__slide { aspect-ratio: 16 / 14; }
  .mels-resorts.is-ready .mels-resorts__content { padding: 20px 12px; }
  .mels-resorts.is-ready .mels-resorts__title { font-size: 18px; margin-bottom: 8px; }
  .mels-resorts .mels-resorts__button--prev { left: 8px; }
  .mels-resorts .mels-resorts__button--next { right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .mels-resorts.is-ready .mels-resorts__track,
  .mels-resorts.is-ready .mels-resorts__button,
  .mels-resorts .mels-resorts__dot::before { transition: none; }
}

/* Исправление подтверждённой обёртки Zero Block на странице Черногории.
 * Только блок #rec4163494901, только ширина менее 1180 px.
 * HTML-элемент переводится из таблицы в обычный поток документа.
 * !important нужен для размеров, которые Tilda записывает inline.
 */
@media not all and (min-width: 1180px) {
  #rec4163494901 .t396,
  #rec4163494901 .t396__artboard {
    height: auto !important;
    min-height: 0 !important;
  }

  #rec4163494901 .t396__carrier,
  #rec4163494901 .t396__filter {
    height: 100% !important;
  }

  #rec4163494901 .tn-elem__41634949011790184775173 {
    display: block !important;
    position: relative !important;
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
  }

  #rec4163494901 .tn-elem__41634949011790184775173 > .tn-atom__html {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
  }

  #rec4163494901 .mels-resorts,
  #rec4163494901 .mels-resorts__layout,
  #rec4163494901 .mels-resorts__container {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
}