/*
 * Elementor Shop Login — the hggorras boutique sign-in screen.
 *
 * Values are taken from the reference app's own stylesheet
 * (ShopHome-YA8FC6HJ.css, `.login-*` and `.form-field*` rules) so the card
 * matches it rather than being eyeballed from a screenshot. Class names are
 * prefixed `espl-` instead of reusing the reference's `login-card` /
 * `form-field`, because those generic names are exactly what a theme or
 * another plugin is likely to style.
 *
 * Specificity note. On this site two things routinely beat a plugin stylesheet
 * regardless of source order: Elementor core's `.elementor img{...}` at
 * (0,1,1), and Elementor's per-page generated rules at (0,4,0). The logo image
 * therefore carries `!important` on the four properties Elementor claims, and
 * the form controls are selected through the card so they sit at (0,2,0)
 * rather than (0,1,0). Everything else is a plain declaration.
 */

.espl {
	--espl-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

	--espl-gold: #cfa143;
	--espl-grad-a: #aa771c;
	--espl-grad-b: #f5dfa0;
	--espl-grad-c: #b38f3d;

	--espl-bg: #f4f4f6;
	--espl-card-bg: rgba(255, 255, 255, 0.95);
	--espl-card-border: #e5e5e5;

	--espl-text: #262626;
	--espl-muted: #737373;
	--espl-faint: #a3a3a3;
	--espl-ink: #070708;

	--espl-input-bg: #fafafa;
	--espl-input-border: #e5e5e5;

	--espl-error: #e11d48;
	--espl-error-bg: #fff1f2;
	--espl-error-border: #fecdd3;

	--espl-radius-card: 24px;
	--espl-radius-field: 12px;
	--espl-card-width: 448px;
	--espl-logo-size: 150px;

	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	/* One full screen by default, so the grey field reaches the bottom of the
	   window instead of leaving a white band under the card. The value comes
	   from the widget's Minimum Height control; this is the no-Elementor
	   fallback. */
	min-height: var(--espl-min-height, 100vh);
	/* The toolbar and the copyright are both absolutely positioned, so the
	   section reserves room for them. Invisible whenever the card is shorter
	   than the container, which is the normal case. */
	padding: 76px 16px 68px;
	overflow: hidden;
	color: var(--espl-text);
	background: var(--espl-bg);
	font-family: var(--espl-font);
}

.espl,
.espl *,
.espl *::before,
.espl *::after {
	box-sizing: border-box;
}

/* The reference is a fixed-position modal covering the storefront. Kept as an
   option, but not the default: on My Account the card belongs under the site
   header, not on top of it. */
.espl--overlay {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 120;
	min-height: 100vh;
}

/* ---- Background glow ---- */
.espl__glow {
	position: absolute;
	border-radius: 999px;
	pointer-events: none;
}

.espl__glow--top {
	top: 25%;
	left: 50%;
	width: 500px;
	height: 500px;
	background: radial-gradient(circle, rgba(207, 161, 67, 0.04), transparent 70%);
	filter: blur(80px);
	transform: translate(-50%, -50%);
}

.espl__glow--bottom {
	right: 40px;
	bottom: 0;
	width: 300px;
	height: 300px;
	background: radial-gradient(circle, rgba(207, 161, 67, 0.01), transparent 70%);
	filter: blur(60px);
}

/* ---- Corner toolbar ---- */
.espl-toolbar {
	position: absolute;
	top: 24px;
	right: 24px;
	z-index: 10;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 6px 16px;
	border: 1px solid rgba(229, 229, 229, 0.8);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.8);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.espl-toolbar__label {
	color: var(--espl-faint);
	font-size: 10px;
	font-weight: 500;
	white-space: nowrap;
}

.espl-toolbar__languages {
	display: flex;
	gap: 6px;
}

.espl-toolbar__lang {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	border: 0;
	border-radius: 999px;
	color: var(--espl-muted);
	background: transparent;
	font-family: var(--espl-font);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.3px;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.3s ease, background 0.3s ease;
}

.espl-toolbar__lang:hover {
	color: var(--espl-text);
}

.espl-toolbar__lang.is-active {
	color: var(--espl-ink);
	background: linear-gradient(90deg, var(--espl-grad-c), #e6c875);
	box-shadow: 0 2px 10px rgba(230, 200, 117, 0.3);
}

.espl-toolbar__divider {
	width: 1px;
	height: 16px;
	background: var(--espl-card-border);
}

.espl-toolbar__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px;
	color: var(--espl-faint);
	background: transparent;
	text-decoration: none;
	transition: color 0.3s ease;
}

.espl-toolbar__close:hover {
	color: #404040;
}

/* ---- Card ---- */
.espl-card {
	position: relative;
	z-index: 10;
	width: 100%;
	max-width: var(--espl-card-width, 448px);
	padding: 32px;
	border: 1px solid var(--espl-card-border);
	border-radius: var(--espl-radius-card, 24px);
	background: var(--espl-card-bg);
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.06);
	/* The card is 95% opaque, so the background's glow shows faintly through it
	   — the same pairing the reference uses. */
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
}

.espl-card__heading {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 32px;
}

.espl-card__heading h2 {
	margin: 24px 0 0;
	color: var(--espl-muted);
	font-family: var(--espl-font);
	font-size: 14px;
	font-weight: 300;
	letter-spacing: 2.8px;
	line-height: 1.4;
	text-align: center;
	text-transform: uppercase;
}

/* ---- Brand lockup ---- */
.espl-brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

/* The four !important declarations below are the Elementor-core fix. Elementor
   ships `.elementor img{border:none;border-radius:0;box-shadow:none;height:auto}`
   at specificity (0,1,1), which outranks this rule's (0,1,0) and silently
   undid the tile: no gold hairline, square corners, no drop shadow. Width and
   height are written inline on the element instead, which outranks the same
   rule without needing !important — see the widget's render method. */
.espl-brand__image {
	display: block;
	flex: none;
	object-fit: cover;
	border: 1px solid rgba(207, 161, 67, 0.3) !important;
	border-radius: 16px !important;
	box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4) !important;
}

.espl-brand__text {
	margin-top: 16px;
	color: transparent;
	background: linear-gradient(90deg, var(--espl-gold), #f9e49b, var(--espl-gold));
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-family: var(--espl-font);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 5px;
	line-height: 1.4;
	text-align: center;
}

/* ---- Form ---- */
.espl-card .espl-form {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.espl-card .espl-form__error {
	padding: 12px 16px;
	border: 1px solid var(--espl-error-border);
	border-radius: var(--espl-radius-field, 12px);
	color: var(--espl-error);
	background: var(--espl-error-bg);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
}

.espl-card .espl-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
}

.espl-card .espl-field__label {
	color: var(--espl-gold);
	font-family: var(--espl-font);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 1.2px;
	line-height: 1.4;
	text-transform: uppercase;
}

.espl-card .espl-field__input {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid var(--espl-input-border);
	border-radius: var(--espl-radius-field, 12px);
	outline: none;
	color: var(--espl-text);
	background: var(--espl-input-bg);
	font-family: var(--espl-font);
	font-size: 14px;
	line-height: 1.5;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
	-webkit-appearance: none;
	appearance: none;
}

.espl-card .espl-field__input::placeholder {
	color: var(--espl-faint);
	opacity: 1;
}

.espl-card .espl-field__input:focus {
	border-color: var(--espl-gold);
	box-shadow: 0 0 0 1px rgba(207, 161, 67, 0.2);
}

/* ---- Submit ---- */
.espl-card .espl-submit {
	position: relative;
	display: block;
	width: 100%;
	padding: 16px;
	overflow: hidden;
	border: 0;
	border-radius: var(--espl-radius-field, 12px);
	color: var(--espl-ink);
	background: linear-gradient(90deg, var(--espl-grad-a), var(--espl-grad-b), var(--espl-grad-c));
	box-shadow: 0 4px 20px rgba(207, 161, 67, 0.25);
	font-family: var(--espl-font);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 2.8px;
	line-height: 1.2;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.5s ease, transform 0.5s ease, opacity 0.3s ease;
}

.espl-card .espl-submit span {
	position: relative;
	z-index: 1;
}

/* The reference's hover sheen: an empty <i> stretched over the button. */
.espl-card .espl-submit i {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(255, 255, 255, 0.2);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.espl-card .espl-submit:hover {
	background: linear-gradient(90deg, var(--espl-grad-c), #fbf5b7, var(--espl-grad-a));
	transform: translateY(-2px);
}

.espl-card .espl-submit:hover i {
	opacity: 1;
}

.espl-card .espl-submit:active {
	transform: translateY(0);
}

/* Set by shop-login.js between submit and navigation. */
.espl-card .espl-submit:disabled,
.espl-card .espl-submit.is-busy {
	opacity: 0.75;
	cursor: progress;
	transform: none;
}

/* ---- Remember me (opt-in; the reference has no checkbox) ---- */
.espl-card .espl-remember {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--espl-muted);
	font-size: 12px;
	line-height: 1.4;
	cursor: pointer;
}

.espl-card .espl-remember input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.espl-card .espl-remember__box {
	display: inline-block;
	width: 16px;
	height: 16px;
	flex: none;
	border: 1px solid var(--espl-input-border);
	border-radius: 4px;
	background: var(--espl-input-bg);
	transition: background 0.2s ease, border-color 0.2s ease;
}

.espl-card .espl-remember input:checked + .espl-remember__box {
	border-color: var(--espl-gold);
	background: var(--espl-gold);
	box-shadow: inset 0 0 0 3px var(--espl-input-bg);
}

.espl-card .espl-remember input:focus-visible + .espl-remember__box {
	box-shadow: inset 0 0 0 3px var(--espl-input-bg), 0 0 0 2px rgba(207, 161, 67, 0.35);
}

/* ---- Copyright ---- */
.espl-copyright {
	position: absolute;
	bottom: 24px;
	z-index: 10;
	left: 16px;
	right: 16px;
	margin: 0;
	color: var(--espl-faint);
	font-family: var(--espl-font);
	font-size: 10px;
	font-weight: 300;
	letter-spacing: 4px;
	line-height: 1.4;
	text-align: center;
	text-transform: uppercase;
}

/* ---- Signed-in members ---- */
.espl-account {
	width: 100%;
	max-width: 1270px;
	margin: 0 auto;
	padding: 32px 24px 64px;
}

/* The account area is WooCommerce's own screen — dashboard, orders, addresses.
   The wrapper only gives it the page's breathing room; its internals are left
   to WooCommerce and the theme rather than restyled from here. */
.espl-account--plain {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 320px;
}

.espl-account__card {
	padding: 32px;
	border: 1px solid var(--espl-card-border);
	border-radius: var(--espl-radius-card, 24px);
	background: var(--espl-card-bg);
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.06);
	text-align: center;
}

.espl-account__welcome {
	margin: 0 0 16px;
	color: var(--espl-text);
	font-size: 14px;
}

.espl-account__logout {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 8px 24px;
	border-radius: var(--espl-radius-field, 12px);
	color: var(--espl-ink);
	background: linear-gradient(90deg, var(--espl-grad-a), var(--espl-grad-b), var(--espl-grad-c));
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.4px;
	text-decoration: none;
	text-transform: uppercase;
}

/* ---- Responsive (same breakpoint the reference uses) ---- */
@media (max-width: 1024px) {
	/* dvh, not vh: on mobile Safari and Chrome 100vh includes the area behind
	   the collapsing toolbar, which would push the card's centre off-centre and
	   the copyright line under the controls. The max() keeps a taller height
	   configured in the widget, and only ever floors — never caps — it. */
	.espl {
		min-height: max(var(--espl-min-height, 100dvh), 100dvh);
		padding: max(72px, env(safe-area-inset-top)) 16px max(52px, env(safe-area-inset-bottom));
	}

	.espl-toolbar {
		top: max(12px, env(safe-area-inset-top));
		right: 12px;
		gap: 5px;
		padding: 4px 6px 4px 10px;
	}

	.espl-toolbar__label,
	.espl-toolbar__divider {
		display: none;
	}

	.espl-toolbar__languages {
		gap: 2px;
	}

	.espl-toolbar__lang {
		min-width: 40px;
		min-height: 40px;
		justify-content: center;
		padding: 8px;
	}

	.espl-toolbar__close {
		width: 40px;
		height: 40px;
		padding: 8px;
	}

	.espl-card {
		max-width: min(var(--espl-card-width, 448px), 420px);
		padding: 28px 20px;
		border-radius: 20px;
	}

	.espl-card__heading {
		margin-bottom: 24px;
	}

	.espl-card__heading h2 {
		margin-top: 18px;
		font-size: 13px;
		letter-spacing: 1.8px;
	}

	.espl-brand__image {
		max-width: 120px;
		height: auto !important;
	}

	.espl-card .espl-form {
		gap: 20px;
	}

	/* 16px, not 14px: anything smaller makes iOS zoom the page on focus. */
	.espl-card .espl-submit {
		min-height: 52px;
		padding: 15px 18px;
		font-size: 16px;
		letter-spacing: 2px;
	}

	.espl-card .espl-field__input {
		min-height: 52px;
		padding: 14px 16px;
		font-size: 16px;
	}

	.espl-copyright {
		bottom: max(14px, env(safe-area-inset-bottom));
		font-size: 8px;
		letter-spacing: 1.5px;
	}
}

/* Short landscape phones: the card wins over the copyright line. */
@media (max-height: 620px) and (max-width: 1024px) {
	.espl {
		align-items: flex-start;
	}

	.espl-copyright {
		display: none;
	}
}