/**
 * SL4U — R30 · owner-side round 2 (Pastel #612, #602, #617, #614).
 * Enqueued site-wide from sl4u-r30-owner2.php at wp_enqueue_scripts 100.
 * Palette: grey + blue, no glow, orange only on the sanctioned CTAs.
 *   --sl4u-blue #2145D9 · --sl4u-blue-dark #1a37b0
 *   --sl4u-navy #1B2A6B · --sl4u-navy-deep #16225a
 */

/* ═══════════════════════════════════════════════════════════════════════
 * #612 — lesson reference chip  (L-2079)
 * ═══════════════════════════════════════════════════════════════════════ */

.sl4u-r30-ref {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	padding: 1px 6px;
	border-radius: 6px;
	background: #f1f5f9;
	border: 1px solid #e2e8f0;
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .4px;
	line-height: 1.5;
	color: #475569;               /* 7.4:1 on #f1f5f9 */
	white-space: nowrap;
	text-transform: none;
	user-select: all;             /* one click selects the whole reference */
}

/* R32 #638 — the `.sl4u-r30-ref--h1` rules are deleted with the node that wore
   them (see sl4u-r30-owner2.js): no reference chip in the lesson title. */

/* On the lesson single, in the owner "Bookings" panel header. */
.sl4u-r30-ref.sl4u-r30-ref--ob {
	margin-left: 10px;
	padding: 2px 8px;
	font-size: 11.5px;
	vertical-align: middle;
}

/* In a listing row the "Lesson" column is only ~100px wide at 1280, so the
   chip is tightened (and r16b's 8px sub-line gap trimmed to 6px) to keep the
   reference on the SAME line as the activity chip. Measured: without this the
   row grows one line, +28px each, +138px over the Live pane. */
html body .sl4u-listings-wrap .sl4u-ml-sub { gap: 6px !important; }
html body .sl4u-listings-wrap .sl4u-ml-sub .sl4u-r30-ref {
	padding: 0 5px;
	font-size: 10px;
	letter-spacing: .2px;
	line-height: 1.6;
}

/* From 1360px up the Lesson column is wide enough (248px+) that letting the
   location ellipsise instead of wrapping keeps the whole meta line — ref,
   activity, place — on ONE row: measured 88px row height with and without the
   chip at 1440. Below that the column is 8-88px wide and every chip already
   needs its own line, so the location is left to wrap rather than be erased. */
@media (min-width: 1360px) {
	html body .sl4u-listings-wrap .sl4u-ml-sub .sl4u-ml-loc {
		flex: 1 1 0;
		min-width: 0;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
 * #602 — Templates tab on /my-listings/
 * ═══════════════════════════════════════════════════════════════════════ */

/* Row accent: live=green, pending=amber, draft=grey, trash=slate — a
   template gets the soft brand blue so it reads as "not a listing". */
.sl4u-listings-wrap--r30 .sl4u-ml-row.is-tpl {
	border-left-color: #c3ccf0;
	background: #fbfcff;
}
.sl4u-listings-wrap--r30 .sl4u-ml-row.is-tpl:hover { background: #f6f8fd; }
.sl4u-listings-wrap--r30 .sl4u-ml-row.is-tpl .sl4u-ml-title { color: #334155; }
.sl4u-listings-wrap--r30 .sl4u-ml-chip.is-tpl {
	background: rgba(33, 69, 217, .10);
	color: #1a37b0;
}
.sl4u-listings-wrap--r30 .sl4u-ml-row.is-tpl .sl4u-ml-thumb { opacity: .85; }

/* Delete is icon-only, like r16c's injected delete. */
.sl4u-listings-wrap--r30 .sl4u-ml-btn.sl4u-r30-tpldel .t { display: none; }
.sl4u-listings-wrap--r30 .sl4u-ml-btn.is-busy { opacity: .6; pointer-events: none; }

/* Five tabs no longer fit as equal-width columns at phone size — r16c's
   `flex: 1 1 0` rule assumed three. Restore horizontal scrolling (the strip
   already has overflow-x: auto). */
@media (max-width: 767px) {
	.sl4u-listings-wrap--r30 .sl4u-mlc-tabs { gap: 2px; }
	body .sl4u-listings-wrap--r30 button.sl4u-mlc-tab {
		flex: 0 0 auto;
		justify-content: flex-start;
		padding: 10px 9px 8px;
		font-size: 11.5px;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
 * #617 — /settings/: the four section cards get a grey-blue surface
 * ═══════════════════════════════════════════════════════════════════════
 * #f6f8fd is the surface already used by the map switcher (sl4u-maps.php:206);
 * the hairline is the brand blue at 12%. Radius is left to sl4u-r6-polish.php
 * (#218: one flat 12px everywhere). The `.sl4u-rx-danger` block is NOT one of
 * the four — it keeps its red wash.
 */
@media (min-width: 720px) {
	html body .sl4u-rx-sec {
		background: #f6f8fd !important;
		border: 1px solid rgba(33, 69, 217, .12) !important;
	}

	/* R32, her reply to #617 (2026-09-15): "the part of the smaller buttons can
	   be kept brighter (not sure how it was before) so basically the hover
	   colour can stick. just the backest background darker."
	   So: the outer card keeps the #f6f8fd tint, and everything INSIDE it goes
	   back to white. #617 shipped white only as a :hover state — it is the
	   resting state now, which is exactly "the hover colour can stick", and it
	   restores the pre-#617 look of the rows without giving up the darker
	   surface behind them. The divider keeps the blue hairline so stacked white
	   rows still read as separate rows, and the chevron slide + :active scale
	   (sl4u-settings-redesign.php:143-162) remain the hover affordance. */
	html body .sl4u-rx-sec .sl4u-rx-row,
	html body .sl4u-rx-sec .sl4u-rx-row:hover {
		background: #ffffff !important;
	}
	html body .sl4u-rx-sec .sl4u-rx-row + .sl4u-rx-row {
		box-shadow: inset 0 1px 0 rgba(33, 69, 217, .10) !important;
	}

	/* Same reply: Preferences / Legal re-home their own `.sl4u-acc-card` inside
	   a section, and #617 stripped its chrome so it would not read as "a white
	   box in a tinted frame". A white box in a tinted frame is now the point —
	   the base rule (sl4u-settings-redesign.php:180) already draws it white
	   with a #e8edf5 hairline, so the override is simply withdrawn and only the
	   padding (which stops the inner card touching the tinted edge) is kept. */
	html body .sl4u-rx-sec > .sl4u-rx-prefs { padding: 4px 8px 8px !important; }
}

/* Below 720px the two mobile passes already decide the card chrome, and they
   decide it differently per role: for a school owner
   `body.sl4u-msch-settings .sl4u-rx-sec` (sl4u-mobile-school.php:516) removes
   the card entirely — that was a deliberate "four nested boxes" fix and is
   left alone. The student still has a real white card there, so it is tinted
   like the desktop one. */
@media (max-width: 719px) {
	html body:not(.sl4u-msch-settings) .sl4u-rx-sec {
		background: #f6f8fd !important;
		border: 1px solid rgba(33, 69, 217, .12) !important;
	}
	/* R32 — same "brighter inside, darker behind" as the desktop block above. */
	html body:not(.sl4u-msch-settings) .sl4u-rx-sec .sl4u-rx-row,
	html body:not(.sl4u-msch-settings) .sl4u-rx-sec .sl4u-rx-row:hover {
		background: #ffffff !important;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
 * #614 — a blue button never turns orange
 * ═══════════════════════════════════════════════════════════════════════
 * Kept orange on purpose (base colour IS orange, they only darken):
 *   .sl4u-hs-submit ("Search lessons"), .sl4u-topbar-post-cta,
 *   .sl4u-stp-book, .sl4u-sp-confirm, a.sl4u-mb-cta,
 *   .elementor-element-aea6a3f .elementor-button ("Subscribe now"),
 *   .sl4u-se-booked / .sl4u-se-pending  — sl4u-design-tokens.php §6.
 * Everything below introduced orange on an interaction state of a control
 * that is blue, navy or neutral at rest.
 */

/* ── 1. The wizard's Next / Save / Publish / Submit ───────────────────────
   Resting #1B2A6B navy, hover was a #E8772E→#d35f1a gradient
   (sl4u-custom-styles.php:787) and a flat #d3601a (…:1278). The most
   clicked button on the site and the one she almost certainly means. */
html body .ts-create-post .ts-btn-2:hover,
html body .ts-create-post .ts-btn-2:active,
html body .ts-create-post .ts-btn-2:focus-visible,
html body .ts-create-post .ts-next:hover,
html body .ts-create-post .ts-next:active,
html body .ts-create-post .ts-next:focus-visible,
html body .ts-create-post .ts-save-changes:hover,
html body .ts-create-post .ts-save-changes:active,
html body .ts-create-post .ts-save-changes:focus-visible,
html body .sl4u-post-lesson .ts-next.ts-btn:hover,
html body .sl4u-post-lesson .ts-next.ts-btn:active,
html body .sl4u-post-lesson .ts-publish.ts-btn:hover,
html body .sl4u-post-lesson .ts-publish.ts-btn:active,
html body .sl4u-post-lesson .ts-submit.ts-btn:hover,
html body .sl4u-post-lesson .ts-submit.ts-btn:active {
	background: #16225a !important;          /* --sl4u-navy-deep */
	background-image: none !important;
	color: #fff !important;
	box-shadow: 0 4px 12px rgba(27, 42, 107, .26) !important;
}

/* ── 2. Any CTA that is BLUE at rest must not hover to orange ────────────
   sl4u-design-tokens.php:476 darkens a shared CTA list to
   var(--sl4u-orange-dark). Two members of that list are rendered blue by
   later rules (`a.sl4u-cta-btn` — "Browse all lessons" — and the .ts-auth
   submit), so they flipped blue → orange. Pin them to navy. */
html body a.sl4u-cta-btn.sl4u-cta-btn:hover,
html body a.sl4u-cta-btn.sl4u-cta-btn:active,
html body a.sl4u-cta-btn.sl4u-cta-btn:focus-visible,
html body .ts-auth .ts-btn.ts-btn-2:hover,
html body .ts-auth .ts-btn.ts-btn-2:active,
html body .ts-auth button[type="submit"]:hover,
html body .ts-auth button[type="submit"]:active,
html body .ts-form .ts-btn.ts-btn-2[type="submit"]:hover,
html body .ts-form .ts-btn.ts-btn-2[type="submit"]:active {
	background: #1B2A6B !important;
	background-image: none !important;
	color: #fff !important;
}

/* ── 3. Hero "When" picker: navy icon tile went orange on hover, and the
        date inputs took an orange focus ring (sl4u-search-filter-css). ─── */
html body .sl4u-hs-when-pick:hover .material-symbols-outlined {
	background: #2145D9 !important;
	color: #fff !important;
}
html body .sl4u-hs-when-pick-input:focus {
	border-color: #2145D9 !important;
	box-shadow: 0 0 0 3px rgba(33, 69, 217, .18) !important;
}

/* ── 4. Every remaining orange focus ring → blue ─────────────────────────
        (wizard fields, slot-picker price/spots, contact form, orders bar) */
html body .sl4u-post-lesson input[type="text"]:focus,
html body .sl4u-post-lesson input[type="email"]:focus,
html body .sl4u-post-lesson input[type="url"]:focus,
html body .sl4u-post-lesson input[type="number"]:focus,
html body .sl4u-post-lesson input[type="tel"]:focus,
html body .sl4u-post-lesson input[type="search"]:focus,
html body .sl4u-post-lesson textarea:focus,
html body .sl4u-post-lesson select:focus,
html body .sl4u-sp-price-input:focus,
html body .sl4u-sp-max-input:focus,
html body .sl4u-sp-add-row input:focus,
html body .sl4u-sp-add-row select:focus,
html body .sl4u-mgt-form input:focus,
html body .sl4u-mgt-form textarea:focus,
html body .ts-create-post .field-key-inclusions .form-field-grid input:focus,
html body .ts-create-post .field-key-what-to-bring .form-field-grid input:focus,
html body .sl4u-orders .ts-filter:focus,
html body .sl4u-orders .ts-filter:focus-within {
	border-color: #2145D9 !important;
	box-shadow: 0 0 0 3px rgba(33, 69, 217, .15) !important;
	outline: none !important;
}

/* Focus outlines on buttons / checkboxes (auth screens). */
html body .ts-auth .sl4u-r22-btn:focus-visible,
html body .ts-auth .container-checkbox input[type="checkbox"]:focus-visible {
	outline: 2px solid #2145D9 !important;
	outline-offset: 2px;
}

/* ── 5. Card arrows: navy #2B3990 at rest, flipped to orange on card hover
        by the Elementor per-post sheets
          elementor-post-40  .elementor-element-475547d  .sl4u-school-arrow
          elementor-post-17  .elementor-element-f988b57  .sl4u-card-arrow
        Those selectors carry !important at specificity (0,5,0); the repeated
        class below reaches (0,5,2) / (0,6,2) so it wins without hard-coding
        an Elementor element id that a template edit could change. */
html body .sl4u-school-arrow.sl4u-school-arrow.sl4u-school-arrow.sl4u-school-arrow.sl4u-school-arrow,
html body .sl4u-card-arrow.sl4u-card-arrow.sl4u-card-arrow.sl4u-card-arrow.sl4u-card-arrow {
	color: #2B3990 !important;
}
html body .elementor-element:hover .sl4u-school-arrow.sl4u-school-arrow.sl4u-school-arrow.sl4u-school-arrow.sl4u-school-arrow,
html body a:hover .sl4u-school-arrow.sl4u-school-arrow.sl4u-school-arrow.sl4u-school-arrow.sl4u-school-arrow,
html body .elementor-element:hover .sl4u-card-arrow.sl4u-card-arrow.sl4u-card-arrow.sl4u-card-arrow.sl4u-card-arrow,
html body a:hover .sl4u-card-arrow.sl4u-card-arrow.sl4u-card-arrow.sl4u-card-arrow.sl4u-card-arrow {
	color: #2145D9 !important;
}

/* ── 5b. "Remove from favourites" on /favorites/ ─────────────────────────
        Resting background is the brand blue #2145D9 (measured live); hover
        flipped it to #E8772E (sl4u-custom-styles.php:295). Exactly the
        "blue button turns orange" she describes. */
html body button.sl4u-unfav.sl4u-unfav:hover,
html body button.sl4u-unfav.sl4u-unfav:active,
html body button.sl4u-unfav.sl4u-unfav:focus-visible {
	background: #1B2A6B !important;
	color: #fff !important;
}

/* ── 5c. "Save to favourites" on the lesson / school single ──────────────
        elementor-post-16 / -39 give `.ts-action-con:hover` an orange border,
        orange icon and a cream #fff7ed fill at (0,5,0) !important. Matched
        with a repeated class so no Elementor id is baked in. The SAVED state
        (`.ts-collections.active`, sl4u-custom-styles.php:10624) is turned
        blue too — see the ledger, this is the one judgement call in #614. */
html body a.ts-action-con.ts-action-con.ts-action-con.ts-action-con:hover,
html body a.ts-action-con.ts-action-con.ts-action-con.ts-action-con:focus-visible {
	border-color: #b9c6f5 !important;
	color: #2145D9 !important;
	background: #f6f8fd !important;
}
html body .ts-action-wrap.ts-collections.active .ts-action-icon i,
html body .ts-action-wrap.ts-collections.active .ts-action-icon svg,
html body .ts-preview .ts-action-wrap.ts-collections.active .ts-action-icon i,
html body .ts-preview .ts-action-wrap.ts-collections.active .ts-action-icon svg {
	color: #2145D9 !important;
	fill: #2145D9 !important;
}

/* ── 6. Quick-filter chips: the active chip's icon tile went orange ────── */
html body .sl4u-hero-qf-item.is-active .ic,
html body .sl4u-sf-hero-qf-item.is-active .ic {
	background: #2145D9 !important;
	color: #fff !important;
}

/* ── 7. /my-listings/ Restore button: neutral → orange fill on hover ───── */
html body .sl4u-listings-wrap--r16c button.sl4u-mlc-restore:hover,
html body .sl4u-listings-wrap--r16c button.sl4u-mlc-restore:active {
	background: #1B2A6B !important;
	border-color: #1B2A6B !important;
	color: #fff !important;
}

/* ── 8. Orders / bookings screens ────────────────────────────────────────
        every hover in the orders host turned an element orange. */
html body .sl4u-orders-host .single-order .vx-order-head .ts-btn-1:not(.ts-go-back):hover,
html body .sl4u-orders-host .single-order .vx-order-head .ts-popup-target:hover {
	color: #2145D9 !important;
	border-color: #b9c6f5 !important;
	background: #f6f8fd !important;
}
html body .sl4u-orders-host .single-order .vx-order-head .ts-btn-2:hover,
html body .sl4u-orders-host .single-order .vx-order-head .ts-btn-2:active {
	background: #1B2A6B !important;
	box-shadow: 0 4px 12px rgba(27, 42, 107, .26) !important;
}
html body .sl4u-orders-host .single-order .further-actions .ts-btn:hover {
	background: #2145D9 !important;
	border-color: #2145D9 !important;
	color: #fff !important;
	box-shadow: 0 4px 12px rgba(33, 69, 217, .22) !important;
}
html body .sl4u-orders-host .ts-term-dropdown-list li a:hover {
	background: #f6f8fd !important;
	color: #2145D9 !important;
}
html body .sl4u-orders .order-reset-button .ts-filter:hover {
	color: #2145D9 !important;
	border-color: #b9c6f5 !important;
}
html body .sl4u-orders .vx-order-more .ts-load-more:not(.vx-disabled):hover {
	background: #2145D9 !important;
	border-color: #2145D9 !important;
	color: #fff !important;
}
html body .sl4u-ol .sl4u-ol-row .sl4u-r9-acts .sl4u-r20-orv:hover {
	background: #f6f8fd !important;
	border-color: #b9c6f5 !important;
	color: #1a37b0 !important;
}

/* ── 9. Wizard repeater "add" control ───────────────────────────────────── */
html body .ts-create-post .field-key-inclusions .ts-repeater-add:hover,
html body .ts-create-post .field-key-what-to-bring .ts-repeater-add:hover {
	border-color: #b9c6f5 !important;
	color: #2145D9 !important;
	background: #f6f8fd !important;
}

/* ── 10. Slot-editor remove controls: orange is not a destructive colour
         here. Reuse the soft red the account panel already uses for
         "Sign out" (sl4u-settings-redesign.php:122). ─────────────────── */
html body .sl4u-pp .sl4u-w6-group-rm:hover {
	background: #ffffff !important;
	border-color: #f0d5d3 !important;
	color: #b4322c !important;
}
html body .sl4u-pp .sl4u-w6-slot-rm:hover {
	color: #b4322c !important;
	border-color: #f0d5d3 !important;
}

/* ── 11. Small remaining hovers that introduced orange ──────────────────── */
html body .sl4u-review-foot .link:hover { color: #2145D9 !important; }
html body .sl4u-promo-row:hover {
	border-color: #b9c6f5 !important;
	box-shadow: 0 8px 20px rgba(33, 69, 217, .10) !important;
}
html body .post-type-archive-schools .ts-inline-filter .ts-term-dropdown-list > li:hover {
	border-color: #b9c6f5 !important;
	box-shadow: 0 6px 16px rgba(33, 69, 217, .14) !important;
}