/* ============================================================
   top-bar.css
   Desktop: red promo banner (1240×51 inside 1440)
   Mobile: hidden
   ============================================================ */

/* ---------- Block ---------- */
.top-bar {
  padding-top: calc(20 / var(--vw-base) * 100vw);
  background-color: var(--color-bg);
}

/* Inner red strip */
.top-bar__strip {
  display: flex;
  align-items: center;
  gap: calc(105 / var(--vw-base) * 100vw);
  margin-left: var(--content-padding-x);
  margin-right: var(--content-padding-x);
  padding-top:    calc(8  / var(--vw-base) * 100vw);
  padding-bottom: calc(8  / var(--vw-base) * 100vw);
  padding-left:   calc(149 / var(--vw-base) * 100vw);
  padding-right:  calc(20 / var(--vw-base) * 100vw);
  border-radius: calc(15 / var(--vw-base) * 100vw);
  background-color: var(--color-red);
}

.top-bar__content {
  display: flex;
  align-items: center;
  gap: calc(20 / var(--vw-base) * 100vw);
}

/* "Только до 24 февраля" badge */
.top-bar__label {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: calc(7 / var(--vw-base) * 100vw) calc(15 / var(--vw-base) * 100vw);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: calc(5 / var(--vw-base) * 100vw);
  font-size:   calc(14 / var(--vw-base) * 100vw);
  font-weight: 500;
  line-height: 1.43;
  color: var(--color-white);
  white-space: nowrap;
}

.top-bar__text {
  flex: 1;
  font-size:   calc(14 / var(--vw-base) * 100vw);
  font-weight: 500;
  line-height: 1.43;
  color: var(--color-white);
  white-space: nowrap;
}

.top-bar__close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width:  calc(20 / var(--vw-base) * 100vw);
  height: calc(20 / var(--vw-base) * 100vw);
  color: var(--color-white);
  opacity: 0.7;
  transition: opacity 0.2s;
}
.top-bar__close:hover { opacity: 1; }

.top-bar__close svg {
  width:  calc(12 / var(--vw-base) * 100vw);
  height: calc(12 / var(--vw-base) * 100vw);
}

/* ---------- Hidden state (JS toggled) ---------- */
.top-bar.-hidden {
  display: none;
}

/* ---------- Mobile: hide entirely ---------- */
@media (max-width: 767px) {
  .top-bar {
    display: none;
  }
}