/*
 * The WhatsApp button.
 *
 * Not WhatsApp green. A shop whose whole look is cream, blush and plum does not
 * get one saturated green disc bolted to the corner of every page — it reads as
 * something a plugin did, not as part of the shop. The glyph is unmistakable on
 * its own, so the button wears the brand's rose and the shape does the telling.
 *
 * Colours are the brand plugin's custom properties with the literal hex behind
 * them, so the button still looks like Label Cut if the brand plugin is ever
 * switched off to test something.
 */

.labelcut-wa {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-family: "Quicksand", "Trebuchet MS", sans-serif;
	font-weight: 600;
	text-decoration: none;
	box-sizing: border-box;
}

.labelcut-wa__glyph {
	flex: 0 0 auto;
	width: 1.15em;
	height: 1.15em;
	/* The path is filled with currentColor, so the glyph follows the text
	   colour of whichever variant it finds itself inside. */
	fill: currentColor;
}

/* ------------------------------------------------------------ in the page */

/*
 * style="button" — what goes on the Contact page in place of the line that
 * currently says the number is to be confirmed.
 *
 * The selector carries BOTH classes and the element on purpose. The theme
 * colours every link inside `.lc-prose` rose and loads after this file, so a
 * single-class rule loses the tie: the label and the glyph (fill:currentColor)
 * both disappeared into the pink pill on the Contact page, while the identical
 * floating button — which sits outside `.lc-prose` — looked perfect. That
 * contrast is the fastest way to spot this class of bug on this site, and any
 * future plugin element dropped into page content needs the same treatment.
 */

/*
 * The theme's tokens, with the old brand hex as the fallback.
 *
 * Added 12 September 2026 for the Midnight Bold rebuild. These --lc-* names
 * were already being READ throughout this file, but they were never defined
 * anywhere, so every one of them silently fell back to its pastel hex - which
 * meant this component would have stayed pink on a near-black page.
 *
 * The fallback still matters: wp-admin never loads the theme's stylesheet, so
 * wherever this renders inside admin the fallback is the only value there is.
 */
.labelcut-wa,
.labelcut-wa-missing {
	--lc-rose: var(--rose, #e8848f);
	--lc-plum: var(--plum, #4a3b3b);
	--lc-blush: var(--blush, #f7c9ce);
	--lc-muted: var(--plum-muted, #8a7a7a);
	--lc-shadow-lift: var(--shadow-lift, 0 4px 18px rgba(74, 59, 59, 0.08));

	/*
	 * The text that sits ON the accent. White is right on the old rose and
	 * unreadable on Midnight's acid, so it follows --ink: undefined on the old
	 * palette, where it falls back to white; near-black on the new one.
	 */
	--lc-on-accent: var(--ink, #ffffff);
}

a.labelcut-wa.labelcut-wa--button,
a.labelcut-wa.labelcut-wa--button:visited {
	background: var(--lc-rose, #e8848f);
	color: var(--lc-on-accent);
	text-decoration: none;
	border-radius: 999px;
	padding: 0.75rem 1.5rem;
	font-size: 0.9375rem;
	line-height: 1.2;
	box-shadow: var(--lc-shadow-soft, 0 2px 10px rgba(74, 59, 59, 0.06));
	transition: box-shadow 150ms ease, transform 150ms ease;
}

a.labelcut-wa.labelcut-wa--button:hover,
a.labelcut-wa.labelcut-wa--button:focus {
	color: var(--lc-on-accent);
	text-decoration: none;
	box-shadow: var(--lc-shadow-lift, 0 4px 18px rgba(74, 59, 59, 0.08));
	transform: translateY(-1px);
}

/*
 * style="inline" — for a link inside a sentence, where a pill would break the
 * line of text. Here rose is doing its ordinary job as the link colour.
 */
.labelcut-wa--inline,
.labelcut-wa--inline:visited {
	display: inline-flex;
	color: var(--lc-rose, #e8848f);
	text-decoration: underline;
	text-underline-offset: 4px;
	gap: 0.35rem;
}

.labelcut-wa--inline:hover,
.labelcut-wa--inline:focus {
	color: var(--lc-plum, #4a3b3b);
}

/*
 * The note only shop managers see, when the number has not been set. Quiet on
 * purpose: it is a reminder, not an error, and it is sitting in the middle of a
 * published page.
 */
.labelcut-wa-missing {
	display: block;
	padding: 0.6rem 0.9rem;
	border: 1px dashed var(--lc-blush, #f7c9ce);
	border-radius: 0.75rem;
	color: var(--lc-muted, #8a7a7a);
	font-size: 0.8125rem;
	line-height: 1.5;
}

/* --------------------------------------------------------------- floating */

.labelcut-wa--float {
	/* The gap from the two edges, named once so the shifted position below can
	   be written as "the usual gap, plus the notice". */
	--labelcut-wa-gap: 1.25rem;

	position: fixed;
	right: var(--labelcut-wa-gap);
	bottom: var(--labelcut-wa-gap);
	/* Clears the home indicator on an iPhone; browsers without env() drop the
	   line and keep the plain value above. */
	bottom: calc(var(--labelcut-wa-gap) + env(safe-area-inset-bottom, 0px));

	/*
	 * High enough to clear a sticky header or an Elementor bar, one step below
	 * the cookie notice at 999999. consent.css says in as many words that the
	 * notice has to clear this button, and two stylesheets each claiming the top
	 * of the stack is exactly how a shop ends up with a pink disc sitting over
	 * the notice's Yes button. The overlap is solved properly below, by moving
	 * out of the way rather than by fighting over the layer.
	 */
	z-index: 999998;

	width: 3.25rem;
	height: 3.25rem;
	padding: 0;
	border-radius: 50%;
	background: var(--lc-rose, #e8848f);
	color: var(--lc-on-accent);
	box-shadow: 0 4px 18px rgba(74, 59, 59, 0.22);
	transition: box-shadow 150ms ease, transform 150ms ease;
}

.labelcut-wa--float:visited {
	color: var(--lc-on-accent);
}

.labelcut-wa--float .labelcut-wa__glyph {
	width: 1.6rem;
	height: 1.6rem;
}

.labelcut-wa--float:hover,
.labelcut-wa--float:focus {
	color: var(--lc-on-accent);
	box-shadow: 0 6px 22px rgba(74, 59, 59, 0.3);
	transform: translateY(-2px);
}

/*
 * While the cookie notice is open, the button sits above it rather than on it.
 * consent.js measures the real height of the notice and writes it into
 * --labelcut-consent-height on the root element, so this follows the notice
 * however the text wraps; the 13rem is only for the moment before it does, and
 * matches the fallback consent.css uses for the same reason.
 *
 * ONLY ON A NARROW SCREEN, and that qualification is the whole point.
 *
 * The notice is a fixed strip spanning the full width, but the part you can see
 * is `.labelcut-consent__inner` — a card of at most 34rem, centred. consent.js
 * measures the STRIP (`banner.offsetHeight`), so the lift is the card's full
 * height whatever the width. On a desktop the card is centred with hundreds of
 * pixels of empty strip either side, the button is 72px in from the right edge,
 * and the two never come near each other — so the lift moved the button a long
 * way up the right-hand side of the page for no reason at all, and it read as a
 * floating button that had come loose.
 *
 * They can only actually collide once the card is wide enough to reach the
 * button. The card is 34rem (544px) centred, the button occupies the last 72px:
 *
 *     (viewport + 544) / 2  >  viewport - 72   ⇒   viewport < 688px
 *
 * so 43em is the width below which the dodge is earned, and above which it is
 * the bug. If either the card's max-width or the button's size and gap change,
 * redo that line — do not just nudge the breakpoint.
 */
@media (max-width: 43em) {
	body.labelcut-consent-open .labelcut-wa--float {
		bottom: calc(var(--labelcut-wa-gap) + var(--labelcut-consent-height, 13rem));
	}
}

/* A ring that is visible against both the cream page and the rose disc. */
.labelcut-wa:focus-visible {
	outline: 2px solid var(--lc-plum, #4a3b3b);
	outline-offset: 3px;
}

/* On a small phone the disc is a little smaller and a little tighter in, so it
   covers less of a product photograph. */
@media (max-width: 30em) {
	.labelcut-wa--float {
		--labelcut-wa-gap: 0.9rem;
		width: 3rem;
		height: 3rem;
	}

	.labelcut-wa--float .labelcut-wa__glyph {
		width: 1.45rem;
		height: 1.45rem;
	}
}

/* Movement is decoration; anyone who has asked for less of it gets none. */
@media (prefers-reduced-motion: reduce) {
	.labelcut-wa,
	.labelcut-wa--float {
		transition: none;
	}

	.labelcut-wa--button:hover,
	.labelcut-wa--button:focus,
	.labelcut-wa--float:hover,
	.labelcut-wa--float:focus {
		transform: none;
	}
}

/*
 * A printed page cannot be tapped. The floating button would only put a rose
 * circle over the corner of a packing slip or an order printout.
 */
@media print {
	.labelcut-wa--float,
	.labelcut-wa-missing {
		display: none !important;
	}
}