/**
 * GOFST Multi-Warehouse - front end
 *
 * Everything is driven by custom properties so the theme can restyle the
 * picker from one place without touching this file. Colours inherit from the
 * theme where possible; only the three stock states carry their own hue,
 * because that signal has to survive any palette.
 */

/**
 * The picker sits inside form.cart, where WooCommerce themes style `label`,
 * `input` and their descendants aggressively. WoodMart's rules such as
 * `.woocommerce div.product form.cart label` outrank a plain class selector,
 * which is why structural properties below carry !important. It is scoped to
 * .gmw-* classes only, so nothing outside this component is affected.
 */

.gmw-picker {
	--gmw-radius: 10px;
	--gmw-border: #e0e2e6;
	--gmw-border-hover: #b9bdc4;
	--gmw-ink: #14161a;
	--gmw-muted: #6b7078;
	--gmw-in: #1a7f3c;
	--gmw-low: #a15c00;
	--gmw-out: #8a8f98;

	display: block;
	margin: 0 0 1.5em;
	padding-top: 1.25em;
	border-top: 1px solid var(--gmw-border);
}

/* --- Heading ---------------------------------------------------------- */

.gmw-picker .gmw-picker__head {
	margin-bottom: 0.9em;
}

.gmw-picker .gmw-picker__label {
	display: block !important;
	margin: 0 !important;
	font-size: 1.25rem !important;
	font-weight: 700 !important;
	line-height: 1.25;
	color: var(--gmw-ink);
	text-transform: none !important;
	letter-spacing: normal !important;
}

.gmw-picker .gmw-picker__sub {
	display: block !important;
	margin: 4px 0 0 !important;
	font-size: 0.875rem !important;
	font-weight: 400 !important;
	line-height: 1.4;
	color: var(--gmw-muted);
	text-transform: none !important;
}

/* --- Options ---------------------------------------------------------- */

.gmw-picker .gmw-picker__options {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/**
 * Grid rather than flex: grid places children into fixed tracks, so a theme
 * rule setting `width: 100%` on a label's children cannot push the stock
 * column onto its own line the way it can with flex.
 */
.gmw-picker .gmw-option {
	display: grid !important;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 14px;
	width: 100% !important;
	min-height: 64px;
	margin: 0 !important;
	padding: 14px 18px !important;
	float: none !important;
	border: 1px solid var(--gmw-border);
	border-radius: var(--gmw-radius);
	background: #fff;
	cursor: pointer;
	line-height: 1.4;
	transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.gmw-picker .gmw-option:hover:not(.is-disabled) {
	border-color: var(--gmw-border-hover);
}

.gmw-picker .gmw-option.is-selected {
	border-color: var(--gmw-ink);
	box-shadow: inset 0 0 0 1px var(--gmw-ink);
}

.gmw-picker .gmw-option.is-disabled {
	cursor: not-allowed;
	background: #fafbfc;
}

.gmw-picker .gmw-option.is-disabled .gmw-option__name {
	color: var(--gmw-muted);
}

/* Radio */
.gmw-picker .gmw-option__input {
	width: 18px !important;
	height: 18px !important;
	margin: 0 !important;
	padding: 0 !important;
	flex: none;
	accent-color: var(--gmw-ink);
	cursor: inherit;
}

.gmw-picker .gmw-option__input:focus-visible {
	outline: 2px solid var(--gmw-ink);
	outline-offset: 3px;
}

/* Name + address */
.gmw-picker .gmw-option__body {
	display: block !important;
	align-self: center;
	min-width: 0;
}

.gmw-picker .gmw-option__name {
	display: block !important;
	font-size: 1rem !important;
	font-weight: 600 !important;
	color: var(--gmw-ink);
	overflow-wrap: anywhere;
}

.gmw-picker .gmw-option__meta {
	display: block !important;
	margin-top: 3px !important;
	font-size: 0.875rem !important;
	font-weight: 400 !important;
	color: var(--gmw-muted);
	overflow-wrap: anywhere;
}

/* Stock state - right column, vertically centred by the grid */
.gmw-picker .gmw-option__status {
	display: block !important;
	align-self: center;
	margin: 0 !important;
	padding-left: 16px !important;
	font-size: 1rem !important;
	font-weight: 600 !important;
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.gmw-picker .gmw-option__status[data-tier="exact"],
.gmw-picker .gmw-option__status[data-tier="over"] {
	color: var(--gmw-in);
}

.gmw-picker .gmw-option__status[data-tier="low"] {
	color: var(--gmw-low);
}

.gmw-picker .gmw-option__status[data-tier="out"] {
	color: var(--gmw-out);
	font-weight: 500 !important;
}

.gmw-picker .gmw-picker__none {
	margin: 0.75em 0 0;
	font-size: 0.9375rem;
	color: var(--gmw-muted);
}

/* Narrow: let the stock state drop under the name rather than crush it */
@media (max-width: 420px) {
	.gmw-picker .gmw-option {
		grid-template-columns: auto minmax(0, 1fr);
		row-gap: 6px;
	}
	.gmw-picker .gmw-option__status {
		grid-column: 2;
		padding-left: 0 !important;
		text-align: left;
	}
}

/* --- Loop: combined stock state ---------------------------------------- */

.gmw-loop-stock {
	display: flex;
	align-items: center;
	gap: 6px;
	justify-content: center;
	text-align: center;
	margin: 0.5em 0 0.6em;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.gmw-loop-stock--in {
	color: #1f7a3d;
}

.gmw-loop-stock--out {
	color: #8a8f98;
}

.gmw-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	flex: 0 0 auto;
	background: currentColor;
}

.gmw-loop-stock--out .gmw-dot {
	background: transparent;
	box-shadow: inset 0 0 0 1px currentColor;
}

/* --- Conflict modal --------------------------------------------------- */

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

.gmw-modal {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.gmw-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(16, 18, 22, 0.55);
	animation: gmw-fade 0.15s ease-out;
}

.gmw-modal__panel {
	position: relative;
	background: #fff;
	color: #1a1d23;
	max-width: 440px;
	width: 100%;
	padding: 28px;
	border-radius: 12px;
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
	animation: gmw-rise 0.18s cubic-bezier(0.2, 0.8, 0.3, 1);
	text-align: left;
}

.gmw-modal__title {
	margin: 0 0 0.5em;
	font-size: 1.25rem;
	line-height: 1.3;
}

.gmw-modal__detail {
	margin: 0 0 1.5em;
	font-size: 0.9375rem;
	line-height: 1.55;
	opacity: 0.8;
}

.gmw-modal__detail:empty {
	display: none;
}

.gmw-modal__actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.gmw-modal__actions .button {
	margin: 0;
}

@keyframes gmw-fade {
	from { opacity: 0; }
}

@keyframes gmw-rise {
	from { opacity: 0; transform: translateY(8px); }
}

@media (prefers-reduced-motion: reduce) {
	.gmw-modal__backdrop,
	.gmw-modal__panel {
		animation: none;
	}
	.gmw-option {
		transition: none;
	}
}

@media (max-width: 480px) {
	.gmw-picker__options {
		grid-template-columns: 1fr;
	}
	.gmw-modal__actions .button {
		flex: 1 1 auto;
		text-align: center;
	}
}