/* ============================================================
   PRELOADER — полноэкранный при инициализации страницы
   ============================================================ */
.preloader
{
   position: fixed;
   inset: 0;
   z-index: 9999;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: var(--space-5);
   background: var(--bg-app);
   /* Начинаем невидимым, плавно появляемся через 2 сек.
      Если JS скроет нас раньше — пользователь ничего не увидит. */
   opacity: 0;
   animation: preloader-fadein 0.35s ease 1s forwards;
   transition: opacity 0.3s ease;
}

/* Первый показ в сессии — без задержки */
.preloader.preloader--instant
{
   opacity: 1;
   animation: none;
}

@keyframes preloader-fadein
{
   to { opacity: 1; }
}

/* JS добавляет этот класс когда страница загружена */
.preloader.hidden
{
   opacity: 0 !important;
   animation: none !important;
   pointer-events: none;
   transition: opacity 0.25s ease;
}

.preloader__logo
{
   display: flex;
   align-items: center;
   gap: var(--space-3);
   font-size: var(--font-size-xl);
   font-weight: 700;
   color: var(--brand-navy);
}

.preloader__logo svg
{
   width: 2.5rem;
   height: 2.5rem;
   color: var(--brand-red);
}

.preloader__logo img
{
   height: 2.5rem;
   width: auto;
}

/* Спиннер брендовый */
.preloader__spinner
{
   position: relative;
   width: 3rem;
   height: 3rem;
}

.preloader__spinner::before,
.preloader__spinner::after
{
   content: '';
   position: absolute;
   inset: 0;
   border-radius: 50%;
   border: 0.2rem solid transparent;
}

.preloader__spinner::before
{
   border-top-color: var(--brand-red);
   border-right-color: var(--brand-red);
   animation: preloader-spin 0.8s linear infinite;
}

.preloader__spinner::after
{
   border-bottom-color: var(--brand-navy);
   border-left-color: var(--brand-navy);
   animation: preloader-spin 0.8s linear infinite reverse;
   inset: 0.4rem;
}

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

.preloader__text
{
   font-size: var(--font-size-sm);
   color: var(--text-muted);
   letter-spacing: 0.05em;
}

/* ============================================================
   PAGE LOADER — оверлей при AJAX-запросах
   ============================================================ */
.page-loader
{
   position: fixed;
   inset: 0;
   z-index: 8000;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   background: rgba(244, 245, 247, 0.75);
   backdrop-filter: blur(0.125rem);
   -webkit-backdrop-filter: blur(0.125rem);
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
   transition: opacity 0.2s ease, visibility 0.2s ease;
}

.page-loader.blocking
{
   visibility: visible;
   pointer-events: all;
   opacity: 0;
}

.page-loader.visible
{
   opacity: 1;
   visibility: visible;
   pointer-events: all;
}

/* Прогресс-бар вверху страницы */
.page-loader__progress
{
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 0.1875rem;
   background: var(--border-color);
   overflow: hidden;
}

.page-loader__progress-bar
{
   height: 100%;
   background: linear-gradient(90deg, var(--brand-red), var(--brand-navy));
   width: 0%;
   transition: width 0.3s ease;
   position: relative;
}

/* Блик на прогресс-баре */
.page-loader__progress-bar::after
{
   content: '';
   position: absolute;
   top: 0;
   right: 0;
   width: 5rem;
   height: 100%;
   background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5));
   animation: progress-shine 1s ease infinite;
}

@keyframes progress-shine
{
   0%   { opacity: 0; }
   50%  { opacity: 1; }
   100% { opacity: 0; }
}

/* Карточка с индикатором */
.page-loader__card
{
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: var(--space-4);
   background: var(--bg-surface);
   border-radius: var(--border-radius-lg);
   padding: var(--space-8) var(--space-10);
   box-shadow: var(--shadow-lg);
   border: 0.0625rem solid var(--border-color);
   min-width: 14rem;
   text-align: center;
   transform: scale(0.95);
   transition: transform 0.2s ease;
}

.page-loader.visible .page-loader__card
{
   transform: scale(1);
}

.page-loader__spinner
{
   width: 2.5rem;
   height: 2.5rem;
   position: relative;
}

.page-loader__spinner::before
{
   content: '';
   position: absolute;
   inset: 0;
   border-radius: 50%;
   border: 0.2rem solid var(--border-color);
   border-top-color: var(--brand-red);
   border-right-color: var(--brand-navy);
   animation: preloader-spin 0.7s linear infinite;
}

/* Прогресс внутри карточки */
.page-loader__bar-wrap
{
   width: 100%;
   height: 0.25rem;
   background: var(--border-color);
   border-radius: 1rem;
   overflow: hidden;
}

.page-loader__bar
{
   height: 100%;
   width: 0%;
   background: linear-gradient(90deg, var(--brand-red), var(--brand-navy));
   border-radius: 1rem;
   transition: width 0.3s ease;
}

.page-loader__message
{
   font-size: var(--font-size-sm);
   color: var(--text-secondary);
}

.page-loader__percent
{
   font-size: var(--font-size-xs);
   color: var(--text-muted);
   font-variant-numeric: tabular-nums;
}

/* Тёмная тема */
[data-theme="dark"] .page-loader
{
   background: rgba(17, 24, 39, 0.78);
}