/**
 * Wholesale minimum — cart, mini-cart and checkout messaging.
 *
 * Colours are the site's own Elementor globals so this reads as part of the
 * store rather than a stock WooCommerce alert:
 *   Secondary #1F3864 · Accent #2F5496 · Text #1E293B · Border #CBD5E1
 *   error tint #FFF5F5 (the site's own "New Global Color")
 *
 * Everything is scoped to the #id or an oml- class so theme and Elementor
 * rules can't reach in and undo it.
 */

/* ==========================================================================
   GLOBAL HEADER — mobile/tablet navigation was completely unreachable
   ==========================================================================

   The header's Nav Menu widget (Elementor's own burger-menu widget, the ONE
   thing that opens navigation on phone/tablet) has "Hide on Tablet" AND
   "Hide on Mobile" both checked in its own Elementor responsive-visibility
   settings — on the exact two breakpoints where it is the only way to reach
   COA Vault / Shop / Wholesale / Our Story / Special Order / Contact. This is
   an Elementor widget setting, not a CSS bug we introduced, but it is global
   (one header template, every page) so it is fixed here rather than left for
   a future content edit that may or may not happen.

   Confirmed live in a real browser before writing this: removing exactly
   these three classes made the toggle visible, clickable, and produced the
   real dropdown with the real 6 menu items. Sticky-header setups duplicate
   this widget in the DOM, so the fix has to be a rule, not a one-off class
   strip — it renders twice, both need it.

   `elementor-invisible` is Elementor's own entrance-animation start-state; it
   never got removed because the widget was display:none when the animation
   observer looked for it. Scoped to this exact widget only, not the class in
   general, so a legitimate entrance animation elsewhere on the site is not
   touched.

   Reversible by deleting this block; nothing else about the header changed. */

header.elementor-location-header .elementor-widget-nav-menu.elementor-nav-menu--toggle.elementor-nav-menu--burger {
	visibility: visible !important;
	opacity: 1 !important;
}

@media ( max-width: 767px ) {
	header.elementor-location-header .elementor-widget-nav-menu.elementor-nav-menu--toggle.elementor-nav-menu--burger.elementor-hidden-mobile {
		display: flex !important;
	}
}

@media ( min-width: 768px ) and ( max-width: 1024px ) {
	header.elementor-location-header .elementor-widget-nav-menu.elementor-nav-menu--toggle.elementor-nav-menu--burger.elementor-hidden-tablet {
		display: flex !important;
	}
}

/*
 * Now that the burger toggle above actually renders, it revealed the design
 * underneath it: a solid accent-blue filled button (Elementor CSS var
 * --e-global-color-accent, deliberately set by whoever built the header) that
 * sits noticeably higher than the search/account/cart icons beside it, and
 * doesn't match their plain outline style. Nobody could see this clash before
 * — it had never actually been visible.
 *
 * The vertical offset is real, not a rounding error: measured against the
 * cart icon's own vertical center as the reference point (a correctly-placed
 * sibling), the toggle sits 21px too high. That number is empirical, tied to
 * this header's current content — if the icon row's own height or padding
 * changes later, re-measure rather than trust it blindly.
 *
 * The fix has to target `.elementor-menu-toggle` itself, not its widget
 * wrapper (`.elementor-element-5baba42`): Elementor's own JS drives a
 * transform on the wrapper for its entrance animation, and that wins over a
 * stylesheet transform on the same element regardless of !important. The
 * inner toggle carries no such competing transform, confirmed empirically —
 * a translateY there took effect immediately and cleanly, with the header's
 * own height unchanged (a margin-based nudge, tried first, grew the header
 * and shifted every other icon's position along with it — transform doesn't
 * participate in layout flow, so nothing else on the page moves).
 *
 * Recoloured to the icons' own navy (#1F3864) with no fill, matching the
 * plain-outline language of its neighbours instead of standing out as an
 * unrelated button. Confirmed in a real browser: dropdown still opens with
 * all 6 links, header height unchanged, no horizontal overflow introduced.
 *
 * Real regression, found and fixed the same day: this rule's own
 * `display: flex !important` carried no breakpoint guard, so it applied at
 * every width — including desktop, above Elementor's own 1024px cutoff,
 * where this widget is supposed to stay hidden in favour of the full inline
 * menu. Our unconditional override beat Elementor's own default desktop-hide
 * rule for this element, so the toggle rendered a second, redundant nav
 * control underneath the real desktop menu. Wrapped in the same max-width
 * this file already uses for "mobile or tablet" (1024px, matching line 51's
 * tablet upper bound) so it can only ever affect the two breakpoints where
 * this toggle is meant to exist at all.
 */
@media ( max-width: 1024px ) {
	header.elementor-location-header .elementor-menu-toggle {
		transform: translateY( 21px ) !important;
		background-color: transparent !important;
		border-radius: 0 !important;
		width: 26px !important;
		height: 26px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
	}

	header.elementor-location-header .elementor-menu-toggle svg {
		fill: #1F3864 !important;
		width: 24px !important;
		height: 24px !important;
	}
}

@media ( min-width: 1025px ) {
	header.elementor-location-header .elementor-menu-toggle {
		display: none !important;
	}
}

/* ---- checkout banner ---------------------------------------------------- */

#oml-wm-banner {
	margin: 0 0 24px;
	padding: 18px 20px;
	background: #FFF5F5;
	border: 1px solid #E2C9C9;
	border-left: 4px solid #1F3864;
	border-radius: 6px;
	box-shadow: 0 1px 2px rgba( 15, 23, 42, 0.06 );
	color: #1E293B;
	font-size: 15px;
	line-height: 1.55;
}

#oml-wm-banner .oml-wm-title {
	display: block;
	margin: 0 0 6px;
	color: #1F3864;
	font-size: 16px;
	font-weight: 650;
	letter-spacing: -0.01em;
}

#oml-wm-banner .oml-wm-text {
	display: block;
	margin: 0 0 14px;
	color: #1E293B;
}

#oml-wm-banner .oml-wm-btn {
	display: inline-block;
	padding: 10px 20px;
	background: #1F3864;
	color: #ffffff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	border-radius: 6px;
	transition: background 0.15s ease;
}

#oml-wm-banner .oml-wm-btn:hover,
#oml-wm-banner .oml-wm-btn:focus {
	background: #2F5496;
	color: #ffffff;
}

#oml-wm-banner .oml-wm-btn:focus-visible {
	outline: 2px solid #2F5496;
	outline-offset: 3px;
}

/* ---- blocked routes to checkout ----------------------------------------- */

.oml-wm-blocked {
	opacity: 0.45 !important;
	cursor: not-allowed !important;
}

/* WooCommerce's own vaguer message, hidden only once ours has rendered. */
.oml-wm-hidden {
	display: none !important;
}

/* ---- mini-cart notice ---------------------------------------------------- */

.oml-wm-mini {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0 0 14px;
	padding: 12px 14px;
	background: #FFF5F5;
	border: 1px solid #E2C9C9;
	border-left: 3px solid #1F3864;
	border-radius: 6px;
	color: #1E293B;
	font-size: 13px;
	line-height: 1.5;
	text-align: left;
	/* The mini-cart footer is usually a flex column of buttons — make sure the
	   notice spans it rather than being squeezed into a button-sized box. */
	flex: 0 0 auto;
	align-self: stretch;
	order: -1;
}

.oml-wm-mini strong {
	display: block;
	margin: 0 0 3px;
	color: #1F3864;
	font-size: 13.5px;
	font-weight: 650;
	letter-spacing: -0.005em;
}

.oml-wm-mini .oml-wm-mini-text {
	display: block;
	color: #1E293B;
}

@media ( max-width: 600px ) {
	#oml-wm-banner {
		padding: 15px 16px;
		font-size: 14.5px;
	}
}

/* ==========================================================================
   MY ACCOUNT — SITE-WIDE CHROME
   Loaded on every My Account page (Dashboard, Orders, Addresses, Account
   details, Referrals), not only the referral tab — see
   OML_Referral_Dashboard::frontend_config(). The goal is one consistent
   account area using the site's own tokens, not a redesigned tab bolted onto
   an otherwise untouched WooCommerce shell. Layout stays exactly as
   WooCommerce ships it (nav on the side, content beside it); only spacing,
   type, colour and the table/button treatment are touched.
   ========================================================================== */

:root {
	--oml-navy: #1F3864;
	--oml-blue: #2F5496;
	--oml-text: #1E293B;
	--oml-muted: #64748B;
	--oml-border: #D8E0EA;
	--oml-mist: #F6F9FC;
	--oml-ok: #15803D;
	--oml-ok-bg: #EAF6EE;
	--oml-hold: #B45309;
	--oml-hold-bg: #FDF3E3;
	--oml-bad: #B91C1C;
	--oml-bad-bg: #FCEBEB;
	--oml-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

/*
 * This page's Elementor "My Account" widget carries its own long-standing
 * tab styling (75px pill radius, 15px gaps between items, per-item divider
 * pseudo-elements) set in the widget's own Style panel, not by oml-core.
 * Those rules are scoped to that Elementor widget instance and win on
 * specificity over a plain class selector, so every property Elementor's
 * widget touches is re-set here with !important — the only reliable way to
 * get one consistent, flat account nav regardless of that widget's own
 * settings, without editing Elementor content directly.
 */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid var(--oml-border);
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-bottom: 1px solid var(--oml-border) !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation li:last-child {
	border-bottom: 0 !important;
}

/* Elementor's own tab divider — replaced by the border-bottom above. */
.woocommerce-account .woocommerce-MyAccount-navigation li::after {
	display: none !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block !important;
	padding: 13px 18px !important;
	background: #fff !important;
	color: var(--oml-text) !important;
	font-size: 14.5px !important;
	font-weight: 500 !important;
	text-decoration: none;
	border: 0 !important;
	border-radius: 0 !important;
	transition: background 0.12s ease, color 0.12s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	background: var(--oml-mist) !important;
	color: var(--oml-text) !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--oml-navy) !important;
	color: #fff !important;
	font-weight: 600 !important;
}

/*
 * The referral programme's nav row gets a permanent accent treatment — a
 * left accent bar and a custom animated gift mark, no badge — every visit,
 * for every user. (A "seen once, then plain" version of this existed
 * briefly and was removed entirely per feedback; there is no lingering
 * per-user state controlling this any more — no meta key, no gating class.)
 *
 * The rate badge ("10% + credit") was removed entirely per feedback —
 * simpler, and it removes the exact source of a real clipping bug from an
 * earlier round (see git history if that specific fix is ever needed again).
 * The label itself is now just "Give 10, Get 10" (no "— Referrals" suffix),
 * short enough that this row no longer has any wrap/overflow risk at all.
 */
.woocommerce-account .woocommerce-MyAccount-navigation-link--referrals a {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding-left: 15px !important;
	font-weight: 700 !important;
	white-space: nowrap !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--referrals:not(.is-active) a {
	background: linear-gradient( 135deg, rgba( 47, 84, 150, 0.09 ), rgba( 31, 56, 100, 0.03 ) ) !important;
	color: var(--oml-navy) !important;
	border-left: 3px solid var(--oml-blue) !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--referrals:not(.is-active) a:hover {
	background: linear-gradient( 135deg, rgba( 47, 84, 150, 0.16 ), rgba( 31, 56, 100, 0.07 ) ) !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--referrals.is-active a {
	background: linear-gradient( 135deg, var(--oml-navy), #16294a ) !important;
	color: #fff !important;
	border-left: 3px solid var(--oml-blue) !important;
}

/*
 * The gift mark, as a CSS background-image rather than the 🎁 emoji — per
 * feedback, a custom animated icon reads as brand-built, not a stock emoji.
 * No circular background (removed per feedback — the original blue-gradient
 * circle disappeared against this row's own navy .is-active background,
 * blue-on-blue). Two color variants instead, one per real background this
 * row ever sits on: navy glyph on the light tint (:not(.is-active)), white
 * glyph on the solid navy (.is-active) — the exact same real files
 * (assets/icons/gift-navy.svg / gift-white.svg) OML_Icons::gift_icon_html()
 * serves via <img src> for the homepage banner.
 *
 * Switched from a hand-encoded data: URI to these real file paths — the
 * data: URI decoded and validated as byte-correct, well-formed SVG (checked
 * directly), and the served CSS matched the source byte-for-byte, but the
 * icon still didn't render in a real browser, incognito included, so
 * something about that specific technique wasn't behaving as expected here.
 * Rather than keep debugging an unverifiable theory blind, switched to the
 * simplest possible technique — an ordinary background-image file
 * reference, identical in kind to how every other icon in this stylesheet
 * already works. Relative to this file's own location (assets/frontend.css)
 * so it resolves correctly on both live and staging without hardcoding a
 * domain.
 */
.woocommerce-account .woocommerce-MyAccount-navigation-link--referrals a::before {
	content: "";
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	position: absolute;
	left: 14px;
}

/*
 * Taken out of flex flow entirely and positioned absolutely instead —
 * found via direct devtools inspection that the icon was rendering (the
 * file-reference fix worked) but collapsing to invisible as a flex item in
 * this row. Absolute positioning removes it from that flex sizing
 * calculation altogether, so it can't be squeezed away regardless of what's
 * happening with the row's other flex items. The <a> needs its own
 * position: relative to anchor it and enough left padding to leave room for
 * an icon that no longer takes up flex space of its own.
 */
li.woocommerce-MyAccount-navigation-link.woocommerce-MyAccount-navigation-link--referrals a {
	padding-left: 40px !important;
	position: relative;
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--referrals:not(.is-active) a::before {
	background-image: url("icons/gift-navy.svg");
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--referrals.is-active a::before {
	background-image: url("icons/gift-white.svg");
}

@media ( max-width: 760px ) {
	/* The pill-row layout has no room for the icon alongside the label;
	   keep only the accent tint and bold weight so it still reads as
	   distinct without crowding a horizontally-scrolling strip. */
	.woocommerce-account .woocommerce-MyAccount-navigation-link--referrals:not(.is-active) a {
		border-left: 0 !important;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation-link--referrals a::before {
		content: none;
	}
}

.woocommerce-account .woocommerce-MyAccount-content > h2:first-child,
.woocommerce-account .woocommerce-MyAccount-content > h3:first-child {
	margin-top: 0;
	color: var(--oml-navy);
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
	border: 1px solid var(--oml-border);
	border-radius: 10px;
	overflow: hidden;
	border-collapse: separate;
	border-spacing: 0;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table th {
	background: var(--oml-mist);
	color: var(--oml-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table th,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table td {
	padding: 12px 16px;
	border-bottom: 1px solid var(--oml-border);
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table tr:last-child td {
	border-bottom: none;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button,
.woocommerce-account .woocommerce-MyAccount-content .button {
	background: var(--oml-blue);
	border-radius: 999px;
	color: #fff;
	font-weight: 600;
	transition: box-shadow 0.12s ease;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button:hover,
.woocommerce-account .woocommerce-MyAccount-content .button:hover {
	background: var(--oml-navy);
	color: #fff;
	box-shadow: 0 4px 14px -4px rgba(47, 84, 150, 0.5);
}

.woocommerce-account .woocommerce-MyAccount-content mark.order-status {
	background: var(--oml-ok-bg);
	color: var(--oml-ok);
	border-radius: 999px;
	font-weight: 600;
}

/* ==========================================================================
   REFERRAL DASHBOARD — the "My Referrals" tab specifically
   ========================================================================== */

.oml-referral-dashboard {
	color: var(--oml-text);
}

.oml-referral-eyebrow {
	margin: 0;
	color: var(--oml-blue);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/*
 * Eyebrow heading and the conditional "Redeem Credit" CTA share one row —
 * the button is level with the heading, pinned to the far right, per
 * feedback. Only rendered by PHP at all when the user has a positive
 * available balance (OML_Referral_Dashboard::render()), so no empty-state
 * handling is needed here.
 */
.oml-referral-eyebrow-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 20px;
}

.oml-use-credit-cta {
	flex-shrink: 0;
	padding: 9px 20px !important;
	font-size: 13px !important;
	color: #fff !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	white-space: nowrap;
}

.oml-use-credit-cta:hover,
.oml-use-credit-cta:focus,
.oml-use-credit-cta:visited {
	background: var(--oml-navy) !important;
	color: #fff !important;
	text-decoration: none !important;
	box-shadow: none !important;
	border: 0 !important;
}

/*
 * Smooth in-page scroll for the Redeem Credit link's #oml-credit-wallet
 * anchor. `html` can never be a descendant of a class on <body> (it's
 * <body>'s own ancestor), so this has to be a plain, unscoped rule on the
 * root element — the only place a browser looks for scroll-behavior when
 * scrolling the actual page viewport. Site-wide rather than account-page
 * only, but smooth anchor scrolling is a reasonable default anywhere.
 */
html {
	scroll-behavior: smooth;
}

@media ( prefers-reduced-motion: reduce ) {
	html {
		scroll-behavior: auto;
	}
}

/* One light status card: Researcher #, tier + progress, wallet at a glance.
   Deliberately NOT a dark hero band — same white/near-white surface as
   every other card on this site, with navy used only for emphasis, so the
   page still reads as part of the same store, not a separate dark product. */
.oml-status-strip {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 28px;
	align-items: center;
	margin-bottom: 20px;
	padding: 22px 26px;
	background: #fff;
	border: 1px solid var(--oml-border);
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(15, 30, 60, 0.04);
}

.oml-status-eyebrow {
	display: block;
	margin-bottom: 3px;
	color: var(--oml-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
}

.oml-status-researcher {
	padding-right: 28px;
	border-right: 1px solid var(--oml-border);
	text-align: center;
}

.oml-status-researcher strong {
	font-family: var(--oml-mono);
	font-size: 26px;
	font-weight: 600;
	color: var(--oml-navy);
}

.oml-status-tier {
	min-width: 0;
}

.oml-status-tier-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 14px;
	margin-bottom: 9px;
}

/*
 * This row used to let the name+rate text shrink to fit beside the "N more
 * to..." label, which meant the flex box itself never wrapped — instead the
 * text INSIDE .oml-status-tier-name wrapped mid-phrase, stranding a single
 * orphan word ("discount") alone on its own line while the next-tier label
 * stayed pinned on line one. A min-width stops the name from shrinking past
 * the point it fits its own text on one line; once both pieces genuinely
 * can't share a row, flex-wrap now moves next-tier down as a whole label
 * instead of splitting a word.
 */
.oml-status-tier-name {
	min-width: 260px;
	font-size: 17px;
	font-weight: 600;
	color: var(--oml-navy);
}

.oml-status-tier-rate {
	margin-left: 8px;
	color: var(--oml-muted);
	font-size: 13px;
	font-weight: 400;
	white-space: nowrap;
}

.oml-status-tier-next {
	flex-shrink: 0;
	color: var(--oml-muted);
	font-size: 13px;
	white-space: nowrap;
}

.oml-status-track {
	height: 8px;
	overflow: hidden;
	background: var(--oml-mist);
	border-radius: 999px;
}

.oml-status-track span {
	display: block;
	height: 100%;
	background: var(--oml-blue);
	border-radius: inherit;
}

.oml-status-wallet {
	display: flex;
	gap: 22px;
	padding-left: 28px;
	border-left: 1px solid var(--oml-border);
}

.oml-status-figure {
	text-align: right;
}

.oml-status-figure strong {
	display: block;
	font-family: var(--oml-mono);
	font-size: 20px;
	font-weight: 600;
	color: var(--oml-navy);
}

.oml-status-figure .woocommerce-Price-amount {
	white-space: nowrap;
}

/* ---- share card ---- */

.oml-card {
	box-sizing: border-box;
	background: #fff;
	border: 1px solid var(--oml-border);
	border-radius: 12px;
	padding: 22px 24px;
	margin-bottom: 20px;
}

.oml-card h3 {
	margin: 0 0 6px !important;
	padding: 0 !important;
	line-height: 1.3 !important;
	color: var(--oml-navy);
}

.oml-card-lede {
	margin: 0 0 14px !important;
	padding: 0 !important;
	color: var(--oml-muted);
	font-size: 14px;
	line-height: 1.5;
}

.oml-referral-zone {
	margin-bottom: 0;
}

.oml-referral-share-body {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 24px;
	align-items: center;
}

.oml-referral-link-row {
	display: flex;
	gap: 8px;
}

.oml-referral-link-row input {
	box-sizing: border-box;
	flex: 1 1 auto;
	min-width: 0;
	padding: 11px 14px;
	font-family: var(--oml-mono);
	font-size: 13.5px;
	border: 1px solid var(--oml-border);
	border-radius: 8px;
	background: var(--oml-mist);
}

.oml-referral-code,
.oml-copy-status {
	margin: 8px 0 0;
	font-size: 13px;
}

.oml-copy-status {
	min-height: 1.4em;
	color: var(--oml-blue);
}

.oml-referral-qr-card {
	flex: 0 0 auto;
	text-align: center;
}

.oml-referral-qr {
	box-sizing: border-box;
	width: 148px;
	height: 148px;
	margin: 0 auto 10px;
	padding: 16px;
	background: #fff;
	border: 1px solid var(--oml-border);
	border-radius: 10px;
}

.oml-referral-qr canvas {
	display: block;
	max-width: 100%;
	height: auto;
}

.oml-referral-qr-card small {
	display: block;
	margin-top: 7px;
	color: var(--oml-muted);
}

.oml-referral-pending {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	color: var(--oml-muted);
	font-size: 14px;
	line-height: 1.55;
}

.oml-referral-pending svg {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	color: var(--oml-border);
}

/* ---- people you referred ---- */

.oml-referred-ledger-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

.oml-referred-ledger-head h3 {
	margin: 0;
}

.oml-referred-count {
	font-family: var(--oml-mono);
	font-size: 12.5px;
	color: var(--oml-muted);
}

.oml-referred-empty {
	margin: 0;
	padding: 10px 0;
	color: var(--oml-muted);
	font-size: 14px;
}

.oml-table-scroll {
	overflow-x: auto;
}

table.oml-referred-table {
	width: 100%;
	min-width: 480px;
	border-collapse: collapse;
	font-size: 13.5px;
}

table.oml-referred-table th {
	text-align: left;
	padding: 0 12px 10px;
	color: var(--oml-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--oml-border);
}

table.oml-referred-table td {
	padding: 13px 12px;
	border-bottom: 1px solid var(--oml-border);
	vertical-align: middle;
}

table.oml-referred-table tr:last-child td {
	border-bottom: none;
}

.oml-who {
	display: flex;
	align-items: center;
	gap: 10px;
}

.oml-avatar {
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--oml-mist);
	color: var(--oml-navy);
	border-radius: 50%;
	font-size: 12px;
	font-weight: 700;
}

.oml-who-name {
	display: block;
	font-weight: 500;
}

.oml-who-date {
	display: block;
	color: var(--oml-muted);
	font-size: 12px;
}

.oml-align-right {
	text-align: right;
}

.oml-money {
	font-family: var(--oml-mono);
	white-space: nowrap;
}

.oml-money-sub {
	display: block;
	margin-top: 2px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
	font-size: 11.5px;
	color: var(--oml-muted);
}

.oml-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px 4px 8px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 500;
}

.oml-chip::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.oml-chip--ok { background: var(--oml-ok-bg); color: var(--oml-ok); }
.oml-chip--hold { background: var(--oml-hold-bg); color: var(--oml-hold); }
.oml-chip--bad { background: var(--oml-bad-bg); color: var(--oml-bad); }
.oml-chip--neutral { background: var(--oml-mist); color: var(--oml-muted); }

/*
 * Addendum §2.2 — always present directly beneath the link/QR, never
 * removed from the markup, but compacted 21 Aug so only the one required
 * sentence is loud by default. <details>/<summary> keeps the FTC/hashtag
 * and no-health-claims text in the actual page source at all times — a
 * compliance read of the source finds every required word whether or not
 * a visitor ever clicks "Details" — while visually it reads as one quiet
 * branded line instead of a four-paragraph warning box.
 */
.oml-referral-disclosure {
	margin: 0 0 20px;
	background: #fff;
	border: 1px solid var(--oml-border);
	border-radius: 10px;
	overflow: hidden;
}

.oml-referral-disclosure summary {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	list-style: none;
	color: var(--oml-text);
	font-size: 12.5px;
	line-height: 1.5;
	cursor: pointer;
	transition: background 0.12s ease;
}

.oml-referral-disclosure summary:hover {
	background: var(--oml-mist);
}

.oml-referral-disclosure summary::-webkit-details-marker {
	display: none;
}

.oml-referral-disclosure-icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	background: var(--oml-navy);
	border-radius: 50%;
	color: #fff;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 11px;
	font-weight: 700;
	font-style: italic;
}

.oml-referral-disclosure-line {
	flex: 1 1 auto;
	min-width: 0;
}

.oml-referral-disclosure-more {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 4px;
	color: var(--oml-blue);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.oml-referral-disclosure-more::after {
	content: "\25BE";
	font-size: 10px;
	transition: transform 0.15s ease;
}

.oml-referral-disclosure[open] .oml-referral-disclosure-more::after {
	transform: rotate( 180deg );
}

.oml-referral-disclosure-body {
	padding: 0 16px 14px 44px;
	color: var(--oml-muted);
	font-size: 12px;
}

.oml-referral-disclosure-body p {
	margin: 6px 0 0;
	line-height: 1.55;
}

.oml-referral-disclosure-body p:first-child {
	margin-top: 0;
	padding-top: 10px;
	border-top: 1px solid var(--oml-border);
}

.oml-referral-disclosure-body a {
	color: var(--oml-blue);
	font-weight: 600;
}

.oml-terms-pending {
	font-style: italic;
}

/* ---- credit wallet (rendered by OML_Credit_Redemption, own hook) ----
   Markup untouched; restyled here only, to match the surrounding cards. */

.oml-credit-wallet {
	box-sizing: border-box;
	background: #fff;
	border: 1px solid var(--oml-border);
	border-radius: 12px;
	padding: 22px 24px;
	color: var(--oml-text);
}

.oml-credit-wallet-heading {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 18px;
}

.oml-credit-wallet-heading h3 {
	margin: 0;
	color: var(--oml-navy);
}

.oml-credit-wallet-eyebrow {
	margin: 0 0 4px;
	color: var(--oml-blue);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.oml-credit-wallet-summary {
	display: flex;
	gap: 22px;
	margin: 0;
	color: var(--oml-muted);
	font-size: 13px;
	text-align: right;
}

.oml-credit-wallet-summary span,
.oml-credit-wallet-summary strong {
	display: block;
}

.oml-credit-wallet-summary strong {
	font-family: var(--oml-mono);
	color: var(--oml-navy);
	font-size: 19px;
}

.oml-credit-wallet .woocommerce-Price-amount {
	white-space: nowrap;
}

.oml-credit-wallet form {
	display: flex;
	align-items: flex-end;
	gap: 10px;
	margin: 14px 0 4px;
}

.oml-credit-wallet form label {
	flex: 1 1 auto;
}

.oml-credit-wallet form input[type="number"] {
	display: block;
	box-sizing: border-box;
	width: 100%;
	margin-top: 6px;
	padding: 9px 12px;
	border: 1px solid var(--oml-border);
	border-radius: 8px;
}

.oml-credit-limit {
	margin-top: 6px;
	color: var(--oml-muted);
}

/* A negative wallet position. Visible and explained, never rendered as
   "$-40.00 available" — see OML_Credit_Redemption::render_wallet(). */
.oml-credit-owed {
	margin: 12px 0 0;
	padding: 10px 12px;
	border: 1px solid #E7C08A;
	border-left-width: 4px;
	border-radius: 8px;
	background: #FDF6EC;
	color: #6B4A12;
	font-size: 14px;
	line-height: 1.5;
}

/* Credit earned but held by a programme rule — informational, not a warning:
   the customer has done nothing wrong and the money is still theirs. */
.oml-credit-held {
	margin: 12px 0 0;
	padding: 10px 12px;
	border: 1px solid var(--oml-border);
	border-left: 4px solid var(--oml-blue);
	border-radius: 8px;
	background: var(--oml-mist);
	color: var(--oml-text);
	font-size: 14px;
	line-height: 1.5;
}

.oml-credit-wallet table {
	width: 100%;
	margin-top: 10px;
	border-collapse: collapse;
}

.oml-credit-wallet table th {
	text-align: left;
	padding: 0 10px 8px;
	color: var(--oml-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--oml-border);
}

.oml-credit-wallet table td {
	padding: 10px;
	border-bottom: 1px solid var(--oml-border);
	font-size: 13px;
}

.oml-credit-wallet table tr:last-child td {
	border-bottom: none;
}

.oml-referral-discount-note {
	display: inline-block;
	max-width: 190px;
	color: var(--oml-blue);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
}

@media ( max-width: 760px ) {
	.woocommerce-account .woocommerce-MyAccount-navigation {
		float: none;
		width: 100%;
		margin-bottom: 24px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation ul {
		display: flex;
		gap: 8px !important;
		width: max-content;
		margin: 0 !important;
		padding: 0 0 6px !important;
		border: none;
		background: none;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation li {
		flex: 0 0 auto;
		margin: 0 !important;
		border: 1px solid var(--oml-border) !important;
		border-radius: 999px !important;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation li a {
		min-width: 0;
		padding: 10px 16px !important;
		white-space: nowrap;
		border-radius: inherit !important;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
		border-radius: inherit !important;
	}

	.woocommerce-account .woocommerce-MyAccount-content {
		float: none;
		width: 100%;
	}

	.oml-status-strip {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.oml-status-researcher {
		padding-right: 0;
		border-right: none;
		text-align: left;
	}

	.oml-status-wallet {
		padding-left: 0;
		border-left: none;
		justify-content: space-between;
	}

	.oml-status-figure {
		text-align: left;
	}

	.oml-referral-share-body {
		grid-template-columns: 1fr;
	}

	.oml-referral-qr-card {
		align-self: center;
	}

	.oml-credit-wallet form {
		align-items: stretch;
		flex-direction: column;
	}

	.oml-credit-wallet-heading,
	.oml-credit-wallet-summary {
		align-items: flex-start;
		flex-direction: column;
		gap: 8px;
		text-align: left;
	}

	.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
	}
}

@media ( max-width: 430px ) {
	.oml-referral-link-row {
		flex-direction: column;
	}
}

/* ==========================================================================
   REFERRAL POPUP — shown once to a fresh referral visitor, ahead of the
   site's own Age & Research Verification popup. Own overlay, not a reuse of
   that popup's markup: it's a real Elementor Pro popup we don't own the
   source of, so styling here is fully independent and can't drift if that
   popup's own design changes.

   The theme's own base `button { border: 1px solid #cc3366 }` reset was
   bleeding through the first version of this (confirmed directly: computed
   border on our own button was rgb(204,51,102), a color never set here) —
   every property that reset could touch is pinned explicitly with
   !important below, not just re-declared, so it can never resurface.
   ========================================================================== */

.oml-ref-popup-overlay {
	position: fixed;
	inset: 0;
	z-index: 10000; /* checked directly, not guessed: Elementor's own popup modal computes to 9999 */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(7, 10, 18, 0.8);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	box-sizing: border-box;
	animation: oml-ref-popup-fade 0.25s ease both;
}

.oml-ref-popup {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 440px;
	padding: 44px 36px 32px;
	background: #fff;
	border-radius: 20px;
	box-shadow:
		0 40px 80px -16px rgba(8, 11, 18, 0.55),
		0 0 0 1px rgba(255, 255, 255, 0.06) inset;
	text-align: center;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
	animation: oml-ref-popup-rise 0.32s cubic-bezier(.2, .8, .2, 1) both;
}

@media ( prefers-reduced-motion: reduce ) {
	.oml-ref-popup-overlay,
	.oml-ref-popup {
		animation: none;
	}
}

@keyframes oml-ref-popup-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes oml-ref-popup-rise {
	from { opacity: 0; transform: translateY(14px) scale(0.97); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

/*
 * Kept top-level rather than nested inside the mobile @media block below.
 * Nesting is valid CSS, but confirmed directly it did not behave reliably
 * here: the transform stuck at its "from" value (translateY(28px)) and
 * never resolved to translateY(0), leaving the card permanently offset and
 * overflowing the viewport bottom. Moving it out fixed it outright.
 */
@keyframes oml-ref-popup-rise-mobile {
	from { opacity: 0; transform: translateY(28px); }
	to { opacity: 1; transform: translateY(0); }
}

/*
 * The theme's own global `button` reset kept bleeding through this popup one
 * property at a time — first a border color, then (found again on this
 * pass) padding, width, display and font-weight all still resolved to the
 * theme's values rather than the ones declared here, confirmed directly via
 * getComputedStyle each time rather than assumed fixed. Rather than keep
 * finding one more leaking property per round, every property a generic
 * `button` selector could plausibly set is pinned with !important below,
 * across every rule in this block.
 */
.oml-ref-popup-close {
	position: absolute !important;
	top: 14px !important;
	right: 14px !important;
	width: 30px !important;
	min-width: 30px !important;
	height: 30px !important;
	min-height: 30px !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: var(--oml-mist) !important;
	color: var(--oml-muted) !important;
	border: 0 !important;
	border-radius: 50% !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.oml-ref-popup-close:hover,
.oml-ref-popup-close:focus-visible {
	background: var(--oml-border) !important;
	color: var(--oml-navy) !important;
	outline: none;
}

/* The badge is purely decorative — a visual anchor, not a second copy of the
   required text — so the two lines below it stay exactly the words specified. */
.oml-ref-popup-badge {
	width: 60px;
	height: 60px;
	margin: 0 auto 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(145deg, var(--oml-blue), var(--oml-navy));
	border-radius: 50%;
	box-shadow: 0 10px 24px -8px rgba(47, 84, 150, 0.55);
	color: #fff;
	font-family: var(--oml-mono);
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.oml-ref-popup-eyebrow {
	display: inline-block;
	margin: 0 0 14px;
	padding: 6px 16px;
	background: var(--oml-mist);
	border-radius: 999px;
	color: var(--oml-navy);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.4;
}

.oml-ref-popup-headline {
	margin: 0 0 14px;
	color: var(--oml-navy);
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.32;
}

.oml-ref-popup-body {
	margin: 0 0 26px;
	color: var(--oml-text);
	font-size: 15.5px;
	line-height: 1.6;
}

.oml-ref-popup-actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.oml-ref-popup-btn {
	box-sizing: border-box !important;
	display: block !important;
	width: 100% !important;
	min-width: 0 !important;
	height: auto !important;
	margin: 0 !important;
	padding: 15px 20px !important;
	border: 0 !important;
	border-radius: 999px !important;
	font-family: inherit !important;
	font-size: 15.5px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	text-align: center !important;
	text-decoration: none !important;
	cursor: pointer;
	transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, color 0.15s ease;
}

.oml-ref-popup-btn:focus-visible {
	outline: 2px solid var(--oml-blue) !important;
	outline-offset: 2px;
}

.oml-ref-popup-btn--primary {
	background: linear-gradient(120deg, var(--oml-blue), var(--oml-navy)) !important;
	color: #fff !important;
	box-shadow: 0 12px 28px -10px rgba(47, 84, 150, 0.65);
}

.oml-ref-popup-btn--primary:hover {
	box-shadow: 0 16px 32px -8px rgba(31, 56, 100, 0.7);
	transform: translateY(-1px);
}

.oml-ref-popup-btn--secondary {
	background: #fff !important;
	color: var(--oml-navy) !important;
	box-shadow: inset 0 0 0 1.5px var(--oml-border);
}

.oml-ref-popup-btn--secondary:hover {
	background: var(--oml-mist) !important;
	box-shadow: inset 0 0 0 1.5px var(--oml-blue);
}

.oml-ref-popup-note {
	margin: 22px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--oml-border);
	color: var(--oml-muted);
	font-size: 12.5px;
	line-height: 1.5;
}

/* ---- tablet ---- */
@media ( min-width: 431px ) and ( max-width: 900px ) {
	.oml-ref-popup {
		max-width: 400px;
	}
}

/* ---- mobile ---- */
@media ( max-width: 430px ) {
	.oml-ref-popup-overlay {
		padding: 16px;
		align-items: flex-end;
	}

	.oml-ref-popup {
		/* On a short device (or with the on-screen keyboard eating space) this
		   content can genuinely be taller than the viewport — confirmed
		   directly: at 375x812 it overflowed the bottom edge by 12px, cutting
		   into the footer note. Cap the height and let the CARD scroll
		   internally rather than clip, so nothing is ever unreachable. */
		max-height: calc(100vh - 32px);
		overflow-y: auto;
		padding: 36px 24px 24px;
		border-radius: 20px 20px 16px 16px;
		animation-name: oml-ref-popup-rise-mobile;
	}

	.oml-ref-popup-badge {
		width: 48px;
		height: 48px;
		margin-bottom: 14px;
		font-size: 16px;
	}

	.oml-ref-popup-eyebrow {
		margin-bottom: 10px;
	}

	.oml-ref-popup-headline {
		margin-bottom: 10px;
		font-size: 20px;
	}

	.oml-ref-popup-body {
		margin-bottom: 20px;
		font-size: 14.5px;
	}

	.oml-ref-popup-note {
		margin-top: 16px;
		padding-top: 14px;
	}
}