/**
 * Account endpoint forms.
 *
 * A logged-out visitor on the dashboard sees an Elementor login widget, and the WooCommerce
 * lost password and reset password forms are swapped into that widget's place on the
 * endpoints it cannot handle. WooCommerce ships those forms with its two-column
 * form-row-first / form-row-last floats, which on a one-field form leaves a 47% wide input
 * sitting above a full width button. These rules stack the rows and match the pill fields
 * and dark button of the login widget, so both states of the card read as one design.
 *
 * The widget wrapper already carries the 60% desktop and 100% tablet width plus the
 * centering, so nothing here sets an outer width.
 *
 * On specificity. Two sheets outrank a single class here and both had to be beaten:
 *   .woocommerce form .form-row-first             (0,3,0)  woocommerce-layout.css, width 47%
 *   .woocommerce form .form-row input.input-text  (0,3,2)  Kit custom CSS, radius 4px
 * The wrapper class is therefore tripled, landing the row rules at (0,4,0) and the field
 * rules at (0,4,1). Both clear the competition on class count alone, so neither depends on
 * stylesheet load order and no !important is needed anywhere in this file.
 */

.gqtu-account-endpoint,
.gqtu-account-endpoint .woocommerce,
.gqtu-account-endpoint form {
	width: 100%;
}

.gqtu-account-endpoint form {
	margin: 0;
}

/* Intro copy above the fields. */
.gqtu-account-endpoint form > p:not(.form-row) {
	margin: 0 0 20px;
	color: var(--gqtu-muted, #5D7480);
	line-height: 1.6;
}

/* ------------------------------------------------------------------- rows */

/* Unfloat WooCommerce's two-column grid. The card is too narrow to carry columns. */
.gqtu-account-endpoint.gqtu-account-endpoint.gqtu-account-endpoint .form-row,
.gqtu-account-endpoint.gqtu-account-endpoint.gqtu-account-endpoint .form-row-first,
.gqtu-account-endpoint.gqtu-account-endpoint.gqtu-account-endpoint .form-row-last {
	display: block;
	float: none;
	box-sizing: border-box;
	width: 100%;
	margin: 0 0 16px;
	padding: 0;
}

.gqtu-account-endpoint.gqtu-account-endpoint.gqtu-account-endpoint .form-row:last-of-type {
	margin-bottom: 0;
}

/* Float clears with nothing left to clear. */
.gqtu-account-endpoint .clear {
	display: none;
}

.gqtu-account-endpoint label {
	display: block;
	padding-bottom: 10px;
	color: var(--gqtu-title, #0F2A3C);
	font-weight: 500;
	line-height: 1.4;
}

.gqtu-account-endpoint .required {
	color: var(--gqtu-error, #D0342C);
	text-decoration: none;
}

/* ----------------------------------------------------------------- fields */

/*
 * Matched to the Sign In fields of the login widget in the same card: white ground, the
 * Kit's own #C7D0D1 line colour, and the widget's 30px pill. The border colour is literal
 * rather than a token because the thing being matched is the Kit value, not the buy box.
 */
.gqtu-account-endpoint.gqtu-account-endpoint.gqtu-account-endpoint input.input-text,
.gqtu-account-endpoint.gqtu-account-endpoint.gqtu-account-endpoint input[type="text"],
.gqtu-account-endpoint.gqtu-account-endpoint.gqtu-account-endpoint input[type="email"],
.gqtu-account-endpoint.gqtu-account-endpoint.gqtu-account-endpoint input[type="password"] {
	display: block;
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 12px 20px;
	border: 1px solid #C7D0D1;
	border-radius: 30px;
	background-color: #FFFFFF;
	color: var(--gqtu-title, #0F2A3C);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.4;
	box-shadow: none;
}

.gqtu-account-endpoint.gqtu-account-endpoint.gqtu-account-endpoint input.input-text:focus,
.gqtu-account-endpoint.gqtu-account-endpoint.gqtu-account-endpoint input[type="text"]:focus,
.gqtu-account-endpoint.gqtu-account-endpoint.gqtu-account-endpoint input[type="email"]:focus,
.gqtu-account-endpoint.gqtu-account-endpoint.gqtu-account-endpoint input[type="password"]:focus {
	outline: none;
	border-color: var(--gqtu-accent, #31E38D);
	box-shadow: 0 0 0 3px rgba(49, 227, 141, 0.25);
}

/* Reveal toggle. Not rendered by the current reset template, kept for when it is. */
.gqtu-account-endpoint .password-input {
	display: block;
	position: relative;
	width: 100%;
}

.gqtu-account-endpoint.gqtu-account-endpoint.gqtu-account-endpoint .password-input input {
	padding-right: 52px;
}

.gqtu-account-endpoint .show-password-input {
	position: absolute;
	top: 50%;
	right: 18px;
	transform: translateY(-50%);
	cursor: pointer;
}

.gqtu-account-endpoint .woocommerce-password-strength {
	margin: 10px 0 0;
	padding: 8px 16px;
	border-radius: 12px;
	font-size: 13px;
	line-height: 1.4;
	text-align: left;
}

.gqtu-account-endpoint .woocommerce-password-hint {
	display: block;
	margin-top: 8px;
	color: var(--gqtu-muted, #5D7480);
	font-size: 13px;
	line-height: 1.5;
}

/* ----------------------------------------------------------------- button */

.gqtu-account-endpoint.gqtu-account-endpoint.gqtu-account-endpoint .woocommerce-Button,
.gqtu-account-endpoint.gqtu-account-endpoint.gqtu-account-endpoint button[type="submit"] {
	display: block;
	box-sizing: border-box;
	width: 100%;
	min-height: var(--gqtu-btn-height, 48px);
	margin: 4px 0 0;
	padding: 12px 24px;
	border: 0;
	border-radius: var(--gqtu-btn-radius, 999px);
	background-color: var(--gqtu-btn-bg, #00373D);
	background-image: none;
	color: var(--gqtu-btn-text, #FFFFFF);
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.18s ease;
}

.gqtu-account-endpoint.gqtu-account-endpoint.gqtu-account-endpoint .woocommerce-Button:hover,
.gqtu-account-endpoint.gqtu-account-endpoint.gqtu-account-endpoint .woocommerce-Button:focus,
.gqtu-account-endpoint.gqtu-account-endpoint.gqtu-account-endpoint button[type="submit"]:hover,
.gqtu-account-endpoint.gqtu-account-endpoint.gqtu-account-endpoint button[type="submit"]:focus {
	background-color: var(--gqtu-btn-bg-hover, #0B7A4B);
	color: var(--gqtu-btn-text, #FFFFFF);
}

/* ---------------------------------------------------------------- notices */

.gqtu-account-endpoint .woocommerce-notices-wrapper ul,
.gqtu-account-endpoint ul.woocommerce-error,
.gqtu-account-endpoint ul.woocommerce-message,
.gqtu-account-endpoint ul.woocommerce-info {
	margin: 0 0 18px;
	padding: 14px 18px;
	border-radius: 14px;
	list-style: none;
	font-size: 14px;
	line-height: 1.5;
}

.gqtu-account-endpoint ul.woocommerce-error {
	background: rgba(208, 52, 44, 0.08);
	color: var(--gqtu-error, #D0342C);
}

.gqtu-account-endpoint ul.woocommerce-message,
.gqtu-account-endpoint ul.woocommerce-info {
	background: rgba(11, 122, 75, 0.08);
	color: #0B7A4B;
}

.gqtu-account-endpoint .woocommerce-notices-wrapper:empty {
	display: none;
}

/* ----------------------------------------------------------------- narrow */

@media (max-width: 767px) {

	.gqtu-account-endpoint form > p:not(.form-row) {
		margin-bottom: 16px;
		font-size: 14px;
	}

	.gqtu-account-endpoint label {
		padding-bottom: 8px;
		font-size: 14px;
	}

	.gqtu-account-endpoint.gqtu-account-endpoint.gqtu-account-endpoint .form-row,
	.gqtu-account-endpoint.gqtu-account-endpoint.gqtu-account-endpoint .form-row-first,
	.gqtu-account-endpoint.gqtu-account-endpoint.gqtu-account-endpoint .form-row-last {
		margin-bottom: 14px;
	}

	.gqtu-account-endpoint.gqtu-account-endpoint.gqtu-account-endpoint input.input-text,
	.gqtu-account-endpoint.gqtu-account-endpoint.gqtu-account-endpoint input[type="text"],
	.gqtu-account-endpoint.gqtu-account-endpoint.gqtu-account-endpoint input[type="email"],
	.gqtu-account-endpoint.gqtu-account-endpoint.gqtu-account-endpoint input[type="password"] {
		min-height: 46px;
		padding: 11px 18px;
	}

	.gqtu-account-endpoint.gqtu-account-endpoint.gqtu-account-endpoint .password-input input {
		padding-right: 48px;
	}

	.gqtu-account-endpoint .show-password-input {
		right: 16px;
	}
}