/**
 * Design 6 - Professional Compact Banner
 * 
 * Following WordPress CSS Coding Standards
 * @link https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/
 * 
 * Clean, compact, professional design with no wasted space
 * Optimized for mobile and desktop
 */

/* ==========================================================================
   Design 6 - Base Styles
   ========================================================================== */

.whatsapp-chat-widget.design-6 {
	background: transparent;
	border: 0;
	box-shadow: none;
	display: block;
	height: auto;
	margin: 0;
	min-height: auto;
	opacity: 1;
	padding: 0;
	position: fixed;
	visibility: visible;
	width: auto;
	z-index: 999999;
}

.whatsapp-chat-widget.design-6 .whatsapp-button {
	align-items: center;
	background: transparent !important;
	border: 0 !important;
	color: #fff !important;
	cursor: pointer;
	display: block;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	line-height: 1;
	min-height: 64px;
	padding: 0 !important;
	position: fixed;
	text-decoration: none !important;
	transition: all 0.3s ease !important;
	width: 275px;
	z-index: 100000;
}

/* ==========================================================================
   Container Wrapper
   ========================================================================== */

.whatsapp-design6-wrapper {
	position: relative;
	width: 100%;
}

.whatsapp-design6-container {
	align-items: center;
	background: var(--design6-bg-color, linear-gradient(135deg, #25d366 0%, #22c55e 100%));
	border-radius: 60px;
	box-shadow: 0 6px 16px rgba(37, 211, 102, 0.28);
	cursor: pointer;
	display: flex;
	min-height: 64px;
	padding: 0;
	position: relative;
	transition: all 0.3s ease;
	width: 100%;
}

/* ==========================================================================
   Avatar Circle - Left Side
   ========================================================================== */

.whatsapp-design6-avatar-container {
	flex-shrink: 0;
	height: 70px;
	left: -8px;
	margin-right: -8px;
	position: relative;
	width: 70px;
	z-index: 3;
}

.whatsapp-design6-avatar {
	background: #fff;
	border: 3px solid #fff;
	border-radius: 50%;
	height: 70px;
	overflow: hidden;
	position: relative;
	width: 70px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
	transition: transform 0.3s ease;
}

.whatsapp-design6-avatar-wrap {
	border-radius: 50%;
	height: 100%;
	width: 100%;
}

.whatsapp-design6-avatar-default {
	align-items: center;
	background: var(--design6-bg-color, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
	border-radius: 50%;
	color: #fff;
	display: flex;
	font-size: 26px;
	font-weight: 700;
	height: 100%;
	justify-content: center;
	width: 100%;
}

/* ==========================================================================
   WhatsApp Badge - Small Green Icon
   ========================================================================== */

.whatsapp-design6-whatsapp-icon {
	align-items: center;
	background: #25d366;
	border: 2.5px solid #fff;
	border-radius: 50%;
	bottom: 2px;
	box-shadow: 0 2px 6px rgba(37, 211, 102, 0.35);
	display: flex;
	height: 26px;
	justify-content: center;
	position: absolute;
	right: 2px;
	width: 26px;
	z-index: 4;
}

.whatsapp-design6-whatsapp-icon::after {
	background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NzguMTY1IDQ3OC4xNjUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQ3OC4xNjUgNDc4LjE2NSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMiIgaGVpZ2h0PSI1MTIiPjxwYXRoIGQ9Ik00NzguMTY1IDIzMi45NDZjMCAxMjguNTY3LTEwNS4wNTcgMjMyLjk2Ni0yMzQuNjc5IDIzMi45NjYtNDEuMTAyIDAtNzkuODE0LTEwLjU5OS0xMTMuNDQ1LTI4Ljk2OUwwIDQ3OC4xNjVsNDIuNDM3LTEyNS4wNGMtMjEuNDM4LTM1LjA2NS0zMy43Ny03Ni4yMDctMzMuNzctMTIwLjE1OUM4LjY2NyAxMDQuMzQgMTEzLjc2MyAwIDI0My40ODUgMGMxMjkuNjIzIDAgMjM0LjY4IDEwNC4zNCAyMzQuNjggMjMyLjk0NnpNMjQzLjQ4NSAzNy4wOThjLTEwOC44MDIgMC0xOTcuNDIyIDg3LjgwMy0xOTcuNDIyIDE5NS44NjggMCA0Mi45MTUgMTMuOTg2IDgyLjYwMyAzNy41NzYgMTE0Ljg3OWwtMjQuNTg2IDcyLjU0MiA3NS44NDktMjMuOTY4YzMxLjEyMSAyMC40ODEgNjguNDU3IDMyLjI5NiAxMDguNTgzIDMyLjI5NiAxMDguNzIzIDAgMTk3LjMyMy04Ny44NDMgMTk3LjMyMy0xOTUuOTA4IDAtMTA3Ljg4Ni04OC42LTE5NS43MDktMTk3LjMyMy0xOTUuNzA5ek0zNjEuOTMxIDI4Ni42MmMtMS4zOTUtMi4zMzEtNS4yMi0zLjc0Ni0xMC44OTgtNi44MTQtNS45MTctMi44NDktMzQuMDg5LTE2LjQ5Ny0zOS41MDgtMTguMzctNS4xNi0xLjkxMy04Ljk4Ni0yLjg0OS0xMi44MTEgMi44MjktNC4wMDUgNS42MzgtMTQuOTAzIDE4LjYyOS0xOC4yMyAyMi4zNTQtMy41NDYgMy43ODUtNi44NTQgNC4yNjQtMTIuNTUyIDEuNDM1LTUuNjE4LTIuODA5LTI0LjI2Ny04Ljg2Ni00Ni4yMDMtMjguMzkxLTE3LjA1NS0xNS4wNDItMjguNjctMzMuNzExLTMxLjk5Ny0zOS41MDgtMy40MjctNS43NTgtLjM5OC04LjgyNiAyLjQ3MS0xMS42MzUgMi42OS0yLjU5IDUuNzc4LTYuNzM0IDguNjI3LTEwLjA0MSAyLjk2OS0zLjI4NyAzLjkwNS01LjYzOCA1Ljc5OC05LjQyNCAxLjkxMy0zLjkwNS45MzYtNy4xOTItLjQ3OC0xMC4xNDEtMS40MTUtMi44NDktMTMuMDEtMzAuODgxLTE3Ljc1Mi00Mi4zMzctNC44NDEtMTEuNDE2LTkuNTQzLTkuNTIzLTEyLjg3MS05LjUyMy0zLjQ2NyAwLTcuMjEyLS40NzgtMTEuMTE3LS40NzgtMy43ODUgMC0xMC4wNDEgMS4zOTUtMTUuMzgxIDcuMTkyLTUuMiA1LjY1OC0yMC4xMjMgMTkuNDY1LTIwLjEyMyA0Ny41OTcgMCAyOC4wNTIgMjAuNjAxIDU1LjMwOCAyMy41NSA1OS4wNTMgMi44NjkgMy43ODUgMzkuNzQ3IDYzLjE5NyA5OC4zMDMgODYuMDcgNTguNDc2IDIyLjg3MiA1OC40NzYgMTUuMzIxIDY5LjExNSAxNC4zNjUgMTAuMzgtLjk1NiAzNC4wNjktMTMuODY3IDM4LjgxMS0yNy4wOTYgNC42Ni0xMy40NSA0LjY2LTI0Ljc2NiAzLjI0Ni0yNy4xMzd6IiBmaWxsPSIjRkZGRkZGIi8+PC9zdmc+') center center no-repeat;
	background-size: 15px 15px;
	content: "";
	display: block;
	height: 100%;
	width: 100%;
}

/* ==========================================================================
   Green Banner - Text Content Area
   ========================================================================== */

.whatsapp-design6-banner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 19px 0 9px;
	position: relative;
	width: 100%;
	z-index: 2;
}

.whatsapp-design6-banner-content {
	display: flex;
	flex-direction: column;
	gap: 3px;
	position: relative;
}

/* ==========================================================================
   Name and Status Row - Primary Text Line (Big Bold Name)
   ========================================================================== */

.whatsapp-design6-name-row {
	align-items: center;
	display: flex;
	gap: 8px;
	margin: 0;
}

.whatsapp-design6-agent-name {
	color: var(--design6-name-color, #fff);
	display: inline-block;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.3px;
	line-height: 1.2;
}

.whatsapp-design6-online-badge {
	background: rgba(255, 255, 255, 0.3);
	border-radius: 10px;
	color: var(--design6-status-color, #000);
	display: inline-block;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.3px;
	padding: 3px 7px;
	text-transform: capitalize;
}

/* ==========================================================================
   Message Text - Secondary Line (Smaller Lighter Text)
   ========================================================================== */

.whatsapp-design6-message-text {
	color: var(--design6-text-color, rgba(255, 255, 255, 0.92));
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	margin: 0;
	padding: 0;
}

/* ==========================================================================
   Hover Effects - Professional Interactions
   ========================================================================== */

.whatsapp-chat-widget.design-6 .whatsapp-button:hover {
	transform: translateY(-2px) !important;
}

.whatsapp-chat-widget.design-6 .whatsapp-button:hover .whatsapp-design6-container {
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
	filter: brightness(0.95);
}

.whatsapp-chat-widget.design-6 .whatsapp-button:hover .whatsapp-design6-avatar {
	box-shadow: 0 5px 14px rgba(0, 0, 0, 0.15);
	transform: scale(1.05);
}

/* ==========================================================================
   Cleanup - Remove Deprecated Styles
   ========================================================================== */

.whatsapp-design6-message-row {
	display: contents;
}

.whatsapp-design6-banner::after {
	display: none;
}