/**
 * KISQEA :: Sign-in / create-account popup and members-only gate
 *
 * Loaded for visitors only. The card is the same in both places; the gate
 * adds a full-screen photographic backdrop, the header popup sits over the
 * shared .kq-overlay.
 */

/* ==========================================================================
   Card
   ========================================================================== */

.kq-auth {
	position: relative;
	width: 100%;
	max-width: 30rem;
	padding: 2rem 1.5rem 1.5rem;
	background: var(--kq-cream);
	border: 1px solid rgba(182, 144, 101, .35);
	border-radius: var(--kq-radius-lg);
	box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .55);
	color: var(--kq-body-color);
}

@media (min-width: 640px) {
	.kq-auth { padding: 2.5rem 2.5rem 2rem; }
}

/* ==========================================================================
   Two columns

   Copy on the left, forms on the right, from the tablet breakpoint up. One
   column below that, and one column everywhere when the layout is set to
   "stacked" in Theme Options.
   ========================================================================== */

.kq-auth--split { max-width: 58rem; }

@media (min-width: 880px) {
	.kq-auth--split {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 3rem;
		align-items: start;
		padding: 3rem;
	}

	/* The rule across the top edge spans the whole card. */
	.kq-auth--split::before { left: 3rem; right: 3rem; }

	/* Left column reads as a block of copy, not a centred dialog. */
	.kq-auth--split .kq-auth__head,
	.kq-auth--split .kq-auth__foot { text-align: left; }

	.kq-auth--split .kq-auth__brand { justify-content: flex-start; }
	.kq-auth--split .kq-auth__legal { justify-content: flex-start; }

	.kq-auth--split .kq-auth__title { font-size: clamp(2rem, 3.2vw, 2.75rem); }

	.kq-auth--split .kq-auth__aside {
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
		height: 100%;
	}

	/* Footnote and legal links sit at the bottom of the column. */
	.kq-auth--split .kq-auth__foot {
		margin-top: auto;
		padding-top: 1.5rem;
	}

	.kq-auth--split .kq-auth__head { margin-bottom: 0; }

	/* A hairline between the columns. */
	.kq-auth--split .kq-auth__main {
		padding-left: 3rem;
		border-left: 1px solid rgba(182, 144, 101, .28);
	}
}

/*
 * Below the breakpoint the two columns become one. Stacking them in source
 * order would bury the form under the contact details and the footnote, so
 * the heading stays on top and everything else moves below the form. The
 * aside becomes `display: contents` purely so its children can be ordered
 * alongside the form; it is a plain div, so nothing is lost by doing that.
 */
@media (max-width: 879px) {
	.kq-auth--split {
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
	}

	.kq-auth--split .kq-auth__aside { display: contents; }

	.kq-auth--split .kq-auth__head { order: 1; margin-bottom: 0; }
	.kq-auth--split .kq-auth__main { order: 2; }
	.kq-auth--split .kq-auth__details { order: 3; }
	.kq-auth--split .kq-auth__social { order: 4; }
	.kq-auth--split .kq-auth__foot { order: 5; }
}

/* The left column's free text, used for contact details and the like. */
.kq-auth__details {
	font-size: .9375rem;
	line-height: 1.7;
	color: var(--kq-body-color);
}

.kq-auth__details p { margin: 0 0 .75rem; }
.kq-auth__details p:last-child { margin-bottom: 0; }
.kq-auth__details strong { color: var(--kq-heading-color); }

.kq-auth__details a { color: var(--kq-gold); text-decoration: underline; text-underline-offset: 2px; }
.kq-auth__details a:hover { color: var(--kq-gold-hover); }

.kq-auth__social { justify-content: center; }

@media (min-width: 880px) {
	.kq-auth--split .kq-auth__social { justify-content: flex-start; }
}

/* ==========================================================================
   As an Elementor widget

   Dropped into a column of someone else's layout, so it brings no card of its
   own: no background, no border, no shadow, no width cap.
   ========================================================================== */

.kq-auth--widget {
	max-width: none;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.kq-auth--widget::before { content: none; }
.kq-auth--widget .kq-auth__main { padding-left: 0; border-left: 0; }
.kq-auth--widget .kq-auth__head,
.kq-auth--widget .kq-auth__foot { text-align: left; }
.kq-auth--widget .kq-auth__brand,
.kq-auth--widget .kq-auth__legal { justify-content: flex-start; }

/* A single form needs no tab strip. */
.kq-auth--login .kq-auth__tabs,
.kq-auth--register .kq-auth__tabs,
.kq-auth--login .kq-auth__switch,
.kq-auth--register .kq-auth__switch { display: none; }

/*
 * An Elementor template supplies its own layout. The card keeps its surface,
 * because the gate sits on a photographic backdrop and text on top of that is
 * unreadable; the padding goes, so the template runs edge to edge and controls
 * its own spacing. A designer who wants a different surface sets a background
 * on their own section, which paints over this one.
 */
.kq-auth--builder {
	max-width: 64rem;
	padding: 0;
	overflow: hidden;
}

.kq-auth--builder::before { content: none; }

/* Thin gold rule across the top edge. */
.kq-auth::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 2rem;
	right: 2rem;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--kq-gold), transparent);
}

.kq-auth__head { margin-bottom: 1.5rem; text-align: center; }

.kq-auth__brand {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .625rem;
	margin-bottom: 1.25rem;
	color: var(--kq-dark);
}

.kq-auth__brand .kq-brand__logo { max-height: 3rem; width: auto; }

.kq-auth__brand .kq-brand__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid var(--kq-gold);
	color: var(--kq-gold);
	font-family: var(--kq-font-heading);
	font-size: 1.125rem;
}

.kq-auth__brand .kq-brand__text {
	font-family: var(--kq-font-heading);
	font-size: 1.25rem;
	letter-spacing: .2em;
	text-transform: uppercase;
}

.kq-auth__eyebrow {
	display: block;
	margin-bottom: .5rem;
	color: var(--kq-gold);
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
}

.kq-auth__title {
	margin: 0 0 .625rem;
	color: var(--kq-heading-color);
	font-family: var(--kq-font-heading);
	font-size: 1.75rem;
	font-weight: var(--kq-heading-weight);
	line-height: 1.15;
}

@media (min-width: 640px) {
	.kq-auth__title { font-size: 2rem; }
}

.kq-auth__intro {
	margin: 0 auto;
	max-width: 24rem;
	color: var(--kq-muted);
	font-size: .9375rem;
	line-height: 1.6;
}

/* Notices -------------------------------------------------------------- */

.kq-auth__notices { margin-bottom: 1.25rem; font-size: .875rem; }
.kq-auth__notices .woocommerce-error,
.kq-auth__notices .woocommerce-message,
.kq-auth__notices .woocommerce-info { margin: 0; }

/* Tabs ----------------------------------------------------------------- */

.kq-auth__tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin-bottom: 1.5rem;
	border-bottom: 1px solid var(--kq-border);
}

.kq-auth__tab {
	position: relative;
	padding: .875rem .5rem;
	border: 0;
	background: none;
	color: var(--kq-muted);
	font-family: var(--kq-font-body);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color var(--kq-speed) var(--kq-ease);
}

.kq-auth__tab::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: var(--kq-gold);
	transform: scaleX(0);
	transition: transform var(--kq-speed) var(--kq-ease);
}

.kq-auth__tab:hover { color: var(--kq-heading-color); }
.kq-auth__tab[aria-selected="true"] { color: var(--kq-heading-color); }
.kq-auth__tab[aria-selected="true"]::after { transform: scaleX(1); }

/* Fields --------------------------------------------------------------- */

/* WooCommerce boxes form.login / form.register; inside the card that doubles up. */
.kq-auth .kq-auth__form,
.woocommerce .kq-auth form.login,
.woocommerce .kq-auth form.register {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.kq-auth__field { margin: 0 0 1rem; }

/* First and last name sit side by side once there is room for them. */
.kq-auth__names {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 1rem;
}

@media (min-width: 420px) {
	.kq-auth__names { grid-template-columns: 1fr 1fr; }
}

.kq-auth__req {
	margin-left: .125rem;
	color: var(--kq-gold);
}

.kq-auth__field label {
	margin-bottom: .375rem;
	color: var(--kq-heading-color);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.kq-auth input[type="text"],
.kq-auth input[type="email"],
.kq-auth input[type="password"] {
	padding: .8125rem 1rem;
	background: var(--kq-white);
	border-color: var(--kq-cream-dark);
	font-size: 1rem; /* 16px keeps iOS from zooming on focus. */
}

.kq-auth__password { position: relative; display: block; }
.kq-auth__password input { padding-right: 3rem !important; }

.kq-auth__reveal {
	position: absolute;
	top: 50%;
	right: .375rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--kq-muted);
	cursor: pointer;
	transform: translateY(-50%);
}

.kq-auth__reveal:hover { color: var(--kq-gold); }

/* WooCommerce's script adds its own reveal button to every password field. */
.kq-auth .show-password-input { display: none !important; }
.kq-auth__reveal svg { width: 1.125rem; height: 1.125rem; }
.kq-auth__reveal .kq-auth__eye-hide,
.kq-auth__reveal[aria-pressed="true"] .kq-auth__eye-show { display: none; }
.kq-auth__reveal[aria-pressed="true"] .kq-auth__eye-hide { display: block; }

.kq-auth__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .5rem 1rem;
	margin: .25rem 0 1.25rem;
	font-size: .8125rem;
}

.kq-auth__check {
	display: inline-flex;
	align-items: center;
	margin: 0;
	color: var(--kq-body-color);
	font-size: .8125rem;
	font-weight: 400;
	cursor: pointer;
}

.kq-auth__link {
	padding: 0;
	border: 0;
	background: none;
	color: var(--kq-gold);
	font: inherit;
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: rgba(182, 144, 101, .4);
	text-underline-offset: 3px;
	cursor: pointer;
}

.kq-auth__link:hover { color: var(--kq-gold-hover); text-decoration-color: currentColor; }

.kq-auth__hint { margin: 0 0 1rem; color: var(--kq-muted); font-size: .8125rem; }

/* WooCommerce's privacy-policy text, printed on woocommerce_register_form. */
.kq-auth .woocommerce-privacy-policy-text { margin-bottom: 1.25rem; color: var(--kq-muted); font-size: .75rem; line-height: 1.6; }
.kq-auth .woocommerce-privacy-policy-text p { margin: 0; }

.kq-auth__submit { width: 100%; padding-block: 1rem; }

.kq-auth__switch {
	margin: 1.25rem 0 0;
	color: var(--kq-muted);
	font-size: .875rem;
	text-align: center;
}

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.kq-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Footer --------------------------------------------------------------- */

.kq-auth__foot {
	margin-top: 1.75rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--kq-border);
	text-align: center;
}

.kq-auth__disclaimer {
	margin: 0;
	color: var(--kq-muted);
	font-size: .6875rem;
	letter-spacing: .08em;
	line-height: 1.6;
	text-transform: uppercase;
}

.kq-auth__legal {
	display: flex;
	justify-content: center;
	gap: 1.25rem;
	margin-top: .625rem;
	font-size: .75rem;
}

.kq-auth__legal a { color: var(--kq-muted); }
.kq-auth__legal a:hover { color: var(--kq-gold); }

/* ==========================================================================
   Members-only gate
   ========================================================================== */

body.kq-gate-body {
	min-height: 100vh;
	padding-bottom: 0;
	background: var(--kq-dark);
}

.kq-gate {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	min-height: 100dvh;
	padding: 2rem var(--kq-gutter);
	overflow: hidden;
	isolation: isolate;
}

.kq-gate__backdrop {
	position: fixed;
	inset: -2rem;
	z-index: -1;
	background-color: var(--kq-dark);
	background-position: center;
	background-size: cover;
	filter: blur(6px) saturate(.9);
	transform: scale(1.04);
}

.kq-gate__backdrop::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at center, rgba(8, 18, 11, .45) 0%, rgba(8, 18, 11, .88) 70%),
		linear-gradient(rgba(8, 18, 11, .35), rgba(8, 18, 11, .35));
}

.kq-auth--gate { animation: kq-auth-in .5s var(--kq-ease) both; }

/* A builder layout gets more room than the built-in card. */
.kq-auth--builder.kq-auth--gate { width: 100%; }

@keyframes kq-auth-in {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: none; }
}

/* ==========================================================================
   Header popup
   ========================================================================== */

.kq-auth-modal {
	position: fixed;
	inset: 0;
	z-index: var(--kq-z-modal);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 1.5rem var(--kq-gutter);
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--kq-speed) var(--kq-ease), visibility var(--kq-speed) var(--kq-ease);
}

@media (min-height: 760px) {
	.kq-auth-modal { align-items: center; }
}

.kq-auth-modal.kq-is-active { opacity: 1; visibility: visible; }

.kq-auth--modal {
	margin-block: auto;
	transform: translateY(12px);
	transition: transform var(--kq-speed) var(--kq-ease);
}

.kq-auth-modal.kq-is-active .kq-auth--modal { transform: none; }

.kq-auth__close {
	position: absolute;
	top: .75rem;
	right: .75rem;
	display: inline-flex;
	padding: .5rem;
	border: 0;
	background: none;
	color: var(--kq-muted);
	cursor: pointer;
}

.kq-auth__close:hover { color: var(--kq-heading-color); }
.kq-auth__close svg { width: 1.25rem; height: 1.25rem; }

@media (min-width: 880px) {
	.kq-auth--split .kq-auth__close { top: 1.25rem; right: 1.25rem; }
}

/* Sits over the template, which has no padding of its own to clear it. */
.kq-auth--builder .kq-auth__close {
	z-index: 2;
	background: var(--kq-cream);
	border-radius: 50%;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
}