/**
 * MemberPress signup and account forms, in the site's own clothes.
 *
 * These pages are rendered by the plugin, not by the theme's templates, so
 * none of the block styling reaches them and they arrive looking like a
 * different website — on the one page where somebody is about to type their
 * name, address and card details, which is the worst place to lose their
 * confidence.
 *
 * Palette tokens are read from the theme's global styles, which do load
 * here because these are ordinary pages; only the plugin's own CSS is
 * foreign. Where a preset might be missing the fallback is the same hex.
 */

.mepr-form,
.mp_wrapper {
	--bovf-navy:      var(--wp--preset--color--navy, #0B1D3A);
	--bovf-navy-deep: var(--wp--preset--color--navy-deep, #102547);
	--bovf-navy-soft: var(--wp--preset--color--navy-soft, #2D4569);
	--bovf-green:     var(--wp--preset--color--green, #145A32);
	--bovf-line:      var(--wp--preset--color--line, #C6D3E5);
	--bovf-grey:      var(--wp--preset--color--grey, #F2F4F7);
	--bovf-paper:     var(--wp--preset--color--paper, #fff);
	--bovf-red:       var(--wp--preset--color--red, #D7263D);

	color: var(--bovf-navy);
	max-width: 46rem;
}

/* --- rows and labels -------------------------------------------------- */

.mepr-form .mp-form-row {
	margin-block-end: 1.4rem;
}

.mepr-form .mp-form-label label,
.mepr-form label {
	display: block;
	font-weight: 600;
	color: var(--bovf-navy);
	margin-block-end: 0.35rem;
	line-height: 1.35;
}

/* mepr-field-required is on the row, not on the asterisk.
   
   Colouring it painted the whole row red — label, value and all — so on
   the account page a member's own email address and country came back to
   them in the colour this site uses for errors, on five fields that were
   perfectly correct. The asterisk is plain text inside the label and
   cannot be coloured on its own, and it is doing the job anyway: no
   colour is needed to read "Email:*" as required. */
.mepr-form .mepr-field-required > .mp-form-label::after {
	content: "";
}

/* --- inputs ----------------------------------------------------------- */

.mepr-form input[type="text"],
.mepr-form input[type="email"],
.mepr-form input[type="password"],
.mepr-form input[type="tel"],
.mepr-form input[type="number"],
.mepr-form select,
.mepr-form textarea {
	width: 100%;
	max-width: 100%;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--bovf-line);
	border-radius: 4px;
	background: var(--bovf-paper);
	color: var(--bovf-navy);
	font: inherit;
	box-shadow: none;
	box-sizing: border-box;
}

.mepr-form input:focus,
.mepr-form select:focus,
.mepr-form textarea:focus {
	border-color: var(--bovf-green);
	box-shadow: 0 0 0 2px rgba( 20, 90, 50, 0.35 );
	outline: 2px solid transparent;
	outline-offset: 2px;
}

.mepr-form textarea {
	min-height: 7rem;
}

/* --- the tick lists ---------------------------------------------------
   These two questions are the reason this file exists. A row per option,
   with the whole label clickable and enough space between rows to hit one
   on a phone — the browser default puts them shoulder to shoulder and
   makes a list of eight into a target practice exercise. */

.mepr-form .mepr-checkboxes-field {
	display: grid;
	gap: 0.15rem;
	border: 1px solid var(--bovf-line);
	border-radius: 4px;
	padding: 0.6rem 0.75rem;
	background: var(--bovf-paper);
}

@media ( min-width: 34rem ) {
	.mepr-form .mepr-checkboxes-field {
		grid-template-columns: 1fr 1fr;
		gap: 0.15rem 1.25rem;
	}
}

.mepr-form .mepr-checkboxes-field-row {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	padding: 0.45rem 0.35rem;
	border-radius: 4px;
}

.mepr-form .mepr-checkboxes-field-row:hover {
	background: var(--bovf-grey);
}

.mepr-form .mepr-form-checkboxes-input {
	inline-size: 1.15rem;
	block-size: 1.15rem;
	margin: 0.1rem 0 0;
	accent-color: var(--bovf-green);
	flex: none;
}

.mepr-form .mepr-form-checkboxes-label {
	font-weight: 400;
	margin: 0;
	cursor: pointer;
	line-height: 1.35;
}

/* --- the submit ------------------------------------------------------- */

.mepr-form .mepr-submit,
.mepr-form input[type="submit"],
.mepr-form button[type="submit"] {
	display: inline-block;
	width: auto;
	padding: 0.65rem 1.4rem;
	border: 1px solid var(--bovf-navy);
	border-radius: 4px;
	background: var(--bovf-navy);
	color: var(--bovf-paper);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	box-shadow: none;
	text-shadow: none;
}

.mepr-form .mepr-submit:hover,
.mepr-form input[type="submit"]:hover,
.mepr-form .mepr-submit:focus,
.mepr-form input[type="submit"]:focus {
	background: var(--bovf-navy-deep);
	border-color: var(--bovf-navy-deep);
}

/* --- errors and prices ------------------------------------------------ */

.mepr-form .cc-error,
.mepr-form .mepr-form-has-errors {
	color: var(--bovf-red);
	font-size: 0.875rem;
}

.mepr-form .mepr_price,
.mepr-form .mepr_bold {
	font-weight: 700;
	color: var(--bovf-navy);
}

.mepr-form .mp-form-row-group,
.mepr-form .mp-address-group {
	display: grid;
	gap: 1rem;
}

@media ( min-width: 34rem ) {
	.mepr-form .mp-form-row-group {
		grid-template-columns: 1fr 1fr;
	}
}

/* --- the account pages ------------------------------------------------
   The template wraps these in .bovf-account and expected a stylesheet
   that was never written, so the account form inherited the 46rem meant
   for a signup form and sat in a narrow strip with the rest of a 1200px
   column empty beside it.

   A signup form wants to be narrow: one decision, no distractions. An
   account page is the opposite — somebody is scanning for the one field
   they came to change, and a single column of thirteen rows makes them
   hunt. So: full width of the column, and two columns of fields once
   there is room for them. */

.bovf-account .mp_wrapper,
.bovf-account .mepr-form,
.bovf-account .mepr-account-form {
	/* .mepr-form is capped at 46rem for signup, which is right there and
	   wrong here. */
	max-width: 100%;
}

.bovf-account #mepr-account-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin-block-end: 2rem;
	padding-block-end: 0.75rem;
	border-block-end: 1px solid var(--bovf-line);
}

.bovf-account .mepr-nav-item a {
	text-decoration: none;
	font-weight: 600;
	color: var(--bovf-navy-soft);
	padding-block-end: 0.75rem;
}

.bovf-account .mepr-active-nav-tab a {
	color: var(--bovf-navy);
	box-shadow: inset 0 -2px 0 0 var(--bovf-green);
}

.bovf-account .mepr-nav-item a:hover {
	color: var(--bovf-navy);
}

/* The form itself: a card the width of the column, with the fields in
   two columns once the screen is wide enough to read them side by side.
   Checkbox groups and text areas take the full width — splitting an
   eight-option list across a column boundary is worse than a long one. */

.bovf-account .mepr-account-form,
.bovf-account form[class*="mepr"] {
	background: var(--bovf-paper);
	border: 1px solid var(--bovf-line);
	border-radius: 6px;
	padding: clamp( 1.25rem, 3vw, 2rem );
}

/* A two-column grid went in here and came straight back out: the form
   is being held at about 390px by something I have not identified, so
   splitting it in two produced labels one word wide. Full width first,
   columns afterwards. */