/**
 * Vanguard — Branch Collection styles
 *
 * ══════════════════════════════════════════════════════════════════════════
 * SCOPING CONTRACT
 * ══════════════════════════════════════════════════════════════════════════
 * • Every rule begins with .vgp- , with ONE documented exception at the very
 *   bottom of this file: the block that visually hides WooCommerce's raw radio
 *   list. Those selectors are gated behind .vgp-native-hidden, a class that
 *   pickup.js only ever adds to the pickup-options block, and only after our
 *   tiles have rendered. Nothing else on the page can match them.
 * • No element selectors. No :root. No global resets. No !important.
 * • Custom properties are declared on .vgp-shell, not :root, so they cannot
 *   cascade out into another Elementor widget.
 * • Fonts inherit from the theme, so the card reads as native Hub theme.
 * • Loaded only on cart / checkout / order-received / view-order.
 *
 * THEMING
 * Two palettes, switched by the data-vgp-theme attribute that pickup.js sets
 * after measuring the real background colour behind the card. Dark is the
 * default because Hub theme's checkout is dark.
 */

/* ══════════════════════════════════════════════════════════════════════
   shell + palette
   ══════════════════════════════════════════════════════════════════════ */
.vgp-shell {
	/* dark palette (default) */
	--vgp-fg: #ffffff;
	--vgp-fg-soft: rgba(255, 255, 255, 0.72);
	--vgp-fg-mute: rgba(255, 255, 255, 0.5);
	--vgp-surface: rgba(255, 255, 255, 0.04);
	--vgp-surface-2: rgba(255, 255, 255, 0.07);
	--vgp-line: rgba(255, 255, 255, 0.14);
	--vgp-line-strong: rgba(255, 255, 255, 0.28);

	/* Brand accent #65B1E1. It's a light blue, so filled surfaces take DARK
	   text (--vgp-accent-fg): white on #65B1E1 is only 2.4:1 and unreadable.
	   Dark navy on it is ~6.9:1, which passes WCAG AA. */
	--vgp-accent: #65b1e1;
	--vgp-accent-hi: #8ac8ec;
	--vgp-accent-fg: #06263c;
	--vgp-accent-text: #8ac8ec;   /* accent as TEXT on a dark surface */
	--vgp-accent-wash: rgba(101, 177, 225, 0.14);
	--vgp-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
	--vgp-radius: 14px;
	--vgp-radius-sm: 10px;

	display: block;
	box-sizing: border-box;
	margin: 18px 0 4px;
	font-family: inherit;
	color: var(--vgp-fg);
	text-align: left;
}

.vgp-shell[data-vgp-theme="light"] {
	--vgp-fg: #111111;
	--vgp-fg-soft: #3f4754;
	--vgp-fg-mute: #6b7280;
	--vgp-surface: #ffffff;
	--vgp-surface-2: #f7f8fa;
	--vgp-line: #e4e7ec;
	--vgp-line-strong: #c9cfd8;
	--vgp-accent-text: #1264af;   /* the light blue fails contrast on white */
	--vgp-accent-wash: rgba(101, 177, 225, 0.14);
	--vgp-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}

.vgp-shell * {
	box-sizing: border-box;
}

.vgp-shell--panel {
	margin: 32px 0;
	padding: 20px;
	border: 1px solid var(--vgp-line);
	border-radius: var(--vgp-radius);
	background: var(--vgp-surface);
}

.vgp-shell__title {
	margin: 0 0 12px;
	padding: 0;
	font-family: inherit;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--vgp-fg);
}

/* ══════════════════════════════════════════════════════════════════════
   branch tiles
   ══════════════════════════════════════════════════════════════════════ */
.vgp-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 12px;
	margin: 0 0 14px;
}

.vgp-tile {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	width: 100%;
	margin: 0;
	padding: 16px 16px 16px 15px;
	border: 1px solid var(--vgp-line);
	border-radius: var(--vgp-radius-sm);
	background: var(--vgp-surface);
	box-shadow: var(--vgp-shadow);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--vgp-fg);
	text-align: left;
	cursor: pointer;
	appearance: none;
	transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.12s ease;
}

.vgp-tile:hover {
	border-color: var(--vgp-line-strong);
	background: var(--vgp-surface-2);
}

.vgp-tile:active {
	transform: translateY(1px);
}

.vgp-tile:focus-visible {
	outline: 2px solid var(--vgp-accent-hi);
	outline-offset: 2px;
}

.vgp-tile.is-selected {
	border-color: var(--vgp-accent-text);
	background: var(--vgp-accent-wash);
}

/* radio-style indicator */
.vgp-tile__mark {
	position: relative;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	border: 2px solid var(--vgp-line-strong);
	border-radius: 50%;
	background: transparent;
	transition: border-color 0.15s ease;
}

.vgp-tile.is-selected .vgp-tile__mark {
	border-color: var(--vgp-accent-text);
}

.vgp-tile.is-selected .vgp-tile__mark::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--vgp-accent-hi);
}

.vgp-tile__main {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
}

.vgp-tile__name {
	display: block;
	margin: 0 0 4px;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--vgp-fg);
}

.vgp-tile__addr {
	display: block;
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--vgp-fg-soft);
}

.vgp-tile__meta {
	display: block;
	margin-top: 6px;
	font-size: 0.75rem;
	line-height: 1.4;
	color: var(--vgp-fg-mute);
}

.vgp-tile__state {
	flex: 0 0 auto;
	align-self: center;
	padding: 4px 10px;
	border: 1px solid var(--vgp-line);
	border-radius: 999px;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--vgp-fg-mute);
}

.vgp-tile.is-selected .vgp-tile__state {
	border-color: transparent;
	background: var(--vgp-accent);
	color: var(--vgp-accent-fg);
}

/* ══════════════════════════════════════════════════════════════════════
   selected-branch detail: map + address + actions
   ══════════════════════════════════════════════════════════════════════ */
.vgp-detail {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 16px;
	align-items: stretch;
	padding: 14px;
	border: 1px solid var(--vgp-line);
	border-radius: var(--vgp-radius-sm);
	background: var(--vgp-surface);
}

.vgp-detail__map {
	position: relative;
	overflow: hidden;
	min-height: 210px;
	border: 1px solid var(--vgp-line);
	border-radius: 8px;
	background: var(--vgp-surface-2);
}

.vgp-detail__map iframe {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 210px;
	border: 0;
}

.vgp-detail__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.vgp-detail__name {
	margin: 0 0 6px;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--vgp-fg);
}

.vgp-detail__addr {
	margin: 0 0 14px;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--vgp-fg-soft);
}

/* fact rows (used on the order-received panel) */
.vgp-facts {
	margin: 0 0 14px;
	padding: 0;
}

.vgp-facts__row {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
	margin: 0 0 5px;
	font-size: 0.875rem;
	line-height: 1.5;
}

.vgp-facts dt {
	margin: 0;
	font-weight: 600;
	color: var(--vgp-fg);
}

.vgp-facts dt::after {
	content: ":";
}

.vgp-facts dd {
	margin: 0;
	color: var(--vgp-fg-soft);
}

.vgp-facts dd a {
	color: var(--vgp-accent-text);
	text-decoration: none;
}

.vgp-facts dd a:hover,
.vgp-facts dd a:focus {
	text-decoration: underline;
}

.vgp-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 12px;
}

.vgp-ready {
	margin: 0 0 6px;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--vgp-fg-soft);
}

.vgp-note {
	margin: 0;
	font-size: 0.75rem;
	line-height: 1.5;
	color: var(--vgp-fg-mute);
}

/* ══════════════════════════════════════════════════════════════════════
   buttons — fully self-contained, inherit nothing but the font
   ══════════════════════════════════════════════════════════════════════ */
.vgp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 18px;
	border: 1px solid var(--vgp-accent);
	border-radius: 8px;
	background: var(--vgp-accent);
	box-shadow: none;
	font-family: inherit;
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-align: center;
	text-decoration: none;
	color: var(--vgp-accent-fg);
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.vgp-btn:hover,
.vgp-btn:focus {
	border-color: var(--vgp-accent-text);
	background: var(--vgp-accent-hi);
	color: var(--vgp-accent-fg);
	text-decoration: none;
}

.vgp-btn:focus-visible {
	outline: 2px solid var(--vgp-accent-hi);
	outline-offset: 2px;
}

.vgp-btn--ghost {
	border-color: var(--vgp-line-strong);
	background: transparent;
	color: var(--vgp-fg);
}

.vgp-btn--ghost:hover,
.vgp-btn--ghost:focus {
	border-color: var(--vgp-fg-soft);
	background: var(--vgp-surface-2);
	color: var(--vgp-fg);
}

/* ══════════════════════════════════════════════════════════════════════
   narrow viewports
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
	.vgp-detail {
		grid-template-columns: minmax(0, 1fr);
	}

	.vgp-detail__map,
	.vgp-detail__map iframe {
		min-height: 190px;
	}
}

@media (max-width: 600px) {
	.vgp-tile {
		flex-wrap: wrap;
	}

	.vgp-tile__state {
		align-self: flex-start;
		order: 3;
		margin-left: 30px;
	}

	.vgp-actions {
		flex-direction: column;
	}

	.vgp-btn {
		width: 100%;
	}
}

/* ══════════════════════════════════════════════════════════════════════
   THE ONE DOCUMENTED EXCEPTION
   ----------------------------------------------------------------------
   Visually hide WooCommerce's raw pickup radio list once our tiles are up,
   so the shopper isn't shown two selectors for the same choice.

   • Gated behind .vgp-native-hidden, which pickup.js adds to the pickup
     options block ONLY after the tiles render and bind. If our JS is blocked,
     errors, or WooCommerce changes its markup, this class is never added and
     core's list stays fully visible.
   • Uses the standard visually-hidden pattern rather than display:none, so
     the inputs remain focusable and reachable by screen readers, and core's
     own validation still sees them.
   • Cannot match anything outside the checkout's pickup options block.
   ══════════════════════════════════════════════════════════════════════ */
.vgp-native-hidden .wc-block-components-radio-control {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   CORE CHECKOUT LEGIBILITY FIXES
   ----------------------------------------------------------------------
   WooCommerce's Ship/Pickup toggle gives the SELECTED tab a white
   background, and inherits Hub theme's white body text on top of it — so
   the selected tab reads as a blank white box (exactly what you saw).
   Core assumes a light checkout; yours is dark. These rules repair that
   and apply the #65B1E1 brand accent.

   SCOPE GATE: every rule below is prefixed .vgp-checkout, a body class
   that Vanguard_Pickup::body_class() adds ONLY on the checkout form.
   It exists on no other page, so none of this can reach another
   Elementor element anywhere on the site.

   Selectors are doubled up (BEM class + aria state) so they keep working
   if WooCommerce renames a modifier class in a future release.
   ══════════════════════════════════════════════════════════════════════ */

/* the toggle track */
.vgp-checkout .wc-block-checkout__shipping-method-container {
	gap: 8px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.04);
}

/* both tabs — force text to inherit so nothing can render white-on-white */
.vgp-checkout .wc-block-checkout__shipping-method-option {
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.03);
	color: rgba(255, 255, 255, 0.72);
	box-shadow: none;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.vgp-checkout .wc-block-checkout__shipping-method-option * {
	color: inherit;
}

.vgp-checkout .wc-block-checkout__shipping-method-option:hover {
	border-color: rgba(255, 255, 255, 0.28);
	background: rgba(255, 255, 255, 0.07);
	color: #ffffff;
}

/* selected tab — brand accent wash, readable label */
.vgp-checkout .wc-block-checkout__shipping-method-option--selected,
.vgp-checkout .wc-block-checkout__shipping-method-option[aria-checked="true"],
.vgp-checkout .wc-block-checkout__shipping-method-option[aria-pressed="true"] {
	border-color: #65b1e1;
	background: rgba(101, 177, 225, 0.16);
	color: #ffffff;
}

/* the little rate/price line inside a tab */
.vgp-checkout .wc-block-checkout__shipping-method-option-rate {
	color: #8ac8ec;
}

/* "Pickup locations" legend, and core's rate rows if our tiles never load */
.vgp-checkout .wc-block-components-radio-control__option,
.vgp-checkout .wc-block-components-radio-control__label,
.vgp-checkout .wc-block-components-radio-control__description {
	color: rgba(255, 255, 255, 0.86);
}