/* SURFLESSONS4YOU — R31 guest checkout styles.
 *
 * Palette and radii match sl4u-booking-review.php's modal CSS so the injected
 * guest block reads as part of the same sheet. Brand rule: grey + blue, no glow
 * effects, no orange. Every selector is prefixed `.sl4u-r31g-` and lives only
 * inside the booking modal, the orders page or the bridge bar.
 */

:root {
	--sl4u-r31g-blue: #2145d9;
	--sl4u-r31g-blue-d: #1a37b0;
	--sl4u-r31g-navy: #132145;
	--sl4u-r31g-ink: #1f2a44;
	--sl4u-r31g-muted: #6b7594;
	--sl4u-r31g-card: #f4f6fb;
	--sl4u-r31g-border: #e3e8f2;
	--sl4u-r31g-err: #b91c1c;
	--sl4u-r31g-ok: #15803d;
}

/* ── shared bits ─────────────────────────────────────────────────────────── */

.sl4u-r31g-guest,
.sl4u-r31g-claim {
	font-family: Inter, system-ui, sans-serif;
	color: var(--sl4u-r31g-ink);
}

.sl4u-r31g-lbl {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--sl4u-r31g-muted);
	margin: 0 0 6px;
}

.sl4u-r31g-input,
.sl4u-r31g-claim input[type="text"] {
	width: 100%;
	box-sizing: border-box;
	background: #fff;
	border: 1.5px solid var(--sl4u-r31g-border);
	border-radius: 10px;
	padding: 11px 13px;
	font: inherit;
	font-size: 15px;
	color: var(--sl4u-r31g-ink);
}

.sl4u-r31g-input:focus,
.sl4u-r31g-claim input:focus {
	outline: none;
	border-color: var(--sl4u-r31g-blue);
}

.sl4u-r31g-hint {
	font-size: 12px;
	line-height: 1.5;
	color: var(--sl4u-r31g-muted);
	margin-top: 6px;
}

.sl4u-r31g-hint a {
	color: var(--sl4u-r31g-blue);
}

.sl4u-r31g-msg {
	margin-top: 10px;
	font-size: 13px;
	line-height: 1.5;
	border-radius: 10px;
	padding: 9px 11px;
	background: #fdf2f2;
	color: var(--sl4u-r31g-err);
}

.sl4u-r31g-msg.is-ok {
	background: #ecfdf3;
	color: var(--sl4u-r31g-ok);
}

.sl4u-r31g-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 10px;
	background: var(--sl4u-r31g-blue);
	color: #fff;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	padding: 11px 18px;
	cursor: pointer;
	text-decoration: none;
	box-shadow: none;
}

.sl4u-r31g-btn:hover {
	background: var(--sl4u-r31g-blue-d);
	color: #fff;
}

.sl4u-r31g-btn[disabled] {
	opacity: .55;
	cursor: default;
}

.sl4u-r31g-btn-ghost {
	background: #fff;
	color: var(--sl4u-r31g-blue);
	border: 1.5px solid var(--sl4u-r31g-border);
}

.sl4u-r31g-btn-ghost:hover {
	background: var(--sl4u-r31g-card);
	color: var(--sl4u-r31g-blue-d);
}

.sl4u-r31g-skip {
	background: none;
	border: none;
	box-shadow: none;
	padding: 11px 6px;
	font: inherit;
	font-size: 13px;
	color: var(--sl4u-r31g-muted);
	text-decoration: underline;
	cursor: pointer;
}

.sl4u-r31g-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ── A · the "Book as guest" block inside the booking modal ──────────────── */

.sl4u-r31g-guest {
	background: var(--sl4u-r31g-card);
	border: 1px solid var(--sl4u-r31g-border);
	border-radius: 16px;
	padding: 16px;
	margin-bottom: 14px;
}

.sl4u-r31g-guest-h {
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--sl4u-r31g-blue);
	margin-bottom: 10px;
}

.sl4u-r31g-tos {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 14px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--sl4u-r31g-ink);
	cursor: pointer;
}

.sl4u-r31g-tos input[type="checkbox"] {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 1px 0 0;
	accent-color: var(--sl4u-r31g-blue);
}

.sl4u-r31g-tos a {
	color: var(--sl4u-r31g-blue);
}

.sl4u-r31g-alt {
	margin-top: 12px;
	font-size: 13px;
	color: var(--sl4u-r31g-muted);
}

.sl4u-r31g-alt a {
	color: var(--sl4u-r31g-blue);
	font-weight: 600;
}

.sl4u-r31g-booking-as {
	margin-top: 12px;
	font-size: 13px;
	font-weight: 600;
	color: var(--sl4u-r31g-navy);
	background: #fff;
	border: 1px solid var(--sl4u-r31g-border);
	border-radius: 10px;
	padding: 9px 11px;
	word-break: break-all;
}

.sl4u-r31g-wall {
	margin-top: 12px;
	background: #fff;
	border: 1px solid var(--sl4u-r31g-border);
	border-radius: 12px;
	padding: 14px;
}

.sl4u-r31g-wall-t {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--sl4u-r31g-navy);
}

.sl4u-r31g-wall-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
}

/* ── B · the claim panel on /orders/ ─────────────────────────────────────── */

.sl4u-r31g-claim {
	max-width: 720px;
	margin: 0 auto 22px;
	background: #fff;
	border: 1px solid var(--sl4u-r31g-border);
	border-radius: 18px;
	padding: 20px 22px;
}

.sl4u-r31g-claim-h {
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -.01em;
	color: var(--sl4u-r31g-navy);
}

.sl4u-r31g-claim-p {
	margin: 6px 0 14px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--sl4u-r31g-muted);
}

.sl4u-r31g-link-row {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
}

.sl4u-r31g-link-row input[type="text"] {
	flex: 1 1 260px;
	min-width: 0;
	width: auto;
	font-size: 13px;
	color: var(--sl4u-r31g-muted);
	background: var(--sl4u-r31g-card);
}

/* ── the bridge-session bar ──────────────────────────────────────────────── */

/* Printed in wp_footer, so it is pinned rather than sticky — a sticky element
   at the end of <body> would stick to the bottom of the footer, not the page. */
.sl4u-r31g-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99000;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 10px;
	padding: 9px 16px;
	background: var(--sl4u-r31g-navy);
	color: #fff;
	font-family: Inter, system-ui, sans-serif;
	font-size: 13px;
	line-height: 1.4;
	text-align: center;
}

.sl4u-r31g-bar a {
	color: #fff;
	font-weight: 700;
	text-decoration: underline;
}

/* ──────────────────────────────────────────────────────────────────────────
   SPECIFICITY ARMOUR  (fix for Pastel #… "blue button with no text", live
   2026-09-13, Brave desktop, in the returning-guest wall)
   ──────────────────────────────────────────────────────────────────────────
   ROOT CAUSE — not a new stylesheet. The Elementor kit styles every anchor and
   every button on the site:

       .elementor-kit-4 a      { color: #2145D9 }                      (0,1,1)
       .elementor-kit-4 button { background-color:#2145D9; color:#fff;
                                 border-radius:12px; padding:14px 28px } (0,1,1)

   Every rule above is a single class (0,1,0), so the kit wins both:

     · `<a class="sl4u-r31g-btn">Log in</a>` got the kit's BLUE text on this
       file's BLUE background — a button with an invisible label.
     · `<button class="sl4u-r31g-skip">` got full button chrome (blue fill,
       white text, 12px radius, 14/28 padding) on a control that is meant to be
       a plain text link, and kept this file's underline on top.
     · `<button class="sl4u-r31g-btn sl4u-r31g-btn-ghost">Copy link</button>`
       lost both its white fill and its blue label, so the ghost button
       rendered as a second primary button.

   Confirmed with CDP `CSS.getMatchedStylesForNode` on a live lesson single:
   `sl4u-r30-owner2.css` does not match these nodes at all — its rules are
   scoped to `.sl4u-listings-wrap--r30` / `.sl4u-orders-host` / `.sl4u-orders`.

   FIX — specificity, not `!important`: the kit's declarations are not
   important, so `html body` + element + a doubled class (0,4,2) is enough and
   leaves the cascade honest. Every interactive control this file owns is
   armoured, not just the two that were reported, because they share classes
   with the claim panel.
   ────────────────────────────────────────────────────────────────────────── */

/* primary — white on brand blue, navy on hover */
html body a.sl4u-r31g-btn.sl4u-r31g-btn,
html body button.sl4u-r31g-btn.sl4u-r31g-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 0;
	background: var(--sl4u-r31g-blue);
	background-color: var(--sl4u-r31g-blue);
	color: #fff;
	border: none;
	border-radius: 10px;
	padding: 11px 18px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	cursor: pointer;
}

html body a.sl4u-r31g-btn.sl4u-r31g-btn:hover,
html body a.sl4u-r31g-btn.sl4u-r31g-btn:focus,
html body a.sl4u-r31g-btn.sl4u-r31g-btn:focus-visible,
html body a.sl4u-r31g-btn.sl4u-r31g-btn:active,
html body button.sl4u-r31g-btn.sl4u-r31g-btn:hover,
html body button.sl4u-r31g-btn.sl4u-r31g-btn:focus,
html body button.sl4u-r31g-btn.sl4u-r31g-btn:focus-visible,
html body button.sl4u-r31g-btn.sl4u-r31g-btn:active {
	background: var(--sl4u-r31g-navy);
	background-color: var(--sl4u-r31g-navy);
	color: #fff;
	text-decoration: none;
}

html body a.sl4u-r31g-btn.sl4u-r31g-btn[disabled],
html body button.sl4u-r31g-btn.sl4u-r31g-btn[disabled] {
	opacity: .55;
	cursor: default;
}

/* ghost — blue on white, navy on hover */
html body a.sl4u-r31g-btn.sl4u-r31g-btn-ghost,
html body button.sl4u-r31g-btn.sl4u-r31g-btn-ghost {
	background: #fff;
	background-color: #fff;
	color: var(--sl4u-r31g-blue);
	border: 1.5px solid var(--sl4u-r31g-border);
}

html body a.sl4u-r31g-btn.sl4u-r31g-btn-ghost:hover,
html body a.sl4u-r31g-btn.sl4u-r31g-btn-ghost:focus,
html body button.sl4u-r31g-btn.sl4u-r31g-btn-ghost:hover,
html body button.sl4u-r31g-btn.sl4u-r31g-btn-ghost:focus {
	background: var(--sl4u-r31g-card);
	background-color: var(--sl4u-r31g-card);
	color: var(--sl4u-r31g-navy);
}

/* secondary — a plain text link, never a button. Underline on hover only. */
html body button.sl4u-r31g-skip.sl4u-r31g-skip {
	display: inline;
	width: auto;
	min-width: 0;
	background: none;
	background-color: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
	padding: 11px 6px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--sl4u-r31g-muted);
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
}

html body button.sl4u-r31g-skip.sl4u-r31g-skip:hover,
html body button.sl4u-r31g-skip.sl4u-r31g-skip:focus,
html body button.sl4u-r31g-skip.sl4u-r31g-skip:focus-visible,
html body button.sl4u-r31g-skip.sl4u-r31g-skip:active {
	background: none;
	background-color: transparent;
	color: var(--sl4u-r31g-navy);
	text-decoration: underline;
	box-shadow: none;
}

/* text inputs — the kit also restyles these (it was forcing 8px radius) */
html body input.sl4u-r31g-input.sl4u-r31g-input,
html body .sl4u-r31g-claim input#sl4u-r31g-link-input {
	background: #fff;
	background-color: #fff;
	border: 1.5px solid var(--sl4u-r31g-border);
	border-radius: 10px;
	color: var(--sl4u-r31g-ink);
	font-family: inherit;
	box-shadow: none;
}

html body input.sl4u-r31g-input.sl4u-r31g-input:focus {
	border-color: var(--sl4u-r31g-blue);
	outline: none;
	box-shadow: none;
}

/* links inside our own copy stay brand blue on their own (white) grounds —
   the kit's `a` colour happens to be the right one there, but pin it so a
   future kit change cannot silently invert them. */
html body .sl4u-r31g-guest a.sl4u-r31g-link-a,
html body .sl4u-r31g-tos a,
html body .sl4u-r31g-alt a,
html body .sl4u-r31g-hint a,
html body .sl4u-r31g-wall a:not(.sl4u-r31g-btn) {
	color: var(--sl4u-r31g-blue);
	text-decoration: none;
}

html body .sl4u-r31g-tos a:hover,
html body .sl4u-r31g-alt a:hover,
html body .sl4u-r31g-hint a:hover,
html body .sl4u-r31g-wall a:not(.sl4u-r31g-btn):hover {
	color: var(--sl4u-r31g-navy);
	text-decoration: underline;
}

/* ──────────────────────────────────────────────────────────────────────────
   r32 · #629 — the two-option step, and #630 — guest mode
   ────────────────────────────────────────────────────────────────────────── */

/* ── #629 · step 1: "Sign in / Register" OR "Continue as guest" ─────────── */

.sl4u-r31g-choice {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.sl4u-r31g-choice-btn {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 3px;
	min-height: 66px;
	text-align: left;
	background: #fff;
	border: 1.5px solid var(--sl4u-r31g-border);
	border-radius: 12px;
	padding: 13px 14px;
	cursor: pointer;
	text-decoration: none;
}

.sl4u-r31g-choice-t {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--sl4u-r31g-navy);
}

.sl4u-r31g-choice-s {
	font-size: 12px;
	line-height: 1.35;
	color: var(--sl4u-r31g-muted);
}

@media (max-width: 460px) {
	.sl4u-r31g-choice {
		grid-template-columns: 1fr;
	}

	.sl4u-r31g-choice-btn {
		min-height: 0;
	}
}

/* The "Back" text link sits under the guest form, not inline with anything. */
.sl4u-r31g-guest > button.sl4u-r31g-skip {
	margin-top: 6px;
	padding-left: 0;
}

/* The picker after "Sign in / Register" brings the visitor back. */
.sl4u-r31g-resume {
	outline: 2px solid var(--sl4u-r31g-blue);
	outline-offset: 6px;
	border-radius: 16px;
	transition: outline-color .4s ease;
}

/* ── #630 · the private-link panel and "Need help?" ─────────────────────── */

.sl4u-r31g-help {
	margin-top: 16px;
	font-size: 13px;
	color: var(--sl4u-r31g-muted);
}

.sl4u-r31g-help a {
	color: var(--sl4u-r31g-blue);
	font-weight: 600;
}

.sl4u-r31g-help-standalone {
	max-width: 720px;
	margin: 18px auto 0;
	text-align: center;
}

/* ── #630 · guest mode: strip every account surface ─────────────────────── */

/* Applied by sl4u-r31-guest.js section C to things it has to find first. */
.sl4u-r31g-off {
	display: none !important;
}

/*
 * ARMOUR — `!important` is not enough on its own. Other files on this site
 * already pin `display` with `!important` at a HIGHER specificity than a
 * single class, and specificity decides between two important declarations.
 * Measured live with CDP `CSS.getMatchedStylesForNode` on 2026-09-16:
 *
 *     .sl4u-ol .sl4u-ol-row .sl4u-r9-acts > *   (0,3,0)
 *         display: inline-flex !important       sl4u-r9-orders.php:288
 *
 * which beat both `.sl4u-r31g-off` (0,1,0) and
 * `body.sl4u-r31g-guestmode .sl4u-r9-msg` (0,2,0), so "Message school" stayed
 * on the bookings list in guest mode. Tripling the class plus `html body`
 * gives (0,5,2) — ahead of everything currently in the stack, and still no
 * more than the cascade needs.
 */
html body .sl4u-r31g-off.sl4u-r31g-off.sl4u-r31g-off,
html body.sl4u-r31g-guestmode .sl4u-r9-msg.sl4u-r9-msg.sl4u-r9-msg,
html body.sl4u-r31g-guestmode a.sl4u-bc-msg.sl4u-bc-msg[href*="/messages/"],
html body.sl4u-r31g-guestmode .ts-user-area .user-area-menu.user-area-menu {
	display: none !important;
}

.sl4u-orders-host.sl4u-r31g-wide {
	flex-basis: 100% !important;
	max-width: 100% !important;
	width: 100% !important;
}

/*
 * Hidden without waiting for JS, so nothing flashes. Everything here is a
 * class this stack owns or a Voxel class that only ever carries account
 * chrome. `.elementor-element-ca9d600` is the MEASURED (2026-09-16) id of the
 * member sidebar column on page 451 — it is a belt for the flash only; the
 * braces-and-all removal is the JS `.sl4u-r17-navwrap` walk, which survives a
 * re-save of that page.
 */
body.sl4u-r31g-guestmode .ts-user-area .user-area-menu,
body.sl4u-r31g-guestmode .sl4u-r17-navwrap,
body.sl4u-r31g-guestmode .elementor-451 .elementor-element-ca9d600,
body.sl4u-r31g-guestmode a.sl4u-back-btn,
body.sl4u-r31g-guestmode .sl4u-r9-msg,
body.sl4u-r31g-guestmode .sl4u-r9-inbox,
body.sl4u-r31g-guestmode .sl4u-csug,
body.sl4u-r31g-guestmode a.sl4u-bc-msg[href*="/messages/"],
body.sl4u-r31g-guestmode .sl4u-bc-cline[href*="/messages/"],
body.sl4u-r31g-guestmode .ts-review-form,
body.sl4u-r31g-guestmode .sl4u-reviews-cta {
	display: none !important;
}

/* The header user-bar keeps its box so "Sign out" has somewhere to live. */
html body.sl4u-r31g-guestmode a.sl4u-r31g-signout.sl4u-r31g-signout {
	display: inline-flex;
	align-items: center;
	width: auto;
	min-width: 0;
	background: none;
	background-color: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
	padding: 0 2px;
	font-family: Inter, system-ui, sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--sl4u-r31g-navy);
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
	white-space: nowrap;
}

html body.sl4u-r31g-guestmode a.sl4u-r31g-signout.sl4u-r31g-signout:hover,
html body.sl4u-r31g-guestmode a.sl4u-r31g-signout.sl4u-r31g-signout:focus {
	color: var(--sl4u-r31g-blue);
	text-decoration: underline;
}

html body.sl4u-r31g-guestmode .sl4u-bottom-nav a.sl4u-r31g-signout.sl4u-r31g-signout {
	justify-content: center;
	width: 100%;
	padding: 6px 10px;
}

/*
 * SPECIFICITY ARMOUR for the r32 controls — same contest as the #12 hotfix
 * below/above: `.elementor-kit-4 a` and `.elementor-kit-4 button` are (0,1,1)
 * and every class here is (0,1,0), so without this the choice buttons would
 * render as two solid blue blocks with invisible sub-labels.
 */
html body a.sl4u-r31g-choice-btn.sl4u-r31g-choice-btn,
html body button.sl4u-r31g-choice-btn.sl4u-r31g-choice-btn {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 3px;
	width: auto;
	min-width: 0;
	min-height: 66px;
	background: #fff;
	background-color: #fff;
	border: 1.5px solid var(--sl4u-r31g-border);
	border-radius: 12px;
	padding: 13px 14px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--sl4u-r31g-navy);
	text-align: left;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	cursor: pointer;
}

html body a.sl4u-r31g-choice-btn.sl4u-r31g-choice-btn:hover,
html body a.sl4u-r31g-choice-btn.sl4u-r31g-choice-btn:focus,
html body a.sl4u-r31g-choice-btn.sl4u-r31g-choice-btn:focus-visible,
html body button.sl4u-r31g-choice-btn.sl4u-r31g-choice-btn:hover,
html body button.sl4u-r31g-choice-btn.sl4u-r31g-choice-btn:focus,
html body button.sl4u-r31g-choice-btn.sl4u-r31g-choice-btn:focus-visible {
	background: var(--sl4u-r31g-card);
	background-color: var(--sl4u-r31g-card);
	border-color: var(--sl4u-r31g-blue);
	color: var(--sl4u-r31g-navy);
	text-decoration: none;
	box-shadow: none;
}

html body .sl4u-r31g-choice-btn .sl4u-r31g-choice-t {
	color: var(--sl4u-r31g-navy);
}

html body .sl4u-r31g-choice-btn .sl4u-r31g-choice-s {
	font-size: 12px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--sl4u-r31g-muted);
}

html body .sl4u-r31g-help a {
	color: var(--sl4u-r31g-blue);
	text-decoration: none;
}

html body .sl4u-r31g-help a:hover {
	color: var(--sl4u-r31g-navy);
	text-decoration: underline;
}

@media (max-width: 600px) {
	.sl4u-r31g-claim {
		padding: 16px;
		border-radius: 14px;
	}

	.sl4u-r31g-link-row input[type="text"],
	.sl4u-r31g-link-row .sl4u-r31g-btn {
		flex: 1 1 100%;
	}
}