/* =========================================================
   Custom AJAX Login — ظاهر هماهنگ با فرم PowerPack
   رنگ‌ها را از طریق متغیرها می‌توانی در Elementor/تم override کنی.
   ========================================================= */

.cal-login-wrap {
	--cal-text:          #ffffff;
	--cal-label:         rgba(255, 255, 255, 0.85);
	--cal-field-bg:      rgba(255, 255, 255, 0);
	--cal-field-bg-foc:  rgba(255, 255, 255, 0.20);
	--cal-field-border:  rgba(255, 255, 255, 0.10);
	--cal-field-border-foc: rgba(255, 255, 255, 0.35);
	--cal-radius:        8px;
	--cal-btn-bg:        #244FD4;
	--cal-btn-bg-hover:  #1c3fab;
	--cal-btn-text:      #ffffff;
	--cal-link:          #ffffff;
	--cal-link-hover:    #8B0460;
	--cal-error:         #ff6b6b;
	--cal-gap:           22px;

	direction: rtl;
	text-align: right;
	color: var(--cal-text);
	width: 100%;
	max-width: var(--cal-form-width, 420px);
	margin: 0 auto;
	font-family: inherit;
	box-sizing: border-box;
}

.cal-login-wrap *,
.cal-login-wrap *::before,
.cal-login-wrap *::after {
	box-sizing: border-box;
}

.cal-login-wrap form {
	display: flex;
	flex-direction: column;
	gap: var(--cal-gap);
}

/* ---------- فیلدها ---------- */
.cal-field {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.cal-label {
	font-size: 15px;
	font-weight: 300;
	color: var(--cal-label);
}

.cal-input {
	width: 100%;
	padding: 12px 14px;
	font: inherit;
	font-size: 15px;
	color: var(--cal-text);
	background: var(--cal-field-bg);
	border: 2px solid var(--cal-field-border);
	border-radius: var(--cal-radius);
	outline: none;
	transition: background-color .18s ease, border-color .18s ease;
	-webkit-appearance: none;
	appearance: none;
}

.cal-input::placeholder { color: rgba(255, 255, 255, 0.5); }

.cal-input:focus {
	background: var(--cal-field-bg-foc);
	border-color: var(--cal-field-border-foc);
}

/* حذف آیکون چشم مرورگر برای فیلد رمز */
.cal-input::-ms-reveal,
.cal-input::-ms-clear { display: none; }

/* ---------- نمایش/مخفی رمز ---------- */
.cal-pw-wrap { position: relative; }

.cal-pw-wrap .cal-input { padding-left: 46px; }

.cal-toggle-pw {
	position: absolute;
	top: 50%;
	left: 10px;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
	color: rgba(255, 255, 255, 0.7);
	transition: color .15s ease;
}
.cal-toggle-pw:hover { color: #fff; }
.cal-toggle-pw .cal-eye-off { display: none; }
.cal-toggle-pw.cal-visible .cal-eye { display: none; }
.cal-toggle-pw.cal-visible .cal-eye-off { display: inline; }

/* ---------- Remember me ---------- */
.cal-remember {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 300;
	cursor: pointer;
	user-select: none;
	margin-top: -6px;
}
.cal-remember input {
	width: 16px;
	height: 16px;
	accent-color: var(--cal-btn-bg);
	cursor: pointer;
}

/* ---------- دکمه ---------- */
.cal-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 13px 18px;
	font: inherit;
	font-size: 16px;
	font-weight: 400;
	color: var(--cal-btn-text);
	background: var(--cal-btn-bg);
	border: 0;
	border-radius: var(--cal-radius);
	cursor: pointer;
	transition: background-color .18s ease, opacity .18s ease;
	text-decoration: none;
}
.cal-btn:hover { background: var(--cal-btn-bg-hover); }
.cal-btn:disabled { cursor: default; opacity: .85; }

/* ---------- اسپینر Loading ---------- */
.cal-spinner {
	display: none;
	width: 18px;
	height: 18px;
	border: 2px solid rgba(255, 255, 255, 0.45);
	border-top-color: #fff;
	border-radius: 50%;
	animation: cal-spin .7s linear infinite;
}
.cal-btn.cal-loading .cal-spinner { display: inline-block; }
.cal-btn.cal-loading .cal-btn-text { opacity: .55; }

@keyframes cal-spin { to { transform: rotate(360deg); } }

/* ---------- لینک‌ها ---------- */
.cal-links {
	text-align: center;
	margin-top: -4px;
}
.cal-links a {
	font-size: 15px;
	color: var(--cal-link);
	text-decoration: none;
	transition: color .15s ease;
}
.cal-links a:hover { color: var(--cal-link-hover); }

/* ---------- خطا ---------- */
.cal-error {
	padding: 11px 14px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--cal-error);
	background: rgba(255, 107, 107, 0.10);
	border: 1px solid rgba(255, 107, 107, 0.35);
	border-radius: var(--cal-radius);
}

/* ---------- حالت لاگین‌شده ---------- */
.cal-login-wrap.cal-logged-in {
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.cal-logged-in-msg { margin: 0; font-size: 15px; }
.cal-logout-btn { max-width: 200px; margin: 0 auto; }

/* ---------- پیام موفقیت (سبز) ---------- */
.cal-error.cal-ok {
	color: #22c55e;
	background: rgba(34, 197, 94, 0.10);
	border-color: rgba(34, 197, 94, 0.35);
}

/* ---------- فرم بازیابی رمز ---------- */
.cal-reset-wrap .cal-reset-intro {
	font-size: 14px;
	line-height: 1.9;
	color: var(--cal-label);
	margin: 0 0 4px;
	text-align: center;
}

/* ---------- Email 2FA ---------- */
.cal-login-step[hidden] { display: none !important; }
.cal-otp-intro {
	font-size: 14px;
	line-height: 1.9;
	color: var(--cal-label);
	text-align: center;
	margin: 0 0 4px;
}
.cal-otp-input {
	display: none !important;
}
.cal-otp-inputs {
	display: flex;
	direction: ltr;
	justify-content: center;
	align-items: center;
	gap: 9px;
	width: 100%;
}
.cal-otp-digit {
	width: 46px;
	height: 52px;
	padding: 0;
	border: 1px solid rgba(255,255,255,.16);
	border-radius: 10px;
	background: rgba(255,255,255,.035);
	color: var(--cal-text);
	font: inherit;
	font-size: 21px;
	font-weight: 600;
	line-height: 52px;
	text-align: center;
	direction: ltr;
	outline: none;
	transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
	-webkit-appearance: none;
	appearance: none;
}
.cal-otp-digit:focus {
	border-color: rgba(255,255,255,.55);
	background: rgba(255,255,255,.075);
	box-shadow: 0 0 0 3px rgba(36,79,212,.14);
	transform: translateY(-1px);
}
.cal-otp-digit::selection { background: rgba(36,79,212,.28); }
@media (max-width: 430px) {
	.cal-otp-inputs { gap: 6px; }
	.cal-otp-digit { width: 42px; height: 48px; line-height: 48px; }
}
@media (max-width: 340px) {
	.cal-otp-inputs { gap: 4px; }
	.cal-otp-digit { width: 38px; height: 46px; line-height: 46px; }
}
.cal-otp-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	flex-wrap: wrap;
}
.cal-link-btn {
	appearance: none;
	border: 0;
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
	color: var(--cal-link);
	font: inherit;
	font-size: 14px;
	padding: 0;
	cursor: pointer;
	text-decoration: none;
}
.cal-link-btn:hover { background: transparent !important; box-shadow: none !important; color: var(--cal-link-hover); }
.cal-link-btn:focus, .cal-link-btn:active { background: transparent !important; box-shadow: none !important; outline-offset: 3px; }
.cal-link-btn:disabled { opacity: .55; cursor: default; }

/* =========================================================
   Passless Login — 3.1.0
   ========================================================= */
.cal-login-heading {
	font-size: 28px;
	font-weight: 700;
	line-height: 1.4;
	margin-bottom: 6px;
}

.cal-login-subheading,
.cal-login-note {
	font-size: 13px;
	line-height: 1.9;
	color: rgba(255,255,255,.62);
}

.cal-login-subheading { margin-bottom: 20px; }
.cal-login-note { text-align: center; margin-top: -8px; }
.cal-otp-validity { text-align:center; font-size:12px; color:rgba(255,255,255,.55); margin-top:-8px; }

.cal-login-step-otp .cal-otp-inputs {
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
	gap:8px;
	width:100%;
	direction:ltr;
}

.cal-login-step-otp .cal-otp-digit {
	flex:0 0 44px;
	width:44px;
	height:52px;
	padding:0;
	border:1px solid rgba(255,255,255,.14);
	border-radius:10px;
	background:rgba(255,255,255,.035);
	color:#fff;
	font-size:20px;
	font-weight:600;
	text-align:center;
	outline:none;
	transition:border-color .18s ease,background-color .18s ease,transform .18s ease;
}

.cal-login-step-otp .cal-otp-digit:focus {
	border-color:#2f61e6;
	background:rgba(47,97,230,.10);
	transform:translateY(-1px);
}

@media (max-width: 420px) {
	.cal-login-step-otp .cal-otp-inputs { gap:5px; }
	.cal-login-step-otp .cal-otp-digit { flex-basis:40px; width:40px; height:48px; }
}

@media (max-width: 340px) {
	.cal-login-step-otp .cal-otp-inputs { gap:3px; }
	.cal-login-step-otp .cal-otp-digit { flex-basis:36px; width:36px; height:44px; }
}


/* =========================================================
   Google Login — minimal
   ========================================================= */
.cal-login-divider {
	display:flex;
	align-items:center;
	gap:12px;
	margin:4px 0 2px;
	color:rgba(255,255,255,.42);
	font-size:12px;
}
.cal-login-divider::before,
.cal-login-divider::after { content:""; flex:1; height:1px; background:rgba(255,255,255,.10); }
.cal-login-divider span { flex:0 0 auto; }
.cal-google-btn {
	display:flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	width:100%;
	height:46px;
	padding:0 16px;
	border:1px solid rgba(255,255,255,.14);
	border-radius:8px;
	background:transparent;
	color:var(--cal-text);
	font:inherit;
	font-size:15px;
	font-weight:400;
	text-decoration:none;
	transition:border-color .18s ease,background-color .18s ease;
}
.cal-google-btn:hover { background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.26); color:var(--cal-text); }
.cal-google-icon { width:18px; height:18px; flex:0 0 18px; }


/* OTP expiration countdown */
.cal-otp-validity { text-align:center; font-size:12px; color:rgba(255,255,255,.62); margin-top:12px; }
.cal-otp-countdown { display:inline-block; direction:ltr; font-variant-numeric:tabular-nums; color:var(--cal-text, #fff); font-weight:600; margin-inline-start:4px; }
.cal-otp-countdown[aria-label='expired'] { color:#ff6b6b; }

/* Session replacement notice */
.cal-session-replaced-notice{box-sizing:border-box;width:min(100% - 32px,520px);margin:18px auto;padding:22px;background:#0b1228;border:1px solid #293b60;border-radius:18px;color:#e5edff;box-shadow:0 18px 55px rgba(4,10,28,.28);font-family:inherit;line-height:1.8;position:relative;z-index:999999}.cal-session-notice-brand{display:flex;align-items:center;gap:12px;margin-bottom:16px}.cal-session-notice-brand>span:last-child{display:flex;flex-direction:column}.cal-session-notice-brand small{font-size:10px;letter-spacing:1.5px;color:#8ca6d8}.cal-session-notice-brand strong{font-size:18px;color:#fff}.cal-session-notice-logo{max-width:90px;max-height:52px;object-fit:contain}.cal-session-notice-mark{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:linear-gradient(135deg,#367bff,#173fc2);font-size:22px;font-weight:800;color:#fff}.cal-session-replaced-notice p{margin:0 0 16px;color:#d5def1;font-size:14px}.cal-session-notice-details{padding:14px;background:#131e39;border:1px solid #293b60;border-radius:12px;display:grid;gap:12px}.cal-session-notice-details div{display:flex;flex-direction:column;gap:3px}.cal-session-notice-details span{font-size:11px;color:#9fb0d0}.cal-session-notice-details strong{font-size:13px;color:#fff;overflow-wrap:anywhere}.cal-session-notice-dismiss{width:100%;margin-top:16px;border:0;border-radius:10px;padding:12px 16px;background:linear-gradient(100deg,#347cff,#244bd9);color:#fff;font:inherit;font-size:13px;font-weight:700;cursor:pointer}.cal-session-notice-dismiss:hover{filter:brightness(1.08)}@media(max-width:600px){.cal-session-replaced-notice{padding:18px;border-radius:14px}.cal-session-notice-brand strong{font-size:16px}}

/* Logo above the OTP verification form */
.cal-login-form-logo-wrap { display:flex; justify-content:center; align-items:center; margin:0 auto 18px; width:100%; }
.cal-login-form-logo { display:block; width:auto; height:auto; max-width:160px; max-height:84px; object-fit:contain; }


/* OTP brand mark: use the selected site logo instead of the green check */
.cal-login-otp-brand-mark{display:flex;align-items:center;justify-content:center;width:56px;height:56px;margin:0 auto 10px;overflow:hidden;}
.cal-login-otp-brand-mark .cal-login-form-logo{display:block;width:auto;height:auto;max-width:56px;max-height:56px;object-fit:contain;border-radius:0;}
.cal-login-otp-check{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.25);color:#86efac;font-weight:700;}
.cal-login-otp-title{text-align:center;color:#fff;font-size:18px;line-height:1.5;margin:0 0 12px;}

.cal-login-otp-brand-fallback{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,#3478ff,#2145d0);color:#fff;font-size:24px;font-weight:800;box-shadow:0 6px 18px rgba(37,99,235,.25)}


/* v3.5.0: OTP verification step intentionally contains no logo or icon.
   Strong selectors also override stale/theme-injected visual elements. */
.cal-login-wrap .cal-login-step-otp img,
.cal-login-wrap .cal-login-step-otp svg,
.cal-login-wrap .cal-login-step-otp picture,
.cal-login-wrap .cal-login-step-otp .cal-login-logo,
.cal-login-wrap .cal-login-step-otp .cal-otp-logo,
.cal-login-wrap .cal-login-step-otp .cal-otp-icon,
.cal-login-wrap .cal-login-step-otp .cal-login-icon,
.cal-login-wrap .cal-login-step-otp .cal-otp-check,
.cal-login-wrap .cal-login-step-otp .cal-success-icon,
.cal-login-wrap .cal-login-step-otp [class*="logo"],
.cal-login-wrap .cal-login-step-otp [class*="icon"] {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  content: none !important;
}
.cal-login-wrap .cal-login-step-otp::before,
.cal-login-wrap .cal-login-step-otp::after,
.cal-login-wrap .cal-login-step-otp .cal-login-otp-title::before,
.cal-login-wrap .cal-login-step-otp .cal-login-otp-title::after {
  display: none !important;
  content: none !important;
}


/* v3.5.8: keep form visuals controlled by plugin settings despite theme button/input defaults. */
.cal-login-wrap .cal-input { background-color: var(--cal-field-bg, transparent); border-color: var(--cal-field-border, rgba(255,255,255,.10)); color: var(--cal-text, #fff); border-radius: var(--cal-radius, 8px); }
.cal-login-wrap .cal-input:focus { background-color: var(--cal-field-bg-foc, rgba(255,255,255,.20)); }
.cal-login-wrap .cal-label { color: var(--cal-label, rgba(255,255,255,.85)); }
.cal-login-wrap .cal-btn, .cal-login-wrap button.cal-btn { background-color: var(--cal-btn-bg, #244FD4); color: var(--cal-btn-text, #fff); border-radius: var(--cal-radius, 8px); border: 0; box-shadow: none; text-transform: none; }
.cal-login-wrap .cal-btn:hover, .cal-login-wrap button.cal-btn:hover { background-color: var(--cal-btn-bg-hover, #1c3fab); color: var(--cal-btn-text, #fff); }
.cal-login-wrap .cal-login-heading, .cal-login-wrap .cal-login-subheading, .cal-login-wrap .cal-login-note { color: var(--cal-text, #fff); }


/* v3.5.9: keep the login form itself transparent; the surrounding page/popup owns its background. */
.cal-login-wrap,
.cal-login-wrap.cal-logged-in,
.cal-login-wrap .cal-form,
.cal-login-wrap .cal-login-form {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.cal-login-wrap { padding: 0 !important; }
.cal-login-wrap .cal-input,
.cal-login-wrap .cal-input:focus,
.cal-login-wrap input.cal-input {
  outline: none !important;
  box-shadow: none !important;
}
.cal-login-wrap .cal-input:focus {
  border-color: var(--cal-field-border-foc, rgba(255,255,255,.35)) !important;
}
.cal-login-wrap .cal-login-heading { margin-top: 0; }


/* v3.5.10: force transparent form/shortcode wrapper against Elementor/theme backgrounds. */
.cal-login-wrap,
.cal-login-wrap.cal-logged-in,
.cal-login-wrap > .cal-form,
.cal-login-wrap > form.cal-login-form,
.cal-login-wrap .cal-form,
.cal-login-wrap .cal-login-form,
.elementor-shortcode:has(> .cal-login-wrap),
.elementor-widget-container:has(> .elementor-shortcode > .cal-login-wrap),
.elementor-widget-shortcode:has(.cal-login-wrap) > .elementor-widget-container {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.cal-login-wrap::before,
.cal-login-wrap::after,
.cal-login-wrap > .cal-form::before,
.cal-login-wrap > .cal-form::after,
.cal-login-wrap > form.cal-login-form::before,
.cal-login-wrap > form.cal-login-form::after {
  background: transparent !important;
  box-shadow: none !important;
}


/* v3.5.11: enforce configured button colors against theme/page-builder button rules. */
.cal-login-wrap .cal-btn,
.cal-login-wrap button.cal-btn,
.cal-login-wrap .cal-btn:visited,
.cal-login-wrap button.cal-btn:visited,
.cal-login-wrap .cal-btn:focus,
.cal-login-wrap button.cal-btn:focus {
  background: var(--cal-btn-bg, #244FD4) !important;
  background-color: var(--cal-btn-bg, #244FD4) !important;
  color: var(--cal-btn-text, #ffffff) !important;
  border-color: transparent !important;
  box-shadow: none !important;
  text-decoration: none !important;
  opacity: 1;
}
.cal-login-wrap .cal-btn:hover,
.cal-login-wrap button.cal-btn:hover,
.cal-login-wrap .cal-btn:focus:hover,
.cal-login-wrap button.cal-btn:focus:hover {
  background: var(--cal-btn-bg-hover, var(--cal-btn-bg, #244FD4)) !important;
  background-color: var(--cal-btn-bg-hover, var(--cal-btn-bg, #244FD4)) !important;
  color: var(--cal-btn-text, #ffffff) !important;
}
.cal-login-wrap .cal-btn:disabled,
.cal-login-wrap button.cal-btn:disabled {
  color: var(--cal-btn-text, #ffffff) !important;
}

/* Form spacing setting: apply the configured gap to the visible step's direct children. */
.cal-login-wrap .cal-login-step-password:not([hidden]),
.cal-login-wrap .cal-login-step-otp:not([hidden]) {
	display: flex !important;
	flex-direction: column !important;
	gap: var(--cal-gap, 16px) !important;
}
.cal-login-wrap .cal-login-step-otp:not([hidden]) {
	gap: var(--cal-otp-gap, 8px) !important;
}

.cal-login-wrap .cal-login-step-password > .cal-login-heading,
.cal-login-wrap .cal-login-step-password > .cal-login-subheading,
.cal-login-wrap .cal-login-step-password > .cal-field,
.cal-login-wrap .cal-login-step-password > .cal-login-note,
.cal-login-wrap .cal-login-step-otp > .cal-login-heading,
.cal-login-wrap .cal-login-step-otp > .cal-otp-intro,
.cal-login-wrap .cal-login-step-otp > .cal-field,
.cal-login-wrap .cal-login-step-otp > .cal-otp-validity,
.cal-login-wrap .cal-login-step-otp > .cal-login-actions {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* v3.5.14: OTP step uses its own compact spacing setting. */
.cal-login-wrap .cal-login-step-otp > .cal-otp-intro,
.cal-login-wrap .cal-login-step-otp > .cal-login-heading,
.cal-login-wrap .cal-login-step-otp > .cal-field,
.cal-login-wrap .cal-login-step-otp > .cal-otp-validity,
.cal-login-wrap .cal-login-step-otp > .cal-login-actions { margin-block: 0 !important; }
.cal-login-wrap .cal-login-step-otp > .cal-otp-actions { gap: 12px !important; margin-block: 0 !important; }


/* v3.5.20: subtle OTP entry and server-confirmed login success motion. */
.cal-login-wrap .cal-login-step-otp.cal-otp-enter > * {
  animation: calOtpItemEnter 360ms cubic-bezier(.2,.75,.25,1) both;
}
.cal-login-wrap .cal-login-step-otp.cal-otp-enter > *:nth-child(1) { animation-delay: 0ms; }
.cal-login-wrap .cal-login-step-otp.cal-otp-enter > *:nth-child(2) { animation-delay: 35ms; }
.cal-login-wrap .cal-login-step-otp.cal-otp-enter > *:nth-child(3) { animation-delay: 70ms; }
.cal-login-wrap .cal-login-step-otp.cal-otp-enter > *:nth-child(4) { animation-delay: 105ms; }
.cal-login-wrap .cal-login-step-otp.cal-otp-enter > *:nth-child(5) { animation-delay: 140ms; }
.cal-login-wrap .cal-login-step-otp.cal-otp-enter > *:nth-child(6) { animation-delay: 175ms; }
@keyframes calOtpItemEnter {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}
.cal-login-wrap .cal-otp-digit.cal-otp-digit-enter {
  animation: calOtpDigitEnter 180ms ease-out both;
}
@keyframes calOtpDigitEnter {
  0% { transform: scale(.94); }
  65% { transform: scale(1.035); }
  100% { transform: scale(1); }
}
.cal-login-wrap .cal-otp-success-motion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 0 6px;
  color: var(--cal-text, #fff);
  animation: calOtpSuccessReveal 420ms cubic-bezier(.2,.75,.25,1) both;
}
.cal-login-wrap .cal-otp-success-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  border: 1px solid rgba(34,197,94,.5);
  color: #22c55e;
  background: rgba(34,197,94,.09);
  animation: calOtpCheckPop 420ms cubic-bezier(.2,.8,.25,1.2) both;
}
.cal-login-wrap .cal-otp-success-mark svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cal-login-wrap .cal-otp-success-label { font-size: 15px; font-weight: 600; }
.cal-login-wrap.cal-login-success-state .cal-login-step-otp { opacity: .28; transition: opacity 220ms ease; }
@keyframes calOtpSuccessReveal {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes calOtpCheckPop {
  0% { transform: scale(.72); }
  70% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .cal-login-wrap .cal-login-step-otp.cal-otp-enter > *,
  .cal-login-wrap .cal-otp-digit.cal-otp-digit-enter,
  .cal-login-wrap .cal-otp-success-motion,
  .cal-login-wrap .cal-otp-success-mark { animation: none !important; }
  .cal-login-wrap.cal-login-success-state .cal-login-step-otp { transition: none !important; }
}


/* v3.5.28: center the login heading and its supporting description. */
.cal-login-wrap .cal-login-heading,
.cal-login-wrap .cal-login-subheading {
    display: block;
    width: 100%;
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
}


/* v3.5.29: reliably center login headings and scale them responsively. */
.cal-login-wrap .cal-login-step-password > .cal-login-heading,
.cal-login-wrap .cal-login-step-otp > .cal-login-heading {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  text-align: center !important;
  font-size: clamp(22px, 5vw, 30px) !important;
  line-height: 1.4 !important;
  overflow-wrap: anywhere;
  margin-inline: auto !important;
}
.cal-login-wrap .cal-login-step-password > .cal-login-subheading,
.cal-login-wrap .cal-login-step-otp > .cal-otp-intro {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  text-align: center !important;
  font-size: clamp(14px, 3.6vw, 17px) !important;
  line-height: 1.9 !important;
  overflow-wrap: anywhere;
  margin-inline: auto !important;
}
@media (max-width: 480px) {
  .cal-login-wrap .cal-login-step-password > .cal-login-heading,
  .cal-login-wrap .cal-login-step-otp > .cal-login-heading {
    font-size: clamp(21px, 6vw, 26px) !important;
  }
  .cal-login-wrap .cal-login-step-password > .cal-login-subheading,
  .cal-login-wrap .cal-login-step-otp > .cal-otp-intro {
    font-size: clamp(14px, 3.8vw, 16px) !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cal-login-wrap .cal-login-step-password > .cal-login-heading,
  .cal-login-wrap .cal-login-step-password > .cal-login-subheading,
  .cal-login-wrap .cal-login-step-otp > .cal-login-heading,
  .cal-login-wrap .cal-login-step-otp > .cal-otp-intro {
    scroll-behavior: auto;
  }
}


/* v3.5.32 — OTP design refresh: transparent surface, rounded square fields, blue focus */
.cal-login-wrap .cal-login-step-otp,
.cal-login-wrap .cal-login-step-otp .cal-login-panel,
.cal-login-wrap .cal-login-step-otp .cal-auth-card {
    background: transparent !important;
    box-shadow: none !important;
}
.cal-login-wrap .cal-login-step-otp .cal-otp-inputs {
    gap: 8px;
}
.cal-login-wrap .cal-login-step-otp .cal-otp-digit {
    border: 1px solid rgba(151, 174, 221, .72);
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--cal-text, #fff);
    box-shadow: none;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.cal-login-wrap .cal-login-step-otp .cal-otp-digit:focus {
    border-color: #3478ff;
    background: transparent !important;
    box-shadow: 0 0 0 2px rgba(52, 120, 255, .18), 0 0 12px rgba(52, 120, 255, .16);
    transform: translateY(-1px);
}
.cal-login-wrap .cal-login-step-otp .cal-otp-digit::selection {
    background: rgba(52, 120, 255, .3);
}
@media (max-width: 420px) {
    .cal-login-wrap .cal-login-step-otp .cal-otp-inputs { gap: 5px; }
    .cal-login-wrap .cal-login-step-otp .cal-otp-digit { border-radius: 7px !important; }
}


/* v3.5.33 — Apply OTP design directly to the real OTP markup with high specificity. */
.cal-login-wrap .cal-login-step.cal-login-step-otp:not([hidden]) {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
.cal-login-wrap .cal-login-step.cal-login-step-otp .cal-login-otp-title {
  text-align: center !important;
  width: 100% !important;
  font-size: clamp(22px, 5vw, 30px) !important;
  line-height: 1.4 !important;
  margin-inline: auto !important;
}
.cal-login-wrap .cal-login-step.cal-login-step-otp .cal-otp-intro {
  text-align: center !important;
  width: 100% !important;
  line-height: 1.9 !important;
}
.cal-login-wrap .cal-login-step.cal-login-step-otp .cal-otp-field {
  background: transparent !important;
  box-shadow: none !important;
}
.cal-login-wrap .cal-login-step.cal-login-step-otp .cal-otp-field > .cal-label {
  display: block !important;
  text-align: center !important;
  width: 100% !important;
}
.cal-login-wrap .cal-login-step.cal-login-step-otp .cal-otp-inputs {
  display: flex !important;
  justify-content: center !important;
  gap: clamp(6px, 2vw, 10px) !important;
  background: transparent !important;
  padding: 2px !important;
}
.cal-login-wrap .cal-login-step.cal-login-step-otp input.cal-otp-digit {
  box-sizing: border-box !important;
  flex: 0 1 48px !important;
  width: 48px !important;
  min-width: 0 !important;
  max-width: 48px !important;
  height: 54px !important;
  padding: 0 !important;
  border: 1px solid rgba(151, 174, 221, .82) !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
  text-align: center !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease !important;
}
.cal-login-wrap .cal-login-step.cal-login-step-otp input.cal-otp-digit:focus {
  border-color: #3478ff !important;
  background: transparent !important;
  box-shadow: 0 0 0 2px rgba(52,120,255,.2), 0 0 12px rgba(52,120,255,.18) !important;
  transform: translateY(-1px) !important;
  outline: none !important;
}
@media (max-width: 380px) {
  .cal-login-wrap .cal-login-step.cal-login-step-otp .cal-otp-inputs { gap: 5px !important; }
  .cal-login-wrap .cal-login-step.cal-login-step-otp input.cal-otp-digit { flex-basis: 39px !important; width: 39px !important; max-width: 39px !important; height: 46px !important; border-radius: 8px !important; font-size: 19px !important; }
}


/* v3.5.34 — Force OTP slots to square dimensions with rounded corners. */
.cal-login-wrap .cal-login-step.cal-login-step-otp .cal-otp-inputs input.cal-otp-digit {
  box-sizing: border-box !important;
  flex: 0 0 48px !important;
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  padding: 0 !important;
  border-radius: 10px !important;
  line-height: 46px !important;
}
@media (max-width: 420px) {
  .cal-login-wrap .cal-login-step.cal-login-step-otp .cal-otp-inputs { gap: 6px !important; }
  .cal-login-wrap .cal-login-step.cal-login-step-otp .cal-otp-inputs input.cal-otp-digit {
    flex-basis: 40px !important; width: 40px !important; min-width: 40px !important; max-width: 40px !important;
    height: 40px !important; min-height: 40px !important; max-height: 40px !important;
    line-height: 38px !important; border-radius: 8px !important;
  }
}


/* OTP Motion-inspired micro-interactions (vanilla CSS/JS; no React dependency) */
.cal-login-step-otp .cal-otp-digit {
	position: relative;
	border-radius: 12px;
	transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease;
	caret-color: transparent;
}
.cal-login-step-otp .cal-otp-digit.cal-otp-active,
.cal-login-step-otp .cal-otp-digit:focus {
	border-color: #4169f5;
	box-shadow: 0 0 0 2px rgba(65,105,245,.22), 0 0 18px rgba(65,105,245,.12);
	background: rgba(65,105,245,.10);
}
.cal-login-step-otp .cal-otp-digit-enter {
	animation: cal-otp-roll-in .34s cubic-bezier(.2,.85,.25,1.25) both;
}
@keyframes cal-otp-roll-in {
	0% { transform: translateY(11px) scale(.92); opacity: .15; }
	70% { transform: translateY(-2px) scale(1.035); opacity: 1; }
	100% { transform: translateY(0) scale(1); opacity: 1; }
}
.cal-login-step-otp .cal-otp-inputs.cal-otp-row-error {
	animation: cal-otp-shake .34s ease-in-out;
}
@keyframes cal-otp-shake {
	0%,100% { transform: translateX(0); }
	20% { transform: translateX(-5px); }
	40% { transform: translateX(4px); }
	60% { transform: translateX(-2px); }
	80% { transform: translateX(1px); }
}
.cal-login-step-otp .cal-otp-inputs.cal-otp-row-success .cal-otp-digit {
	border-color: #34c759;
	box-shadow: 0 0 0 1px rgba(52,199,89,.25);
	transition: border-color .22s ease, box-shadow .22s ease;
}
.cal-login-step-otp .cal-otp-digit.cal-otp-digit-success {
	animation: cal-otp-success-pop .28s cubic-bezier(.2,.85,.25,1.25) both;
}
@keyframes cal-otp-success-pop {
	0% { transform: scale(1); }
	55% { transform: scale(1.08); }
	100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	.cal-login-step-otp .cal-otp-digit-enter,
	.cal-login-step-otp .cal-otp-inputs.cal-otp-row-error,
	.cal-login-step-otp .cal-otp-digit.cal-otp-digit-success { animation: none !important; }
	.cal-login-step-otp .cal-otp-digit { transition: none !important; }
}


/* v3.5.36 — stronger Motion-style digit roll + requested OTP dimensions/typography */
.cal-login-wrap .cal-login-step.cal-login-step-otp .cal-otp-inputs input.cal-otp-digit {
  box-sizing: border-box !important;
  flex: 0 0 58px !important;
  width: 58px !important;
  min-width: 58px !important;
  max-width: 58px !important;
  height: 58px !important;
  min-height: 58px !important;
  max-height: 58px !important;
  padding: 0 !important;
  line-height: 56px !important;
  font-size: 23px !important;
  font-weight: 400 !important;
  font-variant-numeric: tabular-nums;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
}
.cal-login-wrap .cal-login-step.cal-login-step-otp .cal-otp-inputs input.cal-otp-digit.cal-otp-digit-enter {
  animation: cal-otp-react-roll-in 520ms cubic-bezier(.22,1.25,.36,1) both !important;
}
@keyframes cal-otp-react-roll-in {
  0% { transform: translate3d(0, 22px, 0) scale(.72) rotateX(-38deg); opacity: 0; filter: blur(3px); }
  42% { transform: translate3d(0, -4px, 0) scale(1.12) rotateX(8deg); opacity: 1; filter: blur(0); }
  68% { transform: translate3d(0, 1.5px, 0) scale(.97) rotateX(0); opacity: 1; }
  84% { transform: translate3d(0, -1px, 0) scale(1.015); }
  100% { transform: translate3d(0, 0, 0) scale(1) rotateX(0); opacity: 1; filter: blur(0); }
}
@media (max-width: 420px) {
  .cal-login-wrap .cal-login-step.cal-login-step-otp .cal-otp-inputs { gap: 4px !important; }
  .cal-login-wrap .cal-login-step.cal-login-step-otp .cal-otp-inputs input.cal-otp-digit {
    flex-basis: 58px !important; width: 58px !important; min-width: 58px !important; max-width: 58px !important;
    height: 58px !important; min-height: 58px !important; max-height: 58px !important;
    line-height: 56px !important; font-size: 23px !important; font-weight: 400 !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cal-login-wrap .cal-login-step.cal-login-step-otp .cal-otp-inputs input.cal-otp-digit.cal-otp-digit-enter { animation: none !important; }
}