/* =========================================================
     public/style.css — оптимизированный светлый дизайн
     Mobile-first, Telegram WebApp friendly, Performance optimized
     ========================================================= */

/* ---------- Критические стили выше свертки ---------- */
:root {
  --tg-header-height: 56px;
  --brand: #6C5CE7;
  --brand-2: #5A4BDC;
  --ok: #2ECC71;
  --warn: #E74C3C;
  --bg: #FFFFFF;
  --card-bg: #FFFFFF;
  --border: #E6E8F5;
  --border-strong: #D4D8F4;
  --text: #000000;
  --shadow: 0 8px 24px rgba(17, 24, 39, 0.08);
  --shadow-soft: 0 4px 14px rgba(17, 24, 39, 0.06);
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --app-top-offset: 28px;
  --tr-fast: 120ms;
  --tr-base: 200ms;
}

/* Критические стили для быстрого рендеринга */
* {
  box-sizing: border-box;
}

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, 'Noto Sans', sans-serif;
  background: #FFFFFF;
  color: #000000 !important;
  margin: 0;
  padding: 0;
  line-height: 1.55;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  font-size: 15px;
  padding-top: calc(env(safe-area-inset-top, 0px) + var(--app-top-offset) + 40px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  position: relative;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

/* Оптимизированный контейнер */
.container {
  width: min(98vw, 700px);
  max-width: 100%;
  background-color: var(--card-bg);
  border-radius: var(--radius-lg);
  padding: clamp(12px, 2vh, 20px);
  box-shadow: var(--shadow);
  text-align: center;
  margin: 0 auto clamp(12px, 3vh, 24px);
  border: 1px solid rgba(226, 232, 255, 0.65);
  animation: fadeIn .24s ease both;
  backdrop-filter: saturate(120%) blur(0px);
  position: relative;
  overflow: hidden;
  will-change: transform, opacity;
  box-sizing: border-box;
}

/* Унифицированные стили кнопок для производительности */
.btn-primary,
.menu-button,
button {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 50%, #8B5CF6 100%);
  color: #FFFFFF !important;
  padding: 12px;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  width: 100%;
  transition: transform var(--tr-base), box-shadow var(--tr-base);
  box-shadow: 0 4px 16px rgba(108, 92, 231, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  margin-bottom: 10px;
  min-height: 44px;
  position: relative;
  overflow: hidden;
  will-change: transform, box-shadow;
}

.btn-primary:hover,
.menu-button:hover,
button:hover {
  background: linear-gradient(135deg, var(--brand-2) 0%, #5A4BDC 50%, #7C3AED 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(108, 92, 231, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Оптимизированные формы с улучшенной семантикой */
input[type="password"],
input[type="text"],
input[type="tel"],
input[type="search"],
textarea,
select {
width: 100%;
padding: 11px 14px;
border: 2px solid var(--border-strong);
border-radius: 12px;
font-size: 15px;
color: #000000 !important;
background-color: var(--card-bg);
transition: border-color var(--tr-base), box-shadow var(--tr-base), transform var(--tr-fast);
min-height: 44px;
will-change: border-color, box-shadow, transform;
}

/* Специальные стили для textarea в форме вопроса */
textarea#consult-ask-text {
resize: vertical;
line-height: 1.5;
font-family: inherit;
}

textarea#consult-ask-text:focus {
border-color: var(--brand);
box-shadow: 0 0 0 4px rgba(108,92,231,0.15);
transform: translateY(-1px);
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(108,92,231,0.25);
  transform: translateY(-1px);
}

/* Оптимизированные заголовки */
h1, h2, h3 {
  margin: 0;
  color: #000000 !important;
  font-weight: 800;
  text-shadow: 0 2px 4px rgba(108, 92, 231, 0.3);
  will-change: transform;
}

h1 {
  font-size: clamp(20px, 1.6vw + 18px, 24px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

h2 {
  font-size: clamp(15px, 1.2vw + 11px, 18px);
  font-weight: 600;
}

h3 {
  font-size: clamp(14px, 1.1vw + 12px, 16px);
  font-weight: 700;
}
  

  body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('images/Паттерн_Green_1920х1080.svg');
    background-repeat: repeat;
    background-size: 60%;
    opacity: 0.08;
    pointer-events: none;
    z-index: -1;
  }

  /* ---------- Контейнер-карточка ---------- */
  .container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('images/Паттерн_Green_1920х1080.svg');
    background-repeat: repeat;
    background-size: 40%;
    opacity: 0.04;
    pointer-events: none;
    z-index: -1;
  }

  @media (orientation: landscape) and (max-height: 520px) {
    .container { width: min(95vw, 750px); padding: 8px 12px; border-radius: 14px; }
  }
  
  /* ---------- Хлебные крошки ---------- */
     .breadcrumbs {
       position: sticky;
       top: calc(env(safe-area-inset-top, 0px) + var(--app-top-offset) + var(--tg-extra-top));
       z-index: 50;
       font-size: 13px;
       color: black !important;
       text-align: left;
       margin: clamp(2px, 1vh, 8px) auto clamp(8px, 2vh, 20px);
       width: min(96vw, 600px);
       display: flex;
       flex-wrap: wrap;
       gap: 4px;
       background: transparent;
       padding: clamp(2px, 1vw, 6px);
       border-radius: 8px;
       backdrop-filter: blur(4px);
     }
    .breadcrumbs a {
      color: black !important;
      text-decoration: none;
      cursor: pointer;
      transition: color var(--tr-fast), opacity var(--tr-fast);
    }
    .breadcrumbs a:hover {
      text-decoration: underline;
      color: black !important;
    }
    .breadcrumbs a:active {
      opacity: 0.7;
      transform: scale(0.98);
    }
  
  /* ---------- Глобальная сводка выбора (округ/пространство) ---------- */
  .selection-bar {
    position: sticky;
    top: calc(env(safe-area-inset-top, 0px) + var(--app-top-offset) + var(--tg-extra-top) + 30px);
    z-index: 40;
    width: min(96vw, 600px);
    display: none;
    gap: 6px;
    align-items: center;
    justify-content: flex-start;
    margin: clamp(2px, 1vh, 8px) auto clamp(2px, 1vh, 10px);
    background: #FFFFFF;
    border: 1px solid #E6E8F7;
    border-radius: 12px;
    padding: clamp(4px, 1vw, 8px);
    box-shadow: 0 3px 10px rgba(17,24,39,0.05);
  }
  .sel-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid #E7EBFF;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 13px;
    color: black !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
  }
  .sel-chip .emoji { font-size: 16px; }
  
  /* ---------- Заголовки и текст ---------- */
  h1 {
    font-size: clamp(20px, 1.6vw + 18px, 24px);
    font-weight: 800;
    margin: 0 0 10px;
    color: black !important;
    -webkit-color: black !important;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    text-shadow: 0 2px 4px rgba(108, 92, 231, 0.3);
  }
  h2 {
    font-size: clamp(15px, 1.2vw + 11px, 18px);
    font-weight: 600;
    margin: 0 0 8px; color: black !important; -webkit-color: black !important;
    text-shadow: 0 1px 3px rgba(108, 92, 231, 0.2);
  }
  h3 {
    font-size: clamp(14px, 1.1vw + 12px, 16px);
    font-weight: 700;
    margin: 0 0 6px; color: black !important; -webkit-color: black !important;
    text-shadow: 0 1px 2px rgba(108, 92, 231, 0.2);
  }
  .description-text {
    margin-bottom: 10px;
    font-size: clamp(13px, 1.1vw + 10px, 15px);
    color: black !important;
    -webkit-color: black !important;
    text-align: left;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
  }
  .description-text strong { font-weight: 700; color: black !important; -webkit-color: black !important; text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6); }
  
  /* ---------- Формы ---------- */
  .form-group { margin-bottom: 14px; position: relative; text-align: left; }
  label { display: block; margin-bottom: 8px; font-weight: 600; color: black !important; -webkit-color: black !important; font-size: 13px; text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6); }
  input[type="password"], input[type="text"], input[type="tel"], input[type="search"], textarea, select {
    width: 100%;
    padding: 11px 14px;
    border: 2px solid var(--border-strong);
    border-radius: 12px;
    font-size: 15px;
    color: black !important;
    -webkit-color: black !important;
    background-color: var(--card-bg);
    transition: border-color var(--tr-base), box-shadow var(--tr-base), transform var(--tr-fast);
    min-height: 44px;
  }
  textarea { min-height: 112px; resize: vertical; }
  input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(108,92,231,0.25); transform: translateY(-1px);
  }
  ::placeholder { color: black !important; opacity: 0.4; font-weight: 500; }

  /* Hide placeholders on focus */
  input:focus::placeholder,
  textarea:focus::placeholder,
  select:focus::placeholder {
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  /* Улучшенные стили для семантической формы */
  .form-group {
    margin-bottom: 16px;
  }

  .form-help {
    font-size: 12px;
    color: #666;
    margin-top: 4px;
    line-height: 1.4;
  }

  .form-messages {
    min-height: 20px;
    margin-bottom: 12px;
  }

  .form-error {
    background: #fee;
    color: #c33;
    padding: 8px 12px;
    border-radius: 6px;
    border-left: 3px solid #e74c3c;
    font-size: 13px;
    margin-bottom: 8px;
    animation: slideIn 0.3s ease;
  }

  .form-success {
    background: #efe;
    color: #363;
    padding: 8px 12px;
    border-radius: 6px;
    border-left: 3px solid #2ecc71;
    font-size: 13px;
    margin-bottom: 8px;
    animation: slideIn 0.3s ease;
  }

  @keyframes slideIn {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Специальные стили для кнопки отправки формы */
  .consult-button .btn-text {
    transition: opacity 0.2s ease;
  }

  .consult-button.loading .btn-text {
    opacity: 0;
  }
  
  /* ---------- Кнопки ---------- */
  /* Унифицированные стили кнопок объединены выше */

  button::before, .menu-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
  }

  @media (hover: hover) {
    button:hover, .menu-button:hover {
      background: linear-gradient(135deg, var(--brand-2) 0%, #5A4BDC 50%, #7C3AED 100%);
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(108, 92, 231, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    }

    button:hover::before, .menu-button:hover::before {
      left: 100%;
    }
  }


  button[disabled], .menu-button[disabled] {
    opacity: .7;
    cursor: not-allowed;
    transform: none;
    box-shadow: 0 2px 8px rgba(108, 92, 231, 0.15);
  }

  /* Стили для кнопки "Подтвердить и отправить" - зеленый фон и белый текст */
  #btn-send-final {
    background: linear-gradient(135deg, #10B981 0%, #059669 50%, #047857 100%) !important;
    color: #FFFFFF !important;
    -webkit-color: #FFFFFF !important;
    border: none !important;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  }

  #btn-send-final:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 50%, #065F46 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    color: #FFFFFF !important;
    -webkit-color: #FFFFFF !important;
  }

  /* Стиль для menu-button с btn-light - оранжевый фон - в конце файла */
  button.menu-button.btn-light,
  .menu-button.btn-light {
    background: #FFFFFF !important;
    background-image: none !important;
    color: #6C5CE7 !important;
    -webkit-color: #6C5CE7 !important;
    border: 1px solid #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(255, 187, 153, 0.4) !important;
  }

  button.menu-button.btn-light:hover,
  .menu-button.btn-light:hover {
    background: #FFFFFF !important;
    background-image: none !important;
    border-color: #FFFFFF!important;
    color: #6C5CE7  !important;
    -webkit-color: #6C5CE7  !important;
  }

  /* Светлые кнопки с оранжевым фоном */
  .btn-gray,
  .btn-muted,
  .btn-light {
    background: #FFFFFF!important;
    color: #6C5CE7!important;
    -webkit-color: #6C5CE7 !important;
    border: 1px solid #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(255, 187, 153, 0.4) !important;
    transition: all 0.3s ease !important;
  }

  .btn-gray:hover,
  .btn-muted:hover,
  .btn-light:hover {
    background: #FFFFFF !important;
    border-color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(255, 187, 153, 0.4) !important;
    transform: translateY(-1px) !important;
    color: #6C5CE7 !important;
    -webkit-color: #6C5CE7 !important;
  }

  /* Специфичный стиль для menu-button с btn-gray */
  .menu-button.btn-gray,
  .menu-button.btn-muted {
    /* Эти стили применяются к кнопкам "Выйти" и другим неакцентным кнопкам */
    background: #f3f4f6 !important;
    color: #4b5563 !important;
    -webkit-color: #4b5563 !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
  }

  .menu-button.btn-gray:hover,
  .menu-button.btn-muted:hover {
    background: #e5e7eb !important;
    border-color: #d1d5db !important;
  }

  /* Дополнительные стили для различных типов кнопок */
  .btn-danger,
  .btn-error {
    background: #FFFFFF !important;
    color: #000000 !important;
    -webkit-color: #000000 !important;
    border: 1px solid #E6E8F5 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease !important;
  }

  .btn-danger:hover,
  .btn-error:hover {
    background: #F5F5F5 !important;
    border-color: #D0D0D0 !important;
    color: #000000 !important;
    -webkit-color: #000000 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  }

  /* Кнопки успеха */
  .btn-success,
  .btn-ok {
    background: linear-gradient(135deg, #10B981 0%, #059669 50%, #047857 100%) !important;
    color: #FFFFFF !important;
    -webkit-color: #FFFFFF !important;
    border: none !important;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    transition: all 0.3s ease !important;
  }

  .btn-success:hover,
  .btn-ok:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 50%, #065F46 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    color: #FFFFFF !important;
    -webkit-color: #FFFFFF !important;
  }

  /* Фиолетовые акцентные кнопки */
  .btn-purple,
  .btn-accent {
    background: linear-gradient(135deg, #6C5CE7 0%, #5A4BDC 50%, #8B5CF6 100%) !important;
    color: #FFFFFF !important;
    -webkit-color: #FFFFFF !important;
    border: none !important;
    box-shadow: 0 4px 16px rgba(108, 92, 231, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    transition: all 0.3s ease !important;
  }

  .btn-purple:hover,
  .btn-accent:hover {
    background: linear-gradient(135deg, #5A4BDC 0%, #7C3AED 50%, #6D28D9 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(108, 92, 231, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    color: #FFFFFF !important;
    -webkit-color: #FFFFFF !important;
  }

  .btn-white {
    background: linear-gradient(135deg, #FFFFFF 0%, #F9FAFB 50%, #F3F4F6 100%);
    color: black !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    border: 1px solid var(--border);
  }

  .btn-white:hover {
    background: linear-gradient(135deg, #F7FAFF 0%, #EEF2FF 50%, #E0E7FF 100%);
    border-color: var(--brand);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(108, 92, 231, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }
  .menu-button-purple {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 50%, #8B5CF6 100%);
    color: #FFFFFF;
    box-shadow: 0 6px 18px rgba(108, 92, 231, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }

  .menu-button-purple:hover {
    background: linear-gradient(135deg, var(--brand-2) 0%, #5A4BDC 50%, #7C3AED 100%);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(108, 92, 231, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  }

  .menu-button-white {
    background: linear-gradient(135deg, #FFFFFF 0%, #F9FAFB 50%, #F3F4F6 100%);
    color: black !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    border: 1px solid var(--border);
  }

  .menu-button-white:hover {
    background: linear-gradient(135deg, #F7FAFF 0%, #EEF2FF 50%, #E0E7FF 100%);
    border-color: var(--brand);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(108, 92, 231, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }
  
  /* ---------- Сообщения ---------- */
  .error-message {
    color: black !important; background-color: var(--card-bg);
    border-radius: 12px; padding: 11px; margin: 10px 0; display: none; font-size: 13px;
    border: 1px solid rgba(229, 62, 62, 0.25);
  }
  .warning-note {
    background: linear-gradient(180deg, #F5F7FF 0%, #FFFFFF 100%);
    border-radius: 14px; padding: 12px 12px; margin: 12px 0; font-size: 13px; color: #2B4CB0;
    text-align: left; border: 1px solid #E1E6FF; box-shadow: var(--shadow-soft);
  }

  .help-hint {
    background: #FFFFFF;
    border: 2px solid #d4d8f4;
    border-radius: 16px;
    padding: 20px;
    margin: 16px 0;
    box-shadow: 0 6px 20px rgba(108, 92, 231, 0.08);
    text-align: left;
    position: relative;
    overflow: hidden;
    color: black !important;
  }

  .help-hint::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--brand) 0%, var(--brand-2) 100%);
    border-radius: 16px 16px 0 0;
  }

  .help-hint .hint-content {
    color: black !important;
    -webkit-color: black !important;
    line-height: 1.6;
    font-size: 14px;
    margin: 0;
    position: relative;
    z-index: 1;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
  }

  .help-hint .hint-content strong {
    color: black !important;
    font-weight: 700;
    font-size: 16px;
    display: block;
    margin-bottom: 12px;
  }

  .help-hint .hint-content br + br {
    margin-bottom: 8px;
  }
  
  /* ---------- Иконки ---------- */
  .icon { font-size: 1.1em; margin-right: 6px; }
  .info-icon { color: #FFFFFF !important; -webkit-color: #FFFFFF !important; font-size: 11px; font-weight: 700; margin-left: 6px; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background-color: #3498DB; }
  
  /* ---------- Футер ---------- */
  .footer {
    text-align: center; padding: 8px; color: #FFFFFF !important; -webkit-color: #FFFFFF !important; font-size: 11px; margin-top: auto; width: 100%;
    border-top: 1px solid rgba(226, 232, 255, 0.35); background: rgba(255, 255, 255, 0.8);
  }
  
  /* =========================================================
      Carousel (карусель слайдов + свайп)
      ========================================================= */
     .carousel {
        position: relative; width: 100%; overflow: hidden; border-radius: 16px;
        box-shadow: var(--shadow-soft); margin-bottom: 14px; background: var(--card-bg); border: 2px solid #E6E8F5;
      }
     .carousel-inner { display: flex; width: 100%; transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); touch-action: pan-y; will-change: transform; }
     .carousel-slide {
       width: 100%; flex-shrink: 0; text-align: center; padding: 4px 2px;
       display: flex; flex-direction: column; align-items: stretch; gap: 8px;
     }
     .carousel-slide img {
       width: 100%; height: auto; border-radius: 14px; box-shadow: 0 2px 6px rgba(17, 24, 39, 0.08);
       cursor: pointer; opacity: 1; transform: scale(1); transition: opacity .28s ease, transform .28s ease; backface-visibility: hidden;
     }
     .carousel-slide img.fade-out { opacity: 0; transform: scale(0.985); }
     .carousel-slide img.fade-in  { opacity: 1; transform: scale(1); }
  
     /* Навигация под каруселью */
     .carousel-nav-container { display: flex; justify-content: center; align-items: center; margin-top: 8px; gap: 16px; }
     .carousel-nav-btn {
       background: linear-gradient(180deg, var(--brand) 0%, var(--brand-2) 100%); color: #FFFFFF; border: none; border-radius: 50%;
       width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px;
       box-shadow: 0 6px 14px rgba(17, 24, 39, 0.25);
       transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
     }
     .carousel-nav-btn:hover { background: linear-gradient(180deg, var(--brand-2) 0%, #5A4BDC 100%); }
     .carousel-indicators { display: flex; gap: 8px; }
     .indicator { width: 8px; height: 8px; border-radius: 50%; background: #6C5CE7; transition: background-color .2s ease, transform .2s ease; }
     .indicator.active { background-color: #5A4BDC; transform: scale(1.15); }
  
  /* Мобильные улучшения для карусели */
  @media (max-width: 768px) {
    .carousel {
      border-radius: 12px;
      margin-bottom: 12px;
    }
  
    .carousel-slide {
      padding: 4px 2px;
      gap: 6px;
    }
  
    .carousel-slide img {
      border-radius: 10px;
      box-shadow: 0 1px 4px rgba(17, 24, 39, 0.06);
    }
  
    .carousel-nav-container {
      margin-top: 6px;
      gap: 12px;
    }
  
    .carousel-nav-btn {
      width: 38px;
      height: 38px;
      font-size: 16px;
      box-shadow: 0 4px 10px rgba(17, 24, 39, 0.12);
      background: linear-gradient(180deg, var(--brand) 0%, var(--brand-2) 100%);
      color: #FFFFFF;
      border: none;
    }
  
    .carousel-indicators {
      gap: 6px;
    }
  
    .indicator {
      width: 6px;
      height: 6px;
      background: #6C5CE7;
    }
  }
  
  @media (max-width: 480px) {
    .carousel {
      border-radius: 10px;
      margin-bottom: 10px;
    }
  
    .carousel-slide {
      padding: 2px 0;
      gap: 4px;
    }
  
    .carousel-nav-container {
      margin-top: 4px;
      gap: 8px;
    }
  
    .carousel-nav-btn {
      width: 34px;
      height: 34px;
      font-size: 14px;
      background: linear-gradient(180deg, var(--brand) 0%, var(--brand-2) 100%);
      color: #FFFFFF;
      border: none;
    }
  
    .carousel-indicators {
      gap: 4px;
    }
  
    .indicator {
      width: 5px;
      height: 5px;
      background: #6C5CE7;
    }
  }
  
  /* =========================================================
     Карточки пространств + локальная навигация фото
     ========================================================= */
  .place-card { width: 100%; text-align: left; background: var(--card-bg); border-radius: 16px; padding: clamp(2px, 0.5vh, 6px) clamp(2px, 0.5vh, 6px) 0 clamp(2px, 0.5vh, 6px); margin-bottom: clamp(8px, 2vh, 16px); }
  .place-header { font-size: 20px; font-weight: 900; color: black !important; -webkit-color: black !important; margin: 0 0 2px 0; text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6); }
  .place-row {
    display: flex;
    align-items: center;
    gap: 8px;
    color: black !important;
    -webkit-color: black !important;
    font-size: 12px;
    margin: 1px 0;
    font-style: italic;   /* 👈 курсив */
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
  }
  .place-row .fa-solid { font-size: 12px; }
  .place-subline { display: flex; align-items: center; justify-content: flex-start; gap: 12px; color: black !important; -webkit-color: black !important; font-size: 13px; margin: 4px 0 8px 0; text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6); }
  .place-photo-wrapper { position: relative; width: 100%; border-radius: 16px; overflow: hidden; margin: 6px 0 10px 0; box-shadow: 0 8px 20px rgba(17, 24, 39, 0.08); background: #f3f4f6; }
  .place-photo-wrapper img { display: block; width: 100%; height: auto; border-radius: 16px; }
  .place-photo-badge {
    position: absolute; left: 12px; bottom: 12px;
    background: rgba(17, 24, 39, 0.82); color: #fff; font-size: 12px; padding: 7px 10px; border-radius: 999px; display: inline-flex; gap: 8px; align-items: center; backdrop-filter: blur(2px);
  }
  .place-photo-badge .fa-camera { font-size: 13px; }
  
  /* Отдельные стрелки на фото (листать без открытия модалки) */
  .place-photo-wrapper .photo-prev,
  .place-photo-wrapper .photo-next {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 36px; height: 36px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(17, 22, 54, 0.72); color: #fff; border: 1px solid rgba(255,255,255,0.25);
    cursor: pointer; box-shadow: 0 6px 16px rgba(0,0,0,.28);
    font-size: 16px; line-height: 1; backdrop-filter: blur(2px);
    transition: transform .16s ease, background-color .16s ease, opacity .16s ease;
  }
  .place-photo-wrapper .photo-prev { left: 8px; }
  .place-photo-wrapper .photo-next { right: 8px; }
  .place-photo-wrapper .photo-prev:hover,
  .place-photo-wrapper .photo-next:hover { background: rgba(17, 22, 54, 0.86); }
  
  .place-title { font-size: 18px; font-weight: 900; color: black !important; -webkit-color: black !important; margin: 2px 0 6px 0; line-height: 1.2; text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6); }
  .place-features { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 2px 0; }
  .place-feature { display: flex; align-items: center; gap: 10px; color: black !important; -webkit-color: black !important; font-size: 14px; text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6); }
  .place-feature .fa-solid { color: #111827; width: 18px; min-width: 18px; text-align: center; font-size: 16px; }
  .place-actions { margin-top: 10px; width: 100%; }
  
  /* =========================================================
     Modal изображений (оба варианта, чтобы покрыть обе страницы)
     ========================================================= */
  .modal-image {
    display: none; position: fixed; z-index: 1000; inset: 0; background-color: var(--card-bg);
    justify-content: center; align-items: center; padding: 16px;
  }
  .modal-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('/images/Паттерн_Green_1920х1080.svg');
    background-repeat: repeat;
    background-size: auto;
    opacity: 0.1;
    pointer-events: none;
    z-index: -1;
  }
  .modal-content-image { position: relative; margin: auto; padding: 0; width: 90%; max-width: 880px; background: transparent; }
  .modal-content-image img { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28); }
  .close-image { position: absolute; top: 14px; right: 22px; color: #fff; font-size: 30px; font-weight: 700; cursor: pointer; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); }
  
  /* Стрелки в модальном просмотре изображений */
  #imageModal .carousel-nav-btn {
    position: absolute; top: 50%; transform: translateY(-50%); background: rgba(17, 22, 54, 0.72);
  }
  #imageModal #modal-prev { left: 12px; }
  #imageModal #modal-next { right: 12px; }
  
  /* =========================================================
     Booking calendar (компактнее на телефоне)
     ========================================================= */
  #booking-calendar {
    display: block; padding: 8px; background: var(--card-bg); border-radius: 12px; box-shadow: var(--shadow-soft);
    border: 1px solid var(--border); min-height: clamp(300px, 50vh, 420px); overflow-y: auto;
  }
  #calendar-container { margin-top: 8px; }
  #calendar-loading { font-size: 13px; color: black !important; }
  
  /* Сводка выбора внутри календаря — sticky */
  .compact-summary {
    position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin-bottom: 6px;
    background: #FFFFFF; border: 1px solid #E6E8F7; border-radius: 10px;
    box-shadow: 0 3px 10px rgba(17,24,39,0.05); text-align: left; color: black !important;
    -webkit-color: black !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
  }
  .compact-summary .icon { font-size: 18px; margin-right: 4px; }
  .compact-summary strong { font-weight: 800; color: black !important; -webkit-color: black !important; text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6); }
  
  /* Шапка календаря */
  .calendar-header { display: flex; justify-content: space-between; align-items: center; padding: 0 4px; margin-bottom: 6px; }
  .calendar-header h2 { font-size: 13px; text-transform: capitalize; margin: 0; flex-grow: 1; text-align: center; color: black !important; -webkit-color: black !important; text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6); }
  .calendar-nav {
    background: transparent; border: 1px solid var(--border-strong); font-size: 14px; font-weight: 800; cursor: pointer; color: black !important;
    -webkit-color: black !important;
    padding: 2px 6px; border-radius: 8px; width: 30px; height: 26px; display: flex; align-items: center; justify-content: center;
    transition: background-color var(--tr-base), transform var(--tr-fast), border-color var(--tr-base);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
  }
  .calendar-nav:hover { background-color: rgba(0, 0, 0, 0.10); border-color: #000000 !important; }
  
  /* ---- Красивый календарь ---- */
  .calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    padding: 8px;
    background: #FFFFFF;
    border: 1.5px solid #E0E4FF;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(108,92,231,0.06);
  }
  
  .calendar-day {
    font-size: 11px;
    font-weight: 700;
    color: black !important;
    -webkit-color: black !important;
    text-align: center;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
  }
  
  .calendar-day.weekend {
    color: black !important;
  }

.calendar-date {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: black !important;
  -webkit-color: black !important;
  border: 1px solid #E3E6F7;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);   /* кнопочный эффект */
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
}
.calendar-date:hover:not(.disabled) {
  border-color: var(--brand);
  background: rgba(108, 92, 231, 0.1);
}

/* Сегодня */
.calendar-date.today {
  border: 2px solid var(--brand);
  background: #F8F9FF;
}

/* Недоступные */
.calendar-date.disabled {
  background: #FF6B6B;
  color: #FFFFFF;
  border-color: var(--brand);
  cursor: not-allowed;
  opacity: 0.9;
}

/* 5-дневное ограничение бронирования - стиль идентичный прошедшим дням */
.calendar-date.disabled-restriction {
  background: #FFF1F1 !important;
  color: black !important;
  border-color: var(--brand);
  font-weight: 600;
  cursor: not-allowed;
  opacity: 0.25;
}

/* Выбранные */
.calendar-date.start-selected {
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-2) 100%);
  color: #fff;
  border: none;
  box-shadow: 0 4px 12px rgba(108,92,231,0.3);
}

/* Частично занятые */
.calendar-date.partial-busy {
  background: #FFF3CD; /* светло-желтый */
  color: black !important;
  border-color: var(--brand);
}
.calendar-date.partial-busy::after {
  font-size: 11px;
  position: absolute;
  top: 5px;
  right: 6px;
}

/* Кнопки */
#booking-calendar .control-btn {
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  padding: 10px 16px;
  min-width: 110px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}

#booking-calendar .btn-light {
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-2) 100%);
  color: #fff;
}
#booking-calendar .btn-light:hover {
  background: linear-gradient(180deg, var(--brand-2) 0%, #5A4BDC 100%);
}

#btn-clear-dates {
  background: #FFBB99 !important;
  border-radius: 12px;
  font-weight: 700;
  color: #FFFFFF !important;
  -webkit-color: #FFFFFF !important;
  border: 1px solid #FFBB99 !important;
  box-shadow: 0 2px 8px rgba(255, 187, 153, 0.4) !important;
}

/* Стили для кнопки "Сегодня" - белый текст */
#btn-today {
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-2) 100%) !important;
  color: #FFFFFF !important;
  -webkit-color: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(108, 92, 231, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

#btn-today:hover {
  background: linear-gradient(180deg, var(--brand-2) 0%, #5A4BDC 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(108, 92, 231, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  color: #FFFFFF !important;
  -webkit-color: #FFFFFF !important;
}

/* Стили для кнопки "Продолжить" - фон #66CC99, белый текст */
#btn-confirm-times {
  background: #66CC99 !important;
  color: #FFFFFF !important;
  -webkit-color: #FFFFFF !important;
  border: 1px solid #66CC99 !important;
  box-shadow: 0 2px 8px rgba(102, 204, 153, 0.4) !important;
}

#btn-confirm-times:hover {
  background: #5BB888 !important;
  border-color: #5BB888 !important;
  color: #FFFFFF !important;
  -webkit-color: #FFFFFF !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(102, 204, 153, 0.4) !important;
}


/* Стили для кнопки "Отмена" формы - белый фон */
#btn-form-cancel {
  background: #FFFFFF !important;
  color: #000000 !important;
  -webkit-color: #000000 !important;
  border: 1px solid #D0D0D0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

#btn-form-cancel:hover {
  background: #F9FAFB !important;
  border-color: #B0B0B0 !important;
  color: #000000 !important;
  -webkit-color: #000000 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Стили для кнопки "Добавить" - белый текст */
#btn-add-time {
  color: #FFFFFF !important;
  -webkit-color: #FFFFFF !important;
}

#btn-add-time:hover {
  color: #FFFFFF !important;
  -webkit-color: #FFFFFF !important;
}

/* Стили для кнопки "Добавить номер" - белый текст */
#btn-add-phone {
  color: #FFFFFF !important;
  -webkit-color: #FFFFFF !important;
}

#btn-add-phone:hover {
  color: #FFFFFF !important;
  -webkit-color: #FFFFFF !important;
}

/* Стили для кнопки "Добавить номер" - белый текст */
#addBookingCodeBtn {
  color: #FFFFFF !important;
  -webkit-color: #FFFFFF !important;
}

#addBookingCodeBtn:hover {
  color: #FFFFFF !important;
  -webkit-color: #FFFFFF !important;
}

/* Стили для кнопки "Добавить номер" - фиолетовый фон */
#addBookingCodeBtn {
  background: #6C5CE7 !important;
  color: #FFFFFF !important;
  -webkit-color: #FFFFFF !important;
  border: 1px solid #6C5CE7 !important;
  box-shadow: 0 2px 8px rgba(108, 92, 231, 0.4) !important;
}

#addBookingCodeBtn:hover {
  background: #5A4BDC !important;
  border-color: #5A4BDC !important;
  color: #FFFFFF !important;
  -webkit-color: #FFFFFF !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(108, 92, 231, 0.4) !important;
}
#btn-back-to-space, #btn-main-menu {
  border-radius: 12px;
}
  
  /* Экстремально маленькие экраны (до 360px) - оптимизированный медиа-запрос */
  @media (max-width: 360px) {
    body {
      font-size: 14px;
      padding-top: calc(env(safe-area-inset-top, 0px) + var(--app-top-offset) + 25px);
      line-height: 1.4;
    }

    .consultation-wrapper {
      padding: 8px;
      min-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
      justify-content: flex-start;
    }

    .container {
      width: 100vw;
      max-width: 100vw;
      padding: 6px 10px;
      margin: 0 auto;
      border-radius: 10px;
      box-sizing: border-box;
    }

    .consultation-nav {
      padding: 8px 12px;
    }

    .nav-back-btn {
      padding: 6px 8px;
      font-size: 12px;
      min-height: 36px;
    }

    .nav-back-btn span {
      display: none;
    }

    .nav-title h1 {
      font-size: 16px;
    }

    .nav-title i {
      font-size: 14px;
    }

    .consultation-main {
      padding: 8px 4px;
    }

    .consultation-hero {
      padding: 12px 8px;
      margin-bottom: 12px;
    }

    .hero-icon {
      font-size: 32px;
      margin-bottom: 8px;
    }

    .consultation-hero h2 {
      font-size: 18px;
      margin-bottom: 8px;
    }

    .hero-description {
      font-size: 13px;
      margin-bottom: 16px;
      line-height: 1.4;
    }

    .search-container {
      gap: 8px;
    }

    .search-input {
      padding: 10px 12px;
      font-size: 14px;
      min-height: 40px;
    }

    .search-btn {
      padding: 10px 12px;
      min-width: 40px;
      min-height: 40px;
    }

    .consultation-sidebar {
      padding: 12px;
      margin-bottom: 12px;
    }

    .sidebar-nav {
      gap: 8px;
    }

    .sidebar-link {
      padding: 8px 10px;
      font-size: 12px;
      min-height: 40px;
    }

    .consultation-content {
      padding: 12px 8px;
    }

    .cards-grid {
      gap: 12px;
      margin-top: 12px;
    }

    .action-card {
      padding: 12px;
      min-height: 140px;
      border-radius: 12px;
    }

    .card-icon {
      width: 40px;
      height: 40px;
      font-size: 16px;
      margin-bottom: 8px;
    }

    .action-card h3 {
      font-size: 15px;
      margin-bottom: 8px;
    }

    .card-description {
      font-size: 12px;
      margin-bottom: 12px;
      line-height: 1.3;
    }

    .card-button {
      padding: 8px 12px;
      font-size: 12px;
      min-height: 40px;
    }

    .help-hint {
      padding: 10px;
      margin: 8px 0;
      border-radius: 10px;
    }

    .help-hint .hint-content {
      font-size: 12px;
    }

    .help-hint .hint-content strong {
      font-size: 14px;
      margin-bottom: 8px;
    }
  }
  
  /* =========================================================
     Inline time picker
     ========================================================= */
  #inline-time-list { display: grid; gap: 10px; }
  .multi-time-date-block {
    background: var(--card-bg); border: 1.5px solid #E7E9F6; border-radius: 14px;
    padding: 12px 10px 10px; box-shadow: 0 6px 14px rgba(17, 24, 39, 0.04);
    position: relative; transition: box-shadow var(--tr-base), transform var(--tr-fast), border-color var(--tr-base);
  }
  .multi-time-date-block::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 4px; border-radius: 6px; background: linear-gradient(180deg, var(--brand) 0%, var(--brand-2) 100%); opacity: .9; }
  .multi-time-date-block strong {
    display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: black !important;
    -webkit-color: black !important;
    -moz-color: black !important;
    color: black !important;
    background: #FFFFFF; border: 1px solid #DDE2FF; border-radius: 999px; padding: 6px 10px;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
  }
  .multi-time-date-block:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(17, 24, 39, 0.07); }
  .multi-time-date-block:focus-within { border-color: var(--brand); box-shadow: 0 0 0 5px rgba(108,92,231,0.10); }
  
  .select-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: center; margin-top: 8px; }
  .select-row label { display: none !important; }
  .select-control {
    position: relative; display: inline-flex; align-items: center; background: #FFFFFF; border: 1.5px solid #E1E6FF;
    border-radius: 12px; padding: 0 8px; min-height: 40px; box-shadow: 0 1px 3px rgba(108,92,231,0.05);
    transition: border-color .15s, background .15s, box-shadow .2s;
  }
  .select-control:focus-within { background: #EEF2FF; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(108,92,231,0.08); }
  .select-control select {
    border: none;
    background: transparent;
    outline: none;
    padding: 9px 22px 9px 4px;
    font-size: 14px;
    color: black !important;
    -webkit-color: black !important;
    -moz-color: black !important;
    color: black !important;
    font-weight: 600;
    appearance: none;
    text-align: center;        /* 👈 центрируем текст */
    text-align-last: center;   /* 👈 центрируем выбранный пункт */
  }
  .select-control::after { content: '▾'; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: black !important; font-size: 12px; pointer-events: none; }
  .select-control select option:disabled {
    color: #000000;
    font-style: italic;
    background-color: var(--card-bg);
  }

  .select-control select option {
    color: black !important;
    -webkit-color: black !important;
    -moz-color: black !important;
    color: black !important;
  }
  
  /* =========================================================
     Modals (универсальные)
     ========================================================= */
  .modal-form {
    display: none; position: fixed; z-index: 2000; inset: 0; background: rgba(15, 18, 33, 0.2);
    align-items: center; justify-content: center; padding: 12px; -webkit-overflow-scrolling: touch; overflow: hidden;
  }
  @supports (backdrop-filter: blur(6px)) { .modal-form { backdrop-filter: saturate(110%) blur(6px); } }
  .modal-form::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('/images/Паттерн_Green_1920х1080.svg');
    background-repeat: repeat;
    background-size: auto;
    opacity: 0;
    pointer-events: none;
    z-index: -1;
  }
  .modal-form-content {
    background: var(--card-bg); border-radius: 18px; box-shadow: 0 14px 36px rgba(17, 24, 39, 0.18);
    border: 1px solid var(--border); padding: 22px 18px 16px 18px; max-width: 420px; width: 96vw; text-align: left;
    font-family: inherit; position: relative; animation: fadeIn .22s ease both; max-height: 90vh; overflow: auto;
    color: black !important; -webkit-color: black !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
  }
  .modal-form-content h2 { text-align: center; font-size: 18px; font-weight: 800; color: black !important; -webkit-color: black !important; margin-top: 0; text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6); }
  .modal-form .form-group { margin-bottom: 12px; }
  .modal-form input:focus-visible, .modal-form textarea:focus-visible { border: 1.5px solid var(--brand); background: #F0F4FF; outline: none; }
  
  /* Загрузочный экран (ожидание кода заявки) */
  #booking-loading-modal .modal-form-content {
    max-width: 380px; text-align: center;
  }
  #booking-loading-modal svg circle { stroke: var(--brand); }
  
  /* =========================================================
     Toasts
     ========================================================= */
  #toast-container {
    position: fixed; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%);
    z-index: 3000; display: flex; flex-direction: column; gap: 8px; width: min(94vw, 560px); pointer-events: none; padding: 0 8px;
  }
  .toast {
    pointer-events: auto; padding: 10px 13px; border-radius: 12px; color: #fff !important; -webkit-color: #fff !important; font-size: 13px; font-weight: 700;
    box-shadow: 0 8px 22px rgba(0,0,0,.16); border: 1px solid rgba(255,255,255,0.08); animation: slideUp .22s ease both;
  }
  .toast.info    { background: linear-gradient(180deg, #7A6DF7 0%, #6252E7 100%); }
  .toast.error   { background: linear-gradient(180deg, #F0625F 0%, #E74C3C 100%); }
  .toast.success { background: linear-gradient(180deg, #46D97C 0%, #2ECC71 100%); }
  
  /* =========================================================
     Подтверждение (да/нет)
     ========================================================= */
  #confirm-modal {
    display: none; position: fixed; z-index: 2500; inset: 0; background: rgba(0,0,0,.22);
    align-items: center; justify-content: center; padding: 12px;
  }
  #confirm-modal .box { background:#fff; border-radius:12px; padding:16px; width:90vw; max-width:360px; border: 1px solid var(--border); box-shadow: var(--shadow-soft); }
  #confirm-modal .actions { display:flex; gap:8px; margin-top:12px; }
  #confirm-modal .actions button { flex:1; }
  
  /* =========================================================
     Статусы
     ========================================================= */
  .status-list { margin: 10px 0; text-align: left; display: flex; flex-direction: column; gap: 10px; }
  .status-search {
    background: #FFFFFF; border: 1.5px solid #E7EBFF; border-radius: 12px; padding: 10px; text-align: left; box-shadow: var(--shadow-soft); margin-top: 10px;
  }
  .status-result {
    margin-top: 8px; padding: 10px; border-radius: 12px; background: #FFFFFF; border: 1px solid #E5E7FF; display: none; animation: fadeIn .22s ease both;
  }
  .status-result.success { background: #F0FFF6; border-color: var(--brand); }
  .status-result.error { background: #FFF5F5; border-color: var(--brand); }
  
  .status-chip { display: inline-block; padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; color: #fff !important; -webkit-color: #fff !important; background: linear-gradient(180deg, var(--brand) 0%, var(--brand-2) 100%); }
  .status-chip.green  { background: #2ECC71; }
  .status-chip.red    { background: #E74C3C; }
  .status-chip.orange { background: #F39C12; }
  .status-chip.gray   { background: #000000; }
  
  .status-card {
    display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: flex-start;
    background: var(--card-bg); border: 1.5px solid #E7EBFF; border-radius: 14px; padding: 12px; box-shadow: var(--shadow-soft);
  }
  .status-icon { font-size: 18px; color: black !important; line-height: 1; margin-top: 2px; }
  .status-content { min-width: 0; text-align: left; }
  .status-title { font-size: 15px; font-weight: 800; margin: 0 0 6px; color: black !important; -webkit-color: black !important; text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6); }
  .status-code { font-size: 12px; color: black !important; -webkit-color: black !important; margin: 2px 0 8px; text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6); }
  .status-label { font-size: 12px; color: black !important; -webkit-color: black !important; margin-right: 6px; text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6); }
  .status-bubble {
    display: inline-block; background: #000000; color: #fff !important; -webkit-color: #fff !important; padding: 9px 10px; border-radius: 12px; font-size: 13px; line-height: 1.35;
    max-width: 100%; white-space: normal; word-break: break-word;
  }
  /* Фильтр статусов */
.status-filter-bar {
  display: flex;
  gap: 8px;
  margin: 8px 0 10px;
}

  .status-filter-bar .menu-button {
    flex: 1;
    background: linear-gradient(180deg, var(--brand) 0%, var(--brand-2) 100%);
  }
  
  .pager { margin-top: 8px; display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; }
  .pager button {
    background: #fff; color: #000000; border: 1px solid #E7EBFF; border-radius: 10px; padding: 7px 10px; font-size: 12px; min-width: 34px; cursor: pointer; box-shadow: var(--shadow-soft);
  }
  .pager button.active { background: var(--brand); color: #fff; border-color: var(--brand); }
  .pager button:disabled { opacity: .55; cursor: not-allowed; }
  
  /* =========================================================
     Прочие списки/блоки
     ========================================================= */
  .services-list { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
  .feedback-desc { text-align: left; color: black !important; font-size: 13px; margin-bottom: 10px; }
  .feedback-actions { display: flex; flex-direction: column; gap: 8px; }
  
  /* =========================================================
     Анимации
     ========================================================= */
  @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  @keyframes slideUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  .fade-in { animation: fadeIn .22s ease both; }
  
  @media (prefers-reduced-motion: reduce) {
    .carousel-inner, .carousel-slide img, .indicator, .fade-in, .toast, .modal-form-content { transition: none !important; animation: none !important; }
  }
  
  /* =========================================================
     Доп. адаптивность
     ========================================================= */

  /* Десктопные экраны (1024px+) - оптимизированный медиа-запрос */
  @media (min-width: 1024px) {
    .consultation-nav {
      padding: 14px 20px;
    }

    .nav-back-btn {
      padding: 8px 14px;
      font-size: 14px;
      min-height: 44px;
    }

    .nav-title h1 {
      font-size: 20px;
    }

    .nav-title i {
      font-size: 16px;
    }

    .consultation-wrapper {
      padding: 16px;
      justify-content: center;
    }

    .consultation-main {
      padding: 20px 16px;
      display: grid;
      grid-template-columns: 280px 1fr;
      gap: 24px;
      align-items: start;
    }

    .consultation-hero {
      grid-column: 1 / -1;
      padding: 28px 24px;
      margin-bottom: 24px;
    }

    .hero-icon {
      font-size: 44px;
      margin-bottom: 14px;
    }

    .consultation-hero h2 {
      font-size: 24px;
      margin-bottom: 12px;
    }

    .hero-description {
      font-size: 15px;
      margin-bottom: 20px;
      line-height: 1.5;
    }

    .search-container {
      max-width: 600px;
      gap: 12px;
    }

    .search-input {
      padding: 16px 20px;
      font-size: 16px;
      min-height: 52px;
    }

    .search-btn {
      padding: 16px 20px;
      min-width: 52px;
      min-height: 52px;
    }

    .consultation-sidebar {
      position: sticky;
      top: 120px;
      padding: 20px;
      margin-bottom: 0;
    }

    .sidebar-nav {
      gap: 10px;
    }

    .sidebar-link {
      padding: 12px 16px;
      font-size: 14px;
      min-height: 48px;
    }

    .consultation-content {
      padding: 24px 20px;
    }

    .cards-grid {
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 20px;
      margin-top: 20px;
    }

    .action-card {
      padding: 16px;
      min-height: 150px;
      border-radius: 14px;
    }

    .card-icon {
      width: 56px;
      height: 56px;
      font-size: 22px;
      margin-bottom: 14px;
    }

    .action-card h3 {
      font-size: 17px;
      margin-bottom: 12px;
    }

    .card-description {
      font-size: 13px;
      margin-bottom: 18px;
      line-height: 1.4;
    }

    .card-button {
      padding: 12px 18px;
      font-size: 14px;
      min-height: 48px;
    }

    .help-hint {
      padding: 16px;
      margin: 14px 0;
      border-radius: 16px;
    }

    .help-hint .hint-content {
      font-size: 15px;
    }

    .help-hint .hint-content strong {
      font-size: 17px;
      margin-bottom: 14px;
    }
  }

  /* Планшеты (768px - 1024px) */
  @media (max-width: 1024px) and (min-width: 769px) {
    .container { width: min(95vw, 800px); padding: clamp(10px, 2vh, 18px); }
    .district-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
    .menu-cards { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
    h1 { font-size: clamp(22px, 1.8vw + 18px, 26px); }
    .calendar-grid { grid-template-columns: repeat(7, 1fr); gap: 6px; padding: 12px; }
    .calendar-date { font-size: 14px; min-height: 44px; }
  }

  /* Планшеты (481px - 768px) - оптимизированная навигация */
  @media (min-width: 481px) and (max-width: 768px) {
    .consultation-nav {
      padding: 14px 18px;
    }
  
    .nav-back-btn {
      padding: 8px 12px;
      font-size: 14px;
      min-height: 44px;
      min-width: 110px;
    }
  
    .nav-title {
      gap: 10px;
    }
  
    .nav-title h1 {
      font-size: 20px;
    }
  
    .nav-title i {
      font-size: 16px;
    }
  
    .nav-spacer {
      width: 110px;
    }
  
    .consultation-wrapper {
      padding: 16px;
    }
  
    .consultation-main {
      padding: 20px 16px;
    }
  
    .consultation-hero {
      padding: 24px 20px;
      margin-bottom: 24px;
    }
  
    .hero-icon {
      font-size: 44px;
      margin-bottom: 14px;
    }
  
    .consultation-hero h2 {
      font-size: 24px;
      margin-bottom: 12px;
    }
  
    .hero-description {
      font-size: 15px;
      margin-bottom: 22px;
      line-height: 1.5;
    }
  
    .search-container {
      max-width: 480px;
      gap: 10px;
    }
  
    .search-input {
      padding: 14px 18px;
      font-size: 15px;
      min-height: 48px;
    }
  
    .search-btn {
      padding: 10px 12px;
      min-width: 40px;
      width: 40px;
      height: 40px;
      font-size: 13px;
    }
  
    .consultation-sidebar {
      padding: 20px;
      margin-bottom: 20px;
    }
  
    .sidebar-nav {
      gap: 10px;
    }
  
    .sidebar-link {
      padding: 12px 16px;
      font-size: 14px;
      min-height: 48px;
    }
  
    .consultation-content {
      padding: 24px 20px;
    }
  
    .cards-grid {
      gap: 18px;
      margin-top: 18px;
    }
  
    .action-card {
      padding: 18px;
      min-height: 160px;
      border-radius: 14px;
    }
  
    .card-icon {
      width: 56px;
      height: 56px;
      font-size: 22px;
      margin-bottom: 14px;
    }
  
    .action-card h3 {
      font-size: 17px;
      margin-bottom: 12px;
    }
  
    .card-description {
      font-size: 14px;
      margin-bottom: 18px;
      line-height: 1.4;
    }
  
    .card-button {
      padding: 12px 18px;
      font-size: 14px;
      min-height: 48px;
    }
  
    .help-hint {
      padding: 14px;
      margin: 12px 0;
      border-radius: 14px;
    }
  
    .help-hint .hint-content {
      font-size: 14px;
    }
  
    .help-hint .hint-content strong {
      font-size: 16px;
      margin-bottom: 12px;
    }
  }

  /* Средние мобильные (481px - 640px) */
  @media (min-width: 481px) and (max-width: 640px) {
    .consultation-nav {
      padding: 14px 18px;
    }

    .nav-title h1 {
      font-size: 19px;
    }

    .consultation-main {
      padding: 20px 18px;
    }

    .consultation-hero {
      padding: 28px 20px;
      margin-bottom: 28px;
    }

    .hero-icon {
      font-size: 44px;
    }

    .consultation-hero h2 {
      font-size: 24px;
    }

    .hero-description {
      font-size: 15px;
    }

    .search-container {
      max-width: 450px;
    }

    .consultation-sidebar {
      padding: 22px;
      margin-bottom: 22px;
    }

    .consultation-content {
      padding: 28px 24px;
    }

    .cards-grid {
      gap: 18px;
      margin-top: 18px;
    }

    .action-card {
      padding: 18px;
    }

    .card-icon {
      width: 56px;
      height: 56px;
      font-size: 22px;
    }

    .action-card h3 {
      font-size: 17px;
    }

    .card-description {
      font-size: 14px;
    }

    .card-button {
      padding: 13px 18px;
      font-size: 14px;
    }
.container {
  width: min(98vw, 650px); padding: clamp(8px, 1.5vh, 16px); }
    .menu-card-title { font-size: 14px; }
    .menu-card-desc { font-size: 12px; }
    .district-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
    .calendar-date { font-size: 11px; min-height: 34px; }
    .calendar-nav { font-size: 13px; padding: 1px 4px; width: 28px; height: 24px; }
    .carousel-slide { padding: 2px 1px; gap: 4px; }
    .place-header { font-size: 16px; }
    .place-row { font-size: 11px; }
    .place-subline { font-size: 12px; gap: 8px; }
    .modal-form-content { max-width: 380px; }
  }

  /* Мобильные устройства (до 480px) - оптимизированный медиа-запрос */
  @media (max-width: 480px) {
    body {
      font-size: 15px;
      line-height: 1.5;
    }

    .consultation-nav {
      padding: 10px 12px;
    }

    .nav-back-btn {
      padding: 6px 8px;
      font-size: 12px;
      min-height: 40px;
    }

    .nav-back-btn span {
      display: none;
    }

    .nav-title h1 {
      font-size: 16px;
    }

    .nav-title i {
      display: none;
    }

    .consultation-wrapper {
      padding: 10px;
      justify-content: flex-start;
    }

    .consultation-main {
      padding: 12px 8px;
    }

    .consultation-hero {
      padding: 16px 12px;
      margin-bottom: 16px;
    }

    .hero-icon {
      font-size: 36px;
      margin-bottom: 10px;
    }

    .consultation-hero h2 {
      font-size: 20px;
      margin-bottom: 10px;
    }

    .hero-description {
      font-size: 14px;
      margin-bottom: 18px;
      line-height: 1.4;
    }

    .search-container {
      gap: 8px;
    }

    .search-input {
      padding: 12px 14px;
      font-size: 14px;
      min-height: 44px;
    }

    .search-btn {
      padding: 12px 14px;
      min-width: 44px;
      min-height: 44px;
    }

    .consultation-sidebar {
      padding: 14px;
      margin-bottom: 14px;
    }

    .sidebar-nav {
      gap: 8px;
    }

    .sidebar-link {
      padding: 10px 12px;
      font-size: 13px;
      min-height: 44px;
    }

    .consultation-content {
      padding: 16px 12px;
    }

    .cards-grid {
      gap: 14px;
      margin-top: 14px;
    }

    .action-card {
      padding: 14px;
      min-height: 140px;
      border-radius: 12px;
    }

    .card-icon {
      width: 48px;
      height: 48px;
      font-size: 20px;
      margin-bottom: 12px;
    }

    .action-card h3 {
      font-size: 16px;
      margin-bottom: 10px;
    }

    .card-description {
      font-size: 13px;
      margin-bottom: 16px;
      line-height: 1.4;
    }

    .card-button {
      padding: 10px 14px;
      font-size: 13px;
      min-height: 44px;
    }

    .help-hint {
      padding: 12px;
      margin: 10px 0;
      border-radius: 12px;
    }

    .help-hint .hint-content {
      font-size: 13px;
    }

    .help-hint .hint-content strong {
      font-size: 15px;
      margin-bottom: 10px;
    }
  }

  /* Экстремально маленькие экраны (до 360px) - оптимизированная навигация */
  @media (max-width: 360px) {
    body {
      font-size: 14px;
      line-height: 1.4;
    }
  
    .consultation-wrapper {
      padding: 6px;
      min-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
      gap: 8px;
    }
  
    .consultation-nav {
      padding: 6px 8px;
    }
  
    .nav-back-btn {
      padding: 4px 6px;
      font-size: 11px;
      min-height: 40px;
      min-width: 80px;
    }
  
    .nav-title {
      gap: 6px;
    }
  
    .nav-title h1 {
      font-size: 15px;
    }
  
    .nav-spacer {
      width: 80px;
    }
  
    /* Оптимизация для очень маленьких экранов */
    .consultation-hero {
      padding: 16px 12px;
      margin-bottom: 16px;
    }
  
    .hero-icon {
      font-size: 32px;
      margin-bottom: 8px;
    }
  
    .consultation-hero h2 {
      font-size: 18px;
      margin-bottom: 8px;
    }
  
    .hero-description {
      font-size: 13px;
      margin-bottom: 16px;
      line-height: 1.4;
    }
  
    .search-container {
      gap: 8px;
    }
  
    .search-input {
      padding: 10px 12px;
      font-size: 14px;
      min-height: 40px;
    }
  
    .search-btn {
      padding: 8px 10px;
      min-width: 36px;
      width: 36px;
      height: 36px;
      font-size: 12px;
    }
  
    .consultation-sidebar {
      padding: 12px;
      margin-bottom: 12px;
    }
  
    .sidebar-nav {
      gap: 8px;
    }
  
    .sidebar-link {
      padding: 8px 10px;
      font-size: 12px;
      min-height: 40px;
    }
  
    .consultation-content {
      padding: 12px 8px;
    }
  
    .cards-grid {
      gap: 12px;
      margin-top: 12px;
    }
  
    .action-card {
      padding: 10px;
      min-height: 120px;
      border-radius: 10px;
    }
  
    .card-icon {
      width: 40px;
      height: 40px;
      font-size: 16px;
      margin-bottom: 8px;
    }
  
    .action-card h3 {
      font-size: 15px;
      margin-bottom: 8px;
    }
  
    .card-description {
      font-size: 12px;
      margin-bottom: 12px;
      line-height: 1.3;
    }
  
    .card-button {
      padding: 8px 12px;
      font-size: 12px;
      min-height: 40px;
    }
  
    .help-hint {
      padding: 10px;
      margin: 8px 0;
      border-radius: 10px;
    }
  
    .help-hint .hint-content {
      font-size: 12px;
    }
  
    .help-hint .hint-content strong {
      font-size: 14px;
      margin-bottom: 8px;
    }
  }

    .consultation-main {
      padding: 6px 4px;
    }

    .consultation-hero {
      padding: 10px 8px;
      margin-bottom: 10px;
    }

    .hero-icon {
      font-size: 28px;
      margin-bottom: 6px;
    }

    .consultation-hero h2 {
      font-size: 17px;
      margin-bottom: 6px;
    }

    .hero-description {
      font-size: 12px;
      margin-bottom: 12px;
      line-height: 1.3;
    }

    .search-container {
      gap: 6px;
    }

    .search-input {
      padding: 8px 10px;
      font-size: 13px;
      min-height: 40px;
    }

    .search-btn {
      padding: 6px 8px;
      min-width: 32px;
      width: 32px;
      height: 32px;
      font-size: 11px;
    }

    .consultation-sidebar {
      padding: 10px;
      margin-bottom: 10px;
      max-height: calc(100vh - 80px); /* Еще более уменьшенная высота для очень маленьких экранов */
      min-height: 120px;
    }

    .sidebar-nav {
      gap: 6px;
    }

    .sidebar-link {
      padding: 8px 10px;
      font-size: 12px;
      min-height: 40px;
    }

    .consultation-content {
      padding: 10px 8px;
    }

    .cards-grid {
      gap: 10px;
      margin-top: 10px;
    }

    .action-card {
      padding: 8px;
      min-height: 110px;
      border-radius: 8px;
    }

    .card-icon {
      width: 36px;
      height: 36px;
      font-size: 14px;
      margin-bottom: 8px;
    }

    .action-card h3 {
      font-size: 14px;
      margin-bottom: 6px;
    }

    .card-description {
      font-size: 11px;
      margin-bottom: 10px;
      line-height: 1.3;
    }

    .card-button {
      padding: 8px 10px;
      font-size: 11px;
      min-height: 40px;
    }

    .help-hint {
      padding: 8px;
      margin: 8px 0;
      border-radius: 8px;
    }

    .help-hint .hint-content {
      font-size: 11px;
    }

    .help-hint .hint-content strong {
      font-size: 13px;
      margin-bottom: 6px;
    }
  

  /* Дополнительные промежуточные медиа-запросы для плавных переходов */

  /* Средние планшеты (641px - 768px) */
  @media (min-width: 641px) and (max-width: 768px) {
    .consultation-main {
      grid-template-columns: 300px 1fr;
      gap: 36px;
    }

    .consultation-hero {
      padding: 44px 36px;
    }

    .consultation-sidebar {
      padding: 28px;
    }

    .consultation-content {
      padding: 36px;
    }

    .cards-grid {
      grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
      gap: 26px;
    }
  }

  /* Малые десктопы (769px - 1024px) */
  @media (min-width: 769px) and (max-width: 1024px) {
    .consultation-main {
      grid-template-columns: 300px 1fr;
      gap: 36px;
      padding: 28px;
    }

    .consultation-hero {
      padding: 44px 36px;
    }

    .consultation-sidebar {
      padding: 28px;
    }

    .consultation-content {
      padding: 36px;
    }

    .cards-grid {
      grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
      gap: 26px;
    }
  }

  /* Средние десктопы (1025px - 1200px) */
  @media (min-width: 1025px) and (max-width: 1200px) {
    .consultation-main {
      grid-template-columns: 300px 1fr;
      gap: 28px;
      padding: 24px;
    }

    .consultation-hero {
      padding: 36px 28px;
    }

    .consultation-sidebar {
      padding: 24px;
    }

    .consultation-content {
      padding: 28px;
    }

    .cards-grid {
      grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
      gap: 22px;
    }
  }

  /* Большие десктопы (1201px+) */
  @media (min-width: 1201px) {
    .consultation-main {
      grid-template-columns: 320px 1fr;
      gap: 32px;
      padding: 28px;
    }

    .consultation-hero {
      padding: 40px 32px;
    }

    .consultation-sidebar {
      padding: 28px;
    }

    .consultation-content {
      padding: 32px;
    }

    .cards-grid {
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 24px;
    }
  }

  /* Плавные переходы для адаптивных изменений */
  .container,
  .menu-card,
  .district-btn,
  .calendar-date,
  .carousel-slide,
  .place-card,
  .modal-form-content,
  .consultation-nav,
  .consultation-hero,
  .consultation-sidebar,
  .consultation-content,
  .cards-grid,
  .action-card {
    transition: all var(--tr-base) ease;
  }

  /* Оптимизация для landscape ориентации на мобильных */
  @media (orientation: landscape) and (max-height: 500px) {
    body { padding-top: calc(env(safe-area-inset-top, 0px) + var(--app-top-offset) + 10px); }
    .container { padding: clamp(4px, 1vh, 8px); margin: clamp(4px, 1vh, 8px) auto; }
    h1 { font-size: clamp(16px, 2vw + 12px, 20px); margin-bottom: 6px; }
    .menu-card { padding: clamp(4px, 1vw, 6px); }
    .calendar-date { min-height: 28px; font-size: 10px; }
    #booking-calendar { min-height: clamp(180px, 30vh, 240px); }
  }

  @media (max-width: 340px) {
    body { font-size: 14.5px; }
    .calendar-date { font-size: 9.5px; min-height: 28px; }
  }

  @supports (padding: max(0px)) { body { padding-bottom: max(16px, env(safe-area-inset-bottom)); } }

  .booking-code-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
  }
  
  .booking-code-row input {
    flex: 1;
  }
  
  /* Кнопки отмены и удаления с улучшенной визуализацией */
  .remove-code-btn,
  .btn-cancel,
  .btn-remove,
  .btn-delete {
    background: linear-gradient(135deg, #ff7e5f, #feb47b) !important;
    border: 2px solid #ff7e5f !important;
    color: #FFFFFF !important;
    -webkit-color: #FFFFFF !important;
    font-weight: bold;
    font-size: 18px;
    border-radius: 10px;
    width: 44px;
    height: 44px;
    cursor: pointer;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(255, 126, 95, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transform: translateZ(0) !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .remove-code-btn::before,
  .btn-cancel::before,
  .btn-remove::before,
  .btn-delete::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
  }

  .remove-code-btn:hover,
  .btn-cancel:hover,
  .btn-remove:hover,
  .btn-delete:hover {
    background: linear-gradient(135deg, #E74C3C 0%, #C0392B 100%) !important;
    border-color: #C0392B !important;
    color: #FFFFFF !important;
    -webkit-color: #FFFFFF !important;
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: 0 6px 20px rgba(255, 107, 71, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  }

  .remove-code-btn:hover::before,
  .btn-cancel:hover::before,
  .btn-remove:hover::before,
  .btn-delete:hover::before {
    left: 100%;
  }

  .remove-code-btn:active,
  .btn-cancel:active,
  .btn-remove:active,
  .btn-delete:active {
    transform: translateY(0) scale(0.98) !important;
    box-shadow: 0 2px 8px rgba(231, 76, 60, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    transition-duration: 0.1s !important;
  }

  .district-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: clamp(8px, 2vw, 16px);
    margin: clamp(8px, 2vh, 16px) 0;
  }
  
  .district-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    padding: 12px;
    border-radius: 12px;
    background: linear-gradient(180deg, var(--brand) 0%, var(--brand-2) 100%) !important;
    color: #FFFFFF !important;
    -webkit-color: #FFFFFF !important;
  }

  .district-btn .district-title {
    font-size: 16px;
    font-weight: 800;
    color: #FFFFFF !important;
    -webkit-color: #FFFFFF !important;
  }
  
  .district-btn .district-sub {
    font-size: 13px;
    font-weight: 500;
    color: #FFFFFF !important;
    -webkit-color: #FFFFFF !important;
    margin-top: 4px;
    line-height: 1.4;
    font-style: italic;   /* 👈 теперь курсив */
  }
  
  .district-btn:hover {
    background: linear-gradient(180deg, var(--brand-2) 0%, #5A4BDC 100%) !important;
  }

  .place-photo-wrapper {
    position: relative;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    margin: 6px 0 10px 0;
    box-shadow: 0 8px 20px rgba(17,24,39,0.08);
    background: #000000;
  }
  
  .place-photo-wrapper img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
    cursor: pointer;
  }
  
  /* Стрелки управления на фото */
  .place-photo-wrapper .photo-prev,
.place-photo-wrapper .photo-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.45);
  color: white;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,.25);
  transition: background .2s, transform .2s;
}
  
  .place-photo-wrapper .photo-prev { left: 10px; }
  .place-photo-wrapper .photo-next { right: 10px; }
  
  .place-photo-wrapper .photo-prev:hover,
  .place-photo-wrapper .photo-next:hover {
    background: rgba(0, 0, 0, 0.65);
    transform: translateY(-50%) scale(1.1);
  }
  
  @media (hover: none) {
    /* На телефонах стрелки всегда видимые */
    .place-photo-wrapper .photo-prev,
    .place-photo-wrapper .photo-next {
      background: rgba(0,0,0,0.55);
    }
  }

  .menu-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
    }
    .menu-card {
    background: #FFFFFF;
    border: 1px solid #e0e0ff;
    border-radius: 10px;
    padding: clamp(8px, 2vw, 12px);
    text-align: left;
    box-shadow: var(--shadow-soft);
    margin-bottom: clamp(6px, 1.5vh, 12px);
    }
    .menu-card-title {
    font-weight: 800;
    font-size: 15px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: black !important;
    -webkit-color: black !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
    }
    .menu-card-desc {
    font-size: 13px;
    color: black !important;
    -webkit-color: black !important;
    margin-bottom: 10px;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
    }
   
    .menu-card .menu-button {
    width: 100%;
    background: linear-gradient(180deg, var(--brand) 0%, var(--brand-2) 100%);
    color: #fff;
    font-weight: 700;
    border-radius: 10px;
  }

  .metro-icon {
    width: 18px;
    height: 18px;
    max-width: 18px;
    max-height: 18px;
    object-fit: contain;
    margin-right: 4px;
    display: inline-block;
    vertical-align: middle;
  }

  /* Полностью занятый день */
  .calendar-date.disabled-full {
    background: linear-gradient(180deg, #FF6B6B 0%, #D64545 100%) !important;
    border-color: var(--brand);
    color: #fff !important;
    font-weight: 700;
    cursor: not-allowed;
    position: relative;
    box-shadow: 0 2px 6px rgba(214, 69, 69, 0.3);
  }
.calendar-date.disabled-full::after {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 11px;
  color: black !important;
}

/* Частично занятый день */
.calendar-date.partial-busy {
  background: linear-gradient(180deg, #FFEAA7 0%, #FFD86F 100%) !important;
  border-color: var(--brand);
  color: black !important;
  font-weight: 600;
  position: relative;
  box-shadow: 0 2px 6px rgba(246, 185, 59, 0.3);
}
.calendar-date.partial-busy::after {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 11px;
  color: black !important;
}

.calendar-legend {
  display: flex;
  flex-direction: column; /* 👉 вертикально */
  align-items: flex-start; /* выравнивание влево */
  gap: 4px;  /* отступы между пунктами */
  margin: 8px 0 12px;
  font-size: 12px;
  color: black !important;
  -webkit-color: black !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
}

.calendar-legend div {
  display: flex;
  align-items: center;
  gap: 6px;
}

.calendar-legend .legend-box {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  margin-right: 4px;
}

.calendar-legend .free {
  background: #fff;
  border: 1.5px solid #E3E6F7;
}
.calendar-legend .partial {
  background: linear-gradient(180deg, #FFEAA7 0%, #FFD86F 100%);
  border: 1.5px solid #F6B93B;
}
.calendar-legend .full {
  background: linear-gradient(180deg, #FF6B6B 0%, #D64545 100%);
  border: 1.5px solid #FF8A8A;
}
.calendar-legend .selected {
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-2) 100%);
}

/* 🚫 Прошедшие даты */
.calendar-date.past {
  background: #FFF1F1 !important;
  color: black !important;
  border-color: var(--brand);
  font-weight: 600;
  cursor: not-allowed;
  opacity: 0.25;   /* 👈 теперь более прозрачные */
}

/* Унифицированные светлые кнопки */
.btn-gray,
.btn-muted,
.btn-light {
  background: #FFFFFF !important;
  color: #6C5CE7 !important;
  -webkit-color: #6C5CE7 !important;
  border: 1px solid #6C5CE7 !important;
  box-shadow: 0 2px 8px rgba(108, 92, 231, 0.2) !important;
  transition: all 0.3s ease !important;
}

.btn-gray:hover,
.btn-muted:hover,
.btn-light:hover {
  background: #F8F7FF !important;
  border-color: #5A4BDC !important;
  box-shadow: 0 4px 16px rgba(108, 92, 231, 0.3) !important;
  transform: translateY(-1px) !important;
  color: #5A4BDC !important;
  -webkit-color: #5A4BDC !important;
}

/* Карточка-кнопка "Задать вопрос" на странице консультации */
.consult-card-purple {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 50%, #8B5CF6 100%);
  color: #FFFFFF;
  padding: 20px;
  border-radius: var(--radius-lg);
  cursor: pointer;
  width: 100%;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 6px 20px rgba(108, 92, 231, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.consult-card-purple:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(108, 92, 231, 0.35);
}

.consult-card-purple .card-icon {
  font-size: 2.5rem;
  color: #FFFFFF;
  margin-bottom: 12px;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  width: auto;
  height: auto;
}

.consult-card-purple h5 {
  font-weight: 700;
  font-size: 1.1rem;
  color: #FFFFFF !important;
  margin: 0 0 4px 0;
}
.consult-card-purple p {
  font-size: 0.9rem;
  opacity: 0.9;
  margin: 0;
}

/* Контейнер с точками */
.place-photo-wrapper .photo-indicators {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  justify-content: center;
}

/* Обычная точка */

.place-photo-wrapper .photo-indicators .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FFFFFF;
  transition: all 0.2s ease;
}
/* Активная точка */
.place-photo-wrapper .photo-indicators .dot.active {
  background: var(--brand);
  transform: scale(1.2);
  box-shadow: 0 0 4px rgba(0,0,0,0.2);

}

/* =========================================================
   Общий лоадер "матрёшка-спиннер"
   ========================================================= */
   /* Новый универсальный спиннер */
.matreshka-spinner {
  width: 64px;
  height: 64px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.matreshka-spinner img {
  width: 100%;
  height: 100%;
  animation: matreshkaRotate 1.2s linear infinite;
}

@keyframes matreshkaRotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#btn-today {
  transition: opacity 0.2s ease;
}
#btn-today[hidden] {
  display: block !important; /* сохраняем место */
  opacity: 0;
  pointer-events: none;
}

/* строка: дата слева, крестик справа */
.date-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}



.remove-date-icon:hover {
  color: black !important;
}


/* Ряд с селектами (возвращаем как у тебя и было) */
.select-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
}

/* =========================================================
   Карточки бронирований
   ========================================================= */
   .booking-summary {
      background: #fff;
      border: 1.5px solid #E4E6F5;
      border-radius: 14px;
      padding: 16px 18px;
      margin: 4px 0;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
      text-align: left;
      transition: box-shadow 0.2s ease;
      color: black !important;
      -webkit-color: black !important;
      text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
    }
  
  .booking-summary:hover {
    box-shadow: 0 6px 18px rgba(0,0,0,.1);
  }
  
  .booking-summary.canceled {
    background: #fff5f5;
    border: 1.5px solid #ffd6d6;
    opacity: 0.9;
  }

  .funny-text {
    font-size: 15px;
    font-weight: 600;
    color: black !important;
    margin-top: 8px;
    animation: pulseText 1.2s infinite;
  }

  @keyframes pulseText {
    0%   { opacity: 0.6; transform: scale(1);   }
    50%  { opacity: 1;   transform: scale(1.05);}
    100% { opacity: 0.6; transform: scale(1);   }
  }

  /* ===== Матрешка-анимация при входе ===== */
.matreshka-loader {
  width: 96px;
  height: 96px;
  margin: 0 auto 14px;
  position: relative;
}

.matreshka-loader img {
  width: 100%;
  height: 100%;
  animation: matreshkaSpin 1.6s linear infinite,
             matreshkaBounce 1.6s ease-in-out infinite alternate;
}

/* Вращение */
@keyframes matreshkaSpin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Ничтожная подпрыгивающая анимация */
@keyframes matreshkaBounce {
  0%   { transform: scale(1) translateY(0); }
  50%  { transform: scale(1.05) translateY(-6px); }
  100% { transform: scale(1) translateY(0); }
}

/* Текст */
.loading-text {
  font-size: 14px;
  color: black !important;
  font-weight: 600;
  animation: pulseText 1.2s infinite;
}
@keyframes pulseText {
  0%   { opacity: 0.6; }
  50%  { opacity: 1;   }
  100% { opacity: 0.6; }
}

.faq-answer {
  background: #FFFFFF;
  border: 1px solid #e0e0ff;
  border-radius: 12px;
  padding: 10px;
  margin: 6px 0 12px;
  font-size: 14px;
  text-align: left;
  white-space: pre-line;
  color: black !important;
  -webkit-color: black !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
}

/* =========================================================
   Улучшенные анимации и переходы
   ========================================================= */

/* Плавные переходы между разделами */
.container {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.container.fade-out {
  opacity: 0;
  transform: translateX(-10px);
}

.container.fade-in {
  opacity: 1;
  transform: translateX(0);
}

/* Анимация появления карточек */
.menu-card, .district-btn, .place-card {
  animation: slideInUp 0.4s ease both;
  animation-delay: calc(var(--index, 0) * 0.1s);
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Улучшенные hover эффекты для кнопок */
.menu-button:active {
  transition-duration: 0.1s;
}

/* Анимация загрузки календаря */
.calendar-loading {
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

/* Анимация для модальных окон */
.modal-form {
  animation: modalSlideIn 0.3s ease both;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Анимация для прогресс-бара */
.progress-step {
  animation: stepAppear 0.5s ease both;
}

.progress-step:nth-child(1) { animation-delay: 0.1s; }
.progress-step:nth-child(2) { animation-delay: 0.2s; }
.progress-step:nth-child(3) { animation-delay: 0.3s; }
.progress-step:nth-child(4) { animation-delay: 0.4s; }
.progress-step:nth-child(5) { animation-delay: 0.5s; }

@keyframes stepAppear {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Улучшенная анимация для выбора дат */
.calendar-date:hover {
  transform: scale(1.05);
  transition: transform 0.2s ease;
}


/* Анимация для успешных действий */

.success-animation {
  animation: successPulse 0.6s ease both;
}

/* =========================================================
     Прогресс-бар бронирования (улучшенный современный дизайн)
     ========================================================= */
.booking-progress {
  width: min(94vw, 560px);
  margin: clamp(8px, 2vh, 16px) auto clamp(2px, 1vh, 8px);
  background: linear-gradient(135deg, #FFFFFF 0%, #F8F9FF 100%);
  border-radius: var(--radius-lg);
  padding: clamp(16px, 3vw, 20px);
  box-shadow: 0 8px 32px rgba(108, 92, 231, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(108, 92, 231, 0.15);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  /* Улучшенная accessibility */
  /* Анимация появления */
  animation: progressBarSlideIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes progressBarSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.booking-progress::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-2) 50%, #8B5CF6 100%);
  opacity: 0.8;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* Декоративный элемент фона */
.booking-progress::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(108, 92, 231, 0.03) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}

.progress-steps {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  position: relative;
  gap: 6px;
  z-index: 2;
}

.progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 2;
  flex: 1;
  position: relative;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.progress-step:hover {
  transform: translateY(-3px);
  filter: brightness(1.05);
}

/* Соединительная линия между шагами */
.progress-step::before {
  content: '';
  position: absolute;
  top: 18px;
  left: 50%;
  right: -50%;
  height: 2px;
  background: linear-gradient(90deg, #E5E7EB 0%, #D1D5DB 100%);
  z-index: -1;
  transition: all 0.4s ease;
}

.progress-step:last-child::before {
  display: none;
}

.step-circle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F1F5F9 0%, #E2E8F0 100%);
  color: #64748B !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  border: 3px solid #E5E7EB;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.8);
  position: relative;
  overflow: hidden;
  /* Улучшенная accessibility */
  /* Улучшенные эффекты */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transform: scale(1);
}

/* Эффект пульса для активного шага */
.step-circle::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255,255,255,0.4);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}

/* Внутренний блик */
.step-circle::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, transparent 50%, rgba(255,255,255,0.1) 100%);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 0;
}

.step-circle::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255,255,255,0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.4s ease;
}

.step-circle:hover::before {
  width: 120%;
  height: 120%;
}

.step-label {
  font-size: 12px;
  color: #64748B !important;
  text-align: center;
  font-weight: 600;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
  line-height: 1.3;
  max-width: 85px;
  word-wrap: break-word;
  letter-spacing: 0.025em;
  position: relative;
}

/* Активный шаг */
.progress-step.active .step-circle {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 50%, #8B5CF6 100%);
  color: #fff !important;
  border-color: var(--brand);
  transform: scale(1.15) translateY(-2px);
  box-shadow: 0 8px 24px rgba(108, 92, 231, 0.4), 0 2px 8px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.2);
  animation: stepActivePulse 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
  /* Улучшенные эффекты */
  filter: brightness(1.15) saturate(1.3) hue-rotate(0deg);
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
  position: relative;
  z-index: 10;
}

.progress-step.active .step-circle::before {
  width: 120%;
  height: 120%;
  background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
  animation: activePulse 2s ease-in-out infinite;
}

.progress-step.active .step-circle::after {
  opacity: 0.8;
  animation: circleGlow 2s ease-in-out infinite alternate;
}

.progress-step.active .step-label {
  color: var(--brand) !important;
  font-weight: 800;
  transform: translateY(-2px);
  font-size: 13px;
  letter-spacing: 0.05em;
  text-shadow: 0 2px 4px rgba(108, 92, 231, 0.2);
}

/* Завершенный шаг */
.progress-step.completed .step-circle {
  background: linear-gradient(135deg, #10B981 0%, #059669 50%, #047857 100%);
  color: #fff !important;
  border-color: #10B981;
  transform: scale(1.08) translateY(-1px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.35), 0 2px 8px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.2);
  animation: stepCompletedBounce 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
  position: relative;
}

.progress-step.completed .step-circle::before {
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255,255,255,0.25) 0%, transparent 60%);
}

.progress-step.completed .step-circle::after {
  opacity: 0.6;
}

.progress-step.completed .step-label {
  color: #059669 !important;
  font-weight: 700;
  transform: translateY(-1px);
  font-size: 12px;
  letter-spacing: 0.03em;
}

/* Анимации для шагов */
@keyframes stepActivePulse {
  0% {
    transform: scale(1) translateY(0);
    box-shadow: 0 4px 12px rgba(108, 92, 231, 0.2);
  }
  50% {
    transform: scale(1.2) translateY(-4px);
    box-shadow: 0 12px 32px rgba(108, 92, 231, 0.5);
  }
  100% {
    transform: scale(1.15) translateY(-2px);
    box-shadow: 0 8px 24px rgba(108, 92, 231, 0.4);
  }
}

@keyframes stepCompletedBounce {
  0% {
    transform: scale(1) translateY(0);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
  }
  50% {
    transform: scale(1.12) translateY(-3px);
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4);
  }
  100% {
    transform: scale(1.08) translateY(-1px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.35);
  }
}

@keyframes activePulse {
  0%, 100% {
    opacity: 0.3;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1.2);
  }
}

@keyframes circleGlow {
  0% {
    opacity: 0.4;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1.1);
  }
}

@keyframes stepActive {
  0% {
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }
  50% {
    transform: scale(1.15);
    box-shadow: 0 6px 20px rgba(108, 92, 231, 0.4);
  }
  100% {
    transform: scale(1.1);
    box-shadow: 0 4px 16px rgba(108, 92, 231, 0.3);
  }
}

@keyframes stepCompleted {
  0% {
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }
  50% {
    transform: scale(1.15);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
  }
  100% {
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
  }
}

.progress-bar {
  position: relative;
  height: 8px;
  background: linear-gradient(135deg, #F1F5F9 0%, #E2E8F0 100%);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  margin-top: 12px;
  border: 1px solid rgba(148, 163, 184, 0.1);
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-2) 30%, #8B5CF6 60%, #A855F7 100%);
  border-radius: 10px;
  transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
  width: 0%;
  position: relative;
  box-shadow: 0 0 15px rgba(108, 92, 231, 0.5), inset 0 1px 0 rgba(255,255,255,0.2);
  /* Улучшенные эффекты */
  filter: brightness(1.15) saturate(1.3);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  overflow: hidden;
}

/* Анимированный блик */
.progress-fill::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.4) 30%,
    rgba(255,255,255,0.8) 50%,
    rgba(255,255,255,0.4) 70%,
    transparent 100%);
  animation: progressShimmer 2.5s ease-in-out infinite;
  border-radius: 10px;
}

/* Внутренний градиент для объема */
.progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.2) 0%,
    transparent 50%,
    rgba(0,0,0,0.1) 100%);
  border-radius: 10px;
  pointer-events: none;
}

@keyframes progressShimmer {
  0% {
    left: -100%;
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}

/* Эффект пульса при заполнении */
@keyframes progressPulse {
  0%, 100% {
    box-shadow: 0 0 15px rgba(108, 92, 231, 0.5);
  }
  50% {
    box-shadow: 0 0 25px rgba(108, 92, 231, 0.8), 0 0 35px rgba(168, 85, 247, 0.4);
  }
}

/* Новые анимации для улучшенного UX */
@keyframes progressPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 10px rgba(108, 92, 231, 0.4);
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 0 20px rgba(108, 92, 231, 0.6);
  }
}

@keyframes stepBounce {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1.1); }
}

@keyframes loadingShimmer {
  0% { transform: translateX(-100%) skewX(-15deg); }
  100% { transform: translateX(200%) skewX(-15deg); }
}

/* =========================================================
   Мобильная адаптивность и улучшения UX
   ========================================================= */

/* Общие мобильные улучшения */
@media (max-width: 768px) {
  body {
    font-size: 16px;
    line-height: 1.5;
    padding-top: calc(env(safe-area-inset-top, 0px) + var(--app-top-offset) + 40px);
  }

  body::before {
    background-size: 70%;
    opacity: 1;
    transition: background-size 0.3s ease, opacity 0.3s ease;
  }

  .container {
    width: 96vw;
    max-width: 450px;
    padding: 16px 20px;
    margin: 10px auto;
    border-radius: 16px;
  }

  .container::before {
    background-size: 40%;
    opacity: 0.06;
  }

  .modal-form::before {
    background-size: 30%;
    opacity: 0.05;
  }

  .modal-image::before {
    background-size: 25%;
    opacity: 0.08;
  }

  .logo {
    height: 60px;
    margin: 15px 0;
  }

  h1 {
    font-size: 20px;
    margin-bottom: 16px;
  }

  h2 {
    font-size: 18px;
  }

  .menu-button {
    font-size: 16px;
    padding: 14px 16px;
    min-height: 48px;
    margin-bottom: 8px;
    background: linear-gradient(180deg, var(--brand) 0%, var(--brand-2) 100%);
    color: #fff;
  }

  .menu-button.btn-white {
    background-color: #FFFFFF;
    color: black !important;
    border: 1px solid var(--border);
  }

  .menu-button.btn-white:hover {
    background-color: var(--card-bg);
    border-color: var(--brand);
  }

  .form-group input, .form-group textarea {
    font-size: 16px;
    padding: 12px 16px;
  }

  .description-text {
    font-size: 14px;
    line-height: 1.4;
  }

  /* Улучшенные breadcrumbs для мобильных */
  .breadcrumbs {
    font-size: 12px;
    padding: 8px 12px;
    margin-bottom: 10px;
    width: min(96vw, 600px);
  }

  .breadcrumbs a {
    display: inline-block;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Маленькие экраны (320px-480px) */
@media (max-width: 480px) {
  body {
    font-size: 15px;
    padding-top: calc(env(safe-area-inset-top, 0px) + var(--app-top-offset) + 30px);
  }

  .container {
    width: 98vw;
    max-width: 380px;
    padding: 8px 12px;
    margin: 3px auto;
    border-radius: 12px;
  }

  .logo {
    height: 50px;
    margin: 10px 0;
  }

  h1 {
    font-size: 18px;
    margin-bottom: 8px;
  }

  h2 {
    font-size: 16px;
    margin-bottom: 6px;
  }

  .menu-button {
    font-size: 15px;
    padding: 10px 12px;
    min-height: 42px;
    margin-bottom: 4px;
    border-radius: 10px;
    background: linear-gradient(180deg, var(--brand) 0%, var(--brand-2) 100%);
    color: #fff;
  }

  .menu-button.btn-white {
    background-color: #FFFFFF;
    color: black !important;
    border: 1px solid var(--border);
  }

  .menu-button.btn-white:hover {
    background-color: var(--card-bg);
    border-color: var(--brand);
  }

  .form-group {
    margin-bottom: 10px;
  }

  .form-group input, .form-group textarea {
    font-size: 15px;
    padding: 8px 12px;
    border-radius: 10px;
  }

  .description-text {
    font-size: 13px;
    line-height: 1.4;
  }

  .warning-note {
    font-size: 12px;
    padding: 8px 10px;
    border-radius: 10px;
  }

  /* Улучшенная сетка округов для маленьких экранов */
   .district-grid {
     grid-template-columns: 1fr;
     gap: clamp(6px, 1.5vw, 10px);
     margin: clamp(6px, 1.5vh, 12px) 0;
   }

   .place-card {
     padding: clamp(6px, 1.5vh, 10px) clamp(4px, 1vh, 8px) 0 clamp(4px, 1vh, 8px);
     border-radius: 12px;
     margin-bottom: clamp(6px, 1.5vh, 12px);
   }

   .district-grid {
     gap: clamp(8px, 2vw, 12px);
     margin: clamp(8px, 2vh, 14px) 0;
   }

  .district-btn {
    font-size: 14px;
    padding: 12px 14px;
    border-radius: 10px;
  }

  .district-title {
    font-size: 16px;
  }

  .district-sub {
    font-size: 12px;
  }

  /* Улучшенная карусель для мобильных */
  .carousel-slide {
    padding: 6px 2px;
  }

  .place-card {
    padding: clamp(6px, 1.5vh, 10px) clamp(4px, 1vh, 8px) 0 clamp(4px, 1vh, 8px);
    border-radius: 12px;
    margin-bottom: clamp(6px, 1.5vh, 12px);
  }

  .district-grid {
    gap: clamp(8px, 2vw, 12px);
    margin: clamp(8px, 2vh, 14px) 0;
  }

  .place-title {
    font-size: 16px;
  }

  .place-features {
    gap: 8px;
  }

  .place-feature {
    font-size: 12px;
    padding: 6px 8px;
    border-radius: 8px;
  }

  /* Улучшенный календарь для мобильных */
  .calendar-grid {
    gap: 2px;
    font-size: 13px;
    padding: 6px;
  }

  .calendar-date {
    width: 42px;
    height: 42px;
    font-size: 15px;
    border-radius: 10px;
  }

  .calendar-legend {
    font-size: 11px;
    gap: 6px;
  }

  .legend-box {
    width: 10px;
    height: 10px;
  }

  /* Улучшенные модальные окна для мобильных */
  .modal-form-content {
    width: 95vw;
    max-width: 380px;
    margin: 15px;
    padding: 14px;
    border-radius: 12px;
  }

  .modal-form h2 {
    font-size: 18px;
    margin-bottom: 12px;
  }

  /* Улучшенные списки для мобильных */
  .services-list {
    gap: 6px;
  }

  .services-list .menu-button {
    font-size: 14px;
    padding: 8px 10px;
    background: linear-gradient(180deg, var(--brand) 0%, var(--brand-2) 100%);
    color: #fff;
  }

  /* Улучшенные статусы для мобильных */
  .status-card {
    padding: 10px;
    border-radius: 10px;
  }

  .status-title {
    font-size: 14px;
  }

  .status-code {
    font-size: 12px;
  }

  .status-chip {
    font-size: 11px;
    padding: 3px 6px;
  }

  /* Улучшенные breadcrumbs для очень маленьких экранов */
  .breadcrumbs {
    font-size: 11px;
    padding: 4px 8px;
    margin-bottom: 6px;
    gap: 3px;
    width: min(96vw, 600px);
  }

  .breadcrumbs a {
    max-width: 60px;
  }

  /* Улучшенные селекты времени */
  .select-row {
    gap: 6px;
  }

  .select-control select {
    font-size: 13px;
    padding: 6px 18px 6px 4px;
  }

  /* Улучшенные кнопки прогресс-бара */
  .progress-steps {
    gap: 2px;
  }

  .step-circle {
    width: 26px;
    height: 26px;
    font-size: 10px;
  }

  .step-label {
    font-size: 9px;
  }

  .progress-bar {
    height: 3px;
    margin-top: 10px;
  }
}

/* Средние экраны (планшеты) */
@media (min-width: 481px) and (max-width: 768px) {
  body::before {
    background-size: 60%;
    opacity: 0.2;
  }

  .container {
    width: min(90vw, 500px);
    padding: 18px 22px;
    border-radius: 16px;
  }

  .container::before {
    background-size: 50%;
    opacity: 0.04;
  }

  .modal-form::before {
    background-size: 40%;
    opacity: 0.06;
  }

  .modal-image::before {
    background-size: 35%;
    opacity: 0.09;
  }

  .logo {
    height: 65px;
    margin: 18px 0;
  }

  h1 {
    font-size: 22px;
    margin-bottom: 18px;
  }

  h2 {
    font-size: 18px;
    margin-bottom: 12px;
  }

  .menu-button {
    font-size: 16px;
    padding: 14px 18px;
    min-height: 48px;
    margin-bottom: 10px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 50%, #8B5CF6 100%);
    color: #fff;
    box-shadow: 0 4px 16px rgba(108, 92, 231, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .menu-button:hover {
    background: linear-gradient(135deg, var(--brand-2) 0%, #5A4BDC 50%, #7C3AED 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(108, 92, 231, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  }

  .menu-button.btn-white {
    background-color: #FFFFFF;
    color: black !important;
    border: 1px solid var(--border);
  }

  .menu-button.btn-white:hover {
    background-color: var(--card-bg);
    border-color: var(--brand);
  }

  .menu-button.btn-white {
    background-color: #FFFFFF;
    color: black !important;
    border: 1px solid var(--border);
  }

  .menu-button.btn-white:hover {
    background-color: var(--card-bg);
    border-color: var(--brand);
  }

  .form-group input, .form-group textarea {
    font-size: 16px;
    padding: 12px 16px;
    border-radius: 12px;
  }

  .description-text {
    font-size: 14px;
    line-height: 1.5;
  }

  .warning-note {
    font-size: 13px;
    padding: 12px 16px;
    border-radius: 12px;
  }

  /* Улучшенная сетка округов для планшетов */
   .district-grid {
     grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
     gap: clamp(10px, 2.5vw, 16px);
     margin: clamp(10px, 2.5vh, 18px) 0;
   }

   .place-card {
     padding: clamp(10px, 2.5vh, 14px) clamp(6px, 1.5vh, 10px) 0 clamp(6px, 1.5vh, 10px);
     border-radius: 14px;
     margin-bottom: clamp(10px, 2.5vh, 18px);
   }

   .district-grid {
     gap: clamp(12px, 3vw, 18px);
     margin: clamp(12px, 3vh, 20px) 0;
   }

  .district-btn {
    font-size: 15px;
    padding: 14px 16px;
    border-radius: 12px;
  }

  .district-title {
    font-size: 17px;
  }

  .district-sub {
    font-size: 13px;
  }

  /* Улучшенная карусель для планшетов */
  .carousel-slide {
    padding: 16px;
  }

  .place-card {
    padding: clamp(10px, 2.5vh, 14px) clamp(6px, 1.5vh, 10px) 0 clamp(6px, 1.5vh, 10px);
    border-radius: 14px;
    margin-bottom: clamp(10px, 2.5vh, 18px);
  }

  .district-grid {
    gap: clamp(12px, 3vw, 18px);
    margin: clamp(12px, 3vh, 20px) 0;
  }

  .place-title {
    font-size: 17px;
  }

  .place-features {
    gap: 10px;
  }

  .place-feature {
    font-size: 13px;
    padding: 8px 10px;
    border-radius: 10px;
  }

  /* Улучшенный календарь для планшетов */
  .calendar-grid {
    gap: 6px;
    font-size: 15px;
    padding: 14px;
  }

  .calendar-date {
    width: 38px;
    height: 38px;
    font-size: 15px;
    border-radius: 10px;
  }

  .calendar-legend {
    font-size: 13px;
    gap: 10px;
  }

  .legend-box {
    width: 14px;
    height: 14px;
  }

  /* Улучшенные модальные окна для планшетов */
  .modal-form-content {
    width: 85vw;
    max-width: 450px;
    margin: 30px;
    padding: 20px;
    border-radius: 16px;
  }

  .modal-form h2 {
    font-size: 19px;
    margin-bottom: 18px;
  }

  /* Улучшенные списки для планшетов */
  .services-list {
    gap: 10px;
  }

  .services-list .menu-button {
    font-size: 15px;
    padding: 12px 16px;
    background: linear-gradient(180deg, var(--brand) 0%, var(--brand-2) 100%);
    color: #fff;
  }

  /* Улучшенные статусы для планшетов */
  .status-card {
    padding: 14px;
    border-radius: 12px;
  }

  .status-title {
    font-size: 15px;
  }

  .status-code {
    font-size: 13px;
  }

  .status-chip {
    font-size: 12px;
    padding: 5px 10px;
  }

  /* Улучшенные селекты времени */
  .select-row {
    gap: 12px;
  }

  .select-control select {
    font-size: 14px;
    padding: 10px 24px 10px 6px;
  }

  /* Улучшенные кнопки прогресс-бара */
  .progress-steps {
    gap: 2px;
  }

  .step-circle {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }

  .step-label {
    font-size: 11px;
  }

  .progress-bar {
    height: 5px;
    margin-top: 14px;
  }
}


/* Очень маленькие экраны */
@media (max-width: 360px) {
  body {
    font-size: 14px;
  }

  body::before {
    background-size: 30%;
    opacity: 0.1;
  }

  .container {
    width: 100vw;
    padding: 6px 8px;
    margin: 0;
    border-radius: 0;
  }

  .container::before {
    background-size: 25%;
    opacity: 0.02;
  }

  .modal-form::before {
    background-size: 20%;
    opacity: 0.06;
  }

  .modal-image::before {
    background-size: 15%;
    opacity: 0.06;
  }

  .menu-button {
    font-size: 13px;
    padding: 8px 10px;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 50%, #8B5CF6 100%);
    color: #fff;
    box-shadow: 0 3px 12px rgba(108, 92, 231, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .menu-button:hover {
    background: linear-gradient(135deg, var(--brand-2) 0%, #5A4BDC 50%, #7C3AED 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(108, 92, 231, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  }

  .menu-button.btn-white {
    background-color: #FFFFFF;
    color: black !important;
    border: 1px solid var(--border);
  }

  .menu-button.btn-white:hover {
    background-color: var(--card-bg);
    border-color: var(--brand);
  }

  .calendar-date {
    width: 26px;
    height: 26px;
    font-size: 12px;
  }

  .modal-form-content {
    width: 98vw;
    margin: 10px;
    padding: 10px;
  }
}

/* Touch-устройства */
@media (hover: none) and (pointer: coarse) {
  body::before {
    background-size: 45%;
    opacity: 0.18;
  }

  .container::before {
    background-size: 35%;
    opacity: 0.04;
  }

  .modal-form::before {
    background-size: 30%;
    opacity: 0.05;
  }

  .modal-image::before {
    background-size: 25%;
    opacity: 0.08;
  }

  .menu-button, .district-btn, .consult-button,
  .nav-back-btn, .sidebar-link, .card-button {
    min-height: 48px;
    padding: 14px 16px;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 50%, #8B5CF6 100%);
    color: #fff;
    box-shadow: 0 4px 16px rgba(108, 92, 231, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .menu-button:hover, .district-btn:hover, .consult-button:hover,
  .nav-back-btn:hover, .sidebar-link:hover, .card-button:hover {
    background: linear-gradient(135deg, var(--brand-2) 0%, #5A4BDC 50%, #7C3AED 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(108, 92, 231, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  }

  .menu-button.btn-white, .district-btn.btn-white {
    background-color: #FFFFFF;
    color: black !important;
    border: 1px solid var(--border);
  }

  .menu-button.btn-white:hover, .district-btn.btn-white:hover {
    background-color: var(--card-bg);
    border-color: var(--brand);
  }

  .menu-button.btn-white, .district-btn.btn-white {
    background-color: #FFFFFF;
    color: black !important;
    border: 1px solid var(--border);
  }

  .menu-button.btn-white:hover, .district-btn.btn-white:hover {
    background-color: var(--card-bg);
    border-color: var(--brand);
  }

  .calendar-date {
    min-width: 36px;
    min-height: 36px;
  }

  .carousel-nav-btn {
    width: 44px;
    height: 44px;
    background: linear-gradient(180deg, var(--brand) 0%, var(--brand-2) 100%);
    color: #FFFFFF;
    border: none;
  }

  .photo-prev, .photo-next {
    width: 36px;
    height: 36px;
    background: rgba(17, 22, 54, 0.72);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.25);
  }

  /* Улучшенные touch-интерфейсы для всех интерактивных элементов */
  .consult-button,
  .card-button,
  .search-btn,
  .nav-back-btn,
  .sidebar-link {
    min-height: 48px;
    min-width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }

  .copy-code {
    min-height: 48px;
    min-width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .carousel-nav-btn {
    min-height: 48px;
    min-width: 48px;
  }

  .tooltip-close-btn {
    min-height: 48px;
    min-width: 48px;
  }

  .tooltip-link {
    min-height: 48px;
    min-width: 48px;
  }

  /* Улучшенные селекты для touch */
  .select-control select {
    font-size: 16px; /* Предотвращает зум на iOS */
    padding: 12px 28px 12px 8px;
    min-height: 44px;
  }

  .select-control::after {
    right: 12px;
    font-size: 14px;
  }

  /* Улучшенные чекбоксы и радиокнопки */
  input[type="checkbox"], input[type="radio"] {
    width: 24px;
    height: 24px;
    margin-right: 12px;
  }

  /* Улучшенные ссылки */
  a, .copy-code {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    padding: 12px 16px;
    border-radius: 8px;
  }

  /* Улучшенные формы для мобильных */
  input[type="text"], input[type="tel"], input[type="email"], input[type="password"], textarea, select {
    font-size: 16px; /* Предотвращает зум на iOS */
    padding: 14px 16px;
    border-radius: 10px;
  }

  /* Улучшенные кнопки модальных окон */
  .modal-form .menu-button {
    min-height: 48px;
    padding: 14px 18px;
    font-size: 16px;
    background: linear-gradient(180deg, var(--brand) 0%, var(--brand-2) 100%);
  }

  /* Улучшенные индикаторы карусели */
  .indicator, .dot {
    min-width: 12px;
    min-height: 12px;
    margin: 0 4px;
  }

  /* Улучшенные стрелки фото */
  .photo-prev, .photo-next {
    width: 44px;
    height: 44px;
    font-size: 20px;
    background: rgba(17, 22, 54, 0.72);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.25);
  }

  /* Улучшенные зоны клика для хлебных крошек */
  .breadcrumbs a {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    padding: 6px 8px;
  }
}

/* Альбомная ориентация на мобильных */
@media (orientation: landscape) and (max-height: 520px) {
  body {
    padding-top: calc(env(safe-area-inset-top, 0px) + var(--app-top-offset) + 20px);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
  }

  body::before {
    background-size: 40%;
    opacity: 0.12;
  }

  .container {
    width: min(95vw, 720px);
    padding: 12px 16px;
    margin: 5px auto;
    border-radius: 12px;
  }

  .container::before {
    background-size: 30%;
    opacity: 0.06;
  }

  .modal-form::before {
    background-size: 25%;
    opacity: 0.04;
  }

  .modal-image::before {
    background-size: 20%;
    opacity: 0.07;
  }

  .logo {
    height: 40px;
    margin: 8px 0;
  }

  h1 {
    font-size: 16px;
    margin-bottom: 10px;
  }

  h2 {
    font-size: 15px;
    margin-bottom: 8px;
  }

  .menu-button {
    font-size: 14px;
    padding: 10px 12px;
    min-height: 40px;
    margin-bottom: 6px;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 50%, #8B5CF6 100%);
    color: #fff;
    box-shadow: 0 3px 12px rgba(108, 92, 231, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .menu-button:hover {
    background: linear-gradient(135deg, var(--brand-2) 0%, #5A4BDC 50%, #7C3AED 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(108, 92, 231, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  }

  .menu-button.btn-white {
    background-color: #FFFFFF;
    color: black !important;
    border: 1px solid var(--border);
  }

  .menu-button.btn-white:hover {
    background-color: var(--card-bg);
    border-color: var(--brand);
  }

  .form-group input, .form-group textarea {
    font-size: 14px;
    padding: 8px 12px;
  }

  .description-text {
    font-size: 12px;
    line-height: 1.4;
  }

  .warning-note {
    font-size: 12px;
    padding: 8px 12px;
    margin: 8px 0;
  }

  .district-grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: clamp(6px, 1.5vw, 10px);
    margin: clamp(6px, 1.5vh, 12px) 0;
  }

  .district-btn {
    font-size: 13px;
    padding: 10px 12px;
  }

  .district-title {
    font-size: 14px;
  }

  .district-sub {
    font-size: 11px;
  }

  .carousel-slide {
    padding: 10px;
  }

  .place-card {
    padding: clamp(8px, 2vh, 12px) clamp(4px, 1vh, 6px) 0 clamp(4px, 1vh, 6px);
    border-radius: 14px;
    margin-bottom: clamp(8px, 2vh, 14px);
  }

  .place-title {
    font-size: 15px;
  }

  .place-features {
    gap: 6px;
  }

  .place-feature {
    font-size: 11px;
    padding: 5px 7px;
  }

  .calendar-grid {
    gap: 2px;
    padding: 8px;
  }

  .calendar-date {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  .calendar-legend {
    font-size: 11px;
    gap: 6px;
    margin: 8px 0 12px;
  }

  .legend-box {
    width: 10px;
    height: 10px;
  }

  .modal-form-content {
    width: 90vw;
    max-width: 350px;
    margin: 15px;
    padding: 14px;
  }

  .modal-form h2 {
    font-size: 16px;
    margin-bottom: 14px;
  }

  .services-list {
    gap: 6px;
  }

  .services-list .menu-button {
    font-size: 13px;
    padding: 8px 12px;
    background: linear-gradient(180deg, var(--brand) 0%, var(--brand-2) 100%);
    color: #fff;
  }

  .status-card {
    padding: 10px;
  }

  .status-title {
    font-size: 13px;
  }

  .status-code {
    font-size: 11px;
  }

  .status-chip {
    font-size: 10px;
    padding: 3px 7px;
  }

  .select-row {
    gap: 6px;
  }

  .select-control select {
    font-size: 12px;
    padding: 6px 18px 6px 4px;
  }

  .progress-steps {
    gap: 2px;
  }

  .step-circle {
    width: 24px;
    height: 24px;
    font-size: 10px;
  }

  .step-label {
    font-size: 9px;
  }

  .progress-bar {
    height: 3px;
    margin-top: 10px;
  }

  .breadcrumbs {
    font-size: 10px;
    padding: 4px 8px;
    margin-bottom: 6px;
  }

  .breadcrumbs a {
    max-width: 50px;
  }
}

/* Высокие экраны */
@media (min-height: 900px) {
  .container {
    margin-top: 20px;
  }
}

/* Улучшения для клавиатурной навигации */
@media (prefers-reduced-motion: reduce) {
  .container, .menu-button, .district-btn, .calendar-date {
    transition: none !important;
    animation: none !important;
  }

  /* Отключение анимаций для progress bar при reduced motion */
  .progress-step.active .step-circle,
  .progress-step.completed .step-circle,
  .progress-fill,
  .progress-fill::before,
  .loading-progress .progress-fill,
  .loading-progress .progress-fill::before {
    animation: none !important;
    transition: none !important;
  }

  .step-circle::before {
    transition: none !important;
  }

  .progress-fill {
    transition: width 0.3s ease !important; /* Только ширина без cubic-bezier */
  }
}

/* Адаптивность прогресс-бара (улучшенная) */
@media (max-width: 480px) {
  .booking-progress {
    margin: clamp(4px, 1vh, 8px) auto clamp(1px, 0.5vh, 4px);
    padding: clamp(10px, 2vw, 14px);
    border-radius: 16px;
    /* Улучшенная touch accessibility */
    min-height: 48px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .progress-steps {
    gap: 3px;
    margin-bottom: 16px;
  }

  .progress-step {
    gap: 8px;
  }

  .step-circle {
    width: 36px;
    height: 36px;
    font-size: 13px;
    border-width: 3px;
    /* Улучшенная touch target */
    min-width: 48px;
    min-height: 48px;
  }

  .step-label {
    font-size: 10px;
    max-width: 70px;
    line-height: 1.2;
  }

  .progress-bar {
    height: 6px;
    margin-top: 14px;
    border-radius: 8px;
  }

  .progress-fill {
    border-radius: 8px;
  }

  /* Улучшенные анимации для мобильных */
  .progress-step.active .step-circle {
    transform: scale(1.12) translateY(-2px);
  }

  .progress-step.completed .step-circle {
    transform: scale(1.06) translateY(-1px);
  }
}

/* Дополнительные улучшения для очень маленьких экранов */
@media (max-width: 360px) {
  .progress-steps {
    gap: 2px;
  }

  .step-circle {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }

  .step-label {
    font-size: 9px;
    max-width: 60px;
  }

  .progress-bar {
    height: 5px;
    margin-top: 12px;
  }
}

/* Дополнительные улучшения для очень маленьких экранов */
@media (max-width: 360px) {
  .progress-steps {
    gap: 1px;
  }

  .step-circle {
    width: 28px;
    height: 28px;
    font-size: 11px;
  }

  .step-label {
    font-size: 8px;
    max-width: 50px;
  }

  .progress-bar {
    height: 4px;
    margin-top: 10px;
  }
}

/* Улучшения для планшетов */
@media (min-width: 481px) and (max-width: 768px) {
  .booking-progress {
    padding: clamp(14px, 2.5vw, 18px);
    border-radius: 20px;
  }

  .step-circle {
    width: 40px;
    height: 40px;
    font-size: 15px;
    border-width: 3px;
  }

  .step-label {
    font-size: 11px;
    max-width: 90px;
  }

  .progress-bar {
    height: 7px;
    margin-top: 16px;
  }

  .progress-steps {
    margin-bottom: 18px;
  }
}

/* Улучшения для больших экранов */
@media (min-width: 1024px) {
  .booking-progress {
    padding: clamp(18px, 2vw, 24px);
    border-radius: 24px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .step-circle {
    width: 48px;
    height: 48px;
    font-size: 16px;
    border-width: 3px;
  }

  .step-label {
    font-size: 13px;
    max-width: 110px;
  }

  .progress-bar {
    height: 9px;
    margin-top: 20px;
  }

  .progress-steps {
    margin-bottom: 22px;
  }

  /* Более выраженные анимации на больших экранах */
  .progress-step.active .step-circle {
    transform: scale(1.18) translateY(-3px);
  }

  .progress-step.completed .step-circle {
    transform: scale(1.1) translateY(-2px);
  }
}

/* Дополнительная адаптивность для средних экранов */
@media (min-width: 481px) and (max-width: 768px) {
  .booking-progress {
    margin: clamp(6px, 1.5vh, 12px) auto clamp(3px, 1vh, 6px);
  }

  .container {
    margin: clamp(6px, 1.5vh, 16px) auto clamp(10px, 2.5vh, 20px);
  }

  .breadcrumbs {
    margin: clamp(2px, 1vh, 6px) auto clamp(2px, 1vh, 10px);
  }

  .selection-bar {
    margin: clamp(2px, 1vh, 6px) auto clamp(2px, 1vh, 8px);
  }

  .menu-card {
    padding: clamp(8px, 2vw, 12px);
    margin-bottom: clamp(6px, 1.5vh, 10px);
  }
}

/* Адаптивность для больших экранов */
@media (min-width: 1024px) {
  .booking-progress {
    margin: clamp(12px, 2vh, 20px) auto clamp(6px, 1.5vh, 12px);
  }

  .container {
    margin: clamp(12px, 2vh, 24px) auto clamp(16px, 3vh, 32px);
  }

  .breadcrumbs {
    margin: clamp(4px, 1vh, 10px) auto clamp(4px, 1vh, 16px);
  }

  .selection-bar {
    margin: clamp(4px, 1vh, 12px) auto clamp(4px, 1vh, 16px);
  }

  .menu-card {
    padding: clamp(12px, 2.5vw, 16px);
    margin-bottom: clamp(8px, 2vh, 16px);
  }
}

/* Дополнительные улучшения для touch-устройств */
@media (hover: none) {
  body::before {
    background-size: 50%;
    opacity: 1;
  }

  .container::before {
    background-size: 40%;
    opacity: 0.05;
  }

  .modal-form::before {
    background-size: 35%;
    opacity: 0.06;
  }

  .modal-image::before {
    background-size: 30%;
    opacity: 0.09;
  }

  .menu-button, .district-btn {
    min-height: 48px;
    padding: 14px 16px;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 50%, #8B5CF6 100%);
    color: #fff;
    box-shadow: 0 4px 16px rgba(108, 92, 231, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .menu-button:hover, .district-btn:hover {
    background: linear-gradient(135deg, var(--brand-2) 0%, #5A4BDC 50%, #7C3AED 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(108, 92, 231, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  }

  .calendar-date {
    min-width: 44px;
    min-height: 44px;
  }

  .carousel-nav-btn {
    width: 48px;
    height: 48px;
    background: linear-gradient(180deg, var(--brand) 0%, var(--brand-2) 100%);
    color: #FFFFFF;
    border: none;
  }

  .photo-prev, .photo-next {
    width: 40px;
    height: 40px;
    background: rgba(17, 22, 54, 0.72);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.25);
  }

  /* Увеличенные зоны клика для touch */
  .copy-code {
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .remove-date-btn {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .remove-date-btn-small {
    background: #FFBB99 !important;
    border: 1px solid #FFBB99 !important;
    color: #FFFFFF !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    line-height: 1.2 !important;
    padding: 4px 8px !important;
    box-shadow: 0 1px 3px rgba(255, 187, 153, 0.4) !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
    white-space: nowrap !important;
    position: relative !important;
    z-index: 10 !important;
    min-height: 24px !important;
  }

  .remove-date-btn-small:hover {
    background: #E6A88C;
    border-color: #E6A88C;
    transform: scale(1.05);
    box-shadow: 0 2px 6px rgba(255, 187, 153, 0.4);
    color: #000 !important;
  }

  /* Контейнер для даты и крестика */
  .date-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-bottom: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .date-row > div:first-child {
    font-weight: 700 !important;
    font-size: 16px !important;
    color: #000000 !important;
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
  }

  .date-row div {
    color: black !important;
  }

  .date-row * {
    color: black !important;
  }

  .multi-time-date-block * {
    color: black !important;
  }

  .date-row .remove-date-btn-small {
    flex-shrink: 0 !important;
    margin-left: auto !important;
  }

  /* Улучшенное позиционирование кнопки удаления даты вправо */
  .date-row .remove-code-btn {
    margin-left: auto !important;
    margin-right: 12px !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 10 !important;
  }

  /* Дополнительные стили для кнопки удаления даты с улучшенной визуализацией */
  .remove-code-btn {
    float: right !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    background: linear-gradient(135deg, #FF6B6B 0%, #E74C3C 100%) !important;
    border: 2px solid #E74C3C !important;
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transform: translateZ(0) !important;
  }

  .remove-code-btn:hover {
    background: linear-gradient(135deg, #ff6b47, #fe9c63) !important;
    border-color: #ff6b47 !important;
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  }

  .remove-code-btn:active {
    transform: translateY(0) scale(0.98) !important;
    box-shadow: 0 2px 8px rgba(255, 107, 71, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    transition-duration: 0.1s !important;
  }
  
  /* Стили для контейнера date-row для правильного позиционирования */
  .date-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    position: relative !important;
  }

  /* Улучшенные формы для мобильных */
  input[type="text"], input[type="tel"], input[type="email"], input[type="password"], textarea, select {
    font-size: 16px; /* Предотвращает зум на iOS */
    padding: 14px 16px;
    border-radius: 10px;
  }

  /* Улучшенные чекбоксы и радиокнопки */
  input[type="checkbox"], input[type="radio"] {
    width: 22px;
    height: 22px;
    margin-right: 10px;
  }

  /* Улучшенные ссылки */
  a, .copy-code {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    padding: 10px 14px;
    border-radius: 8px;
  }
}

/* Улучшения для больших экранов */
@media (min-width: 1200px) {
  body::before {
    background-size: 80%;
    opacity: 0.3;
  }

  .container {
    width: min(1000px, 90vw);
    padding: 24px 32px;
  }

  .container::before {
    background-size: 70%;
    opacity: 0.06;
  }

  .modal-form::before {
    background-size: 60%;
    opacity: 0.08;
  }

  .modal-image::before {
    background-size: 50%;
    opacity: 0.1;
  }

  .district-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(16px, 3vw, 24px);
    margin: clamp(16px, 3vh, 24px) 0;
  }

  .place-card {
    padding: clamp(16px, 3vh, 20px) clamp(10px, 2vh, 14px) 0 clamp(10px, 2vh, 14px);
    border-radius: 18px;
    margin-bottom: clamp(16px, 3vh, 24px);
  }

  .district-grid {
    gap: clamp(18px, 3.5vw, 26px);
    margin: clamp(18px, 3.5vh, 26px) 0;
  }

  .menu-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .menu-card {
    padding: 20px;
  }

  .place-card {
    padding: clamp(16px, 3vh, 20px) clamp(10px, 2vh, 14px) 0 clamp(10px, 2vh, 14px);
    border-radius: 18px;
    margin-bottom: clamp(16px, 3vh, 24px);
  }
}

/* Темная тема (если поддерживается) */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1a1a;
    --soft-bg: #2a2a2a;
    --border: #404040;
    --text: #e0e0e0;
    --text-secondary: #b0b0b0;
    --muted-text: #b0b0b0;
    --shadow-soft: 0 2px 8px rgba(0,0,0,0.3);
  }
}

/* Высокий контраст */
@media (prefers-contrast: high) {
  .menu-button {
    border: 2px solid var(--brand);
    background-color: #FFFFFF;
    color: black !important;
  }

  .menu-button:hover {
    background-color: var(--card-bg);
    border-color: var(--brand);
  }

  .menu-button.btn-white {
    background-color: #FFFFFF;
    color: black !important;
    border: 2px solid var(--brand);
  }

  .menu-button.btn-white:hover {
    background-color: var(--card-bg);
    border-color: var(--brand);
  }

  .status-chip {
    border: 1px solid currentColor;
    font-weight: bold;
  }

  /* Улучшенная контрастность для progress bar */
  .step-circle {
    border-width: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  }

  .progress-step.active .step-circle {
    border-width: 4px;
    box-shadow: 0 6px 20px rgba(108, 92, 231, 0.5);
  }

  .progress-step.completed .step-circle {
    border-width: 4px;
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
  }

  .progress-bar {
    border: 1px solid rgba(0,0,0,0.2);
  }

  .progress-fill {
    box-shadow: 0 0 15px rgba(108, 92, 231, 0.6);
  }

  .loading-progress {
    border: 1px solid rgba(255,255,255,0.3);
  }

  .progress-fill {
    box-shadow: 0 0 15px rgba(255,255,255,0.8);
  }
}

/* Консультация - унифицированные фиолетовые кнопки */
.consult-button,
#consult-container .menu-button,
#consult-services-container .menu-button,
#consult-result .menu-button,
#consult-container button:not(.btn-light):not(.btn-gray):not(.btn-muted),
#consult-services-container button:not(.btn-light):not(.btn-gray):not(.btn-muted),
#consult-result button:not(.btn-light):not(.btn-gray):not(.btn-muted) {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 50%, #8B5CF6 100%) !important;
  color: #FFFFFF !important;
  -webkit-color: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(108, 92, 231, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  /* Улучшенная безопасность и производительность */
  contain: layout style;
  will-change: transform, background-color;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* Предотвращение утечек памяти */
  isolation: isolate;
  /* Безопасные значения по умолчанию */
  min-height: 44px;
  min-width: 44px;
  position: relative;
  overflow: hidden;
  /* Улучшенная производительность */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  /* Плавные переходы */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.consult-button:hover,
#consult-container .menu-button:hover,
#consult-services-container .menu-button:hover,
#consult-result .menu-button:hover,
#consult-container button:not(.btn-light):not(.btn-gray):not(.btn-muted):hover,
#consult-services-container button:not(.btn-light):not(.btn-gray):not(.btn-muted):hover,
#consult-result button:not(.btn-light):not(.btn-gray):not(.btn-muted):hover {
  background: linear-gradient(135deg, var(--brand-2) 0%, #5A4BDC 50%, #7C3AED 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(108, 92, 231, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

/* Дополнительные стили для безопасной работы с элементами консультации */
.consultation-content,
.consultation-sidebar,
.consultation-hero,
.action-cards,
.cards-grid,
.action-card,
.faq-list,
.services-list {
  /* Предотвращение утечек памяти */
  contain: layout style paint;
  /* Улучшенная производительность */
  will-change: auto;
  /* Безопасные значения по умолчанию */
  box-sizing: border-box;
  position: relative;
}

/* Безопасные стили для динамически создаваемых элементов */
.consult-button,
.general-faq-btn,
.service-btn,
.faq-toggle-btn,
.category-btn,
.back-to-main-btn,
.back-to-services-btn,
.consult-retry-button {
  /* Предотвращение утечек памяти */
  isolation: isolate;
  /* Улучшенная производительность */
  contain: layout style;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  /* Безопасные значения по умолчанию */
  min-height: 44px;
  min-width: 44px;
  position: relative;
  overflow: hidden;
}

/* Безопасные стили для контейнеров динамического контента */
.consult-results,
.consult-error-message,
.consult-loading-indicator,
.consult-progress-container {
  /* Предотвращение утечек памяти */
  contain: layout style paint;
  /* Улучшенная производительность */
  will-change: auto;
  /* Безопасные значения по умолчанию */
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

/* Hover состояния для кнопок консультации объединены с основными стилями */

/* Кнопка "Подать обращение" - белый текст */
#btn-open-feedback-official {
  color: #FFFFFF !important;
}

/* Дополнительное правило для гарантии фиолетовых кнопок в консультации */
#consult-container button,
#consult-services-container button,
#consult-result button {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 50%, #8B5CF6 100%) !important;
  color: #FFFFFF !important;
  -webkit-color: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(108, 92, 231, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

#consult-container button:hover,
#consult-services-container button:hover,
#consult-result button:hover {
  background: linear-gradient(135deg, var(--brand-2) 0%, #5A4BDC 50%, #7C3AED 100%) !important;
  box-shadow: 0 8px 24px rgba(108, 92, 231, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

/* Кнопки в разделе подтверждения бронирования */
#btn-edit-form,
#btn-edit-time {
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-2) 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: var(--shadow-soft) !important;
}

#btn-edit-form:hover,
#btn-edit-time:hover {
  background: linear-gradient(180deg, var(--brand-2) 0%, #5A4BDC 100%) !important;
  box-shadow: 0 8px 20px rgba(108, 92, 231, 0.25) !important;
}

/* =========================================================
    ДОПОЛНИТЕЛЬНЫЕ МЕДИА-ЗАПРОСЫ ДЛЯ ПЛАНШЕТОВ И ПЛАВНЫХ ПЕРЕХОДОВ
    ========================================================= */

/* Планшеты (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  body {
    font-size: 16px;
    padding-top: calc(env(safe-area-inset-top, 0px) + var(--app-top-offset) + 50px);
    transition: font-size 0.3s ease, padding-top 0.3s ease;
  }

  body::before {
    background-size: 70%;
    opacity: 1;
    transition: background-size 0.3s ease, opacity 0.3s ease;
  }

  .container {
    width: min(90vw, 800px);
    padding: 20px 24px;
    margin: 15px auto;
    border-radius: 18px;
    transition: width 0.3s ease, padding 0.3s ease, margin 0.3s ease, border-radius 0.3s ease;
  }

  .container::before {
    background-size: 60%;
    opacity: 0.06;
    transition: background-size 0.3s ease, opacity 0.3s ease;
  }

  h1 {
    font-size: 22px;
    margin-bottom: 18px;
    transition: font-size 0.3s ease, margin-bottom 0.3s ease;
  }

  h2 {
    font-size: 19px;
    transition: font-size 0.3s ease;
  }

  .menu-button {
    font-size: 16px;
    padding: 14px 18px;
    min-height: 48px;
    margin-bottom: 10px;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 50%, #8B5CF6 100%);
    box-shadow: 0 4px 16px rgba(108, 92, 231, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .menu-button:hover {
    background: linear-gradient(135deg, var(--brand-2) 0%, #5A4BDC 50%, #7C3AED 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(108, 92, 231, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  }

  .form-group input, .form-group textarea {
    font-size: 16px;
    padding: 12px 16px;
    transition: font-size 0.3s ease, padding 0.3s ease;
  }

  .description-text {
    font-size: 15px;
    line-height: 1.5;
    transition: font-size 0.3s ease, line-height 0.3s ease;
  }

  /* Карусель на планшетах */
  .carousel {
    border-radius: 14px;
    margin-bottom: 16px;
    transition: border-radius 0.3s ease, margin-bottom 0.3s ease;
  }

  .carousel-slide img {
    border-radius: 12px;
    transition: border-radius 0.3s ease;
  }

  .carousel-nav-btn {
    width: 44px;
    height: 44px;
    font-size: 20px;
    transition: width 0.3s ease, height 0.3s ease, font-size 0.3s ease;
  }

  /* Календарь на планшетах */
  .calendar-grid {
    gap: 6px;
    padding: 10px;
    transition: gap 0.3s ease, padding 0.3s ease;
  }

  .calendar-date {
    font-size: 14px;
    min-height: 36px;
    border-radius: 10px;
    transition: font-size 0.3s ease, min-height 0.3s ease, border-radius 0.3s ease;
  }

  /* Карточки на планшетах */
  .place-card {
    padding: clamp(10px, 2.5vh, 14px) clamp(6px, 1.5vh, 10px) 0 clamp(6px, 1.5vh, 10px);
    border-radius: 14px;
    margin-bottom: clamp(10px, 2.5vh, 18px);
    transition: padding 0.3s ease, border-radius 0.3s ease, margin-bottom 0.3s ease;
  }

  .district-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: clamp(12px, 3vw, 18px);
    margin: clamp(12px, 3vh, 20px) 0;
    transition: gap 0.3s ease, margin 0.3s ease;
  }

  .district-btn {
    padding: 14px 16px;
    border-radius: 12px;
    transition: padding 0.3s ease, border-radius 0.3s ease;
  }

  .district-btn .district-title {
    font-size: 17px;
    transition: font-size 0.3s ease;
  }

  .district-btn .district-sub {
    font-size: 13px;
    transition: font-size 0.3s ease;
  }

  /* Модальные окна на планшетах */
  .modal-form-content {
    width: 85vw;
    max-width: 450px;
    margin: 30px;
    padding: 20px;
    border-radius: 16px;
    transition: width 0.3s ease, max-width 0.3s ease, margin 0.3s ease, padding 0.3s ease, border-radius 0.3s ease;
  }

  .modal-form h2 {
    font-size: 19px;
    margin-bottom: 18px;
    transition: font-size 0.3s ease, margin-bottom 0.3s ease;
  }
}

/* Улучшенные мобильные (481px - 768px) с плавными переходами */
@media (min-width: 481px) and (max-width: 768px) {
  body {
    font-size: 16px;
    line-height: 1.5;
    padding-top: calc(env(safe-area-inset-top, 0px) + var(--app-top-offset) + 40px);
    transition: font-size 0.3s ease, line-height 0.3s ease, padding-top 0.3s ease;
  }

  body::before {
    background-size: 60%;
    opacity: 1;
    transition: background-size 0.3s ease, opacity 0.3s ease;
  }

  .container {
    width: min(90vw, 480px);
    padding: 16px 20px;
    border-radius: 14px;
    transition: width 0.3s ease, padding 0.3s ease, border-radius 0.3s ease;
  }

  .container::before {
    background-size: 50%;
    opacity: 0.04;
    transition: background-size 0.3s ease, opacity 0.3s ease;
  }

  h1 {
    font-size: 22px;
    margin-bottom: 18px;
    transition: font-size 0.3s ease, margin-bottom 0.3s ease;
  }

  h2 {
    font-size: 18px;
    margin-bottom: 12px;
    transition: font-size 0.3s ease, margin-bottom 0.3s ease;
  }

  .menu-button {
    font-size: 16px;
    padding: 14px 18px;
    min-height: 48px;
    margin-bottom: 10px;
    border-radius: 12px;
    transition: font-size 0.3s ease, padding 0.3s ease, min-height 0.3s ease, margin-bottom 0.3s ease, border-radius 0.3s ease;
  }

  .form-group input, .form-group textarea {
    font-size: 16px;
    padding: 12px 16px;
    border-radius: 12px;
    transition: font-size 0.3s ease, padding 0.3s ease, border-radius 0.3s ease;
  }

  .description-text {
    font-size: 14px;
    line-height: 1.5;
    transition: font-size 0.3s ease, line-height 0.3s ease;
  }

  /* Карусель на средних экранах */
  .carousel-slide {
    padding: 16px;
    transition: padding 0.3s ease;
  }

  .place-card {
    padding: clamp(10px, 2.5vh, 14px) clamp(6px, 1.5vh, 10px) 0 clamp(6px, 1.5vh, 10px);
    border-radius: 14px;
    margin-bottom: clamp(10px, 2.5vh, 18px);
    transition: padding 0.3s ease, border-radius 0.3s ease, margin-bottom 0.3s ease;
  }

  .district-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: clamp(10px, 2.5vw, 16px);
    margin: clamp(10px, 2.5vh, 18px) 0;
    transition: gap 0.3s ease, margin 0.3s ease;
  }

  .district-btn {
    font-size: 15px;
    padding: 14px 16px;
    border-radius: 12px;
    transition: font-size 0.3s ease, padding 0.3s ease, border-radius 0.3s ease;
  }

  .district-btn .district-title {
    font-size: 17px;
    transition: font-size 0.3s ease;
  }

  .district-btn .district-sub {
    font-size: 13px;
    transition: font-size 0.3s ease;
  }

  /* Календарь на средних экранах */
  .calendar-grid {
    gap: 6px;
    font-size: 15px;
    padding: 14px;
    transition: gap 0.3s ease, font-size 0.3s ease, padding 0.3s ease;
  }

  .calendar-date {
    width: 38px;
    height: 38px;
    font-size: 15px;
    border-radius: 10px;
    transition: width 0.3s ease, height 0.3s ease, font-size 0.3s ease, border-radius 0.3s ease;
  }

  /* Модальные окна на средних экранах */
  .modal-form-content {
    width: 85vw;
    max-width: 450px;
    margin: 30px;
    padding: 20px;
    border-radius: 16px;
    transition: width 0.3s ease, max-width 0.3s ease, margin 0.3s ease, padding 0.3s ease, border-radius 0.3s ease;
  }

  .modal-form h2 {
    font-size: 19px;
    margin-bottom: 18px;
    transition: font-size 0.3s ease, margin-bottom 0.3s ease;
  }
}

/* Очень маленькие экраны (менее 320px) с плавными переходами */
@media (max-width: 320px) {
  body {
    font-size: 14px;
    padding-top: calc(env(safe-area-inset-top, 0px) + var(--app-top-offset) + 25px);
    transition: font-size 0.3s ease, padding-top 0.3s ease;
  }

  body::before {
    background-size: 30%;
    opacity: 1;
    transition: background-size 0.3s ease, opacity 0.3s ease;
  }

  .container {
    width: 99vw;
    max-width: 300px;
    padding: 4px 6px;
    margin: 1px auto;
    border-radius: 8px;
    transition: width 0.3s ease, max-width 0.3s ease, padding 0.3s ease, margin 0.3s ease, border-radius 0.3s ease;
  }

  .container::before {
    background-size: 25%;
    opacity: 0.02;
    transition: background-size 0.3s ease, opacity 0.3s ease;
  }

  h1 {
    font-size: 16px;
    margin-bottom: 6px;
    transition: font-size 0.3s ease, margin-bottom 0.3s ease;
  }

  h2 {
    font-size: 14px;
    margin-bottom: 4px;
    transition: font-size 0.3s ease, margin-bottom 0.3s ease;
  }

  .menu-button {
    font-size: 13px;
    padding: 8px 10px;
    min-height: 38px;
    margin-bottom: 3px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 50%, #8B5CF6 100%);
    color: #fff;
    box-shadow: 0 3px 12px rgba(108, 92, 231, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .menu-button:hover {
    background: linear-gradient(135deg, var(--brand-2) 0%, #5A4BDC 50%, #7C3AED 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(108, 92, 231, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  }

  .form-group input, .form-group textarea {
    font-size: 14px;
    padding: 8px 10px;
    transition: font-size 0.3s ease, padding 0.3s ease;
  }

  .description-text {
    font-size: 12px;
    transition: font-size 0.3s ease;
  }

  /* Календарь на очень маленьких экранах */
  .calendar-date {
    font-size: 9px;
    min-height: 24px;
    border-radius: 4px;
    transition: font-size 0.3s ease, min-height 0.3s ease, border-radius 0.3s ease;
  }

  .calendar-day {
    font-size: 7px;
    transition: font-size 0.3s ease;
  }

  /* Карусель на очень маленьких экранах */
  .carousel-nav-btn {
    width: 30px;
    height: 30px;
    font-size: 12px;
    transition: width 0.3s ease, height 0.3s ease, font-size 0.3s ease;
  }

  .indicator {
    width: 4px;
    height: 4px;
    transition: width 0.3s ease, height 0.3s ease;
  }
}

/* Плавные переходы для всех адаптивных изменений */
* {
  transition: all 0.3s ease;
}

/* Специфические переходы для ключевых элементов */
.container,
.menu-button,
.district-btn,
.calendar-date,
.modal-form-content,
.carousel,
.place-card,
.consultation-nav,
.consultation-hero,
.consultation-sidebar,
.consultation-content,
.cards-grid,
.action-card,
.card-button,
.search-input,
.search-btn,
.sidebar-link {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Консистентные отступы для всех элементов */
.consultation-nav,
.consultation-hero,
.consultation-sidebar,
.consultation-content {
  margin-bottom: clamp(16px, 2vh, 24px);
}

.consultation-sidebar,
.consultation-content {
  margin-bottom: 0;
}

/* Консистентные размеры иконок */
.hero-icon,
.card-icon {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Консистентные радиусы скругления */
.consultation-nav,
.consultation-hero,
.consultation-sidebar,
.consultation-content,
.action-card,
.modal-form-content {
  border-radius: clamp(12px, 2vw, 20px);
}

/* Оптимизация для производительности */
@media (prefers-reduced-motion: reduce) {
  *,
  .container,
  .menu-button,
  .district-btn,
  .calendar-date,
  .modal-form-content,
  .carousel,
  .place-card {
    transition: none !important;
    animation: none !important;
  }
}

/* ========== ОПТИМИЗАЦИИ ПРОИЗВОДИТЕЛЬНОСТИ ========== */

/* Критические стили для быстрого рендеринга */
.loading-screen,
.consultation-wrapper,
.consultation-header,
.consultation-main,
.consultation-hero,
.search-container,
.consultation-sidebar,
.consultation-content,
.action-cards,
.cards-grid,
.action-card {
  contain: layout style paint;
  will-change: auto;
}

/* Аппаратное ускорение для анимаций */
.action-card,
.card-button,
.search-btn,
.sidebar-link,
.carousel-nav-btn,
.progress-step,
.step-circle,
.progress-fill {
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Оптимизированные анимации */
@keyframes optimizedFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes optimizedSlideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Эффективные медиа-запросы для критических стилей */
@media (max-width: 768px), (max-width: 480px) {
  .action-card {
    animation: optimizedFadeIn 0.3s ease both;
  }

  .card-button,
  .search-btn {
    will-change: transform;
    contain: layout;
  }
}

/* Предотвращение layout shift и улучшение стабильности */
.consultation-hero,
.search-section,
.action-cards {
  contain-intrinsic-size: 0 200px;
}

/* Улучшенная стабильность карточек */
.action-card {
  contain-intrinsic-size: 0 200px;
  display: flex;
  flex-direction: column;
}

.card-button {
  margin-top: auto;
  flex-shrink: 0;
}

/* Предотвращение горизонтальной прокрутки в карточках */
.cards-grid {
  overflow: hidden;
}

.action-card {
  overflow: hidden;
}

/* Улучшенная вертикальная прокрутка */
.consultation-content {
  overflow-y: visible;
  overflow-x: hidden;
}

.consultation-main {
  overflow-x: hidden;
}

/* Дополнительные улучшения визуальной стабильности */
.consultation-wrapper,
.consultation-main,
.consultation-content,
.cards-grid,
.action-card {
  contain: layout style paint;
}

/* Предотвращение горизонтальной прокрутки и улучшение стабильности */
html, body {
  max-width: 100%;
  overflow-x: hidden;
  position: relative;
}

/* Улучшенная стабильность контейнера */
.consultation-wrapper {
  position: relative;
  min-height: 100vh;
  box-sizing: border-box;
}

.consultation-main {
  position: relative;
  box-sizing: border-box;
}

.consultation-sidebar {
  position: relative;
  box-sizing: border-box;
}

.consultation-content {
  position: relative;
  box-sizing: border-box;
}

/* Улучшенная стабильность для контейнера */
.container {
  contain: layout style paint;
  contain-intrinsic-size: 0 400px;
}

/* Оптимизация шрифтов */
.consultation-hero h2,
.nav-title h1,
.action-card h3 {
  font-display: swap;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1;
  font-kerning: normal;
}

/* Эффективные селекторы для производительности */
.consultation-content .action-card:nth-child(odd) {
  animation-delay: 0.1s;
}

.consultation-content .action-card:nth-child(even) {
  animation-delay: 0.2s;
}

/* =========================================================
    Окно загрузки мини-приложения (улучшенное)
    ========================================================= */
.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.loading-screen.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loading-content {
  text-align: center;
  color: #FFFFFF;
  max-width: 300px;
  padding: 20px;
}

.matreshka-loader {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  position: relative;
}

.matreshka-icon {
  width: 100%;
  height: 100%;
  animation: matreshkaSpin 2s linear infinite;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

@keyframes matreshkaSpin {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.05); }
  100% { transform: rotate(360deg) scale(1); }
}

.loading-text {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  animation: textPulse 1.5s ease-in-out infinite;
}

@keyframes textPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.loading-progress {
  width: 100%;
  height: 6px;
  background: rgba(255,255,255,0.2);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 10px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  position: relative;
  /* Улучшенная accessibility */
  /* Улучшенные эффекты */
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.loading-progress::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

.progress-bar {
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.3);
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #FFFFFF 0%, #F0F8FF 50%, #FFFFFF 100%);
  border-radius: 3px;
  width: 0%;
  animation: loadingProgress 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  position: relative;
  box-shadow: 0 0 10px rgba(255,255,255,0.5);
  /* Улучшенные эффекты */
  filter: brightness(1.1) saturate(1.2);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}

.progress-fill::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 20%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
  animation: progressGlow 1.5s ease-in-out infinite;
}

@keyframes loadingProgress {
  0% { width: 0%; }
  60% { width: 85%; }
  80% { width: 95%; }
  100% { width: 100%; }
}

@keyframes progressGlow {
  0%, 100% { transform: translateX(-100%); opacity: 0; }
  50% { transform: translateX(400%); opacity: 1; }
}

/* Мобильная адаптивность для окна загрузки */
@media (max-width: 480px) {
  .loading-content {
    max-width: 250px;
    padding: 15px;
  }

  .matreshka-loader {
    width: 60px;
    height: 60px;
    margin-bottom: 15px;
  }

  .loading-text {
    font-size: 14px;
    margin-bottom: 15px;
  }
}

/* =========================================================
    ДОПОЛНИТЕЛЬНАЯ ОПТИМИЗАЦИЯ ПРОИЗВОДИТЕЛЬНОСТИ
    ========================================================= */

/* Оптимизация производительности для progress bar */
.progress-step,
.step-circle,
.progress-fill,
.loading-progress .progress-fill {
  will-change: transform, opacity, background-color, border-color, box-shadow;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

/* GPU acceleration для плавных анимаций */
.progress-step.active .step-circle,
.progress-step.completed .step-circle {
  will-change: transform, box-shadow, background-color;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.progress-fill {
  will-change: width, box-shadow;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* Оптимизация для мобильных устройств */
@media (max-width: 768px) {
  .progress-step,
  .step-circle,
  .progress-fill {
    will-change: auto; /* Отключаем will-change на мобильных для экономии памяти */
  }
}

/* =========================================================
     СОВРЕМЕННАЯ СТРУКТУРА КОНСУЛЬТАЦИИ
     ========================================================= */

/* Основной контейнер консультации */
.consultation-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 50%, #f0f2ff 100%);
  position: relative;
  padding: 20px;
  box-sizing: border-box;
  gap: 20px;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

/* Хедер консультации */
.consultation-header {
  background: linear-gradient(135deg, #6C5CE7 0%, #5A4BDC 50%, #8B5CF6 100%);
  box-shadow: 0 4px 20px rgba(108, 92, 231, 0.15);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.consultation-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  min-height: 60px;
}

.nav-back-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  flex-shrink: 0;
  min-width: 120px;
  min-height: 44px;
  white-space: nowrap;
}

.nav-back-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.nav-title {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #ffffff;
  flex: 1;
  justify-content: center;
  flex-shrink: 0;
  max-width: 300px;
}

.nav-title h1 {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
}

.nav-spacer {
  width: 120px; /* Компенсирует ширину кнопки назад */
  flex-shrink: 0;
  min-width: 120px;
}

/* Основная область контента */
.consultation-main {
  flex: 1;
  padding: 24px 20px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

/* Улучшенная приветственная секция */
.consultation-hero {
  text-align: center;
  margin-bottom: 16px;
  padding: 40px 24px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 249, 255, 0.8) 100%);
  border-radius: 24px;
  box-shadow: 0 12px 40px rgba(108, 92, 231, 0.15);
  border: 1px solid rgba(108, 92, 231, 0.2);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  width: 100%;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

.consultation-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #6C5CE7 0%, #5A4BDC 50%, #8B5CF6 100%);
  border-radius: 24px 24px 0 0;
}

.hero-content {
  position: relative;
  z-index: 1;
}

.hero-icon-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #6C5CE7 0%, #5A4BDC 100%);
  border-radius: 20px;
  margin-bottom: 24px;
  box-shadow: 0 8px 24px rgba(108, 92, 231, 0.3);
  position: relative;
  animation: heroIconFloat 3s ease-in-out infinite;
}

@keyframes heroIconFloat {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-6px) rotate(2deg); }
}

.hero-icon-wrapper::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, transparent 50%, rgba(255, 255, 255, 0.1) 100%);
  border-radius: 22px;
  z-index: -1;
}

.hero-icon {
  font-size: 36px;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.consultation-hero h2 {
  font-size: 32px;
  font-weight: 800;
  color: #1a1a1a;
  margin: 0 0 16px 0;
  text-shadow: 0 2px 4px rgba(108, 92, 231, 0.1);
  background: linear-gradient(135deg, #1a1a1a 0%, #333 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-description {
  font-size: 17px;
  color: #666;
  margin: 0 0 32px 0;
  line-height: 1.6;
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
  font-weight: 500;
}

/* Улучшенная поисковая секция */
.search-section {
  margin-top: 32px;
  width: 100%;
}

.search-container {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
}

.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 2px solid #e1e6ff;
  border-radius: 16px;
  padding: 4px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(108, 92, 231, 0.1);
}

.search-input-wrapper:focus-within {
  border-color: #6C5CE7;
  box-shadow: 0 0 0 4px rgba(108, 92, 231, 0.15), 0 6px 24px rgba(108, 92, 231, 0.2);
  transform: translateY(-2px);
}

.search-icon {
  color: #999;
  margin-left: 16px;
  font-size: 16px;
  transition: color 0.3s ease;
}

.search-input-wrapper:focus-within .search-icon {
  color: #6C5CE7;
}

.search-input {
  flex: 1;
  padding: 16px 20px;
  border: none;
  outline: none;
  font-size: 16px;
  background: transparent;
  color: #1a1a1a;
  font-weight: 500;
}

.search-input::placeholder {
  color: #999;
  font-weight: 500;
}

.search-btn {
       padding: 12px 16px;
       background: linear-gradient(135deg, #6C5CE7 0%, #5A4BDC 100%);
       border: none;
       border-radius: 12px;
       color: #ffffff;
       font-size: 14px;
       cursor: pointer;
       transition: all 0.3s ease;
       box-shadow: 0 4px 16px rgba(108, 92, 231, 0.3);
       min-width: 44px;
       width: 44px;
       height: 44px;
       display: flex;
       align-items: center;
       justify-content: center;
       flex-shrink: 0;
 }

.search-btn:hover {
  background: linear-gradient(135deg, #5A4BDC 0%, #7C3AED 100%);
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 20px rgba(108, 92, 231, 0.4);
}

.search-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1px solid #e1e6ff;
  border-top: none;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 8px 32px rgba(108, 92, 231, 0.15);
  z-index: 1000;
  max-height: 200px;
  overflow-y: auto;
}

.search-suggestion {
  padding: 12px 20px;
  cursor: pointer;
  border-bottom: 1px solid #f0f2ff;
  transition: background-color 0.2s ease;
}

.search-suggestion:hover,
.search-suggestion.highlighted {
  background: #f8f9ff;
}

.search-suggestion:last-child {
  border-bottom: none;
}

/* Быстрые действия */
.quick-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 32px;
  flex-wrap: wrap;
}

.quick-action-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: rgba(108, 92, 231, 0.1);
  border: 2px solid rgba(108, 92, 231, 0.2);
  border-radius: 12px;
  color: #6C5CE7;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  min-height: 44px;
}

.quick-action-btn:hover {
  background: rgba(108, 92, 231, 0.15);
  border-color: rgba(108, 92, 231, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(108, 92, 231, 0.2);
}

/* Улучшенная боковая панель */
.consultation-sidebar {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  padding: 0;
  margin-bottom: 24px;
  box-shadow: 0 8px 32px rgba(108, 92, 231, 0.12);
  border: 1px solid rgba(108, 92, 231, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  width: 100%;
  box-sizing: border-box;
  position: relative;
  min-height: 200px;
  max-height: calc(100vh - 120px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid rgba(108, 92, 231, 0.1);
  background: linear-gradient(135deg, rgba(108, 92, 231, 0.05) 0%, rgba(255, 255, 255, 0.8) 100%);
}

.sidebar-header h3 {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

.sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(108, 92, 231, 0.1);
  border: 1px solid rgba(108, 92, 231, 0.2);
  color: #6C5CE7;
  cursor: pointer;
  transition: all 0.3s ease;
}

.sidebar-toggle:hover {
  background: rgba(108, 92, 231, 0.15);
  transform: scale(1.1);
}

.sidebar-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: transparent;
  border: none;
  border-radius: 12px;
  color: #666;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.3s ease;
  position: relative;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
}

.sidebar-link:hover {
  background: rgba(108, 92, 231, 0.08);
  color: #6C5CE7;
  transform: translateX(4px);
}

.sidebar-link.active {
  background: linear-gradient(135deg, #6C5CE7 0%, #5A4BDC 100%);
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(108, 92, 231, 0.3);
  transform: translateX(2px);
}

.link-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.sidebar-link.active .link-icon {
  background: rgba(255, 255, 255, 0.3);
}

.sidebar-link .link-icon i {
  font-size: 12px;
  width: 16px;
  text-align: center;
}

.link-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.link-text {
  font-weight: 600;
  line-height: 1.2;
}

.link-description {
  font-size: 11px;
  opacity: 0.7;
  line-height: 1.2;
}

.sidebar-link.active .link-description {
  opacity: 0.9;
}

.link-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 18px;
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  padding: 0 6px;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
}

.sidebar-link.active .link-badge {
  background: rgba(255, 255, 255, 0.3);
}

.sidebar-footer {
  padding: 16px 24px;
  border-top: 1px solid rgba(108, 92, 231, 0.1);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(108, 92, 231, 0.02) 100%);
}

.contact-info {
  text-align: center;
}

.contact-info p {
  font-size: 12px;
  color: #666;
  margin: 0 0 12px 0;
  font-weight: 500;
}

.contact-support-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  border: none;
  border-radius: 8px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin: 0 auto;
}

.contact-support-btn:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

  .consultation-sidebar.collapsed {
    width: 60px;
    min-width: 60px;
  }

  .consultation-sidebar.collapsed .sidebar-header {
    padding: 20px 12px 16px;
    justify-content: center;
  }

  .consultation-sidebar.collapsed .sidebar-header h3 {
    display: none;
  }

  .consultation-sidebar.collapsed .sidebar-nav {
    padding: 8px 4px;
    align-items: center;
  }

  .consultation-sidebar.collapsed .sidebar-link {
    padding: 12px 8px;
    justify-content: center;
    gap: 0;
  }

  .consultation-sidebar.collapsed .link-content {
    display: none;
  }

  .consultation-sidebar.collapsed .link-icon {
    width: 32px;
    height: 32px;
  }

  .consultation-sidebar.collapsed .link-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    min-width: 16px;
    height: 16px;
    font-size: 9px;
  }

  .consultation-sidebar.collapsed .sidebar-footer {
    padding: 12px;
  }

  .consultation-sidebar.collapsed .contact-info p {
    display: none;
  }

  .consultation-sidebar.collapsed .contact-support-btn {
    padding: 8px;
    justify-content: center;
    gap: 0;
  }

  .consultation-sidebar.collapsed .contact-support-btn span {
    display: none;
  }

/* Контент консультации */
.consultation-content {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 4px 20px rgba(108, 92, 231, 0.1);
  border: 1px solid rgba(108, 92, 231, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  width: 100%;
  box-sizing: border-box;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

/* Карточки действий */
.action-cards {
  margin-top: 24px;
  width: 100%;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(12px, 2vw, 20px);
  margin-top: clamp(12px, 2vh, 20px);
  width: 100%;
  justify-content: center;
  align-items: stretch;
  max-width: 100%;
}

.action-card {
  background: #ffffff;
  border: 1px solid #e1e6ff;
  border-radius: clamp(12px, 2vw, 16px);
  padding: clamp(16px, 3vw, 24px);
  text-align: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(108, 92, 231, 0.08);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  min-height: clamp(160px, 20vh, 200px);
  box-sizing: border-box;
  flex: 1;
}

.action-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #6C5CE7 0%, #5A4BDC 50%, #8B5CF6 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.action-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(108, 92, 231, 0.15);
  border-color: #6C5CE7;
}

.action-card:hover::before {
  opacity: 1;
}

.card-header {
  margin-bottom: 16px;
}

.card-icon {
  width: clamp(48px, 8vw, 64px);
  height: clamp(48px, 8vw, 64px);
  border-radius: clamp(12px, 2vw, 16px);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto clamp(12px, 2vh, 16px);
  font-size: clamp(20px, 3vw, 26px);
  color: #ffffff;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.card-icon::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%, rgba(255,255,255,0.1) 100%);
  border-radius: 16px;
}

.services-icon {
  background: linear-gradient(135deg, #6C5CE7 0%, #5A4BDC 100%);
}

.general-icon {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
}

.ask-icon {
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
}

.action-card h3 {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
  line-height: 1.3;
}

.card-description {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  margin: 0 0 20px 0;
}

.card-button {
  width: 100%;
  padding: clamp(10px, 2vw, 14px) clamp(16px, 3vw, 20px);
  background: linear-gradient(135deg, #6C5CE7 0%, #5A4BDC 100%);
  color: #ffffff;
  border: none;
  border-radius: clamp(8px, 1.5vw, 12px);
  font-size: clamp(13px, 2vw, 15px);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 16px rgba(108, 92, 231, 0.3);
  margin-top: auto;
  flex-shrink: 0;
  min-height: clamp(40px, 6vh, 52px);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

.card-button:hover {
  background: linear-gradient(135deg, #5A4BDC 0%, #7C3AED 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(108, 92, 231, 0.4);
}

.card-button.primary {
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.3);
}

.card-button.primary:hover {
  background: linear-gradient(135deg, #D97706 0%, #B45309 100%);
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
}

/* Результаты консультации */
.consult-results,
#consult-result {
  margin-top: 32px;
  min-height: 200px;
  width: 100%;
  box-sizing: border-box;
}

/* Screen reader only текст */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================
     АДАПТИВНЫЙ ДИЗАЙН ДЛЯ КОНСУЛЬТАЦИИ
     ========================================================= */

/* Планшеты (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
  .consultation-hero {
    padding: 32px 20px;
  }

  .hero-icon-wrapper {
    width: 70px;
    height: 70px;
  }

  .hero-icon {
    font-size: 32px;
  }

  .consultation-hero h2 {
    font-size: 26px;
  }

  .hero-description {
    font-size: 16px;
  }

  .search-input-wrapper {
    max-width: 400px;
    margin: 0 auto;
  }

  .quick-actions {
    max-width: 500px;
    margin: 24px auto 0;
  }

  .consultation-sidebar {
    border-radius: 18px;
  }

  .sidebar-header {
    padding: 18px 20px 14px;
  }

  .sidebar-nav {
    padding: 6px;
  }

  .sidebar-link {
    padding: 12px 14px;
  }
}

/* Мобильные устройства (до 480px) - оптимизированная навигация */
@media (max-width: 480px) {
  .consultation-nav {
    padding: 12px 14px;
  }

  .nav-back-btn {
    padding: 6px 10px;
    font-size: 12px;
    min-width: 100px;
  }

  .nav-back-btn span {
    display: none;
  }

  .nav-title {
    gap: 8px;
  }

  .nav-title h1 {
    font-size: 16px;
  }

  .nav-title i {
    display: none;
  }

  .nav-spacer {
    width: 100px;
  }

  .consultation-wrapper {
    padding: 12px;
    justify-content: flex-start;
  }

  .consultation-main {
    padding: 16px 14px;
  }

  .consultation-hero {
    padding: 24px 16px;
    margin-bottom: 20px;
    border-radius: 20px;
  }

  .hero-icon-wrapper {
    width: 60px;
    height: 60px;
    margin-bottom: 16px;
  }

  .hero-icon {
    font-size: 28px;
  }

  .consultation-hero h2 {
    font-size: 22px;
    margin-bottom: 12px;
  }

  .hero-description {
    font-size: 15px;
    margin-bottom: 24px;
  }

  .search-input-wrapper {
    padding: 2px;
  }

  .search-icon {
    margin-left: 12px;
    font-size: 14px;
  }

  .search-input {
    padding: 14px 16px;
    font-size: 15px;
  }

  .search-btn {
    padding: 14px 16px;
    min-width: 45px;
  }

  .quick-actions {
    gap: 8px;
    margin-top: 24px;
  }

  .quick-action-btn {
    padding: 10px 16px;
    font-size: 13px;
    min-height: 40px;
  }

  .consultation-sidebar {
    margin-bottom: 16px;
    border-radius: 16px;
    max-height: calc(100vh - 100px);
    min-height: 150px;
  }

  .sidebar-header {
    padding: 16px 20px 12px;
  }

  .sidebar-header h3 {
    font-size: 16px;
  }

  .sidebar-nav {
    padding: 6px;
  }

  .sidebar-link {
    padding: 12px 14px;
    font-size: 13px;
  }

  .link-icon {
    width: 20px;
    height: 20px;
  }

  .link-content {
    gap: 1px;
  }

  .link-text {
    font-size: 13px;
  }

  .link-description {
    font-size: 10px;
  }

  .sidebar-footer {
    padding: 12px 20px;
  }

  .contact-info p {
    font-size: 11px;
  }

  .contact-support-btn {
    padding: 6px 12px;
    font-size: 11px;
  }

  .consultation-content {
    padding: 20px 16px;
  }

  .cards-grid {
    gap: 16px;
    margin-top: 16px;
  }

  .action-card {
    padding: 16px;
  }

  .card-icon {
    width: 50px;
    height: 50px;
    font-size: 20px;
  }

  .action-card h3 {
    font-size: 16px;
  }

  .card-description {
    font-size: 13px;
  }

  .card-button {
    padding: 12px 16px;
    font-size: 13px;
  }
}

/* Десктоп (769px+) */
@media (min-width: 769px) {
  .consultation-hero {
    padding: 48px 32px;
  }

  .hero-icon-wrapper {
    width: 90px;
    height: 90px;
  }

  .hero-icon {
    font-size: 42px;
  }

  .consultation-hero h2 {
    font-size: 36px;
  }

  .hero-description {
    font-size: 18px;
    max-width: 700px;
  }

  .search-input-wrapper {
    max-width: 500px;
  }

  .quick-actions {
    max-width: 600px;
    margin: 32px auto 0;
  }

  .consultation-sidebar {
    border-radius: 24px;
    max-height: calc(100vh - 140px);
  }

  .sidebar-header {
    padding: 24px 28px 20px;
  }

  .sidebar-nav {
    padding: 10px;
  }

  .sidebar-link {
    padding: 16px 18px;
  }

  .link-icon {
    width: 26px;
    height: 26px;
  }

  .link-text {
    font-size: 15px;
  }

  .link-description {
    font-size: 12px;
  }

  .sidebar-footer {
    padding: 20px 28px;
  }
}

/* =========================================================
     ИНТЕРАКТИВНЫЕ ЭЛЕМЕНТЫ И АНИМАЦИИ
     ========================================================= */

/* Анимация появления карточек */
@keyframes cardFadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.action-card {
  animation: cardFadeInUp 0.6s ease both;
}

.action-card:nth-child(1) { animation-delay: 0.1s; }
.action-card:nth-child(2) { animation-delay: 0.2s; }
.action-card:nth-child(3) { animation-delay: 0.3s; }

/* Пульсация для активных элементов */
@keyframes pulse {
  0%, 100% {
    box-shadow: 0 4px 16px rgba(108, 92, 231, 0.3);
  }
  50% {
    box-shadow: 0 6px 24px rgba(108, 92, 231, 0.5);
  }
}

.action-card:hover {
  animation: pulse 2s ease-in-out infinite;
}

/* Эффект печати для текста */
@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

.consultation-hero h2 {
  overflow: hidden;
  white-space: nowrap;
  animation: typing 1s steps(40, end) 0.5s both;
}

/* Плавные переходы для интерактивных элементов */
.consultation-sidebar,
.consultation-content,
.search-input,
.search-btn,
.sidebar-link,
.card-button,
.action-card,
.card-icon,
.cards-grid,
.consultation-hero,
.consultation-nav,
.nav-back-btn,
.nav-title,
.nav-title h1 {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Дополнительные плавные переходы для динамичности */
.consultation-wrapper,
.consultation-main,
.hero-icon,
.hero-description,
.search-container {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Фокусные состояния для доступности */
.nav-back-btn:focus,
.search-input:focus,
.search-btn:focus,
.sidebar-link:focus,
.card-button:focus,
.action-card:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.4);
}

.sidebar-link:focus {
  outline: 2px solid #6C5CE7;
  outline-offset: 2px;
}

/* Минимальные размеры для доступности (44px) */
.nav-back-btn,
.search-input,
.search-btn,
.sidebar-link,
.card-button,
.action-card,
.consult-button {
  min-height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* Улучшенная поддержка клавиатурной навигации */
.action-card:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(108, 92, 231, 0.15);
}

.action-card:focus {
  outline: 2px solid #6C5CE7;
  outline-offset: 2px;
}

/* Предотвращение анимаций при отключении */
@media (prefers-reduced-motion: reduce) {
  .action-card,
  .consultation-hero h2 {
    animation: none !important;
  }

  .action-card:hover {
    animation: none !important;
  }

  .consultation-sidebar,
  .consultation-content,
  .search-input,
  .search-btn,
  .sidebar-link,
  .card-button {
    transition: none !important;
  }
}

/* =========================================================
     ДОПОЛНИТЕЛЬНЫЕ ПРАВИЛА ДЛЯ КОНСУЛЬТАЦИИ - ФИОЛЕТОВЫЕ КНОПКИ
     ========================================================= */

/* Стили для FAQ списка */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 16px 0;
}

.faq-item {
  background: #FFFFFF;
  border: 1px solid #E6E8F5;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}

.faq-item:hover {
  box-shadow: 0 4px 16px rgba(108, 92, 231, 0.1);
  transform: translateY(-1px);
}

.faq-item button {
  width: 100%;
  text-align: left;
  padding: 16px 18px;
  background: linear-gradient(135deg, #6C5CE7 0%, #5A4BDC 50%, #8B5CF6 100%);
  color: #FFFFFF !important;
  -webkit-color: #FFFFFF !important;
  border: none;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.faq-item button:hover {
  background: linear-gradient(135deg, #5A4BDC 0%, #7C3AED 50%, #6D28D9 100%);
  transform: translateY(-1px);
}

.faq-item button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.3);
}

.faq-answer {
  background: #F8F9FF;
  border-top: 1px solid #E6E8F5;
  padding: 16px 18px;
  font-size: 14px;
  line-height: 1.6;
  color: #000000 !important;
  -webkit-color: #000000 !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
}

.faq-answer.show {
  max-height: 1000px;
  padding: 16px 18px;
}

/* Адаптивность для FAQ */
@media (max-width: 768px) {
  .faq-list {
    gap: 10px;
    margin: 14px 0;
  }

  .faq-item {
    border-radius: 10px;
  }

  .faq-item button {
    padding: 14px 16px;
    font-size: 14px;
  }

  .faq-answer {
    padding: 0 16px;
    font-size: 13px;
  }

  .faq-answer.show {
    padding: 14px 16px;
  }
}

@media (max-width: 480px) {
  .faq-list {
    gap: 8px;
    margin: 12px 0;
  }

  .faq-item button {
    padding: 12px 14px;
    font-size: 13px;
  }

  .faq-answer {
    padding: 0 14px;
    font-size: 12px;
  }

  .faq-answer.show {
    padding: 12px 14px;
  }
}

/* Стили для списка сервисов */
.services-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0;
}

.services-list button {
  background: linear-gradient(135deg, #6C5CE7 0%, #5A4BDC 50%, #8B5CF6 100%);
  color: #FFFFFF !important;
  -webkit-color: #FFFFFF !important;
  border: none;
  padding: 14px 16px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(108, 92, 231, 0.25);
}

.services-list button:hover {
  background: linear-gradient(135deg, #5A4BDC 0%, #7C3AED 50%, #6D28D9 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(108, 92, 231, 0.35);
}

/* Адаптивность для списка сервисов */
@media (max-width: 768px) {
  .services-list {
    gap: 8px;
    margin: 14px 0;
  }

  .services-list button {
    padding: 12px 14px;
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .services-list {
    gap: 6px;
    margin: 12px 0;
  }

  .services-list button {
    padding: 10px 12px;
    font-size: 13px;
  }
}

/* Правила для кнопок консультации объединены выше */

/* Правила для кнопок FAQ объединены с основными стилями */

/* Специально для кнопок календарей - фиолетовые */
#calendars-container .menu-button.btn-white {
  background: linear-gradient(135deg, #6C5CE7 0%, #5A4BDC 50%, #8B5CF6 100%) !important;
  color: #FFFFFF !important;
  -webkit-color: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(108, 92, 231, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

#calendars-container .menu-button.btn-white:hover {
  background: linear-gradient(135deg, #5A4BDC 0%, #7C3AED 50%, #6D28D9 100%) !important;
  box-shadow: 0 8px 24px rgba(108, 92, 231, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  transform: translateY(-2px);
}

/* =========================================================
    ДОПОЛНИТЕЛЬНЫЕ ПРАВИЛА ДЛЯ МОДАЛЬНОГО ОКНА СОГЛАСИЯ
    ========================================================= */

/* Исправление цвета текста согласия в модальном окне */
#consent-modal .modal-form-content div[style*="color:#333"] {
  color: #000000 !important;
  -webkit-color: #000000 !important;
}

#consent-modal .modal-form-content div[style*="color:#333"] * {
  color: #000000 !important;
  -webkit-color: #000000 !important;
}

#consent-modal .modal-form-content div[style*="color:#333"] a {
  color: #6C5CE7 !important;
  -webkit-color: #6C5CE7 !important;
}

/* Стили для кнопки "Отмена" в модальном окне согласия */
#consent-cancel {
  background: #FFFFFF !important;
  color: #000000 !important;
  -webkit-color: #000000 !important;
  border: 1px solid #D0D0D0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

#consent-cancel:hover {
  background: #F5F5F5 !important;
  border-color: #B0B0B0 !important;
  color: #000000 !important;
  -webkit-color: #000000 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Стили для текста согласия */
.consent-text {
  margin-bottom: 16px;
  padding: 12px;
  background: #FFFFFF;
  border: 1px solid #E6E8F5;
  border-radius: 12px;
  font-size: 14px;
  color: #000000 !important;
  -webkit-color: #000000 !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
  line-height: 1.5;
}

.consent-text p {
  margin: 0 0 8px 0;
  font-weight: 600;
  color: #000000 !important;
  -webkit-color: #000000 !important;
}

.consent-text ol {
  margin: 0;
  padding-left: 20px;
}

.consent-text li {
  margin-bottom: 6px;
  color: #000000 !important;
  -webkit-color: #000000 !important;
}

/* Мобильные стили для текста согласия */
@media (max-width: 768px) {
  .consent-text {
    font-size: 13px;
    padding: 10px;
    margin-bottom: 14px;
  }

  .consent-text p {
    font-size: 14px;
  }

  .consent-text ol {
    padding-left: 18px;
  }

  .consent-text li {
    margin-bottom: 8px;
  }
}

@media (max-width: 480px) {
  .consent-text {
    font-size: 12px;
    padding: 8px;
    margin-bottom: 12px;
  }

  .consent-text p {
    font-size: 13px;
  }

  .consent-text ol {
    padding-left: 16px;
  }

  .consent-text li {
    margin-bottom: 6px;
  }
}

/* Стили для кнопки "На главную" в консультации - фиолетовая */
.nav-back-btn {
 background: linear-gradient(135deg, #6C5CE7 0%, #5A4BDC 50%, #8B5CF6 100%) !important;
 color: #FFFFFF !important;
 -webkit-color: #FFFFFF !important;
 border: none !important;
 box-shadow: 0 4px 16px rgba(108, 92, 231, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.nav-back-btn:hover {
 background: linear-gradient(135deg, #5A4BDC 0%, #7C3AED 50%, #6D28D9 100%) !important;
 transform: translateY(-2px) !important;
 box-shadow: 0 8px 24px rgba(108, 92, 231, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
 color: #FFFFFF !important;
 -webkit-color: #FFFFFF !important;
}

/* =========================================================
  СИСТЕМА СОСТОЯНИЙ КНОПОК КОНСУЛЬТАЦИИ
  ========================================================= */

/* Состояния кнопок консультации */
.consult-button {
 position: relative;
 overflow: hidden;
 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 min-height: 48px;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
}

/* Состояние загрузки */
.consult-button.loading {
 background: linear-gradient(135deg, #9CA3AF 0%, #6B7280 100%) !important;
 color: transparent !important;
 cursor: not-allowed;
 transform: none !important;
 box-shadow: 0 2px 8px rgba(156, 163, 175, 0.3) !important;
 position: relative;
}

.consult-button.loading::after {
 content: '';
 position: absolute;
 top: 50%;
 left: 50%;
 width: 20px;
 height: 20px;
 margin: -10px 0 0 -10px;
 border: 2px solid rgba(255, 255, 255, 0.3);
 border-top: 2px solid #ffffff;
 border-radius: 50%;
 animation: buttonSpin 1s linear infinite;
}

@keyframes buttonSpin {
 0% { transform: rotate(0deg); }
 100% { transform: rotate(360deg); }
}

/* Состояние успеха */
.consult-button.success {
 background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
 box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4) !important;
 animation: successPulse 0.6s ease both;
}

.consult-button.success::before {
 content: '✓';
 font-size: 18px;
 font-weight: bold;
 color: #ffffff;
}

@keyframes successPulse {
 0% { transform: scale(1); }
 50% { transform: scale(1.05); }
 100% { transform: scale(1); }
}

/* Состояние ошибки */
.consult-button.error {
 background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%) !important;
 box-shadow: 0 4px 16px rgba(239, 68, 68, 0.4) !important;
 animation: errorShake 0.5s ease both;
}

.consult-button.error::before {
 content: '✕';
 font-size: 16px;
 font-weight: bold;
 color: #ffffff;
}

@keyframes errorShake {
 0%, 100% { transform: translateX(0); }
 25% { transform: translateX(-5px); }
 75% { transform: translateX(5px); }
}

/* Плавные переходы между разделами */
.consult-transition {
 transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.consult-transition.fade-enter {
 opacity: 0;
 transform: translateY(20px);
}

.consult-transition.fade-enter-active {
 opacity: 1;
 transform: translateY(0);
}

.consult-transition.fade-exit {
 opacity: 1;
 transform: translateY(0);
}

.consult-transition.fade-exit-active {
 opacity: 0;
 transform: translateY(-20px);
}

/* Индикатор загрузки для асинхронных операций */
.consult-loading-indicator {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 padding: 12px 16px;
 background: rgba(108, 92, 231, 0.1);
 border: 1px solid rgba(108, 92, 231, 0.2);
 border-radius: 8px;
 color: #6C5CE7;
 font-size: 14px;
 font-weight: 600;
}

.consult-loading-indicator::before {
 content: '';
 width: 16px;
 height: 16px;
 border: 2px solid rgba(108, 92, 231, 0.3);
 border-top: 2px solid #6C5CE7;
 border-radius: 50%;
 animation: indicatorSpin 1s linear infinite;
}

@keyframes indicatorSpin {
 0% { transform: rotate(0deg); }
 100% { transform: rotate(360deg); }
}

/* Визуальная обратная связь при клике */
.click-feedback {
 position: relative;
 overflow: hidden;
}

.click-feedback::after {
 content: '';
 position: absolute;
 top: 50%;
 left: 50%;
 width: 0;
 height: 0;
 background: rgba(255, 255, 255, 0.3);
 border-radius: 50%;
 transform: translate(-50%, -50%);
 transition: width 0.3s ease, height 0.3s ease;
 pointer-events: none;
}

.click-feedback:active::after {
 width: 100%;
 height: 100%;
}

/* Индикатор прогресса для длительных операций */
.consult-progress-container {
 width: 100%;
 height: 4px;
 background: rgba(108, 92, 231, 0.1);
 border-radius: 2px;
 overflow: hidden;
 margin: 8px 0;
}

.consult-progress-bar {
 height: 100%;
 background: linear-gradient(90deg, #6C5CE7 0%, #8B5CF6 100%);
 border-radius: 2px;
 width: 0%;
 transition: width 0.3s ease;
 position: relative;
 overflow: hidden;
}

.consult-progress-bar::after {
 content: '';
 position: absolute;
 top: 0;
 left: -100%;
 width: 100%;
 height: 100%;
 background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
 animation: progressShimmer 1.5s infinite;
}

@keyframes progressShimmer {
 0% { left: -100%; }
 100% { left: 100%; }
}

/* Сообщения об ошибках */
.consult-error-message {
 background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%);
 border: 1px solid #F87171;
 border-radius: 8px;
 padding: 12px 16px;
 color: #991B1B;
 font-size: 14px;
 font-weight: 600;
 margin: 8px 0;
 display: flex;
 align-items: center;
 gap: 8px;
 animation: errorSlideIn 0.3s ease both;
}

.consult-error-message::before {
 content: '⚠️';
 font-size: 16px;
}

@keyframes errorSlideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
    max-height: 0;
  }
  to {
    opacity: 1;
    transform: translateY(0);
    max-height: 1000px;
  }
}

/* Анимация спиннера для индикатора загрузки */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Кнопка повторной попытки */
.consult-retry-button {
 background: linear-gradient(135deg, #6C5CE7 0%, #5A4BDC 100%) !important;
 color: #ffffff !important;
 border: none;
 padding: 8px 16px;
 border-radius: 6px;
 font-size: 12px;
 font-weight: 600;
 cursor: pointer;
 transition: all 0.3s ease;
 margin-left: 8px;
}

.consult-retry-button:hover {
 background: linear-gradient(135deg, #5A4BDC 0%, #7C3AED 100%) !important;
 transform: translateY(-1px);
 box-shadow: 0 2px 8px rgba(108, 92, 231, 0.3);
}

/* Адаптивность для состояний кнопок */
@media (max-width: 768px) {
 .consult-button {
   min-height: 44px;
   font-size: 14px;
   padding: 12px 16px;
 }

 .consult-button.loading::after {
   width: 18px;
   height: 18px;
   margin: -9px 0 0 -9px;
 }

 .consult-loading-indicator {
   padding: 10px 14px;
   font-size: 13px;
 }

 .consult-loading-indicator::before {
   width: 14px;
   height: 14px;
 }

 .consult-error-message {
   padding: 10px 12px;
   font-size: 13px;
 }
}

@media (max-width: 480px) {
 .consult-button {
   min-height: 40px;
   font-size: 13px;
   padding: 10px 12px;
 }

 .consult-loading-indicator {
   padding: 8px 12px;
   font-size: 12px;
 }

 .consult-error-message {
   padding: 8px 10px;
   font-size: 12px;
 }
}


/* Специально для кнопок вопросов FAQ */
#consult-container .menu-button.btn-white,
#consult-services-container .menu-button.btn-white {
  background: linear-gradient(135deg, #6C5CE7 0%, #5A4BDC 50%, #8B5CF6 100%) !important;
  color: #FFFFFF !important;
  -webkit-color: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(108, 92, 231, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

#consult-container .menu-button.btn-white:hover,
#consult-services-container .menu-button.btn-white:hover {
  background: linear-gradient(135deg, #5A4BDC 0%, #7C3AED 50%, #6D28D9 100%) !important;
  box-shadow: 0 8px 24px rgba(108, 92, 231, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  transform: translateY(-2px);
}

/* =========================================================
    КАСТОМНЫЕ ТУЛТИПЫ ДЛЯ КАРТЫ
    ========================================================= */

.custom-map-tooltip {
  position: fixed;
  background: linear-gradient(135deg, #FFFFFF 0%, #F8F9FF 100%);
  border: 2px solid #6C5CE7;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(108, 92, 231, 0.25), 0 4px 16px rgba(0, 0, 0, 0.1);
  padding: 0;
  z-index: 10000;
  pointer-events: auto; /* Изменено для возможности клика */
  opacity: 0;
  transform: translateY(8px) scale(0.95);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Увеличена продолжительность для плавности */
  max-width: 320px;
  min-width: 280px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  overflow: hidden;
  /* Улучшенная доступность */
}

.custom-map-tooltip.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.custom-map-tooltip::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #6C5CE7;
  z-index: 1;
}

.custom-map-tooltip::after {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #FFFFFF;
  z-index: 2;
}

.tooltip-header {
  background: linear-gradient(135deg, #6C5CE7 0%, #5A4BDC 100%);
  color: #FFFFFF;
  padding: 16px 18px 14px;
  border-radius: 14px 14px 0 0;
  position: relative;
  overflow: hidden;
}

.tooltip-close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: bold;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 1;
}

.tooltip-close-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.tooltip-close-btn:active {
  transform: scale(0.95);
}

.tooltip-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, transparent 50%, rgba(255,255,255,0.1) 100%);
  opacity: 0.3;
}

.tooltip-title {
  font-size: 16px;
  font-weight: 800;
  margin: 0 0 4px 0;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
  position: relative;
  z-index: 1;
}

.tooltip-address {
  font-size: 13px;
  font-weight: 500;
  margin: 0;
  opacity: 0.9;
  position: relative;
  z-index: 1;
}

.tooltip-body {
  padding: 16px 18px;
  color: #333;
}

.tooltip-info {
  margin-bottom: 12px;
}

.info-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 13px;
}

.info-label {
  font-weight: 700;
  color: #6C5CE7;
  min-width: 70px;
  flex-shrink: 0;
}

.info-value {
  color: #333;
  font-weight: 600;
  word-break: break-all;
}

.tooltip-spaces {
  border-top: 1px solid #E6E8F5;
  padding-top: 12px;
  margin-top: 12px;
}

.spaces-title {
  font-size: 13px;
  font-weight: 700;
  color: #6C5CE7;
  margin-bottom: 8px;
}

.tooltip-space {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid #F0F2F7;
}

.tooltip-space:last-child {
  border-bottom: none;
}

.space-name {
  font-size: 13px;
  font-weight: 700;
  color: #333;
  flex: 1;
}

.space-details {
  font-size: 12px;
  color: #666;
  font-style: italic;
}

.tooltip-footer {
  background: #F8F9FF;
  padding: 12px 18px 14px;
  border-top: 1px solid #E6E8F5;
  border-radius: 0 0 14px 14px;
}

.tooltip-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #6C5CE7;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(108, 92, 231, 0.1);
  border: 1px solid rgba(108, 92, 231, 0.2);
  transition: all 0.2s ease;
  cursor: pointer;
}

.tooltip-link:hover {
  background: rgba(108, 92, 231, 0.2);
  border-color: rgba(108, 92, 231, 0.4);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(108, 92, 231, 0.15);
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
  .custom-map-tooltip {
    max-width: 280px;
    min-width: 240px;
    font-size: 14px;
    /* Улучшенная позиция для мобильных */
    transform-origin: center bottom;
  }

  .tooltip-header {
    padding: 14px 16px 12px;
  }

  .tooltip-title {
    font-size: 15px;
  }

  .tooltip-address {
    font-size: 12px;
  }

  .tooltip-body {
    padding: 14px 16px;
  }

  .info-row {
    font-size: 12px;
    gap: 6px;
  }

  .info-label {
    min-width: 60px;
  }

  .tooltip-footer {
    padding: 10px 16px 12px;
  }

  .tooltip-link {
    font-size: 12px;
    padding: 6px 10px;
    /* Увеличенная область клика для мобильных */
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .tooltip-close-btn {
    width: 32px;
    height: 32px;
    font-size: 14px;
    /* Увеличенная область клика */
    min-width: 44px;
    min-height: 44px;
  }
}

@media (max-width: 480px) {
  .custom-map-tooltip {
    max-width: 260px;
    min-width: 220px;
    font-size: 13px;
    /* Оптимизация для маленьких экранов */
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(108, 92, 231, 0.2), 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .tooltip-header {
    padding: 12px 14px 10px;
  }

  .tooltip-title {
    font-size: 14px;
  }

  .tooltip-body {
    padding: 12px 14px;
  }

  .tooltip-footer {
    padding: 8px 14px 10px;
  }

  .tooltip-close-btn {
    width: 30px;
    height: 30px;
    font-size: 12px;
    top: 10px;
    right: 10px;
  }

  /* Улучшенные touch targets для маленьких экранов */
  .tooltip-link {
    min-height: 48px;
    padding: 8px 12px;
    font-size: 13px;
  }
}

/* Анимации для тултипов */
@keyframes tooltipFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes tooltipFadeOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
}

.custom-map-tooltip.visible {
  animation: tooltipFadeIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Оптимизация производительности для тултипов */
.custom-map-tooltip {
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

/* Отключение анимаций при reduced motion */
@media (prefers-reduced-motion: reduce) {
  .custom-map-tooltip {
    transition: none !important;
    animation: none !important;
  }

  .tooltip-link {
    transition: none !important;
  }
}

/* Улучшенная доступность */

/* Стили для фокуса на метках карты */
.ymaps-2-1-79-placemark {
  outline: none;
  transition: all 0.2s ease;
}

.ymaps-2-1-79-placemark:focus {
  outline: 3px solid #6C5CE7;
  outline-offset: 2px;
  border-radius: 4px;
  box-shadow: 0 0 0 6px rgba(108, 92, 231, 0.3);
}

/* Стили для hover эффекта на метках */
.ymaps-2-1-79-placemark:hover {
  transform: scale(1.1);
  filter: brightness(1.1);
  transition: all 0.2s ease;
}

/* Стили для активного состояния метки */
.ymaps-2-1-79-placemark:active {
  transform: scale(0.95);
  transition: all 0.1s ease;
}

/* Улучшенные стили для иконок меток */
.ymaps-2-1-79-placemark-icon {
  cursor: pointer;
  transition: all 0.2s ease;
}

.ymaps-2-1-79-placemark-icon:hover {
  filter: drop-shadow(0 2px 4px rgba(108, 92, 231, 0.4));
}

.ymaps-2-1-79-placemark-icon:focus {
  filter: drop-shadow(0 0 0 3px rgba(108, 92, 231, 0.6));
}

/* Стили для кнопок фильтрации бронирований */
.menu-button.filter-bookings {
  padding: 16px 20px !important;
  font-size: 16px !important;
  min-width: 140px !important;
}

/* Стили для кнопки обновления - зеленая */
#btn-refresh-bookings {
  padding: 8px 12px !important;
  font-size: 14px !important;
  background: linear-gradient(135deg, #10B981 0%, #059669 50%, #047857 100%) !important;
  color: #FFFFFF !important;
  -webkit-color: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

#btn-refresh-bookings:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 50%, #065F46 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  color: #FFFFFF !important;
  -webkit-color: #FFFFFF !important;
}

/* Стили для кнопки "Прошедшие" - белый текст */
button[data-type="past"],
.menu-button[data-type="past"] {
  color: #FFFFFF !important;
  -webkit-color: #FFFFFF !important;
  background: linear-gradient(135deg, #6C5CE7 0%, #5A4BDC 50%, #8B5CF6 100%) !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(108, 92, 231, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

button[data-type="past"]:hover,
.menu-button[data-type="past"]:hover {
  background: linear-gradient(135deg, #5A4BDC 0%, #7C3AED 50%, #6D28D9 100%) !important;
  box-shadow: 0 8px 24px rgba(108, 92, 231, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  transform: translateY(-2px);
}

/* Стили для кнопки "Выйти" - белый текст */
#btn-return-to-login {
  color: #FFFFFF !important;
  -webkit-color: #FFFFFF !important;
  background: linear-gradient(135deg, #6C5CE7 0%, #5A4BDC 50%, #8B5CF6 100%) !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(108, 92, 231, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

#btn-return-to-login:hover {
  background: linear-gradient(135deg, #5A4BDC 0%, #7C3AED 50%, #6D28D9 100%) !important;
  box-shadow: 0 8px 24px rgba(108, 92, 231, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  transform: translateY(-2px);
}

/* Стили для кнопки "Нет" - фиолетовый градиент и белый текст */
#confirm-no {
  background: linear-gradient(135deg, #6C5CE7 0%, #5A4BDC 50%, #8B5CF6 100%) !important;
  color: #FFFFFF !important;
  -webkit-color: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(108, 92, 231, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#confirm-no:hover {
  background: linear-gradient(135deg, #5A4BDC 0%, #7C3AED 50%, #6D28D9 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(108, 92, 231, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  color: #FFFFFF !important;
  -webkit-color: #FFFFFF !important;
}

/* Правила для #confirm-no объединены с основными стилями кнопок */

/* Мобильная адаптивность для кнопки "Нет" */
@media (max-width: 768px) {
  #confirm-no {
    background: linear-gradient(135deg, #6C5CE7 0%, #5A4BDC 50%, #8B5CF6 100%) !important;
    color: #FFFFFF !important;
    -webkit-color: #FFFFFF !important;
    border: none !important;
    box-shadow: 0 4px 16px rgba(108, 92, 231, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  }

  #confirm-no:hover {
    background: linear-gradient(135deg, #5A4BDC 0%, #7C3AED 50%, #6D28D9 100%) !important;
    color: #FFFFFF !important;
    -webkit-color: #FFFFFF !important;
  }
}

/* Стили для кнопок "Назад" и "Главное меню" - белый градиент с фиолетовой обводкой и текстом */
#btn-back-to-menu,
#btn-main-menu,
#btn-back-to-space {
  background: linear-gradient(135deg, #FFFFFF 0%, #F9FAFB 50%, #F3F4F6 100%);
  color: #6C5CE7 !important;
  -webkit-color: #6C5CE7 !important;
  border: 1px solid #6C5CE7;
  box-shadow: 0 2px 8px rgba(108, 92, 231, 0.25) !important;
  transition: all 0.3s ease !important;
  transform: translateY(0px) !important;
}

#btn-back-to-menu:hover,
#btn-main-menu:hover,
#btn-back-to-space:hover {
  background: linear-gradient(135deg, #F7FAFF 0%, #EEF2FF 50%, #E0E7FF 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 16px rgba(108, 92, 231, 0.35) !important;
  color: #5A4BDC !important;
  -webkit-color: #5A4BDC !important;
  border-color: #5A4BDC;
}

/* Стили для кнопок "Главное меню" - белый градиент с фиолетовой обводкой и текстом */
#btn-main-menu,
#btn-feedback-main,
#btn-services-main,
#btn-consult-main-menu,
#btn-consult-services-main-menu,
#btn-map-main,
#btn-calendars-main {
  background: linear-gradient(135deg, #FFFFFF 0%, #F9FAFB 50%, #F3F4F6 100%) !important;
  color: #6C5CE7 !important;
  -webkit-color: #6C5CE7 !important;
  border: 1px solid #6C5CE7 !important;
  box-shadow: 0 2px 8px rgba(108, 92, 231, 0.25) !important;
  transition: all 0.3s ease !important;
}

#btn-main-menu:hover,
#btn-feedback-main:hover,
#btn-services-main:hover,
#btn-consult-main-menu:hover,
#btn-consult-services-main-menu:hover,
#btn-map-main:hover,
#btn-calendars-main:hover {
  background: linear-gradient(135deg, #F7FAFF 0%, #EEF2FF 50%, #E0E7FF 100%) !important;
  border-color: #5A4BDC !important;
  color: #5A4BDC !important;
  -webkit-color: #5A4BDC !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(108, 92, 231, 0.35) !important;
}

/* =========================================================
    Улучшенные стили для навигации карусели
    ========================================================= */

/* Контейнер навигации карусели */
.carousel-nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  gap: 20px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #FFFFFF 0%, #F8F9FF 100%);
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(108, 92, 231, 0.1);
  border: 1px solid rgba(108, 92, 231, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Кнопки навигации карусели */
.carousel-nav-btn {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 50%, #8B5CF6 100%);
  color: #FFFFFF;
  border: none;
  border-radius: 12px;
  min-width: 120px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  padding: 0 16px;
  box-shadow: 0 6px 20px rgba(108, 92, 231, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}

.carousel-nav-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s ease;
}

.carousel-nav-btn:hover {
  background: linear-gradient(135deg, var(--brand-2) 0%, #5A4BDC 50%, #7C3AED 100%);
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 10px 28px rgba(108, 92, 231, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.carousel-nav-btn:hover::before {
  left: 100%;
}

.carousel-nav-btn:active {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 4px 16px rgba(108, 92, 231, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.carousel-nav-btn:focus {
  outline: none;
  box-shadow: 0 6px 20px rgba(108, 92, 231, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 0 3px rgba(108, 92, 231, 0.3);
}

/* Индикатор страницы */
.page-indicator {
  font-size: 16px;
  font-weight: 700;
  color: var(--brand);
  background: linear-gradient(135deg, rgba(108, 92, 231, 0.1) 0%, rgba(108, 92, 231, 0.05) 100%);
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px solid rgba(108, 92, 231, 0.2);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 8px rgba(108, 92, 231, 0.1);
  transition: all 0.3s ease;
}

.page-indicator:hover {
  background: linear-gradient(135deg, rgba(108, 92, 231, 0.15) 0%, rgba(108, 92, 231, 0.08) 100%);
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(108, 92, 231, 0.15);
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
  .carousel-nav-container {
    margin-top: 12px;
    gap: 16px;
    padding: 10px 14px;
    border-radius: 14px;
  }

  .carousel-nav-btn {
    min-width: 100px;
    height: 44px;
    font-size: 13px;
    padding: 0 12px;
  }

  .page-indicator {
    font-size: 14px;
    padding: 6px 12px;
    border-radius: 16px;
  }
}

@media (max-width: 480px) {
  .carousel-nav-container {
    margin-top: 10px;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 12px;
  }

  .carousel-nav-btn {
    min-width: 90px;
    height: 40px;
    font-size: 12px;
    padding: 0 10px;
  }

  .page-indicator {
    font-size: 13px;
    padding: 5px 10px;
    border-radius: 14px;
  }
}

@media (max-width: 360px) {
  .carousel-nav-container {
    margin-top: 8px;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 10px;
  }

  .carousel-nav-btn {
    min-width: 80px;
    height: 36px;
    font-size: 11px;
    padding: 0 8px;
  }

  .page-indicator {
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 12px;
  }
}

/* Анимации для плавного появления */
.carousel-nav-container {
  animation: fadeInUp 0.5s ease both;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Оптимизация производительности */
.carousel-nav-container,
.carousel-nav-btn,
.page-indicator {
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

/* Отключение анимаций при reduced motion */
@media (prefers-reduced-motion: reduce) {
  .carousel-nav-container,
  .carousel-nav-btn,
  .page-indicator {
    transition: none !important;
    animation: none !important;
  }
}

/* Кнопки "назад" и "главное меню" - белый градиент с фиолетовой обводкой и текстом */
#btn-back-to-space,
#btn-main-menu,
#btn-back-to-menu,
#btn-back-to-district,
#btn-back-from-bookings,
#btn-back-from-status,
#btn-services-back,
#btn-consult-services-back,
#btn-map-back,
#btn-feedback-main,
#btn-services-main,
#btn-consult-services-main-menu,
#btn-map-main,
#btn-calendars-main,
#btn-calendars-back {
  background: linear-gradient(135deg, #FFFFFF 0%, #F9FAFB 50%, #F3F4F6 100%) !important;
  color: #6C5CE7 !important;
  -webkit-color: #6C5CE7 !important;
  border: 1px solid #6C5CE7 !important;
  box-shadow: 0 2px 8px rgba(108, 92, 231, 0.25) !important;
  transition: all 0.3s ease !important;
}

#btn-back-to-space:hover,
#btn-main-menu:hover,
#btn-back-to-menu:hover,
#btn-back-to-district:hover,
#btn-back-from-bookings:hover,
#btn-back-from-status:hover,
#btn-services-back:hover,
#btn-consult-services-back:hover,
#btn-map-back:hover,
#btn-feedback-main:hover,
#btn-services-main:hover,
#btn-consult-services-main-menu:hover,
#btn-map-main:hover,
#btn-calendars-main:hover,
#btn-calendars-back:hover {
  background: linear-gradient(135deg, #F7FAFF 0%, #EEF2FF 50%, #E0E7FF 100%) !important;
  border-color: #5A4BDC !important;
  color: #5A4BDC !important;
  -webkit-color: #5A4BDC !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(108, 92, 231, 0.35) !important;
}

/* Стили для текста согласия */
.consent-text {
  margin-bottom: 16px;
  padding: 12px;
  background: #FFFFFF;
  border: 1px solid #E6E8F5;
  border-radius: 12px;
  font-size: 14px;
  color: #000000 !important;
  -webkit-color: #000000 !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
  line-height: 1.5;
}

.consent-text p {
  margin: 0 0 8px 0;
  font-weight: 600;
  color: #000000 !important;
  -webkit-color: #000000 !important;
}

.consent-text ol {
  margin: 0;
  padding-left: 20px;
}

.consent-text li {
  margin-bottom: 6px;
  color: #000000 !important;
  -webkit-color: #000000 !important;
}

/* Исправление цвета текста согласия в модальном окне */
#consent-modal .modal-form-content div[style*="color:#333"] {
  color: #000000 !important;
  -webkit-color: #000000 !important;
}

#consent-modal .modal-form-content div[style*="color:#333"] * {
  color: #000000 !important;
  -webkit-color: #000000 !important;
}

#consent-modal .modal-form-content div[style*="color:#333"] a {
  color: #6C5CE7 !important;
  -webkit-color: #6C5CE7 !important;
}

/* Стили для кнопки "Отмена" в модальном окне согласия */
#consent-cancel {
  background: #FFFFFF !important;
  color: #000000 !important;
  -webkit-color: #000000 !important;
  border: 1px solid #D0D0D0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

#consent-cancel:hover {
  background: #F5F5F5 !important;
  border-color: #B0B0B0 !important;
  color: #000000 !important;
  -webkit-color: #000000 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Мобильные стили для текста согласия */
@media (max-width: 768px) {
  .consent-text {
    font-size: 13px;
    padding: 10px;
    margin-bottom: 14px;
  }

  .consent-text p {
    font-size: 14px;
  }

  .consent-text ol {
    padding-left: 18px;
  }

  .consent-text li {
    margin-bottom: 8px;
  }
}

@media (max-width: 480px) {
  .consent-text {
    font-size: 12px;
    padding: 8px;
    margin-bottom: 12px;
  }

  .consent-text p {
    font-size: 13px;
  }

  .consent-text ol {
    padding-left: 16px;
  }

  .consent-text li {
    margin-bottom: 6px;
  }
}
/* =========================================================
   УНИВЕРСАЛЬНЫЙ ПОИСК - СТИЛИ
   ========================================================= */

/* Контейнер универсального поиска */
.universal-search-container {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 20px);
  right: 20px;
  z-index: 1000;
  max-width: 400px;
  min-width: 300px;
}

/* Обертка поиска */
.search-wrapper {
  position: relative;
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(108, 92, 231, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 2px solid rgba(108, 92, 231, 0.2);
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Контейнер ввода поиска */
.search-input-container {
  display: flex;
  align-items: center;
  padding: 4px;
  background: #FFFFFF;
  border-radius: 16px;
}

/* Поле ввода поиска */
.universal-search-input {
  flex: 1;
  padding: 14px 16px;
  border: none;
  outline: none;
  font-size: 15px;
  font-weight: 500;
  color: #000000;
  background: transparent;
  border-radius: 12px;
}

.universal-search-input::placeholder {
  color: #666666;
  font-weight: 500;
}

/* Кнопка переключения поиска */
.search-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, #6C5CE7 0%, #5A4BDC 100%);
  border: none;
  border-radius: 12px;
  color: #FFFFFF;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(108, 92, 231, 0.3);
}

.search-toggle-btn:hover {
  background: linear-gradient(135deg, #5A4BDC 0%, #7C3AED 100%);
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(108, 92, 231, 0.4);
}

/* Кнопка очистки поиска */
.search-clear-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(108, 92, 231, 0.1);
  border: none;
  border-radius: 8px;
  color: #6C5CE7;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-right: 4px;
}

.search-clear-btn:hover {
  background: rgba(108, 92, 231, 0.2);
  transform: scale(1.1);
}

/* Результаты поиска */
.universal-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #FFFFFF;
  border: 1px solid rgba(108, 92, 231, 0.2);
  border-top: none;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 8px 32px rgba(108, 92, 231, 0.15), 0 4px 16px rgba(0, 0, 0, 0.1);
  max-height: 400px;
  overflow-y: auto;
  z-index: 1001;
}

/* Список результатов */
.search-results-list {
  padding: 8px 0;
}

/* Элемент результата поиска */
.search-result-item {
  padding: 16px;
  border-bottom: 1px solid #F0F2F7;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

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

.search-result-item:hover {
  background: #F8F9FF;
  padding-left: 20px;
}

/* Заголовок результата */
.result-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.result-category {
  background: rgba(108, 92, 231, 0.1);
  color: #6C5CE7;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.result-type {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
}

/* Название результата */
.result-title {
  font-size: 15px;
  font-weight: 700;
  color: #000000;
  margin: 0 0 6px 0;
  line-height: 1.3;
}

/* Содержимое результата */
.result-content {
  font-size: 13px;
  color: #666666;
  line-height: 1.4;
  margin: 0 0 8px 0;
}

/* Ссылка в результате */
.result-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #6C5CE7;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(108, 92, 231, 0.1);
  transition: all 0.2s ease;
}

.result-link:hover {
  background: rgba(108, 92, 231, 0.2);
  transform: translateY(-1px);
}

/* История поиска */
.search-history {
  padding: 8px 0;
}

.search-history-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #666666;
}

.search-history-item:hover {
  background: #F8F9FF;
  color: #6C5CE7;
}

.search-history-item i {
  color: #999999;
  font-size: 12px;
}

/* Нет результатов */
.search-no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  color: #999999;
}

.search-no-results i {
  font-size: 32px;
  margin-bottom: 12px;
  color: #CCCCCC;
}

.search-no-results p {
  margin: 0 0 4px 0;
  font-size: 14px;
  font-weight: 600;
}

.search-no-results small {
  font-size: 12px;
  color: #BBBBBB;
}

/* Подсветка найденного текста */
mark {
  background: rgba(108, 92, 231, 0.2);
  color: #6C5CE7;
  padding: 1px 2px;
  border-radius: 2px;
  font-weight: 600;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
  .universal-search-container {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    right: 10px;
    left: 10px;
    max-width: none;
    min-width: auto;
  }

  .search-wrapper {
    border-radius: 12px;
  }

  .universal-search-input {
    padding: 12px 14px;
    font-size: 14px;
  }

  .search-toggle-btn {
    width: 40px;
    height: 40px;
  }

  .universal-search-results {
    border-radius: 0 0 12px 12px;
    max-height: 300px;
  }

  .search-result-item {
    padding: 14px;
  }

  .result-title {
    font-size: 14px;
  }

  .result-content {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .universal-search-container {
    top: calc(env(safe-area-inset-top, 0px) + 8px);
    right: 8px;
    left: 8px;
  }

  .search-input-container {
    padding: 2px;
  }

  .universal-search-input {
    padding: 10px 12px;
    font-size: 13px;
  }

  .search-toggle-btn {
    width: 36px;
    height: 36px;
  }

  .search-clear-btn {
    width: 28px;
    height: 28px;
  }

  .universal-search-results {
    max-height: 250px;
  }

  .search-result-item {
    padding: 12px;
  }

  .result-title {
    font-size: 13px;
  }

  .result-content {
    font-size: 11px;
  }
}

/* Анимации для поиска */
@keyframes searchSlideIn {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes searchSlideOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-5px) scale(0.98);
  }
}

.universal-search-results {
  animation: searchSlideIn 0.2s ease both;
}

/* Оптимизация производительности */
.universal-search-container,
.search-wrapper,
.search-input-container,
.universal-search-results {
  contain: layout style paint;
  will-change: transform, opacity;
}

/* Отключение анимаций при reduced motion */
@media (prefers-reduced-motion: reduce) {
  .universal-search-container,
  .search-wrapper,
  .search-input-container,
  .universal-search-results,
  .search-toggle-btn,
  .search-clear-btn,
  .search-result-item {
    transition: none !important;
    animation: none !important;
  }
}

/* Фокусные состояния для доступности */
.search-toggle-btn:focus,
.search-clear-btn:focus,
.search-result-item:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.4);
}

.search-result-item:focus {
  outline: 2px solid #6C5CE7;
  outline-offset: 2px;
}

/* Улучшенная поддержка темной темы */
@media (prefers-color-scheme: dark) {
  .search-wrapper {
    background: #2a2a2a;
    border-color: rgba(108, 92, 231, 0.3);
  }

  .universal-search-input {
    color: #ffffff;
  }

  .universal-search-input::placeholder {
    color: #999999;
  }

  .universal-search-results {
    background: #2a2a2a;
    border-color: rgba(108, 92, 231, 0.3);
  }

  .search-result-item {
    border-color: #404040;
  }

  .search-result-item:hover {
    background: #333333;
  }

  .result-title {
    color: #ffffff;
  }

  .result-content {
    color: #cccccc;
  }

  .search-no-results {
    color: #999999;
  }

  .search-history-item {
    color: #cccccc;
  }

  .search-history-item:hover {
    background: #333333;
    color: #6C5CE7;
  }
}

/* Дополнительные улучшения для touch-устройств */
@media (hover: none) and (pointer: coarse) {
  .search-toggle-btn,
  .search-clear-btn {
    min-width: 48px;
    min-height: 48px;
  }

  .search-result-item {
    min-height: 48px;
  }

  .result-link {
    min-height: 44px;
    padding: 8px 12px;
  }
}

/* Индикатор загрузки поиска */
.search-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  color: #666666;
  font-size: 13px;
}

.search-loading::before {
  content: '';
  width: 16px;
  height: 16px;
  border: 2px solid rgba(108, 92, 231, 0.3);
  border-top: 2px solid #6C5CE7;
  border-radius: 50%;
  animation: searchSpin 1s linear infinite;
  margin-right: 8px;
}

/* =========================================================
   СТИЛИ ДЛЯ УЛУЧШЕННОГО МОДАЛЬНОГО ОКНА КОНСУЛЬТАЦИИ
   ========================================================= */

/* Основное модальное окно консультации */
.consultation-modal {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.consultation-modal-content {
  max-width: 800px;
  width: 95vw;
  max-height: 90vh;
  overflow-y: auto;
  background: linear-gradient(135deg, #FFFFFF 0%, #F8F9FF 100%);
  border: 2px solid #6C5CE7;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(108, 92, 231, 0.3), 0 8px 32px rgba(0, 0, 0, 0.1);
  position: relative;
  animation: consultationModalSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes consultationModalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Хедер модального окна */
.consultation-modal-header {
  background: linear-gradient(135deg, #6C5CE7 0%, #5A4BDC 100%);
  color: #FFFFFF;
  padding: 20px 24px;
  border-radius: 18px 18px 0 0;
  position: relative;
  text-align: center;
}

.consultation-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: #FFFFFF;
  font-size: 18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 10;
}

.consultation-close-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.consultation-modal-title {
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.consultation-modal-subtitle {
  font-size: 15px;
  margin: 0;
  opacity: 0.9;
  font-weight: 500;
}

/* Тело модального окна */
.consultation-modal-body {
  padding: 24px;
  min-height: 400px;
}

/* Поисковая секция в модальном окне */
.consultation-search-section {
  margin-bottom: 24px;
}

.consultation-search-section .search-container {
  max-width: 100%;
}

.consultation-search-section .search-input-wrapper {
  background: #FFFFFF;
  border: 2px solid rgba(108, 92, 231, 0.2);
  border-radius: 14px;
  padding: 3px;
  transition: all 0.3s ease;
}

.consultation-search-section .search-input-wrapper:focus-within {
  border-color: #6C5CE7;
  box-shadow: 0 0 0 4px rgba(108, 92, 231, 0.15);
  transform: translateY(-1px);
}

.consultation-search-section .search-input {
  padding: 16px 20px;
  font-size: 16px;
  border-radius: 12px;
}

.consultation-search-section .search-btn {
  background: linear-gradient(135deg, #6C5CE7 0%, #5A4BDC 100%);
  border-radius: 12px;
  width: 48px;
  height: 48px;
}

.consultation-search-section .search-clear-btn {
  background: rgba(108, 92, 231, 0.1);
  border-radius: 10px;
  width: 36px;
  height: 36px;
  margin-right: 6px;
}

/* Быстрые действия в модальном окне */
.consultation-quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.quick-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 20px;
  background: rgba(108, 92, 231, 0.1);
  border: 2px solid rgba(108, 92, 231, 0.2);
  border-radius: 14px;
  color: #6C5CE7;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
  min-height: 48px;
}

.quick-action-btn:hover {
  background: rgba(108, 92, 231, 0.15);
  border-color: rgba(108, 92, 231, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(108, 92, 231, 0.2);
}

/* Контейнер результатов в модальном окне */
.consultation-modal-result {
  background: #FFFFFF;
  border: 1px solid rgba(108, 92, 231, 0.1);
  border-radius: 16px;
  padding: 20px;
  min-height: 300px;
  box-shadow: 0 4px 20px rgba(108, 92, 231, 0.08);
}

/* Кнопки в модальном окне */
.consult-button-modal {
  background: linear-gradient(135deg, #6C5CE7 0%, #5A4BDC 50%, #8B5CF6 100%);
  color: #FFFFFF;
  border: none;
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(108, 92, 231, 0.25);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.consult-button-modal:hover {
  background: linear-gradient(135deg, #5A4BDC 0%, #7C3AED 50%, #6D28D9 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(108, 92, 231, 0.35);
}

/* Стили для контента в модальном окне */
.services-list-modal {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.service-btn-modal {
  background: linear-gradient(135deg, #6C5CE7 0%, #5A4BDC 100%);
  color: #FFFFFF;
  border: none;
  padding: 16px 20px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(108, 92, 231, 0.25);
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-btn-modal:hover {
  background: linear-gradient(135deg, #5A4BDC 0%, #7C3AED 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(108, 92, 231, 0.35);
}

/* Стили для FAQ в модальном окне */
.faq-list-modal {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.faq-item-modal {
  background: #FFFFFF;
  border: 1px solid rgba(108, 92, 231, 0.1);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(108, 92, 231, 0.08);
  transition: all 0.3s ease;
}

.faq-item-modal:hover {
  box-shadow: 0 4px 16px rgba(108, 92, 231, 0.12);
  transform: translateY(-1px);
}

.faq-toggle-btn-modal {
  width: 100%;
  text-align: left;
  padding: 16px 20px;
  background: linear-gradient(135deg, #6C5CE7 0%, #5A4BDC 50%, #8B5CF6 100%);
  color: #FFFFFF;
  border: none;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.faq-toggle-btn-modal:hover {
  background: linear-gradient(135deg, #5A4BDC 0%, #7C3AED 50%, #6D28D9 100%);
  transform: translateY(-1px);
}

.faq-answer-modal {
  background: #F8F9FF;
  border-top: 1px solid rgba(108, 92, 231, 0.1);
  padding: 0 20px;
  font-size: 14px;
  line-height: 1.6;
  color: #333333;
  max-height: 0;
  overflow: hidden;
  transition: all 0.4s ease;
}

.faq-answer-modal.show {
  max-height: 1000px;
  padding: 16px 20px;
}

/* Адаптивность для модального окна */
@media (max-width: 768px) {
  .consultation-modal-content {
    width: 98vw;
    max-height: 95vh;
    border-radius: 16px;
  }

  .consultation-modal-header {
    padding: 16px 20px;
    border-radius: 14px 14px 0 0;
  }

  .consultation-modal-title {
    font-size: 20px;
  }

  .consultation-modal-subtitle {
    font-size: 14px;
  }

  .consultation-modal-body {
    padding: 20px 16px;
  }

  .consultation-quick-actions {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .quick-action-btn {
    padding: 14px 16px;
    font-size: 14px;
    min-height: 44px;
  }

  .services-list-modal {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .service-btn-modal {
    padding: 14px 16px;
    font-size: 14px;
    min-height: 44px;
  }

  .consultation-modal-result {
    padding: 16px;
  }

  .consult-button-modal {
    padding: 12px 20px;
    font-size: 14px;
    min-height: 44px;
  }
}

@media (max-width: 480px) {
  .consultation-modal-content {
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    animation: consultationModalSlideInMobile 0.3s ease both;
  }

  @keyframes consultationModalSlideInMobile {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .consultation-modal-header {
    padding: 16px;
    border-radius: 0;
  }

  .consultation-close-btn {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }

  .consultation-modal-title {
    font-size: 18px;
  }

  .consultation-modal-subtitle {
    font-size: 13px;
  }

  .consultation-modal-body {
    padding: 16px;
  }

  .consultation-quick-actions {
    gap: 8px;
  }

  .quick-action-btn {
    padding: 12px 14px;
    font-size: 13px;
    min-height: 40px;
  }

  .service-btn-modal {
    padding: 12px 14px;
    font-size: 13px;
    min-height: 40px;
  }

  .faq-toggle-btn-modal {
    padding: 14px 16px;
    font-size: 14px;
  }

  .faq-answer-modal {
    font-size: 13px;
  }

  .consult-button-modal {
    padding: 10px 16px;
    font-size: 13px;
    min-height: 40px;
  }
}

/* Анимации для модального окна */
@keyframes consultationModalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Оптимизация производительности */
.consultation-modal,
.consultation-modal-content,
.consultation-modal-header,
.consultation-modal-body,
.consultation-modal-result {
  contain: layout style paint;
  will-change: transform, opacity;
}

/* Отключение анимаций при reduced motion */
@media (prefers-reduced-motion: reduce) {
  .consultation-modal-content,
  .consultation-modal-header,
  .consultation-modal-body,
  .consultation-modal-result,
  .quick-action-btn,
  .service-btn-modal,
  .consult-button-modal {
    transition: none !important;
    animation: none !important;
  }
}

@keyframes searchSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* =========================================================
   ИНТЕГРИРОВАННЫЙ ПОИСК - СТИЛИ
   ========================================================= */

/* Контейнер интегрированного поиска */
.integrated-search-container {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

/* Обертка поиска */
.search-wrapper {
  position: relative;
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(108, 92, 231, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 2px solid rgba(108, 92, 231, 0.2);
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Контейнер ввода поиска */
.search-input-container {
  display: flex;
  align-items: center;
  padding: 4px;
  background: #FFFFFF;
  border-radius: 16px;
}

/* Поле ввода поиска */
.integrated-search-input {
  flex: 1;
  padding: 14px 16px;
  border: none;
  outline: none;
  font-size: 15px;
  font-weight: 500;
  color: #000000;
  background: transparent;
  border-radius: 12px;
}

.integrated-search-input::placeholder {
  color: #666666;
  font-weight: 500;
}

/* Кнопка очистки поиска */
.search-clear-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(108, 92, 231, 0.1);
  border: none;
  border-radius: 8px;
  color: #6C5CE7;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-right: 4px;
}

.search-clear-btn:hover {
  background: rgba(108, 92, 231, 0.2);
  transform: scale(1.1);
}

/* Результаты поиска */
.integrated-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #FFFFFF;
  border: 1px solid rgba(108, 92, 231, 0.2);
  border-top: none;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 8px 32px rgba(108, 92, 231, 0.15), 0 4px 16px rgba(0, 0, 0, 0.1);
  max-height: 400px;
  overflow-y: auto;
  z-index: 1001;
}

/* Заголовок результатов */
.search-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #F0F2F7;
  background: rgba(108, 92, 231, 0.02);
}

.results-count {
  font-size: 12px;
  color: #666666;
  font-weight: 600;
}

.view-all-btn {
  background: rgba(108, 92, 231, 0.1);
  color: #6C5CE7;
  border: none;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.view-all-btn:hover {
  background: rgba(108, 92, 231, 0.2);
}

/* Список результатов */
.search-results-list {
  padding: 8px 0;
}

/* Элемент результата поиска */
.search-result-item {
  padding: 16px;
  border-bottom: 1px solid #F0F2F7;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

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

.search-result-item:hover {
  background: #F8F9FF;
  padding-left: 20px;
}

/* Заголовок результата */
.result-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.result-category {
  background: rgba(108, 92, 231, 0.1);
  color: #6C5CE7;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.result-type {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
}

/* Название результата */
.result-title {
  font-size: 15px;
  font-weight: 700;
  color: #000000;
  margin: 0 0 6px 0;
  line-height: 1.3;
}

/* Содержимое результата */
.result-content {
  font-size: 13px;
  color: #666666;
  line-height: 1.4;
  margin: 0 0 8px 0;
}

/* Действия в результате */
.result-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.quick-access-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(108, 92, 231, 0.1);
  color: #6C5CE7;
  border: 1px solid rgba(108, 92, 231, 0.2);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.quick-access-btn:hover {
  background: rgba(108, 92, 231, 0.2);
  border-color: rgba(108, 92, 231, 0.3);
  transform: translateY(-1px);
}

/* История поиска */
.search-history {
  padding: 8px 0;
}

.search-history-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #666666;
}

.search-history-item:hover {
  background: #F8F9FF;
  color: #6C5CE7;
}

.search-history-item i {
  color: #999999;
  font-size: 12px;
}

/* Нет результатов */
.search-no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  color: #999999;
}

.search-no-results i {
  font-size: 32px;
  margin-bottom: 12px;
  color: #CCCCCC;
}

.search-no-results p {
  margin: 0 0 4px 0;
  font-size: 14px;
  font-weight: 600;
}

.search-no-results small {
  font-size: 12px;
  color: #BBBBBB;
}

/* Подсветка найденного текста */
mark {
  background: rgba(108, 92, 231, 0.2);
  color: #6C5CE7;
  padding: 1px 2px;
  border-radius: 2px;
  font-weight: 600;
}

/* Индикатор режима поиска */
.search-mode-indicator {
  text-align: center;
  padding: 8px 16px;
  background: rgba(108, 92, 231, 0.05);
  border-top: 1px solid rgba(108, 92, 231, 0.1);
}

.search-mode-indicator small {
  color: #6C5CE7;
  font-size: 11px;
  font-weight: 600;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
  .integrated-search-container {
    max-width: none;
  }

  .search-wrapper {
    border-radius: 12px;
  }

  .integrated-search-input {
    padding: 12px 14px;
    font-size: 14px;
  }

  .integrated-search-results {
    border-radius: 0 0 12px 12px;
    max-height: 300px;
  }

  .search-result-item {
    padding: 14px;
  }

  .result-title {
    font-size: 14px;
  }

  .result-content {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .search-input-container {
    padding: 2px;
  }

  .integrated-search-input {
    padding: 10px 12px;
    font-size: 13px;
  }

  .search-clear-btn {
    width: 28px;
    height: 28px;
  }

  .integrated-search-results {
    max-height: 250px;
  }

  .search-result-item {
    padding: 12px;
  }

  .result-title {
    font-size: 13px;
  }

  .result-content {
    font-size: 11px;
  }
}

/* Анимации для поиска */
@keyframes searchSlideIn {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes searchSlideOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-5px) scale(0.98);
  }
}

.integrated-search-results {
  animation: searchSlideIn 0.2s ease both;
}

/* Оптимизация производительности */
.integrated-search-container,
.search-wrapper,
.search-input-container,
.integrated-search-results {
  contain: layout style paint;
  will-change: transform, opacity;
}

/* Отключение анимаций при reduced motion */
@media (prefers-reduced-motion: reduce) {
  .integrated-search-container,
  .search-wrapper,
  .search-input-container,
  .integrated-search-results,
  .search-clear-btn,
  .search-result-item {
    transition: none !important;
    animation: none !important;
  }
}

/* Фокусные состояния для доступности */
.search-clear-btn:focus,
.search-result-item:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.4);
}

.search-result-item:focus {
  outline: 2px solid #6C5CE7;
  outline-offset: 2px;
}

/* Улучшенная поддержка темной темы */
@media (prefers-color-scheme: dark) {
  .search-wrapper {
    background: #2a2a2a;
    border-color: rgba(108, 92, 231, 0.3);
  }

  .integrated-search-input {
    color: #ffffff;
  }

  .integrated-search-input::placeholder {
    color: #999999;
  }

  .integrated-search-results {
    background: #2a2a2a;
    border-color: rgba(108, 92, 231, 0.3);
  }

  .search-result-item {
    border-color: #404040;
  }

  .search-result-item:hover {
    background: #333333;
  }

  .result-title {
    color: #ffffff;
  }

  .result-content {
    color: #cccccc;
  }

  .search-no-results {
    color: #999999;
  }

  .search-history-item {
    color: #cccccc;
  }

  .search-history-item:hover {
    background: #333333;
    color: #6C5CE7;
  }
}

/* Дополнительные улучшения для touch-устройств */
@media (hover: none) and (pointer: coarse) {
  .search-clear-btn {
    min-width: 48px;
    min-height: 48px;
  }

  .search-result-item {
    min-height: 48px;
  }

  .quick-access-btn {
    min-height: 44px;
    padding: 8px 12px;
  }
}

/* Индикатор загрузки поиска */
.search-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  color: #666666;
  font-size: 13px;
}

.search-loading::before {
  content: '';
  width: 16px;
  height: 16px;
  border: 2px solid rgba(108, 92, 231, 0.3);
  border-top: 2px solid #6C5CE7;
  border-radius: 50%;
  animation: searchSpin 1s linear infinite;
  margin-right: 8px;
}