@charset "UTF-8";
.compare-page {
  --compare-bg: #fff;
  --compare-item-padding: 8px;
  --compare-label-width: 260px;
  --compare-group-bg: #f2f2f2;
  --compare-item-bg: #f7f7f7;
  --compare-label-color: #888;
  --compare-border-color: #dfdfe1;
  --compare-head-swiper-offset-top: var(--header-height, 0px);
  background-color: var(--compare-bg);
}
.compare-page__head-swiper .swiper-slide, .compare-page__body-row-swiper .swiper-slide {
  flex-grow: 1;
  box-sizing: border-box;
  width: 33.3333333333%;
  min-width: clamp(150px, 50%, 200px);
}
.compare-page__head-swiper {
  background-color: var(--compare-bg);
  position: sticky;
  top: var(--compare-head-swiper-offset-top);
  z-index: 10;
}
.compare-page__head-swiper:has(.swiper-scrollbar:not(.swiper-scrollbar-lock)) .swiper-wrapper {
  padding-bottom: 34px;
}
.compare-page__scroll {
  position: absolute;
  z-index: 20;
  right: 10px;
  bottom: 6px;
  left: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 22px;
}
.compare-page__scroll .swiper-scrollbar {
  position: relative;
  right: auto;
  bottom: auto;
  left: auto;
  flex: 1 1 auto;
  width: auto;
  height: 4px;
  --swiper-scrollbar-bg-color: rgba(0, 0, 0, 0.12);
  --swiper-scrollbar-drag-bg-color: var(--bs-primary, #d71920);
  cursor: grab;
}
.compare-page__scroll .swiper-scrollbar:active {
  cursor: grabbing;
}
.compare-page__scroll-button {
  position: static;
  display: inline-flex;
  flex: 0 0 22px;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--compare-item-bg);
  color: var(--bs-secondary-color, #6c757d);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.compare-page__scroll-button:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--bs-body-color, #212529);
}
.compare-page__scroll-button.swiper-button-disabled {
  opacity: 0.25;
  cursor: default;
}
.compare-page__scroll-button::after {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  background: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3C!--!Font Awesome Free v7.3.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--%3E%3Cpath d='M297.4 201.4C309.9 188.9 330.2 188.9 342.7 201.4L502.7 361.4C515.2 373.9 515.2 394.2 502.7 406.7C490.2 419.2 469.9 419.2 457.4 406.7L320 269.3L182.6 406.6C170.1 419.1 149.8 419.1 137.3 406.6C124.8 394.1 124.8 373.8 137.3 361.3L297.3 201.3z'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
}
.compare-page__scroll-prev::after {
  transform: rotate(-90deg);
}
.compare-page__scroll-next::after {
  transform: rotate(90deg);
}
.compare-page__head-title {
  padding: var(--compare-item-padding);
  background-color: var(--compare-bg);
}
.compare-page__head-item {
  padding: var(--compare-item-padding);
}
.compare-page__body-group-title {
  font-size: 18px;
  font-weight: 600;
  padding: var(--compare-item-padding);
  background: var(--compare-group-bg);
  position: relative;
  cursor: pointer;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.compare-page__body-group-title::after {
  content: "";
  display: block;
  right: var(--compare-item-padding);
  width: 16px;
  height: 16px;
  background: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3C!--!Font Awesome Free v7.3.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--%3E%3Cpath d='M297.4 201.4C309.9 188.9 330.2 188.9 342.7 201.4L502.7 361.4C515.2 373.9 515.2 394.2 502.7 406.7C490.2 419.2 469.9 419.2 457.4 406.7L320 269.3L182.6 406.6C170.1 419.1 149.8 419.1 137.3 406.6C124.8 394.1 124.8 373.8 137.3 361.3L297.3 201.3z'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
}
.compare-page__body-group-title.is-collapsed::after {
  transform: scaleY(-1);
}
.compare-page__body-row-title {
  font-size: 12px;
  color: var(--compare-label-color);
  padding: var(--compare-item-padding);
  background-color: var(--compare-bg);
}
.compare-page__body-row-item {
  padding: var(--compare-item-padding);
}
.compare-page__body-row-item--y::before, .compare-page__body-row-item--n::before {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  line-height: 2em;
  text-align: center;
  font-weight: 700;
  font-family: monospace;
  background: var(--compare-item-bg);
  border-radius: 4px;
}
.compare-page__body-row-item--y::before {
  content: "+";
}
.compare-page__body-row-item--n::before {
  content: "—";
}
.compare-page--bordered {
  --compare-border-width: 1px;
  border: var(--compare-border-width) solid var(--compare-border-color);
}
.compare-page--bordered .compare-page__head-swiper {
  border-bottom: 2px solid var(--compare-border-color);
}
.compare-page--bordered .compare-page__body-group-title {
  border-bottom: var(--compare-border-width) solid var(--compare-border-color);
}
.compare-page--bordered .compare-page__body-row-swiper {
  border-bottom: var(--compare-border-width) solid var(--compare-border-color);
}
.compare-page--bordered .compare-page__body-group:last-child .compare-page__body-row-swiper:last-child {
  border-bottom: unset;
}
.compare-page--bordered .compare-page__body-group:last-child .compare-page__body-group-title.is-collapsed {
  border-bottom: unset;
}
@media (max-width: 991.98px) {
  .compare-page__head-title {
    display: none;
  }
  .compare-page__body-row-item {
    padding-top: 0;
  }
}
@media (min-width: 992px) {
  .compare-page__head-swiper, .compare-page__body-row-swiper {
    display: flex;
    padding-left: var(--compare-label-width);
  }
  .compare-page__head-swiper .swiper-wrapper, .compare-page__body-row-swiper .swiper-wrapper {
    height: auto;
  }
  .compare-page__head-title, .compare-page__body-row-title {
    z-index: 2;
    width: var(--compare-label-width);
    margin-left: calc(var(--compare-label-width) * -1);
    border-right: 1px solid var(--compare-border-color);
  }
  .compare-page__scroll {
    padding-left: var(--compare-label-width);
  }
}

/*# sourceMappingURL=compare-page.css.map */