#mb-product-widget {
  /* Default colors */
  --mb-blue-extreme-light: #f5fbff;
  --mb-blue-light: #e2f3ff;
  --mb-blue: #3c7dc0;
  --mb-blue-dark: #306397;

  --mb-red: #f04438;
  --mb-red-light: #ffefee;

  --mb-green-light: #e8f7eb;
  --mb-green: #3cc059;
  --mb-green-dark: #1a9335;

  --mb-purple: #bf7df2;

  --mb-white: #ffffff;
  --mb-black: #1b2128;
  --mb-dark-grey: #112841;
  --mb-grey: rgba(20, 33, 46, 0.62);

  /* Default text */
  --mb-text-color: var(--mb-black);
  --mb-text-color-grey: var(--mb-grey);
  --mb-font-size-xxs: 0.5rem;
  --mb-font-size-xs: 0.75rem;
  --mb-font-size-sm: 0.875rem; /** @defaults 14px */
  --mb-font-size: 1rem;
  --mb-font-size-md: 1.25rem;
  --mb-font-size-lg: 1.5rem;
  --mb-font-size-xl: 1.75rem;
  --mb-font-size-xxl: 2rem;
  --mb-line-height: 1.5rem;

  /* Default transitions */
  --mb-transition-duration-short: 150ms;
  --mb-transition-duration-medium: 350ms;
  --mb-transition-duration-long: 500ms;

  /* Default margins */
  --mb-spacing-xxs: 0.5rem;
  --mb-spacing-xs: 0.75rem;
  --mb-spacing-sm: 0.875rem;
  --mb-spacing-md: 1rem;
  --mb-spacing-lg: 1.5rem;
  --mb-spacing-xl: 2rem;

  /* Default radius */
  --mb-radius-sm: 0.5rem;
  --mb-radius-md: 0.75rem;
  --mb-radius-lg: 1rem;

  --mb-screen-lg: 1024px;
  --mb-screen-md: 768px;
  --mb-screen-sm: 480px;

  font-size: var(--mb-font-size-sm);
}

/* RESET SOME STYLES */
.mb-product-widget h1,
.mb-product-widget h2,
.mb-product-widget h3,
.mb-product-widget h4,
.mb-product-widget h5,
.mb-product-widget h6 {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  color: var(--mb-black);
  line-height: var(--mb-line-height);
  margin-block: 0;
}

.mb-product-widget h6 {
  font-size: var(--mb-font-size-md);
}

.mb-button,
a.mb-button {
  display: inline-block;
  text-align: center;
  padding: var(--mb-spacing-xxs) var(--mb-spacing-md);
  background-color: var(--mb-blue);
  transition: background-color border var(--mb-transition-duration-short)
    ease-in-out;
  color: var(--mb-white);
  border-radius: var(--mb-radius-sm);
  border: solid 1px var(--mb-blue);
  font-weight: 500;
  text-decoration: none;
}

.mb-button:hover {
  background-color: var(--mb-blue-dark);
  border-color: var(--mb-blue-dark);
  transition-duration: var(--mb-transition-duration-medium);
}

.mb-button--full-width {
  width: 100%;
}

.mb-button--outline {
  background-color: var(--mb-blue-light);
  color: var(--mb-blue);
}

.mb-button--outline {
  border: solid 1px var(--mb-blue);
  color: var(--mb-white);
}

.mb-button--grey {
  background-color: var(--mb-dark-grey);
  border-color: var(--mb-dark-grey);
  color: var(--mb-white);
}

.mb-button--grey:hover {
  background-color: var(--mb-grey);
  border-color: var(--mb-grey);
}

.mb-button--grey.mb-button--outline {
  background-color: var(--mb-white);
  border-color: var(--mb-dark-grey);
  color: var(--mb-dark-grey);
}

.mb-button--grey.mb-button--outline:hover {
  border-color: var(--mb-blue);
  color: var(--mb-blue);
}

.mb-button.mb-button--green {
  background-color: var(--mb-green-dark);
  border-color: var(--mb-green-dark);
}
.mb-button.mb-button--green-selected,
.mb-button.mb-button--green:hover {
  background-color: var(--mb-green-dark);
  border-color: var(--mb-green-dark);
}

.mb-button.mb-button--green.mb-button--outline {
  background-color: var(--mb-green-light);
  border-color: var(--mb-green-dark);
  color: var(--mb-green-dark);
}

.mb-button--green.mb-button--outline:hover {
  background-color: var(--mb-green-dark);
  color: var(--mb-white);
}

.mb-button--disabled,
a.mb-button--disabled {
  pointer-events: none;
  opacity: 0.5;
}

/* Create default card component */
.mb-card {
  background-color: var(--mb-white);
  border: 1px solid var(--mb-grey);
  border-radius: var(--mb-radius-lg);
  padding: var(--mb-spacing-md);
}

.mb-card .mb-card__heading {
  font-size: var(--mb-font-size);
  line-height: var(--mb-line-height);
  margin-block: 0;
}

.mb-card .mb-card__intro {
  font-weight: 400;
}

.mb-product-widget .mb-heading--green {
  color: var(--mb-green);
}

.mb-product-widget .mb-heading--blue {
  color: var(--mb-blue);
}

.mb-feature {
  display: flex;
}

.mb-feature__icon {
  display: flex;
  align-items: baseline;
  justify-content: center;
  width: var(--mb-spacing-lg);
  margin-block-start: 5px; /* Custom height to position the icon correctly */
  margin-inline-end: var(--mb-spacing-xs);
  flex-shrink: 0;
}

.mb-feature__icon svg {
  stroke: currentColor;
}

.mb-feature__text {
  flex-grow: 1;
  font-size: var(--mb-font-size-sm);
  display: inline-flex;
  align-items: center;
}

.mb-feature__text .mb-badge {
  margin-inline-start: var(--mb-spacing-xxs);
}

.mb-feature--green {
  color: var(--mb-green);
}

.mb-feature + .mb-feature {
  margin-block-start: var(--mb-spacing-xs);
}

/* STYLES FOR THE COMPONENTS */
.default-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: var(--mb-spacing-md);
}

@media screen and (max-width: 1024px) {
  .default-grid {
    grid-template-columns: 100%;
  }
}

.mb-plans__container {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  grid-template-rows: max-content max-content max-content max-content max-content;
  margin-block-end: var(--mb-spacing-xl);
}

@media screen and (max-width: 1024px) {
  .mb-plans__container {
    grid-template-rows: none;
  }
}

.mb-plan {
  display: grid;
  grid-row: 1 / -1;
  grid-template-rows: subgrid;
  margin-block-end: var(--mb-spacing-lg);
}

@media screen and (max-width: 1024px) {
  .mb-plan {
    grid-row: auto;
    grid-template-rows: max-content max-content max-content max-content max-content;
  }
}

.mb-plan__card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 2 / -1;
}

.mb-plan__card--deal {
  border-color: var(--mb-blue);
  border-width: 2px;
  border-radius: 0 0 var(--mb-radius-lg) var(--mb-radius-lg);
}

.mb-plan__deal {
  background-color: var(--mb-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--mb-spacing-md);
  padding-block: var(--mb-spacing-xxs);
  border-radius: var(--mb-radius-lg) var(--mb-radius-lg) 0 0;
  color: var(--mb-white);
  font-weight: 500;
}

.mb-plan__deal--yearly,
.mb-plan__deal--monthly {
  display: none;
}

#mb-product-widget[data-commitment="Yearly"] .mb-plan__deal--yearly {
  display: inline-block;
}

#mb-product-widget[data-commitment="Monthly"] .mb-plan__deal--monthly {
  display: inline-block;
}

.mb-plan--deal-green .mb-plan__deal {
  background-color: var(--mb-green);
}

.mb-plan--deal-green .mb-plan__card--deal {
  border-color: var(--mb-green);
}

.mb-plan--deal-red .mb-plan__deal {
  background-color: var(--mb-red);
}

.mb-plan--deal-red .mb-plan__card--deal {
  border-color: var(--mb-red);
}

.mb-plan .mb-card__intro {
  margin-block: var(--mb-spacing-sm);
}

.mb-plan-pricing {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-block-start: auto;
  margin-block-end: var(--mb-spacing-md);
}

.mb-plan-pricing__container .mb-plan-pricing__wrapper {
  display: flex;
  align-items: center;
  margin-block-end: calc(var(--mb-spacing-sm) / 2);
}

.mb-plan-pricing__container .mb-plan-pricing__original-price {
  display: none;
  color: var(--mb-text-color-grey);
  text-decoration: line-through;
}

.mb-plan-pricing__container .mb-plan-pricing__coupon-badge {
  display: none;
  margin-inline-start: var(--mb-spacing-sm);
}

.mb-plan-pricing[data-coupon-available="true"] .mb-plan-pricing__price {
  color: var(--mb-green);
}

.mb-plan-pricing[data-coupon-available="true"] .mb-plan-pricing__original-price,
.mb-plan-pricing[data-coupon-available="true"] .mb-plan-pricing__coupon-badge {
  display: inline-flex;
}

.mb-plan-pricing .mb-plan-pricing__price {
  font-weight: 700;
  font-size: var(--mb-font-size-xl);
  line-height: 1;
}

.mb-plan .mb-plan-pricing__payment-period {
  font-size: 0.8rem;
  color: var(--mb-grey);
}

.mb-plan-pricing .mb-plan-pricing__payment-period {
  display: none;
}

#mb-product-widget[data-paymentSchedule="Yearly"]
  .mb-plan-pricing__payment-period[data-paymentSchedule="yearly"] {
  display: flex;
}

#mb-product-widget[data-paymentSchedule="Monthly"]
  .mb-plan-pricing__payment-period[data-paymentSchedule="monthly"] {
  display: flex;
}

.mb-plan .mb-plan__cta {
  margin-block-end: var(--mb-spacing-md);
}

.mb-plan-button {
  margin-block-end: var(--mb-spacing-xs);
}

.mb-plan-button .mb-plan-button__text {
  display: none;
}

.mb-plan-button .mb-plan-button__text--default {
  display: inline-block;
}

.mb-plan-button[data-custom-advice="true"] .mb-plan-button__text--default,
.mb-plan-button.mb-button--disabled .mb-plan-button__text--default {
  display: none;
}

.mb-plan-button[data-custom-advice="true"] .mb-plan-button__text--custom-advice,
.mb-plan-button.mb-button--disabled .mb-plan-button__text--not-available {
  display: inline-block;
}

.mb-plan__features .mb-feature:first-child {
  font-weight: 700;
}

.mb-selected-addon {
  background-color: var(--mb-green-light);
  border-radius: var(--mb-radius-sm);
  padding: var(--mb-spacing-xxs) var(--mb-spacing-xs);
  color: var(--mb-green-dark);
  display: none;
  align-items: center;
  margin-block-end: var(--mb-spacing-xxs);
}

.mb-selected-addon .mb-selected-addon__head {
  flex-grow: 1;
}

.mb-selected-addon .mb-selected-addon__head h6 {
  margin-block: 0;
  color: currentColor;
  font-size: var(--mb-font-size-xs);
  font-weight: 600;
}

.mb-selected-addon .mb-addon__remove svg path {
  stroke: var(--mb-green-dark);
}

#mb-product-widget[data-salescrm="1"]
  .mb-selected-addon[data-addon="salescrm-1"],
#mb-product-widget[data-salescrm="2"]
  .mb-selected-addon[data-addon="salescrm-2"],
#mb-product-widget[data-zapier="true"] .mb-selected-addon[data-addon="zapier"],
#mb-product-widget:not([data-additional_users="0"])
  .mb-selected-addon[data-addon="additional_users"] {
  display: flex;
}

.mb-plan-warnings .mb-plan-warning {
  display: none;
  text-align: center;
  font-size: var(--mb-font-size-xs);
}

.mb-plan[data-contacts-not-available="true"]
  .mb-plan-warning[data-warning="contacts"],
#mb-product-widget[data-salescrm="1"]
  .mb-plan[data-salescrm-not-available="true"]
  .mb-plan-warning[data-warning="salescrm"],
#mb-product-widget[data-salescrm="2"]
  .mb-plan[data-salescrm-not-available="true"]
  .mb-plan-warning[data-warning="salescrm"],
.mb-plan[data-seats-not-available="true"]
  .mb-plan-warning[data-warning="additional-users"] {
  display: inline-block;
}

.mb-plan[data-contacts-not-available="true"] .mb-features {
  opacity: 0.5;
}

/* Button to comparison overview */
.mb-cta-comparison {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-block-end: var(--mb-spacing-xl);
}

/* Styles for the add-ons */
.mb-addons {
  grid-template-rows: max-content max-content max-content;
  margin-block-end: calc(2 * var(--mb-spacing-xl));
}

@media screen and (max-width: 1024px) {
  #mb-addons {
    display: none;
  }
}

.mb-addon {
  display: grid;
  grid-row: 1 / -1;
  grid-template-rows: subgrid;
}

.mb-addon .mb-card__header {
  display: flex;
}

.mb-addons__header {
  margin-block: calc(3 * var(--mb-spacing-xl)) var(--mb-spacing-lg);
}

.mb-addons__header h3 {
  margin-block-end: var(--mb-spacing-xs);
}

.mb-addon .mb-addon__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--mb-green-light);
  border-radius: var(--mb-radius-sm);
  margin-inline-end: var(--mb-spacing-sm);
  flex-shrink: 0;
}

.mb-add .mb-card__header {
  flex-grow: 1;
}

.mb-addon .mb-card__intro {
  margin-block: var(--mb-spacing-xxs) var(--mb-spacing-md);
}

.mb-addon__action {
  display: flex;
}

.mb-addon__remove {
  margin-inline-start: var(--mb-spacing-xs);
  align-items: center;
  justify-content: center;
}

.mb-addon__action .mb-addon__remove {
  padding: 0 var(--mb-spacing-xs);
}

.mb-addon__action .mb-addon__remove svg path {
  stroke: currentColor;
  transition: opacity 150ms ease-in-out;
}

.mb-addon__remove:hover svg path {
  opacity: 0.75;
  transition-duration: 250ms;
}

.mb-addon__action .mb-addon-button__text--selected-zero,
.mb-addon__action .mb-addon-button__text--selected-changed,
.mb-addon__action .mb-addon-button__text--selected,
.mb-addon__action .mb-addon__remove {
  display: none;
}

#mb-product-widget[data-salescrm="1"]
  .mb-addon__action[data-slug="salescrm"]
  .mb-addon-button__text--selected,
#mb-product-widget[data-salescrm="1"]
  .mb-addon__action[data-slug="salescrm"]
  .mb-addon__remove,
#mb-product-widget[data-salescrm="2"]
  .mb-addon__action[data-slug="salescrm"]
  .mb-addon-button__text--selected,
#mb-product-widget[data-salescrm="2"]
  .mb-addon__action[data-slug="salescrm"]
  .mb-addon__remove,
#mb-product-widget[data-salescrm="1"]
  .mb-addon__action[data-slug="salescrm-1"]
  .mb-addon-button__text--selected,
#mb-product-widget[data-salescrm="1"]
  .mb-addon__action[data-slug="salescrm-1"]
  .mb-addon__remove,
#mb-product-widget[data-salescrm="2"]
  .mb-addon__action[data-slug="salescrm-2"]
  .mb-addon-button__text--selected,
#mb-product-widget[data-salescrm="2"]
  .mb-addon__action[data-slug="salescrm-2"]
  .mb-addon__remove,
#mb-product-widget[data-zapier="true"]
  .mb-addon__action[data-slug="zapier"]
  .mb-addon-button__text--selected,
#mb-product-widget[data-zapier="true"]
  .mb-addon__action[data-slug="zapier"]
  .mb-addon__remove,
#mb-product-widget:not([data-additional_users="0"])
  .mb-addon__action[data-slug="additional_users"]
  .mb-addon-button__text--selected,
#mb-product-widget[data-additional_users="1"]
  .mb-addon__action[data-slug="additional_users"]
  .mb-addon-button__text--selected-one,
#mb-product-widget:not([data-additional_users="0"])
  .mb-addon__action[data-slug="additional_users"]
  .mb-addon__remove {
  display: inline-flex;
}

#mb-product-widget[data-salescrm="1"]
  .mb-addon__action[data-slug="salescrm"]
  .mb-addon-button__text,
#mb-product-widget[data-salescrm="2"]
  .mb-addon__action[data-slug="salescrm"]
  .mb-addon-button__text,
#mb-product-widget[data-salescrm="1"]
  .mb-addon__action[data-slug="salescrm-1"]
  .mb-addon-button__text,
#mb-product-widget[data-salescrm="2"]
  .mb-addon__action[data-slug="salescrm-2"]
  .mb-addon-button__text,
#mb-product-widget[data-zapier="true"]
  .mb-addon__action[data-slug="zapier"]
  .mb-addon-button__text,
#mb-product-widget:not([data-additional_users="0"])
  .mb-addon__action[data-slug="additional_users"]
  .mb-addon-button__text {
  display: none;
}

#mb-product-widget[data-salescrm="1"]
  .mb-addon__action[data-slug="salescrm"]
  .mb-addon-button,
#mb-product-widget[data-salescrm="2"]
  .mb-addon__action[data-slug="salescrm"]
  .mb-addon-button,
#mb-product-widget[data-zapier="true"]
  .mb-addon__action[data-slug="zapier"]
  .mb-addon-button,
#mb-product-widget[data-salescrm="1"]
  .mb-addon__action[data-slug="salescrm-1"]
  .mb-addon__add-button,
#mb-product-widget[data-salescrm="2"]
  .mb-addon__action[data-slug="salescrm-2"]
  .mb-addon__add-button,
#mb-product-widget[data-zapier="true"]
  .mb-addon__action[data-slug="zapier"]
  .mb-addon__add-button,
#mb-product-widget:not([data-additional_users="0"])
  .mb-addon__action[data-slug="additional_users"]
  .mb-addon-button {
  background-color: var(--mb-green);
  border-color: var(--mb-green);
  color: var(--mb-white);
}

.mb-counter {
  display: flex;
  width: 100%;
  margin-block-end: var(--mb-spacing-lg);
}

.mb-counter .mb-counter__count-container {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.mb-counter .mb-counter__count {
  font-weight: 700;
  font-size: var(--mb-font-size-md);
  line-height: var(--mb-font-size-sm);
  margin-block-end: calc(var(--mb-spacing-xxs) / 2);
}

.mb-counter .mb-button.mb-counter-button {
  background-color: var(--mb-white);
  width: 44px;
  height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mb-counter .mb-button.mb-counter-button:hover {
  color: var(--mb-green-dark);
}

.mb-counter .mb-counter__text {
  text-align: center;
  margin-inline: var(--mb-spacing-xxs);
}

.mb-counter:not([data-count="1"]) .mb-counter__text,
.mb-counter[data-count="1"] .mb-counter__text--one {
  display: inline-block;
}

.mb-counter:not([data-count="1"]) .mb-counter__text--one,
.mb-counter[data-count="1"] .mb-counter__text {
  display: none;
}

#mb-product-widget:not([data-additional_users="0"])
  .mb-counter[data-count="0"]
  + .mb-addon__action
  .mb-addon-button__text--selected {
  display: none;
}

#mb-product-widget:not([data-additional_users="0"])
  .mb-counter[data-count="0"]
  + .mb-addon__action
  .mb-addon-button__text--selected-zero {
  display: inline-flex;
}

.mb-counter[data-changed="true"]
  + .mb-addon__action
  .mb-addon-button__text--selected {
  display: none !important;
}

#mb-product-widget:not([data-additional_users="0"])
  .mb-counter[data-changed="true"]:not([data-count="0"])
  + .mb-addon__action
  .mb-addon-button__text--selected-changed {
  display: inline-flex;
}

.mb-modal {
  visibility: hidden;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: -1;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  transition: background-color 150ms ease-in-out;
}

.mb-modal.mb-modal--open {
  visibility: visible;
  display: flex;
  z-index: 99;
  opacity: 1;
  background-color: var(--mb-grey);
  transition-duration: 350ms;
}

.mb-modal.mb-modal--closing {
  background-color: transparent;
  transition-duration: 150ms;
}

.mb-modal .mb-modal__container {
  width: 100%;
  max-width: 724px;
  height: auto;
  background-color: var(--mb-white);
  transform: translateY(-1%);
  transition: transform 150ms ease-in-out, opacity 150ms ease-in-out;
  opacity: 0;
  border-radius: var(--mb-radius-sm);
  padding: var(--mb-spacing-xl);
}

.mb-modal.mb-modal--open .mb-modal__container {
  transform: translateY(0);
  transition-duration: 350ms;
  opacity: 1;
}

.mb-modal.mb-modal--closing .mb-modal__container {
  transform: translateY(-1%);
  transition-duration: 150ms;
  opacity: 0;
}

.mb-modal .mb-modal__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-block-end: var(--mb-spacing-sm);
}

.mb-addon-modal__head {
  max-width: 410px;
  margin-block-end: var(--mb-spacing-lg);
}

.mb-addon-modal__head h3 {
  font-size: var(--mb-font-size-md);
  line-height: var(--mb-font-size-xl);
  margin-block-end: var(--mb-spacing-md);
}

.mb-addon-modal__options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: min-content 1fr min-content min-content;
  grid-column-gap: var(--mb-spacing-lg);
}

.mb-addon__side {
  grid-row: 1 / -1;
  padding: var(--mb-spacing-lg);
}

.mb-addon-modal__option {
  background-color: var(--mb-green-light);
  padding: var(--mb-spacing-lg);
  border-radius: var(--mb-spacing-sm);
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 1 / -1;
}

.mb-addon-modal__option-head {
  margin-block-end: var(--mb-spacing-lg);
}

.mb-addon-modal h4 {
  color: var(--mb-green);
  font-size: var(--mb-font-size-sm);
  font-weight: 700;
  margin-block-start: 0;
  margin-block-end: var(--mb-spacing-lg);
}

.mb-addon-modal__option-features {
  margin-block-end: var(--mb-spacing-lg);
}

.mb-addon-modal__option-pricing {
  margin-block: var(--mb-spacing-lg);
}

.addon-pricing .addon-pricing__price {
  font-size: var(--mb-font-size-md);
  font-weight: 700;
}

.addon-pricing .addon-pricing__payment {
  font-size: var(--mb-font-size-xs);
  color: var(--mb-text-color-grey);
}

.mb-tag {
  padding: 4px 6px;
  border-radius: var(--mb-spacing-xxs);
  background-color: var(--mb-blue);
  font-size: var(--mb-font-size-xs);
}

.mb-tag--green {
  background-color: var(--mb-green);
  color: var(--mb-white);
}

.mb-plan-options {
  margin-block-end: calc(2 * var(--mb-spacing-xl));
}

@media screen and (max-width: 600px) {
  .mb-plan-options {
    margin-block-end: var(--mb-spacing-xl);
  }

  .mb-plan-options .mb-tooltip .mb-tooltip__content {
    right: 0;
    left: unset;
    transform: translateX(2.5%);
  }

  .mb-plan-options .mb-tooltip .mb-tooltip__content::after {
    left: 90%;
    right: 10%;
  }

  .mb-plan-options
    .mb-tooltip
    .mb-tooltip__target:hover
    + .mb-tooltip__content {
    transform: translateY(0) translateX(2.5%);
  }
}

.mb-plan-options .mb-plan-options__container {
  display: flex;
  justify-content: center;
  column-gap: var(--mb-spacing-lg);
}

.mb-plan-options .mb-select {
  width: 250px;
}

@media screen and (max-width: 600px) {
  .mb-plan-options .mb-plan-options__container {
    flex-direction: column;
  }

  .mb-plan-options .mb-select {
    width: 100%;
    margin-block-end: var(--mb-spacing-lg);
  }

  .mb-plan-options .mb-select:last-child {
    margin-block-end: 0;
  }
}

.mb-plan-options__cta {
  width: 100%;
  text-align: center;
  font-size: var(--mb-font-size-sm);
  color: var(--mb-text-color-grey);
  margin-block-start: var(--mb-spacing-md);
}

.mb-plan-options__cta strong {
  font-weight: 700;
  color: var(--mb-green);
}

.mb-emphasis {
  font-weight: 700;
}

.mb-emphasis--green {
  color: var(--mb-green);
}

/* SELECT */
.mb-select {
  display: inline-block;
  width: 100%;
  max-width: 100%;
}

.mb-select__container {
  position: relative;
}

.mb-select__label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-block-end: var(--mb-spacing-xxs);
}

.mb-select__label label {
  font-weight: 600;
  font-size: var(--mb-font-size-sm);
  line-height: var(--mb-line-height);
}

button.mb-select__button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  cursor: pointer;
  background-color: var(--mb-white);
  border: solid 1px var(--mb-black);
  border-radius: var(--mb-radius-sm);
  color: var(--mb-black);
  font-size: var(--mb-font-size-sm);
  padding: calc(2 * var(--mb-spacing-xxs));
}

button.mb-select__button:hover {
  background-color: var(--mb-blue-light);
}

button.mb-select__button[disabled] {
  opacity: 0.5;
}
button.mb-select__button[disabled]:hover {
  background-color: var(--mb-white);
  cursor: auto;
}

.mb-select--small button.mb-select__button {
  padding: var(--mb-spacing-xxs) var(--mb-spacing-xs);
}

.mb-select__button .mb-select__option:hover {
  background-color: transparent;
}

.mb-select__button .mb-select__option-icon {
  display: none;
}

.mb-select__button:not(:has(.mb-select__option-icon--selected))
  .mb-select__option-icon,
.mb-select__button .mb-select__option-icon--selected {
  display: inline-flex;
}

.mb-select__button .mb-select__option-value {
  margin-inline-end: auto;
}

.mb-select__arrow {
  position: absolute;
  right: var(--mb-spacing-md);
  top: 0;
  display: flex;
  height: 100%;
  align-items: center;
  transition: transform var(--mb-transition-duration-short) ease-in-out;
  pointer-events: none;
}

.mb-select__button[aria-expanded="true"] ~ .mb-select__arrow {
  transform: rotate(180deg);
}

.mb-select__dropdown {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  border: 1px solid var(--mb-black);
  border-radius: var(--mb-radius-sm);
  background-color: var(--mb-white);
  list-style: none;
  padding: var(--mb-spacing-xxs);
  margin: 0;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  max-height: 100vh;
  overflow-y: auto;
  z-index: 5;
}

.mb-select--small .mb-select__dropdown {
  margin-block-start: -4px;
  padding: 4px;
}

.mb-select__button[aria-expanded="true"] ~ .mb-select__dropdown {
  display: block;
}

.mb-select__dropdown::-webkit-scrollbar {
  width: 7px;
}
.mb-select__dropdown::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 25px;
}

.mb-select__dropdown::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 25px;
}
.mb-select__dropdown li {
  cursor: pointer;
}

.mb-select__option {
  display: flex;
  align-items: center;
  padding: var(--mb-spacing-xxs);
  width: 100%;
  border-radius: 4px;
}

.mb-select__option + .mb-select__option {
  margin-block-start: 2px;
}

.mb-select__option .mb-select__option-icon--selected {
  display: none;
}

.mb-select__option:hover,
.mb-select__option:focus,
.mb-select__option--selected {
  background-color: var(--mb-blue-light);
}

.mb-select[data-icon-per-option="false"]
  .mb-select__option--selected
  .mb-select__option-icon {
  display: none;
}

.mb-select[data-icon-per-option="false"]
  .mb-select__option--selected
  .mb-select__option-icon--selected {
  display: inline-flex;
}

.mb-select__option-icon {
  display: inline-flex;
  margin-inline-end: var(--mb-spacing-xs);
}

#comparison {
  background-color: var(--mb-white);
  padding-block-start: calc(2 * var(--mb-spacing-xl));
  position: relative;
}

#comparison::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  background-color: var(--mb-white);
  z-index: -1;
}

/* Comparison grid */
.mb-comparison {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 20%);
  max-height: 75vh;
  overflow: hidden;
  padding-block: var(--mb-spacing-lg);
}
@media screen and (max-width: 1024px) {
  #comparison {
    margin-inline: -16px;
  }

  #comparison h2,
  .mb-comparison__group-header {
    margin-inline: 10px;
  }

  .mb-comparison {
    grid-template-columns: repeat(4, 25%);
  }

  .mb-comparison .mb-comparison__plan-info .mb-badge,
  .mb-comparison .mb-plan-pricing,
  .mb-comparison .mb-comparison__cell--header:first-of-type {
    display: none;
  }
}

.mb-comparison::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 100%
  );
  pointer-events: none; /* Prevents interaction blocking */
  z-index: 1; /* Ensures it's above the content */
}

.mb-comparison__action {
  width: 100%;
  padding: var(--mb-spacing-lg);
  padding-block-end: calc(3 * var(--mb-spacing-xl));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.mb-comparison--open {
  max-height: none;
  overflow: unset;
}

.mb-comparison--open + .mb-comparison__action,
.mb-comparison--open::after {
  display: none;
}

.mb-comparison__header,
.mb-comparison__body,
.mb-comparison__group,
.mb-comparison__group-list,
.mb-comparison__row {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
}

.mb-comparison__group {
  margin-block-start: var(--mb-spacing-xl);
}

.mb-comparison::before {
  content: "";
  grid-column: 1 / -1;
  height: 1px;
  margin-bottom: -1px;
  position: relative;
  background-color: white;
  z-index: 2;
}

.mb-comparison__header {
  margin-block-end: var(--mb-spacing-sm);
  border-block-start: solid 1px #495c6e33;
}

.mb-comparison--open .mb-comparison__header {
  position: sticky;
  top: 84px;
  bottom: 200px;
  background-color: var(--mb-white);
  z-index: 1;
}

.mb-comparison__plan-info {
  display: flex;
  align-items: center;
  margin-block-end: var(--mb-spacing-sm);
}

.mb-comparison__plan-info .mb-badge {
  margin-inline-start: var(--mb-spacing-xs);
  font-size: var(--mb-font-size-xs);
}

.admin-bar .mb-comparison__header {
  top: 100px;
}

.mb-comparison__group[data-conditional] {
  display: none;
}

#mb-product-widget[data-salescrm="1"]
  .mb-comparison__group[data-conditional*="crm1"],
#mb-product-widget[data-salescrm="2"]
  .mb-comparison__group[data-conditional*="crm2"],
#mb-product-widget[data-zapier="true"]
  .mb-comparison__group[data-conditional*="zapier"],
#mb-product-widget:not([data-additional_users="0"])
  .mb-comparison__group[data-conditional*="additional_users"] {
  display: grid;
}

.mb-comparison__group-list {
  border-radius: var(--mb-radius-md);
}

.mb-comparison__group--green .mb-comparison__group-list {
  background-color: var(--mb-green-light);
}

.mb-comparison__group--blue .mb-comparison__group-list {
  background-color: var(--mb-blue-light);
}

.mb-comparison__group-header {
  grid-column: 1 / -1;
  padding-block: var(--mb-spacing-md);
}

.mb-comparison__cell--header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.mb-comparison__cell--header .mb-comparison__cell-info {
  opacity: 0.62;
}

.mb-comparison__cell--header .mb-plan-button {
  margin-block-end: 0;
  margin-block-start: var(--mb-spacing-xs);
}

.mb-comparison__cell--header .mb-plan-pricing {
  margin-block: 0;
}

.mb-comparison__cell--header .mb-plan-pricing__container {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}

.mb-comparison__cell--header .mb-plan-pricing__price {
  font-size: var(--mb-font-size-lg);
}

.mb-comparison__cell--header
  .mb-plan-pricing[data-coupon-available="true"]
  .mb-plan-pricing__container {
  align-items: center;
}

.mb-comparison__cell--header .mb-plan-pricing__original-price {
  margin-inline-end: var(--mb-spacing-xxs);
}

.mb-comparison__cell--header .mb-plan-pricing__payment-period {
  margin-inline-start: var(--mb-spacing-xxs);
  opacity: 0.62;
}

.mb-comparison__cell--header
  .mb-plan-pricing:not([data-coupon-available="true"])
  .mb-plan-pricing__payment-period {
  margin-block-end: 5px;
}

.mb-comparison__group-title {
  line-height: 2rem;
}

.mb-comparison__group-title-container {
  display: flex;
  align-items: center;
}

.mb-comparison__cell {
  padding: var(--mb-spacing-md);
  border-inline-end: 1px solid #495c6e33;
  border-block-end: 1px solid #495c6e33;
}

.mb-comparison__row:last-child .mb-comparison__cell {
  border-block-end: none;
}

.mb-comparison__cell:last-child {
  border-inline-end: none;
}

.mb-comparison__body .mb-comparison__cell {
  text-align: center;
}

.mb-comparison__body .mb-comparison__cell--feature {
  text-align: left;
}

@media screen and (max-width: 1024px) {
  .mb-comparison__cell {
    padding: var(--mb-spacing-xxs);
    font-size: var(--mb-font-size-xs);
  }

  .mb-comparison__body .mb-comparison__cell--feature {
    grid-column: 1 / -1;
    background-color: var(--mb-blue-extreme-light);
  }

  .mb-comparison__row:last-child .mb-comparison__cell {
    border-block-end: 1px solid #495c6e33;
  }

  .mb-comparison__cell:last-child {
    border-inline-end: 1px solid #495c6e33;
  }
}

@media screen and (max-width: 700px) {
  .mb-comparison__cell h6 {
    font-size: var(--mb-font-size-xs);
  }

  .mb-comparison__cell--header .mb-plan-button {
    font-size: var(--mb-font-size-xs);
    padding-inline: var(--mb-spacing-xxs);
    padding-block: var(--mb-spacing-xxs);
    margin-block-start: 0;
    height: 100%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }

  .mb-comparison__cell--header .mb-plan-button.mb-button--disabled {
    font-size: calc(0.8 * var(--mb-font-size-xs));
  }
}

.mb-comparison__body .mb-comparison__cell--feature .mb-tooltip__content {
  left: 50%;
  margin-left: -50%;
  transform: translateY(-5px);
  width: 100%;
}

.mb-comparison__body .mb-comparison__cell--feature .mb-tooltip__content:hover,
.mb-comparison__body
  .mb-comparison__cell--feature
  .mb-tooltip--enabled
  .mb-tooltip__target:hover
  + .mb-tooltip__content {
  transform: translateY(0);
}

.mb-comparison__body
  .mb-comparison__cell--feature
  .mb-tooltip
  .mb-tooltip__content::after {
  left: 50px;
  right: auto;
  margin-left: -5px;
}

.mb-comparison__tooltip {
  display: block;
}

.mb-tooltip {
  position: relative;
  display: block;
}

.mb-tooltip--enabled .mb-tooltip__target {
  display: inline-block;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: #87939f;
}

.mb-tooltip--enabled .mb-tooltip__target--default {
  border-block-end: none;
}

/* Tooltip text */
.mb-tooltip .mb-tooltip__content {
  visibility: hidden;
  width: max-content;
  max-width: 320px;
  background-color: var(--mb-dark-grey);
  color: var(--mb-white);
  text-align: left;
  padding: var(--mb-spacing-xs);
  border-radius: var(--mb-radius-sm);
  position: absolute;
  z-index: 1;
  bottom: calc(100% + 5px);
  left: 50%;
  right: 50%;
  transform: translateY(-5px) translateX(-50%);
  opacity: 0;
  transition: transform 150ms ease-in-out, opacity 150ms ease-in-out,
    visibility 150ms ease-in-out;
}

.mb-tooltip .mb-tooltip__content::after {
  content: "";
  position: absolute;
  top: 100%; /* At the bottom of the tooltip */
  left: 50%;
  right: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: var(--mb-dark-grey) transparent transparent transparent;
}

.mb-tooltip--enabled .mb-tooltip__target:hover {
  cursor: pointer;
}

.mb-tooltip__content:hover,
.mb-tooltip--enabled .mb-tooltip__target:hover + .mb-tooltip__content {
  visibility: visible;
  transform: translateY(0) translateX(-50%);
  opacity: 1;
  transition-duration: 250ms;
}

.mb-badge {
  display: inline-flex;
  align-items: center;
  background-color: var(--mb-green);
  color: var(--mb-white);
  border-radius: var(--mb-radius-sm);
  padding: 4px 8px;
  font-size: var(--font-size-xs);
}

.mb-badge--blue {
  background-color: var(--mb-blue);
}

.mb-badge--purple {
  background-color: var(--mb-purple);
}

.mb-badge--red {
  background-color: var(--mb-red);
}

.mb-badge--light-blue {
  background-color: var(--mb-blue-light);
  color: var(--mb-blue);
}

.mb-badge--sm {
  font-size: var(--mb-font-size-xs);
}

.mb-badge--lg {
  font-size: var(--mb-font-size-md);
}

.mb-badge svg {
  margin-inline-start: var(--mb-spacing-xxs);
}

.mb-badge.mb-badge--icon-only svg {
  margin-inline-start: 0;
}

.mb-comparison__group-title-container .mb-badge {
  margin-inline-start: var(--mb-spacing-sm);
}

@media screen and (max-width: 1024px) {
  .mb-show--lg {
    display: none;
  }
}

@media screen and (min-width: 1025px) {
  .mb-hide--lg {
    display: none;
  }
}