/* ========================================
   PRELOADER & ANIMATIONS STYLES
   Шрифты как в site.css: Sans + Mono
   ======================================== */

:root {
  /* Фон и текст как у hero block */
  --preloader-bg: #000000;
  --preloader-fg: #ffffff;
  --preloader-muted: #727067;
  --preloader-text-size-extra: 16px;
  --preloader-font-sans: var(
    --font-sans,
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Text",
    "SF Pro Display",
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif
  );
  --preloader-font-mono: var(
    --font-mono,
    "SF Mono",
    ui-monospace,
    "Roboto Mono",
    Menlo,
    Monaco,
    Consolas,
    "Liberation Mono",
    monospace
  );
}

/* Shimmer taglines по центру, как hero intro */
.preloader-tagline-wrap {
  position: absolute;
  inset: 0;
  z-index: 100001;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: visible;
}

.preloader-tagline {
  max-width: min(90%, 42rem);
  margin: 0;
  padding: 0 1rem;
  text-align: center;
  font-family: var(--preloader-font-mono);
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  line-height: 1.45;
  letter-spacing: -0.01em;
  opacity: 0;
  background-image:
    linear-gradient(90deg, transparent calc(50% - 80px), #ffffff, transparent calc(50% + 80px)),
    linear-gradient(var(--preloader-muted), var(--preloader-muted));
  background-size: 250% 100%, auto;
  background-repeat: no-repeat, padding-box;
  background-position: 100% center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.preloader-tagline.is-animating {
  animation: preloader-tagline-cycle 0.68s ease forwards;
}

.preloader-tagline.is-static {
  opacity: 1;
  -webkit-text-fill-color: var(--preloader-muted);
  background-image: none;
}

@keyframes preloader-tagline-cycle {
  0% {
    opacity: 0;
    background-position: 100% center;
  }

  29% {
    opacity: 1;
  }

  76% {
    background-position: 0% center;
    opacity: 1;
  }

  100% {
    background-position: 0% center;
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .preloader-tagline.is-animating {
    animation: none;
  }
}

/* Legacy markup (до patch-preloader) */
.preloader-text,
.preloader-percentage {
  display: none !important;
}

.preloader,
.preloader .preloader-logo,
.preloader .preloader-text,
.preloader .preloader-percentage,
.preloader .percentage-number,
.preloader .percentage-symbol {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

/* Прелоадер — тёмный фон как hero block, белый текст */
/* Общие стили для preloader - модальный overlay */
/* Прелоадер работает как модальное окно поверх всего контента */
.preloader {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: var(--preloader-bg) !important;
    background-color: var(--preloader-bg) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: 999999 !important;
    transition: opacity 0.6s ease-out, visibility 0.6s ease-out, background 0.6s ease-out, background-color 0.6s ease-out !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Тема не меняет прелоадер — всегда тёмный фон hero */
html[data-theme="light"] .preloader,
html[data-theme="light"] body .preloader,
html[data-theme="light"] body.preloader-active .preloader,
[data-theme="light"] html .preloader,
[data-theme="light"] html body .preloader,
[data-theme="light"] html body.preloader-active .preloader,
[data-theme="light"] body .preloader,
[data-theme="light"] .preloader,
html[data-theme="light"] .preloader.fade-out,
html[data-theme="light"] .preloader:not(.fade-out),
html[data-theme="dark"] .preloader,
html[data-theme="dark"] body .preloader,
html[data-theme="dark"] body.preloader-active .preloader,
[data-theme="dark"] html .preloader,
[data-theme="dark"] html body .preloader,
[data-theme="dark"] html body.preloader-active .preloader,
[data-theme="dark"] body .preloader,
[data-theme="dark"] .preloader,
html[data-theme="dark"] .preloader.fade-out,
html[data-theme="dark"] .preloader:not(.fade-out) {
    background: var(--preloader-bg) !important;
    background-color: var(--preloader-bg) !important;
}

/* Блокировка скролла при активном прелоадере */
/* Блокируем все взаимодействия со страницей во время загрузки */
body.preloader-active {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
    touch-action: none !important;
}

/* Блокируем взаимодействие со всем контентом за прелоадером */
body.preloader-active * {
    pointer-events: none !important;
}

/* Разрешаем взаимодействие только с элементами прелоадера */
body.preloader-active .preloader,
body.preloader-active .preloader * {
    pointer-events: auto !important;
}

.preloader.fade-out {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Страница под прелоaderом не мигает: navbar и контент скрыты до body.loaded */
body.preloader-active:not(.loaded) .navbar,
body.preloader-active:not(.loaded) .page-wrapper {
    visibility: hidden;
    opacity: 0;
}

body.loaded .navbar,
body.loaded .page-wrapper {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.45s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    body.loaded .navbar,
    body.loaded .page-wrapper {
        transition: none;
    }
}

/* Логотип Young — sans сайта, semibold как заголовки */
/* Полная синхронизация с .sidebar-logo для идентичного визуального отображения */
/* Размер шрифта установлен на 20px */
/* Позиция top поднята на 12px: 80px -> 68px (8px + 4px) */
/* Увеличенная специфичность для защиты от конфликтов с другими CSS */
.preloader .preloader-logo,
body .preloader .preloader-logo,
html body .preloader .preloader-logo {
    position: absolute !important;
    top: 68px !important;
    left: 108px !important;
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    font-family: var(--preloader-font-sans) !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    color: var(--preloader-fg) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
}

[data-theme="dark"] .preloader .preloader-logo,
[data-theme="dark"] body .preloader .preloader-logo,
[data-theme="dark"] html body .preloader .preloader-logo {
    color: var(--preloader-fg) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    align-items: center !important;
    /* Уменьшаем расстояние между Trngl и текстом на 2px */
    gap: 0px !important;
    z-index: 100000 !important;
    text-decoration: none !important;
    border: none !important;
    outline: none !important;
    transform: none !important;
    text-size-adjust: 100% !important;
    -webkit-text-size-adjust: 100% !important;
    -moz-text-size-adjust: 100% !important;
}

.preloader .preloader-logo a,
body .preloader .preloader-logo a {
    color: var(--preloader-fg) !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    /* Уменьшаем расстояние между Trngl и текстом на 2px */
    gap: 0px !important;
}

[data-theme="dark"] .preloader .preloader-logo a,
[data-theme="dark"] body .preloader .preloader-logo a {
    color: var(--preloader-fg) !important;
}

/* Стили для текста внутри прелоадера логотипа - синхронизация размера */
.preloader .preloader-logo,
.preloader .preloader-logo *,
body .preloader .preloader-logo,
body .preloader .preloader-logo * {
    font-size: 20px !important;
    font-weight: 600 !important;
    font-family: var(--preloader-font-sans) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
}

/* Иконка Trngl слева от логотипа */
.preloader-logo-icon {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
    filter: brightness(0) invert(1) !important;
    transition: filter 0.3s ease !important;
}

/* Текст про сайт - внизу слева, отступ слева такой же как у логотипа */
.preloader .preloader-text,
body .preloader .preloader-text,
html body .preloader .preloader-text {
    position: absolute !important;
    bottom: 80px !important;
    top: auto !important;
    left: 108px !important;
    padding: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
    margin-left: 0 !important;
    max-width: 500px !important;
    font-family: var(--preloader-font-sans) !important;
    font-size: calc(var(--type-body-size, 1.0625rem) + var(--preloader-text-size-extra)) !important;
    font-weight: 400 !important;
    color: var(--preloader-fg) !important;
    line-height: var(--type-body-leading, 1.47) !important;
    letter-spacing: var(--type-body-tracking, -0.016em) !important;
    box-sizing: border-box !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

[data-theme="dark"] .preloader .preloader-text,
[data-theme="dark"] body .preloader .preloader-text,
[data-theme="dark"] html body .preloader .preloader-text {
    color: var(--preloader-fg) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    z-index: 100000 !important;
    box-sizing: border-box;
    word-wrap: break-word !important;
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
    -moz-hyphens: auto !important;
}

/* Процент загрузки - справа внизу, на том же уровне что и текст */
.preloader .preloader-percentage,
body .preloader .preloader-percentage,
html body .preloader .preloader-percentage {
    position: absolute !important;
    bottom: 80px !important;
    top: auto !important;
    right: 108px !important;
    font-family: var(--preloader-font-sans) !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    color: var(--preloader-fg) !important;
    line-height: 1.5 !important;
    letter-spacing: 0 !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

[data-theme="dark"] .preloader .preloader-percentage,
[data-theme="dark"] body .preloader .preloader-percentage,
[data-theme="dark"] html body .preloader .preloader-percentage {
    color: var(--preloader-fg) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    z-index: 100000 !important;
}

[data-theme="dark"] .preloader .percentage-number,
[data-theme="dark"] .preloader .percentage-symbol,
[data-theme="dark"] body .preloader .percentage-number,
[data-theme="dark"] body .preloader .percentage-symbol {
    color: var(--preloader-fg) !important;
}

/* Число и символ процента - одинаковый размер и шрифт */
/* Начальный размер цифр: 72px (48px + 24px) */
.percentage-number {
    display: inline-block;
    font-family: var(--preloader-font-sans) !important;
    font-size: 72px !important;
    font-weight: 600 !important;
    color: var(--preloader-fg) !important;
    line-height: 1 !important;
    letter-spacing: -0.02em !important;
    vertical-align: baseline !important;
}

.percentage-symbol {
    display: inline-block;
    font-family: var(--preloader-font-sans) !important;
    font-size: 72px !important;
    font-weight: 600 !important;
    color: var(--preloader-fg) !important;
    margin-left: 4px;
    line-height: 1 !important;
    vertical-align: baseline !important;
}

@keyframes logoFadeIn {
    0% {
        opacity: 1 !important;
        transform: translateY(0);
    }
    100% {
        opacity: 1 !important;
        transform: translateY(0);
    }
}

@keyframes percentageFadeIn {
    0% {
        opacity: 1 !important;
    }
    100% {
        opacity: 1 !important;
    }
}

@keyframes textFadeIn {
    0% {
        opacity: 1 !important;
        transform: translateY(0);
    }
    100% {
        opacity: 1 !important;
        transform: translateY(0);
    }
}

/* ========== DESKTOP 1441px+ ========== */
@media (min-width: 1441px) {
  body .preloader .preloader-logo,
  html body .preloader .preloader-logo {
    font-family: var(--preloader-font-sans) !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    top: 68px !important;
    left: 108px !important;
    display: flex !important;
    align-items: center !important;
    /* Уменьшаем расстояние между Trngl и текстом на 2px */
    gap: 0px !important;
  }
  
  /* Размер текста внутри логотипа для 1441px-1919px - остается 20px */
  body .preloader .preloader-logo *,
  html body .preloader .preloader-logo * {
    font-size: 20px !important;
    font-weight: 600 !important;
    font-family: var(--preloader-font-sans) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
  }
  
  .preloader-logo-icon {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
  }
  
  .preloader-logo img:not(.preloader-logo-icon) {
    display: none !important;
  }

  body .preloader .preloader-text,
  html body .preloader .preloader-text {
    bottom: 80px !important;
    top: auto !important;
    left: 108px !important;
    max-width: 400px !important;
    font-size: calc(18px + var(--preloader-text-size-extra)) !important;
  }

  body .preloader .preloader-percentage,
  html body .preloader .preloader-percentage {
    bottom: 80px !important;
    top: auto !important;
    right: 108px !important;
    font-size: 18px !important;
  }

  .percentage-number,
  .percentage-symbol {
    font-size: 72px !important;
  }

}

/* ========== DESKTOP 1920px+ (большие экраны) ========== */
@media (min-width: 1920px) {
  body .preloader .preloader-logo,
  html body .preloader .preloader-logo {
    font-family: var(--preloader-font-sans) !important;
    font-size: 28px !important;
    font-weight: 600 !important;
    top: 68px !important;
    left: 108px !important;
    display: flex !important;
    align-items: center !important;
    /* Уменьшаем расстояние между Trngl и текстом на 2px */
    gap: 0px !important;
  }
  
  /* Увеличение размера текста внутри логотипа на больших экранах */
  body .preloader .preloader-logo *,
  html body .preloader .preloader-logo * {
    font-size: 28px !important;
    font-weight: 600 !important;
    font-family: var(--preloader-font-sans) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
  }
  
  .preloader-logo-icon {
    display: block !important;
    width: 28px !important;
    height: 28px !important;
    flex-shrink: 0 !important;
  }
  
  .preloader-logo img:not(.preloader-logo-icon) {
    display: none !important;
  }

  body .preloader .preloader-text,
  html body .preloader .preloader-text {
    bottom: 80px !important;
    top: auto !important;
    left: 108px !important;
    max-width: 400px !important;
    font-size: calc(18px + var(--preloader-text-size-extra)) !important;
  }

  body .preloader .preloader-percentage,
  html body .preloader .preloader-percentage {
    bottom: 80px !important;
    top: auto !important;
    right: 108px !important;
    font-size: 18px !important;
  }

  .percentage-number,
  .percentage-symbol {
    font-size: 72px !important;
  }
}

/* ========== DESKTOP 2560px+ (очень большие экраны) ========== */
@media (min-width: 2560px) {
  body .preloader .preloader-logo,
  html body .preloader .preloader-logo {
    font-family: var(--preloader-font-sans) !important;
    font-size: 28px !important;
    font-weight: 600 !important;
    top: 68px !important;
    left: 108px !important;
    display: flex !important;
    align-items: center !important;
    /* Уменьшаем расстояние между Trngl и текстом на 2px */
    gap: 0px !important;
  }
  
  /* Увеличение размера текста внутри логотипа на очень больших экранах */
  body .preloader .preloader-logo *,
  html body .preloader .preloader-logo * {
    font-size: 28px !important;
    font-weight: 600 !important;
    font-family: var(--preloader-font-sans) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
  }
  
  .preloader-logo-icon {
    display: block !important;
    width: 28px !important;
    height: 28px !important;
    flex-shrink: 0 !important;
  }
  
  .preloader-logo img:not(.preloader-logo-icon) {
    display: none !important;
  }

  body .preloader .preloader-text,
  html body .preloader .preloader-text {
    bottom: 80px !important;
    top: auto !important;
    left: 108px !important;
    max-width: 400px !important;
    font-size: calc(18px + var(--preloader-text-size-extra)) !important;
  }

  body .preloader .preloader-percentage,
  html body .preloader .preloader-percentage {
    bottom: 80px !important;
    top: auto !important;
    right: 108px !important;
    font-size: 18px !important;
  }

  .percentage-number,
  .percentage-symbol {
    font-size: 72px !important;
  }
}

/* ========== DESKTOP 1024-1440px ========== */
@media (min-width: 1024px) and (max-width: 1440px) {
  body .preloader .preloader-logo,
  html body .preloader .preloader-logo {
    font-family: var(--preloader-font-sans) !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    top: 68px !important;
    left: 108px !important;
    display: flex !important;
    align-items: center !important;
    /* Уменьшаем расстояние между Trngl и текстом на 2px */
    gap: 0px !important;
  }
  
  .preloader-logo-icon {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
  }
  
  .preloader-logo img:not(.preloader-logo-icon) {
    display: none !important;
  }

  body .preloader .preloader-text,
  html body .preloader .preloader-text {
    bottom: 80px !important;
    top: auto !important;
    left: 108px !important;
    max-width: 350px !important;
    font-size: calc(18px + var(--preloader-text-size-extra)) !important;
  }

  body .preloader .preloader-percentage,
  html body .preloader .preloader-percentage {
    bottom: 80px !important;
    top: auto !important;
    right: 108px !important;
    font-size: 18px !important;
  }

  .percentage-number,
  .percentage-symbol {
    font-size: 72px !important;
  }

}

/* ========== TABLET 768-799px (iPad начало) ========== */
/* Синхронизация с iPad стилем: padding-left 20px, margin-left 0, padding-left 0 = 20px */
/* Позиция top поднята на 12px: 32px -> 20px */
@media (min-width: 768px) and (max-width: 799px) {
  body .preloader .preloader-logo,
  html body .preloader .preloader-logo {
    font-family: var(--preloader-font-sans) !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    top: 20px !important;
    left: 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 0px !important;
  }
  
  .preloader-logo-icon {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
  }
  
  .preloader-logo img:not(.preloader-logo-icon) {
    display: none !important;
  }

  body .preloader .preloader-text,
  html body .preloader .preloader-text {
    bottom: 40px !important;
    top: auto !important;
    left: 20px !important;
    max-width: calc(100% - 180px) !important;
    font-size: calc(16px + var(--preloader-text-size-extra)) !important;
    padding-right: 12px !important;
  }

  body .preloader .preloader-percentage,
  html body .preloader .preloader-percentage {
    bottom: 40px !important;
    top: auto !important;
    right: 20px !important;
    font-size: 16px !important;
    min-width: 80px !important;
    text-align: right !important;
  }

  .percentage-number,
  .percentage-symbol {
    font-size: 52px !important;
  }
}

/* ========== TABLET 800-1023px ========== */
/* Позиция top поднята на 12px: 32px -> 20px */
@media (min-width: 800px) and (max-width: 1023px) {
  body .preloader .preloader-logo,
  html body .preloader .preloader-logo {
    font-family: var(--preloader-font-sans) !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    top: 20px !important;
    left: 32px !important;
    display: flex !important;
    align-items: center !important;
    gap: 0px !important;
  }
  
  .preloader-logo-icon {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
  }
  
  .preloader-logo img:not(.preloader-logo-icon) {
    display: none !important;
  }

  body .preloader .preloader-text,
  html body .preloader .preloader-text {
    bottom: 40px !important;
    top: auto !important;
    left: 32px !important;
    max-width: calc(100% - 200px) !important;
    font-size: calc(16px + var(--preloader-text-size-extra)) !important;
    padding-right: 12px !important;
  }

  body .preloader .preloader-percentage,
  html body .preloader .preloader-percentage {
    bottom: 40px !important;
    top: auto !important;
    right: 32px !important;
    font-size: 16px !important;
    min-width: 90px !important;
    text-align: right !important;
  }

  .percentage-number,
  .percentage-symbol {
    font-size: 56px !important;
  }

}

/* ========== MOBILE Large 550-599px ========== */
/* Позиция top поднята на 12px: 24px -> 12px */
@media (min-width: 550px) and (max-width: 599px) {
  body .preloader .preloader-logo,
  html body .preloader .preloader-logo {
    font-family: var(--preloader-font-sans) !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    top: 12px !important;
    left: 24px !important;
    display: flex !important;
    align-items: center !important;
    gap: 0px !important;
  }
  
  .preloader-logo-icon {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
  }
  
  .preloader-logo img:not(.preloader-logo-icon) {
    display: none !important;
  }

  body .preloader .preloader-text,
  html body .preloader .preloader-text {
    bottom: 32px !important;
    top: auto !important;
    left: 24px !important;
    max-width: calc(100% - 150px) !important;
    font-size: calc(14px + var(--preloader-text-size-extra)) !important;
    padding-right: 8px !important;
  }

  body .preloader .preloader-percentage,
  html body .preloader .preloader-percentage {
    bottom: 32px !important;
    top: auto !important;
    right: 24px !important;
    font-size: 14px !important;
    min-width: 75px !important;
    text-align: right !important;
  }

  .percentage-number,
  .percentage-symbol {
    font-size: 44px !important;
  }

}

/* ========== TABLET 600-799px ========== */
/* Позиция top поднята на 12px: 28px -> 16px */
@media (min-width: 600px) and (max-width: 799px) {
  body .preloader .preloader-logo,
  html body .preloader .preloader-logo {
    font-family: var(--preloader-font-sans) !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    top: 16px !important;
    left: 28px !important;
    display: flex !important;
    align-items: center !important;
    gap: 0px !important;
  }
  
  .preloader-logo-icon {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
  }
  
  .preloader-logo img:not(.preloader-logo-icon) {
    display: none !important;
  }

  body .preloader .preloader-text,
  html body .preloader .preloader-text {
    bottom: 36px !important;
    top: auto !important;
    left: 28px !important;
    max-width: calc(100% - 180px) !important;
    font-size: calc(16px + var(--preloader-text-size-extra)) !important;
    padding-right: 12px !important;
  }

  body .preloader .preloader-percentage,
  html body .preloader .preloader-percentage {
    bottom: 36px !important;
    top: auto !important;
    right: 28px !important;
    font-size: 16px !important;
    min-width: 85px !important;
    text-align: right !important;
  }

  .percentage-number,
  .percentage-symbol {
    font-size: 52px !important;
  }

  /* Main Layout */

}

/* ========== MOBILE 420-549px ========== */
/* Позиция top поднята на 12px: 20px -> 8px */
@media (min-width: 420px) and (max-width: 549px) {
  body .preloader .preloader-logo,
  html body .preloader .preloader-logo {
    font-family: var(--preloader-font-sans) !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    top: 8px !important;
    left: 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 0px !important;
  }
  
  .preloader-logo-icon {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
  }
  
  .preloader-logo img:not(.preloader-logo-icon) {
    display: none !important;
  }

  body .preloader .preloader-text,
  html body .preloader .preloader-text {
    bottom: 28px !important;
    top: auto !important;
    left: 20px !important;
    max-width: calc(100% - 130px) !important;
    font-size: calc(14px + var(--preloader-text-size-extra)) !important;
    padding-right: 8px !important;
  }

  body .preloader .preloader-percentage,
  html body .preloader .preloader-percentage {
    bottom: 28px !important;
    top: auto !important;
    right: 20px !important;
    font-size: 14px !important;
    min-width: 70px !important;
    text-align: right !important;
  }

  .percentage-number,
  .percentage-symbol {
    font-size: 40px !important;
  }

  /* Main Layout */

}

/* ========== MOBILE 320-419px ========== */
@media (min-width: 320px) and (max-width: 419px) {
  body .preloader .preloader-logo,
  html body .preloader .preloader-logo {
    font-family: var(--preloader-font-sans) !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    top: 4px !important;
    left: 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 0px !important;
  }
  
  .preloader-logo-icon {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
  }
  
  .preloader-logo img:not(.preloader-logo-icon) {
    display: none !important;
  }

  body .preloader .preloader-text,
  html body .preloader .preloader-text {
    bottom: 56px !important;
    top: auto !important;
    left: 16px !important;
    max-width: calc(100% - 32px) !important;
    font-size: calc(13px + var(--preloader-text-size-extra)) !important;
    padding-right: 0 !important;
  }

  body .preloader .preloader-percentage,
  html body .preloader .preloader-percentage {
    bottom: 24px !important;
    top: auto !important;
    right: 16px !important;
    left: 16px !important;
    font-size: 13px !important;
    min-width: auto !important;
    text-align: left !important;
  }

  .percentage-number,
  .percentage-symbol {
    font-size: 36px !important;
  }

  /* Main Layout */

}