/* Project E — login with a code (JC_Login). Inherits the theme's font and colours;
   only the spacing and the one-time-code field are ours. */
.jc-login {
	--jc-login-accent: var(--jw-primary, var(--e-global-color-primary, #111827));
	box-sizing: border-box;
	max-width: 440px;
	margin: 0 0 2em;
	padding: 1.5em;
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 14px;
	background: #fff;
	text-align: right;
}
.jc-login *,
.jc-login *::before,
.jc-login *::after { box-sizing: border-box; }
.jc-login__title { margin: 0 0 .35em; font-size: 1.35em; }
.jc-login__lead { margin: 0 0 1.1em; opacity: .8; }
.jc-login__label { display: block; margin: 0 0 .35em; font-weight: 600; }
.jc-login__input {
	display: block;
	width: 100%;
	margin: 0 0 .9em;
	padding: .75em .9em;
	border: 1px solid rgba(0, 0, 0, .25);
	border-radius: 10px;
	font-size: 1rem;
	text-align: left;
}
.jc-login__input--code {
	font-size: 1.6rem;
	letter-spacing: .45em;
	text-align: center;
	font-variant-numeric: tabular-nums;
}
.jc-login__button {
	display: block;
	width: 100%;
	padding: .8em 1em;
	border: 0;
	border-radius: 10px;
	background: var(--jc-login-accent);
	color: #fff;
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
}
.jc-login__button:disabled { opacity: .6; cursor: default; }
.jc-login__remember { display: flex; gap: .4em; align-items: center; margin: 0 0 .9em; font-size: .92em; }
.jc-login__links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5em; margin: .9em 0 0; }
/* Text links, not buttons. The !important and the doubled selector beat theme and
   Elementor kit button rules (`.elementor-kit-N button`, hover/focus/disabled states)
   that otherwise paint these as filled black or grey boxes. */
.jc-login button.jc-login__link,
.jc-login button.jc-login__link:hover,
.jc-login button.jc-login__link:focus,
.jc-login button.jc-login__link:active,
.jc-login button.jc-login__link:disabled {
	width: auto !important;
	min-height: 0 !important;
	margin: 0;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	color: #000 !important;
	text-decoration: underline !important;
	text-underline-offset: 3px;
	text-transform: none !important;
	letter-spacing: normal !important;
	font: inherit;
	font-size: .92em;
	line-height: 1.5;
	cursor: pointer;
}
.jc-login button.jc-login__link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.jc-login button.jc-login__link:disabled { color: #6b7280 !important; text-decoration: none !important; cursor: default; }
.jc-login button.jc-login__link:empty { display: none; }
.jc-login__toggle { display: block; margin: 1em 0 0; }
.jc-login__sent { margin: 0 0 .9em; }
.jc-login__status { min-height: 1.2em; margin: .8em 0 0; font-size: .95em; }
.jc-login__status.is-error { color: #b42318; }
.jc-login__status:empty { display: none; }
/* Visually hidden, still in the form for bots. Not left:-9999px: on an RTL page
   that stretches the document ~10,000px sideways and the login page scrolls. */
.jc-login__hp {
	position: absolute !important;
	inset-inline-start: 0 !important;
	width: 1px !important;
	height: 1px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
	clip-path: inset(50%) !important;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
}
.jc-login { position: relative; }
.jc-login [hidden],
.jc-login-folded { display: none !important; }
.jc-login.is-unavailable .jc-login__step { display: none; }
@media (max-width: 480px) {
	.jc-login { padding: 1.1em; border-radius: 12px; }
}

/* ---------------------------------------------------------------------------
   WooCommerce's password form, revealed by "התחברות עם סיסמה" under the card —
   styled to match the card. Scoped to siblings that FOLLOW the card, so no other
   login form (checkout, other pages) is touched. !important on box properties:
   WooCommerce (.woocommerce form .form-row .input-text), Elementor's My Account
   widget and kit button rules all outrank a plain selector here.
   --------------------------------------------------------------------------- */
.jc-login ~ h2,
.jc-login ~ #customer_login .u-column1 > h2 {
	max-width: 440px;
	margin: 0 0 .5em !important;
	font-size: 1.35em !important;
	line-height: 1.3 !important;
}
.jc-login ~ form.woocommerce-form-login,
.jc-login ~ #customer_login form.woocommerce-form-login {
	box-sizing: border-box;
	max-width: 440px;
	margin: 0 0 2em !important;
	padding: 1.5em !important;
	border: 1px solid rgba(0, 0, 0, .12) !important;
	border-radius: 14px !important;
	background: #fff !important;
	box-shadow: none !important;
	text-align: right;
}
.jc-login ~ form.woocommerce-form-login *,
.jc-login ~ #customer_login form.woocommerce-form-login * { box-sizing: border-box; }
.jc-login ~ form.woocommerce-form-login .form-row,
.jc-login ~ #customer_login form.woocommerce-form-login .form-row {
	float: none !important;
	width: 100% !important;
	margin: 0 0 .9em !important;
	padding: 0 !important;
}
.jc-login ~ form.woocommerce-form-login label,
.jc-login ~ #customer_login form.woocommerce-form-login label {
	display: block;
	margin: 0 0 .35em;
	font-weight: 600;
	line-height: 1.4;
}
.jc-login ~ form.woocommerce-form-login .input-text,
.jc-login ~ form.woocommerce-form-login input[type="text"],
.jc-login ~ form.woocommerce-form-login input[type="email"],
.jc-login ~ form.woocommerce-form-login input[type="password"],
.jc-login ~ #customer_login form.woocommerce-form-login .input-text {
	display: block;
	width: 100% !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: .75em .9em !important;
	border: 1px solid rgba(0, 0, 0, .25) !important;
	border-radius: 10px !important;
	background: #fff !important;
	box-shadow: none !important;
	outline: none;
	color: inherit;
	font-size: 1rem !important;
	line-height: 1.4 !important;
}
.jc-login ~ form.woocommerce-form-login .input-text:focus,
.jc-login ~ #customer_login form.woocommerce-form-login .input-text:focus {
	border-color: var(--jw-primary, var(--e-global-color-primary, #111827)) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--jw-primary, var(--e-global-color-primary, #111827)) 18%, transparent) !important;
}
/* WooCommerce's show-password eye: keep it inside the field, never a filled box. */
.jc-login ~ form.woocommerce-form-login .password-input,
.jc-login ~ #customer_login form.woocommerce-form-login .password-input {
	position: relative;
	display: block;
	width: 100%;
}
.jc-login ~ form.woocommerce-form-login .password-input .input-text,
.jc-login ~ #customer_login form.woocommerce-form-login .password-input .input-text {
	padding-inline-start: 2.6em !important;
}
.jc-login ~ form.woocommerce-form-login button.show-password-input,
.jc-login ~ #customer_login form.woocommerce-form-login button.show-password-input {
	position: absolute !important;
	inset-block: 0 !important;
	inset-inline-start: .55em !important;
	inset-inline-end: auto !important;
	width: 1.8em !important;
	min-height: 0 !important;
	margin: auto 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	color: inherit !important;
	/* WooCommerce/Elementor centre it with top:50% + translateY(-50%); we pin it
	   with inset-block instead, so the transform would lift it onto the label. */
	transform: none !important;
	opacity: .65;
	cursor: pointer;
}
.jc-login ~ form.woocommerce-form-login button.show-password-input:hover,
.jc-login ~ #customer_login form.woocommerce-form-login button.show-password-input:hover { opacity: 1; }
/* Remember-me + submit share one .form-row in WooCommerce's markup. */
.jc-login ~ form.woocommerce-form-login .form-row:has(.woocommerce-form-login__submit),
.jc-login ~ #customer_login form.woocommerce-form-login .form-row:has(.woocommerce-form-login__submit) {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: .9em;
}
.jc-login ~ form.woocommerce-form-login label.woocommerce-form-login__rememberme,
.jc-login ~ #customer_login form.woocommerce-form-login label.woocommerce-form-login__rememberme {
	display: flex !important;
	align-items: center;
	gap: .4em;
	order: 1;
	margin: 0 !important;
	font-weight: 400;
	font-size: .92em;
}
.jc-login ~ form.woocommerce-form-login label.woocommerce-form-login__rememberme input,
.jc-login ~ #customer_login form.woocommerce-form-login label.woocommerce-form-login__rememberme input { margin: 0 !important; }
.jc-login.jc-login ~ form.woocommerce-form-login.woocommerce-form-login button.woocommerce-form-login__submit.woocommerce-form-login__submit,
.jc-login.jc-login ~ #customer_login form.woocommerce-form-login.woocommerce-form-login button.woocommerce-form-login__submit.woocommerce-form-login__submit {
	order: 2;
	display: block !important;
	float: none !important;
	width: 100% !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: .8em 1em !important;
	border: 0 !important;
	border-radius: 10px !important;
	background: var(--jw-primary, var(--e-global-color-primary, #111827)) !important;
	box-shadow: none !important;
	color: #fff !important;
	font: inherit;
	font-weight: 700 !important;
	font-size: 1rem !important;
	line-height: 1.4 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	cursor: pointer;
}
.jc-login.jc-login ~ form.woocommerce-form-login.woocommerce-form-login button.woocommerce-form-login__submit.woocommerce-form-login__submit:hover,
.jc-login.jc-login ~ #customer_login form.woocommerce-form-login.woocommerce-form-login button.woocommerce-form-login__submit.woocommerce-form-login__submit:hover {
	filter: brightness(.92);
}
.jc-login.jc-login ~ form.woocommerce-form-login.woocommerce-form-login button.woocommerce-form-login__submit.woocommerce-form-login__submit:focus-visible,
.jc-login.jc-login ~ #customer_login form.woocommerce-form-login.woocommerce-form-login button.woocommerce-form-login__submit.woocommerce-form-login__submit:focus-visible {
	outline: 2px solid var(--jw-primary, var(--e-global-color-primary, #111827));
	outline-offset: 2px;
}
.jc-login ~ form.woocommerce-form-login .lost_password,
.jc-login ~ #customer_login form.woocommerce-form-login .lost_password {
	margin: .9em 0 0 !important;
	font-size: .92em;
}
.jc-login ~ form.woocommerce-form-login .lost_password a,
.jc-login ~ #customer_login form.woocommerce-form-login .lost_password a {
	color: #000 !important;
	text-decoration: underline !important;
	text-underline-offset: 3px;
}
@media (max-width: 480px) {
	.jc-login ~ form.woocommerce-form-login,
	.jc-login ~ #customer_login form.woocommerce-form-login { padding: 1.1em !important; border-radius: 12px !important; }
}

/* My Account login screen (the card renders with data-fold="1" only there):
   centre the card, the "התחברות" heading and the password form as one column.
   The shortcode copy keeps its own placement. Text inside stays RTL-aligned. */
.jc-login[data-fold="1"] {
	margin-inline: auto !important;
}
.jc-login[data-fold="1"] ~ h2,
.jc-login[data-fold="1"] ~ form.woocommerce-form-login,
.jc-login[data-fold="1"] ~ #customer_login {
	margin-inline: auto !important;
}
.jc-login[data-fold="1"] ~ h2 {
	max-width: 440px;
	width: 100%;
}

/* "התחברות עם קוד למייל" — back from the password form to the card. A text link
   like the card's own links; armoured against kit/widget button rules. */
.jc-login ~ form.woocommerce-form-login .jc-login__switch,
.jc-login ~ #customer_login form.woocommerce-form-login .jc-login__switch {
	margin: .9em 0 0 !important;
	padding: 0 !important;
}
.jc-login.jc-login ~ form.woocommerce-form-login button.jc-login__switch-btn,
.jc-login.jc-login ~ form.woocommerce-form-login button.jc-login__switch-btn:hover,
.jc-login.jc-login ~ form.woocommerce-form-login button.jc-login__switch-btn:focus,
.jc-login.jc-login ~ form.woocommerce-form-login button.jc-login__switch-btn:active,
.jc-login.jc-login ~ #customer_login form.woocommerce-form-login button.jc-login__switch-btn,
.jc-login.jc-login ~ #customer_login form.woocommerce-form-login button.jc-login__switch-btn:hover {
	display: inline !important;
	width: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	color: #000 !important;
	font: inherit;
	font-size: .92em !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	text-decoration: underline !important;
	text-underline-offset: 3px;
	text-transform: none !important;
	letter-spacing: normal !important;
	transform: none !important;
	cursor: pointer;
}
.jc-login.jc-login ~ form.woocommerce-form-login button.jc-login__switch-btn:focus-visible {
	outline: 2px solid currentColor !important;
	outline-offset: 2px;
}