/**
 * Top notification banner — shared styles for every page that loads top-banner.js
 * (LK layout + auth pages: login, registration, restore password).
 *
 * Place: /design/css/new/top-banner.css
 * Must be loaded AFTER the page stylesheet (main.css / login.css / ...).
 *
 * --top-banner-h is 0px by default and is set to the real height by
 * top-banner.js when the banner is enabled. Nothing here has to be edited
 * to turn the banner on or off.
 */

:root {
  --top-banner-h: 0px;
}

/* ===== Banner itself ===== */
.top-mini-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--top-banner-h);
  border-bottom: 1px solid #E6EDF1;
  z-index: 1045;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
}

.top-mini-banner__link,
.top-mini-banner__block {
  width: 100%;
  height: 12px;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #0E2B44;
  font-size: 13px;
  line-height: 1;
}

.top-mini-banner__link:hover {
  background: #F3F6F8;
}

.top-mini-banner__ico,
.top-mini-banner__arrow {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}

.top-mini-banner__text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.top-mini-banner--warning { background: #FFFBF1; }
.top-mini-banner--info    { background: #EBF5FF; }
.top-mini-banner--success { background: #EFFBEF; }
.top-mini-banner--danger  { background: #FEECEC; }

@media (max-width: 575.98px) {
  .top-mini-banner__link,
  .top-mini-banner__block {
    padding: 0 16px;
  }
}

/* ===== Layout shift: auth pages (layouts.auth) =====
   The whole .wrap is pushed down instead of patching paddings on each page,
   so .stage / .card-auth keep their original values. The fixed header is
   shifted separately, because fixed elements ignore the wrapper padding.
   With --top-banner-h: 0px both rules are no-ops. */
.wrap {
  padding-top: var(--top-banner-h);
}

.wrap .auth-header {
  top: var(--top-banner-h);
}

/* Toasts are fixed and usually live outside .wrap. */
#toast-container {
  top: calc(100px + var(--top-banner-h));
}

/* ===== Layout shift: LK layout (new_lk.blade.php) =====
   Kept here so every banner-related offset lives in one file. */
.auth-header {
  top: var(--top-banner-h);
}

.sidebar {
  top: calc(90px + var(--top-banner-h)); /* header + banner */
}

.main-wrapper {
  padding-top: calc(32px + 90px + var(--top-banner-h));
}

#pagePreloader {
  padding-top: calc(32px + 90px + var(--top-banner-h)) !important;
}

@media (max-width: 575.98px) {
  .main-wrapper {
    padding-top: calc(40px + 90px + var(--top-banner-h));
  }
}

/* The LK sidebar is a full-height drawer on mobile — no banner offset there. */
@media (max-width: 991.98px) {
  .sidebar {
    top: 0;
  }
}