/* ==========================================================================
   MDS Sticky Contact CTA
   Vertical side tab + contact panel. Mobile first.
   ========================================================================== */

.mds-cta {
	--mds-dark: #373640;
	--mds-accent: #A88774;
	--mds-light: #F2F2F2;
	--mds-tab-bg: var(--mds-dark);
	--mds-tab-fg: #ffffff;
	--mds-radius: 3px;
	--mds-offset: 50%;
	--mds-offset-mobile: 50%;
	--mds-z: 9998;
	--mds-font-body: inherit;
	--mds-font-display: inherit;

	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: var(--mds-z);
	font-family: var(--mds-font-body);
}

.mds-cta--brand-font {
	--mds-font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
	--mds-font-display: "Fraunces", Georgia, "Times New Roman", serif;
}

.mds-cta *,
.mds-cta *::before,
.mds-cta *::after {
	box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Scrim — mobile only, dismisses on tap
   -------------------------------------------------------------------------- */
.mds-cta__scrim {
	position: absolute;
	inset: 0;
	background: rgba(55, 54, 64, .42);
	opacity: 0;
	visibility: hidden;
	transition: opacity .28s ease, visibility .28s;
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

/* --------------------------------------------------------------------------
   Tab — vertical, glued to the screen edge
   -------------------------------------------------------------------------- */
.mds-cta__tab {
	position: absolute;
	top: var(--mds-offset-mobile);
	transform: translateY(-50%);
	pointer-events: auto;

	display: flex;
	align-items: center;
	gap: 9px;

	margin: 0;
	border: 0;
	cursor: pointer;
	padding: 17px 11px;

	background: var(--mds-tab-bg);
	color: var(--mds-tab-fg);

	writing-mode: vertical-rl;
	font-family: var(--mds-font-body);
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .11em;
	text-transform: uppercase;

	box-shadow: 0 6px 26px rgba(55, 54, 64, .24);
	transition: padding .22s ease, background .22s ease;
	-webkit-appearance: none;
	appearance: none;
}

.mds-cta--right .mds-cta__tab {
	right: 0;
	border-radius: var(--mds-radius) 0 0 var(--mds-radius);
}

.mds-cta--left .mds-cta__tab {
	left: 0;
	border-radius: 0 var(--mds-radius) var(--mds-radius) 0;
}

.mds-cta--tab-accent {
	--mds-tab-bg: var(--mds-accent);
}

.mds-cta--tab-pill.mds-cta--right .mds-cta__tab {
	border-radius: 999px 0 0 999px;
}

.mds-cta--tab-pill.mds-cta--left .mds-cta__tab {
	border-radius: 0 999px 999px 0;
}

.mds-cta__tab:focus-visible {
	outline: 2px solid var(--mds-accent);
	outline-offset: 3px;
}

/* Text reads bottom-to-top on the right edge, top-to-bottom on the left */
.mds-cta--right .mds-cta__tab-txt {
	transform: rotate(180deg);
}

.mds-cta__tab-ico {
	writing-mode: horizontal-tb;
	display: grid;
	place-items: center;
	width: 15px;
	height: 15px;
	flex: none;
	transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}

.mds-cta__tab-ico svg {
	width: 100%;
	height: 100%;
	display: block;
}

.mds-cta.is-open .mds-cta__tab-ico {
	transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   Panel
   -------------------------------------------------------------------------- */
.mds-cta__panel {
	position: absolute;
	top: var(--mds-offset-mobile);
	transform: translateY(-50%) translateX(10px);
	pointer-events: none;
	opacity: 0;
	visibility: hidden;

	padding: 18px 17px 16px;
	background: #fff;
	border-radius: var(--mds-radius);
	box-shadow: 0 20px 50px rgba(55, 54, 64, .22), 0 2px 6px rgba(55, 54, 64, .08);

	transition: opacity .26s ease, transform .3s cubic-bezier(.22, 1, .36, 1), visibility .3s;
}

.mds-cta--right .mds-cta__panel {
	right: 38px;
	left: 14px;
}

.mds-cta--left .mds-cta__panel {
	left: 38px;
	right: 14px;
	transform: translateY(-50%) translateX(-10px);
}

.mds-cta.is-open .mds-cta__panel {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(-50%) translateX(0);
}

.mds-cta.is-open .mds-cta__scrim {
	opacity: 1;
	visibility: visible;
}

.mds-cta__eyebrow {
	margin: 0 0 3px;
	padding: 0;
	font-family: var(--mds-font-body);
	font-size: 9.5px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--mds-accent);
}

.mds-cta__title {
	margin: 0 0 13px;
	padding: 0;
	font-family: var(--mds-font-display);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.25;
	color: var(--mds-dark);
}

/* --------------------------------------------------------------------------
   Options
   -------------------------------------------------------------------------- */
.mds-cta__opt {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 13px 14px;
	border-radius: var(--mds-radius);
	text-decoration: none;
	box-shadow: none;
	transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.mds-cta__opt + .mds-cta__opt {
	margin-top: 8px;
}

.mds-cta__opt:hover,
.mds-cta__opt:focus {
	text-decoration: none;
}

.mds-cta__opt--primary {
	background: var(--mds-dark);
	color: #fff;
}

.mds-cta__opt--primary:hover,
.mds-cta__opt--primary:focus {
	background: var(--mds-dark);
	color: #fff;
	filter: brightness(.92);
	transform: translateX(2px);
}

.mds-cta__opt--secondary {
	background: var(--mds-light);
	color: var(--mds-dark);
	border: 1px solid rgba(55, 54, 64, .1);
}

.mds-cta__opt--secondary:hover,
.mds-cta__opt--secondary:focus {
	color: var(--mds-dark);
	border-color: var(--mds-accent);
	transform: translateX(2px);
}

.mds-cta--left .mds-cta__opt:hover,
.mds-cta--left .mds-cta__opt:focus {
	transform: translateX(-2px);
}

.mds-cta__opt:focus-visible {
	outline: 2px solid var(--mds-accent);
	outline-offset: 2px;
}

.mds-cta__opt-ico {
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: #fff;
}

.mds-cta__opt--primary .mds-cta__opt-ico {
	background: rgba(255, 255, 255, .13);
}

.mds-cta__opt--secondary .mds-cta__opt-ico {
	background: var(--mds-accent);
}

.mds-cta__opt-ico svg {
	width: 16px;
	height: 16px;
	display: block;
}

.mds-cta__opt-txt {
	min-width: 0;
}

.mds-cta__opt-label {
	display: block;
	font-family: var(--mds-font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}

.mds-cta__opt-sub {
	display: block;
	font-family: var(--mds-font-body);
	font-size: 11.5px;
	font-weight: 500;
	line-height: 1.4;
	opacity: .72;
	margin-top: 2px;
}

/* --------------------------------------------------------------------------
   Hours strip
   -------------------------------------------------------------------------- */
.mds-cta__hours {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 14px 0 0;
	padding: 12px 0 0;
	border-top: 1px solid rgba(55, 54, 64, .09);
	font-family: var(--mds-font-body);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.5;
	color: #8d8b95;
}

.mds-cta__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #4a9a6b;
	flex: none;
}

.mds-cta__hours.is-closed .mds-cta__dot {
	background: var(--mds-accent);
}

/* --------------------------------------------------------------------------
   Desktop
   -------------------------------------------------------------------------- */
@media (min-width: 782px) {

	.mds-cta__tab {
		top: var(--mds-offset);
		padding: 20px 13px;
		gap: 10px;
		font-size: 12.5px;
		letter-spacing: .13em;
	}

	.mds-cta--right .mds-cta__tab:hover {
		padding-right: 18px;
	}

	.mds-cta--left .mds-cta__tab:hover {
		padding-left: 18px;
	}

	.mds-cta__tab-ico {
		width: 17px;
		height: 17px;
	}

	.mds-cta__panel {
		top: var(--mds-offset);
		width: 308px;
		padding: 20px 20px 18px;
	}

	.mds-cta--right .mds-cta__panel {
		right: 46px;
		left: auto;
	}

	.mds-cta--left .mds-cta__panel {
		left: 46px;
		right: auto;
	}

	.mds-cta__title {
		font-size: 19px;
		margin-bottom: 15px;
	}

	/* No dimming overlay needed on desktop */
	.mds-cta__scrim {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Options
   -------------------------------------------------------------------------- */
@media (max-width: 781px) {
	.mds-cta--desktop-only {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mds-cta *,
	.mds-cta *::before,
	.mds-cta *::after {
		transition-duration: .01ms !important;
	}
}

@media print {
	.mds-cta {
		display: none !important;
	}
}