/* General resets */
:root{
  --bg:#F7F2E8;               /* Yuzu Warm Sand */
  --surface:#fff;             /* Yuzu Cloud White */
  --text:#0B1F44;              /* Yuzu Navy */
  --muted:#6b7280;            /* gray-500 */
  --muted-2:#94a3b8;          /* slate-400 */
  --border:#e7e2d4;           /* warm-tinted neutral */
  --primary:#0B1F44;           /* Yuzu Navy */
  --primary-700:#081530;      /* Yuzu Navy, darker */
  --yellow:#F7C83E;           /* Yuzu Yellow */
  --yellow-dark:#e9b32c;      /* Yuzu Yellow, darker (hover) */
  --sky-mist:#DCEBFA;         /* Yuzu supporting */
  --warm-sand:#F7F2E8;        /* Yuzu supporting */
  --soft-gray:#EEF2F7;        /* Yuzu supporting */
  --chip:#0B1F44cc;
  --shadow-sm:0 1px 2px rgba(2,6,23,.07);
  --shadow-md:0 10px 18px rgba(2,6,23,.10);
  --radius:16px;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {text-decoration: none;}

html, body {
  height: 100%;
}

main {
  flex: 1;
}

body {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.6;
  background-color: #fff;
  display: flex;
  flex-direction: column;
}

h1, h2, h3, h4, h5, h6 {
  font-family: Manrope, Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

/* header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.container {
  width: 90%;
  max-width: 1500px;
  margin: 0 auto;
}

nav {
  display: flex;
}

nav a {
  margin-right: 20px;
  text-decoration: none;
  color: #333;
}

.logo {
  font-size: 24px;
  font-weight: bold;
}

.start-btn {
  background-color: #00b0c9;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-size: 18px;
  width: 140px;
} */

/* ====================== Layout ====================== */
.container{ min-width:min(1200px,100%); margin:0 auto; padding:0 20px }

/* ====================== Header ====================== */
.site-header{
  position:sticky; top:0; z-index:40;
  background:rgba(246,248,251,.9);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--border)
}
.site-header .bar{ height:64px; display:flex; align-items:center; justify-content:space-between; gap:12px }

.brand{ display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.3px; text-decoration:none }
.brand-logo{ height:44px; width:auto; display:block; }
#open-filters { background:var(--yellow); border-color:var(--yellow); color:var(--primary); width: 100px; display: block; }
#open-filters svg { color:var(--primary); }
#open-filters:hover { background:var(--yellow-dark); border-color:var(--yellow-dark); }

.actions{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px }

/* ---------- Actions menu (hamburger) — same collapsed-menu chrome on
   desktop and mobile; there is no separate "flat inline buttons" layout
   anymore, so this isn't gated behind a breakpoint. ---------- */
.menu-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:12px; flex:0 0 auto;
  border:1px solid var(--border); background:#fff; color:var(--text);
  cursor:pointer; box-shadow:var(--shadow-sm);
}
.menu-toggle svg{ width:18px; height:18px; }
.menu-toggle:hover{ background:var(--soft-gray); }

.actions-menu{
  display:none;
  position:absolute; top:64px; right:20px; margin-top:8px;
  width:min(360px, calc(100vw - 40px));
  flex-direction:column; align-items:stretch; gap:8px; padding:14px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow-md);
  z-index:50;
}
.actions-menu.is-open{ display:flex; }

/* ====================== Buttons ====================== */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  height:36px; padding:0 12px; border-radius:12px;
  border:1px solid var(--border); background:#fff;
  font-weight:600; font-size:14px; cursor:pointer;
  box-shadow:var(--shadow-sm);
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{ transform:translateY(-1px); box-shadow:var(--shadow-md) }
.btn svg{ width:16px; height:16px; color:var(--text) }
.btn--ghost{ background:#fff }
.btn--primary{ background:var(--yellow); border-color:var(--yellow); color:var(--primary) }
.btn--primary:hover{ background:var(--yellow-dark); border-color:var(--yellow-dark) }

/* Стили для модального окна */
.modal-manual {
  display: none; /* Скрыто по умолчанию */
  position: fixed;
  z-index: 1000; /* Поверх всего */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); /* Полупрозрачный черный фон */
}

/* Контент внутри модального окна */
.modal-manual-content {
  position: relative;
  margin: 5% auto;
  padding: 0;
  width: 80%;
  max-width: 860px;
  height: 60%;
  min-height: 200px;
  max-height: 560px;
}

/* ====================== Footer ====================== */
.site-footer{ background:var(--primary); color:#cbd5e1; font-size:13px }
.site-footer .inner{ padding:18px 20px; display:flex; align-items:center; justify-content:space-between }
.site-footer a{ color:#cbd5e1 }
.site-footer p{ padding-right:10px }


.faq-section {
  max-width: 1500px;
  /* margin: 0 auto; */
  /* padding: 20px; */
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  padding-right: 20px;
}

h1 {
  font-size: 2rem;
  text-align: left;
  margin-bottom: 20px;
}

.faq-item {
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 10px;
  background-color: #f9f9f9;
}

.faq-item h2 {
  font-size: 1.5rem;
  margin-bottom: 10px;
}

.faq-item p {
  font-size: 1rem;
  line-height: 1.5;
  color: #333;
}

@media (max-width: 768px) {
  .faq-item h2 {
      font-size: 1.2rem;
  }

  .faq-item p {
      font-size: 0.9rem;
  }
}

@media (max-width: 640px) {
  .brand-logo{ height:34px }
  .site-footer .container{ display:block } /* fixed invalid value */
  .faq-section {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 0px;
    padding-right: 0px;
  }
}

@media (max-width: 380px) {
  h3 {font-size: 1em;}
  h4 {font-size: 0.8em;}
}

/* ---------- Tier switch (Free/Pro demo toggle) + account chrome ---------- */
.tier-switch{
  display:inline-flex; align-items:center; gap:4px;
  padding:4px; border-radius:999px; background:var(--soft-gray,#EEF2F7);
  border:1px solid var(--border);
}
.tier-switch__label{
  font-size:12px; font-weight:600; color:var(--muted); padding:0 6px;
}
.tier-switch__btn{
  border:0; background:transparent; padding:6px 12px; border-radius:999px;
  font-size:13px; font-weight:700; color:var(--muted); cursor:pointer;
}
.tier-switch__btn:hover{ color:var(--text); }
.tier-switch__btn.is-active{
  background:var(--yellow); color:var(--primary);
}
.account-area{ display:flex; align-items:center; }
.account-chip{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  padding:4px 12px 4px 4px; border-radius:999px; border:1px solid var(--border);
  background:var(--surface); color:var(--text); font-size:14px; font-weight:600;
}
.account-chip__avatar{
  width:28px; height:28px; border-radius:50%; object-fit:cover; display:block;
  background:var(--soft-gray,#EEF2F7);
}
.account-signin{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%; flex:0 0 auto;
  border:1px solid var(--border); background:#fff; color:var(--muted);
  text-decoration:none; box-shadow:var(--shadow-sm);
}
.account-signin svg{ width:18px; height:18px; }
.account-signin:hover{ color:var(--text); transform:translateY(-1px); }
.account-signin__label{ display:none; }

/* ---------- Actions menu: hamburger/close icon swap ---------- */
.menu-toggle .icon-close{ display:none; }
.menu-toggle.is-open .icon-hamburger{ display:none; }
.menu-toggle.is-open .icon-close{ display:block; }

/* ---------- Actions menu: redesigned panel (account row, big tier
   toggle, grouped nav, Go Pro banner) — same on desktop and mobile.
   The plain old nav links/account chip inside .actions-menu are
   replaced by these elements everywhere. ---------- */
#actions-menu .actions-menu__desktop-item,
#account-area{ display:none; }

.actions-menu .tier-switch{ width:100%; height:48px; padding:4px; margin-bottom:14px; order:1; }
.actions-menu .tier-switch__label{ display:none; }
.actions-menu .tier-switch__btn{ flex:1; height:100%; font-size:15px; border-radius:999px; }

.menu-account{
  display:flex; align-items:center; gap:14px;
  padding:6px 6px 16px; margin-bottom:12px; order:0;
  border-bottom:1px solid var(--border);
  text-decoration:none; color:inherit;
}
.menu-account__avatar{
  width:44px; height:44px; border-radius:50%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background:var(--yellow); color:var(--primary);
  font-weight:800; font-size:18px; overflow:hidden;
}
.menu-account__avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.menu-account__avatar--icon{ background:var(--soft-gray); color:var(--muted); }
.menu-account__avatar--icon svg{ width:20px; height:20px; }
.menu-account__body{ flex:1; min-width:0; }
.menu-account__name{ display:block; font-weight:700; font-size:15px; color:var(--text); }
.menu-account__sub{ display:block; font-size:13px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.menu-account__chevron{ flex:0 0 auto; width:18px; height:18px; color:var(--muted-2); }

.menu-group{
  display:flex; flex-direction:column;
  border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; margin-bottom:12px; background:var(--surface);
}
.menu-item{
  display:flex; align-items:center; gap:14px;
  padding:14px 16px; text-decoration:none; color:var(--text);
  font-weight:700; font-size:15px;
  border-bottom:1px solid var(--border);
}
.menu-item:last-child{ border-bottom:0; }
.menu-item:hover{ background:var(--soft-gray); }
.menu-item__icon{
  width:36px; height:36px; border-radius:50%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background:var(--soft-gray); color:var(--text);
}
.menu-item__icon svg{ width:18px; height:18px; }
.menu-item__label{ flex:1; min-width:0; }
.menu-item__chevron{ flex:0 0 auto; width:18px; height:18px; color:var(--muted-2); }

.menu-go-pro{
  display:flex; align-items:center; gap:12px;
  padding:14px 16px; border-radius:var(--radius);
  background:#FFF3D6; text-decoration:none;
}
.menu-go-pro.is-hidden{ display:none; }
.menu-go-pro__icon{ font-size:20px; flex:0 0 auto; }
.menu-go-pro__body{ flex:1; min-width:0; }
.menu-go-pro__title{ display:block; font-weight:800; font-size:15px; color:var(--text); }
.menu-go-pro__sub{ display:block; font-size:12px; color:var(--muted); }
.menu-go-pro__arrow{
  flex:0 0 auto; width:32px; height:32px; border-radius:50%;
  background:var(--yellow); color:var(--primary);
  display:flex; align-items:center; justify-content:center;
}
.menu-go-pro__arrow svg{ width:16px; height:16px; }

.saved-trips-btn{
  display:inline-flex; align-items:center; gap:8px;
  height:36px; padding:0 14px; border-radius:999px;
  background:#fff; border:1px solid var(--border); color:var(--primary);
  font-weight:700; font-size:14px; text-decoration:none; white-space:nowrap;
  box-shadow:var(--shadow-sm);
}
.saved-trips-btn svg{ width:18px; height:18px; }
.saved-trips-btn:hover, .saved-trips-btn.is-active{ background:var(--yellow); }

@media(max-width:480px){
  .tier-switch__label{ display:none; }
  .saved-trips-btn{ padding:0 10px; }
}