/* BOGS EasyBooks — the two subscription checkout screens (v0.55.2).
 *
 * These are the only two pages between "I want this" and "I'm a paying
 * customer", and until now they were unstyled shortcode output sitting on
 * whatever background the theme painted: on bogsbookkeeping.ca, navy, with
 * pale link-blue text on it. Wayne, seeing the real thing: "Can we make the
 * pre stripe and post stripe page more professional, and remove the blue
 * background."
 *
 * Brand follows assets/css/bogs-pricing.css exactly — navy #072542, red
 * #D62026 as an accent rather than a fill, Playfair Display for headings,
 * Inter for body. Someone arriving here has just come from the pricing
 * table; the two should look like the same company.
 *
 * THE NAVY, v0.55.5.
 *
 * It used to be #2C3A4A, a navy picked here rather than taken from
 * anywhere. The real one is #072542 — the colour bogsbookkeeping.ca paints
 * behind its own header, read straight off the live site. Wayne: "use the
 * website navy blue", after the same correction about the logo. The whole
 * point of these two screens is that a customer who clicked through from
 * the marketing site does not feel handed to a different company halfway
 * to paying, and a navy that is merely navy-ish fails that quietly.
 *
 * Changed in the same release: bogs-pricing.css (the table immediately
 * before this screen), bogs-account-home.css (the portal immediately
 * after it), and the var() fallbacks in bogs-invoicing.css. Deliberately
 * NOT changed: the invoice email, the hosted payment page and
 * bogs-payment-page.css — those are seen by the subscriber's OWN
 * customers, not by the subscriber, and that look was signed off
 * separately. If they are ever brought across, it is one token each.
 *
 * The button hover had to be rethought, not just recoloured: it was a
 * DARKER navy than the base, which against #072542 would read as nothing
 * happening. It now goes lighter. A hover inherited from a lighter base
 * colour is the kind of thing that survives a find-and-replace and then
 * silently stops working.
 *
 * THE BACKGROUND, and why it is an ID selector.
 *
 * The navy is not painted by <body>. It is painted by this theme's own
 * content wrapper, <main id="wp--skip-link--target">, a CHILD element that
 * sits visually on top of <body> — so recoloring <body> is invisible no
 * matter how strong the rule, because specificity only settles a fight
 * between two rules on the SAME element. This exact wrapper has now been
 * found three times in this project: the EasyBooks portal background, the
 * v0.45.5 payment page, and now here. An ID beats any number of classes
 * regardless of !important on either side, which is why this is written
 * the way it is rather than as another class with another !important.
 *
 * This file is enqueued ONLY on a page that actually contains the
 * [bogs_checkout] shortcode (see Bogs_Billing::enqueue_checkout_assets),
 * so the override cannot leak onto any other page of the marketing site.
 */

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

/* v0.55.3 — the first version of this block was too greedy and broke the
 * site header. It set a text COLOR on .wp-site-blocks, which in a block
 * theme wraps the ENTIRE page — header and footer included — so dark body
 * text landed on the navy header and the nav links became unreadable.
 *
 * Two rules learned the hard way, both of them here:
 *
 *   1. Set the BACKGROUND, never the color. The card below declares every
 *      color it needs; a blanket color override can only reach elements
 *      that were already fine.
 *   2. Target the content wrapper, not a whole-page wrapper. A wrapper
 *      that contains the header is not a page background, whatever it
 *      looks like in isolation.
 *
 * min-height is what keeps the cream running past the end of a short card
 * instead of stopping at the content and leaving the theme's own color
 * showing underneath it. */
body.bogs-has-checkout #wp--skip-link--target {
	background-color: #f3f0e8 !important;
	min-height: 72vh;
}

body.bogs-has-checkout .entry-content,
body.bogs-has-checkout .wp-block-post-content {
	background-color: transparent;
}

.bogs-checkout {
	--bogs-navy: #072542;
	--bogs-red: #d62026;
	--bogs-ink: #1f2a35;
	--bogs-muted: #64748b;
	--bogs-line: #e2e8f0;
	--bogs-green: #15803d;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--bogs-ink);
	background: #fff;
	border: 1px solid var(--bogs-line);
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(31, 42, 53, 0.04), 0 12px 28px rgba(31, 42, 53, 0.06);
	max-width: 480px;
	margin: 40px auto 56px;
	padding: 36px 36px 30px;
	text-align: left;
	box-sizing: border-box;
}

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

/* A thin red rule along the top edge: the one place red appears, matching
   how the pricing table uses it as an accent rather than a fill. */
.bogs-checkout::before {
	content: "";
	display: block;
	height: 3px;
	background: var(--bogs-red);
	border-radius: 14px 14px 0 0;
	margin: -36px -36px 28px;
}

.bogs-checkout__eyebrow {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--bogs-muted);
	margin: 0 0 6px;
}

.bogs-checkout__plan-name {
	font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
	font-weight: 700;
	font-size: 30px;
	line-height: 1.15;
	color: var(--bogs-navy);
	margin: 0 0 4px;
}

.bogs-checkout__tagline {
	font-size: 14px;
	color: var(--bogs-muted);
	margin: 0 0 22px;
}

/* The price. Tabular figures so the dollars and cents sit square. */
.bogs-checkout__price {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
	padding: 16px 0 18px;
	border-top: 1px solid var(--bogs-line);
	border-bottom: 1px solid var(--bogs-line);
	margin-bottom: 20px;
}

.bogs-checkout__amount {
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 700;
	font-size: 32px;
	line-height: 1;
	color: var(--bogs-ink);
	font-variant-numeric: tabular-nums;
}

.bogs-checkout__period {
	font-size: 14px;
	color: var(--bogs-muted);
}

.bogs-checkout__tax-note {
	flex-basis: 100%;
	font-size: 12.5px;
	color: var(--bogs-muted);
	margin-top: 6px;
}

/* What happens after the button. Three numbered steps, because the one
   thing a person hesitating over a card form wants is to know what the
   next screen is. */
.bogs-checkout__steps {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	counter-reset: bogs-step;
}

.bogs-checkout__steps li {
	position: relative;
	padding-left: 30px;
	margin-bottom: 10px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--bogs-ink);
	counter-increment: bogs-step;
}

.bogs-checkout__steps li::before {
	content: counter(bogs-step);
	position: absolute;
	left: 0;
	top: 0;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--bogs-navy);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	line-height: 20px;
	text-align: center;
}

.bogs-checkout__form {
	margin: 0;
}

.bogs-checkout__button,
.bogs-checkout .bogs-checkout__button {
	display: block;
	width: 100%;
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	border-radius: 8px;
	background: var(--bogs-navy);
	color: #fff !important;
	font-family: inherit;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.2;
	padding: 15px 20px;
	min-height: 48px;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.bogs-checkout__button:hover,
.bogs-checkout__button:focus {
	background: #0e3a61;
	color: #fff !important;
}

.bogs-checkout__button:focus-visible {
	outline: 3px solid rgba(214, 32, 38, 0.45);
	outline-offset: 2px;
}

/* The reassurance line, with a drawn padlock rather than an emoji — an
   emoji renders differently on every platform and reads as decoration;
   this reads as a statement. */
.bogs-checkout__secure {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin: 14px 0 0;
	font-size: 12.5px;
	color: var(--bogs-muted);
	text-align: center;
}

.bogs-checkout__secure svg {
	flex: none;
	width: 13px;
	height: 13px;
	stroke: var(--bogs-muted);
}

.bogs-checkout__fineprint {
	margin: 10px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--bogs-muted);
	text-align: center;
}

.bogs-checkout__back {
	margin: 22px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--bogs-line);
	text-align: center;
	font-size: 13px;
}

.bogs-checkout__back a {
	color: var(--bogs-muted);
	text-decoration: none;
}

.bogs-checkout__back a:hover {
	color: var(--bogs-navy);
	text-decoration: underline;
}

/* ---------------------------------------------------------------------
   The message states: thank-you, cancelled, and the two "not set up yet"
   fallbacks. Same card, centred, with an icon carrying the tone so the
   person knows which of the three they are looking at before reading.
   --------------------------------------------------------------------- */

.bogs-checkout--message {
	text-align: center;
}

.bogs-checkout__icon {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 18px;
	background: #eaf6ee;
}

.bogs-checkout__icon svg {
	width: 26px;
	height: 26px;
	stroke: var(--bogs-green);
	fill: none;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.bogs-checkout__icon--neutral {
	background: #eef2f6;
}

.bogs-checkout__icon--neutral svg {
	stroke: var(--bogs-navy);
}

.bogs-checkout--message h3,
.bogs-checkout--message .bogs-checkout__heading {
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 700;
	font-size: 24px;
	line-height: 1.25;
	color: var(--bogs-navy);
	margin: 0 0 12px;
}

.bogs-checkout--message p {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--bogs-ink);
	margin: 0 0 18px;
}

/* --------------------------------------------------------------------- */

@media (max-width: 600px) {
	.bogs-checkout {
		margin: 20px 16px 36px;
		padding: 28px 22px 24px;
	}

	.bogs-checkout::before {
		margin: -28px -22px 22px;
	}

	.bogs-checkout__plan-name {
		font-size: 26px;
	}

	.bogs-checkout__amount {
		font-size: 28px;
	}
}