/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */



 
/* Wrapper */
#wptwdclt-whatsapp-wrapper {
    position: fixed;
    font-family: Arial, sans-serif;
    z-index: 9999;
}
#wptwdclt-whatsapp-wrapper.bottom-right { bottom: 20px; right: 20px; }
#wptwdclt-whatsapp-wrapper.bottom-left  { bottom: 20px; left: 20px; }
#wptwdclt-whatsapp-wrapper.top-right    { top: 20px; right: 20px; }
#wptwdclt-whatsapp-wrapper.top-left     { top: 20px; left: 20px; }

/* Floating Button */

/* Floating Button */
#wptwdclt-whatsapp-button {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: #25D366; /* WhatsApp green */
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    transition: all 0.3s ease-in-out; /* Smooth animation */
    /* position: fixed; */
    /* z-index: 9999; */
}

/* WhatsApp Icon */
#wptwdclt-whatsapp-button img {
    width: 32px;
    height: 32px;
    transition: transform 0.3s ease-in-out;
}

/* Hover Effect */
#wptwdclt-whatsapp-button:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 18px rgba(37, 211, 102, 0.4);
    background: #20c659; /* slightly darker green */
}

#wptwdclt-whatsapp-button:hover img {
    transform: rotate(10deg) scale(1.1);
}


/* Chat Window */
#wptwdclt-whatsapp-chat {
    width: 320px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    margin-top: 10px;
    display: none;
    flex-direction: column;
}
#wptwdclt-whatsapp-chat.show   { display: flex; }
#wptwdclt-whatsapp-chat.hidden { display: none; }

.wptwdclt-chat-header {
    background: #25D366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border-radius: 8px 8px 0 0;
}
.wptwdclt-chat-header p {
  margin-bottom: 0px;
}
.wptwdclt-chat-avatar { width: 40px; height: 40px; border-radius: 50%; margin-right: 8px; }
.wptwdclt-chat-body   { padding: 15px; font-size: 14px; color: #333; }
.wptwdclt-chat-footer { padding: 10px; border-top: 1px solid #eee; text-align: center; }

.wptwdclt-chat-btn {
    display: inline-block;
    padding: 8px 12px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
}

#wptwdclt-close { cursor: pointer; font-size: 18px; }

.wptwdclt-account {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #f9f9f9;
	margin: 6px 0;
	padding: 6px 8px;
	border-radius: 5px;
	transition: background 0.3s ease;
}

.wptwdclt-account.online:hover {
	background: #eefaf1;
}

.wptwdclt-agent-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	margin-right: 8px;
	object-fit: cover;
}

.wptwdclt-agent-info {
	flex-grow: 1;
}

.wptwdclt-account-btn {
	display: inline-block;
	padding: 6px 12px;
	font-size: 13px;
	font-weight: 600;
	color: #fff;
	background: #25D366;
	border-radius: 4px;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.3s ease;
}

.wptwdclt-account-btn:hover {
	background: #20b85f;
}

.wptwdclt-account.offline {
	opacity: 0.6;
	pointer-events: none;
}

.wptwdclt-account.offline .wptwdclt-account-btn {
	display: none;
}

@media (max-width: 480px) {
	.wptwdclt-account {
		flex-direction: column;
		align-items: flex-start;
	}
	.wptwdclt-account-btn {
		width: 100%;
		text-align: center;
		margin-top: 6px;
	}
}


.wptwdclt-gdpr { font-size: 12px; margin-top: 10px; }

.wptwdclt_popup_txt { display: flex; gap: 10px; }
.wptwdclt_widget_btn_label { text-align: center; margin-top: 15px; }
.wptwdclt_hide { display: none !important; }

/* ===========================
   WooCommerce WhatsApp Button
   =========================== */

.whatsapp-contact { margin-top: 10px; border-radius: 10px; }
.whatsapp-contact a { border-radius: 10px !important; margin-top: 10px; }

.whatsapp-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #25D366;
  color: #fff;
  padding: 10px 10px;
  border-radius: 50px;
  text-decoration: none;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 500;
  box-shadow: 0 4px 10px rgba(37, 211, 102, 0.3);
  transition: all 0.25s ease-in-out;
}

.whatsapp-button:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 14px rgba(37, 211, 102, 0.4);
}
.whatsapp-button.disabled {
  pointer-events: none;
  opacity: 0.6;
}

.whatsapp-button .wa-icon,
.wptwdclt_btn_icon img {
    width: 30px;
    height: 30px;
    filter: brightness(0) invert(1);
    margin-right: 10px;
    margin-bottom: 10px;
}

.wptwdclt_btn_icon {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wptwdclt_logo {
  width: 28px;
  height: 28px;
}

.whatsapp-offline { color: #ccbaba; font-size: 14px; font-style: italic; margin-top: 10px; }

.wptwdclt_btn_txt     { display: flex; flex-direction: column; line-height: 1.3; }
.wptwdclt_acnt_info   { display: flex; flex-direction: column; line-height: 1.2; }
.wptwdclt_acnt_name   { font-weight: 600; font-size: 14px; color: #fff; }
.wptwdclt_acnt_status { font-size: 12px;   display: flex; align-items: center; gap: 6px; color: #e8f5e9; opacity: 0.8; }
.wptwdclt_btn_title   { font-size: 14px; font-weight: 500; }
.whatsapp-accounts{ width: max-content; }

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  border: 2px solid #fff;
  box-sizing: border-box;
}

.status-dot.online {
  background: #00e676;
}

.status-dot.offline {
  background: #ff5252;
}



/* fo ther testinggn */

/* Container for all accounts */
.whatsapp-accounts {
    /* display: flex; */
    flex-wrap: wrap;
    gap: 15px;
    justify-content: flex-start;
    margin: 20px 0;
}

/* Individual WhatsApp contact card */
.whatsapp-contact {
    flex: 1 1 250px;
    max-width: 300px;
}

/* Icon and info section */
.wptwdclt_btn_icon {
    display: flex;
    gap: 10px;
}

/* WhatsApp logo */
.wptwdclt_logo {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

/* Account info (name, status, title) */
.wptwdclt_acnt_info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wptwdclt_acnt_name {
    font-weight: 600;
    font-size: 16px;
    color: #fff;
}

.wptwdclt_acnt_status {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #fff;
    opacity: 0.85;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 5px;
    display: inline-block;
}

.status-dot.online {
    background-color: #00ff00;
}

.status-dot.offline {
    background-color: #ff4d4d;
}

/* Button title below the account name & status */
.wptwdclt_btn_title {
    font-weight: 500;
    font-size: 15px;
    color: #fff;
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .whatsapp-accounts {
        justify-content: center;
        gap: 12px;
    }
    
    .whatsapp-contact {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .wptwdclt_btn_icon {
        gap: 8px;
    }

    .wptwdclt__logo {
        width: 32px;
        height: 32px;
    }

    .wptwdclt__acnt_name {
        font-size: 15px;
    }

    .wptwdclt__btn_title {
        font-size: 14px;
    }
}



/* === Chat Wrapper === */
#wptwdclt-whatsapp-wrapper {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 9999;
	font-family: 'Inter', Arial, sans-serif;
}

/* === Floating Button === */
.wptwdclt_popup_txt {
	display: flex;
	align-items: center;
	cursor: pointer;
	color: #272626;
	border-radius: 50px;
	padding: 8px 12px;
	box-shadow: 0 4px 8px rgba(0,0,0,0.15);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wptwdclt_popup_txt:hover {
	transform: scale(1.05);
	box-shadow: 0 6px 12px rgba(0,0,0,0.25);
}

.wptwdclt_widget_btn_label span {
	font-size: 14px;
	margin-right: 8px;
}

#wptwdclt-whatsapp-button img {
	width: 28px;
	height: 28px;
}

/* === Chat Window === */
#wptwdclt-whatsapp-chat {
	position: absolute;
	bottom: 60px;
	right: 0;
	width: 320px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 5px 15px rgba(0,0,0,0.2);
	opacity: 0;
	transform: translateY(20px);
	pointer-events: none;
	transition: all 0.3s ease;
}

/* === Show (active) state === */
#wptwdclt-whatsapp-chat.show {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* === Header === */
.wptwdclt-chat-header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

.wptwdclt-chat-header img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

#wptwdclt-close {
	margin-left: auto;
	font-size: 18px;
	cursor: pointer;
	color: #fff;
	font-weight: bold;
	transition: opacity 0.2s ease;
}

#wptwdclt-close:hover {
	opacity: 0.8;
}

/* === Chat Body === */
.wptwdclt-chat-body {
	max-height: 400px;
	overflow-y: auto;
	padding: 10px;
}

/* === Agent Accounts === */
.wptwdclt-account {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #f9f9f9;
	margin: 6px 0;
	padding: 6px 8px;
	border-radius: 5px;
	transition: background 0.3s ease;
}

.wptwdclt-account.online:hover {
	background: #dbf8e2;
}

.wptwdclt-agent-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	margin-right: 8px;
	object-fit: cover;
}

.wptwdclt-agent-info {
	flex-grow: 1;
	font-size: 13px;
}

.wptwdclt-account-btn {
	display: inline-block;
	padding: 6px 12px;
	font-size: 13px;
	font-weight: 600;
	color: #fff;
	background: #25D366;
	border-radius: 4px;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.3s ease;
}

.wptwdclt-account-btn:hover {
	background: #20b85f;
}

.wptwdclt-account.offline {
	opacity: 0.6;
	pointer-events: none;
}

.wptwdclt-account.offline .wptwdclt-account-btn {
	display: none;
}

/* === GDPR Box === */
.wptwdclt-gdpr {
	margin-top: 10px;
	font-size: 12px;
	color: #555;
}

.wptwdclt-gdpr input {
	margin-right: 5px;
}

/* === Responsive === */
@media (max-width: 480px) {
	#wptwdclt-whatsapp-chat {
		width: 95vw;
		right: 2.5vw;
	}

	.wptwdclt-account {
		flex-direction: column;
		align-items: flex-start;
	}

	.wptwdclt-account-btn {
		width: 100%;
		text-align: center;
		margin-top: 6px;
	}
}