/* ===========================================
   styles.css — Дизайн-система в стилях Finexpert-e.ru
   =========================================== */

:root {
  /* Цветовая палитра Finexpert */
  --color-black:           #151617;
  --color-black-rgb:       21, 22, 23;
  --color-light-black:     #1E2021;
  --color-beige:           #F1EEE8;
  --color-gray:            #5F5F5F;
  --color-light-gray:      #DEDEDE;
  --color-text-light-gray: #999999;
  --color-text-dark-gray:  #686868;
  --color-soft-green:      #CACC90;
  --color-gold:            #F4EBBE;
  --color-green:           #5CB1AB;
  --color-red:             #EF2323;

  /* Переменные приложения */
  --color-bg:      #151617;
  --color-text:    #FFFFFF;
  --color-muted:   #999999;
  --color-accent:  #CACC90;
  --color-surface: #1E2021;
  --color-border:  #354251;
  --button-base-br: 20px;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  background-color: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}

/* ── Экран загрузки Notibot (Loader) ── */
.loader-screen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-bg, #151617);
  z-index: 9999;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.loader-spinner {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid rgba(202, 204, 144, 0.2);
  border-top-color: var(--color-accent, #CACC90);
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Засечные заголовки в стиле Finexpert (21Cent / Playfair Display) ── */
h1, h2, h3, .font-serif {
  font-family: 'Playfair Display', '21Cent', Georgia, serif;
  font-weight: 400;
}

h1 em, h2 em, h3 em, .font-serif em {
  font-style: italic;
  color: var(--color-gold);
}

.l-gray {
  color: var(--color-text-light-gray);
}
.l-gray strong {
  color: var(--color-text);
}

/* ── Кнопки в стиле Finexpert ── */
.btn-soft-green, .iksweb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  text-decoration: none;
  padding: 14px 28px;
  color: #151617;
  background: var(--color-soft-green);
  border-radius: var(--button-base-br);
  border: 1px solid #354251;
  transition: all 0.25s ease;
}

.btn-soft-green:hover, .iksweb:hover {
  background: var(--color-gold);
  color: #151617;
  border-color: #1E2021;
}

.btn-green {
  background: var(--color-green);
  color: #FFFFFF;
  border-radius: var(--button-base-br);
  border: 1px solid var(--color-green);
  transition: all 0.25s ease;
}

.btn-green:hover {
  background: #4da099;
}

.btn-dark {
  background: var(--color-light-black);
  color: #FFFFFF;
  border: 1px solid var(--color-gray);
  border-radius: var(--button-base-br);
  transition: all 0.25s ease;
}

.btn-dark:hover {
  background: #282a2c;
}

.safe-top    { padding-top:    env(safe-area-inset-top,    0px); }
.safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* ── Плавный параллакс-движения VEO Кадра ── */
@keyframes veoTrackingDrive {
  0%   { transform: scale(1.05) translateX(0px); }
  50%  { transform: scale(1.08) translateX(-12px); }
  100% { transform: scale(1.05) translateX(0px); }
}

.veo-drive-scene {
  animation: veoTrackingDrive 6s ease-in-out infinite;
}

/* ── Линии Скорости (Speed Blur Streak) ────── */
@keyframes speedStreaks {
  0%   { background-position-x: 0px; }
  100% { background-position-x: 800px; }
}

.speed-overlay {
  background: repeating-linear-gradient(90deg, 
    transparent 0px, transparent 60px, 
    rgba(255, 255, 255, 0.12) 60px, transparent 120px);
  animation: speedStreaks 0.6s linear infinite;
}

/* ── Легковесный и плавный 60FPS прилет камня ── */
@keyframes rockFlyLightweight {
  0% {
    transform: translate3d(-280px, -180px, 0) scale(0.3) rotate(-260deg);
    opacity: 0;
  }
  15% {
    opacity: 1;
    transform: translate3d(-180px, -110px, 0) scale(0.6) rotate(-140deg);
  }
  65% {
    opacity: 1;
    transform: translate3d(-30px, -15px, 0) scale(0.9) rotate(15deg);
  }
  76% {
    /* Момент соударения */
    opacity: 1;
    transform: translate3d(0px, 0px, 0) scale(1.0) rotate(45deg);
  }
  85% {
    /* Легкий рикошет */
    opacity: 0.85;
    transform: translate3d(30px, 20px, 0) scale(0.7) rotate(90deg);
  }
  100% {
    transform: translate3d(90px, 70px, 0) scale(0.2) rotate(220deg);
    opacity: 0;
  }
}

.rock-anim {
  will-change: transform, opacity;
  animation: rockFlyLightweight 0.5s cubic-bezier(0.16, 0.88, 0.28, 1) forwards !important;
}

/* ── Компактный и супер-легкий взрыв (уменьшен в 3 раза, чистый GPU) ── */
@keyframes miniMovieFireball {
  0% {
    transform: translate3d(-50%, -50%, 0) scale(0.2) rotate(0deg);
    opacity: 0;
  }
  18% {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) scale(1.0) rotate(25deg);
  }
  50% {
    opacity: 0.95;
    transform: translate3d(-50%, -50%, 0) scale(1.35) rotate(60deg);
  }
  80% {
    opacity: 0.6;
    transform: translate3d(-50%, -50%, 0) scale(1.45) rotate(90deg);
  }
  100% {
    transform: translate3d(-50%, -50%, 0) scale(1.5) rotate(110deg);
    opacity: 0;
  }
}

.fireball-anim {
  will-change: transform, opacity;
  animation: miniMovieFireball 0.55s ease-out forwards !important;
}

/* ── Легкая компактная ударная волна ── */
@keyframes miniShockwave {
  0% {
    transform: translate3d(-50%, -50%, 0) scale(0.2);
    opacity: 0.9;
  }
  100% {
    transform: translate3d(-50%, -50%, 0) scale(1.6);
    opacity: 0;
  }
}

.shockwave-anim {
  will-change: transform, opacity;
  animation: miniShockwave 0.45s ease-out forwards !important;
}

/* ── Компактные легкие клубы дыма ── */
@keyframes miniSmokePlume {
  0% {
    transform: translate3d(0, 0, 0) scale(0.3);
    opacity: 0;
  }
  30% {
    opacity: 0.7;
    transform: translate3d(var(--smk-x, 10px), var(--smk-y, -12px), 0) scale(1.0);
  }
  100% {
    transform: translate3d(calc(var(--smk-x, 10px) * 1.5), calc(var(--smk-y, -12px) * 1.5), 0) scale(1.4);
    opacity: 0;
  }
}

.smoke-anim {
  will-change: transform, opacity;
  animation: miniSmokePlume 0.55s ease-out forwards;
}

/* ── Легкие искры и осколки ── */
@keyframes miniPyroSparks {
  0% {
    transform: translate3d(0, 0, 0) scale(0.4);
    opacity: 1;
  }
  100% {
    transform: translate3d(var(--spark-x, 40px), var(--spark-y, -35px), 0) scale(0.8);
    opacity: 0;
  }
}

.pyro-anim {
  will-change: transform, opacity;
  animation: miniPyroSparks 0.45s ease-out forwards;
}

/* ── Легкая мгновенная вспышка ── */
@keyframes flashSceneBlast {
  0%   { opacity: 0; }
  15%  { opacity: 0.65; }
  100% { opacity: 0; }
}

.blast-flash {
  will-change: opacity;
  animation: flashSceneBlast 0.35s ease-out forwards;
}

@keyframes sparkFlashVivid {
  0%   { transform: translate3d(0,0,0) scale(0.4); opacity: 1; }
  40%  { transform: translate3d(0,0,0) scale(1.2); opacity: 0.85; }
  100% { transform: translate3d(0,0,0) scale(1.5); opacity: 0; }
}

.spark-flash {
  will-change: transform, opacity;
  animation: sparkFlashVivid 0.35s ease-out forwards;
}

/* ── Сетка трещин лобового стекла ── */
@keyframes spiderCrackAnim {
  0%   { opacity: 0; transform: scale(0.6); }
  20%  { opacity: 1; transform: scale(1); }
  80%  { opacity: 0.8; }
  100% { opacity: 0; }
}

.spider-anim {
  animation: spiderCrackAnim 0.65s ease-out forwards;
}

/* ── Легкое и плавное сотрясение ── */
@keyframes shakeCinema {
  0%, 100% { transform: translate3d(0, 0, 0); }
  15% { transform: translate3d(-8px, 6px, 0); }
  35% { transform: translate3d(8px, -6px, 0); }
  60% { transform: translate3d(-4px, 3px, 0); }
  80% { transform: translate3d(3px, -2px, 0); }
}

.shake-hard {
  will-change: transform;
  animation: shakeCinema 0.38s ease-out both;
}

/* ── РЕАЛИСТИЧНЫЙ ДИНАМИЧЕСКИЙ РАЗЛЕТ КУЗОВНЫХ ДЕТАЛЕЙ ПРИ ВЗРЫВЕ ── */
/* 1. Передний бампер / Сплиттер */
@keyframes flyOffBumperRealistic {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(0.6); opacity: 0; }
  12%  { opacity: 1; transform: translate3d(-55px, -35px, 0) rotate(-45deg) scale(1.4); }
  45%  { transform: translate3d(-190px, -15px, 0) rotate(-210deg) scale(1.15); }
  75%  { opacity: 1; transform: translate3d(-310px, 75px, 0) rotate(-400deg) scale(0.8); }
  100% { transform: translate3d(-420px, 185px, 0) rotate(-620deg) scale(0.35); opacity: 0; }
}

/* 2. Фара */
@keyframes flyOffHeadlightRealistic {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(0.6); opacity: 0; }
  12%  { opacity: 1; transform: translate3d(45px, -40px, 0) rotate(55deg) scale(1.5); }
  45%  { transform: translate3d(180px, -60px, 0) rotate(290deg) scale(1.2); }
  75%  { opacity: 1; transform: translate3d(300px, 35px, 0) rotate(560deg) scale(0.85); }
  100% { transform: translate3d(420px, 160px, 0) rotate(800deg) scale(0.4); opacity: 0; }
}

/* 3. Капот (Огромная кузовная деталь) */
@keyframes flyOffHoodRealistic {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(0.5); opacity: 0; }
  15%  { opacity: 1; transform: translate3d(20px, -90px, 0) rotate(-35deg) scale(1.6); }
  45%  { transform: translate3d(70px, -150px, 0) rotate(-110deg) scale(1.35); }
  75%  { opacity: 1; transform: translate3d(160px, -30px, 0) rotate(-240deg) scale(0.95); }
  100% { transform: translate3d(260px, 140px, 0) rotate(-380deg) scale(0.4); opacity: 0; }
}

/* 4. Лобовое стекло */
@keyframes flyOffGlassRealistic {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(0.6); opacity: 0; }
  12%  { opacity: 1; transform: translate3d(25px, -65px, 0) rotate(70deg) scale(1.55); }
  45%  { transform: translate3d(140px, -110px, 0) rotate(280deg) scale(1.2); }
  75%  { opacity: 1; transform: translate3d(260px, -20px, 0) rotate(540deg) scale(0.8); }
  100% { transform: translate3d(380px, 120px, 0) rotate(800deg) scale(0.3); opacity: 0; }
}

/* 5. Дверь */
@keyframes flyOffDoorRealistic {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(0.5); opacity: 0; }
  12%  { opacity: 1; transform: translate3d(-60px, -50px, 0) rotate(-60deg) scale(1.55); }
  45%  { transform: translate3d(-190px, -70px, 0) rotate(-220deg) scale(1.25); }
  75%  { opacity: 1; transform: translate3d(-310px, 20px, 0) rotate(-440deg) scale(0.85); }
  100% { transform: translate3d(-430px, 150px, 0) rotate(-680deg) scale(0.4); opacity: 0; }
}

/* 6. Колесо / Диск */
@keyframes flyOffWheelRealistic {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(0.6); opacity: 0; }
  12%  { opacity: 1; transform: translate3d(50px, -50px, 0) rotate(120deg) scale(1.45); }
  45%  { transform: translate3d(180px, -90px, 0) rotate(450deg) scale(1.25); }
  75%  { opacity: 1; transform: translate3d(300px, 10px, 0) rotate(820deg) scale(0.9); }
  100% { transform: translate3d(440px, 160px, 0) rotate(1200deg) scale(0.45); opacity: 0; }
}

/* 7. Боковое зеркало */
@keyframes flyOffMirrorRealistic {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(0.6); opacity: 0; }
  12%  { opacity: 1; transform: translate3d(-50px, -40px, 0) rotate(-90deg) scale(1.45); }
  45%  { transform: translate3d(-160px, -75px, 0) rotate(-280deg) scale(1.2); }
  75%  { opacity: 1; transform: translate3d(-280px, 20px, 0) rotate(-550deg) scale(0.8); }
  100% { transform: translate3d(-400px, 150px, 0) rotate(-820deg) scale(0.4); opacity: 0; }
}

/* 8. Спойлер / Крыша */
@keyframes flyOffRoofRealistic {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(0.5); opacity: 0; }
  15%  { opacity: 1; transform: translate3d(0px, -110px, 0) rotate(40deg) scale(1.6); }
  45%  { transform: translate3d(40px, -160px, 0) rotate(140deg) scale(1.3); }
  75%  { opacity: 1; transform: translate3d(110px, -50px, 0) rotate(270deg) scale(0.9); }
  100% { transform: translate3d(210px, 120px, 0) rotate(420deg) scale(0.35); opacity: 0; }
}

/* 9. Задний бампер / Диффузор */
@keyframes flyOffRearBumperRealistic {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(0.6); opacity: 0; }
  12%  { opacity: 1; transform: translate3d(60px, -35px, 0) rotate(45deg) scale(1.45); }
  45%  { transform: translate3d(190px, -10px, 0) rotate(200deg) scale(1.2); }
  75%  { opacity: 1; transform: translate3d(310px, 80px, 0) rotate(390deg) scale(0.8); }
  100% { transform: translate3d(430px, 190px, 0) rotate(600deg) scale(0.35); opacity: 0; }
}

.fly-bumper { animation: flyOffBumperRealistic 2.6s cubic-bezier(0.15, 0.85, 0.32, 1) forwards !important; }
.fly-headlight { animation: flyOffHeadlightRealistic 2.5s cubic-bezier(0.12, 0.8, 0.28, 1) forwards !important; }
.fly-hood { animation: flyOffHoodRealistic 2.8s cubic-bezier(0.12, 0.9, 0.28, 1) forwards !important; }
.fly-glass { animation: flyOffGlassRealistic 2.3s cubic-bezier(0.15, 0.84, 0.3, 1) forwards !important; }
.fly-door { animation: flyOffDoorRealistic 2.7s cubic-bezier(0.14, 0.88, 0.3, 1) forwards !important; }
.fly-wheel { animation: flyOffWheelRealistic 2.6s cubic-bezier(0.14, 0.82, 0.3, 1) forwards !important; }
.fly-mirror { animation: flyOffMirrorRealistic 2.5s cubic-bezier(0.16, 0.86, 0.32, 1) forwards !important; }
.fly-roof { animation: flyOffRoofRealistic 2.8s cubic-bezier(0.12, 0.9, 0.25, 1) forwards !important; }
.fly-rear-bumper { animation: flyOffRearBumperRealistic 2.6s cubic-bezier(0.15, 0.85, 0.32, 1) forwards !important; }

/* ── Модальная шторка (Bottom Sheet Drawer) ── */
#drawer-panel {
  max-height: 85vh;
  max-height: 85dvh;
  overscroll-behavior: contain;
}

#drawer-scroll-content {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
}

.drawer-visible {
  visibility: visible !important;
}

.drawer-visible #drawer-backdrop {
  opacity: 1 !important;
}

.drawer-visible #drawer-panel {
  transform: translateY(0) !important;
}

@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(202, 204, 144, 0.7); }
  50% { box-shadow: 0 0 0 15px rgba(202, 204, 144, 0); }
}

.btn-pulse {
  animation: ctaPulse 2.5s infinite;
}

.btn-press {
  transition: transform 0.15s ease, opacity 0.15s ease;
  cursor: pointer;
}
.btn-press:active {
  transform: scale(0.97);
  opacity: 0.9;
}

.btn-primary {
  display: block;
  width: 100%;
  padding: 16px 28px;
  background: var(--color-soft-green);
  color: #151617;
  font-size: 16px;
  font-weight: 700;
  border: 1px solid #354251;
  border-radius: var(--button-base-br);
  cursor: pointer;
  transition: all 0.25s ease;
}

.btn-primary:hover {
  background: var(--color-gold);
}

/* ── Плавное появление вопросов и экранов ── */
@keyframes fadeInSlide {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeInSlide 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ── Акцентная полоса при наведении на варианты ответов в стилях Finexpert ── */
.quiz-opt-btn {
  will-change: transform, box-shadow;
  background-color: var(--color-light-black) !important;
  border: 1px solid var(--color-border) !important;
}

.quiz-opt-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--color-soft-green);
  opacity: 0;
  transition: opacity 0.2s ease;
  border-top-left-radius: 1rem;
  border-bottom-left-radius: 1rem;
}

.quiz-opt-btn:hover {
  border-color: var(--color-soft-green) !important;
  background-color: #25282a !important;
}

.quiz-opt-btn:hover::before {
  opacity: 1;
}

/* ── Стилизация всплывающего календаря Flatpickr в стиле ФинЭксперт ── */
.flatpickr-calendar {
  background: #1A1C1D !important;
  border: 1px solid rgba(202, 204, 144, 0.4) !important;
  border-radius: 1.25rem !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.85) !important;
  font-family: inherit !important;
  overflow: hidden;
  z-index: 99999 !important;
}

@media (max-width: 480px) {
  .flatpickr-calendar {
    width: calc(100vw - 20px) !important;
    max-width: 350px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
}

.flatpickr-months {
  background: #151617 !important;
  border-bottom: 1px solid rgba(53, 66, 81, 0.8) !important;
  padding: 8px 0 !important;
}

.flatpickr-current-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
  color: #F4EBBE !important;
  font-weight: 700 !important;
}

.flatpickr-months .flatpickr-prev-month, 
.flatpickr-months .flatpickr-next-month {
  color: #CACC90 !important;
  fill: #CACC90 !important;
}

span.flatpickr-weekday {
  color: #CACC90 !important;
  font-weight: 600 !important;
  font-size: 11px !important;
}

.flatpickr-day {
  color: #E2E8F0 !important;
  border-radius: 10px !important;
  border: none !important;
  font-size: 13px !important;
}

.flatpickr-day:hover {
  background: rgba(202, 204, 144, 0.25) !important;
  color: #FFFFFF !important;
}

.flatpickr-day.today {
  border: 1px solid #CACC90 !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: #CACC90 !important;
  color: #151617 !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 12px rgba(202, 204, 144, 0.4) !important;
}

.flatpickr-time {
  background: #151617 !important;
  border-top: 1px solid rgba(53, 66, 81, 0.8) !important;
}

.flatpickr-time input,
.flatpickr-time .flatpickr-time-separator {
  color: #F4EBBE !important;
  font-weight: 700 !important;
}

.flatpickr-time .numInputWrapper span.arrowUp:after {
  border-bottom-color: #CACC90 !important;
}

.flatpickr-time .numInputWrapper span.arrowDown:after {
  border-top-color: #CACC90 !important;
}

/* ── Нижняя плавающая навигация Mini App в стиле ФинЭксперт ── */
.bottom-nav-container {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.bottom-nav-bar {
  background: rgba(39, 45, 34, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.65);
}

.nav-item {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-tap-highlight-color: transparent;
}

.nav-item.active {
  background-color: #CACC90;
  color: #151617;
}

.nav-item:not(.active):hover {
  color: #F4EBBE;
}

/* Анимация привлечения внимания к согласиям */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

.shake {
  animation: shake 0.4s ease-in-out;
}