/* ==========================================================================
   AFFANECOM - WhatsApp float
   ========================================================================== */

.affan-wa{
	position:fixed;
	right:22px;
	bottom:22px;
	z-index:9990;
	display:inline-flex;
	align-items:center;
	gap:11px;
	padding:14px 24px 14px 20px;
	border-radius:999px;
	background:#25D366;
	color:#fff !important;
	font-family:"Inter",sans-serif;
	font-size:16px;
	font-weight:700;
	line-height:1;
	text-decoration:none !important;
	box-shadow:0 8px 24px rgba(37,37,37,.20);
	transition:transform .18s cubic-bezier(.22,.61,.36,1),
	           box-shadow .18s cubic-bezier(.22,.61,.36,1),
	           background-color .18s ease;
}
.affan-wa:hover,
.affan-wa:focus-visible{
	background:#1FBE5B;
	color:#fff !important;
	transform:translateY(-2px);
	box-shadow:0 12px 30px rgba(37,37,37,.26);
}
.affan-wa:focus-visible{
	outline:3px solid #252525;
	outline-offset:3px;
}

.affan-wa__icon{
	width:26px;
	height:26px;
	flex:none;
	display:block;
}
.affan-wa__label{ white-space:nowrap; }

/* Keep Astra's back-to-top clear of the button rather than stacked on it. */
#ast-scroll-top{
	right:26px !important;
	bottom:92px !important;
}

/* Collapse to a circle where the label would crowd the screen. */
@media (max-width:600px){
	.affan-wa{
		right:16px;
		bottom:16px;
		padding:0;
		width:56px;
		height:56px;
		justify-content:center;
		gap:0;
	}
	.affan-wa__label{
		position:absolute !important;
		width:1px;
		height:1px;
		overflow:hidden;
		clip:rect(0 0 0 0);
		clip-path:inset(50%);
		white-space:nowrap;
	}
	#ast-scroll-top{
		right:20px !important;
		bottom:84px !important;
	}
}

/* The cart and checkout already have a single clear action; a floating button
   competing with "Place order" costs conversions more than it helps. */
.woocommerce-checkout .affan-wa{ display:none; }

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

@media (prefers-reduced-motion:reduce){
	.affan-wa{ transition:none; }
	.affan-wa:hover{ transform:none; }
}

/* ==========================================================================
   Back to top
   Astra ships a blue square with a chevron glyph. Restyled as a white circle
   with a line arrow. The chevron is swapped out via a background image rather
   than JS, because Astra's markup hard-codes its own SVG path.
   ========================================================================== */
#ast-scroll-top{
	width:48px !important;
	height:48px !important;
	padding:0 !important;
	border-radius:50% !important;
	border:1px solid #E6E6E2 !important;
	background-color:#fff !important;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23252525' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5'/%3E%3Cpath d='m5 12 7-7 7 7'/%3E%3C/svg%3E") !important;
	background-repeat:no-repeat !important;
	background-position:center center !important;
	background-size:18px 18px !important;
	box-shadow:0 6px 18px rgba(37,37,37,.13) !important;
	color:#252525 !important;
	cursor:pointer;
	transition:background-color .18s ease, border-color .18s ease,
	           transform .18s cubic-bezier(.22,.61,.36,1), box-shadow .18s ease !important;
}

/* Astra's own chevron. */
#ast-scroll-top .ast-icon,
#ast-scroll-top .ast-arrow-svg{
	display:none !important;
}
#ast-scroll-top .screen-reader-text{
	position:absolute !important;
	width:1px;
	height:1px;
	overflow:hidden;
	clip:rect(0 0 0 0);
	clip-path:inset(50%);
	white-space:nowrap;
}

#ast-scroll-top:hover,
#ast-scroll-top:focus-visible{
	background-color:#252525 !important;
	border-color:#252525 !important;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5'/%3E%3Cpath d='m5 12 7-7 7 7'/%3E%3C/svg%3E") !important;
	transform:translateY(-2px);
	box-shadow:0 10px 24px rgba(37,37,37,.20) !important;
}
#ast-scroll-top:focus-visible{
	outline:3px solid #F47C20 !important;
	outline-offset:3px;
}

@media (max-width:600px){
	#ast-scroll-top{
		width:42px !important;
		height:42px !important;
		background-size:16px 16px !important;
	}
}

@media (prefers-reduced-motion:reduce){
	#ast-scroll-top{ transition:none !important; }
	#ast-scroll-top:hover{ transform:none; }
}