/* =========================================================
   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: 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;
}