/**
 * Andy Strategic Contact Bar — styles.
 *
 * WHY these z-index values (9990 for the bar): high enough to sit above
 * virtually all theme content and sticky headers, but deliberately left
 * below 9999 so it never fights with modal/lightbox libraries (Fancybox,
 * WooCommerce quick-view, cookie-consent overlays) that commonly claim
 * the 9999+ range.
 */

.andy-scb-wrapper {
	position: fixed;
	z-index: 9990;
	display: flex;
	background: #ffffff;
	box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.12);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.andy-contact-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	transition: transform 0.15s ease, background-color 0.15s ease;
}

.andy-contact-btn:hover {
	transform: translateY(-2px);
}

.andy-scb-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.andy-scb-label {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.andy-scb-label strong {
	font-size: 12px;
	letter-spacing: 0.02em;
}

.andy-scb-label small {
	font-size: 11px;
	opacity: 0.75;
	font-weight: 400;
}

/* Brand colors: red for phone (matches the site's existing hotline CTA),
   blue for Zalo (matches Zalo's own brand blue for instant recognition). */
.andy-scb-phone {
	color: #e02424;
}
.andy-scb-phone:hover {
	background-color: #fdecec;
}

.andy-scb-zalo {
	color: #0068ff;
}
.andy-scb-zalo:hover {
	background-color: #e8f1ff;
}

.andy-scb-divider {
	background: #eee;
}

/* ==========================================================================
   MOBILE (< 768px): sticky bottom bar, full width, evenly distributed row
   ========================================================================== */
@media (max-width: 767px) {
	.andy-scb-wrapper {
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		flex-direction: row;
		border-radius: 16px 16px 0 0;
		/* Prevents the iPhone home-indicator area from overlapping the
		   bar's tap targets on notched devices. */
		padding-bottom: env(safe-area-inset-bottom);
	}

	.andy-contact-btn {
		flex: 1 1 50%;
		flex-direction: column;
		gap: 4px;
		padding: 10px 8px 12px;
	}

	.andy-scb-divider {
		width: 1px;
		align-self: stretch;
		margin: 10px 0;
	}

	.andy-scb-label {
		align-items: center;
		text-align: center;
	}
}

/* ==========================================================================
   DESKTOP (>= 768px): floating vertical bar, right edge, mid-viewport
   ========================================================================== */
@media (min-width: 768px) {
	.andy-scb-wrapper {
		right: 20px;
		top: 75vh;
		transform: translateY(-50%);
		flex-direction: column;
		border-radius: 14px;
		overflow: hidden;
		min-width: 168px;
	}

	.andy-contact-btn {
		flex-direction: row;
		gap: 10px;
		padding: 14px 16px;
		justify-content: flex-start;
	}

	.andy-scb-label {
		align-items: flex-start;
		text-align: left;
	}

	.andy-scb-divider {
		height: 1px;
		width: 100%;
	}

	.andy-contact-btn:hover {
		transform: translateX(-3px);
	}
}