/* ===== Header ===== */
.uc-header {
  background-color: rgba(250, 250, 250, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  transition: background-color 0.3s ease, color 0.3s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.dark-theme .uc-header {
  background-color: rgba(15, 15, 15, 0.6);
}

/* ===== Тогл переключения темы ===== */
.toggle {
  width: 50px;
  height: 28px;
  background: rgba(233, 233, 233, 1);
  border-radius: 999px;
  position: relative;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.dark-theme .toggle {
  background: rgba(57, 56, 61, 1);
}

.toggle::before {
  content: '☀️';
  position: absolute;
  left: 4px;
  top: 4px;
  width: 20px;
  height: 20px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  font-size: 12px;
  line-height: 20px;        /* Совпадает с высотой, чтобы выровнять по вертикали */
  text-align: center;       /* Центрирует по горизонтали */
  transition: transform 0.3s ease, content 0.3s ease;
}

/* Когда включена dark-theme — ползунок вправо, и иконка меняется */
.dark-theme .toggle::before {
  transform: translateX(22px);
  background: rgba(0, 0, 0, 0.6);
  content: '🌙';
}

/* Dark theme styles */
.dark-theme .theme-toggle {
  background-color: #fafafa;
}

.dark-theme .theme-toggle::before {
  transform: translateX(28px);
  background-color: #0f0f0f;
}

.dark-theme .theme-toggle::after {
  content: '🌙';
}

.langToggle {
  cursor: pointer;
  display: inline-block;
  user-select: none;
  font-family: 'FuturaPT', Arial, sans-serif;
  font-size: 20px; !important 
  line-height: 1.5;
  font-weight: 500; /* Medium */
  color: #232323;
  transition: color 0.3s ease;
}

.langToggle:hover {
    color: #999999;
}

.dark-theme .langToggle {
  color: #f5f5f5;
}

.dark-theme .langToggle:hover {
  color: #999999;
}


/* ===== Текстовые блоки и hover ===== */
.textcolor,
.header-contact,
.card-description {
  color: rgba(15, 15, 15, 0.6);
  transition: color 0.3s ease;
}

/* ===== Основной фон ===== */
.uc-page-bg,
.page-bg-problem
.card-bg-secondary {
  transition: background-color 0.3s ease;
}
.uc-page-bg {
  background-color: #fff;
}
.dark-theme .uc-page-bg {
  background-color: #0f0f0f;
}

.card-bg-secondary {
  background-color: #f5f5f5;
}

.dark-theme .card-bg-secondary {
  background-color: #232323;
}

.page-bg-problem {
  background-color: #FF490C;
}
.dark-theme .page-bg-problem {
  background-color: #E45728;
}

/* ===== Карточки ===== */
.Card-bg {
  border-radius: 24px;
  background-color: #f5f5f5;
  border: 1px solid #ebebeb;
  border-radius: 10px;
  box-shadow: 18px -20px 20px -20px rgba(0, 0, 0, 0.06); /* Тень */
}
.dark-theme .Card-bg {
  background-color: #232323;
  border: 1px solid #232323;
  box-shadow: none;
}
.card-description {
  color: #999999;
}
.dark-theme .card-description {
   color: #999999;
}

.avatar-block-bg {
  border-radius: 999px;
  background-color: #9CC3D5;
  transition: background-color 0.3s ease;
}
.dark-theme .avatar-block-bg{
  background-color: #9CC3D5;
}

/* ===== Кнопки ===== */
.card-button {
  display: inline-block;
  padding: 7px 24px 9px 24px;
  border-radius: 12px;
  background-color: #27272A;
  color: #fafafa;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.card-button:hover {
  background-color: #000;
}
.card-button:active {
  background-color: #fafafa;
  color: #27272A;
}
.dark-theme .card-button {
  background-color: #F4F4F5;
  color: #0f0f0f;
}
.dark-theme .card-button:hover {
  background-color: #CCC;
}
.dark-theme .card-button:active {
  background-color: #000;
  color: #fafafa;
}

/* ===== Заголовки и текст ===== */
.title-color {
  color: #FF490C;
  transition: color 0.3s ease;
}
.title-color-mighty {
  color: #FFFFFF;
  background-color: #4C75E6;
  transition: color 0.3s ease;
}
.dark-theme .title-color {
  color: #E45728;
}
.textcolor {
  color: #232323;
}
.dark-theme .textcolor {
  color: #f5f5f5;
}
.textcolor-problem {
  color: #f5f5f5;
}
.dark-theme .textcolor-problem {
  color: #232323;
}
.textcolor-button {
  color: #f5f5f5;
}
.dark-theme .textcolor-button {
  color: #232323;
}
.Link {
  color: #4C75E6;
}

/* ===== Divider ===== */
.divider {
  background-color: rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease;
}
.dark-theme .divider {
  background-color: rgba(255, 255, 255, 0.1);
}

/* ===== Адаптивность блоков ===== */
.Block-mobile-wrapper { display: none; }
.Block-desktop-wrapper { display: block; }

/* ===== Изображения: светлая/тёмная тема ===== */
.image-light,
.fighter-light,
.icon-lock-light,
.img-firefighter-light,
.logo-mightycall-light {
  display: block;
  transition: background-color 0.3s ease;
}

.image-dark,
.fighter-dark,
.icon-lock-dark,
.img-firefighter-dark,
.logo-mightycall-dark {
  display: none;
  transition: background-color 0.3s ease;
}

.dark-theme .image-light,
.dark-theme .fighter-light,
.dark-theme .icon-lock-light,
.dark-theme .img-firefighter-light,
.dark-theme .logo-mightycall-light {
  transition: background-color 0.3s ease;
  display: none;
}

.dark-theme .image-dark,
.dark-theme .fighter-dark,
.dark-theme .icon-lock-dark,
.dark-theme .img-firefighter-dark,
.dark-theme .logo-mightycall-dark {
  transition: background-color 0.3s ease;
  display: block;
}

/* ===== Спец-блоки ===== */
.block_image {
  width: 50%;
  max-width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width: 1365px) {
  .pole, .car, .fighter-light, .fighter-dark, .build { display: nonу !important;}
}

@media (max-width: 1199px) {
  /* По умолчанию: показываем светлые изображения, скрываем тёмные */
  .image-light,
  .fighter-light,
  .icon-lock-light,
  .img-firefighter-light,
  .logo-mightycall-light {
    display: block !important;
  }

  .image-dark,
  .fighter-dark,
  .icon-lock-dark,
  .img-firefighter-dark,
  .logo-mightycall-dark {
    display: none !important;
  }

  /* Если включена тёмная тема */
  html.dark-theme .image-light,
  html.dark-theme .fighter-light,
  html.dark-theme .icon-lock-light,
  html.dark-theme .img-firefighter-light,
  html.dark-theme .logo-mightycall-light {
    display: none !important;
  }

  html.dark-theme .image-dark,
  html.dark-theme .fighter-dark,
  html.dark-theme .icon-lock-dark,
  html.dark-theme .img-firefighter-dark,
  html.dark-theme .logo-mightycall-dark {
    display: block !important;
  }
}


@media (max-width: 639px) {
  .Block-mobile-wrapper { display: block !important; }
  .Block-desktop-wrapper { display: none !important; }
}

@media (min-width: 640px) {
  .Block-mobile-wrapper { display: none !important; }
  .Block-desktop-wrapper { display: block !important; }
}

@media (max-width: 479px) {
  .right-block { display: none !important; }
}