/* Virtucom Core — brand palette + shortcode styles
 * Palette source of truth: Plugins/virtucom-core/SPEC.md
 * Inline styles take precedence on shortcode elements (Bridge cascade rule) — these
 * classes are utilities for non-shortcode markup and progressive-enhancement hooks.
 */

:root {
	--vc-slate: #3D5166;
	--vc-steel: #5B7FA6;
	--vc-sage:  #7CA99B;
	--vc-gold:  #C49A2A;
	--vc-dark:  #1A2332;
	--vc-light: #F5F7FA;
	--vc-body:  #3A3A3A;
	--vc-muted: #6B7B8D;
}

.vc-segmented {
	width: 100%;
	font-family: inherit;
}

.vc-segmented-align-left  { text-align: left; }
.vc-segmented-align-right { text-align: right; }

.vc-segmented-tabs {
	display: inline-flex;
	background: var(--vc-light);
	border-radius: 999px;
	padding: 4px;
	margin-bottom: 24px;
	gap: 0;
}

.vc-segmented-tab {
	border: 0;
	background: transparent;
	border-radius: 999px;
	padding: 10px 24px;
	font-size: 14px;
	font-weight: 600;
	color: var(--vc-slate);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
	white-space: nowrap;
	font-family: inherit;
}

.vc-segmented-tab:hover { color: var(--vc-dark); }
.vc-segmented-tab:focus { outline: 2px solid var(--vc-steel); outline-offset: 2px; }

.vc-segmented-tab.is-active {
	background: var(--vc-slate) !important;
	color: #ffffff !important;
}

.vc-segmented-pane {
	display: none;
	color: var(--vc-body);
}

.vc-segmented-pane.is-active { display: block; }

@media (max-width: 600px) {
	.vc-segmented-tabs { width: 100%; }
	.vc-segmented-tab  { flex: 1; padding: 10px 12px; font-size: 13px; }
}

/* [vc_popup] info bubble — classes are vc-ib-* on purpose: legacy pages still
 * carry inline .vc-popup modal CSS that would hijack .vc-popup* class names.
 * Base look ships as inline styles on the shortcode output (Bridge cascade rule);
 * these rules add what inline styles can't: states, the caret, media queries. */

.vc-ib-wrap { position: relative; display: inline-block; }

.vc-ib-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	padding: 0;
	border: 1.5px solid var(--vc-steel);
	border-radius: 50%;
	background: transparent;
	color: var(--vc-steel);
	font: italic 600 11px/1 Georgia, serif;
	cursor: pointer;
	vertical-align: middle;
	transition: background 0.2s ease, color 0.2s ease;
}

.vc-ib-btn:hover,
.vc-ib-btn[aria-expanded="true"] {
	background: var(--vc-steel) !important;
	color: #ffffff !important;
}

.vc-ib-btn:focus { outline: 2px solid var(--vc-steel); outline-offset: 2px; }

.vc-ib-bubble::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 8px solid transparent;
	border-top-color: #ffffff;
}

.vc-ib-link:hover { color: var(--vc-dark) !important; border-bottom-color: var(--vc-dark) !important; }

@media (max-width: 600px) {
	/* Bottom sheet on small screens — !important beats the inline anchor styles. */
	.vc-ib-bubble {
		position: fixed !important;
		left: 12px !important;
		right: 12px !important;
		top: auto !important;
		bottom: 12px !important;
		transform: none !important;
		width: auto !important;
		max-width: none !important;
		max-height: 60vh;
		overflow-y: auto;
	}
	.vc-ib-bubble::after { display: none; }
}