/* DiraMarket 2.19.4 — smooth monthly/annual plan transition. */

.dm-billing-toggle button {
  transition: color .24s ease, opacity .24s ease;
}

.dm-billing-toggle.is-period-switching {
  animation: dmBillingToggleGlow .5s ease-out;
}

.dm-plan-card.is-period-changing .dm-plan-card-head,
.dm-plan-card.is-period-changing .dm-plan-price,
.dm-plan-card.is-period-changing .dm-plan-annual-saving,
.dm-plan-card.is-period-changing .dm-plan-divider,
.dm-plan-card.is-period-changing > ul,
.dm-plan-card.is-period-changing .dm-plan-limited,
.dm-plan-card.is-period-changing > form {
  animation: dmPlanPeriodReveal .6s cubic-bezier(.2,.8,.2,1) both;
  animation-delay: var(--dm-plan-switch-delay, 0ms);
}

@keyframes dmPlanPeriodReveal {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(.985);
  }
  58% {
    opacity: 1;
    transform: translateY(-2px) scale(1.005);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes dmBillingToggleGlow {
  0% { box-shadow: 0 0 0 0 rgba(58,106,0,0); }
  45% { box-shadow: 0 7px 22px rgba(58,106,0,.16); }
  100% { box-shadow: 0 0 0 0 rgba(58,106,0,0); }
}

@media (prefers-reduced-motion: reduce) {
  .dm-billing-toggle.is-period-switching,
  .dm-plan-card.is-period-changing .dm-plan-card-head,
  .dm-plan-card.is-period-changing .dm-plan-price,
  .dm-plan-card.is-period-changing .dm-plan-annual-saving,
  .dm-plan-card.is-period-changing .dm-plan-divider,
  .dm-plan-card.is-period-changing > ul,
  .dm-plan-card.is-period-changing .dm-plan-limited,
  .dm-plan-card.is-period-changing > form {
    animation: none !important;
  }
}