/* Trafaret.ua — кнопка зв'язку в кутку екрана. */

.trf-fab {
	--fab-ink: #1D1E1B;
	--fab-sheet: #F8F7F4;
	--fab-line: #D5D3CC;
	--fab-mortar: #62635D;
	--fab-orange: #C66A2B;
	--fab-orange-deep: #A3521C;
	--fab-body: "Onest", "Segoe UI", system-ui, sans-serif;
	--fab-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

	position: fixed;
	left: 24px;
	bottom: 24px;
	z-index: 340;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	font-family: var(--fab-body);
}

.trf-fab__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 52px;
	padding: 0 20px 0 16px;
	border: 0;
	border-radius: 999px;
	background: var(--fab-ink);
	color: var(--fab-sheet);
	font: 600 15px/1 var(--fab-body);
	cursor: pointer;
	box-shadow: 0 8px 24px rgba(29, 30, 27, .22);
	transition: background .2s ease, transform .2s ease;
}
.trf-fab__btn:hover { background: var(--fab-orange-deep); }
.trf-fab__btn:active { transform: translateY(1px); }
.trf-fab__btn:focus-visible { outline: 3px solid var(--fab-orange); outline-offset: 3px; }
.trf-fab__btn svg { width: 22px; height: 22px; display: block; }
.trf-fab__ico--close { display: none; }
.trf-fab[data-open] .trf-fab__ico--chat { display: none; }
.trf-fab[data-open] .trf-fab__ico--close { display: inline-flex; }

.trf-fab__panel {
	width: min(310px, calc(100vw - 48px));
	background: var(--fab-sheet);
	border: 1.5px solid var(--fab-ink);
	padding: 18px 18px 14px;
	box-shadow: 0 16px 40px rgba(29, 30, 27, .18);
}
.trf-fab__panel[hidden] { display: none; }
.trf-fab__title { margin: 0; font: 700 17px/1.25 var(--fab-body); color: var(--fab-ink); }
.trf-fab__note { margin: 6px 0 14px; font: 400 13px/1.45 var(--fab-body); color: var(--fab-mortar); }

.trf-fab__list { display: grid; gap: 2px; }
.trf-fab__link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 8px;
	color: var(--fab-ink);
	text-decoration: none;
	border-top: 1px solid var(--fab-line);
	transition: background .15s ease, color .15s ease;
}
.trf-fab__link:first-child { border-top: 0; }
.trf-fab__link:hover { background: #fff; color: var(--fab-orange-deep); }
.trf-fab__link:focus-visible { outline: 2px solid var(--fab-orange); outline-offset: 2px; }
.trf-fab__link svg { width: 21px; height: 21px; flex: none; color: var(--fab-orange); }
.trf-fab__label { display: grid; gap: 2px; font: 600 15px/1.2 var(--fab-body); }
.trf-fab__label small { font: 400 12px/1.3 var(--fab-mono); color: var(--fab-mortar); }

@media (max-width: 767px) {
	/* нижня панель Woodmart на телефоні — піднімаємо кнопку над нею */
	.trf-fab { left: 16px; right: 16px; bottom: 70px; align-items: stretch; }
	.trf-fab__btn { justify-content: center; align-self: flex-start; }
	.trf-fab__panel { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.trf-fab__btn { transition: none; }
}