/**
 * Base layout of the membership pages and feedback dialog, enough for the
 * forms to be usable under any theme. Colors, fonts and finer styling come
 * from the theme, hooked into "itpro_membership_enqueue_assets".
 */

.membership {
	display: grid;
	gap: 2rem;
	padding-block: 2rem 3rem;
}

.membership__title {
	margin: 0;
}

.membership__grid {
	display: grid;
	gap: 2rem;
	align-items: start;
}

@media (min-width: 768px) {
	.membership__grid {
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-flow: column;
	}
}

.membership-intro,
.membership-panel {
	display: grid;
	gap: 1rem;
	align-content: start;
}

.membership-intro > *,
.membership-panel > * {
	margin: 0;
}

.membership-panel {
	padding: 1.5rem;
	border: 1px solid;
	border-radius: 8px;
}

.membership-notice {
	padding: .75rem 1rem;
	border-left: 4px solid;
}

/* Forms */

.membership-form {
	display: grid;
	gap: 1rem;
}

.form-field {
	display: grid;
	gap: .25rem;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.form-field__label {
	padding: 0;
	font-weight: 600;
}

.form-field__control {
	box-sizing: border-box;
	width: 100%;
	padding: .625rem .875rem;
	font: inherit;
}

.form-choices {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.25rem;
}

.form-check {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
}

.form-check input {
	flex-shrink: 0;
	margin: .2em 0 0;
}

.form-check__text {
	display: grid;
	gap: .25rem;
}

.form-field__error {
	margin: 0;
	font-size: .875em;
	font-weight: 600;
	color: #d10010;
}

.form-field__error:empty {
	display: none;
}

.form-field__help {
	margin: 0;
	font-size: .875em;
	opacity: .8;
}

.form-field__control[readonly] {
	opacity: .7;
	cursor: default;
}

.membership-subpanel {
	display: grid;
	gap: 1rem;
	margin-top: 1rem;
	padding-top: 1.5rem;
	border-top: 1px solid;
}

.membership-subpanel > * {
	margin: 0;
}

.form-info,
.membership-privacy,
.membership-link {
	margin: 0;
	font-size: .875em;
}

.membership-link {
	justify-self: start;
}

/* New password: tools and strength meter (password_field()) */

.password-tools {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem 1rem;
}

.password-tools__button {
	padding: 0;
	font: inherit;
	font-size: .875em;
	color: inherit;
	text-decoration: underline;
	background: none;
	border: 0;
	cursor: pointer;
}

.password-meter {
	display: flex;
	align-items: center;
	gap: .75rem;
	font-size: .875em;
}

.password-meter__bar {
	flex: 1;
	max-width: 12rem;
	height: .375rem;
	overflow: hidden;
	background-color: rgb(128 128 128 / 30%);
	border-radius: 999px;
}

.password-meter__bar > span {
	display: block;
	width: 0;
	height: 100%;
	background-color: #d10010;
	transition: width .2s;
}

.password-meter[data-level="1"] .password-meter__bar > span { width: 25%; }
.password-meter[data-level="2"] .password-meter__bar > span { width: 50%; background-color: #e08a00; }
.password-meter[data-level="3"] .password-meter__bar > span { width: 75%; background-color: #2bd8c2; }
.password-meter[data-level="4"] .password-meter__bar > span { width: 100%; background-color: #2bd8c2; }

.password-meter[data-level="0"] {
	display: none;
}

/* Feedback dialog */

.membership-feedback {
	width: min(32rem, calc(100vw - 2rem));
	padding: 2rem 1.5rem 1.5rem;
	text-align: center;
}

.membership-feedback::backdrop {
	background-color: rgb(0 0 0 / 70%);
}

.membership-feedback p {
	margin: 0;
}

.membership-feedback p + p {
	margin-top: .5rem;
}

.membership-feedback__close {
	position: absolute;
	top: .5rem;
	right: .5rem;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	font-size: 1.75rem;
	line-height: 1;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}