/**
 * Nabux Marketplace — vendor picker.
 *
 * OWNERSHIP
 * This file is the only owner of the .nabux-offer* component. The theme used to
 * restate the whole design a second time in nabux-glue.css, in !important, and
 * because the theme's stylesheet loads last it won every rule — which is what
 * tore the row apart: this file laid the row out as a grid, and the theme's
 * `justify-content:space-between` then spread the grid's own tracks to the
 * edges, detaching the avatar from the vendor name and dropping the price onto
 * its own line. That duplicate is gone; nothing here needs !important any more.
 *
 * INTEROP
 * The store also serves Elementor-built pages, and may sit alongside Bootstrap
 * or Tailwind. Three rules keep this component stable under any of them:
 *   1. Every selector is class-scoped under .nabux-offers — no bare element
 *      selectors, so a framework's reset (Tailwind preflight, Bootstrap
 *      reboot) cannot reach inside and no rule here leaks out.
 *   2. Layout is grid with logical properties, so RTL needs no mirrored copy.
 *   3. Every value reads a --nabux-* custom property that falls back to the
 *      theme token and then to a literal. Elementor global colours, a Tailwind
 *      theme or a white-label skin can re-point the component by setting those
 *      properties alone — without overriding a single rule.
 *
 * @package Nabux_Marketplace
 */

.nabux-offers {
	/* The component's public contract. Override these, not the rules below. */
	--nabux-offer-radius: 14px;
	--nabux-offer-gap: 8px;
	--nabux-offer-brand: var(--brand, #f5b73c);
	--nabux-offer-text: var(--text, #faf9f8);
	--nabux-offer-muted: var(--muted, #a8a29e);
	--nabux-offer-ok: var(--ok, #8fae7c);
	--nabux-offer-surface: var(--surface-1, rgba(255, 255, 255, .04));
	--nabux-offer-surface-hover: var(--surface-3, rgba(255, 255, 255, .08));
	--nabux-offer-line: var(--line, rgba(255, 255, 255, .1));

	box-sizing: border-box;
	margin: 0 0 18px;
	padding: 0;
	border: 0;
}

.nabux-offers *,
.nabux-offers *::before,
.nabux-offers *::after {
	box-sizing: border-box;
}

.nabux-offers__title {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 10px;
	padding: 0;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--nabux-offer-muted);
}

.nabux-offers__list {
	display: flex;
	flex-direction: column;
	gap: var(--nabux-offer-gap);
}

/* ------------------------------------------------------------------
   One vendor row.

   Four fixed tracks mean the row has the same shape no matter how long
   the vendor name is or how wide the price renders: the name column is
   the only elastic one, and it is the only one allowed to truncate.
   ------------------------------------------------------------------ */
.nabux-offers .nabux-offer {
	position: relative;
	display: grid;
	grid-template-columns: auto auto minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 11px;
	width: 100%;
	margin: 0;
	padding: 11px 13px;
	border: 1px solid var(--nabux-offer-line);
	border-radius: var(--nabux-offer-radius);
	background: var(--nabux-offer-surface);
	color: var(--nabux-offer-text);
	cursor: pointer;
	font-weight: 400;
	line-height: 1.35;
	transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.nabux-offers .nabux-offer:hover {
	background: var(--nabux-offer-surface-hover);
	border-color: color-mix(in srgb, var(--nabux-offer-brand) 40%, transparent);
}

.nabux-offers .nabux-offer.is-selected {
	border-color: var(--nabux-offer-brand);
	background: color-mix(in srgb, var(--nabux-offer-brand) 10%, transparent);
}

/* The visible focus ring lives on the row, because the real radio is
   visually hidden — without this the picker is unusable by keyboard. */
.nabux-offers .nabux-offer:focus-within {
	outline: 2px solid var(--nabux-offer-brand);
	outline-offset: 2px;
}

/* Visually hidden, still focusable, still submitted with the form. */
.nabux-offers .nabux-offer__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	pointer-events: none;
}

.nabux-offers .nabux-offer__mark {
	width: 18px;
	height: 18px;
	border: 2px solid color-mix(in srgb, var(--nabux-offer-text) 32%, transparent);
	border-radius: 50%;
	display: grid;
	place-items: center;
	transition: border-color .18s ease;
}

.nabux-offers .nabux-offer__mark::after {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--nabux-offer-brand);
	transform: scale(0);
	transition: transform .18s cubic-bezier(.2, .8, .2, 1);
}

.nabux-offers .nabux-offer.is-selected .nabux-offer__mark {
	border-color: var(--nabux-offer-brand);
}

.nabux-offers .nabux-offer.is-selected .nabux-offer__mark::after {
	transform: scale(1);
}

.nabux-offers .nabux-offer__avatar {
	width: 30px;
	height: 30px;
	border-radius: 9px;
	display: grid;
	place-items: center;
	font-size: 12.5px;
	font-weight: 800;
	line-height: 1;
	color: var(--nabux-offer-brand);
	background: color-mix(in srgb, var(--nabux-offer-brand) 16%, transparent);
	border: 1px solid color-mix(in srgb, var(--nabux-offer-brand) 30%, transparent);
}

/* ---- Name + meta ------------------------------------------------- */

.nabux-offers .nabux-offer__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0; /* lets the name actually truncate inside the grid track */
}

.nabux-offers .nabux-offer__name {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--nabux-offer-text);
}

.nabux-offers .nabux-offer__vendor {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.nabux-offers .nabux-offer__rating {
	flex: none;
	font-size: 11px;
	font-weight: 700;
	color: var(--nabux-offer-brand);
	white-space: nowrap;
}

.nabux-offers .nabux-offer__meta {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11.5px;
	color: var(--nabux-offer-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.nabux-offers .nabux-offer__delivery {
	color: var(--nabux-offer-ok);
	font-weight: 600;
}

.nabux-offers .nabux-offer__sep {
	opacity: .45;
}

/* ------------------------------------------------------------------
   Bidirectional isolation.

   "15 USDT" is a number followed by a Latin currency code, so in an RTL
   paragraph the Unicode bidi algorithm reorders it and the price renders
   as "USDT 15" — and "+1.05 USDT" as "USDT 1.05+", which reads as a
   different number. These runs are inherently left-to-right whatever the
   page language is, so they are isolated from the surrounding direction
   rather than being allowed to inherit it.
   ------------------------------------------------------------------ */
.nabux-offers .nabux-offer__price,
.nabux-offers .nabux-offer__delta,
.nabux-offers .nabux-offer__rating {
	direction: ltr;
	unicode-bidi: isolate;
}

/* Neighbouring meta fragments must not reorder across each other either. */
.nabux-offers .nabux-offer__meta > * {
	unicode-bidi: isolate;
}

/* ---- Price ------------------------------------------------------- */

.nabux-offers .nabux-offer__cost {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 3px;
	text-align: end;
	white-space: nowrap;
}

/* Logical alignment: in RTL the price column sits on the left, and its
   contents must hug the row edge there too. */
.nabux-offers:dir(rtl) .nabux-offer__cost {
	align-items: flex-start;
}

.nabux-offers .nabux-offer__price {
	font-size: 15px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.02em;
	color: var(--nabux-offer-brand);
}

.nabux-offers .nabux-offer__tag {
	font-size: 9.5px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: 3px 7px;
	border-radius: 999px;
	color: var(--nabux-offer-ok);
	background: color-mix(in srgb, var(--nabux-offer-ok) 16%, transparent);
	border: 1px solid color-mix(in srgb, var(--nabux-offer-ok) 32%, transparent);
}

/* How much more than the cheapest vendor this one costs. The picker's whole
   job is comparison, and a raw column of prices makes the reader do the
   subtraction themselves. */
.nabux-offers .nabux-offer__delta {
	font-size: 10.5px;
	font-weight: 600;
	color: var(--nabux-offer-muted);
}

/* ---- Read-only variant (the [nabux_offers] shortcode) ------------- */

.nabux-offers--static .nabux-offer {
	grid-template-columns: auto minmax(0, 1fr) auto;
	cursor: default;
}

.nabux-offers--static .nabux-offer:hover {
	background: var(--nabux-offer-surface);
	border-color: var(--nabux-offer-line);
}

/* ---- Narrow columns ---------------------------------------------- */

@media (max-width: 420px) {
	.nabux-offers .nabux-offer {
		column-gap: 9px;
		padding: 10px 11px;
	}

	.nabux-offers .nabux-offer__avatar {
		display: none; /* the initial is decoration; the name is the content */
	}

	.nabux-offers .nabux-offer {
		grid-template-columns: auto minmax(0, 1fr) auto;
	}
}

/* ---- Motion preference ------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.nabux-offers .nabux-offer,
	.nabux-offers .nabux-offer__mark,
	.nabux-offers .nabux-offer__mark::after {
		transition: none;
	}
}