/* Defaults that match the existing cm-header-* CSS in the theme.
   These are intentionally minimal: if the theme already styles
   .cm-header-bar / .cm-header-chip, this file mostly stays out of the way. */

:root {
	--cm-orange: #d94924;
	--cm-orange-soft: rgba(217,73,36,0.25);
}

.cm-header-bar {
	background: transparent;
	padding: 6px 0;
}

.cm-header-contacts {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	flex-wrap: wrap;
}

.cm-header-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	height: 40px;
	border-radius: 999px;
	border: 1px solid var(--cm-orange-soft);
	background: rgba(255,255,255,0.15);
	color: var(--cm-orange);
	font-size: 0.92rem;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 4px 14px rgba(0,0,0,0.08);
	transition: 0.16s ease;
}

.cm-header-chip:hover {
	transform: translateY(-1px);
	border-color: var(--cm-orange);
	background: rgba(255,255,255,0.25);
	box-shadow: 0 8px 22px rgba(0,0,0,0.12);
}

.cm-header-icon {
	width: 26px;
	height: 26px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: radial-gradient(circle at 30% 25%, #ffffff, var(--cm-orange));
}

.cm-header-icon .dashicons {
	font-size: 14px;
	line-height: 1;
	color: #fff;
	position: relative;
	top: -1px;
}

.cm-header-blog {
	padding-left: 18px;
	padding-right: 18px;
}

@media (max-width: 768px) {
	.cm-header-contacts {
		justify-content: center;
		gap: 10px;
	}
	.cm-header-chip {
		font-size: 0.85rem;
		height: 38px;
		padding: 5px 12px;
	}
}

/* ---- Location switcher ---- */

.cm-loc-switcher {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.9rem;
}

.cm-loc-switcher-label {
	color: #666;
}

.cm-loc-select select {
	height: 36px;
	border-radius: 999px;
	border: 1px solid var(--cm-orange-soft);
	padding: 0 14px;
	background: #fff;
	color: var(--cm-orange);
	font-weight: 500;
	cursor: pointer;
}

.cm-loc-pills {
	flex-wrap: wrap;
}

.cm-loc-pill {
	border: 1px solid var(--cm-orange-soft);
	background: #fff;
	color: var(--cm-orange);
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 0.88rem;
	font-weight: 500;
	cursor: pointer;
	transition: 0.16s ease;
}

.cm-loc-pill:hover,
.cm-loc-pill.is-active {
	background: var(--cm-orange);
	color: #fff;
	border-color: var(--cm-orange);
}