.pricing-toggle-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 40px 0 40px;
}

.toggle-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
}

.toggle-switch {
  position: relative;
  width: 37.5px;
  height: 21px;
  align-self: center;
  margin-bottom: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #ccc;
  border-radius: 34px;
  transition: 0.3s;
  overflow: hidden;
}

.slider::before {
  content: "";
  position: absolute;
  height: 16.5px; width: 16.5px;
  left: 2.25px; bottom: 2.25px;
  background-color: white;
  border-radius: 50%;
  transition: 0.3s;
}

input:checked + .slider {
  background-color: #5fac5a;
}

input:checked + .slider::before {
  transform: translateX(16.5px);
}

#savings-block {
  display: inline-block;
  width: max-content;
  position: relative;
  margin-left: 2px;
  padding: 4px 6px;
  background: #5fac5a;
  border-radius: 5px;
  box-shadow: 0 1px 0px 0px #ececed;
  color: #ffffff;
  font-size: 14px;
}

/* NEW: Price display styles */
.price-display {
  position: relative;
  display: inline-block;
  min-width: 150px; /* Enough space for the widest price */
}

.price-group {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: opacity 0.3s ease;
  white-space: nowrap;
}

.price-group.hidden {
  opacity: 0;
  pointer-events: none;
}

.pricing-item h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 0.24em;
  line-height: 1.1;
  white-space: nowrap;
}

.pricing-item h2 .icon-uniE980 {
  margin-right: 0;
}

.pricing-item h2 .price {
  display: inline;
  margin: 0;
  line-height: 1;
  font-kerning: normal; 
  font-feature-settings: "kern" 1, "pnum" 1;
  letter-spacing: -0.02em;
}

/* unit text */
.pricing-item h2 .info-title[data-monthly],
.pricing-item h2 .info-title[data-yearly] {
  margin: 0;
}

/* Block layout */
.price-block {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.price-line {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 0.24em;
  line-height: 1.1;
  white-space: nowrap;
}

.price-line .icon-uniE980 {
    margin-right: 0.10em;
}

.price-line .price {
  display: inline;
  margin: 0;
  line-height: 1;
  font-kerning: normal;
  letter-spacing: -0.02em;
}

.yearly-total .original-price {
  text-decoration: line-through;
  color: #999;
  margin-right: 0.35em;
}
.yearly-total .discounted-price {
    font-weight: 400;
    color: #202427;
}

.yearly-total .unit {
    color: #202427;
    margin-left: 0.1em;
}

.pricing-item .title-info h2 {
  margin: 0 0 30px;
  line-height: 1.1;
}

.price-block .yearly-total {
  margin-top: 12px;
  font-size: 12px;
  color: inherit;
  font-weight: 400;
  pointer-events: none;
}

.price-block .yearly-total del {
  color: #999;
}

.pricing-item h2 .yearly-total span {
  font-size: 18px;
  letter-spacing: 0;
}

.pricing-item h2 .yearly-total .unit {
  color: #000000;
}

.pricing-item a.btn { 
  position: relative; 
  z-index: 1; 
}

/* Force LIs back to list layout even if JS sets inline */
li[data-monthly]:not([style*="display: none"]),
li[data-yearly]:not([style*="display: none"]),
li[data-yearly-extra]:not([style*="display: none"]) {
  display: list-item !important;
}