/**
 * OneClick WP Hello — Availability / Business Hours Styles
 * @package OneClick_WP_Hello
 */

/* ---- Status dot ---- */
.ocwahello-status-dot {
	position: absolute;
	top: 3px;
	right: 3px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 2px solid #fff;
	pointer-events: none;
	z-index: 1;
}

.ocwahello-status-dot--online {
	background: #25d366;
	box-shadow: 0 0 0 2px rgba(37, 211, 102, .3);
}

.ocwahello-status-dot--offline {
	background: #bdbdbd;
}

/* ---- Offline badge ---- */
.ocwahello-offline-badge {
	position: absolute;
	bottom: -8px;
	left: 50%;
	transform: translateX(-50%);
	background: #e53e3e;
	color: #fff;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 1px 6px;
	border-radius: 4px;
	white-space: nowrap;
	pointer-events: none;
	line-height: 1.7;
	z-index: 1;
}

/* ---- Offline message bubble ---- */
/* position/bottom/left/right are set via inline styles by ocwahello-availability.js
   using getBoundingClientRect() so the bubble tracks the fixed-position button correctly. */
.ocwahello-offline-message {
	position: fixed; /* fallback — JS overrides this */
	background: #fff;
	color: #333;
	font-size: 13px;
	line-height: 1.5;
	padding: 8px 14px;
	border-radius: 10px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .18);
	max-width: 220px;
	white-space: normal;
	pointer-events: none;
	z-index: 9999998;
}

/* Arrow for offline message bubble — points downward toward the button (right-aligned default) */
.ocwahello-offline-message::after {
	content: '';
	position: absolute;
	bottom: -7px;
	right: 18px;
	border-width: 7px 7px 0;
	border-style: solid;
	border-color: #fff transparent transparent;
	filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .08));
}

/* Left-positioned floating button: flip the caret arrow to left side */
.ocwahello-offline-message--left::after {
	right: auto;
	left: 18px;
}