/* Viss Logiem — базовые стили и hover-состояния из дизайн-прототипа.
   Вся остальная вёрстка — inline, 1:1 из дизайна. */

html { scroll-behavior: smooth; }
body { margin: 0; background: #ffffff; color: #10224e; font-family: Outfit, sans-serif; text-wrap: pretty; }
a { color: #1d3e8c; }
a:hover { color: #16316f; }
::selection { background: #cfe8f7; }
:focus-visible { outline: 2px solid #38a8d8; outline-offset: 2px; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes marquee { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  [data-vl-marquee] { animation: none !important; }
}

/* Шапка: брейкпоинт мобильного меню 900px (из дизайна) */
@media (max-width: 900px) {
  .vl-desknav { display: none !important; }
  .vl-burger { display: inline-flex !important; }
  .vl-call [data-vl-call-label] { display: none; }
}
@media (min-width: 901px) {
  .vl-mobilemenu { display: none !important; }
}

/* Мобильное меню: схлопнутое состояние без полоски первой строки
   (открытое display:flex задан inline, как в дизайне) */
.vl-mobilemenu[hidden] { display: none !important; padding: 0 !important; visibility: hidden; }

/* Skip-link */
.vl-skip:focus { left: 10px !important; }

/* Hover-состояния (в прототипе — style-hover атрибуты) */
.vl-nav:hover { background: #f0f5fb; color: #10224e !important; }
.vl-call:hover { background: #16316f !important; transform: translateY(-1px); }
.vl-call:active { transform: scale(0.98); }
.vl-burger:hover { border-color: #38a8d8 !important; }
.vl-fphone:hover { color: #7fb8e8 !important; }
.vl-flink:hover { color: #ffffff !important; }

.vl-btn-primary:hover { background: #16316f !important; transform: translateY(-2px); }
.vl-btn-primary:active { transform: scale(0.98); }
.vl-btn-outline:hover { border-color: #38a8d8 !important; color: #1d3e8c !important; transform: translateY(-2px); }
.vl-btn-outline:active { transform: scale(0.98); }
.vl-btn-white:hover { background: #e7f4fc !important; transform: translateY(-2px); }
.vl-btn-white:active { transform: scale(0.98); }
.vl-btn-ghost:hover { border-color: #38a8d8 !important; transform: translateY(-2px); }
.vl-btn-ghost:active { transform: scale(0.98); }

.vl-card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -20px rgba(16,34,78,0.25); }
.vl-listlink:hover { color: #1d3e8c !important; }
.vl-chip:hover { border-color: #38a8d8 !important; color: #1d3e8c !important; }

/* Форма связи (служебное добавление в типографике дизайна) */
.vl-input {
  width: 100%; box-sizing: border-box; font-family: Outfit, sans-serif; font-size: 15.5px;
  color: #10224e; background: #ffffff; border: 1px solid #dfe6f0; border-radius: 14px;
  padding: 13px 16px; transition: border-color 0.2s;
}
.vl-input:focus { border-color: #38a8d8; outline: none; }
.vl-input::placeholder { color: #8fa0c6; }
textarea.vl-input { resize: vertical; min-height: 110px; }
.vl-form-msg-ok { color: #1d3e8c; font-size: 15px; margin-top: 14px; }
.vl-form-msg-err { color: #c0392b; font-size: 15px; margin-top: 14px; }

/* Квиз */
.vl-quiz-option { display: flex; align-items: center; gap: 10px; border: 1px solid #dfe6f0; border-radius: 14px; padding: 13px 16px; cursor: pointer; font-size: 15.5px; color: #10224e; transition: border-color 0.2s, background 0.2s; }
.vl-quiz-option:hover { border-color: #38a8d8; }
.vl-quiz-option.selected { border-color: #1d3e8c; background: #eaf3fb; }
.vl-quiz-progress { height: 4px; background: #edf1f7; border-radius: 999px; overflow: hidden; }
.vl-quiz-progress > span { display: block; height: 100%; background: #38a8d8; transition: width 0.3s; }
.js .vl-quiz-step { display: none; }
.js .vl-quiz-step.active { display: block; }

/* Cookie-баннер (в цветах дизайна) */
.vl-cookie {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90;
  max-width: 520px; margin: 0 auto; background: #ffffff; border: 1px solid #e7edf5;
  border-radius: 18px; padding: 18px 20px; box-shadow: 0 18px 44px -18px rgba(16,34,78,0.35);
  font-family: Outfit, sans-serif;
}
.vl-cookie p { margin: 0; font-size: 14px; line-height: 1.6; color: #43506b; }
.vl-cookie .vl-cookie-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; align-items: center; }
.vl-cookie button { font-family: Outfit, sans-serif; font-weight: 600; font-size: 14px; padding: 10px 20px; border-radius: 999px; cursor: pointer; }
.vl-cookie .vl-cookie-accept { background: #1d3e8c; color: #ffffff; border: none; }
.vl-cookie .vl-cookie-accept:hover { background: #16316f; }
.vl-cookie .vl-cookie-decline { background: #ffffff; color: #43506b; border: 1px solid #dfe6f0; }
.vl-cookie .vl-cookie-decline:hover { border-color: #38a8d8; color: #1d3e8c; }
.vl-cookie a { font-size: 13.5px; color: #6b7894; }

/* Лайтбокс галереи */
.vl-lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(16,34,78,0.92); display: none; align-items: center; justify-content: center; padding: 24px; }
.vl-lightbox.open { display: flex; }
.vl-lightbox img { max-width: 100%; max-height: 86vh; border-radius: 12px; box-shadow: 0 24px 60px -24px rgba(0,0,0,0.6); }
.vl-lightbox figcaption { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; color: #b9c6e4; font-family: Outfit, sans-serif; font-size: 14.5px; }
.vl-lightbox button { position: absolute; background: rgba(255,255,255,0.12); color: #ffffff; border: none; border-radius: 999px; width: 46px; height: 46px; font-size: 22px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.vl-lightbox button:hover { background: rgba(255,255,255,0.25); }
.vl-lightbox .vl-lb-close { top: 18px; right: 18px; }
.vl-lightbox .vl-lb-prev { left: 14px; top: 50%; transform: translateY(-50%); }
.vl-lightbox .vl-lb-next { right: 14px; top: 50%; transform: translateY(-50%); }

/* Галерея-сетка */
.vl-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; margin-top: 36px; }
.vl-gallery-grid a { display: block; border-radius: 26px; overflow: hidden; border: 1px solid #e7edf5; background: #ffffff; transition: transform 0.3s, box-shadow 0.3s; }
.vl-gallery-grid a:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -20px rgba(16,34,78,0.25); }
.vl-gallery-grid img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.vl-gallery-grid figcaption { padding: 14px 18px 16px; font-family: Outfit, sans-serif; font-size: 14.5px; color: #43506b; }

/* Отзывы */
.vl-reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; margin-top: 36px; }
.vl-review-card { background: #ffffff; border: 1px solid #e7edf5; border-radius: 26px; padding: 26px 28px; }
.vl-review-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.vl-review-avatar-fallback { width: 48px; height: 48px; border-radius: 50%; background: #eaf3fb; color: #1d3e8c; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 19px; font-family: Outfit, sans-serif; }
.vl-stars { color: #38a8d8; letter-spacing: 2px; font-size: 15px; }

/* FAQ: аккордеон на details, вид — карточки дизайна */
.vl-faq details { background: #ffffff; border: 1px solid #e7edf5; border-radius: 18px; padding: 0; margin-top: 12px; }
.vl-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 18px 22px; font-weight: 600; font-size: 16.5px; color: #10224e; font-family: Outfit, sans-serif; }
.vl-faq summary::-webkit-details-marker { display: none; }
.vl-faq summary::after { content: '+'; color: #2e93c4; font-size: 22px; font-weight: 500; line-height: 1; transition: transform 0.2s; }
.vl-faq details[open] summary::after { content: '−'; }
.vl-faq .vl-faq-a { padding: 0 22px 18px; font-size: 15.5px; line-height: 1.7; color: #43506b; }

/* Inline-редактирование (только при админ-сессии) */
[data-edit] { outline: 1px dashed transparent; transition: outline-color 0.15s, background 0.15s; }
.vl-editing [data-edit] { outline-color: #d9a13b; background: rgba(217,161,59,0.08); cursor: pointer; }
.vl-editing [data-imgslot] { outline: 2px dashed #38a8d8 !important; outline-offset: -2px; cursor: pointer; }
.vl-edit-fab { position: fixed; right: 18px; bottom: 18px; z-index: 95; width: 54px; height: 54px; border-radius: 50%; background: #1d3e8c; color: #fff; border: none; font-size: 22px; cursor: pointer; box-shadow: 0 12px 32px -12px rgba(16,34,78,0.5); }
.vl-edit-fab.on { background: #d9a13b; }
.vl-edit-pop { position: fixed; z-index: 96; background: #fff; border: 1px solid #dfe6f0; border-radius: 14px; box-shadow: 0 18px 44px -18px rgba(16,34,78,0.35); padding: 16px; width: min(480px, calc(100vw - 32px)); font-family: Outfit, sans-serif; }
.vl-edit-pop label { display: block; font-size: 12px; font-weight: 600; color: #6b7894; margin: 10px 0 4px; text-transform: uppercase; letter-spacing: 0.06em; }
.vl-edit-pop textarea, .vl-edit-pop input[type="text"] { width: 100%; box-sizing: border-box; border: 1px solid #dfe6f0; border-radius: 10px; padding: 8px 10px; font-family: inherit; font-size: 14px; min-height: 38px; }
.vl-edit-pop .vl-edit-actions { display: flex; gap: 8px; margin-top: 12px; justify-content: flex-end; }
.vl-edit-pop button { border-radius: 999px; padding: 8px 18px; font-weight: 600; font-size: 14px; cursor: pointer; border: 1px solid #dfe6f0; background: #fff; color: #43506b; }
.vl-edit-pop button.primary { background: #1d3e8c; border-color: #1d3e8c; color: #fff; }