/*
 * Site-wide tweaks (loaded on every page by mu-plugins/skf-sitewide.php).
 * Floating contact buttons and the "Next Shipping in" countdown sit in the bottom-right corner,
 * out of the way of page content, and the buttons always show their brand colour.
 * Theme's Custom.css loads after this file, so selectors are deliberately stronger.
 */

/* ---------- Contact buttons (.RightSocial in footer.php) ---------- */
html body .RightSocial {
	top: auto !important; left: auto !important;
	right: 20px !important; bottom: 97px !important; /* sits above the countdown pill */
	display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}
html body .RightSocial .Social { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
html body .RightSocial .Social a,
html body .RightSocial .CartIcon {
	right: 0 !important; margin: 0 !important; padding: 0 !important;
	width: 48px; height: 48px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: var(--custom_color, #3d3b3d) !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
	transition: transform .15s ease, box-shadow .15s ease;
}
html body .RightSocial .Social a .Icon { width: auto; height: auto; line-height: 0; display: grid; place-items: center; }
html body .RightSocial .Social a .Icon svg { width: 22px; height: 22px; }
/* Label: hidden, shown as a pill to the left on hover / keyboard focus. */
html body .RightSocial .Social a span {
	position: absolute; right: 58px; top: 50%; transform: translateY(-50%) translateX(6px);
	padding: 6px 12px !important; border-radius: 999px; white-space: nowrap;
	background: var(--custom_color, #3d3b3d); color: #fff; font-size: 14px; line-height: 1.2; font-family: Poppins, Arial, sans-serif !important; font-weight: 500;
	opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease;
}
html body .RightSocial .Social a:hover,
html body .RightSocial .Social a:focus-visible { right: 0 !important; transform: scale(1.08); box-shadow: 0 6px 18px rgba(0, 0, 0, .28); }
html body .RightSocial .Social a:hover span,
html body .RightSocial .Social a:focus-visible span { opacity: 1; transform: translateY(-50%) translateX(0); }
html body .RightSocial .Social a:focus-visible { outline: 2px solid #fbba18; outline-offset: 2px; }

/* ---------- "Next Shipping in" countdown (iframe #CountdowunIframe) ---------- */
@media (min-width: 769px) {
	html body #CountdowunIframe {
		left: auto !important; right: 20px !important; bottom: 20px !important; margin: 0 !important;
		width: 274px !important; height: 65px !important;
	}
}

/* ---------- Phones / small tablets: countdown is a slim full-width bar at the bottom ---------- */
@media (max-width: 768px) {
	html body .RightSocial { right: 12px !important; bottom: 49px !important; gap: 8px; }
	html body .RightSocial .Social { gap: 8px; }
	html body .RightSocial .Social a, html body .RightSocial .CartIcon { width: 44px; height: 44px; }
	html body .RightSocial .Social a .Icon svg { width: 20px; height: 20px; }
	html body .RightSocial .Social a span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	html body .RightSocial .Social a, html body .RightSocial .Social a span { transition: none; }
}

/* Phones: WhatsApp only (the other contact buttons stay on desktop). */
@media (max-width: 768px) {
	html body .RightSocial .Social a:not([href*="wa.me"]):not([href*="whatsapp"]) { display: none !important; }
	html body .RightSocial .Social a[href*="wa.me"], html body .RightSocial .Social a[href*="whatsapp"] { width: 54px; height: 54px; }
	html body .RightSocial .Social a[href*="wa.me"] .Icon svg, html body .RightSocial .Social a[href*="whatsapp"] .Icon svg { width: 26px; height: 26px; }
}