@tet/tet-components 1.4.71-testing → 1.4.72-production

package/dist/collection/components/advanced/cards/tet-compare-card-v3/tet-compare-card-v3.css

@@ -0,0 +1,868 @@
+/* Tet design styles */
+:host {
+  box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+  padding: 0;
+  margin: 0;
+}
+
+:host {
+  --color-gray-light: #cdd2de;
+  --color-ta070: #f5f6f8;
+  --color-ta080: #e6e8ee;
+  --color-ta100: #cdd2de;
+  --color-ta200: #9ba5be;
+  --color-ta300: #69789c;
+  --color-ta500: #1e356a;
+  --color-ta600: #051d59;
+  --color-tc090: #d6e6fd;
+  --color-tc100: #d1dffe;
+  --color-tc300: #75a1fb;
+  --color-tc500: #1a70f6;
+  --color-tc600: #0060f5;
+  --color-td500: #00F1F2;
+  --color-td600: #01cbe0;
+  --color-tf600: #f53b2a;
+  --color-tg300: #2b3036;
+  --color-tg400: #1d2128;
+  --color-tg500: #12171e;
+  --color-tg600: #01050c;
+  --color-th500: #f5f5f5;
+  --color-ti500: #869198;
+  --color-ti600: #aeb7bc;
+  --text-font: Gilroy, serif;
+  --text-color-darker: var(--color-ta600);
+  --text-color-dark: var(--color-ta500);
+  --text-color-dark-theme: var(--color-th500);
+  --icons-font: Tet Icons, serif;
+}
+
+.icon.tet-search {
+  font-family: var(--icons-font);
+  font-weight: 400;
+  font-style: normal;
+  font-size: 1.25rem;
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+  speak: none;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+}
+.icon.tet-search::before {
+  content: "\e86e";
+}
+.icon.tet-close-circled {
+  font-family: var(--icons-font);
+  font-weight: 400;
+  font-style: normal;
+  font-size: 1.25rem;
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+  speak: none;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+}
+.icon.tet-close-circled::before {
+  content: "\e85a";
+}
+.icon.tet-close {
+  font-family: var(--icons-font);
+  font-weight: 400;
+  font-style: normal;
+  font-size: 1.25rem;
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+  speak: none;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+}
+.icon.tet-close::before {
+  content: "\e85b";
+}
+.icon.tet-check-circled {
+  font-family: var(--icons-font);
+  font-weight: 400;
+  font-style: normal;
+  font-size: 1.25rem;
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+  speak: none;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+}
+.icon.tet-check-circled::before {
+  content: "\e86c";
+}
+.icon.tet-check {
+  font-family: var(--icons-font);
+  font-weight: 400;
+  font-style: normal;
+  font-size: 1.25rem;
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+  speak: none;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+}
+.icon.tet-check::before {
+  content: "\e855";
+}
+.icon.tet-chevron-up {
+  font-family: var(--icons-font);
+  font-weight: 400;
+  font-style: normal;
+  font-size: 1.25rem;
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+  speak: none;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+}
+.icon.tet-chevron-up::before {
+  content: "\e859";
+}
+.icon.tet-chevron-down {
+  font-family: var(--icons-font);
+  font-weight: 400;
+  font-style: normal;
+  font-size: 1.25rem;
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+  speak: none;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+}
+.icon.tet-chevron-down::before {
+  content: "\e856";
+}
+.icon.tet-clipboard {
+  font-family: var(--icons-font);
+  font-weight: 400;
+  font-style: normal;
+  font-size: 1.25rem;
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+  speak: none;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+}
+.icon.tet-clipboard::before {
+  content: "\e86a";
+}
+.icon.tet-info {
+  font-family: var(--icons-font);
+  font-weight: 400;
+  font-style: normal;
+  font-size: 1.25rem;
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+  speak: none;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+}
+.icon.tet-info::before {
+  content: "\e81d";
+}
+.icon.tet-done {
+  font-family: var(--icons-font);
+  font-weight: 400;
+  font-style: normal;
+  font-size: 1.25rem;
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+  speak: none;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+}
+.icon.tet-done::before {
+  content: "\e867";
+}
+
+@font-face {
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("assets/fonts/Gilroy-W05-Medium.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Medium.woff") format("woff");
+}
+@font-face {
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("assets/fonts/Gilroy-W05-Medium.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Medium.woff") format("woff");
+}
+@font-face {
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("assets/fonts/Gilroy-W05-Semibold.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Semibold.woff") format("woff");
+}
+@font-face {
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("assets/fonts/Gilroy-W05-Bold.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Bold.woff") format("woff");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("assets/fonts/Inter-Regular.woff2?v=3.19") format("woff2"), url("assets/fonts/Inter-Regular.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("assets/fonts/Inter-Medium.woff2?v=3.19") format("woff2"), url("assets/fonts/Inter-Medium.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("assets/fonts/Inter-SemiBold.woff2?v=3.19") format("woff2"), url("assets/fonts/Inter-SemiBold.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("assets/fonts/Gilroy-W05-Medium.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Medium.woff") format("woff");
+}
+@font-face {
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("assets/fonts/Gilroy-W05-Medium.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Medium.woff") format("woff");
+}
+@font-face {
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("assets/fonts/Gilroy-W05-Semibold.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Semibold.woff") format("woff");
+}
+@font-face {
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("assets/fonts/Gilroy-W05-Bold.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Bold.woff") format("woff");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("assets/fonts/Inter-Regular.woff2?v=3.19") format("woff2"), url("assets/fonts/Inter-Regular.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("assets/fonts/Inter-Medium.woff2?v=3.19") format("woff2"), url("assets/fonts/Inter-Medium.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("assets/fonts/Inter-SemiBold.woff2?v=3.19") format("woff2"), url("assets/fonts/Inter-SemiBold.woff?v=3.19") format("woff");
+}
+:host {
+  --font-family-fallback: Gilroy, Arial, sans-serif;
+  --font-family-headline: Gilroy;
+  --font-family-content: Inter, var(--font-family-fallback);
+  font-family: var(--font-family-content);
+}
+
+:root {
+  --tet-link-color: var(--tc-text-primary);
+  --tet-link-color-hover: var(--tc-text-secondary);
+  --tet-link-color-active: var(--tc-text-tertiary);
+  --tet-link-color-focus: var(--tc-blue-40);
+  --tet-link-color-disabled: var(--tc-button-text-inverse-disabled);
+  --tet-link-secondary-color: var(--tc-text-secondary);
+  --tet-link-secondary-color-hover: var(--tc-text-primary);
+}
+
+.tet-link,
+.tet-link__arrow {
+  text-decoration-line: underline;
+  text-decoration-style: solid;
+  text-decoration-skip-ink: none;
+  text-decoration-thickness: auto;
+  text-underline-offset: auto;
+  text-underline-position: from-font;
+  color: var(--tet-link-color);
+  position: relative;
+  line-height: 1.5rem;
+  cursor: pointer;
+}
+.tet-link.dark,
+.tet-link__arrow.dark {
+  --tet-link-color: var(--tc-text-primary-dark);
+  --tet-link-color-hover: var(--tc-text-secondary-dark);
+  --tet-link-color-active: var(--tc-text-tertiary-dark);
+  --tet-link-color-focus: var(--tc-blue-40-dark);
+  --tet-link-color-disabled: var(--tc-button-text-inverse-disabled-dark);
+  --tet-link-secondary-color: var(--tc-text-secondary-dark);
+  --tet-link-secondary-color-hover: var(--tc-text-primary-dark);
+}
+.tet-link.tet-link--secondary,
+.tet-link__arrow.tet-link--secondary {
+  --tet-link-color: var(--tet-link-secondary-color);
+  --tet-link-color-hover: var(--tet-link-secondary-color-hover);
+}
+.tet-link tet-icon,
+.tet-link__arrow tet-icon {
+  --icon-color: var(--tet-link-color);
+}
+.tet-link:hover,
+.tet-link__arrow:hover {
+  color: var(--tet-link-color-hover);
+}
+.tet-link:hover tet-icon,
+.tet-link__arrow:hover tet-icon {
+  --icon-color: var(--tet-link-color-hover);
+}
+.tet-link:active,
+.tet-link__arrow:active {
+  color: var(--tet-link-color-active);
+}
+.tet-link:active tet-icon,
+.tet-link__arrow:active tet-icon {
+  --icon-color: var(--tet-link-color-active);
+}
+.tet-link:focus-visible,
+.tet-link__arrow:focus-visible {
+  outline: 0.125rem solid var(--tc-blue-40);
+  outline-offset: 0.125rem;
+  transition: outline 0s;
+  outline-color: var(--tet-link-color-focus);
+  border-radius: 0.125rem;
+}
+.tet-link.disabled,
+.tet-link__arrow.disabled {
+  color: var(--tet-link-color-disabled);
+  pointer-events: none;
+  cursor: auto;
+}
+.tet-link.disabled tet-icon,
+.tet-link__arrow.disabled tet-icon {
+  --icon-color: var(--tet-link-color-disabled);
+}
+.tet-link.disabled:focus-visible,
+.tet-link__arrow.disabled:focus-visible {
+  outline: none;
+}
+.tet-link tet-icon,
+.tet-link__arrow tet-icon {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+  --icon-container-display: inline-block;
+}
+
+.tet-link__arrow {
+  padding-right: 1.5rem;
+}
+.tet-link__arrow::after {
+  content: "-->";
+  position: absolute;
+  white-space: nowrap;
+  display: inline-block;
+  text-decoration: none;
+  padding-left: 0.25rem;
+  letter-spacing: initial;
+  transition: all 0.15s ease-in;
+}
+.tet-link__arrow:hover::after {
+  padding-left: 0.375rem;
+}
+
+:host {
+  /**
+   * @prop --compare-card-border-radius: The border radius of the compare card.
+   * @prop --compare-card-min-width: The minimum width of the compare card.
+   * @prop --compare-card-max-width: The maximum width of the compare card.
+   */
+  --compare-card-top-part-background-color: var(--tc-layer-permanent-yellow);
+  --compare-card-bottom-part-background-color: var(--tc-layer-primary);
+  --compare-card-text-permanent-color: var(--tc-text-permanent-black);
+  --compare-card-text-color: var(--tc-text-primary);
+  --compare-card-text-tertiary-color: var(--tc-text-tertiary);
+  --compare-card-best-choice-background-color: var(--tc-layer-inverse-primary);
+  --compare-card-best-choice-text-color: var(--tc-text-adaptive-yellow-to-black);
+  --compare-card-separator-border-color: var(--tc-border-tertiary);
+  --compare-card-chevron-container-background-color: var(--tc-layer-tertiary);
+  --compare-card-chevron-container-hover-background-color: var(--tc-layer-inverse-primary);
+  --compare-card-chevron-container-active-background-color: var(--tc-layer-inverse-tertiary);
+  --compare-card-chevron-icon-color: var(--tc-grey-60);
+  --compare-card-chevron-icon-hover-color: var(--tc-icon-inverse-primary);
+  --compare-card-interactive-element-hover-background-color: var(--tc-layer-secondary);
+  --compare-card-interactive-element-active-background-color: var(--tc-layer-tertiary);
+  --compare-card-focus-outline-color: var(--tc-blue-40);
+  --compare-card-box-shadow: var(--tc-elevation-three);
+  --compare-card-border-radius: 1rem;
+  --compare-card-min-width: 20.5rem;
+  --compare-card-max-width: 100%;
+  --compare-card-radio-container-background-color: var(--tc-product-card-menu-default);
+  --compare-card-radio-container-background-hover-color: var(--tc-product-card-menu-hover);
+  --compare-card-radio-container-background-pressed-color: var(--tc-product-card-menu-pressed);
+  --compare-card-radio-container-background-active-color: var(--tc-product-card-menu-active);
+  --compare-card-radio-container-border-color: var(--tc-product-card-menu-border-default);
+  --compare-card-radio-container-border-hover-color: var(--tc-product-card-menu-border-hover);
+  --compare-card-radio-container-border-pressed-color: var(--tc-product-card-menu-border-pressed);
+  --compare-card-radio-container-border-active-color: var(--tc-product-card-menu-border-active);
+  display: inline-block;
+  width: 100%;
+  min-width: var(--compare-card-min-width);
+  max-width: var(--compare-card-max-width);
+}
+
+:host([theme=dark]) {
+  --compare-card-bottom-part-background-color: var(--tc-layer-primary-dark);
+  --compare-card-text-color: var(--tc-text-primary-dark);
+  --compare-card-text-tertiary-color: var(--tc-text-tertiary-dark);
+  --compare-card-best-choice-background-color: var(--tc-layer-inverse-primary-dark);
+  --compare-card-best-choice-text-color: var(--tc-text-adaptive-yellow-to-black-dark);
+  --compare-card-separator-border-color: var(--tc-border-tertiary-dark);
+  --compare-card-chevron-container-background-color: var(--tc-layer-tertiary-dark);
+  --compare-card-chevron-container-hover-background-color: var(--tc-layer-inverse-primary-dark);
+  --compare-card-chevron-container-active-background-color: var(--tc-layer-inverse-tertiary-dark);
+  --compare-card-chevron-icon-color: var(--tc-grey-60-dark);
+  --compare-card-chevron-icon-hover-color: var(--tc-icon-inverse-primary-dark);
+  --compare-card-interactive-element-hover-background-color: var(--tc-layer-secondary-dark);
+  --compare-card-interactive-element-active-background-color: var(--tc-layer-tertiary-dark);
+  --compare-card-focus-outline-color: var(--tc-blue-40-dark);
+  --compare-card-box-shadow: var(--tc-elevation-three-dark);
+  --compare-card-radio-container-background-color: var(--tc-product-card-menu-default-dark);
+  --compare-card-radio-container-background-hover-color: var(--tc-product-card-menu-hover-dark);
+  --compare-card-radio-container-background-pressed-color: var(--tc-product-card-menu-pressed-dark);
+  --compare-card-radio-container-background-active-color: var(--tc-product-card-menu-active-dark);
+  --compare-card-radio-container-border-color: var(--tc-product-card-menu-border-default-dark);
+  --compare-card-radio-container-border-hover-color: var(--tc-product-card-menu-border-hover-dark);
+  --compare-card-radio-container-border-pressed-color: var(--tc-product-card-menu-border-pressed-dark);
+  --compare-card-radio-container-border-active-color: var(--tc-product-card-menu-border-active-dark);
+}
+
+.card {
+  display: inline-flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  border-radius: var(--compare-card-border-radius);
+  box-shadow: var(--compare-card-box-shadow);
+}
+.card__placeholder {
+  --placeholder-border-radius: var(--compare-card-border-radius);
+}
+.card .content {
+  padding: 1.5rem 1rem;
+}
+.card .content__top {
+  background-color: var(--compare-card-top-part-background-color);
+  color: var(--compare-card-text-permanent-color);
+  border-top-left-radius: var(--compare-card-border-radius);
+  border-top-right-radius: var(--compare-card-border-radius);
+}
+.card .content__bottom {
+  background-color: var(--compare-card-bottom-part-background-color);
+  color: var(--compare-card-text-color);
+  border-bottom-left-radius: var(--compare-card-border-radius);
+  border-bottom-right-radius: var(--compare-card-border-radius);
+}
+@media screen and (min-width: 31.25rem) {
+  .card .content {
+    padding: 1.5rem 2rem;
+  }
+}
+@media screen and (min-width: 80rem) {
+  .card .content {
+    padding: 2rem;
+  }
+}
+.card .best-choice-title {
+  font: 500 1rem/1.5rem "Inter", "Gilroy, Arial, sans-serif";
+  position: absolute;
+  align-self: center;
+  visibility: hidden;
+  white-space: nowrap;
+  top: -2.5rem;
+  max-width: 18.5rem;
+  padding: 0.5rem 1rem;
+  border-radius: 1rem 1rem 0 0;
+  background-color: var(--compare-card-best-choice-background-color);
+  color: var(--compare-card-best-choice-text-color);
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.card .best-choice-title.active {
+  visibility: visible;
+}
+.card .title {
+  font: 600 1.75rem/2rem "Gilroy", "Gilroy, Arial, sans-serif";
+}
+.card .price-wrapper {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  gap: 0.75rem;
+}
+.card .price-wrapper .price-container {
+  display: flex;
+  align-items: flex-end;
+  gap: 0.25rem;
+  align-self: stretch;
+}
+.card .price-wrapper .price-container__price {
+  font: 600 3.5rem/4rem "Gilroy", "Gilroy, Arial, sans-serif";
+}
+@media screen and (min-width: 31.25rem) {
+  .card .price-wrapper .price-container__price {
+    font: 600 5rem/5.5rem "Gilroy", "Gilroy, Arial, sans-serif";
+  }
+}
+@media screen and (min-width: 90rem) {
+  .card .price-wrapper .price-container__price {
+    font: 600 6rem/6.5rem "Gilroy", "Gilroy, Arial, sans-serif";
+  }
+}
+.card .price-wrapper .price-container__currency {
+  font: 600 1.25rem/1.5rem "Gilroy", "Gilroy, Arial, sans-serif";
+  margin-bottom: 0.75rem;
+}
+@media screen and (min-width: 31.25rem) {
+  .card .price-wrapper .price-container__currency {
+    font: 600 1.5rem/1.75rem "Gilroy", "Gilroy, Arial, sans-serif";
+  }
+}
+.card .price-wrapper .price-container__description {
+  font: 400 0.875rem/1.25rem "Inter", "Gilroy, Arial, sans-serif";
+}
+.card .button {
+  --button-width: 100%;
+  margin: 0.75rem 0 1rem;
+  width: 100%;
+}
+.card .secondary-link {
+  font: 400 0.75rem/1rem "Inter", "Gilroy, Arial, sans-serif";
+  width: fit-content;
+  margin: 0 auto;
+}
+.card .bonuses,
+.card .benefits {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+.card .bonuses__title,
+.card .benefits__title {
+  font: 400 0.875rem/1.25rem "Inter", "Gilroy, Arial, sans-serif";
+  padding: 0.375rem 0;
+  color: var(--compare-card-text-tertiary-color);
+  border-bottom: 0.0625rem solid var(--compare-card-separator-border-color);
+}
+.card .bonuses .benefits__title,
+.card .benefits .benefits__title {
+  margin: 1.5rem 0 0.75rem;
+}
+.card .bonuses__bonus-container .bonus,
+.card .bonuses__bonus-container .benefit, .card .bonuses__benefit-container .bonus,
+.card .bonuses__benefit-container .benefit,
+.card .benefits__bonus-container .bonus,
+.card .benefits__bonus-container .benefit,
+.card .benefits__benefit-container .bonus,
+.card .benefits__benefit-container .benefit {
+  font: 500 0.875rem/1.25rem "Inter", "Gilroy, Arial, sans-serif";
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: 0.75rem;
+  padding: 0.375rem 0.5rem;
+  border-radius: 0.5rem;
+  appearance: none;
+  -webkit-appearance: none;
+  background: none;
+  border: none;
+  margin: 0;
+  color: inherit;
+  text-align: start;
+  text-decoration: none;
+  --bonus-chevron-container-state-bg: var(--compare-card-chevron-container-background-color);
+  --bonus-chevron-icon-state-color: var(--compare-card-chevron-icon-color);
+}
+.card .bonuses__bonus-container .bonus--interactive:hover,
+.card .bonuses__bonus-container .benefit--interactive:hover, .card .bonuses__benefit-container .bonus--interactive:hover,
+.card .bonuses__benefit-container .benefit--interactive:hover,
+.card .benefits__bonus-container .bonus--interactive:hover,
+.card .benefits__bonus-container .benefit--interactive:hover,
+.card .benefits__benefit-container .bonus--interactive:hover,
+.card .benefits__benefit-container .benefit--interactive:hover {
+  --bonus-chevron-container-state-bg: var(--compare-card-chevron-container-hover-background-color);
+  --bonus-chevron-icon-state-color: var(--compare-card-chevron-icon-hover-color);
+  background-color: var(--compare-card-interactive-element-hover-background-color);
+}
+.card .bonuses__bonus-container .bonus--interactive:active,
+.card .bonuses__bonus-container .benefit--interactive:active, .card .bonuses__benefit-container .bonus--interactive:active,
+.card .bonuses__benefit-container .benefit--interactive:active,
+.card .benefits__bonus-container .bonus--interactive:active,
+.card .benefits__bonus-container .benefit--interactive:active,
+.card .benefits__benefit-container .bonus--interactive:active,
+.card .benefits__benefit-container .benefit--interactive:active {
+  --bonus-chevron-container-state-bg: var(--compare-card-chevron-container-active-background-color);
+  --bonus-chevron-icon-state-color: var(--compare-card-chevron-icon-hover-color);
+  background-color: var(--compare-card-interactive-element-active-background-color);
+}
+.card .bonuses__bonus-container .bonus--interactive:focus-visible,
+.card .bonuses__bonus-container .benefit--interactive:focus-visible, .card .bonuses__benefit-container .bonus--interactive:focus-visible,
+.card .bonuses__benefit-container .benefit--interactive:focus-visible,
+.card .benefits__bonus-container .bonus--interactive:focus-visible,
+.card .benefits__bonus-container .benefit--interactive:focus-visible,
+.card .benefits__benefit-container .bonus--interactive:focus-visible,
+.card .benefits__benefit-container .benefit--interactive:focus-visible {
+  outline: 0.125rem solid var(--compare-card-focus-outline-color);
+}
+.card .bonuses__bonus-container .bonus--interactive:is(:hover, :active) .bonus__chevron-icon-container,
+.card .bonuses__bonus-container .bonus--interactive:is(:hover, :active) .benefit__chevron-icon-container,
+.card .bonuses__bonus-container .benefit--interactive:is(:hover, :active) .bonus__chevron-icon-container,
+.card .bonuses__bonus-container .benefit--interactive:is(:hover, :active) .benefit__chevron-icon-container, .card .bonuses__benefit-container .bonus--interactive:is(:hover, :active) .bonus__chevron-icon-container,
+.card .bonuses__benefit-container .bonus--interactive:is(:hover, :active) .benefit__chevron-icon-container,
+.card .bonuses__benefit-container .benefit--interactive:is(:hover, :active) .bonus__chevron-icon-container,
+.card .bonuses__benefit-container .benefit--interactive:is(:hover, :active) .benefit__chevron-icon-container,
+.card .benefits__bonus-container .bonus--interactive:is(:hover, :active) .bonus__chevron-icon-container,
+.card .benefits__bonus-container .bonus--interactive:is(:hover, :active) .benefit__chevron-icon-container,
+.card .benefits__bonus-container .benefit--interactive:is(:hover, :active) .bonus__chevron-icon-container,
+.card .benefits__bonus-container .benefit--interactive:is(:hover, :active) .benefit__chevron-icon-container,
+.card .benefits__benefit-container .bonus--interactive:is(:hover, :active) .bonus__chevron-icon-container,
+.card .benefits__benefit-container .bonus--interactive:is(:hover, :active) .benefit__chevron-icon-container,
+.card .benefits__benefit-container .benefit--interactive:is(:hover, :active) .bonus__chevron-icon-container,
+.card .benefits__benefit-container .benefit--interactive:is(:hover, :active) .benefit__chevron-icon-container {
+  background-color: var(--bonus-chevron-container-state-bg);
+}
+.card .bonuses__bonus-container .bonus--interactive:is(:hover, :active) .bonus__icon--chevron,
+.card .bonuses__bonus-container .bonus--interactive:is(:hover, :active) .benefit__icon--chevron,
+.card .bonuses__bonus-container .benefit--interactive:is(:hover, :active) .bonus__icon--chevron,
+.card .bonuses__bonus-container .benefit--interactive:is(:hover, :active) .benefit__icon--chevron, .card .bonuses__benefit-container .bonus--interactive:is(:hover, :active) .bonus__icon--chevron,
+.card .bonuses__benefit-container .bonus--interactive:is(:hover, :active) .benefit__icon--chevron,
+.card .bonuses__benefit-container .benefit--interactive:is(:hover, :active) .bonus__icon--chevron,
+.card .bonuses__benefit-container .benefit--interactive:is(:hover, :active) .benefit__icon--chevron,
+.card .benefits__bonus-container .bonus--interactive:is(:hover, :active) .bonus__icon--chevron,
+.card .benefits__bonus-container .bonus--interactive:is(:hover, :active) .benefit__icon--chevron,
+.card .benefits__bonus-container .benefit--interactive:is(:hover, :active) .bonus__icon--chevron,
+.card .benefits__bonus-container .benefit--interactive:is(:hover, :active) .benefit__icon--chevron,
+.card .benefits__benefit-container .bonus--interactive:is(:hover, :active) .bonus__icon--chevron,
+.card .benefits__benefit-container .bonus--interactive:is(:hover, :active) .benefit__icon--chevron,
+.card .benefits__benefit-container .benefit--interactive:is(:hover, :active) .bonus__icon--chevron,
+.card .benefits__benefit-container .benefit--interactive:is(:hover, :active) .benefit__icon--chevron {
+  --icon-color: var(--bonus-chevron-icon-state-color);
+}
+.card .bonuses__bonus-container .bonus__text,
+.card .bonuses__bonus-container .benefit__text, .card .bonuses__benefit-container .bonus__text,
+.card .bonuses__benefit-container .benefit__text,
+.card .benefits__bonus-container .bonus__text,
+.card .benefits__bonus-container .benefit__text,
+.card .benefits__benefit-container .bonus__text,
+.card .benefits__benefit-container .benefit__text {
+  flex: 1 0 0;
+  text-align: start;
+}
+.card .bonuses__bonus-container .bonus__icon,
+.card .bonuses__bonus-container .benefit__icon, .card .bonuses__benefit-container .bonus__icon,
+.card .bonuses__benefit-container .benefit__icon,
+.card .benefits__bonus-container .bonus__icon,
+.card .benefits__bonus-container .benefit__icon,
+.card .benefits__benefit-container .bonus__icon,
+.card .benefits__benefit-container .benefit__icon {
+  --icon-container-display: flex;
+  --icon-size: 1.5rem;
+}
+.card .bonuses__bonus-container .bonus__icon--chevron,
+.card .bonuses__bonus-container .benefit__icon--chevron, .card .bonuses__benefit-container .bonus__icon--chevron,
+.card .bonuses__benefit-container .benefit__icon--chevron,
+.card .benefits__bonus-container .bonus__icon--chevron,
+.card .benefits__bonus-container .benefit__icon--chevron,
+.card .benefits__benefit-container .bonus__icon--chevron,
+.card .benefits__benefit-container .benefit__icon--chevron {
+  --icon-size: 1rem;
+  --icon-color: var(--compare-card-chevron-icon-color);
+}
+.card .bonuses__bonus-container .bonus__chevron-icon-container,
+.card .bonuses__bonus-container .benefit__chevron-icon-container, .card .bonuses__benefit-container .bonus__chevron-icon-container,
+.card .bonuses__benefit-container .benefit__chevron-icon-container,
+.card .benefits__bonus-container .bonus__chevron-icon-container,
+.card .benefits__bonus-container .benefit__chevron-icon-container,
+.card .benefits__benefit-container .bonus__chevron-icon-container,
+.card .benefits__benefit-container .benefit__chevron-icon-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-left: 0.125rem;
+  padding: 0.125rem;
+  border-radius: 50%;
+  background: var(--compare-card-chevron-container-background-color);
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.card .bonuses__bonus-container .bonus--inactive,
+.card .bonuses__bonus-container .benefit--inactive, .card .bonuses__benefit-container .bonus--inactive,
+.card .bonuses__benefit-container .benefit--inactive,
+.card .benefits__bonus-container .bonus--inactive,
+.card .benefits__bonus-container .benefit--inactive,
+.card .benefits__benefit-container .bonus--inactive,
+.card .benefits__benefit-container .benefit--inactive {
+  display: none;
+}
+.card .bonuses__bonus-container .bonus--interactive,
+.card .bonuses__bonus-container .benefit--interactive, .card .bonuses__benefit-container .bonus--interactive,
+.card .bonuses__benefit-container .benefit--interactive,
+.card .benefits__bonus-container .bonus--interactive,
+.card .benefits__bonus-container .benefit--interactive,
+.card .benefits__benefit-container .bonus--interactive,
+.card .benefits__benefit-container .benefit--interactive {
+  cursor: pointer;
+}
+.card .bonuses__bonus-container .benefit + .dropdown, .card .bonuses__benefit-container .benefit + .dropdown,
+.card .benefits__bonus-container .benefit + .dropdown,
+.card .benefits__benefit-container .benefit + .dropdown {
+  margin-top: 0.375rem;
+}
+.card .bonuses__bonus-container .benefit + .radio-container, .card .bonuses__benefit-container .benefit + .radio-container,
+.card .benefits__bonus-container .benefit + .radio-container,
+.card .benefits__benefit-container .benefit + .radio-container {
+  margin-top: 0.75rem;
+}
+.card .radio-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.card .radio-wrapper {
+  border-radius: 0.5rem;
+}
+.card .radio-wrapper .radio {
+  --radio-container-outline-offset: -0.125rem;
+}
+.card .radio-wrapper .radio .radio__container--focus-style:has(:focus-visible) {
+  border-radius: 0.5rem;
+}
+.card .radio-wrapper .radio .radio__container {
+  padding: 1rem 0.75rem;
+  border-radius: 0.5rem;
+  border: 0.0625rem solid var(--compare-card-radio-container-border-color);
+  background-color: var(--compare-card-radio-container-background-color);
+  cursor: pointer;
+}
+.card .radio-wrapper:not(.disabled):not(.unavailable) .radio__container:hover {
+  background-color: var(--compare-card-radio-container-background-hover-color);
+}
+.card .radio-wrapper:not(.disabled):not(.unavailable) .radio__container:active {
+  background-color: var(--compare-card-radio-container-background-pressed-color);
+}
+.card .radio-wrapper:not(.error):not(.disabled):not(.unavailable) .radio__container:hover {
+  border-color: var(--compare-card-radio-container-border-hover-color);
+}
+.card .radio-wrapper:not(.error):not(.disabled):not(.unavailable) .radio__container:active {
+  border-color: var(--compare-card-radio-container-border-pressed-color);
+}
+.card .radio-wrapper:not(.disabled):not(.unavailable) .radio[checked]:not([checked=false]) .radio__container {
+  border-color: var(--compare-card-radio-container-border-active-color);
+  background-color: var(--compare-card-radio-container-background-active-color);
+}
+.card .switch-wrapper {
+  border-radius: 0.5rem;
+}
+.card .switch-wrapper .switch {
+  --switch-container-outline-offset: -0.125rem;
+}
+.card .switch-wrapper .switch-label {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  width: 100%;
+  text-align: start;
+}
+.card .switch-wrapper .switch::part(switch-container) {
+  padding: 0.375rem 0.5rem;
+  border-radius: 0.5rem;
+  cursor: pointer;
+}
+.card .switch-wrapper:not(.disabled) .switch::part(switch-container):hover {
+  background-color: var(--compare-card-interactive-element-hover-background-color);
+}
+.card .switch-wrapper:not(.disabled) .switch::part(switch-container):active {
+  background-color: var(--compare-card-interactive-element-active-background-color);
+}