/* =========================================================
   Contact Button – Frontend Widget
   ========================================================= */

/* ── Scoped reset — prevents WordPress themes overriding shapes/colors ── */
#cb-widget *,
#cb-widget *::before,
#cb-widget *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* Kill any theme button styles (red borders, rectangles, etc.) */
#cb-widget button {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	font-family: inherit;
	line-height: 1;
	cursor: pointer;
	background: none;
	border: none;
	outline: none;
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Kill Firefox inner dotted border */
#cb-widget button::-moz-focus-inner {
	border: 0;
	padding: 0;
}

/* Kill any theme focus outlines */
#cb-widget button:focus,
#cb-widget button:active,
#cb-widget a:focus,
#cb-widget a:active {
	outline: none !important;
	box-shadow: none !important;
}

/* ── Widget container ── */
#cb-widget {
	position: fixed;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	pointer-events: none;
}

/* ── Positions ── */
#cb-widget.cb-position-bottom-right {
	bottom: var(--cb-offset-y, 20px);
	right:  var(--cb-offset-x, 20px);
}
#cb-widget.cb-position-bottom-left {
	bottom: var(--cb-offset-y, 20px);
	left:   var(--cb-offset-x, 20px);
	align-items: flex-start;
}
#cb-widget.cb-position-top-right {
	top:   var(--cb-offset-y, 20px);
	right: var(--cb-offset-x, 20px);
	flex-direction: column-reverse;
}
#cb-widget.cb-position-top-left {
	top:  var(--cb-offset-y, 20px);
	left: var(--cb-offset-x, 20px);
	flex-direction: column-reverse;
	align-items: flex-start;
}

/* ── Visibility ── */
@media (max-width: 768px) {
	#cb-widget.cb-hide-mobile { display: none !important; }
}
@media (min-width: 769px) {
	#cb-widget.cb-hide-desktop { display: none !important; }
}

/* ── Main button ── */
#cb-widget .cb-main-btn {
	position: relative;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 50% !important;
	border: none !important;
	outline: none !important;
	cursor: pointer;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	flex-shrink: 0;
	padding: 0 !important;
	color: #fff;
	pointer-events: auto;
	-webkit-tap-highlight-color: transparent;
}
#cb-widget .cb-main-btn:hover {
	transform: scale(1.08);
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.34);
}
#cb-widget .cb-main-btn:focus-visible {
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.7), 0 0 0 5px rgba(0, 0, 0, 0.3);
}
#cb-widget .cb-main-btn svg {
	width: 26px;
	height: 26px;
	pointer-events: none;
	display: block;
}
#cb-widget .cb-main-btn .cb-icon-open,
#cb-widget .cb-main-btn .cb-icon-close {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.3s ease, transform 0.3s ease;
}
#cb-widget .cb-main-btn .cb-icon-open  { opacity: 1; transform: rotate(0deg);  }
#cb-widget .cb-main-btn .cb-icon-close { opacity: 0; transform: rotate(-90deg); }

#cb-widget.cb-open .cb-main-btn .cb-icon-open  { opacity: 0; transform: rotate(90deg); }
#cb-widget.cb-open .cb-main-btn .cb-icon-close { opacity: 1; transform: rotate(0deg); }

/* ── Items container ── */
#cb-widget .cb-items {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 14px;
	align-items: flex-end;
	pointer-events: none;
}
#cb-widget.cb-position-bottom-left .cb-items,
#cb-widget.cb-position-top-left    .cb-items { align-items: flex-start; }

#cb-widget.cb-position-top-right .cb-items,
#cb-widget.cb-position-top-left  .cb-items {
	margin-bottom: 0;
	margin-top: 14px;
}

/* ── Individual item wrapper ── */
#cb-widget .cb-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	pointer-events: auto;
}
#cb-widget.cb-position-bottom-left .cb-item,
#cb-widget.cb-position-top-left    .cb-item { flex-direction: row-reverse; }

/* ── Child button — forced circular, no theme leakage ── */
#cb-widget .cb-item-btn {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 48px !important;
	height: 48px !important;
	min-width: 48px !important;
	min-height: 48px !important;
	border-radius: 50% !important;
	border: none !important;
	outline: none !important;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22) !important;
	color: #fff !important;
	flex-shrink: 0;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	padding: 0 !important;
	-webkit-tap-highlight-color: transparent;
	background-clip: padding-box;
}
#cb-widget .cb-item-btn:hover {
	transform: scale(1.1);
	box-shadow: 0 5px 18px rgba(0, 0, 0, 0.3) !important;
}
#cb-widget .cb-item-btn:focus-visible {
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.8), 0 3px 10px rgba(0, 0, 0, 0.22) !important;
}
#cb-widget .cb-item-btn svg {
	width: 22px !important;
	height: 22px !important;
	display: block;
	pointer-events: none;
	fill: currentColor;
}

/* ── Tooltip ── */
#cb-widget .cb-item-tooltip {
	background: rgba(30, 30, 30, 0.82);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	color: #fff;
	padding: 5px 11px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
	pointer-events: none;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	letter-spacing: 0.01em;
	line-height: 1.4;
}

/* ── Animations ── */

/* Scale (default) */
#cb-widget.cb-anim-scale .cb-item {
	transform: scale(0.4) translateY(12px);
	opacity: 0;
	transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.18s ease;
	pointer-events: none;
}
#cb-widget.cb-anim-scale.cb-open .cb-item {
	transform: scale(1) translateY(0);
	opacity: 1;
	pointer-events: auto;
}

/* Fade */
#cb-widget.cb-anim-fade .cb-item {
	opacity: 0;
	transition: opacity 0.2s ease;
	pointer-events: none;
}
#cb-widget.cb-anim-fade.cb-open .cb-item {
	opacity: 1;
	pointer-events: auto;
}

/* Slide */
#cb-widget.cb-anim-slide .cb-item {
	transform: translateY(16px);
	opacity: 0;
	transition: transform 0.22s ease, opacity 0.2s ease;
	pointer-events: none;
}
#cb-widget.cb-anim-slide.cb-open .cb-item {
	transform: translateY(0);
	opacity: 1;
	pointer-events: auto;
}

/* Staggered delay */
#cb-widget.cb-open .cb-item:nth-child(1) { transition-delay: 0.02s; }
#cb-widget.cb-open .cb-item:nth-child(2) { transition-delay: 0.06s; }
#cb-widget.cb-open .cb-item:nth-child(3) { transition-delay: 0.10s; }
#cb-widget.cb-open .cb-item:nth-child(4) { transition-delay: 0.14s; }
#cb-widget.cb-open .cb-item:nth-child(5) { transition-delay: 0.18s; }
#cb-widget.cb-open .cb-item:nth-child(6) { transition-delay: 0.22s; }
#cb-widget.cb-open .cb-item:nth-child(7) { transition-delay: 0.26s; }
#cb-widget.cb-open .cb-item:nth-child(8) { transition-delay: 0.30s; }

/* ── Popup cards ── */
#cb-widget .cb-popup {
	position: absolute;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(0, 0, 0, 0.08);
	padding: 14px 16px;
	min-width: 210px;
	right: calc(100% + 12px);
	bottom: 0;
	z-index: 10;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	animation: cb-popup-in 0.18s ease;
	color: #1a1a1a;
	border: none;
}

/* Flip to right side for left-aligned widget */
#cb-widget.cb-position-bottom-left .cb-popup,
#cb-widget.cb-position-top-left    .cb-popup {
	right: auto;
	left: calc(100% + 12px);
}

/* Flip vertically for top positions */
#cb-widget.cb-position-top-right .cb-popup,
#cb-widget.cb-position-top-left  .cb-popup {
	bottom: auto;
	top: 0;
}

@keyframes cb-popup-in {
	from { opacity: 0; transform: scale(0.92) translateY(6px); }
	to   { opacity: 1; transform: scale(1)    translateY(0); }
}

#cb-widget .cb-popup-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}
#cb-widget .cb-popup-label {
	font-weight: 600;
	font-size: 14px;
	color: #1a1a1a;
}
#cb-widget .cb-popup-close {
	background: none !important;
	border: none !important;
	outline: none !important;
	cursor: pointer;
	color: #999;
	padding: 3px !important;
	display: flex;
	align-items: center;
	border-radius: 5px;
	transition: color 0.15s, background 0.15s;
	box-shadow: none !important;
}
#cb-widget .cb-popup-close:hover { color: #333; background: #f2f2f2 !important; }
#cb-widget .cb-popup-close svg { width: 17px !important; height: 17px !important; fill: currentColor; }

/* Phone popup */
#cb-widget .cb-phone-link {
	display: block;
	font-size: 19px;
	font-weight: 700;
	color: #1a1a1a;
	text-decoration: none;
	margin-bottom: 10px;
	letter-spacing: -0.3px;
}
#cb-widget .cb-phone-link:hover { color: #0073aa; }

#cb-widget .cb-call-btn {
	display: block;
	width: 100%;
	padding: 9px !important;
	border-radius: 9px !important;
	border: none !important;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	transition: filter 0.15s;
	color: #fff !important;
	background-color: #4CAF50;
	box-shadow: none !important;
}
#cb-widget .cb-call-btn:hover { filter: brightness(0.9); color: #fff !important; }

/* WeChat popup */
#cb-widget .cb-wechat-qr {
	display: block;
	width: 160px;
	height: 160px;
	object-fit: contain;
	margin: 0 auto 10px;
	border-radius: 6px;
	border: 1px solid #eee;
}

#cb-widget .cb-wechat-id-row {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #f6f6f6;
	border-radius: 8px;
	padding: 7px 10px;
}
#cb-widget .cb-wechat-id-text {
	font-size: 14px;
	color: #1a1a1a;
	flex: 1;
	font-weight: 500;
}
#cb-widget .cb-copy-btn {
	background: none !important;
	border: 1px solid #d0d0d0 !important;
	border-radius: 5px !important;
	cursor: pointer;
	font-size: 11px;
	padding: 3px 9px !important;
	color: #555;
	transition: background 0.15s;
	white-space: nowrap;
	outline: none !important;
	box-shadow: none !important;
}
#cb-widget .cb-copy-btn:hover { background: #eaeaea !important; }

/* ── Mobile ── */
@media (max-width: 768px) {
	#cb-widget .cb-item-tooltip { display: none; }
	#cb-widget .cb-popup { min-width: 180px; }
}