/* Styling for the Omniva terminal picker on the Block Cart/Checkout.
 *
 * Designed to fit the Block Checkout's clean card aesthetic — not wp-admin.
 * Native form-control sizing + a 4-line layout per terminal item (name +
 * address) make a long list quick to scan. The dropdown opens below the
 * trigger and overlays subsequent form fields. */

.swa-omniva-block {
	margin-top: 1rem;
	/* Constrain the chain so a long selected-terminal name like
	 * "Aglona — Aglonas TOP pakomāts — Somersētas iela 33" doesn't
	 * push the picker off-screen on narrow mobile viewports. WC Blocks
	 * mounts the picker inside a flex container that lets children
	 * grow to their content unless the children explicitly opt out of
	 * that with `min-width: 0`. Setting it on every level of our own
	 * subtree gives the trigger's `text-overflow: ellipsis` a chance
	 * to actually do its job — without the chain, the trigger button
	 * grows to fit the un-truncated text, ignoring its own
	 * `width: 100%`. */
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
}

.swa-omniva-block__label {
	display: block;
	margin-bottom: 0.375rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: inherit;
}

.swa-omniva-block__field {
	position: relative;
	min-width: 0;
	max-width: 100%;
}

.swa-omniva-block__hint {
	padding: 0.625rem 0;
	color: #6b7280;
	font-size: 0.875rem;
}
.swa-omniva-block__hint--empty {
	color: #b45309;
}

/* ----- trigger button (looks like a regular form input) -----
 *
 * Uses CSS Grid (not flex) for the internal layout because grid's
 * `minmax(0, 1fr)` column sizing is the canonical pattern for
 * "this column gets the remaining space AND can shrink to zero" —
 * exactly what's needed for a single-line truncating text alongside
 * a fixed-size caret. The flex equivalent (`flex: 1 1 0; min-width: 0`)
 * is documented as the same thing but in practice keeps producing
 * shrinking issues depending on parent layout context (WC Blocks
 * mounts our picker inside its own flex container, where the
 * `min-width: auto` default propagates up the chain and prevents
 * the trigger from being constrained). Grid sidesteps this entirely. */
.swa-omniva-block__trigger {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) auto;
	align-items: center;
	column-gap: 0.5rem;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding: 0.6875rem 0.875rem;
	background: #fff;
	border: 1px solid #d1d5db;
	border-radius: 0.375rem;
	text-align: left;
	cursor: pointer;
	font-size: 0.9375rem;
	color: inherit;
	line-height: 1.4;
	font-family: inherit;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.swa-omniva-block__trigger:hover {
	border-color: #9ca3af;
}
.swa-omniva-block__trigger:focus,
.swa-omniva-block__field.is-open .swa-omniva-block__trigger {
	outline: none;
	border-color: #2563eb;
	box-shadow: 0 0 0 2px rgba( 37, 99, 235, 0.18 );
}
.swa-omniva-block__trigger-text {
	/* Grid item in the `minmax(0, 1fr)` column → can shrink to 0.
	 * `min-width: 0` is also explicit here for older browsers that
	 * compute grid item minimums via the legacy min-content rules. */
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.swa-omniva-block__trigger-text.is-placeholder {
	color: #9ca3af;
}
.swa-omniva-block__caret {
	color: #6b7280;
	transition: transform 0.15s;
}
.swa-omniva-block__field.is-open .swa-omniva-block__caret {
	transform: rotate( 180deg );
}

/* ----- dropdown panel ----- */
.swa-omniva-block__panel {
	position: absolute;
	top: calc( 100% + 4px );
	left: 0;
	right: 0;
	background: #fff;
	border: 1px solid #d1d5db;
	border-radius: 0.375rem;
	box-shadow: 0 8px 24px rgba( 17, 24, 39, 0.12 );
	z-index: 100;
	max-height: 22rem;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.swa-omniva-block .swa-omniva-block__search,
.swa-omniva-block__search {
	display: block;
	width: 100%;
	box-sizing: border-box;
	/* Match the trigger button's visual height: same padding + explicit
	 * line-height (browser default for <input> is `normal` which collapses
	 * the field to ~32px regardless of font-size, so the row looked thin). */
	padding: 0.6875rem 0.875rem;
	line-height: 1.4;
	border: 0;
	border-bottom: 1px solid #e5e7eb;
	font-size: 0.9375rem;
	font-family: inherit;
	color: inherit;
	background: #f9fafb;
}
.swa-omniva-block__search::placeholder {
	color: #9ca3af;
}
.swa-omniva-block .swa-omniva-block__search:focus,
.swa-omniva-block__search:focus {
	outline: none;
	background: #fff;
	border-bottom-color: #2563eb;
}

/* Belt-and-braces: WC Blocks styling for <input> in the checkout block uses
 * `.wc-block-checkout input { ... }` with higher specificity than a single
 * class selector. This wins via element-class chain + explicit min-height. */
.wc-block-checkout .swa-omniva-block__search,
.wp-block-woocommerce-checkout .swa-omniva-block__search {
	min-height: 2.625rem;
	line-height: 1.4;
	padding: 0.6875rem 0.875rem;
	background: #f9fafb;
}
.wc-block-checkout .swa-omniva-block__search:focus,
.wp-block-woocommerce-checkout .swa-omniva-block__search:focus {
	background: #fff;
}

.swa-omniva-block__list {
	list-style: none;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	flex: 1 1 auto;
}

.swa-omniva-block__group {
	margin: 0;
	padding: 0;
}
.swa-omniva-block__group-items {
	list-style: none;
	margin: 0;
	padding: 0;
}
.swa-omniva-block__city {
	padding: 0.4375rem 0.875rem 0.25rem;
	font-size: 0.6875rem;
	font-weight: 700;
	color: #6b7280;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	background: #f9fafb;
	border-top: 1px solid #f3f4f6;
	border-bottom: 1px solid #f3f4f6;
	position: sticky;
	top: 0;
	z-index: 1;
}
.swa-omniva-block__list > li:first-child .swa-omniva-block__city {
	border-top: 0;
}

.swa-omniva-block__item {
	padding: 0.5rem 0.875rem;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	border-bottom: 1px solid #f3f4f6;
	transition: background-color 0.1s;
}
.swa-omniva-block__item:last-child {
	border-bottom: 0;
}
.swa-omniva-block__item:hover {
	background: #f3f4f6;
}
.swa-omniva-block__item:focus {
	outline: none;
	background: #eef2ff;
}
.swa-omniva-block__item.is-selected {
	background: rgba( 37, 99, 235, 0.08 );
	color: #1e3a8a;
}
.swa-omniva-block__item-name {
	font-size: 0.9375rem;
	font-weight: 500;
	color: inherit;
}
.swa-omniva-block__item-addr {
	font-size: 0.8125rem;
	color: #6b7280;
}
.swa-omniva-block__item.is-selected .swa-omniva-block__item-addr {
	color: #3b82f6;
}

.swa-omniva-block__empty {
	padding: 1rem;
	text-align: center;
	color: #6b7280;
	font-size: 0.875rem;
}