/* BOGS EasyBooks — the sign-in screen (v0.56.0).
 *
 * Two panels: brand on the left, WooCommerce's own login form on the right.
 * Approved as a Design-canvas artboard alongside the product page.
 *
 * Everything in the right-hand column is WooCommerce markup — .woocommerce,
 * form.login, .form-row, #username, #password, .woocommerce-form-login__
 * rememberme, button[name="login"], .lost_password. This file restyles
 * those selectors and adds nothing of its own to the form, because the
 * form is the one part of this screen that must not be re-implemented:
 * nonce, throttling and redirect all live in there. If a WooCommerce update
 * renames a class, the worst case is this screen looking plain again, not a
 * broken sign-in.
 *
 * Brand follows bogs-easybooks-page.css: navy #072542 (the colour
 * bogsbookkeeping.ca paints behind its own header, not a navy we chose),
 * red #D62026, cream #F3F0E8, Playfair Display headings, Inter body.
 *
 * Loaded only on the My Account page with nobody signed in (see
 * Bogs_Signin::is_signin_screen()), so none of it can reach the portal,
 * which has its own look in bogs-account-home.css.
 */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Inter:wght@400;500;600;700&display=swap');

/* The background, again via the theme's own content wrapper rather than
 * <body> — see the note at the top of bogs-easybooks-page.css for why an ID
 * selector is the only thing that wins here. BACKGROUND only, never color:
 * setting a colour on a page-level wrapper is what broke the site header in
 * v0.55.2. */
body.bogs-has-signin #wp--skip-link--target {
	background-color: #f3f0e8 !important;
}

/* ---------------------------------------------------------------------
   WIDTH — found on the real site, v0.56.1.
   
   The first install came out as a narrow box floating in the middle of the
   page with cream either side. Nothing was wrong with the layout; the
   theme's content container is about 640px on this page, and the panels
   were obediently fitting inside it.
   
   In a WordPress block theme the squeeze does not come from .entry-content.
   It comes from the layout system: `.is-layout-constrained > *` gets a
   max-width of the theme's global content size, and that rule reaches
   direct children several wrappers deep. Setting max-width on the
   container does nothing, because the container is not what is narrow —
   its children are.
   
   So the children are released here, and .bogs-signin then sets its own
   width. Every selector carries the body class, which only exists on a
   signed-out My Account page, so this cannot widen anything else on the
   site. Deliberately NOT a 100vw full-bleed: 100vw includes the scrollbar,
   which is how a page ends up scrolling sideways on Windows.
   --------------------------------------------------------------------- */
body.bogs-has-signin .entry-content,
body.bogs-has-signin .wp-block-post-content,
body.bogs-has-signin .woocommerce {
	background-color: transparent;
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

body.bogs-has-signin .is-layout-constrained > *,
body.bogs-has-signin .entry-content > *,
body.bogs-has-signin .wp-block-post-content > *,
body.bogs-has-signin .woocommerce > * {
	max-width: none;
}

body.bogs-has-signin .woocommerce-account .woocommerce,
body.bogs-has-signin .wp-block-woocommerce-customer-account {
	max-width: none;
}

/* WooCommerce prints an empty page title and its notice wrapper above the
   form; the title is redundant next to our own "Sign in" heading. */
body.bogs-has-signin .woocommerce-account .entry-title,
body.bogs-has-signin .wp-block-post-title {
	display: none;
}

.bogs-signin {
	--sg-navy: #072542;
	--sg-red: #d62026;
	--sg-ink: #1f2a35;
	--sg-body: #55606e;
	--sg-cream: #f3f0e8;
	--sg-line: #e4e1d7;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	width: 100%;
	/* A deliberate card rather than a failed full-bleed. At 1140px the two
	   panels hold their proportions on a laptop and the whole thing still
	   reads as one object on a large monitor. */
	max-width: 1140px;
	margin: 0 auto;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(7, 37, 66, 0.05), 0 18px 44px rgba(7, 37, 66, 0.10);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--sg-ink);
	box-sizing: border-box;
}

.bogs-signin *,
.bogs-signin *::before,
.bogs-signin *::after {
	box-sizing: border-box;
}

/* --- brand panel --------------------------------------------------- */

.bogs-signin__brand {
	flex: 1 1 400px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 36px;
	background: var(--sg-navy);
	color: #fff;
	padding: 44px 42px 36px;
}

.bogs-signin__mark {
	display: flex;
	align-items: center;
	gap: 14px;
}

.bogs-signin__mark img {
	display: block;
	height: 64px;
	width: auto;
	max-width: 100%;
}

.bogs-signin__rule {
	display: inline-block;
	width: 1px;
	height: 36px;
	background: #1e4a73;
}

.bogs-signin__wordmark {
	font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
	font-weight: 700;
	font-size: 21px;
	color: #fff;
}

/* v0.56.1 — this used to be margin-top:auto, which shoved the headline to
   the bottom of the panel and left a lake of empty navy under the logo.
   Centring it reads as composed at every height. */
.bogs-signin__pitch {
	margin-block: auto;
}

.bogs-signin__pitch h2 {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: clamp(24px, 3vw, 31px);
	line-height: 1.22;
	font-weight: 700;
	color: #fff;
	margin: 0 0 18px;
	max-width: 13em;
	text-wrap: balance;
}

.bogs-signin__pitch ul {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 26em;
}

.bogs-signin__pitch li {
	position: relative;
	padding-left: 28px;
	margin-bottom: 13px;
	font-size: 15px;
	line-height: 1.5;
	color: #c8d3de;
}

.bogs-signin__pitch li::before {
	content: "";
	position: absolute;
	left: 3px;
	top: 6px;
	width: 11px;
	height: 6px;
	border-left: 2.4px solid #7fbf95;
	border-bottom: 2.4px solid #7fbf95;
	transform: rotate(-45deg);
}

.bogs-signin__origin {
	margin: 0;
	font-size: 12.5px;
	color: #8fa0b2;
}

/* --- form panel ---------------------------------------------------- */

.bogs-signin__form {
	flex: 1 1 480px;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--sg-cream);
	padding: 48px 20px;
}

.bogs-signin__form-inner {
	width: 100%;
	max-width: 420px;
}

.bogs-signin__title {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 30px;
	line-height: 1.2;
	font-weight: 700;
	color: var(--sg-ink);
	margin: 0 0 8px;
}

.bogs-signin__sub {
	margin: 0 0 26px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--sg-body);
}

.bogs-signin__hint {
	margin: 22px 0 0;
	font-size: 13px;
	line-height: 1.6;
	color: #7a848f;
}

/* --- WooCommerce's own form, restyled ------------------------------ */

body.bogs-has-signin .woocommerce form.login {
	background: #fff;
	border: 1px solid var(--sg-line);
	border-radius: 14px;
	padding: 28px;
	margin: 0;
	box-shadow: 0 1px 2px rgba(7, 37, 66, 0.04), 0 12px 28px rgba(7, 37, 66, 0.06);
}

body.bogs-has-signin .woocommerce form.login .form-row {
	padding: 0;
	margin: 0 0 18px;
}

body.bogs-has-signin .woocommerce form.login label {
	display: block;
	font-size: 13.5px;
	font-weight: 600;
	color: #36414f;
	margin-bottom: 7px;
}

body.bogs-has-signin .woocommerce form.login input[type="text"],
body.bogs-has-signin .woocommerce form.login input[type="email"],
body.bogs-has-signin .woocommerce form.login input[type="password"] {
	display: block;
	width: 100%;
	border: 1px solid #cfd4da;
	border-radius: 8px;
	padding: 13px 14px;
	font-family: inherit;
	/* 16px is not a taste decision: anything smaller makes iOS Safari zoom
	   the page on focus, and the subscriber then cannot see the button. */
	font-size: 16px;
	line-height: 1.4;
	color: var(--sg-ink);
	background: #fff;
	box-shadow: none;
}

body.bogs-has-signin .woocommerce form.login input:focus {
	outline: 3px solid rgba(7, 37, 66, 0.2);
	outline-offset: 1px;
	border-color: var(--sg-navy);
}

body.bogs-has-signin .woocommerce form.login .woocommerce-form-login__rememberme {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 14px;
	color: #44505f;
	margin: 0 0 22px;
	font-weight: 400;
	cursor: pointer;
}

body.bogs-has-signin .woocommerce form.login .woocommerce-form-login__rememberme input {
	width: 17px;
	height: 17px;
	margin: 0;
	accent-color: var(--sg-navy);
	cursor: pointer;
}

body.bogs-has-signin .woocommerce form.login button[name="login"],
body.bogs-has-signin .woocommerce form.login .woocommerce-button {
	display: block;
	width: 100%;
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	border-radius: 8px;
	background: var(--sg-navy);
	color: #fff;
	font-family: inherit;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.2;
	padding: 15px 20px;
	min-height: 48px;
	cursor: pointer;
	float: none;
	transition: background-color 0.15s ease;
}

body.bogs-has-signin .woocommerce form.login button[name="login"]:hover,
body.bogs-has-signin .woocommerce form.login button[name="login"]:focus {
	background: #0e3a61;
	color: #fff;
}

body.bogs-has-signin .woocommerce form.login button[name="login"]:focus-visible {
	outline: 3px solid rgba(214, 32, 38, 0.45);
	outline-offset: 2px;
}

body.bogs-has-signin .woocommerce form.login .lost_password {
	margin: 16px 0 0;
	font-size: 13px;
	text-align: center;
}

body.bogs-has-signin .woocommerce form.login .lost_password a {
	color: var(--sg-body);
	text-decoration: none;
}

body.bogs-has-signin .woocommerce form.login .lost_password a:hover {
	color: var(--sg-red);
	text-decoration: underline;
}

/* If registration is ever switched back on, WooCommerce prints a second
   column here. It gets the same card so the pair still looks deliberate,
   rather than one styled form beside one unstyled one. */
body.bogs-has-signin .woocommerce form.register {
	background: #fff;
	border: 1px solid var(--sg-line);
	border-radius: 14px;
	padding: 28px;
	margin: 22px 0 0;
}

body.bogs-has-signin .woocommerce .u-column1,
body.bogs-has-signin .woocommerce .u-column2 {
	float: none;
	width: 100%;
}

/* WooCommerce's notices — a wrong password lands here. */
body.bogs-has-signin .woocommerce-error,
body.bogs-has-signin .woocommerce-message,
body.bogs-has-signin .woocommerce-info {
	border-top-color: var(--sg-red);
	border-radius: 8px;
	font-size: 14px;
}

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

@media (max-width: 860px) {
	.bogs-signin {
		min-height: 0;
	}

	.bogs-signin__brand {
		gap: 26px;
		padding: 34px 20px 30px;
	}

	.bogs-signin__pitch {
		margin-top: 0;
	}

	.bogs-signin__origin {
		margin-top: 0;
	}

	.bogs-signin__form {
		padding: 34px 20px 44px;
	}
}

/* =====================================================================
   REGISTRATION IS ON — found on the real site, v0.56.1.
   
   The design assumed sign-in only, because subscribers get their account
   at checkout. On bogsbookkeeping.ca, WooCommerce registration is switched
   on and carries the "Apply to become a vendor?" box, so the My Account
   page renders a SECOND form under the first. The mockup had nowhere to
   put it and it landed unstyled below the card, under a bright blue
   "Register" heading from the theme.
   
   The fix is not to hide it. That box is a real way into the product, and
   a design that only works when a WooCommerce setting is off is a design
   that breaks the day somebody changes the setting. It is styled as the
   quieter of the two: sign-in is the card, registering is the thing
   underneath for people who do not have an account yet.
   
   WooCommerce's own markup here is #customer_login > .u-column1 (login)
   and .u-column2 (register), each with its own <h2>.
   ===================================================================== */

body.bogs-has-signin #customer_login,
body.bogs-has-signin .u-columns {
	display: block;
	margin: 0;
}

body.bogs-has-signin .u-column1,
body.bogs-has-signin .u-column2 {
	float: none;
	width: 100%;
	margin: 0;
	padding: 0;
}

/* The login column's own "Login" heading duplicates the "Sign in" we print
   above it, in the theme's link blue. Hidden rather than restyled — two
   headings for one form is the actual problem. */
body.bogs-has-signin .u-column1 > h2 {
	display: none;
}

/* The register column keeps its heading, restyled from theme blue into a
   section label that separates the two forms. */
body.bogs-has-signin .u-column2 {
	margin-top: 26px;
	padding-top: 24px;
	border-top: 1px solid #e0ddd3;
}

body.bogs-has-signin .u-column2 > h2 {
	font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
	font-size: 19px;
	line-height: 1.3;
	font-weight: 700;
	color: var(--sg-ink, #1f2a35);
	margin: 0 0 6px;
	padding: 0;
	border: 0;
	text-transform: none;
	letter-spacing: 0;
}

body.bogs-has-signin .woocommerce form.register {
	background: transparent;
	border: 1px dashed #cfccc0;
	border-radius: 12px;
	padding: 22px;
	margin: 14px 0 0;
}

body.bogs-has-signin .woocommerce form.register label {
	display: block;
	font-size: 13.5px;
	font-weight: 600;
	color: #36414f;
	margin-bottom: 7px;
}

body.bogs-has-signin .woocommerce form.register input[type="text"],
body.bogs-has-signin .woocommerce form.register input[type="email"],
body.bogs-has-signin .woocommerce form.register input[type="password"] {
	display: block;
	width: 100%;
	border: 1px solid #cfd4da;
	border-radius: 8px;
	padding: 13px 14px;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.4;
	color: var(--sg-ink, #1f2a35);
	background: #fff;
}

/* Every paragraph in both forms, not just the privacy block. The theme
   colours `.entry-content p` brown, and the first pass here only named
   the privacy text — so "A link to set a new password will be sent to
   your email address" came out brown on its own, which looks like a
   warning rather than a note. */
body.bogs-has-signin .woocommerce form.register p,
body.bogs-has-signin .woocommerce form.register .woocommerce-privacy-policy-text p,
body.bogs-has-signin .woocommerce form.register .woocommerce-form__label-for-checkbox,
body.bogs-has-signin .woocommerce form.login p {
	font-size: 13.5px;
	line-height: 1.6;
	color: #6b7686;
}

/* …but a field's own label and the buttons keep their own sizes. */
body.bogs-has-signin .woocommerce form.register p.form-row,
body.bogs-has-signin .woocommerce form.login p.form-row {
	font-size: inherit;
	color: inherit;
}

/* The secondary action: outlined, so the navy Log in button above stays
   the one obvious thing to press. */
body.bogs-has-signin .woocommerce form.register button[name="register"],
body.bogs-has-signin .woocommerce form.register .woocommerce-Button {
	display: block;
	width: 100%;
	appearance: none;
	-webkit-appearance: none;
	border: 1px solid var(--sg-navy, #072542);
	border-radius: 8px;
	background: transparent;
	color: var(--sg-navy, #072542);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	padding: 13px 20px;
	min-height: 46px;
	cursor: pointer;
	float: none;
	margin-top: 4px;
}

body.bogs-has-signin .woocommerce form.register button[name="register"]:hover,
body.bogs-has-signin .woocommerce form.register button[name="register"]:focus {
	background: var(--sg-navy, #072542);
	color: #fff;
}

/* =====================================================================
   THEME-PROOFING — v0.56.1.
   
   On the live site the subtitle came out brown and the headings came out
   in the theme's own serif sizes. Nothing was overridden by accident: a
   theme rule like `.entry-content p { color: … }` is two classes, our
   `.bogs-signin__sub` is one, so the theme simply wins. Specificity is not
   about which stylesheet loaded last.
   
   Rather than sprinkling !important, the handful of rules a theme is
   likely to have an opinion about are restated here with the body class in
   front, which puts us one class ahead on every one of them.
   ===================================================================== */

body.bogs-has-signin .bogs-signin__title {
	font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
	font-size: 30px;
	line-height: 1.2;
	font-weight: 700;
	color: var(--sg-ink, #1f2a35);
	margin: 0 0 8px;
	padding: 0;
	text-transform: none;
	letter-spacing: 0;
}

body.bogs-has-signin .bogs-signin__sub {
	font-size: 15px;
	line-height: 1.6;
	color: var(--sg-body, #55606e);
	margin: 0 0 26px;
}

body.bogs-has-signin .bogs-signin__hint {
	font-size: 13px;
	line-height: 1.6;
	color: #7a848f;
	margin: 22px 0 0;
}

body.bogs-has-signin .bogs-signin__pitch h2 {
	font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
	color: #fff;
	padding: 0;
	border: 0;
	text-transform: none;
	letter-spacing: 0;
}

body.bogs-has-signin .bogs-signin__pitch li {
	color: #c8d3de;
	font-size: 15px;
}

body.bogs-has-signin .bogs-signin__wordmark {
	color: #fff;
}

body.bogs-has-signin .bogs-signin__origin {
	color: #8fa0b2;
	font-size: 12.5px;
}

body.bogs-has-signin .bogs-signin a {
	text-decoration: none;
}

/* Links inside either form — the privacy-policy link and anything
   WooCommerce adds later — take the brand's quiet grey rather than the
   theme's bright blue, which is the one remaining colour that announced
   "this part was not designed". */
body.bogs-has-signin .woocommerce form.login a,
body.bogs-has-signin .woocommerce form.register a,
body.bogs-has-signin .u-column2 a {
	color: var(--sg-body, #55606e);
	text-decoration: underline;
	text-underline-offset: 2px;
}

body.bogs-has-signin .woocommerce form.login a:hover,
body.bogs-has-signin .woocommerce form.register a:hover,
body.bogs-has-signin .u-column2 a:hover {
	color: var(--sg-red, #d62026);
}

/* =====================================================================
   THE SHOW-PASSWORD TOGGLE — v0.56.2.

   On the live site the password field read "Sh👁" sitting on top of its
   own border. WooCommerce wraps that input in
   <span class="password-input"> and absolutely positions a
   .show-password-input toggle inside it. That span is an inline element
   by default, so the moment the input became a full-width block with its
   own padding, the span stopped matching the input's box and the toggle
   landed wherever the inline flow left it.

   Three things fix it, and all three are needed: the wrapper has to be a
   block the same width as the input, it has to be the positioning
   context, and the input has to reserve room on the right so the toggle
   is not sitting on top of what somebody is typing.

   The right padding is sized for a word, not an icon. WooCommerce draws
   an eye glyph, but themes and security plugins routinely replace it with
   the word "Show" — which is what is on Wayne's site — and a box sized
   for 22px of icon clips it to "Sh".
   ===================================================================== */

body.bogs-has-signin .woocommerce form .password-input {
	display: block;
	position: relative;
	width: 100%;
}

body.bogs-has-signin .woocommerce form .password-input input {
	width: 100%;
	padding-right: 72px;
}

body.bogs-has-signin .woocommerce form .show-password-input {
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
	margin: 0;
	padding: 4px 6px;
	border-radius: 6px;
	font-size: 13px;
	line-height: 1;
	white-space: nowrap;
	color: var(--sg-body, #55606e);
	background: transparent;
	cursor: pointer;
}

body.bogs-has-signin .woocommerce form .show-password-input:hover {
	color: var(--sg-navy, #072542);
}

/* =====================================================================
   THE LAKE OF NAVY — v0.56.2.

   With the register form underneath, the right-hand column is tall, and
   the brand panel stretches to match it. Centring the headline in that
   column left it floating in the middle of a large empty field, with the
   logo stranded at the top.

   Content now sits together near the top, under the logo, and the slack
   collects at the bottom above the Winnipeg line — which is how a panel
   like this is meant to breathe. Nothing is centred in a box whose height
   is decided by a form on the other side of the page.
   ===================================================================== */

body.bogs-has-signin .bogs-signin__brand {
	justify-content: flex-start;
	gap: 30px;
}

body.bogs-has-signin .bogs-signin__pitch {
	margin-block: 10px 0;
}

body.bogs-has-signin .bogs-signin__origin {
	margin-top: auto;
	padding-top: 30px;
}

/* =====================================================================
   ARRIVING TO SIGN UP — v0.57.0.

   Someone who clicked "Start your 14 days free" on the product page gets
   ?bogs_signup=1, and Bogs_Signin adds .bogs-signup-first to the body.
   The two forms then swap places and swap weight: the register box
   becomes the white card, and signing in becomes the quieter thing
   underneath for anyone who turns out to have an account already.

   Nothing is hidden either way. Both forms are always on the page; only
   the order and the emphasis change, so nobody who guessed wrong about
   which one they needed has to go anywhere else.
   ===================================================================== */

body.bogs-signup-first #customer_login,
body.bogs-signup-first .u-columns {
	display: flex;
	flex-direction: column;
}

body.bogs-signup-first .u-column2 {
	order: 1;
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

body.bogs-signup-first .u-column1 {
	order: 2;
	margin-top: 26px;
	padding-top: 24px;
	border-top: 1px solid #e0ddd3;
}

/* The register box takes the card. */
body.bogs-signup-first .woocommerce form.register {
	background: #fff;
	border: 1px solid var(--sg-line, #e4e1d7);
	border-radius: 14px;
	padding: 28px;
	margin: 0;
	box-shadow: 0 1px 2px rgba(7, 37, 66, 0.05), 0 12px 28px rgba(7, 37, 66, 0.06);
}

body.bogs-signup-first .woocommerce form.register button[name="register"],
body.bogs-signup-first .woocommerce form.register .woocommerce-Button {
	border: 0;
	background: var(--sg-navy, #072542);
	color: #fff;
	font-size: 15.5px;
	padding: 15px 20px;
	min-height: 48px;
}

body.bogs-signup-first .woocommerce form.register button[name="register"]:hover,
body.bogs-signup-first .woocommerce form.register button[name="register"]:focus {
	background: #0e3a61;
	color: #fff;
}

/* …and signing in becomes the quiet one. */
body.bogs-signup-first .woocommerce form.login {
	background: transparent;
	border: 1px dashed #cfccc0;
	box-shadow: none;
	padding: 22px;
}

body.bogs-signup-first .woocommerce form.login button[name="login"] {
	border: 1px solid var(--sg-navy, #072542);
	background: transparent;
	color: var(--sg-navy, #072542);
	font-size: 15px;
	padding: 13px 20px;
	min-height: 46px;
}

body.bogs-signup-first .woocommerce form.login button[name="login"]:hover,
body.bogs-signup-first .woocommerce form.login button[name="login"]:focus {
	background: var(--sg-navy, #072542);
	color: #fff;
}

/* WooCommerce's own "Login" heading was hidden because our "Sign in"
   title said it already. In signup mode that title now says "Start your
   free trial", so the login column needs its heading back — otherwise the
   form at the bottom has no name at all. */
body.bogs-signup-first .u-column1 > h2 {
	display: block;
	font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
	font-size: 19px;
	line-height: 1.3;
	font-weight: 700;
	color: var(--sg-ink, #1f2a35);
	margin: 0 0 6px;
	padding: 0;
	border: 0;
	text-transform: none;
	letter-spacing: 0;
}

body.bogs-signup-first .u-column2 > h2 {
	display: none;
}

/* =====================================================================
   THE AGREEMENT CHECKBOX — v0.60.0.

   Bogs_Consent adds a required tick box to WooCommerce's register form.
   It is styled to be read rather than skipped past: the links are
   underlined and in the brand red rather than the same grey as the
   surrounding small print, because a link nobody notices is a document
   nobody opens.
   ===================================================================== */

body.bogs-has-signin .woocommerce form.register .bogs-consent {
	margin: 4px 0 18px;
	padding: 14px 16px;
	border: 1px solid #e0ddd3;
	border-radius: 10px;
	background: #fff;
}

body.bogs-has-signin .woocommerce form.register .bogs-consent__label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--sg-ink, #1f2a35);
	font-weight: 400;
	margin: 0;
	cursor: pointer;
}

body.bogs-has-signin .woocommerce form.register .bogs-consent__input {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	accent-color: var(--sg-navy, #072542);
	cursor: pointer;
}

body.bogs-has-signin .woocommerce form.register .bogs-consent a {
	color: var(--sg-red, #d62026);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

body.bogs-has-signin .woocommerce form.register .bogs-consent .required {
	color: var(--sg-red, #d62026);
}

body.bogs-has-signin .woocommerce form.register .bogs-consent__note {
	display: block;
	margin: 8px 0 0 28px;
	font-size: 12.5px;
	line-height: 1.5;
	color: #6b7686;
}

/* The same stacked footer under the sign-in form. This screen is where an
   account is created, so it is the last place the two documents can be
   read before somebody agrees to them — having to leave the page to find
   the privacy policy, at the moment of being asked to accept it, is the
   opposite of a disclosure. */
.bogs-signin__foot {
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid #e0ddd3;
	text-align: center;
}

.bogs-signin__foot-copy,
.bogs-signin__foot-line {
	margin: 0 0 5px;
	font-size: 12.5px;
	line-height: 1.6;
}

body.bogs-has-signin .bogs-signin__foot-copy {
	color: #7a848f;
}

body.bogs-has-signin .bogs-signin__foot-line a {
	color: var(--sg-body, #55606e);
	text-decoration: underline;
	text-underline-offset: 2px;
}

body.bogs-has-signin .bogs-signin__foot-line a:hover,
body.bogs-has-signin .bogs-signin__foot-line a:focus {
	color: var(--sg-red, #d62026);
}