/* --- Toggle row (works with or without wrapper) --- */
.oneauto-switch{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  line-height:1;
  margin:10px 0 22px;
  white-space:nowrap;
}

/* Fallback when there’s no wrapper: keep items aligned and spaced */
#pricing-toggle,
[data-role="label-month"],
[data-role="label-year"]{
  vertical-align:middle;
  line-height:1;
}
[data-role="label-month"]{ margin-right:12px; }
[data-role="label-year"]{  margin-left:12px;  }

/* Bold, readable labels */
[data-role="label-month"],
[data-role="label-year"]{
  font-weight:700;
  font-size:16px;
}

/* Switch */
.oneauto-toggle{
  position:relative;
  width:68px;
  height:34px;
  border:0;
  border-radius:999px;
  background:#e6e6e6;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  padding:0;
}
.oneauto-toggle .knob{
  position:absolute;
  top:3px; left:3px;
  width:28px; height:28px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.2);
  transition:transform .2s ease;
}
.oneauto-toggle[aria-pressed="true"]{ background:#0D53C5; }
.oneauto-toggle[aria-pressed="true"] .knob{ transform:translateX(34px); }

/* Screen-reader only text utility (keep if not already present) */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Prevent line-wrap crowding on very small screens */
@media (max-width:420px){
  .oneauto-switch{gap:10px}
  .oneauto-switch [data-role="label-month"],
  .oneauto-switch [data-role="label-year"]{font-size:15px}
}

/* Cross-browser nudge so the knob stays perfectly centered with text */
.oneauto-toggle{vertical-align:middle}

/* ===== Stage (true 3D flip; height set by JS) ===== */
#pricing-stage{
  position:relative;
  perspective:1200px;
  perspective-origin:center center;
  /* no overflow:hidden here -> card drop-shadows remain visible */
}

/* layers share the same footprint */
#pricing-stage #pricing-monthly,
#pricing-stage #pricing-yearly{position:relative;width:100%;margin:0!important}

/* hidden layer fully inert and invisible (prevents mobile overlap flash) */
#pricing-stage:not(.is-yearly) #pricing-yearly{position:absolute;inset:0;z-index:1;pointer-events:none;visibility:hidden}
#pricing-stage.is-yearly       #pricing-monthly{position:absolute;inset:0;z-index:1;pointer-events:none;visibility:hidden}

/* visible layer on top */
#pricing-stage:not(.is-yearly) #pricing-monthly{z-index:2;pointer-events:auto;visibility:visible}
#pricing-stage.is-yearly       #pricing-yearly {z-index:2;pointer-events:auto;visibility:visible}

/* Flip the whole card (not the <img>);
   keep a constant transform to avoid any rasterization/scale blip */
#pricing-stage #pricing-monthly > .elementor-element,
#pricing-stage #pricing-yearly  > .elementor-element{
  transform-origin:center;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  transform-style:preserve-3d;-webkit-transform-style:preserve-3d;
  will-change:transform,opacity;
  transform:translateZ(0) rotateY(0);  /* constant transform = no micro scaling */
  transition:transform .6s ease;
}

/* flip states */
#pricing-stage:not(.is-yearly) #pricing-monthly > .elementor-element{transform:translateZ(0) rotateY(0deg)}
#pricing-stage:not(.is-yearly) #pricing-yearly  > .elementor-element{transform:translateZ(0) rotateY(-180deg)}
#pricing-stage.is-yearly       #pricing-monthly > .elementor-element{transform:translateZ(0) rotateY(180deg)}
#pricing-stage.is-yearly       #pricing-yearly  > .elementor-element{transform:translateZ(0) rotateY(0deg)}

/* stagger (CSS fallback; JS also sets inline delays) */
#pricing-monthly > .elementor-element:nth-of-type(1),
#pricing-yearly  > .elementor-element:nth-of-type(1){transition-delay:0ms}
#pricing-monthly > .elementor-element:nth-of-type(2),
#pricing-yearly  > .elementor-element:nth-of-type(2){transition-delay:80ms}
#pricing-monthly > .elementor-element:nth-of-type(3),
#pricing-yearly  > .elementor-element:nth-of-type(3){transition-delay:160ms}
#pricing-monthly > .elementor-element:nth-of-type(4),
#pricing-yearly  > .elementor-element:nth-of-type(4){transition-delay:240ms}

/* stop any old <img> flip rules (prevents ghost edges) */
#pricing-stage #pricing-monthly img,
#pricing-stage #pricing-yearly img{
  transform:none!important;opacity:1!important;transition:none!important;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
}

/* tidy inner margins */
#pricing-monthly .elementor-element,
#pricing-yearly  .elementor-element{margin:0!important}

/* mobile: no forced image heights */
@media (max-width:767px){
  #pricing-stage .elementor-widget-image{min-height:0!important;display:block!important}
  #pricing-stage .elementor-widget-image img{height:auto!important;width:auto;max-width:100%}
}

/* Instant fallback text for the toggle labels (EST) */
[data-role="label-month"]:empty::before { content: "Kuupaketid"; }
[data-role="label-year"]:empty::before  { content: "Aastapaketid"; }