/**
 * "Which Tesla do you have?" — the customer-facing dialog.
 *
 * Deliberately plain and theme-neutral: this runs on three shops with three themes, so
 * it borrows the page's own font and states its own colours rather than assuming any.
 * Everything is scoped under .ts-fit- so nothing here can reach the rest of the theme.
 */

/*
 * Every box the plugin prints measures the same way, whatever the theme does.
 *
 * Why any of this matters: the dialog sets overflow-y, and CSS turns the *other* axis from
 * `visible` into `auto` when one axis is not visible — so a single pixel of horizontal
 * overflow anywhere draws a scrollbar across the bottom of the whole dialog.
 *
 * This rule is not what fixes that (Flatsome already sets border-box on buttons, so it was
 * never the padding). It is here for the elements a theme's reset might miss, and because
 * three shops mean three resets none of which this plugin controls. The actual culprit was
 * a margin — see below.
 */
.ts-fit-modal,
.ts-fit-modal *,
.ts-fit-modal *::before,
.ts-fit-modal *::after {
	box-sizing: border-box;
}

/*
 * And nothing may push wider than its container.
 *
 * **The horizontal margins are the ones that matter.** Flatsome — the theme on all three
 * shops — puts `margin-right: 1em` on every button. Several buttons here are `width: 100%`
 * (the car list, the group headers, "a different Tesla"), so their *margin box* comes to
 * 100% + 1em and hangs 16px past the dialog. Neither `box-sizing` nor `max-width` counts
 * margins, which is why both of those looked like the fix and neither was.
 *
 * Left as a horizontal reset only: the theme's `margin-bottom` on buttons is part of how
 * the dialog has always been spaced, and zeroing it here would restyle a dialog nobody
 * complained about. Anything wanting its own side margin says so with a heavier selector.
 */
.ts-fit-modal button {
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
	white-space: normal;
}

.ts-fit-dialog {
	overflow-wrap: break-word;
}

.ts-fit-modal {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

.ts-fit-modal[hidden] {
	display: none;
}

body.ts-fit-open {
	overflow: hidden;
}

.ts-fit-backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 0, 0, 0, 0.55 );
}

.ts-fit-dialog {
	position: relative;
	width: 100%;
	max-width: 30rem;
	max-height: calc( 100vh - 2rem );
	overflow-y: auto;
	padding: 1.75rem;
	border-radius: 0.75rem;
	background: #fff;
	color: #1a1a1a;
	font-family: inherit;
	box-shadow: 0 1.5rem 3rem rgba( 0, 0, 0, 0.3 );
}

.ts-fit-x {
	position: absolute;
	top: 0.5rem;
	right: 0.75rem;
	padding: 0.25rem 0.5rem;
	border: 0;
	background: none;
	color: #6b6b6b;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.ts-fit-x:hover,
.ts-fit-x:focus-visible {
	color: #1a1a1a;
}

.ts-fit-title {
	margin: 0 0 0.35rem;
	font-size: 1.25rem;
	line-height: 1.3;
}

.ts-fit-lead {
	margin: 0 0 1.1rem;
	color: #555;
	font-size: 0.9rem;
	line-height: 1.45;
}

/* --- the car list -------------------------------------------------------- */

.ts-fit-level {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ts-fit-node {
	margin: 0 0 0.35rem;
	padding: 0;
	list-style: none;
}

.ts-fit-children {
	margin: 0.35rem 0 0.6rem 0.75rem;
	padding-left: 0.75rem;
	border-left: 2px solid #e3e3e3;
}

.ts-fit-children[hidden] {
	display: none;
}

.ts-fit-group,
.ts-fit-car {
	display: block;
	width: 100%;
	padding: 0.7rem 0.85rem;
	border: 1px solid #d5d5d5;
	border-radius: 0.5rem;
	background: #fff;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.ts-fit-group:hover,
.ts-fit-car:hover {
	border-color: #9a9a9a;
	background: #f6f6f6;
}

.ts-fit-group:focus-visible,
.ts-fit-car:focus-visible {
	outline: 2px solid #1a1a1a;
	outline-offset: 2px;
}

.ts-fit-group {
	font-weight: 600;
}

/*
 * Once the customer is down a branch, everything they are not looking at steps back —
 * cars as much as groups, so a top-level car recedes beside an opened group.
 *
 * The border carries most of the de-emphasis and the text barely moves: these are
 * buttons, not decoration, so #6b6b6b is as light as this may go and still clear WCAG AA
 * (5.3:1 on white). Anything prettier stops being legible on a phone in daylight. Hover
 * and keyboard focus bring a faded option straight back, so none of them reads as dead.
 *
 * Which buttons carry the class is worked out in the script — it depends on where the
 * customer is in the tree, which no selector can see.
 */
.ts-fit-dim {
	border-color: #e8e8e8;
	color: #6b6b6b;
	font-weight: 400;
}

.ts-fit-dim .ts-fit-caret {
	color: #b5b5b5;
}

.ts-fit-dim:hover,
.ts-fit-dim:focus-visible {
	border-color: #9a9a9a;
	color: #1a1a1a;
}

.ts-fit-caret {
	display: inline-block;
	width: 0.9rem;
	color: #8a8a8a;
	transition: transform 0.15s ease;
}

.ts-fit-caret::before {
	content: "\25B8";
}

.ts-fit-group[aria-expanded="true"] .ts-fit-caret {
	transform: rotate( 90deg );
}

/* A picked car. aria-pressed is the state, so the styling follows it rather than a class. */
.ts-fit-car[aria-pressed="true"] {
	border-color: #1a1a1a;
	background: #1a1a1a;
	color: #fff;
}

.ts-fit-car[aria-pressed="true"]::after {
	content: "\2713";
	float: right;
}

/* --- footer -------------------------------------------------------------- */

/*
 * What the customer has picked, and the one thing on this screen that has to be
 * unmistakable. Green, because it is the only positive state in the plugin's palette —
 * black is a button, amber is a warning — so a chip in this colour can only mean "this
 * is your answer".
 */
.ts-fit-chosen {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	flex-wrap: wrap;
	margin: 0 0 0.6rem;
	padding: 0.6rem 0.75rem;
	border: 1px solid #b8e0c8;
	border-radius: 0.5rem;
	background: #eef8f1;
}

.ts-fit-chosen[hidden] {
	display: none;
}

.ts-fit-chosen__label {
	color: #0b5c34;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.ts-fit-chosen__cars {
	display: flex;
	gap: 0.4rem;
	flex-wrap: wrap;
}

/*
 * One chip per declared car, everywhere a car is shown.
 *
 * Never two cars in one bubble — Leo, 2026-08-13. The colour exists so a customer catches
 * their answer without reading it, and `Model Y (2026), Model 3 (2021-2023)` in a single
 * bubble is one shape to the eye. Two declared cars weaken every check on the order, so
 * they are worth seeing as two things.
 *
 * States its own type and box because in the picker this is a <button>, and Flatsome gives
 * every button uppercase, letter-spacing, `min-height: 2.5em` and `padding: 0 1.2em`.
 */
.ts-fit-chip {
	display: inline-block;
	min-height: 0;
	margin: 0;
	padding: 0.25rem 0.6rem;
	border: 0;
	border-radius: 1rem;
	background: #0f7b46;
	color: #fff;
	font-family: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: normal;
	line-height: 1.35;
	text-transform: none;
	vertical-align: baseline;
}

/* In the picker the chip is how a wrong pick gets taken back off. */
.ts-fit-chip--removable {
	cursor: pointer;
}

.ts-fit-chip__x {
	margin-left: 0.35rem;
	opacity: 0.75;
	font-size: 1rem;
	line-height: 1;
}

.ts-fit-chip--removable:hover,
.ts-fit-chip--removable:focus-visible {
	background: #0b5c34;
}

.ts-fit-chip--removable:hover .ts-fit-chip__x,
.ts-fit-chip--removable:focus-visible .ts-fit-chip__x {
	opacity: 1;
}

/* Wherever chips sit in a line of text: the cart line, and the warning dialog's bar. */
.ts-fit-cars {
	display: inline-flex;
	gap: 0.3rem;
	flex-wrap: wrap;
	vertical-align: baseline;
}

/*
 * "Now choose the other Tesla" — shown only while a second car is half-chosen.
 *
 * Pressing the button below used to do three quiet things at once: hide itself, fold the
 * list shut, and start waiting. Leo, 2026-08-13: not noticeable enough. This is the line
 * that says so out loud, and it doubles as the divider between what has been answered
 * above it and what is being asked below.
 */
.ts-fit-adding {
	margin: 0.9rem 0 0.6rem;
	padding-top: 0.9rem;
	border-top: 1px solid #e3e3e3;
	color: #1a1a1a;
	font-size: 0.95rem;
	font-weight: 600;
}

.ts-fit-adding[hidden] {
	display: none;
}

/* Only route to a second car, so one is all a mis-tap can ever produce. */
.ts-fit-another {
	display: block;
	margin-top: 0;
	margin-bottom: 0.6rem;
	padding: 0.5rem 0.85rem;
	border: 1px dashed #b8b8b8;
	border-radius: 0.5rem;
	background: none;
	color: #444;
	font: inherit;
	font-size: 0.85rem;
	text-align: left;
	cursor: pointer;
}

.ts-fit-another[hidden] {
	display: none;
}

.ts-fit-another:hover,
.ts-fit-another:focus-visible {
	border-color: #1a1a1a;
	color: #1a1a1a;
}

.ts-fit-actions {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	justify-content: space-between;
	margin-top: 1rem;
}

.ts-fit-skip {
	padding: 0.6rem 0.25rem;
	border: 0;
	background: none;
	color: #6b6b6b;
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}

.ts-fit-confirm {
	padding: 0.75rem 1.35rem;
	border: 0;
	border-radius: 0.5rem;
	background: #1a1a1a;
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.ts-fit-confirm[disabled] {
	opacity: 0.4;
	cursor: not-allowed;
}

/* The answer narrows the warnings down; it was never a promise that a part fits. */
.ts-fit-note {
	margin: 1rem 0 0;
	padding-top: 0.9rem;
	border-top: 1px solid #ececec;
	color: #6b6b6b;
	font-size: 0.8rem;
	line-height: 1.5;
}

/*
 * The warning blocks: top of cart and checkout, and again right above the button that
 * commits the order.
 *
 * Styled here rather than left to wc_add_notice() so it reads as a warning on all three
 * shops' themes, which style notices differently and sometimes barely at all. Amber
 * rather than red throughout: nothing this plugin knows blocks a sale, and dressing a
 * guess as an error would teach customers to ignore it.
 */
.ts-fit-alert {
	margin: 0 0 1.25rem;
	padding: 0.9rem 1.1rem;
	border: 1px solid #e5b769;
	border-left: 4px solid #d9901f;
	border-radius: 0.4rem;
	background: #fdf6e9;
	color: #5c3a05;
	font-size: 0.92rem;
	line-height: 1.5;
}

.ts-fit-alert--compact {
	margin: 0 0 0.85rem;
	padding: 0.7rem 0.9rem;
	font-size: 0.85rem;
}

.ts-fit-alert__title {
	margin: 0 0 0.4rem;
	font-size: 1rem;
	font-weight: 600;
}

/*
 * One warning, stacked. Three short lines beat one long sentence: the product name is
 * what a customer scans for, so it stands alone, and the verdict is a badge rather than
 * a clause so it survives being skimmed.
 */
.ts-fit-warn-list {
	display: flex;
	gap: 0.75rem;
	flex-direction: column;
}

.ts-fit-warn + .ts-fit-warn {
	padding-top: 0.75rem;
	border-top: 1px solid #eddfc2;
}

.ts-fit-warn__name {
	font-weight: 600;
}

/*
 * The unambiguous handle on a product — two can read alike once the fitment is stripped
 * off the name. Quieter than the name, since it is for looking up rather than reading.
 *
 * Deliberately not `white-space: nowrap`: a long SKU would then be a single unbreakable
 * run and would push the dialog wider, which is the bug v1.14.2 spent two releases on.
 */
.ts-fit-warn__sku {
	margin-left: 0.35rem;
	color: #7a5716;
	font-size: 0.85rem;
	font-weight: 400;
}

.ts-fit-dialog--warning .ts-fit-warn__sku {
	color: #6b6b6b;
}

/*
 * The badge then the product. Inline flow rather than flex, so a long name wraps like
 * text and runs on under the badge instead of being squeezed into a narrow column beside it.
 */
.ts-fit-warn__verdict {
	margin: 0;
	line-height: 1.8;
}

/*
 * What the product does fit, one car per line.
 *
 * The label sits on the first line and the cars run under it, so the eye reads a short
 * list rather than a sentence full of commas. Read out of the product's terms, never its
 * title — the title is only ever cross-checked against them.
 */
.ts-fit-warn__fits {
	margin: 0.3rem 0 0;
	font-size: 0.88rem;
	line-height: 1.5;
}

.ts-fit-warn__fits-label {
	margin-right: 0.35rem;
	color: #7a5716;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.ts-fit-warn__note {
	margin: 0.25rem 0 0;
	color: #7a5716;
	font-size: 0.85rem;
}

/*
 * Dark, not red. Red would say the order is blocked, and it never is — but this still has
 * to survive a skim, so it is the strongest thing in the block.
 */
.ts-fit-badge-warn {
	display: inline-block;
	margin-right: 0.4rem;
	padding: 0.15rem 0.5rem;
	border-radius: 0.25rem;
	background: #5c3a05;
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	vertical-align: 0.05em;
}

.ts-fit-remove {
	margin-top: 0.5rem;
	padding: 0.35rem 0.75rem;
	border: 1px solid #b98a3a;
	border-radius: 0.35rem;
	background: none;
	color: #5c3a05;
	font: inherit;
	font-size: 0.82rem;
	font-weight: 600;
	cursor: pointer;
}

.ts-fit-remove:hover,
.ts-fit-remove:focus-visible {
	border-color: #5c3a05;
	background: #f7ead2;
}

.ts-fit-remove[disabled] {
	opacity: 0.55;
	cursor: default;
}

.ts-fit-alert__foot {
	margin: 0.6rem 0 0;
	color: #7a5716;
	font-size: 0.82rem;
}

.ts-fit-dialog--warning {
	border-top: 4px solid #d9901f;
}

.ts-fit-dialog--warning .ts-fit-warn-list {
	margin: 0.75rem 0 0;
}

/*
 * The declared car, stated once above the rows.
 *
 * It belongs to the order rather than to any one line, and repeating it under every
 * warning was what made the dialog hard to read.
 */
.ts-fit-warn-car {
	margin: 0.9rem 0 0;
	padding-bottom: 0.9rem;
	border-bottom: 1px solid #ececec;
	font-size: 0.9rem;
	line-height: 2;
}

.ts-fit-warn-car[hidden] {
	display: none;
}

/*
 * The label takes its own line so the chip and Change always share the next one.
 *
 * Measured rather than assumed: "This order is for your" plus the chip plus Change comes
 * to about 450px, and the dialog is 424px inside its padding at its widest — so all three
 * never fit on one line at any screen size. Left to wrap on their own, the chip took the
 * first line and Change was stranded alone on the second, reading as a heading rather than
 * as a link belonging to the car. Breaking it deliberately is the only version that looks
 * the same everywhere.
 */
.ts-fit-warn-car__label {
	display: block;
	color: #555;
}

/*
 * Laid out as a line of text, not as a flex row. As flex, Change was a third item that
 * dropped onto its own line the moment the chips were wide — where, uppercased by the
 * theme, it read as a heading rather than as a link belonging to the car. In normal flow
 * it follows them like the next word. The cars themselves are .ts-fit-chip, one each.
 */
.ts-fit-warn-car .ts-fit-link {
	margin-left: 0.25rem;
}

/* In the warning dialog the second-car button follows the rows rather than a pick. */
.ts-fit-dialog--warning .ts-fit-another {
	width: 100%;
	margin-top: 0.9rem;
}

/* Inside the dialog the amber sits on white, so the rules need their own colour. */
.ts-fit-dialog--warning .ts-fit-warn + .ts-fit-warn {
	border-top-color: #e8e8e8;
}

.ts-fit-dialog--warning .ts-fit-warn__note {
	color: #6b6b6b;
}

/* One button, so it sits on the right rather than at the far end of a row of two. */
.ts-fit-actions--end {
	justify-content: flex-end;
}

/* Under the offending row in the cart, because a notice at the top of the page
   does not say which line it means. Amber, not red: nothing here blocks a sale. */
.ts-fit-item-warning {
	display: inline-block;
	margin-top: 0.4rem;
	padding: 0.2rem 0.5rem;
	border-radius: 0.25rem;
	background: #fdf3e3;
	color: #7a4b06;
	font-size: 0.8rem;
	font-weight: 500;
}

/* --- the [ts_fitment_car] line ------------------------------------------- */

/* On the cart and checkout, where it is the standing way back to the question. */
.ts-fit-cart-line {
	margin: 0 0 1.25rem;
	padding: 0.75rem 1rem;
	border: 1px solid #e3e3e3;
	border-radius: 0.5rem;
	background: #fafafa;
	font-size: 0.9rem;
}

/*
 * Unanswered — pink, and meant to be seen (Leo, 2026-08-14, from his own earlier snippet).
 *
 * The box wore the quiet grey above in both states and was reliably missed on a real cart.
 * Every check this plugin makes depends on getting an answer first, so an invitation nobody
 * notices buys nothing at all. It reverts to the plain box the moment a car is declared: at
 * that point the line states a fact rather than asking for something.
 *
 * **Pink, not amber, and not red.** Amber is this plugin's colour for "we think something is
 * actually wrong with this order", and the customer has done nothing wrong by not having
 * answered yet. Pink is loud without being a verdict — the point is visibility, not alarm.
 *
 * Known overlap worth watching: a quantity warning ("you are buying more than one") can be
 * raised with nothing declared, so this pink box and an amber warning CAN appear together,
 * and the pink is the louder of the two. Live behaviour to check rather than a bug.
 */
.ts-fit-cart-line--ask {
	margin-bottom: 16px;
	padding: 12px;
	border: 2px solid #e6007e;
	border-radius: 8px;
	background: #fff1fa;
}

/* The one action in the box picks up its border, so the bubble reads as part of it. */
.ts-fit-cart-line--ask .ts-fit-pill {
	border-color: #e6007e;
	color: #a1005a;
}

.ts-fit-cart-line--ask .ts-fit-pill:hover {
	border-color: #a1005a;
	background: #ffe6f4;
}

/*
 * `Your Tesla: [chip] Change`, all on one line of text.
 *
 * Baseline, not centre. The chip is taller than the words either side of it — padding
 * plus a pill radius — so centring the boxes left the Change button visibly riding above
 * the text in front of it (Leo, 2026-08-13). Baseline alignment lines up what a customer
 * actually sees, which is the lettering, not the boxes around it.
 */
.ts-fit-badge-line {
	display: inline-flex;
	gap: 0.4rem;
	align-items: baseline;
	flex-wrap: wrap;
}

/*
 * "Some items in your cart are for different Tesla models."
 *
 * The sentence itself stays quiet and in no amber at all: nothing is wrong yet, and plenty
 * of mixed baskets are exactly what the customer meant — a gift being the obvious one. It
 * is a reason to answer the question, not a complaint about the order. Takes the whole
 * width so it sits under the question rather than trailing off the end of it.
 *
 * From v1.19.1 the *box* around it is pink while the question is unanswered — see
 * `.ts-fit-cart-line--ask`. The two are not in conflict: the box is shouting "answer this",
 * which is a request, while the wording stays careful not to accuse anyone of a mistake.
 */
.ts-fit-mixed {
	flex-basis: 100%;
	margin: 0.35rem 0 0;
	color: #555;
	font-size: 0.85rem;
	line-height: 1.5;
}

/* In the dialog it is a paragraph of its own, directly above the list. */
.ts-fit-dialog .ts-fit-mixed {
	margin: 0 0 0.75rem;
}

/*
 * Change, inside the warning dialog — a button that has to read as a word in a sentence.
 *
 * The cart and checkout line no longer uses this: from v1.19.0 its controls are
 * `.ts-fit-pill` bubbles. This is the one place left where the control belongs *in* a
 * sentence rather than beside it, which is why the two styles both exist.
 *
 * `font: inherit` handles the type, but a theme's button rules reach further than that.
 * Flatsome gives every button `min-height: 2.5em` and `vertical-align: middle`, which put
 * this one in a tall box sitting off the baseline of the words beside it — the misalignment
 * Leo reported on 2026-08-13, and the reason it dropped onto a line of its own next to a
 * wide chip. Both are stated here rather than left to whatever the shop's theme happens to
 * do, since there are three of them.
 */
.ts-fit-link {
	min-height: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-decoration: underline;
	vertical-align: baseline;
	cursor: pointer;
}

/*
 * The way into the question on the cart and checkout — a bubble, not a link.
 *
 * It became a bubble when "you can choose more than one" was dropped from the mixed-basket
 * note (Leo, 2026-08-14): the sentence was the only thing inviting an answer, so with it
 * gone the control itself has to read as pressable.
 *
 * Everything above the blank line is Flatsome, not decoration. It restyles every `button`
 * on all three shops — uppercase, `min-height: 2.5em`, `vertical-align: middle`, and a
 * `margin-right: 1em` that overflows a full-width button and drew a sideways scrollbar
 * across the warning dialog for two releases. `.ts-fit-link` neutralises the same rules by
 * having no box at all; this one has a box, so each rule has to be answered by name.
 *
 * `font: inherit` is a shorthand and resets size, weight and line-height — so it comes
 * first and the three specific values follow it. Reversed, they are silently wiped.
 */
.ts-fit-pill {
	font: inherit;
	min-height: 0;
	margin: 0;
	text-transform: none;
	letter-spacing: normal;
	vertical-align: baseline;
	text-decoration: none;
	box-shadow: none;

	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.25rem 0.7rem;
	border: 1px solid #b9bec6;
	border-radius: 999px;
	background: #fff;
	color: #1a1a1a;
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
	cursor: pointer;
}

.ts-fit-pill:hover {
	border-color: #6b7280;
	background: #f5f6f8;
}

.ts-fit-pill:focus-visible {
	outline: 2px solid #1434a4;
	outline-offset: 2px;
}

/*
 * "+ Add another Tesla" — present, but never the easiest thing on the row.
 *
 * A product passes if it fits **any** declared car, so every extra car declared makes every
 * check on the order weaker. Dashed and unbolded so it reads as the lesser of the two
 * actions beside a solid Change; the green chip stays the only filled shape on the line, so
 * a bubble can never be mistaken for a car.
 */
.ts-fit-pill--quiet {
	border-style: dashed;
	border-color: #cfd3d9;
	color: #5a5f66;
	font-weight: 400;
}

@media ( prefers-reduced-motion: reduce ) {
	.ts-fit-caret {
		transition: none;
	}
}