/*
 * VNK Members Access: base look of the forms.
 *
 * Selectors are just strong enough to beat the theme's default button and
 * input styles (Hello Elementor reset, Elementor kit), so the forms never pick
 * up theme colours by accident. Everything here is overridden from the
 * Elementor Style tab (VNK widgets or the Shortcode widget), whose selectors
 * are stronger. Nothing uses !important.
 */
.vnka-root {
	max-width: 520px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}
.vnka-root.vnka-gen { max-width: 640px; }
.vnka-root,
.vnka-root *,
.vnka-root *::before,
.vnka-root *::after { box-sizing: border-box; }

.vnka-root .vnka-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
}
.vnka-root .vnka-form[hidden] { display: none; }
.vnka-root .vnka-label {
	display: block;
	margin: 0 0 6px;
	font-weight: 600;
}
.vnka-root .vnka-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
	white-space: nowrap;
}

/* Inputs */
.vnka-root .vnka-input {
	display: block;
	width: 100%;
	margin: 0;
	padding: 10px 14px;
	border: 1px solid #c9d3d0;
	border-radius: 6px;
	background-color: #fff;
	color: #1d2b28;
	font: inherit;
	line-height: 1.4;
	box-shadow: none;
	outline: none;
	transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.vnka-root .vnka-input:focus {
	border-color: #1f5c4f;
	box-shadow: 0 0 0 3px rgba(31, 92, 79, .15);
}
.vnka-root .vnka-code-input {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 1.25em;
	letter-spacing: .18em;
	text-transform: lowercase;
}

/* Main button */
.vnka-root .vnka-button {
	display: inline-block;
	align-self: flex-start;
	margin: 0;
	padding: 12px 22px;
	border: 0 solid transparent;
	border-radius: 6px;
	background-color: #1f5c4f;
	background-image: none;
	color: #fff;
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	box-shadow: none;
	transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s;
}
.vnka-root .vnka-button:hover,
.vnka-root .vnka-button:focus {
	background-color: #17483e;
	color: #fff;
	text-decoration: none;
}
.vnka-root .vnka-button[disabled] { opacity: .6; cursor: progress; }

/* Secondary button (Copy password) */
.vnka-root .vnka-button-secondary {
	display: inline-block;
	margin: 0;
	padding: 7px 14px;
	border: 1px solid #1f5c4f;
	border-radius: 6px;
	background-color: #fff;
	background-image: none;
	color: #1f5c4f;
	font: inherit;
	font-size: .92em;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	box-shadow: none;
	transition: background-color .15s, color .15s, border-color .15s;
}
.vnka-root .vnka-button-secondary:hover,
.vnka-root .vnka-button-secondary:focus {
	background-color: #1f5c4f;
	color: #fff;
}

/* "Log out" link */
.vnka-root .vnka-link {
	display: inline;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-size: .92em;
	text-decoration: underline;
	text-transform: none;
	opacity: .75;
	cursor: pointer;
	box-shadow: none;
}
.vnka-root .vnka-link:hover,
.vnka-root .vnka-link:focus {
	background: none;
	color: inherit;
	opacity: 1;
}

/* Messages */
.vnka-root .vnka-msg {
	margin: 0 0 14px;
	padding: 11px 14px;
	border: 1px solid transparent;
	border-radius: 6px;
	line-height: 1.45;
}
.vnka-root .vnka-msg[hidden] { display: none; }
.vnka-root .vnka-msg--error { background-color: #fdeceb; border-color: #f2c4c0; color: #8a1f15; }
.vnka-root .vnka-msg--ok { background-color: #e9f5ee; border-color: #bfe0cb; color: #1c5a35; }
.vnka-root .vnka-gen-error { margin: 14px 0 0; }
.vnka-root .vnka-access-actions { margin: 0; display: flex; flex-direction: column; }

/* Helper texts */
.vnka-root .vnka-hint,
.vnka-root .vnka-gen-note {
	margin: 0;
	font-size: .9em;
	opacity: .75;
}

/* Generator result (the form above it is hidden once a password is created) */
.vnka-root .vnka-gen-result {
	margin-top: 0;
	padding: 18px;
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 8px;
	background-color: rgba(0, 0, 0, .02);
}
.vnka-root .vnka-gen-result[hidden] { display: none; }
.vnka-root .vnka-gen-code {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin-bottom: 18px;
}
.vnka-root .vnka-gen-code .vnka-label { margin: 0; }
.vnka-root .vnka-gen-result-text { margin: 0 0 4px; }
.vnka-root .vnka-gen-code-value {
	display: inline-block;
	padding: 4px 12px;
	border: 1px dashed rgba(0, 0, 0, .25);
	border-radius: 6px;
	background-color: #fff;
	color: #1d2b28;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 1.6em;
	font-weight: 700;
	letter-spacing: .14em;
	user-select: all;
}
.vnka-root .vnka-gen-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	margin-top: 12px;
}
.vnka-root .vnka-gen-logout { margin: 22px 0 0; }