@font-face {
	font-family: 'gothic';
	src: local('gothic'), url('../gothic.woff') format('woff');
}
/* Pricing Toggle Styles */
.pricing-toggle-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2rem 0;
}

.pricing-toggle-label {
  font-family: 'gothic';
  font-size: 1rem;
  color: white;
  margin: 0 1rem;
  cursor: pointer;
}

.pricing-toggle-label.active {
  color: var(--Yellow500);
  font-weight: 600;
}

.pricing-toggle-switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 30px;
}

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

.pricing-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.2);
  transition: 0.4s;
  border-radius: 34px;
}

.pricing-toggle-slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .pricing-toggle-slider {
  background-color: var(--Teal500);
}

input:focus + .pricing-toggle-slider {
  box-shadow: 0 0 1px var(--Teal500);
}

input:checked + .pricing-toggle-slider:before {
  transform: translateX(30px);
}

/* Monthly price display styles */
.monthly-price {
  display: none;
}

.show-monthly .monthly-price {
  display: block;
}

.show-monthly .standard-price {
  display: none;
}

/* Savings badge */
.savings-badge {
  position: absolute;
  top: -12px;
  left: 20px;
  background-color: var(--Teal500);
  color: white;
  font-family: "Jura";
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.3rem 1rem;
  border-radius: 1rem;
  display: none;
}

.show-monthly .savings-badge {
  display: block;
}