/* =========================================================================
 * Sabeny — WooCommerce Auth Modal
 *
 * Two-column on desktop (hero image | form), single column stacked on
 * mobile (image cropped to a hero band at the top, form below).
 * ========================================================================= */

:root {
	--wcam-teal:       #0F766E;
	--wcam-teal-dark:  #0A5454;
	--wcam-ink:        #0F172A;
	--wcam-ink-2:      #334155;
	--wcam-mute:       #6B7280;
	--wcam-line:       #E5E7EB;
	--wcam-soft:       #F8FAFC;
	--wcam-cream:      #FFF8E6;
	--wcam-cream-2:    #FDE9C5;
	--wcam-amber:      #C68413;
	--wcam-red:        #DC2626;
	--wcam-radius:     16px;
	--wcam-radius-sm:  10px;
}

/* Overlay */
.wc-auth-overlay {
	position: fixed; inset: 0;
	background: rgba(15, 23, 42, .55);
	z-index: 100000;
	align-items: center; justify-content: center;
	padding: 20px;
}
.wc-auth-overlay { display: none; }
.wc-auth-overlay[style*="flex"] { display: flex !important; }

/* Modal box */
.wc-auth-modal {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	width: 100%;
	max-width: 940px;
	max-height: calc(100vh - 40px);
	background: #fff;
	border-radius: var(--wcam-radius);
	overflow: hidden;
	box-shadow: 0 24px 70px rgba(15, 23, 42, .35);
	font-family: inherit;
	color: var(--wcam-ink);
	animation: wcamPop .2s ease-out;
}
@keyframes wcamPop {
	from { opacity: 0; transform: scale(.96); }
	to   { opacity: 1; transform: scale(1); }
}

/* Hero image column */
.wc-auth-modal__media {
	position: relative;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	min-height: 100%;
}

/* "Jewish Life — Delivered Anywhere" brand overlay sitting on top of the
 * hero image. Pinned to roughly the upper third so it sits above the
 * challah/candles photog.wc-auth-modal .wc-auth-headline, h2.wc-auth-headlineraphy content. */
.wc-auth-modal__media-overlay {
	position: absolute;
	top: 16%;
	left: 50%;
	transform: translateX(-50%);
	width: 80%;
	max-width: 320px;
	text-align: center;
	color: var(--wcam-teal);
	pointer-events: none;     /* let any clicks pass through to the image */
}
.wc-auth-modal__media-headline {
	display: block;
	font-family: "Tuckers";     /* inherits theme's script/heading font */
	font-size: 100px;
	font-weight: normal;
	line-height: 1;
	letter-spacing: -.01em;
	color: var(--wcam-teal);
}
.wc-auth-modal__media-tag {
	display: block;
	margin-top: 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--wcam-teal);
}
.wc-auth-modal__media-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 14px;
	color: var(--wcam-teal);
}
.wc-auth-modal__media-divider svg {
	width: 16px; height: 16px;
	flex-shrink: 0;
}
.wc-auth-modal__media-rule {
	flex: 1 1 auto;
	height: 2px;
	background-image: radial-gradient(circle, currentColor 1px, transparent 1.5px);
	background-size: 6px 2px;
	background-repeat: repeat-x;
	background-position: center;
	max-width: 80px;
	opacity: .55;
}

/* Close button (floats top-right over the whole modal) */
.wc-auth-modal__close {
	position: absolute;
	top: 14px; right: 14px;
	width: 36px; height: 36px;
	border-radius: 50%;
	border: 0;
	background: rgba(255, 255, 255, .9);
	color: var(--wcam-ink);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	z-index: 5;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 2px 6px rgba(15, 23, 42, .15);
}
.wc-auth-modal__close:hover { background: #fff; }

/* Body / form column */
.wc-auth-modal__body {
	padding: 36px 38px 30px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	-webkit-overflow-scrolling: touch;
}

/* Panel toggling — we keep the .active class system from the legacy JS */
.wc-auth-panel { display: none; }
.wc-auth-panel.active { display: block; }

/* Typography */
.wc-auth-modal .wc-auth-eyebrow {
	display: inline-block;
	color: var(--wcam-amber) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: .14em !important;
	text-transform: uppercase !important;
	line-height: 1.4 !important;
	margin: 0 0 14px !important;
}
/* The headline is an <h2>, which Elementor's global kit rule
 * (.elementor-kit-NN h2) styles aggressively. We have to !important the
 * size + colour so the kit can't reach in and override.
 *
 * Font-family deliberately inherits so the headline picks up whatever
 * the active theme's heading font is ("Tuckers" sans on this site) —
 * keeps the modal visually consistent with the rest of the brand. */
.wc-auth-modal .wc-auth-headline,
h2.wc-auth-headline {
	font-family: inherit !important;
	font-size: 29px !important;
	line-height: 1.2 !important;
	color: var(--wcam-teal) !important;
	font-weight: 700 !important;
	margin: 0 0 22px !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}
.wc-auth-modal .wc-auth-headline em,
h2.wc-auth-headline em {
	font-family: inherit !important;
	font-style: italic !important;
	color: var(--wcam-teal) !important;
	font-weight: 700 !important;
}

/* Benefits 4-up grid */
.wc-auth-benefits {
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}
.wc-auth-benefits li {
	background: var(--wcam-cream);
	border-radius: var(--wcam-radius-sm);
	padding: 14px 8px;
	text-align: center;
	color: var(--wcam-teal);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
}
.wc-auth-benefit__icon {
	width: 28px; height: 28px;
	display: flex; align-items: center; justify-content: center;
}
.wc-auth-benefit__icon svg { width: 100%; height: 100%; }
.wc-auth-benefit__label { color: var(--wcam-teal); }

/* Form fields */
.wc-auth-field {
	position: relative;
	display: flex;
	align-items: center;
	background: #fff;
	border: 1px solid var(--wcam-line);
	border-radius: var(--wcam-radius-sm);
	margin: 0 0 12px;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.wc-auth-field:focus-within {
	border-color: var(--wcam-teal);
	box-shadow: 0 0 0 3px rgba(15, 118, 110, .12);
}
.wc-auth-field__icon {
	display: flex; align-items: center; justify-content: center;
	width: 44px; height: 44px;
	color: var(--wcam-mute);
	flex-shrink: 0;
}
.wc-auth-field__icon svg { width: 18px; height: 18px; }
.wc-auth-field input {
	flex: 1 1 auto;
	min-width: 0;
	height: 44px;
	padding: 0 12px 0 0;
	border: 0 !important;
	background: transparent !important;
	font-size: 15px !important;
	font-family: inherit !important;
	color: var(--wcam-ink) !important;
	outline: none !important;
	box-shadow: none !important;
}
.wc-auth-field input::placeholder {
	color: var(--wcam-mute);
	opacity: 1;
}
.wc-auth-field__toggle {
	width: 44px; height: 44px;
	background: transparent !important;
	border: 0 !important;
	color: var(--wcam-mute);
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	box-shadow: none !important;
}
.wc-auth-field__toggle:hover { color: var(--wcam-ink); }
.wc-auth-field__toggle svg { width: 18px; height: 18px; }

/* Make sure the form itself doesn't add gutters that would visually
 * narrow the primary submit relative to the ghost button below the form. */
.wc-auth-modal__body form {
	margin: 0;
	padding: 0;
	width: 100%;
}

/* Buttons */
.wc-auth-btn {
	display: block;
	width: 100% !important;
	box-sizing: border-box;
	height: 48px;
	border-radius: var(--wcam-radius-sm);
	border: 0 !important;          /* defeat theme global button-border */
	border-color: transparent !important;
	font-size: 15px;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
	box-shadow: none !important;
	outline: 0 !important;
	-webkit-tap-highlight-color: transparent;
}
.wc-auth-btn--primary {
	background: var(--wcam-teal) !important;
	color: #fff !important;
	border: 0 !important;          /* explicit kill of any red invalid-state border */
	border-color: transparent !important;
	margin-bottom: 10px;
}
.wc-auth-btn--primary:focus,
.wc-auth-btn--primary:focus-visible,
.wc-auth-btn--primary:invalid {
	outline: 0 !important;
	box-shadow: none !important;
	border-color: transparent !important;
}
.wc-auth-btn--primary:hover {
	background: var(--wcam-teal-dark) !important;
}
.wc-auth-btn--ghost {
	background: #fff !important;
	color: var(--wcam-ink) !important;
	border: 1px solid var(--wcam-line) !important;
	margin-bottom: 14px;
}
.wc-auth-btn--ghost:hover {
	border-color: var(--wcam-teal) !important;
	color: var(--wcam-teal) !important;
}

.btn-text, .btn-spinner { display: inline-block; }

/* Sign-in / Create-one footer link */
.wc-auth-switch {
	text-align: center;
	font-size: 14px;
	color: var(--wcam-ink-2);
	margin: 4px 0 0;
}
.wc-auth-switch a {
	color: var(--wcam-teal);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.wc-auth-switch a:hover { color: var(--wcam-teal-dark); }

.wc-auth-forgot {
	text-align: center;
	font-size: 13px;
	margin: 6px 0 12px;
}
.wc-auth-forgot a { color: var(--wcam-teal); }

/* Honeypot — hidden from humans (off-screen + zero-size + transparent)
 * but PRESENT in the DOM so bots see it and auto-fill. Cannot use
 * display:none / visibility:hidden because well-written bots skip those.
 * Real users see nothing. */
.wc-auth-honeypot {
	position: absolute !important;
	left: -10000px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}
.wc-auth-honeypot input { width: 1px; height: 1px; }

/* Cloudflare Turnstile widget — sits between the password row and the
 * primary submit. CF renders an iframe; we just give the wrapper some
 * vertical breathing room. */
.cf-turnstile {
	margin: 4px 0 14px;
	min-height: 65px;
}

/* Error messages */
.wc-auth-error {
	background: #FEF2F2;
	color: var(--wcam-red);
	border: 1px solid #FECACA;
	border-radius: 8px;
	padding: 8px 12px;
	font-size: 13px;
	margin: 4px 0 12px;
}

/* Success state (after register/login completes) */
.wc-auth-success {
	text-align: center;
	padding: 40px 12px;
}
.wc-auth-success svg {
	width: 56px; height: 56px;
	color: var(--wcam-teal);
	margin: 0 auto 10px;
}
.wc-auth-success h3 {
	font-size: 18px;
	margin: 0 0 4px;
}
.wc-auth-success p {
	color: var(--wcam-ink-2);
	margin: 0;
}

/* =========================================================================
 * Mobile: stack media on top of the form. The image becomes a hero band.
 * ========================================================================= */
@media (max-width: 720px) {
	.wc-auth-modal {
		grid-template-columns: 1fr;
		max-height: calc(100vh - 40px);
	}
	.wc-auth-modal__media {
		min-height: 220px;
		max-height: 240px;
	}
	.wc-auth-modal__media-overlay {
		top: 22px;
		width: 90%;
	}
	.wc-auth-modal__media-headline { font-size: 36px; }
	.wc-auth-modal__media-tag      { font-size: 11px; margin-top: 8px; }
	.wc-auth-modal__media-divider  { margin-top: 8px; }
	.wc-auth-modal__body {
		padding: 26px 22px 22px;
	}
	.wc-auth-headline {
		font-size: clamp(20px, 5vw, 24px);
		text-align: center;
	}
	.wc-auth-eyebrow {
		display: block;
		text-align: center;
	}
	.wc-auth-benefits {
		gap: 8px;
	}
}

@media (max-width: 420px) {
	.wc-auth-modal__media { min-height: 180px; }
	.wc-auth-modal__body  { padding: 20px 16px 16px; }
}