/**
 * Solasta role-aware header.
 *
 * Every rule is scoped to .solasta-hdr and all tokens are declared on that
 * element rather than :root, so nothing leaks into the theme and the theme
 * cannot overwrite them.
 */

.solasta-hdr {
	--sh-teal: #2E7E8C;
	--sh-teal-deep: #225C68;
	--sh-teal-line: #BFE2E8;
	--sh-green: #2E8B6F;
	--sh-green-deep: #256F59;
	--sh-rose: #E79CB8;
	--sh-ink: #16242A;
	--sh-muted: #8A9094;
	--sh-line: #E7E0DB;
	--sh-gap: 13px;

	/* Must beat the theme header's own stacking. The Beaver Builder menu
	   module on this site sits at 9999999 and UABB's mini cart at 99999999,
	   so the open dropdown has to clear both. Applied only while open. */
	--sh-menu-z: 999999999;

	display: flex;
	align-items: center;
	gap: var(--sh-gap);
	font-family: inherit;
	flex-wrap: wrap;
}

.solasta-hdr *,
.solasta-hdr *::before,
.solasta-hdr *::after {
	box-sizing: border-box;
}

.solasta-hdr .sh-svg {
	display: block;
	width: 20px;
	height: 20px;
	flex: none;
}

/* --- phone ------------------------------------------------------------ */

.solasta-hdr .sh-phone {
	display: flex;
	align-items: center;
	gap: 7px;
	color: var(--sh-teal-deep);
	font-weight: 800;
	font-size: 14px;
	line-height: 1.2;
	text-decoration: none;
}

.solasta-hdr .sh-phone:hover,
.solasta-hdr .sh-phone:focus-visible {
	color: var(--sh-teal);
}

.solasta-hdr .sh-phone .sh-svg {
	width: 17px;
	height: 17px;
}

.solasta-hdr .sh-sep {
	width: 1px;
	height: 40px;
	background: var(--sh-line);
	flex: none;
}

/* --- buttons ---------------------------------------------------------- */

.solasta-hdr .sh-btn {
	display: flex;
	align-items: center;
	gap: 11px;
	text-decoration: none;
	border-radius: 12px;
	padding: 9px 17px;
	border: 1.5px solid transparent;
	transition: background-color .22s, border-color .22s, transform .22s, box-shadow .22s;
}

.solasta-hdr .sh-ic {
	width: 40px;
	height: 40px;
	border-radius: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
}

.solasta-hdr .sh-ic .sh-svg {
	width: 21px;
	height: 21px;
}

.solasta-hdr .sh-lbl {
	display: flex;
	flex-direction: column;
	line-height: 1.18;
	text-align: left;
}

.solasta-hdr .sh-lbl b {
	font-size: 15px;
	font-weight: 800;
	color: var(--sh-ink);
}

.solasta-hdr .sh-lbl-min {
	display: none;
}

.solasta-hdr .sh-lbl small {
	font-size: 11.5px;
	color: var(--sh-muted);
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 4px;
	margin-top: 1px;
}

.solasta-hdr .sh-lbl small .sh-svg {
	width: 11px;
	height: 11px;
}

/* filled teal — the patient route */
.solasta-hdr .sh-btn--teal {
	background: var(--sh-teal);
	border-color: var(--sh-teal);
	box-shadow: 0 4px 14px rgba(46, 126, 140, .28);
}

.solasta-hdr .sh-btn--teal .sh-ic {
	background: rgba(255, 255, 255, .18);
}

.solasta-hdr .sh-btn--teal .sh-ic .sh-svg,
.solasta-hdr .sh-btn--teal .sh-lbl b {
	color: #fff;
}

.solasta-hdr .sh-btn--teal .sh-lbl small {
	color: #CDEBEF;
}

.solasta-hdr .sh-btn--teal:hover,
.solasta-hdr .sh-btn--teal:focus-visible {
	background: var(--sh-teal-deep);
	border-color: var(--sh-teal-deep);
	transform: translateY(-2px);
}

/* outlined — the professional route, signed out */
.solasta-hdr .sh-btn--outline {
	background: #fff;
	border-color: var(--sh-teal-line);
}

.solasta-hdr .sh-btn--outline .sh-ic {
	background: linear-gradient(135deg, #F8DEE8, #F1C4D6);
}

.solasta-hdr .sh-btn--outline .sh-ic .sh-svg {
	color: #1B3036;
}

.solasta-hdr .sh-btn--outline:hover,
.solasta-hdr .sh-btn--outline:focus-visible {
	background: #FDF8FA;
	border-color: var(--sh-rose);
	transform: translateY(-2px);
}

/* green — referral CTA only, deliberately not the consumer teal */
.solasta-hdr .sh-btn--green {
	background: var(--sh-green);
	border-color: var(--sh-green);
	box-shadow: 0 4px 14px rgba(46, 139, 111, .3);
}

.solasta-hdr .sh-btn--green .sh-ic {
	background: rgba(255, 255, 255, .2);
}

.solasta-hdr .sh-btn--green .sh-ic .sh-svg,
.solasta-hdr .sh-btn--green .sh-lbl b {
	color: #fff;
}

.solasta-hdr .sh-btn--green .sh-lbl small {
	color: #CDEBDC;
}

.solasta-hdr .sh-btn--green:hover,
.solasta-hdr .sh-btn--green:focus-visible {
	background: var(--sh-green-deep);
	border-color: var(--sh-green-deep);
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(46, 139, 111, .4);
}

/* --- cart ------------------------------------------------------------- */

.solasta-hdr .sh-cart {
	position: relative;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	border: 1.5px solid var(--sh-line);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--sh-ink);
	text-decoration: none;
	flex: none;
	transition: border-color .2s, color .2s;
}

.solasta-hdr .sh-cart:hover,
.solasta-hdr .sh-cart:focus-visible {
	border-color: var(--sh-teal);
	color: var(--sh-teal-deep);
}

.solasta-hdr .sh-cart-badge {
	position: absolute;
	top: -6px;
	right: -6px;
	background: var(--sh-rose);
	color: #fff;
	font-size: 10px;
	font-weight: 800;
	line-height: 1;
	min-width: 19px;
	height: 19px;
	border-radius: 999px;
	padding: 0 5px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.solasta-hdr .sh-cart-badge--empty {
	display: none;
}

.solasta-hdr .sh-cart-slot {
	display: flex;
	align-items: center;
}

/* --- account chip ----------------------------------------------------- */

.solasta-hdr .sh-who {
	position: relative;
}

.solasta-hdr .sh-chip {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #F5F8F8;
	border: 1.5px solid var(--sh-line);
	border-radius: 999px;
	padding: 7px 14px 7px 7px;
	margin: 0;
	font-family: inherit;
	line-height: 1.15;
	cursor: pointer;
	transition: border-color .2s;
}

.solasta-hdr .sh-chip:hover,
.solasta-hdr .sh-chip:focus-visible {
	border-color: var(--sh-teal);
}

.solasta-hdr .sh-av {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: linear-gradient(135deg, #CDEDF2, #A9DCE5);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 900;
	color: #1B3036;
	font-size: 13px;
	flex: none;
}

.solasta-hdr .sh-av--pro {
	background: linear-gradient(135deg, #F8DEE8, #F1C4D6);
}

.solasta-hdr .sh-chip-tx {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
	text-align: left;
}

.solasta-hdr .sh-chip-tx b {
	font-size: 13.5px;
	color: var(--sh-ink);
	font-weight: 800;
}

.solasta-hdr .sh-chip-tx small {
	font-size: 11px;
	color: var(--sh-muted);
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 4px;
	margin-top: 1px;
}

.solasta-hdr .sh-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--sh-green);
	display: inline-block;
	flex: none;
}

.solasta-hdr .sh-caret {
	width: 15px;
	height: 15px;
	color: #5A6166;
	transition: transform .2s;
}

.solasta-hdr .sh-chip[aria-expanded="true"] .sh-caret {
	transform: rotate(180deg);
}

/* --- dropdown --------------------------------------------------------- */

.solasta-hdr .sh-menu {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	width: 280px;
	max-width: calc(100vw - 16px);
	background: #fff;
	border: 1px solid var(--sh-line);
	border-radius: 16px;
	box-shadow: 0 18px 50px rgba(40, 50, 55, .18);
	padding: 8px;
	z-index: 1;
}

/* Raising the whole region, not just the menu, escapes any sibling in the
   header that outranks us. Only while a menu is open, so nothing else in the
   header is affected the rest of the time. */
.solasta-hdr.sh-menu-open {
	position: relative;
	z-index: var(--sh-menu-z, 999999999);
}

.solasta-hdr .sh-menu-h {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--sh-muted);
	padding: 9px 12px 5px;
}

.solasta-hdr .sh-mi {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 11px 12px;
	border-radius: 11px;
	text-decoration: none;
	color: var(--sh-ink);
	font-weight: 700;
	font-size: 14px;
	line-height: 1.2;
}

.solasta-hdr .sh-mi .sh-svg {
	width: 18px;
	height: 18px;
	color: var(--sh-teal);
}

.solasta-hdr .sh-mi:hover,
.solasta-hdr .sh-mi:focus-visible {
	background: #F4FAFB;
	color: var(--sh-ink);
}

.solasta-hdr .sh-mdiv {
	height: 1px;
	background: var(--sh-line);
	margin: 5px 12px;
}

.solasta-hdr .sh-mi--out,
.solasta-hdr .sh-mi--out .sh-svg {
	color: #B4453F;
}

/* --- focus ------------------------------------------------------------ */

.solasta-hdr a:focus-visible,
.solasta-hdr button:focus-visible {
	outline: 2px solid var(--sh-teal-deep);
	outline-offset: 2px;
}

/* --- compact ---------------------------------------------------------- */

.solasta-hdr.is-compact .sh-phone,
.solasta-hdr.is-compact .sh-sep,
.solasta-hdr.is-compact .sh-lbl small,
.solasta-hdr.is-compact .sh-chip-tx {
	display: none;
}

.solasta-hdr.is-compact .sh-btn {
	padding: 8px 12px;
}

@media (prefers-reduced-motion: reduce) {
	.solasta-hdr .sh-btn,
	.solasta-hdr .sh-caret {
		transition: none;
	}

	.solasta-hdr .sh-btn:hover {
		transform: none;
	}
}

.solasta-hdr .sh-menu[hidden] {
	display: none;
}

/* Default breakpoint for shortcode use. Beaver Builder module instances carry
   .sh-auto-compact off and emit their own node-scoped query instead. */
@media (max-width: 900px) {
	.solasta-hdr.sh-auto-compact .sh-phone,
	.solasta-hdr.sh-auto-compact .sh-sep,
	.solasta-hdr.sh-auto-compact .sh-lbl small,
	.solasta-hdr.sh-auto-compact .sh-chip-tx {
		display: none;
	}

	.solasta-hdr.sh-auto-compact .sh-btn {
		padding: 8px 12px;
	}
}

/* --- patient, phone-width flat row ------------------------------------ */

/* Below 600px the patient header stops being a row of controls and becomes a
   row of marks: no pill on the CTA, no chip around the avatar, no box around
   the bag. Signed out and optometrist are deliberately untouched — their
   two-door and referral layouts still need the affordance. Tap targets stay at
   44px via padding, so nothing gets harder to hit. */
@media (max-width: 600px) {

	.solasta-hdr.solasta-hdr--patient .sh-phone,
	.solasta-hdr.solasta-hdr--patient .sh-sep,
	.solasta-hdr.solasta-hdr--patient .sh-lbl small,
	.solasta-hdr.solasta-hdr--patient .sh-chip-tx,
	.solasta-hdr.solasta-hdr--patient .sh-caret,
	.solasta-hdr.solasta-hdr--patient .sh-lbl-full {
		display: none;
	}

	.solasta-hdr.solasta-hdr--patient .sh-lbl-min {
		display: block;
	}

	/* CTA: mark and word only. */
	.solasta-hdr.solasta-hdr--patient .sh-btn.sh-btn--teal,
	.solasta-hdr.solasta-hdr--patient .sh-btn.sh-btn--teal:hover,
	.solasta-hdr.solasta-hdr--patient .sh-btn.sh-btn--teal:focus-visible {
		background: none;
		border-color: transparent;
		box-shadow: none;
		transform: none;
	}

	.solasta-hdr.solasta-hdr--patient .sh-btn.sh-btn--teal {
		padding: 10px 6px;
		gap: 6px;
	}

	/* The icon's 40px tile is most of the gap at this size, so drop it to the
	   glyph and let the button's own gap do the spacing. */
	.solasta-hdr.solasta-hdr--patient .sh-btn.sh-btn--teal .sh-ic {
		background: none;
		width: auto;
		height: auto;
		border-radius: 0;
	}

	.solasta-hdr.solasta-hdr--patient .sh-btn.sh-btn--teal .sh-ic .sh-svg {
		width: 22px;
		height: 22px;
	}

	.solasta-hdr.solasta-hdr--patient .sh-btn.sh-btn--teal .sh-ic .sh-svg,
	.solasta-hdr.solasta-hdr--patient .sh-btn.sh-btn--teal .sh-lbl b {
		color: var(--sh-green);
	}

	.solasta-hdr.solasta-hdr--patient .sh-btn.sh-btn--teal .sh-lbl b {
		font-size: 16px;
	}

	/* Chip: the avatar alone. Padding keeps the tap target at 44px even though
	   the visible mark is 32px. */
	.solasta-hdr.solasta-hdr--patient .sh-chip,
	.solasta-hdr.solasta-hdr--patient .sh-chip:hover,
	.solasta-hdr.solasta-hdr--patient .sh-chip:focus-visible {
		background: none;
		border-color: transparent;
	}

	.solasta-hdr.solasta-hdr--patient .sh-chip {
		padding: 6px;
		gap: 0;
	}

	/* Bag: no box, same 44px target, badge unchanged. */
	.solasta-hdr.solasta-hdr--patient .sh-cart,
	.solasta-hdr.solasta-hdr--patient .sh-cart:hover,
	.solasta-hdr.solasta-hdr--patient .sh-cart:focus-visible {
		border-color: transparent;
	}

	.solasta-hdr.solasta-hdr--patient .sh-cart-badge {
		top: 0;
		right: 0;
	}
}

/* --- optometrist, phone-width flat row -------------------------------- */

/* Same treatment as the patient row: the referral CTA becomes a teal mark
   and "New referral", the chip becomes the avatar alone. There is no cart in
   this state. Doubled class so BB's node stylesheet cannot win. */
@media (max-width: 600px) {

	.solasta-hdr.solasta-hdr--optometrist .sh-phone,
	.solasta-hdr.solasta-hdr--optometrist .sh-sep,
	.solasta-hdr.solasta-hdr--optometrist .sh-lbl small,
	.solasta-hdr.solasta-hdr--optometrist .sh-chip-tx,
	.solasta-hdr.solasta-hdr--optometrist .sh-caret,
	.solasta-hdr.solasta-hdr--optometrist .sh-lbl-full {
		display: none;
	}

	.solasta-hdr.solasta-hdr--optometrist .sh-lbl-min {
		display: block;
	}

	.solasta-hdr.solasta-hdr--optometrist .sh-btn.sh-btn--green,
	.solasta-hdr.solasta-hdr--optometrist .sh-btn.sh-btn--green:hover,
	.solasta-hdr.solasta-hdr--optometrist .sh-btn.sh-btn--green:focus-visible {
		background: none;
		border-color: transparent;
		box-shadow: none;
		transform: none;
	}

	.solasta-hdr.solasta-hdr--optometrist .sh-btn.sh-btn--green {
		padding: 10px 6px;
		gap: 6px;
	}

	.solasta-hdr.solasta-hdr--optometrist .sh-btn.sh-btn--green .sh-ic {
		background: none;
		width: auto;
		height: auto;
		border-radius: 0;
	}

	.solasta-hdr.solasta-hdr--optometrist .sh-btn.sh-btn--green .sh-ic .sh-svg {
		width: 22px;
		height: 22px;
	}

	.solasta-hdr.solasta-hdr--optometrist .sh-btn.sh-btn--green .sh-ic .sh-svg,
	.solasta-hdr.solasta-hdr--optometrist .sh-btn.sh-btn--green .sh-lbl b {
		color: var(--sh-teal);
	}

	.solasta-hdr.solasta-hdr--optometrist .sh-btn.sh-btn--green .sh-lbl b {
		font-size: 16px;
	}

	.solasta-hdr.solasta-hdr--optometrist .sh-chip,
	.solasta-hdr.solasta-hdr--optometrist .sh-chip:hover,
	.solasta-hdr.solasta-hdr--optometrist .sh-chip:focus-visible {
		background: none;
		border-color: transparent;
	}

	.solasta-hdr.solasta-hdr--optometrist .sh-chip {
		padding: 6px;
		gap: 0;
	}
}

/* --- signed out, phone-width flat row --------------------------------- */

/* Phone number, a person mark for login and the bag, all unboxed. The
   optometrist door is dropped here; the patient login page links to it.
   Selectors carry an extra repeated class because BB's node stylesheet hides
   .sh-phone at the compact breakpoint and loads after this file. */
@media (max-width: 600px) {

	.solasta-hdr.solasta-hdr--out .sh-btn.sh-btn--outline,
	.solasta-hdr.solasta-hdr--out .sh-sep.sh-sep {
		display: none;
	}

	.solasta-hdr.solasta-hdr--out .sh-phone.sh-phone {
		display: flex;
		gap: 5px;
		color: var(--sh-teal);
		font-size: 16px;
		white-space: nowrap;
	}

	.solasta-hdr.solasta-hdr--out .sh-phone.sh-phone .sh-svg {
		width: 20px;
		height: 20px;
	}

	/* Login: the person glyph alone. The label stays for screen readers. */
	.solasta-hdr.solasta-hdr--out .sh-btn.sh-btn--teal,
	.solasta-hdr.solasta-hdr--out .sh-btn.sh-btn--teal:hover,
	.solasta-hdr.solasta-hdr--out .sh-btn.sh-btn--teal:focus-visible {
		background: none;
		border-color: transparent;
		box-shadow: none;
		transform: none;
	}

	.solasta-hdr.solasta-hdr--out .sh-btn.sh-btn--teal {
		padding: 10px;
		gap: 0;
	}

	.solasta-hdr.solasta-hdr--out .sh-btn.sh-btn--teal .sh-ic {
		background: none;
		width: auto;
		height: auto;
		border-radius: 0;
	}

	.solasta-hdr.solasta-hdr--out .sh-btn.sh-btn--teal .sh-ic .sh-svg {
		width: 24px;
		height: 24px;
		color: var(--sh-ink);
	}

	.solasta-hdr.solasta-hdr--out .sh-btn.sh-btn--teal .sh-lbl {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.solasta-hdr.solasta-hdr--out .sh-cart,
	.solasta-hdr.solasta-hdr--out .sh-cart:hover,
	.solasta-hdr.solasta-hdr--out .sh-cart:focus-visible {
		border-color: transparent;
	}

	.solasta-hdr.solasta-hdr--out .sh-cart .sh-svg {
		width: 24px;
		height: 24px;
	}

	.solasta-hdr.solasta-hdr--out .sh-cart-badge {
		top: 0;
		right: 0;
	}
}