/* custom-widget 1.7.7 */
.mirror-spring-banner,
.mirror-spring-banner * {
  box-sizing: border-box;
}

.mirror-spring-banner {
  --msb-bg: #fff0df;
  --msb-green: #2f9f91;
  --msb-green-hover: #248b80;
  --msb-dark: #2b2b2b;
  --msb-title-color: #fff8e8;
  --msb-highlight: #2db39e;
  --msb-box-height: clamp(320px, 30vw, 590px);
  --msb-ref-height: 590;
  --msb-scale: 1;
  --msb-fs-title-max: 92px;
  --msb-fs-text-max: 32px;
  --msb-fs-button-max: 30px;
  --msb-fs-button-icon-max: 52px;
  --msb-btn-min-h-max: 92px;
  --msb-btn-min-w-max: 220px;
  --msb-btn-pad-y-max: 17px;
  --msb-btn-pad-x-max: 35px;
  --msb-btn-border-max: 9px;
  --msb-side-img-width: 300px;
  --msb-side-img-max-height: 220px;
  --msb-side-img-zoom: 1;
  width: 100%;
  padding: 10px;
  direction: rtl;
  font-family: inherit;
}

.mirror-spring-banner__box {
  position: relative;
  direction: ltr;
  width: 100%;
  height: var(--msb-box-height, clamp(320px, 30vw, 590px));
  min-height: var(--msb-box-height, clamp(320px, 30vw, 590px));
  display: grid;
  grid-template-columns: 52.5% 47.5%;
  align-items: stretch;
  overflow: hidden;
  border-radius: 18px;
  container-type: size;
  container-name: msb-card;
  background:
    radial-gradient(circle at 85% 12%, rgba(255, 255, 255, 0.58), transparent 28%),
    repeating-radial-gradient(
      ellipse at 83% 16%,
      rgba(255, 255, 255, 0.24) 0,
      rgba(255, 255, 255, 0.24) 2px,
      transparent 3px,
      transparent 18px
    ),
    linear-gradient(90deg, var(--msb-bg) 0%, #fff3e6 48%, var(--msb-bg) 100%);
}

.mirror-spring-banner[dir="ltr"] {
  direction: ltr;
}

.mirror-spring-banner[dir="ltr"] .mirror-spring-banner__content {
  text-align: left;
}

.mirror-spring-banner__slider-wrap {
  grid-column: 1;
  position: relative;
  align-self: center;
  width: 100%;
  height: 88%;
  max-height: 100%;
  margin: 6% 0 6% 5.8%;
  z-index: 3;
  overflow: visible;
}

.mirror-spring-banner__slider {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: max(10px, calc(18px * var(--msb-scale, 1)));
  background: #ddd;
}

.mirror-spring-banner__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

.mirror-spring-banner__slide.is-active {
  opacity: 1;
  visibility: visible;
}

.mirror-spring-banner__slide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.mirror-spring-banner__content {
  grid-column: 2;
  position: relative;
  direction: rtl;
  height: 100%;
  min-height: 0;
  padding: clamp(10px, calc(40px * var(--msb-scale, 1)), 40px)
    clamp(10px, calc(48px * var(--msb-scale, 1)), 48px)
    clamp(8px, calc(32px * var(--msb-scale, 1)), 32px)
    clamp(8px, calc(28px * var(--msb-scale, 1)), 28px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(10px, calc(18px * var(--msb-scale, 1)), 18px);
  text-align: right;
  z-index: 2;
  overflow: hidden;
  container-type: size;
  container-name: msb-content;
}

.mirror-spring-banner__side-image {
  width: min(100%, var(--msb-side-img-width, 300px));
  max-width: 100%;
  max-height: min(var(--msb-side-img-max-height, 220px), 62cqh);
  margin-inline: auto;
  flex: 0 1 auto;
  min-height: 0;
  align-self: center;
  overflow: visible;
  line-height: 0;
}

.mirror-spring-banner__leaf {
  display: block;
  width: min(100%, var(--msb-side-img-width, 300px));
  max-width: 100%;
  height: auto;
  max-height: min(var(--msb-side-img-max-height, 220px), 62cqh);
  margin-inline: auto;
  object-fit: contain;
  object-position: center top;
  transform: scale(var(--msb-side-img-zoom, 1));
  transform-origin: center top;
  pointer-events: none;
}

.mirror-spring-banner__copy {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  text-align: right;
  flex: 1 1 auto;
  min-height: 0;
}

.mirror-spring-banner[dir="ltr"] .mirror-spring-banner__copy {
  text-align: left;
}

.mirror-spring-banner__title {
  margin: 0;
  color: var(--msb-title-color);
  font-size: clamp(
    16px,
    calc(var(--msb-fs-title-max, 92px) * var(--msb-scale, 1)),
    var(--msb-fs-title-max, 92px)
  );
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: clamp(-0.5px, calc(-2px * var(--msb-scale, 1)), -2px);
  text-shadow:
    0 calc(5px * var(--msb-scale, 1)) 0 rgba(0, 82, 44, 0.52),
    0 calc(10px * var(--msb-scale, 1)) calc(18px * var(--msb-scale, 1)) rgba(0, 0, 0, 0.26);
  white-space: pre-line;
}

.mirror-spring-banner__text {
  margin: clamp(6px, calc(42px * var(--msb-scale, 1)), 42px) 0 0;
  color: var(--msb-dark);
  font-size: clamp(
    12px,
    calc(var(--msb-fs-text-max, 32px) * var(--msb-scale, 1)),
    var(--msb-fs-text-max, 32px)
  );
  line-height: 1.45;
  font-weight: 400;
  white-space: pre-line;
}

.mirror-spring-banner__text span {
  color: var(--msb-highlight);
  font-weight: 700;
}

.mirror-spring-banner__button {
  position: absolute;
  top: 50%;
  right: 0;
  left: auto;
  transform: translate(50%, -50%);
  z-index: 10;
  min-width: clamp(
    96px,
    calc(var(--msb-btn-min-w-max, 220px) * var(--msb-scale, 1)),
    var(--msb-btn-min-w-max, 220px)
  );
  min-height: clamp(
    34px,
    calc(var(--msb-btn-min-h-max, 92px) * var(--msb-scale, 1)),
    var(--msb-btn-min-h-max, 92px)
  );
  max-height: 18%;
  padding: clamp(6px, calc(var(--msb-btn-pad-y-max, 17px) * var(--msb-scale, 1)), var(--msb-btn-pad-y-max, 17px))
    clamp(12px, calc(var(--msb-btn-pad-x-max, 35px) * var(--msb-scale, 1)), var(--msb-btn-pad-x-max, 35px));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, calc(14px * var(--msb-scale, 1)), 14px);
  border: clamp(3px, calc(var(--msb-btn-border-max, 9px) * var(--msb-scale, 1)), var(--msb-btn-border-max, 9px))
    solid var(--msb-bg);
  border-radius: 999px;
  background: var(--msb-green);
  color: #fff !important;
  text-decoration: none !important;
  box-shadow: 0 calc(8px * var(--msb-scale, 1)) calc(22px * var(--msb-scale, 1)) rgba(0, 0, 0, 0.1);
  transition: transform 0.25s ease, background 0.25s ease;
}

.mirror-spring-banner__button:hover {
  background: var(--msb-green-hover);
  transform: translate(50%, -50%) scale(1.04);
}

.mirror-spring-banner__button span {
  color: #fff;
  font-size: clamp(
    11px,
    calc(var(--msb-fs-button-max, 30px) * var(--msb-scale, 1)),
    var(--msb-fs-button-max, 30px)
  );
  line-height: 1.05;
  font-weight: 900;
  text-align: right;
  white-space: pre-line;
}

.mirror-spring-banner__button strong {
  color: #fff;
  font-size: clamp(
    18px,
    calc(var(--msb-fs-button-icon-max, 52px) * var(--msb-scale, 1)),
    var(--msb-fs-button-icon-max, 52px)
  );
  line-height: 1;
  font-weight: 300;
  transform: translateY(calc(-2px * var(--msb-scale, 1)));
}

@container msb-card (max-height: 420px) {
  .mirror-spring-banner__title {
    line-height: 1.05;
  }

  .mirror-spring-banner__text {
    line-height: 1.35;
    margin-top: clamp(4px, 3cqh, 24px);
  }
}

@media (max-width: 1024px) {
  .mirror-spring-banner__box {
    grid-template-columns: 52% 48%;
  }

}

.mirror-spring-banner--fixed-height-mobile .mirror-spring-banner__box {
  direction: ltr;
  display: grid;
  grid-template-columns: 52% 48%;
  height: var(--msb-box-height, clamp(320px, 70vw, 470px));
  min-height: var(--msb-box-height, clamp(320px, 70vw, 470px));
  padding: 0;
  gap: 0;
}

.mirror-spring-banner--fixed-height-mobile .mirror-spring-banner__slider-wrap {
  order: unset;
  width: auto;
  height: 88%;
  margin: 6% 0 6% 5.8%;
}

.mirror-spring-banner--fixed-height-mobile .mirror-spring-banner__content {
  order: unset;
  width: auto;
  min-height: 0;
}

.mirror-spring-banner--fixed-height-mobile .mirror-spring-banner__button {
  order: unset;
  position: absolute;
  top: 50%;
  right: 0;
  left: auto;
  transform: translate(50%, -50%);
  align-self: unset;
}

@media (max-width: 767px) {
  .mirror-spring-banner {
    padding: 8px;
  }

  .mirror-spring-banner__box {
    direction: rtl;
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 16px;
    gap: 16px;
    border-radius: 16px;
    container-type: normal;
  }

  .mirror-spring-banner__content {
    order: 1;
    width: 100%;
    min-height: 0;
    padding: clamp(16px, calc(28px * var(--msb-scale, 1)), 28px)
      clamp(12px, calc(18px * var(--msb-scale, 1)), 18px)
      clamp(8px, calc(12px * var(--msb-scale, 1)), 12px);
  }

  .mirror-spring-banner__side-image {
    width: min(100%, var(--msb-side-img-width, 300px));
    max-height: min(var(--msb-side-img-max-height, 220px), 240px);
    margin-inline: auto;
  }

  .mirror-spring-banner__leaf {
    max-height: min(var(--msb-side-img-max-height, 220px), 280px);
  }

  .mirror-spring-banner__title {
    line-height: 1.1;
  }

  .mirror-spring-banner__text {
    line-height: 1.5;
  }

  .mirror-spring-banner__slider-wrap {
    order: 3;
    position: relative;
  }

  .mirror-spring-banner__button {
    position: absolute;
    top: 50%;
    right: 0;
    left: auto;
    transform: translate(50%, -50%);
    align-self: unset;
    max-height: none;
    z-index: 10;
  }

  .mirror-spring-banner__button:hover {
    transform: translate(50%, -50%) scale(1.03);
  }

  .mirror-spring-banner__button span {
    text-align: center;
  }

  .mirror-spring-banner__slider-wrap {
    width: 100%;
    height: clamp(160px, calc(340px * var(--msb-scale, 1)), 340px);
    margin: 0;
  }

  .mirror-spring-banner__slider {
    border-radius: 16px;
  }
}

@media (max-width: 420px) {
  .mirror-spring-banner__box {
    padding: 12px;
  }

  .mirror-spring-banner__slider-wrap {
    height: clamp(140px, calc(220px * var(--msb-scale, 1)), 220px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mirror-spring-banner__slide {
    transition: none !important;
  }

  .mirror-spring-banner__button {
    transition: none !important;
  }
}