/* Business Menu Phone — front end
 * All dynamic values arrive as custom properties on .bp-phone via inline CSS.
 * Blank options fall back to the defaults declared here. */

.bp-menu-item { display: flex; align-items: center; }

.bp-phone {
	display: inline-flex;
	align-items: center;
	gap: var(--bp-gap, 8px);
	font-family: var(--bp-font, inherit);
	font-size: var(--bp-fs, 15px);
	font-weight: var(--bp-fw, 600);
	letter-spacing: var(--bp-ls, normal);
	line-height: 1.1;
	text-decoration: none;
	border-radius: var(--bp-radius, 10px);
	color: var(--bp-text, inherit);
	transition: transform .18s ease, background-color .18s ease, color .18s ease,
		box-shadow .18s ease, border-color .18s ease, background-size .25s ease;
	-webkit-font-smoothing: antialiased;
}
/* Neutralise theme link effects (text-stroke / glow) that bloat the glyphs
   and crowd the button. Forced so a more specific theme rule cannot win. */
.bp-phone,
.bp-phone *,
.bp-mobilebar .bp-phone,
.bp-mobilebar .bp-phone * {
	text-shadow: none !important;
	-webkit-text-stroke: 0 !important;
	-webkit-text-fill-color: currentColor;
}
.bp-phone:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--bp-bg, #2563eb) 45%, transparent);
}

.bp-phone__body { display: inline-flex; flex-direction: column; line-height: 1.15; text-align: left; }
.bp-phone__label {
	display: block;
	width: 100%;
	font-size: var(--bp-label-size, .72em);
	font-family: var(--bp-label-font, inherit);
	font-weight: 500;
	opacity: .8;
	letter-spacing: var(--bp-ls, .01em);
	text-align: var(--bp-label-align, left);
	color: var(--bp-label-c, inherit);
}
.bp-phone__text { white-space: nowrap; }
.bp-phone--uppercase .bp-phone__text { text-transform: uppercase; letter-spacing: .04em; }

.bp-phone__icon { display: inline-flex; align-items: center; justify-content: center; position: relative; font-size: var(--bp-icon-size, 1.05em); color: var(--bp-icon-c, currentColor); }

/* ---- Styles ------------------------------------------------------------ */

/* Solid */
.bp-phone--solid {
	background: var(--bp-bg, #2563eb);
	color: var(--bp-text, #ffffff);
	padding: var(--bp-pad-y, 13px) var(--bp-pad-x, 26px);
}
.bp-phone--solid:hover { background: var(--bp-bg-h, var(--bp-bg, #1d4ed8)); color: var(--bp-text-h, var(--bp-text, #ffffff)); }

/* Elevated (solid + soft drop shadow) */
.bp-phone--elevated {
	background: var(--bp-bg, #2563eb);
	color: var(--bp-text, #ffffff);
	padding: var(--bp-pad-y, 13px) var(--bp-pad-x, 26px);
	box-shadow: 0 8px 20px -8px var(--bp-shadow-c, color-mix(in srgb, var(--bp-bg, #2563eb) 70%, #0f172a));
}
.bp-phone--elevated:hover {
	background: var(--bp-bg-h, var(--bp-bg, #1d4ed8));
	color: var(--bp-text-h, var(--bp-text, #ffffff));
	box-shadow: 0 13px 28px -8px var(--bp-shadow-c, color-mix(in srgb, var(--bp-bg, #2563eb) 78%, #0f172a));
}

/* Gradient */
.bp-phone--gradient {
	background-image: linear-gradient(var(--bp-grad, 135deg), var(--bp-bg, #2563eb), var(--bp-bg2, color-mix(in srgb, var(--bp-bg, #2563eb) 55%, #0f172a)));
	color: var(--bp-text, #ffffff);
	padding: var(--bp-pad-y, 13px) var(--bp-pad-x, 26px);
}
.bp-phone--gradient:hover { filter: brightness(1.06); color: var(--bp-text-h, var(--bp-text, #ffffff)); }

/* Glass (frosted translucent) */
.bp-phone--glass {
	background:
		linear-gradient(color-mix(in srgb, var(--bp-text, #ffffff) 10%, transparent), transparent 60%),
		color-mix(in srgb, var(--bp-bg, #2563eb) 20%, transparent);
	color: var(--bp-text, #ffffff);
	padding: var(--bp-pad-y, 13px) var(--bp-pad-x, 26px);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	backdrop-filter: saturate(180%) blur(12px);
	box-shadow:
		inset 0 0 0 1px color-mix(in srgb, var(--bp-text, #ffffff) 24%, transparent),
		0 6px 18px -10px rgba(0, 0, 0, .35);
}
.bp-phone--glass:hover { background: color-mix(in srgb, var(--bp-bg, #2563eb) 30%, transparent); color: var(--bp-text-h, var(--bp-text, #ffffff)); }

/* Soft (tinted) */
.bp-phone--soft {
	background: color-mix(in srgb, var(--bp-bg, #2563eb) var(--bp-tint, 14%), transparent);
	color: var(--bp-text, var(--bp-bg, #2563eb));
	padding: var(--bp-pad-y, 13px) var(--bp-pad-x, 26px);
}
.bp-phone--soft:hover { background: color-mix(in srgb, var(--bp-bg-h, var(--bp-bg, #2563eb)) calc(var(--bp-tint, 14%) + 10%), transparent); color: var(--bp-text-h, var(--bp-text, var(--bp-bg, #2563eb))); }

/* Outline */
.bp-phone--outline {
	background: transparent;
	color: var(--bp-text, var(--bp-bg, #2563eb));
	padding: var(--bp-pad-y, 13px) var(--bp-pad-x, 26px);
	box-shadow: inset 0 0 0 var(--bp-bw, 2px) var(--bp-border, var(--bp-bg, #2563eb));
}
.bp-phone--outline:hover {
	color: var(--bp-text-h, var(--bp-text, var(--bp-bg, #2563eb)));
	box-shadow: inset 0 0 0 var(--bp-bw, 2px) var(--bp-border-h, var(--bp-border, var(--bp-bg, #2563eb)));
	background: color-mix(in srgb, var(--bp-bg, #2563eb) 8%, transparent);
}

/* Pill — always fully rounded, with extra side room so it reads as a pill. */
.bp-phone--pill {
	background: var(--bp-bg, #2563eb);
	color: var(--bp-text, #ffffff);
	padding: var(--bp-pad-y, 13px) calc(var(--bp-pad-x, 26px) + 14px);
	border-radius: 999px;
}
.bp-phone--pill:hover { background: var(--bp-bg-h, var(--bp-bg, #1d4ed8)); color: var(--bp-text-h, var(--bp-text, #ffffff)); }

/* Plain link */
.bp-phone--link { padding: 0; color: var(--bp-text, inherit); }
.bp-phone--link:hover { color: var(--bp-text-h, var(--bp-bg, currentColor)); }

/* Underline link — a real underline, always visible, thicker on hover. */
.bp-phone--underline { padding: 0; color: var(--bp-text, inherit); }
.bp-phone--underline .bp-phone__text {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}
.bp-phone--underline:hover { color: var(--bp-text-h, var(--bp-text, inherit)); }
.bp-phone--underline:hover .bp-phone__text { text-decoration-thickness: 3px; }

/* ---- Hover lift -------------------------------------------------------- */
.bp-phone--lift:hover { transform: translateY(-2px); }
.bp-phone--lift.bp-phone--solid:hover,
.bp-phone--lift.bp-phone--pill:hover { box-shadow: 0 10px 22px -10px var(--bp-shadow-c, color-mix(in srgb, var(--bp-bg, #2563eb) 80%, #0f172a)); }

/* ---- Drop shadow (stacks with any style via filter) -------------------- */
.bp-phone--shadow-soft   { filter: drop-shadow(0 6px 12px var(--bp-shadow-c, color-mix(in srgb, var(--bp-bg, #2563eb) 32%, transparent))); }
.bp-phone--shadow-strong { filter: drop-shadow(0 10px 20px var(--bp-shadow-c, color-mix(in srgb, var(--bp-bg, #2563eb) 42%, transparent))); }

/* ---- Icon pulse -------------------------------------------------------- */
.bp-phone--pulse .bp-phone__icon::after {
	content: "";
	position: absolute;
	inset: -5px;
	border-radius: 50%;
	border: 2px solid currentColor;
	opacity: .55;
	animation: bp-pulse 1.8s ease-out infinite;
	pointer-events: none;
}
@keyframes bp-pulse {
	0%   { transform: scale(.55); opacity: .55; }
	100% { transform: scale(1.5); opacity: 0; }
}

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 600px) {
	.bp-phone--m-hide { display: none !important; }
	.bp-phone--m-icon { gap: 0; padding-left: var(--bp-pad-y, 13px); padding-right: var(--bp-pad-y, 13px); }
	.bp-phone--m-icon .bp-phone__body { display: none; }

	/* Mobile text size (falls back to the desktop size when unset). */
	.bp-phone { font-size: var(--bp-m-fs, var(--bp-fs, 15px)); }

	/* Full-width call CTA on mobile. */
	.bp-phone--m-full { display: flex; width: 100%; justify-content: center; }
	.bp-menu-item:has(> .bp-phone--m-full) { width: 100%; flex: 1 1 100%; }

	/* ---- Mobile style override --------------------------------------- *
	 * Present only when a mobile style is chosen. Each rule re-states the
	 * look at the mobile breakpoint so it wins over the desktop style
	 * class, reading the mobile colours with a fallback to the desktop
	 * ones. This is what stops "white button on white" — mobile gets its
	 * own background and text independent of desktop. */
	.bp-m--solid, .bp-m--elevated, .bp-m--gradient,
	.bp-m--glass, .bp-m--pill, .bp-m--soft, .bp-m--outline {
		color: var(--bp-m-text, var(--bp-text, #ffffff));
		padding: var(--bp-pad-y, 13px) var(--bp-pad-x, 26px);
		background-image: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
	.bp-m--solid { background: var(--bp-m-bg, var(--bp-bg, #2563eb)); box-shadow: none; }
	.bp-m--elevated {
		background: var(--bp-m-bg, var(--bp-bg, #2563eb));
		box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--bp-m-bg, var(--bp-bg, #2563eb)) 70%, #0f172a);
	}
	.bp-m--gradient {
		background-image: linear-gradient(135deg, var(--bp-m-bg, var(--bp-bg, #2563eb)), var(--bp-bg2, color-mix(in srgb, var(--bp-m-bg, var(--bp-bg, #2563eb)) 55%, #0f172a)));
	}
	.bp-m--glass {
		background: color-mix(in srgb, var(--bp-m-bg, var(--bp-bg, #2563eb)) 22%, transparent);
		-webkit-backdrop-filter: saturate(160%) blur(10px);
		backdrop-filter: saturate(160%) blur(10px);
		box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bp-m-text, var(--bp-text, #ffffff)) 28%, transparent);
	}
	.bp-m--pill {
		background: var(--bp-m-bg, var(--bp-bg, #2563eb));
		border-radius: 999px;
		padding: var(--bp-pad-y, 13px) calc(var(--bp-pad-x, 26px) + 4px);
		box-shadow: none;
	}
	.bp-m--soft {
		background: color-mix(in srgb, var(--bp-m-bg, var(--bp-bg, #2563eb)) 14%, transparent);
		color: var(--bp-m-text, var(--bp-text, var(--bp-m-bg, var(--bp-bg, #2563eb))));
		box-shadow: none;
	}
	.bp-m--outline {
		background: transparent;
		color: var(--bp-m-text, var(--bp-text, var(--bp-m-bg, var(--bp-bg, #2563eb))));
		box-shadow: inset 0 0 0 var(--bp-bw, 2px) var(--bp-border, var(--bp-m-bg, var(--bp-bg, #2563eb)));
	}
	.bp-m--link, .bp-m--underline {
		background: none;
		background-image: none;
		box-shadow: none;
		padding: 0;
		color: var(--bp-m-text, var(--bp-text, inherit));
	}
	.bp-m--underline .bp-phone__text {
		text-decoration: underline;
		text-decoration-thickness: 2px;
		text-underline-offset: 4px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bp-phone { transition: none; }
	.bp-phone--pulse .bp-phone__icon::after { animation: none; opacity: 0; }
}

/* ---- Sticky mobile call bar ------------------------------------------- *
 * Fixed bar shown only on phones, rendered in the footer independent of the
 * nav menu so it appears even when the theme collapses the menu. */
.bp-mobilebar { display: none; }
@media (max-width: 600px) {
	.bp-mobilebar {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		z-index: 99990;
		justify-content: center;
		align-items: center;
		padding: var(--bp-bar-pad-y, 10px) var(--bp-bar-pad-x, 16px);
		background: var(--bp-bar-bg, #0f172a);
		color: #fff;
	}
	.bp-mobilebar--left { justify-content: flex-start; }
	.bp-mobilebar--right { justify-content: flex-end; }
	/* When the label is placed above, stack it over the button. */
	.bp-mobilebar--haslabel { flex-direction: column; }
	.bp-mobilebar--haslabel.bp-mobilebar--left { align-items: flex-start; }
	.bp-mobilebar--haslabel.bp-mobilebar--right { align-items: flex-end; }
	.bp-mobilebar__label {
		width: 100%;
		margin: 0 0 5px;
		line-height: 1.2;
		font-weight: 500;
		font-size: .8rem;
		color: inherit;
		text-shadow: none;
		-webkit-text-stroke: 0;
	}
	.bp-mobilebar--bottom {
		bottom: 0;
		padding-bottom: calc(var(--bp-bar-pad-y, 10px) + env(safe-area-inset-bottom, 0px));
		box-shadow: 0 -10px 26px -14px rgba(0, 0, 0, .6);
	}
	.bp-mobilebar--top {
		top: 0;
		padding-top: calc(var(--bp-bar-pad-y, 10px) + env(safe-area-inset-top, 0px));
		box-shadow: 0 10px 26px -14px rgba(0, 0, 0, .6);
	}
	/* Button keeps its natural width up to the cap; only stretches when asked. */
	.bp-mobilebar .bp-phone {
		max-width: var(--bp-bar-max, 480px);
		justify-content: center;
	}
	.bp-mobilebar--full .bp-phone { width: 100%; }
	/* The bar is its own presentation; never let the menu's hide flag apply. */
	.bp-mobilebar .bp-phone.bp-phone--m-hide { display: inline-flex !important; }
}