.mechta-promo-banner {
  position: fixed;
  left: 20px;
  bottom: 20px;
  right: auto;
  z-index: 9990;
  width: min(670px, calc(100% - 40px));
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease, visibility 1s ease;
}

.mechta-promo-banner.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mechta-promo-banner[hidden] {
  display: none !important;
}

.mechta-promo-banner__inner {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 215px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 0 30px rgba(1, 13, 67, 0.25);
  overflow: hidden;
}

.mechta-promo-banner__content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 20px 24px 20px 20px;
}

.mechta-promo-banner__title {
  margin: 0;
  max-width: 344px;
  font-family: "Sofia Sans Extra Condensed", sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 110%;
  text-transform: uppercase;
  color: #010d43;
}

.mechta-promo-banner__text {
  margin: 0;
  max-width: 325px;
  font-family: Manrope, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 140%;
  color: #010d43;
}

.mechta-promo-banner__btn {
  margin-top: auto;
}

.mechta-promo-banner__btn.btn-dark:hover {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
}

.mechta-promo-banner__btn.btn-dark.icon-btn-white-dark:hover:after {
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.00009 0C3.58176 0 0 3.58176 0 8.00009C0 12.4184 3.58176 16.0002 8.00009 16.0002C12.4184 16.0002 16.0002 12.4184 16.0002 8.00009C16.0002 3.58176 12.4184 0 8.00009 0ZM5.17159 5.67057C5.17159 5.39512 5.39488 5.17183 5.67032 5.17183H10.0285C10.4703 5.17183 10.8285 5.53001 10.8285 5.97184V10.33C10.8285 10.6055 10.6052 10.8287 10.3298 10.8287C10.0545 10.8287 9.83127 10.6057 9.83103 10.3305L9.82794 6.87951L5.8787 10.8287C5.68344 11.024 5.36685 11.024 5.17159 10.8287C4.97632 10.6335 4.97632 10.3169 5.17159 10.1216L9.12082 6.1724L5.66988 6.16931C5.39461 6.16906 5.17159 5.94584 5.17159 5.67057Z' fill='white' /%3E%3C/svg%3E");
}

.mechta-promo-banner__media {
  flex: 0 0 280px;
  width: 280px;
  max-width: 42%;
  align-self: stretch;
}

.mechta-promo-banner__image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 215px;
  object-fit: cover;
  border-radius: 0 20px 20px 0;
}

.mechta-promo-banner__close {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(1, 13, 67, 0.12);
  transition: background-color 0.2s ease;
}

.mechta-promo-banner__close svg {
  display: block;
}

.mechta-promo-banner__close svg path {
  transition: stroke 0.2s ease;
}

.mechta-promo-banner__close:hover {
  background-color: #010d43;
}

.mechta-promo-banner__close:hover svg path {
  stroke: #fff;
}

@media screen and (max-width: 991px) {
  .mechta-promo-banner__title {
    font-size: 26px;
    max-width: none;
  }

  .mechta-promo-banner__content {
    padding: 16px 18px;
    gap: 10px;
  }

  .mechta-promo-banner__media {
    flex-basis: 220px;
    width: 220px;
  }
}

@media screen and (max-width: 767px) {
  .mechta-promo-banner {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
  }

  .mechta-promo-banner__inner {
    flex-direction: column-reverse;
    min-height: 0;
  }

  .mechta-promo-banner__media {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    height: 160px;
  }

  .mechta-promo-banner__image {
    min-height: 160px;
    border-radius: 20px 20px 0 0;
  }

  .mechta-promo-banner__content {
    padding: 16px;
    gap: 10px;
  }

  .mechta-promo-banner__title {
    font-size: 22px;
  }

  .mechta-promo-banner__text {
    font-size: 13px;
    max-width: none;
  }

  .mechta-promo-banner__btn {
    width: 100%;
  }

  .mechta-promo-banner__close {
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
  }
}