/*
 * Branch switcher.
 *
 * Written with logical properties throughout -- inset-inline, margin-inline,
 * text-align: start -- so it is correct in the Arabic RTL default and in the
 * English LTR templates from the same rules, with no [dir] overrides. The only
 * directional artwork is the caret, which is rotated rather than mirrored.
 *
 * Colours come from the active theme's global styles where they exist, so the
 * bar inherits each tenant's palette instead of imposing one.
 *
 * Cache note: each asset is versioned by its own modification time, and the CDN
 * in front of this plugin serves them with max-age=31536000. Editing this file
 * changes only this file's URL -- the script keeps the version it had, which is
 * correct, because an unchanged file should stay cached. It used to share one
 * version string with the script, which meant a JavaScript fix could sit on the
 * server for days without a single browser ever asking for it.
 */

.shb-bp {
	--shb-bp-bg: var(--wp--preset--color--base, #fff);
	--shb-bp-fg: var(--wp--preset--color--contrast, #1f2328);
	--shb-bp-muted: color-mix(in srgb, var(--shb-bp-fg) 62%, transparent);
	--shb-bp-accent: var(--wp--preset--color--ti-accent, #6366f1);
	--shb-bp-line: color-mix(in srgb, var(--shb-bp-fg) 14%, transparent);

	font-family: inherit;
	font-size: 14px;
	color: var(--shb-bp-fg);
}

.shb-bp--bar {
	position: sticky;
	top: 0;
	/* One below the storefront filter button, so the two never overlap. */
	z-index: 998;
	background: var(--shb-bp-bg);
	border-block-end: 1px solid var(--shb-bp-line);
}

.shb-bp__root {
	position: relative;
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
	padding-inline: 16px;
}

.shb-bp__toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-block: 10px;
	cursor: pointer;
	list-style: none;
	user-select: none;
}

/* Safari still paints the default disclosure triangle without this. */
.shb-bp__toggle::-webkit-details-marker {
	display: none;
}

.shb-bp__pin {
	inline-size: 18px;
	block-size: 18px;
	flex: none;
	fill: none;
	stroke: var(--shb-bp-accent);
	stroke-width: 1.8;
}

.shb-bp__label {
	display: flex;
	align-items: baseline;
	gap: 6px;
	min-inline-size: 0;
}

.shb-bp__lead {
	color: var(--shb-bp-muted);
}

.shb-bp__current {
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.shb-bp__change {
	margin-inline-start: auto;
	color: var(--shb-bp-accent);
	font-weight: 600;
}

.shb-bp__caret {
	inline-size: 16px;
	block-size: 16px;
	flex: none;
	fill: none;
	stroke: var(--shb-bp-accent);
	stroke-width: 2;
	stroke-linecap: round;
	transition: transform 0.15s ease;
}

.shb-bp__root[open] .shb-bp__caret {
	transform: rotate(180deg);
}

.shb-bp__panel {
	position: absolute;
	inset-inline-start: 16px;
	inset-block-start: 100%;
	min-inline-size: 300px;
	max-inline-size: calc(100vw - 32px);
	max-block-size: 70vh;
	overflow-y: auto;
	padding: 6px;
	background: var(--shb-bp-bg);
	border: 1px solid var(--shb-bp-line);
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
	z-index: 1;
}

.shb-bp__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.shb-bp__row + .shb-bp__row {
	border-block-start: 1px solid var(--shb-bp-line);
}

.shb-bp__item {
	display: flex;
	align-items: center;
	gap: 10px;
	inline-size: 100%;
	padding: 10px;
	border: 0;
	border-radius: 8px;
	background: none;
	color: inherit;
	font: inherit;
	text-align: start;
	cursor: pointer;
}

.shb-bp__item:hover,
.shb-bp__item:focus-visible {
	background: color-mix(in srgb, var(--shb-bp-accent) 8%, transparent);
}

.shb-bp__item.is-active {
	background: color-mix(in srgb, var(--shb-bp-accent) 12%, transparent);
}

.shb-bp__logo {
	inline-size: 36px;
	block-size: 36px;
	flex: none;
	border-radius: 50%;
	object-fit: cover;
	background: color-mix(in srgb, var(--shb-bp-fg) 8%, transparent);
}

.shb-bp__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-inline-size: 0;
}

.shb-bp__name {
	font-weight: 600;
}

.shb-bp__address {
	color: var(--shb-bp-muted);
	font-size: 12px;
	line-height: 1.4;
}

.shb-bp__tick {
	inline-size: 18px;
	block-size: 18px;
	flex: none;
	margin-inline-start: auto;
	fill: none;
	stroke: var(--shb-bp-accent);
	stroke-width: 2.4;
	stroke-linecap: round;
}

.shb-bp__confirm {
	padding: 12px 10px 10px;
	border-block-start: 1px solid var(--shb-bp-line);
}

.shb-bp__warning {
	margin: 0 0 10px;
	color: var(--shb-bp-muted);
	font-size: 13px;
	line-height: 1.5;
}

.shb-bp__actions {
	display: flex;
	gap: 8px;
}

.shb-bp__cancel,
.shb-bp__proceed {
	flex: 1;
	padding: 9px 12px;
	border: 1px solid var(--shb-bp-line);
	border-radius: 8px;
	background: none;
	color: inherit;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.shb-bp__proceed {
	border-color: transparent;
	background: var(--shb-bp-accent);
	color: #fff;
}

/*
 * The script moves focus to Cancel as soon as the confirmation opens, so this
 * is where a keyboard user arrives -- and until now they arrived at something
 * with no visible focus at all. Outlined rather than tinted, because Proceed is
 * already filled with the accent colour and a background change would not read
 * as focus on it.
 */
.shb-bp__cancel:focus-visible,
.shb-bp__proceed:focus-visible {
	outline: 2px solid var(--shb-bp-accent);
	outline-offset: 2px;
}

.shb-bp__cancel:hover {
	background: color-mix(in srgb, var(--shb-bp-accent) 8%, transparent);
}

.shb-bp__toast {
	position: fixed;
	inset-inline: 16px;
	inset-block-end: 16px;
	z-index: 1000;
	margin-inline: auto;
	max-inline-size: 420px;
	padding: 12px 16px;
	border-radius: 10px;
	background: var(--shb-bp-fg);
	color: var(--shb-bp-bg);
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
	font-size: 13px;
	text-align: center;
}

/* On phones the dropdown becomes a bottom sheet: a 300px panel anchored to the
   top of a small viewport ends up mostly off-screen. */
@media (max-width: 600px) {
	.shb-bp--bar .shb-bp__panel {
		position: fixed;
		inset-inline: 0;
		inset-block: auto 0;
		max-inline-size: none;
		border-radius: 16px 16px 0 0;
		box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.22);
	}

	.shb-bp__change {
		font-size: 13px;
	}
}

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