/* 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; }

/* Caret: --vc-ib-caret is set by popup.js so the arrow keeps pointing at the
 * icon even when the bubble is clamped sideways at a viewport edge. */
.vc-ib-bubble::after {
	content: '';
	position: absolute;
	top: 100%;
	left: var(--vc-ib-caret, 50%);
	transform: translateX(-50%);
	border: 8px solid transparent;
	border-top-color: #ffffff;
}

/* JS adds .vc-ib-below when there's no room above the icon. (Since v0.0.4 the
 * open bubble is portaled to <body> with fixed positioning — Bridge/Qode
 * sections create stacking contexts that otherwise paint over it.) */
.vc-ib-bubble.vc-ib-below::after {
	top: auto;
	bottom: 100%;
	border-top-color: transparent;
	border-bottom-color: #ffffff;
}

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

/* [vc_bills] - the seven bills calculator (0.0.7) */
.vc-bills{background:#F5F7FA;border:1px solid #E5E9EF;border-radius:12px;padding:26px 24px 22px;max-width:640px;margin:22px 0}
.vc-bills-title{margin:0 0 4px;color:#1A2332}
.vc-bills-lede{margin:0 0 16px;color:#3D5166;font-size:14px}
.vc-bills-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid #E5E9EF}
.vc-bills-row label{margin:0;color:#1A2332;font-weight:500;flex:1 1 auto}
.vc-bills-field{display:inline-flex;align-items:center;background:#FFFFFF;border:1px solid #C7D0DA;border-radius:6px;padding:0 10px;flex:0 0 132px}
.vc-bills-field:focus-within{border-color:#7CA99B;box-shadow:0 0 0 3px rgba(124,169,155,.18)}
.vc-bills-cur{color:#6B7B8D;margin-right:4px}
.vc-bills-field input{width:100%;border:0;background:transparent;padding:9px 0;margin:0;font:inherit;color:#1A2332;text-align:right;outline:none;-moz-appearance:textfield}
.vc-bills-field input::-webkit-outer-spin-button,.vc-bills-field input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.vc-bills-total{margin-top:18px}
.vc-bills-line{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:8px 0;color:#3D5166}
.vc-bills-line strong{font-size:26px;line-height:1;color:#1A2332;white-space:nowrap}
.vc-bills-line strong small{font-size:13px;font-weight:500;color:#6B7B8D;margin-left:2px}
.vc-bills-planline{border-top:2px solid #3D5166;margin-top:4px;padding-top:12px}
.vc-bills-planline strong{color:#7CA99B}
.vc-bills-verdict{margin:10px 0 0;min-height:1.5em;color:#1A2332;font-weight:500}
.vc-bills-verdict[data-state="empty"]{color:#6B7B8D;font-weight:400}
.vc-bills-note{margin:12px 0 16px;font-size:13px;color:#6B7B8D}
.vc-bills .qbutton{margin:0}
@media (max-width:480px){.vc-bills{padding:20px 16px}.vc-bills-field{flex-basis:110px}.vc-bills-line strong{font-size:22px}}

/* ---- [vc_trace] tap burst (0.0.8) ---- */
.vc-trace-row{position:relative}
.vc-trace-fx{--vc-trace-accent:#7CA99B;position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:5}
.vc-trace-fx .flash,.vc-trace-fx .ring,.vc-trace-fx .line,.vc-trace-fx .dot{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);pointer-events:none;will-change:transform,opacity}
.vc-trace-fx .flash{width:14px;height:14px;border-radius:999px;background:#fff;box-shadow:0 0 10px #fff,0 0 26px #fff,0 0 46px var(--vc-trace-accent);animation:vcTraceFlash .24s ease-out forwards}
.vc-trace-fx .ring{width:20px;height:20px;border-radius:999px;border:1px solid #fff;box-shadow:0 0 12px #fff,0 0 26px var(--vc-trace-accent);animation:vcTraceRing .5s ease-out forwards}
.vc-trace-fx .line{width:var(--w);height:2px;border-radius:999px;background:linear-gradient(90deg,transparent,#fff,var(--vc-trace-accent),transparent);box-shadow:0 0 8px #fff,0 0 18px var(--vc-trace-accent);transform-origin:center;animation:vcTraceLine .42s ease-out forwards}
.vc-trace-fx .line.trail{opacity:.95;animation-duration:.36s}
.vc-trace-fx .dot{width:3px;height:3px;border-radius:999px;background:#fff;box-shadow:0 0 6px #fff,0 0 14px var(--vc-trace-accent);animation:vcTraceDot .44s ease-out forwards}
@keyframes vcTraceFlash{0%{opacity:1;transform:translate(-50%,-50%) scale(.35)}45%{opacity:1;transform:translate(-50%,-50%) scale(1.4)}100%{opacity:0;transform:translate(-50%,-50%) scale(.6)}}
@keyframes vcTraceRing{0%{opacity:.9;transform:translate(-50%,-50%) scale(.5)}100%{opacity:0;transform:translate(-50%,-50%) scale(5.5)}}
@keyframes vcTraceLine{0%{opacity:1;transform:translate(-50%,-50%) rotate(var(--r)) scaleX(.15)}50%{opacity:1;transform:translate(calc(-50% + var(--dx1)),calc(-50% + var(--dy1))) rotate(var(--r)) scaleX(1)}100%{opacity:0;transform:translate(calc(-50% + var(--dx2)),calc(-50% + var(--dy2))) rotate(var(--r)) scaleX(.2)}}
@keyframes vcTraceDot{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.15)}}
@media (prefers-reduced-motion:reduce){.vc-trace-fx{display:none}}

/* [vc_qr_popup] QR card (0.0.16). Base look is inline on the shortcode output;
 * these add the states, scroll lock, entrance motion and phone padding. */
.vc-qrp-btn-button:hover,.vc-qrp-btn-button:focus{background:var(--vc-slate)!important;color:#ffffff!important}
.vc-qrp-btn-link:hover{color:var(--vc-dark)!important;border-bottom-color:var(--vc-dark)!important}
.vc-qrp-btn:focus-visible,.vc-qrp-x:focus-visible,.vc-qrp-link:focus-visible{outline:2px solid var(--vc-steel);outline-offset:2px}
.vc-qrp-x:hover{color:var(--vc-dark)!important}
.vc-qrp-link:hover{background:var(--vc-slate)!important;color:#ffffff!important}
body.vc-qrp-lock{overflow:hidden}
.vc-qrp-card{animation:vcQrpIn .18s ease-out}
@keyframes vcQrpIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.vc-qrp-card{animation:none}}
@media (max-width:480px){.vc-qrp-card{padding:26px 18px 22px!important}.vc-qrp-title{font-size:21px!important}}