/* ==========================================================================
   FILE: assets/css/whatsapp-order.css
   PURPOSE: Styles the WhatsApp "Chat & order instantly" button + quick-
   message chips on the single product page — ported 1:1 from the
   user's own Shopify (Liquid) version's inline <style> block, just with
   tk- classes renamed to dc- to match this project's naming.
   Loaded only on single product pages — see functions.php section 33.
   ========================================================================== */

.dc-wab-wrap {
	max-width: 600px;
	margin: 0 auto 16px;
	padding: 0 2px;
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

@keyframes dcWabPulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba( 37, 211, 102, .35 ); }
	50% { box-shadow: 0 0 0 8px rgba( 37, 211, 102, 0 ); }
}
@keyframes dcWabWiggle {
	0%, 100% { transform: rotate( 0deg ); }
	25% { transform: rotate( -8deg ); }
	75% { transform: rotate( 8deg ); }
}
@keyframes dcWabShimmer {
	0% { transform: translateX( -120% ); }
	100% { transform: translateX( 220% ); }
}

.dc-wab-btn {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 50px;
	padding: 0 16px;
	box-sizing: border-box;
	border: 1px solid #ddd;
	border-radius: 12px;
	background: #fff;
	text-decoration: none;
	animation: dcWabPulse 2.4s ease-in-out infinite;
	transition: border-color .25s ease, background .25s ease, transform .2s ease;
}
.dc-wab-btn:hover {
	border-color: #25D366;
	background: #f7fdf9;
	transform: translateY( -1px );
}
.dc-wab-btn::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 35%;
	height: 100%;
	background: linear-gradient( 100deg, transparent, rgba( 37, 211, 102, .14 ), transparent );
	animation: dcWabShimmer 3.5s ease-in-out infinite;
	pointer-events: none;
}
.dc-wab-left {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	position: relative;
	z-index: 1;
}
.dc-wab-icon-wrap {
	display: flex;
	animation: dcWabWiggle 2.2s ease-in-out infinite;
	transform-origin: 60% 60%;
}
.dc-wab-text {
	font-size: 14px;
	font-weight: 600;
	color: #111;
	white-space: nowrap;
}
.dc-wab-arrow {
	flex-shrink: 0;
	color: #999;
	position: relative;
	z-index: 1;
	transition: transform .25s ease, color .25s ease;
}
.dc-wab-btn:hover .dc-wab-arrow {
	transform: translateX( 4px );
	color: #25D366;
}

.dc-wab-chips {
	display: flex;
	gap: 8px;
	margin-top: 10px;
	flex-wrap: wrap;
}
.dc-wab-chip {
	padding: 7px 13px;
	border-radius: 999px;
	background: #f7f7f5;
	border: 1px solid #e2e2de;
	font-size: 11.5px;
	color: #555;
	text-decoration: none;
	white-space: nowrap;
	transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.dc-wab-chip:hover {
	background: #f0faf3;
	border-color: #25D366;
	color: #111;
}

@media (max-width: 749px) {
	.dc-wab-btn { height: 46px; padding: 0 14px; }
	.dc-wab-text { font-size: 13px; }
	.dc-wab-chip { font-size: 10.5px; padding: 6px 11px; }
}
@media (prefers-reduced-motion: reduce) {
	.dc-wab-btn, .dc-wab-icon-wrap, .dc-wab-btn::before { animation: none; }
}