/*
 * Telegram channel — sitewide promotion of @smartwhipwholesales
 * Owner instruction 2026-10-04. Pairs with inc/telegram-channel.php.
 *
 * Two deliberate style decisions, both argued in DECISIONS.md:
 *  1. Square-ish corners (--ccu-radius-sm) on buttons, not rounded pills. The
 *     site's house rule is "square-ish, not the default rounded-pill every
 *     template ships with" (see .ccu-btn in base.css). The one circle is the
 *     floating button, where a circle is the platform convention rather than a
 *     template tell.
 *  2. Telegram blue is used as a flat fill, never as a gradient, and never on
 *     more than one element per viewport. tokens.css explicitly calls out
 *     candy-coloured accents as an "AI-generated site" tell, so the blue is
 *     rationed: one CTA colour + one icon colour.
 *
 * Loaded sitewide (the floating button alone forces that), at priority 20 so it
 * lands after tokens.css and can consume the custom properties.
 */

.ccu-tg-icon {
	display: block;
	flex: none;
	width: 1.15em;
	height: 1.15em;
}

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

.ccu-tg-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--ccu-space-2);
	padding: 0.6em 1.05em;
	background: #229ed9;
	color: var(--ccu-white);
	font-family: var(--ccu-font-body);
	font-weight: 600;
	font-size: var(--ccu-size-small);
	letter-spacing: 0.01em;
	line-height: 1.3;
	border: 1px solid #229ed9;
	border-radius: var(--ccu-radius-sm);
	text-decoration: none !important;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.ccu-tg-btn:hover,
.ccu-tg-btn:focus-visible {
	background: #1b84b8;
	border-color: #1b84b8;
	color: var(--ccu-white);
}

.ccu-tg-btn--lg {
	padding: 0.9em 1.7em;
	font-size: 1rem;
}
.ccu-tg-btn__suffix { font-weight: 400; opacity: 0.85; }
.ccu-tg-btn__handle {
	font-family: var(--ccu-font-mono);
	font-size: 0.85em;
	opacity: 0.9;
}

/* Transparent variant for sitting on light backgrounds next to other buttons. */
.ccu-tg-btn--ghost {
	background: transparent;
	color: #1b84b8;
	border-color: #229ed9;
}
.ccu-tg-btn--ghost:hover,
.ccu-tg-btn--ghost:focus-visible {
	background: rgba(34, 158, 217, 0.09);
	color: #166f9c;
	border-color: #1b84b8;
}

/* ------------------------------------------------------------------ panel -- */

.ccu-tg-panel {
	background: var(--ccu-ink);
	color: var(--ccu-cream);
	border-top: 3px solid #229ed9;
	padding-block: var(--ccu-space-16);
}
.ccu-tg-panel--light {
	background: var(--ccu-cream-deep);
	color: var(--ccu-ink);
	border-top-color: #229ed9;
}
.ccu-tg-panel__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ccu-space-2);
}
.ccu-tg-panel--center .ccu-tg-panel__inner {
	align-items: center;
	text-align: center;
}
.ccu-tg-panel__title {
	color: var(--ccu-white);
	margin-bottom: var(--ccu-space-2);
}
.ccu-tg-panel--light .ccu-tg-panel__title { color: var(--ccu-ink); }
.ccu-tg-panel__text {
	color: var(--ccu-steel-mist);
	max-width: 52ch;
	margin-bottom: var(--ccu-space-6);
}
.ccu-tg-panel--light .ccu-tg-panel__text { color: var(--ccu-steel); }
.ccu-tg-panel--center .ccu-tg-panel__text { margin-inline: auto; }
.ccu-tg-panel__handle {
	margin: var(--ccu-space-4) 0 0;
	font-family: var(--ccu-font-mono);
	font-size: var(--ccu-size-small);
	letter-spacing: 0.04em;
	color: var(--ccu-steel-mist);
}
.ccu-tg-panel__handle .ccu-tg-icon {
	display: inline-block;
	vertical-align: -0.18em;
	margin-right: 0.3em;
	color: #229ed9;
}
.ccu-tg-panel__handle span {
	color: var(--ccu-cream);
	font-weight: 600;
}
.ccu-tg-panel--light .ccu-tg-panel__handle span { color: var(--ccu-ink); }

/* ------------------------------------------------- inline prompt (products) -- */

.ccu-tg-inline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ccu-space-2) var(--ccu-space-4);
	margin: var(--ccu-space-8) 0 0;
	padding: var(--ccu-space-4);
	border: var(--ccu-border);
	border-left: 3px solid #229ed9;
	background: var(--ccu-white);
}
.ccu-tg-inline__text {
	margin: 0;
	font-weight: 600;
	font-size: var(--ccu-size-small);
	color: var(--ccu-ink);
}
.ccu-tg-inline__link {
	display: inline-flex;
	align-items: center;
	gap: var(--ccu-space-2);
	font-weight: 600;
	font-size: var(--ccu-size-small);
	color: #1b84b8;
	text-decoration: none;
}
.ccu-tg-inline__link .ccu-tg-icon { color: #229ed9; }
.ccu-tg-inline__link:hover,
.ccu-tg-inline__link:focus-visible {
	color: #166f9c;
	text-decoration: underline;
}
.ccu-tg-inline__arrow { font-weight: 400; }

/* --------------------------------------------------------- floating button -- */

.ccu-tg-fab {
	position: fixed;
	right: var(--ccu-space-6);
	bottom: var(--ccu-space-6);
	z-index: 90; /* under .ccu-header (100) — it must never paint over the sticky header */
	display: inline-flex;
	align-items: center;
	gap: var(--ccu-space-2);
	height: 56px;
	padding: 0 var(--ccu-space-5);
	background: #229ed9;
	color: var(--ccu-white);
	font-weight: 600;
	font-size: var(--ccu-size-small);
	line-height: 1.2;
	border-radius: 999px;
	box-shadow: 0 2px 6px rgba(28, 26, 23, 0.18), 0 10px 28px rgba(28, 26, 23, 0.16);
	text-decoration: none !important;
	transition: background 0.15s ease, transform 0.15s ease;
}
.ccu-tg-fab .ccu-tg-icon { width: 24px; height: 24px; }
.ccu-tg-fab:hover,
.ccu-tg-fab:focus-visible {
	background: #1b84b8;
	color: var(--ccu-white);
	transform: translateY(-1px);
}

/* ------------------------------------------------------------ header slot -- */

/* The wholesale hero stacks two CTAs vertically (the primary trade-account button
   plus this one) — the templates have no flex row for that, and an inline-flex
   sibling would otherwise sit shoulder-to-shoulder with the primary button. */
.ccu-page-hero .ccu-tg-btn {
	display: flex;
	width: fit-content;
	margin-top: var(--ccu-space-4);
}
/* Same two-CTA stack, inside the pallet page's ink CTA band (centred). */
.ccu-section--ink > .ccu-container > .ccu-tg-btn {
	display: flex;
	width: fit-content;
	margin: var(--ccu-space-4) auto 0;
}

/* In the top bar the button is text-only on Telegram-blue: the bar's own dark
   ink background plus a filled blue button next to it was too much weight for
   the smallest type on the page. */
.ccu-topbar .ccu-tg-btn {
	background: transparent;
	border: 0;
	padding: 0;
	color: var(--ccu-cream);
	font-size: inherit;
	font-weight: 600;
}
.ccu-topbar .ccu-tg-btn .ccu-tg-icon { color: #229ed9; }
.ccu-topbar .ccu-tg-btn:hover,
.ccu-topbar .ccu-tg-btn:focus-visible {
	background: transparent;
	color: var(--ccu-copper-tint);
}

/* In the sticky header the label is the first thing to go when space runs out. */
.ccu-tg-btn--compact {
	background: transparent;
	color: #1b84b8;
	border-color: #229ed9;
	padding: 0.45em 0.7em;
}
.ccu-tg-btn--compact .ccu-tg-icon { color: #229ed9; }
.ccu-tg-btn--compact:hover,
.ccu-tg-btn--compact:focus-visible {
	background: rgba(34, 158, 217, 0.09);
	color: #166f9c;
	border-color: #1b84b8;
}

/* ------------------------------------------------------------------ footer -- */

.ccu-footer .ccu-tg-btn {
	background: transparent;
	color: var(--ccu-cream);
	border-color: rgba(34, 158, 217, 0.65);
	padding: 0.55em 0.9em;
}
.ccu-footer .ccu-tg-btn .ccu-tg-icon { color: #229ed9; }
.ccu-footer .ccu-tg-btn:hover,
.ccu-footer .ccu-tg-btn:focus-visible {
	background: #229ed9;
	color: var(--ccu-white);
	border-color: #229ed9;
}
.ccu-footer__tg { margin-bottom: var(--ccu-space-6); }
.ccu-footer__tg p {
	margin: 0 0 var(--ccu-space-2);
	color: var(--ccu-steel-mist);
	font-size: var(--ccu-size-small);
}

/* ------------------------------------------------------------- responsive -- */

@media (max-width: 860px) {
	/* Nav is collapsed at this width and the header row is at its tightest
	   (this row caused a site-wide 6px overflow once before, see base.css). Icon
	   only — the accessible name stays on the link's aria-label. */
	.ccu-tg-btn--compact .ccu-tg-btn__label {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
	}
}

@media (max-width: 780px) {
	.ccu-tg-panel { padding-block: var(--ccu-space-12); }
}

@media (max-width: 600px) {
	/* Circle only — the label reappears on hover/focus-capable pointers, and the
	   aria-label carries it otherwise. Keeps the button out of the way of the
	   thumb-scroll area. */
	.ccu-tg-fab {
		right: var(--ccu-space-4);
		bottom: var(--ccu-space-4);
		width: 56px;
		height: 56px;
		padding: 0;
		justify-content: center;
	}
	.ccu-tg-fab__label {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
	}
	.ccu-tg-inline {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--ccu-space-2);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ccu-tg-btn,
	.ccu-tg-fab {
		transition: none;
	}
	.ccu-tg-fab:hover,
	.ccu-tg-fab:focus-visible {
		transform: none;
	}
}