.b123-contact-drawer,
.b123-contact-page {
	--b123-contact-accent: #2d7df6;
	--b123-contact-ink: #0b1f29;
	--b123-contact-muted: #60717a;
	--b123-contact-line: #dfe7ea;
	--b123-contact-soft: #f4f8fa;
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.b123-contact-drawer *,
.b123-contact-page * {
	box-sizing: border-box;
}

.b123-contact-drawer {
	position: fixed;
	bottom: 22px;
	z-index: 99980;
}

.b123-contact-drawer--right { right: 22px; }
.b123-contact-drawer--left { left: 22px; }

.b123-contact-drawer__trigger {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 50px;
	padding: 0 19px;
	border: 1px solid rgba(255,255,255,.18);
	border-radius: 999px;
	background: #0b2526;
	box-shadow: 0 14px 38px rgba(2,20,25,.24);
	color: #fff;
	font: inherit;
	font-size: 14px;
	font-weight: 750;
	letter-spacing: .01em;
	cursor: pointer;
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.b123-contact-drawer__trigger:hover,
.b123-contact-drawer__trigger:focus-visible {
	background: #123536;
	box-shadow: 0 18px 44px rgba(2,20,25,.3);
	transform: translateY(-2px);
}

.b123-contact-drawer__trigger svg {
	width: 21px;
	height: 21px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
}

.b123-contact-drawer__panel {
	position: absolute;
	bottom: 62px;
	width: min(360px, calc(100vw - 28px));
	border: 1px solid rgba(11,31,41,.1);
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 24px 70px rgba(2,20,25,.22);
	overflow: hidden;
}

.b123-contact-drawer--right .b123-contact-drawer__panel { right: 0; }
.b123-contact-drawer--left .b123-contact-drawer__panel { left: 0; }

.b123-contact-drawer__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	padding: 23px 22px 20px;
	background: #0b2526;
	color: #fff;
}

.b123-contact-drawer__header strong {
	display: block;
	font-size: 19px;
	line-height: 1.2;
}

.b123-contact-drawer__header p {
	margin: 7px 0 0;
	color: rgba(255,255,255,.7);
	font-size: 13px;
	line-height: 1.45;
}

.b123-contact-drawer__close {
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid rgba(255,255,255,.18);
	border-radius: 50%;
	background: rgba(255,255,255,.08);
	color: #fff;
	font: inherit;
	font-size: 22px;
	line-height: 28px;
	cursor: pointer;
}

.b123-contact-drawer__channels { padding: 9px; }

.b123-contact-channel {
	position: relative;
	display: flex;
	align-items: center;
	gap: 13px;
	color: var(--b123-contact-ink);
	text-decoration: none !important;
}

.b123-contact-channel--drawer {
	min-height: 68px;
	padding: 10px 11px;
	border-radius: 14px;
}

.b123-contact-channel--drawer:hover,
.b123-contact-channel--drawer:focus-visible { background: var(--b123-contact-soft); }

.b123-contact-channel__icon {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 13px;
	background: #edf5ff;
	color: #2579e8;
}

.b123-contact-channel--whatsapp .b123-contact-channel__icon { background: #e8f9ef; color: #1ca85d; }
.b123-contact-channel--slack .b123-contact-channel__icon { background: #f5edf7; color: #611f69; }
.b123-contact-channel--email .b123-contact-channel__icon { background: #edf1f3; color: #40545d; }

.b123-contact-channel__icon svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.75;
}

.b123-contact-channel__body {
	display: block;
	min-width: 0;
	line-height: 1.2;
}

.b123-contact-channel__body strong { display: block; font-size: 14px; }
.b123-contact-channel__body small { display: none; }
.b123-contact-channel__body > span {
	display: block;
	margin-top: 4px;
	overflow: hidden;
	color: var(--b123-contact-muted);
	font-size: 12px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.b123-contact-channel__arrow {
	margin-left: auto;
	color: #8ea0a8;
	font-size: 18px;
}

.b123-contact-drawer__all {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15px 21px;
	border-top: 1px solid var(--b123-contact-line);
	color: var(--b123-contact-ink);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none !important;
}

.b123-contact-drawer__all:hover { color: var(--b123-contact-accent); }

.b123-contact-page {
	width: min(1160px, calc(100% - 36px));
	margin: 42px auto 72px;
	color: var(--b123-contact-ink);
}

.b123-contact-page--embedded {
	width: 100%;
	margin: 28px 0 36px;
}

.b123-contact-page__hero {
	padding: clamp(38px, 7vw, 82px);
	border-radius: 30px;
	background:
		radial-gradient(circle at 86% 16%, rgba(77,195,169,.28), transparent 28%),
		linear-gradient(135deg, #071b23, #123234);
	color: #fff;
}

.b123-contact-page__eyebrow {
	display: inline-block;
	color: #43cfaa;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .14em;
}

.b123-contact-page__hero h1,
.b123-contact-page__hero h2 {
	max-width: 780px;
	margin: 14px 0 16px;
	color: #fff;
	font-size: clamp(40px, 6vw, 72px);
	font-weight: 800;
	letter-spacing: -.045em;
	line-height: .98;
}

.b123-contact-page--embedded .b123-contact-page__hero h2 {
	font-size: clamp(34px, 5vw, 58px);
}

.b123-contact-page__hero > p {
	max-width: 720px;
	margin: 0;
	color: rgba(255,255,255,.73);
	font-size: clamp(16px, 2vw, 19px);
	line-height: 1.65;
}

.b123-contact-page__response {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 28px;
	padding: 9px 13px;
	border: 1px solid rgba(255,255,255,.14);
	border-radius: 999px;
	background: rgba(255,255,255,.07);
	color: rgba(255,255,255,.82);
	font-size: 13px;
}

.b123-contact-page__response svg {
	width: 17px;
	height: 17px;
	fill: none;
	stroke: #43cfaa;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
}

.b123-contact-page__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-top: 22px;
}

.b123-contact-channel--page {
	min-height: 174px;
	padding: 29px;
	border: 1px solid var(--b123-contact-line);
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 9px 28px rgba(11,31,41,.045);
	transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.b123-contact-channel--page:hover,
.b123-contact-channel--page:focus-visible {
	border-color: #aec9d5;
	box-shadow: 0 16px 38px rgba(11,31,41,.08);
	transform: translateY(-2px);
}

.b123-contact-channel--page .b123-contact-channel__icon {
	width: 54px;
	height: 54px;
	border-radius: 16px;
}

.b123-contact-channel--page .b123-contact-channel__icon svg { width: 27px; height: 27px; }
.b123-contact-channel--page .b123-contact-channel__body strong { font-size: 19px; }
.b123-contact-channel--page .b123-contact-channel__body small {
	display: block;
	margin-top: 7px;
	color: var(--b123-contact-muted);
	font-size: 13px;
	line-height: 1.35;
}
.b123-contact-channel--page .b123-contact-channel__body > span { margin-top: 14px; color: var(--b123-contact-ink); font-size: 13px; font-weight: 700; }

.b123-contact-page__qr-section,
.b123-contact-page__business {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 50px;
	align-items: center;
	margin-top: 22px;
	padding: clamp(30px, 5vw, 58px);
	border: 1px solid var(--b123-contact-line);
	border-radius: 24px;
	background: var(--b123-contact-soft);
}

.b123-contact-page__qr-section h2,
.b123-contact-page__business h2 {
	margin: 10px 0 10px;
	color: var(--b123-contact-ink);
	font-size: clamp(27px, 3.5vw, 42px);
	letter-spacing: -.035em;
	line-height: 1.05;
}

.b123-contact-page__qr-section p,
.b123-contact-page__business p { margin: 0; color: var(--b123-contact-muted); line-height: 1.6; }
.b123-contact-page__qr-grid { display: flex; gap: 16px; justify-content: flex-end; }

.b123-contact-page__qr {
	width: min(210px, 46%);
	margin: 0;
	padding: 14px;
	border: 1px solid var(--b123-contact-line);
	border-radius: 18px;
	background: #fff;
}

.b123-contact-page__qr img { display: block; width: 100%; height: auto; border-radius: 10px; }
.b123-contact-page__qr figcaption { padding: 11px 4px 1px; font-size: 13px; font-weight: 800; }
.b123-contact-page__qr figcaption span { display: block; margin-top: 3px; color: var(--b123-contact-muted); font-size: 11px; font-weight: 500; }

.b123-contact-page__business {
	grid-template-columns: 1fr auto;
	background: #fff;
}

.b123-contact-page__business > a {
	display: inline-flex;
	align-items: center;
	gap: 28px;
	padding: 15px 20px;
	border-radius: 999px;
	background: #0b2526;
	color: #fff;
	font-size: 13px;
	font-weight: 750;
	text-decoration: none !important;
	white-space: nowrap;
}

@media (max-width: 760px) {
	.b123-contact-drawer { bottom: max(14px, env(safe-area-inset-bottom)); }
	.b123-contact-drawer--right { right: 14px; }
	.b123-contact-drawer--left { left: 14px; }
	.b123-contact-drawer__trigger { width: 52px; height: 52px; justify-content: center; padding: 0; }
	.b123-contact-drawer__trigger span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.b123-contact-drawer__panel { position: fixed; right: 12px !important; bottom: calc(78px + env(safe-area-inset-bottom)); left: 12px !important; width: auto; }
	.b123-contact-page { width: min(100% - 24px, 1160px); margin-top: 20px; }
	.b123-contact-page--embedded { width: 100%; margin: 20px 0 30px; }
	.b123-contact-page__hero { border-radius: 23px; }
	.b123-contact-page__grid { grid-template-columns: 1fr; }
	.b123-contact-channel--page { min-height: 138px; padding: 22px; }
	.b123-contact-page__qr-section,
	.b123-contact-page__business { grid-template-columns: 1fr; gap: 24px; padding: 28px 22px; }
	.b123-contact-page__qr-grid { justify-content: flex-start; }
	.b123-contact-page__business > a { justify-content: space-between; white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
	.b123-contact-drawer__trigger,
	.b123-contact-channel--page { transition: none; }
}