/*------------------------------------------------------------------
[Table of contents]

1. Reset
2. Variables
4. General
5. Card
  5.1. Card Header
  5.2. Card Footer
  5.3. Card Body
    5.3.1. Card Body - Children
    5.3.2. Card Body Content
  5.4. Card Title
    5.4.1. Card Title - Siblings
  5.5. Card Text
  5.6. Card Button
  5.7. Card Cover
  5.8. Card Media
  5.9. Card Tier Image
  5.10. Card Circle
  5.11. Card Row
  5.12. Card Features
  5.13. Card Siblings
6. Tag
7. Icon
8. Feature List
9. Status Tag
-------------------------------------------------------------------*/
/**
 * 1. Reset
 */
.struninnuicard-pricingtable *,
.struninnuicard-pricingtable *::before,
.struninnuicard-pricingtable *::after {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  box-sizing: border-box;
}

/*------------------------------------------------------------------*/
/**
 * 2. Variables
 */
:root {
  /**
   * Light
   */
  --struninnuicard-pricingtable-light-background-color: #ffffff;
  --struninnuicard-pricingtable-light-background-alt-color: #f9f9f9;
  --struninnuicard-pricingtable-light-line-color: #e1e1e1;
  --struninnuicard-pricingtable-light-text-color: #22212c;
  --struninnuicard-pricingtable-light-button-text-color: #ffffff;
  --struninnuicard-pricingtable-light-button-background-color: #22212c;

  /**
   * Dark
   */
  --struninnuicard-pricingtable-dark-background-color: #2b2a3b;
  --struninnuicard-pricingtable-dark-background-alt-color: #21202e;
  --struninnuicard-pricingtable-dark-line-color: #38374b;
  --struninnuicard-pricingtable-dark-text-color: #ffffff;
  --struninnuicard-pricingtable-dark-button-text-color: #ffffff;
  --struninnuicard-pricingtable-dark-button-background-color: #22212c;

  /**
   * Font
   */
  --struninnuicard-pricingtable-font-family: inherit;
  --struninnuicard-pricingtable-font-scale-factor: 1;
  --struninnuicard-pricingtable-font-size-base: calc(16 / var(--struninnuicard-pricingtable-font-scale-factor));

  /**
   * Tag
   */
  --struninnuicard-pricingtable-tag-icon-color: #ff5794;
  --struninnuicard-pricingtable-tag-solid-foreground-color: #ffffff;
  --struninnuicard-pricingtable-tag-solid-background-color: #5c8cfb;
}

.struninnuicard-pricingtable {
  /**
   * Font
   */
  --font-family: var(--struninnuicard-pricingtable-font-family);

  /**
   * Box
   */
  --card-border-radius: 24px;

  /**
   * Card
   */
  --card-background-color: var(--struninnuicard-pricingtable-light-background-color);
  --card-background-alt-color: var(--struninnuicard-pricingtable-light-background-alt-color);
  --card-line-color: var(--struninnuicard-pricingtable-light-line-color);
  --card-text-color: var(--struninnuicard-pricingtable-light-text-color);
  --card-icon-color: var(--card-text-color);
  --card-button-primary-text-color: var(--struninnuicard-pricingtable-light-button-text-color);
  --card-button-primary-background-color: var(--struninnuicard-pricingtable-light-button-background-color);

  /**
   * Tag
   */
  --tag-icon-color: var(--struninnuicard-pricingtable-tag-icon-color);
  --tag-solid-foreground-color: var(--struninnuicard-pricingtable-tag-solid-foreground-color);
  --tag-solid-background-color: var(--struninnuicard-pricingtable-tag-solid-background-color);
 
  /**
   * Status Tag
   */
  --status-tag-enabled-icon-color: var(--struninnuicard-pricingtable-status-tag-enabled-icon-color);
  --status-tag-enabled-background-color: var(--struninnuicard-pricingtable-status-tag-enabled-background-color);
  --status-tag-disabled-icon-color: var(--struninnuicard-pricingtable-status-tag-disabled-icon-color);
  --status-tag-disabled-background-color: var(--struninnuicard-pricingtable-status-tag-disabled-background-color);
}

.struninnuicard-pricingtable_theme-dark {
  /**
   * Card
   */
  --card-background-color: var(--struninnuicard-pricingtable-dark-background-color);
  --card-background-alt-color: var(--struninnuicard-pricingtable-dark-background-alt-color);
  --card-line-color: var(--struninnuicard-pricingtable-dark-line-color);
  --card-text-color: var(--struninnuicard-pricingtable-dark-text-color);
  --card-button-primary-text-color: var(--struninnuicard-pricingtable-dark-button-text-color);
  --card-button-primary-background-color: var(--struninnuicard-pricingtable-dark-button-background-color);
}

/*------------------------------------------------------------------*/
/**
 * 4. General
 */
.struninnuicard-pricingtable :is(h1, h2, h3, h4, h5, h6, p, a) {
  color: var(--card-text-color);
  font-family: var(--font-family);
  line-height: 1;
  letter-spacing: -.02em;
}

.struninnuicard-pricingtable :is(h1, h2, h3, h4, h5, h6) {
  font-weight: 700;
}

.struninnuicard-pricingtable :is(p, a) {
  font-weight: 400;
}

/*------------------------------------------------------------------*/
/**
 * 5. Card
 */
.struninnuicard-pricingtable .card {
  font-size: calc((10 / var(--struninnuicard-pricingtable-font-size-base)) * 1rem);
  position: relative;
}

.struninnuicard-pricingtable_header {
  padding-top: 40px;
}

.struninnuicard-pricingtable_footer {
  padding-top: 30px;
  padding-bottom: 30px;
}

.struninnuicard-pricingtable_footer-medium {
  padding-bottom: 58px;
}

.struninnuicard-pricingtable_footer-large {
  padding-bottom: 104px;
}

/*------------------------------------------------------------------*/
/**
 * 5.1. Card Header
 */
.struninnuicard-pricingtable .card__header {
  width: 100%;
  padding: 40px 0 24px;
  background-color: var(--card-background-color);
  border: 1px solid var(--card-line-color);
  border-top-left-radius: var(--card-border-radius);
  border-top-right-radius: var(--card-border-radius);
  position: absolute;
  top: -40px;
  left: 0;
  z-index: 1;
  background-blend-mode: overlay;
}

.struninnuicard-pricingtable .card__header_medium {
  padding: 58px 0 30px;
  top: -58px;
}

.struninnuicard-pricingtable .card__header_short {
  padding: 48px 0 24px;
  top: -30px;
}

.struninnuicard-pricingtable .card__header .card__media-image {
  border-top-left-radius: var(--card-border-radius);
  border-top-right-radius: var(--card-border-radius);
}

/*------------------------------------------------------------------*/
/**
 * 5.2. Card Footer
 */
.struninnuicard-pricingtable .card__footer {
  width: 100%;
  padding: 48px 0 24px;
  background-color: var(--card-background-color);
  border: 1px solid var(--card-line-color);
  border-bottom-left-radius: var(--card-border-radius);
  border-bottom-right-radius: var(--card-border-radius);
  position: absolute;
  bottom: -30px;
  left: 0;
  z-index: 1;
  background-blend-mode: overlay;
}

.struninnuicard-pricingtable_footer-medium .card__footer {
  padding: 24px 0 0;
  bottom: -58px;
}

.struninnuicard-pricingtable_footer-large .card__footer {
  padding: 48px 32px 28px;
  bottom: -104px;
}

.struninnuicard-pricingtable .card__footer_button {
  background-color: var(--card-button-primary-background-color);
}

.struninnuicard-pricingtable .card__footer .card__button {
  position: relative;
  z-index: 2;
}

.struninnuicard-pricingtable .card__footer .card__button_merged {
  border-radius: var(--card-border-radius);
}

.struninnuicard-pricingtable .card__footer .card__media-image {
  border-bottom-left-radius: var(--card-border-radius);
  border-bottom-right-radius: var(--card-border-radius);
}

/*------------------------------------------------------------------*/
/**
 * 5.3. Card Body
 */
.struninnuicard-pricingtable .card__body {
  background-color: var(--card-background-color);
  border: 1px solid var(--card-line-color);
  border-radius: var(--card-border-radius);
  position: relative;
  z-index: 2;
}

/**
 * 5.3.1. Card Body - Children
 */
.struninnuicard-pricingtable .card__body > .tag {
  position: absolute;
  z-index: 2;
}

.struninnuicard-pricingtable .card__body .tag_top {
  top: 28px;
}

.struninnuicard-pricingtable .card__body .tag_right {
  right: -12px;
}

/**
 * 5.3.2. Card Body Content
 */
.struninnuicard-pricingtable .card__body-content {
  padding: 38px 32px;
}

.struninnuicard-pricingtable .card__body-content_compact {
  padding: 28px 32px 32px;
}

.struninnuicard-pricingtable .card__body-content_hide-overflow {
  overflow: hidden;
  position: relative;
}

.struninnuicard-pricingtable .card__body-content_hide-overflow .card__media.card__tier-image-container_big {
  position: absolute;
  top: 26px;
  right: -68px;
}

.struninnuicard-pricingtable .card__body-content_centered {
  text-align: center;
}

.struninnuicard-pricingtable .card__body-content_no-cover .card__circle {
  margin: 0 auto 16px;
}

.struninnuicard-pricingtable .card__body-content_no-cover .card__tier-image-container_medium {
  margin: 0 auto 24px;
}

.struninnuicard-pricingtable .card__body-content_top-space {
  padding-top: 90px;
}

.struninnuicard-pricingtable .card__body-content_cover {
  padding-top: 72px;
  position: relative;
}

.struninnuicard-pricingtable .card__body-content_small.card__body-content_cover {
  padding-top: 48px;
}

.struninnuicard-pricingtable .card__body-content_cover .card__circle {
  position: absolute;
  top: -62px;
  left: 50%;
  transform: translateX(-50%);
}

.struninnuicard-pricingtable .card__body-content_cover .card__tier-panel {
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
}

.struninnuicard-pricingtable .card__tier-image-container_big + .card__body-content-group {
  padding-right: 120px;
}

.struninnuicard-pricingtable .card__body-content-group + .card__button {
  margin-top: 46px;
}

/*------------------------------------------------------------------*/
/**
 * 5.4. Card Title
 */
.struninnuicard-pricingtable .card__title {
  font-size: calc((24 / var(--struninnuicard-pricingtable-font-size-base)) * 1rem);
  font-weight: 700;
}

.struninnuicard-pricingtable .card__title_medium {
  font-size: calc((28 / var(--struninnuicard-pricingtable-font-size-base)) * 1rem);
}

.struninnuicard-pricingtable .card__title_small {
  font-size: calc((20 / var(--struninnuicard-pricingtable-font-size-base)) * 1rem);
}

/**
 * 5.4.1. Card Title - Siblings
 */
.struninnuicard-pricingtable .card__title + .card__pricing {
  margin-top: 8px;
}

.struninnuicard-pricingtable .card__title + .card__summary,
.struninnuicard-pricingtable .card__pricing + .card__title,
.struninnuicard-pricingtable .card__title + .card__text {
  margin-top: 20px;
}

.struninnuicard-pricingtable .card__pricing.card__text_short + .card__button {
  margin-top: 16px;
}

/*------------------------------------------------------------------*/
/**
 * 5.5. Card Text
 */
.struninnuicard-pricingtable .card__text {
  font-size: calc((14 / var(--struninnuicard-pricingtable-font-size-base)) * 1rem);
  line-height: 1.5;
}

.struninnuicard-pricingtable .card__text_short {
  line-height: 1.1;
}

.struninnuicard-pricingtable .card__price {
  font-size: calc((24 / var(--struninnuicard-pricingtable-font-size-base)) * 1rem);
  font-weight: 700;
}

.struninnuicard-pricingtable .card__price_big {
  font-size: calc((48 / var(--struninnuicard-pricingtable-font-size-base)) * 1rem);
}

.struninnuicard-pricingtable .card__price_small {
  font-size: calc((20 / var(--struninnuicard-pricingtable-font-size-base)) * 1rem);
}

.struninnuicard-pricingtable .card__summary + .card__pricing {
  margin-top: 12px;
}

/*------------------------------------------------------------------*/
/**
 * 5.6. Card Button
 */
.struninnuicard-pricingtable .card__button {
  display: block;
  padding: 17px 12px;
  border-radius: 14px;
  font-size: calc((14 / var(--struninnuicard-pricingtable-font-size-base)) * 1rem);
  font-weight: 800;
  text-align: center;
  text-decoration: none;
}

.struninnuicard-pricingtable .card__button:hover {
  text-decoration: none;
}

.struninnuicard-pricingtable .card__button:focus,
.struninnuicard-pricingtable .card__button:focus-visible {
  text-decoration: underline;
}

.struninnuicard-pricingtable .card__button_medium {
  padding-top: 21px;
  padding-bottom: 21px;
}

.struninnuicard-pricingtable .card__button_solid {
  background-color: var(--card-button-primary-background-color);
  color: var(--card-button-primary-text-color);
}

/*------------------------------------------------------------------*/
/**
 * 5.7. Card Cover
 */
.struninnuicard-pricingtable .card__cover {
  height: 90px;
  border-top-left-radius: var(--card-border-radius);
  border-top-right-radius: var(--card-border-radius);
  position: relative;
  background-blend-mode: overlay;
}

.struninnuicard-pricingtable .card__cover_small {
  height: 80px;
}

.struninnuicard-pricingtable .card__cover .card__media-image {
  border-top-left-radius: var(--card-border-radius);
  border-top-right-radius: var(--card-border-radius);
}

/*------------------------------------------------------------------*/
/**
 * 5.8. Card Media
 */
.struninnuicard-pricingtable .card__media:not(.card__header, .card__footer) {
  position: relative;
}

.struninnuicard-pricingtable .card__media-image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  object-position: center center;
}

/*------------------------------------------------------------------*/
/**
 * 5.9. Card Tier Image
 */
.struninnuicard-pricingtable .card__tier-image-container {
  width: 80px;
  height: 80px;
}

.struninnuicard-pricingtable .card__tier-image-container_tiny {
  width: 32px;
  height: 32px;
}

.struninnuicard-pricingtable .card__tier-image-container_small {
  width: 70px;
  height: 70px;
}

.struninnuicard-pricingtable .card__tier-image-container_medium {
  width: 120px;
  height: 120px;
}

.struninnuicard-pricingtable .card__tier-image-container_big {
  width: 200px;
  height: 200px;
}

.struninnuicard-pricingtable .card__tier-image-container + .card__title {
  margin-top: 30px;
}

/*------------------------------------------------------------------*/
/**
 * 5.10. Card Circle
 */
.struninnuicard-pricingtable .card__circle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 120px;
  height: 120px;
  border: 1px solid var(--card-line-color);
  border-radius: 50%;
  background-color: var(--card-background-color);
}

.struninnuicard-pricingtable .card__tier-panel {
  width: 100%;
  width: calc(276 / 340 * 100%);
  height: 50px;
  background-color: var(--card-background-color);
  border-top-left-radius: var(--card-border-radius);
  border-top-right-radius: var(--card-border-radius);
  position: relative;
}

.struninnuicard-pricingtable .card__tier-panel .card__media {
  position: absolute;
  top: -43px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

/*------------------------------------------------------------------*/
/**
 * 5.11. Card Row
 */
.struninnuicard-pricingtable .card__row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.struninnuicard-pricingtable .card__row + .card__summary {
  margin: 24px 0;
}

/*------------------------------------------------------------------*/
/**
 * 5.12. Card Features
 */
.struninnuicard-pricingtable .card__features_border-top {
  padding-top: 18px;
  border-top: 1px solid var(--card-line-color);
  border-bottom-left-radius: var(--card-border-radius);
  border-bottom-right-radius: var(--card-border-radius);
}

.struninnuicard-pricingtable .card__features_bordered {
  border-top: 1px solid var(--card-line-color);
  border-bottom: 1px solid var(--card-line-color);
}

.struninnuicard-pricingtable .card__features_bottom-space {
  padding-bottom: 28px;
}

.struninnuicard-pricingtable .card__features_dark {
  background-color: var(--card-background-alt-color);
}

.struninnuicard-pricingtable .card__features-title {
  padding: 0 32px;
  font-size: calc((10 / var(--struninnuicard-pricingtable-font-size-base)) * 1rem);
  font-weight: 700;
}

.struninnuicard-pricingtable .card__features-title + .feature-list {
  margin-top: 6px;
}

.struninnuicard-pricingtable .card__features-title + .feature-list_steps {
  margin-top: 12px;
}

/*------------------------------------------------------------------*/
/**
 * 5.13. Card Siblings
 */
.struninnuicard-pricingtable .card__title + .card__pricing {
  margin-top: 10px;
}

.struninnuicard-pricingtable .card__pricing + .card__button,
.struninnuicard-pricingtable .card__title + .card__button,
.struninnuicard-pricingtable .card__pricing + .card__text {
  margin-top: 24px;
}

.struninnuicard-pricingtable .card__button + .card__text {
  margin-top: 34px;
}

/*------------------------------------------------------------------*/
/**
 * 6. Tag
 */
.struninnuicard-pricingtable .tag {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--card-line-color);
  border-radius: 20px;
  background-color: var(--card-background-color);
}

.struninnuicard-pricingtable .tag_solid {
  background-color: var(--tag-solid-background-color);
}

.struninnuicard-pricingtable .tag_solid .tag__icon {
  fill: var(--tag-solid-foreground-color);
}

.struninnuicard-pricingtable .tag_solid .tag__text {
  color: var(--tag-solid-foreground-color);
}

.struninnuicard-pricingtable .tag_small .tag__icon.icon_heart {
  width: 10px;
  height: 8px;
  position: relative;
  top: -1px;
}

.struninnuicard-pricingtable .tag__icon {
  fill: var(--tag-icon-color);
}

.struninnuicard-pricingtable .tag__text {
  font-size: calc((12 / var(--struninnuicard-pricingtable-font-size-base)) * 1rem);
  line-height: 1;
  font-weight: 700;
  white-space: nowrap;
}

/*------------------------------------------------------------------*/
/**
 * 7. Icon
 */
.struninnuicard-pricingtable .icon {
  fill: var(--card-icon-color);
}

.struninnuicard-pricingtable .icon_heart {
  width: 14px;
  height: 12px;
}

.struninnuicard-pricingtable .icon_tick,
.struninnuicard-pricingtable .icon_cross {
  width: 8px;
  height: 8px;
}

/*------------------------------------------------------------------*/
/**
 * 8. Feature List
 */
.struninnuicard-pricingtable .feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.struninnuicard-pricingtable .feature-list_padded {
  padding: 0 32px;
}

.struninnuicard-pricingtable .feature-list_steps .feature-list__item:nth-child(odd) {
  background-color: var(--card-background-alt-color);
}

.struninnuicard-pricingtable .feature-list_steps .feature-list__item:last-child {
  border-bottom-left-radius: var(--card-border-radius);
  border-bottom-right-radius: var(--card-border-radius);
}

.struninnuicard-pricingtable .feature-list__item {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
  padding: 13px 0;
}

.struninnuicard-pricingtable .feature-list__item .status-tag {
  flex-shrink: 0;
}

.struninnuicard-pricingtable .feature-list__item + .feature-list__item,
.struninnuicard-pricingtable .feature-list__item_bordered {
  border-top: 1px solid var(--card-line-color);
}

.struninnuicard-pricingtable .feature-list__item_space-between {
  justify-content: space-between;
}

.struninnuicard-pricingtable .feature-list__item_padded {
  padding-left: 32px;
  padding-right: 32px;
}

.struninnuicard-pricingtable .feature-list__text {
  font-size: calc((14 / var(--struninnuicard-pricingtable-font-size-base)) * 1rem);
  font-weight: 700;
}

/*------------------------------------------------------------------*/
/**
 * 9. Status Tag
 */
.struninnuicard-pricingtable .status-tag {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.struninnuicard-pricingtable .status-tag_enabled {
  --status-tag-icon-color: var(--status-tag-enabled-icon-color);
  --status-tag-background-color: var(--status-tag-enabled-background-color);
}

.struninnuicard-pricingtable .status-tag_disabled {
  --status-tag-icon-color: var(--status-tag-disabled-icon-color);
  --status-tag-background-color: var(--status-tag-disabled-background-color);
}

.struninnuicard-pricingtable .status-tag_outline,
.struninnuicard-pricingtable .status-tag_background {
  width: 18px;
  height: 18px;
  border-radius: 50%;
}

.struninnuicard-pricingtable .status-tag_outline {
  border: 2px solid var(--status-tag-icon-color);
}

.struninnuicard-pricingtable .status-tag_background {
  background-color: var(--status-tag-background-color);
}

.struninnuicard-pricingtable .status-tag_radius {
  border-radius: 6px;
}

.struninnuicard-pricingtable .status-tag__icon {
  fill: var(--status-tag-icon-color);
}