/* ============================================================
   ROSEN — "What MUA are you using?"

   Written against the Rosen theme's own tokens (--ink, --body, --muted,
   --line, --wash, --green-ink, --radius, --shadow-lg, --ease-out, declared at
   the top of concept.css), each with a fallback of the value that token
   currently holds. So it inherits a palette change on the theme, and it still
   looks deliberate on Storefront or on wp-admin, where those tokens do not
   exist. A plugin that only looks right on one theme is a plugin that will look
   broken on the day the theme is replaced — which, for this store, is the plan.
   ============================================================ */

.rosen-mua {
	margin: 0 0 18px;
	font-size: 15px;
	line-height: 1.45;
}

.rosen-mua__label {
	display: block;
	margin: 0 0 6px;
	font-weight: 600;
	color: var(--ink, #111517);
}

/* The asterisk is red, has a title, and is an <abbr> — so it is announced as
   "required" rather than read out as "star", and it is not the only signal:
   the input carries `required`, and the server refuses the order. Three
   independent statements of the same fact, which is the right number for a
   field that can block a sale. */
.rosen-mua__label .required {
	border: 0;
	color: #b3261e;
	text-decoration: none;
	font-weight: 700;
}

.rosen-mua__box {
	position: relative;
	display: block;
}

.rosen-mua__input {
	width: 100%;
	box-sizing: border-box;
	padding: 11px 14px;
	font: inherit;
	color: var(--ink, #111517);
	background: #fff;
	border: 1px solid var(--line, #e4e8ea);
	border-radius: 12px;
	transition: border-color .15s var(--ease-out, ease), box-shadow .15s var(--ease-out, ease);
}

.rosen-mua__input::placeholder {
	color: var(--muted, #667079);
}

.rosen-mua__input:focus {
	outline: none;
	border-color: var(--green-ink, #4a7324);
	box-shadow: 0 0 0 3px rgba(74, 115, 36, .18);
}

/* A visible focus ring for keyboard users even where the box-shadow above is
   suppressed — forced-colours mode throws shadows away. */
.rosen-mua__input:focus-visible {
	outline: 2px solid var(--green-ink, #4a7324);
	outline-offset: 2px;
}

/* :user-invalid, not :invalid. `:invalid` matches an empty required field the
   moment the page loads, so the field would be outlined in red before the
   customer had done anything at all. :user-invalid waits until they have tried.
   Browsers without it lose the tint and keep the server-side gate. */
.rosen-mua__input:user-invalid {
	border-color: #b3261e;
}

.rosen-mua__hint {
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--muted, #667079);
}

/* The live region. Present in the accessibility tree, absent from the page —
   `display:none` would stop it being announced at all. */
.rosen-mua__live {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.rosen-mua__list {
	position: absolute;
	z-index: 40;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	max-height: 288px;
	overflow-y: auto;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: #fff;
	border: 1px solid var(--line, #e4e8ea);
	border-radius: var(--radius, 16px);
	box-shadow: var(--shadow-lg, 0 2px 4px rgba(17, 21, 23, .05), 0 24px 60px rgba(17, 21, 23, .10));
}

.rosen-mua__list[hidden] {
	display: none;
}

/* ── the brand header ────────────────────────────────────────────────────
   P2a: the brand is a CAPTION and never a choice, so it is styled as one —
   no hover, no pointer, no highlight, `role="presentation"` in the markup.
   If it ever looks clickable somebody will click it, and the whole reason
   this control was rebuilt is that "Straumann" is not an answer. */
.rosen-mua__group {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 8px;
	margin: 8px 0 2px;
	padding: 4px 12px 0;
	cursor: default;
}

.rosen-mua__group:first-child {
	margin-top: 0;
}

.rosen-mua__group-brand {
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--ink, #111517);
}

/* P2b — the manufacturer's OWN word for the part. Only Nobel Biocare prints
   "Multi-unit Abutment"; Straumann prints "Screw-retained Abutment". Set in
   the manufacturer's own words and marked as a quotation rather than as our
   label for it. */
.rosen-mua__group-term {
	font-size: 12px;
	font-style: italic;
	color: var(--muted, #667079);
}

.rosen-mua__opt {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 8px;
	padding: 9px 12px;
	border-radius: 10px;
	color: var(--body, #4f5a62);
	cursor: pointer;
}

.rosen-mua__opt.is-active {
	background: var(--wash, #f5f7f8);
	color: var(--ink, #111517);
}

.rosen-mua__opt-name {
	flex: 1 1 auto;
	min-width: 0;
}

/* The manufacturer's short code — NC, RB, GM, CC RP. Shown because it is what
   is printed on the box and on the lab slip, and set apart because it is not
   unique: seven short forms collide across unrelated manufacturers, which is
   why the stored value is always brand AND platform. */
.rosen-mua__opt-short {
	flex: 0 0 auto;
	padding: 1px 7px;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	color: var(--muted, #667079);
	background: var(--wash, #f5f7f8);
	border: 1px solid var(--line, #e4e8ea);
	border-radius: 999px;
}

/* A row the research flagged: a system name published without a platform, or
   a platform sourced only to a filter facet. It stays selectable — a clinician
   holding that system still has to be able to answer — and it says so. */
.rosen-mua__opt-weak {
	flex: 0 0 auto;
	font-size: 11px;
	color: #8a6d1f;
}

/* The overflow line. Not an option, not selectable, and it never hides the
   free-text row — that is drawn outside the cap. */
.rosen-mua__more {
	padding: 8px 12px 4px;
	font-size: 12px;
	color: var(--muted, #667079);
	cursor: default;
}

/* ── the P2a refusal, under the box ──────────────────────────────────────
   Shown the moment a customer types a bare manufacturer name, before they
   press anything. Amber and not red: they have not made a mistake, they have
   given half an answer, and the other half is in the list right above. */
.rosen-mua__warn {
	margin: 6px 0 0;
	padding: 8px 11px;
	font-size: 13px;
	color: #7a5b00;
	background: #fff8e6;
	border: 1px solid #f0d089;
	border-radius: 10px;
}

.rosen-mua__warn:empty,
.rosen-mua__warn[hidden] {
	display: none;
}

/* The same message on a stranded cart line, where it explains why a line that
   HAS an answer is still asking. */
.rosen-mua__why {
	margin: 0 0 8px;
	font-size: 13px;
	color: #7a5b00;
}

/* Highlight the matched fragment by BACKGROUND and never by weight — a bolded
   fragment changes the row's width and the whole list jitters as you type.
   The same rule the concept's search follows. */
.rosen-mua__opt mark {
	background: rgba(140, 192, 84, .32);
	color: inherit;
	border-radius: 3px;
	padding: 0 1px;
}

/* The free-text row. Set apart by a rule above it, because taking it means
   something different from taking a company: it is the customer telling us
   about a system we do not have on file. */
.rosen-mua__opt--free {
	margin-top: 4px;
	padding-top: 11px;
	border-top: 1px solid var(--line, #e4e8ea);
	border-radius: 0 0 10px 10px;
	color: var(--muted, #667079);
	font-size: 14px;
}

/* ── the repair form on a cart line ──────────────────────────────────────
   Shown only on a cart line stored before this plugin existed. Tinted, so it
   reads as something to deal with rather than as part of the line. */
.rosen-mua--repair {
	margin: 10px 0 0;
	padding: 10px 12px;
	background: #fff8e6;
	border: 1px solid #f0d089;
	border-radius: 12px;
	font-size: 14px;
}

.rosen-mua--repair .rosen-mua__box {
	display: flex;
	gap: 8px;
	align-items: center;
}

.rosen-mua--repair .rosen-mua__input {
	flex: 1 1 auto;
	padding: 8px 10px;
	border-radius: 10px;
}

@media (prefers-reduced-motion: reduce) {
	.rosen-mua__input {
		transition: none;
	}
}