/* ==========================================================================
   WhatsApp Business line (+90 549 581 65 59) -- v2026-10
   Loaded after main.css on every page; behaviour in assets/js/whatsapp.js.

   Pieces:
     .wa-fab           fixed "WhatsApp'tan yazın" button, bottom-right, every page
     .btn--whatsapp    the inline "WhatsApp'tan bilgi al" button next to Teklif Al
     .wa-alt           the "you can also write to us on WhatsApp" note above the
                       contact / quote forms
   Colours: #075E54 is WhatsApp's dark brand green -- white text on it measures
   7.7:1, the lighter #25D366 would only reach 1.9:1 and fail WCAG AA.
   No animation, no auto-open: it is a plain link that works without JS.
   ========================================================================== */
.wa-fab {
	position: fixed;
	inset-block-end: 20px;
	inset-inline-end: 20px;
	z-index: 890; /* under .quote-list-fab (900) and every overlay (1000+), like that button */
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding-block: 12px;
	padding-inline: 16px 20px;
	max-width: calc(100vw - 40px);
	background: #075E54;
	color: var(--eurotherm-white);
	border-radius: var(--radius-pill);
	font-weight: 700;
	font-size: 0.9rem;
	line-height: 1.2;
	text-decoration: none;
	box-shadow: var(--shadow-modal);
	transition: background 150ms ease;
}
.wa-fab:hover,
.wa-fab:focus-visible {
	background: #04433C;
	color: var(--eurotherm-white);
	text-decoration: none;
}
.wa-fab:focus-visible {
	outline: 3px solid var(--brand-dark);
	outline-offset: 3px;
}
.wa-fab__icon {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	fill: currentColor;
}
.wa-fab__label { white-space: nowrap; }

/* The quote-list button shares the corner: stack it above the WhatsApp
   button, flush with the same right edge (main.css moves it to 14px on
   small screens; both buttons now sit at 20px at every width). */
.quote-list-fab {
	inset-block-end: 80px;
	inset-inline-end: 20px;
}

/* Inline button in the product CTA row and the form notes: the existing
   outline button plus the glyph. */
.btn--whatsapp { gap: 8px; }
.btn__wa-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	fill: #128C7E;
}
.btn--whatsapp:hover .btn__wa-icon,
.btn--whatsapp:focus-visible .btn__wa-icon { fill: currentColor; }

/* Note above the contact / quote forms. */
.wa-alt {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	padding: 14px 16px;
	margin-block: 0 20px;
	background: var(--eurotherm-grey-light);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-box);
}
.wa-alt__text {
	margin: 0;
	font-size: 0.92rem;
	color: #333;
}
.wa-alt .btn--whatsapp { min-height: 44px; } /* keeps the small button a full touch target */

/* Keep the button out of the way of the open mobile menu / search panel.
   (:has() is a progressive enhancement -- older browsers just keep the
   button visible, which is harmless.) */
body:has(.site-header__nav.is-open) .wa-fab,
body:has(.site-header__search-toggle[aria-expanded="true"]) .wa-fab {
	display: none;
}

@media (max-width: 600px) {
	.wa-fab {
		font-size: 0.85rem;
		padding-inline: 14px 16px;
	}
	/* let the footer's legal links scroll clear of the fixed button */
	.site-footer__bottom { padding-block-end: 76px; }
}

@media print {
	.wa-fab { display: none; }
}