/* ============================================================
   Contact page tab module — "Book a Demo" (pixl.ai embed widget)
   vs. "Send a Message" (existing Bigin form), ported from the
   pixl.ai contact page and re-skinned to pixdynamics.com's own
   tokens (config.css) instead of pixl.ai's --secondaryMastercolor
   / --layoutBorderColor design system.
   ============================================================ */

.ctf-border-color {
	--ctf-border: var(--gray6, #E1E1E1);
	--ctf-accent: var(--mastercolor, #000000);
	--ctf-accent-lite: var(--gray1, #F0F0F0);
	--ctf-track-bg: var(--light1, #F8F8F8);
}

.ctf-eyebrow {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--mastercolor, #000000);
	margin-bottom: 10px;
}

.ctf-subtext {
	color: var(--color2, #595F69);
	line-height: 1.7;
}

/* trust checklist */
.ctf-trust-icon {
	width: 22px;
	height: 22px;
	background: var(--mastercolor, #000000);
}
.ctf-trust-icon svg {
	width: 12px;
	height: 12px;
	color: #fff;
}

/* quick-contact chips */
.ctf-chip {
	border: 1px solid var(--gray6, #E1E1E1);
	border-radius: 100px;
	padding: 8px 14px;
	transition: border-color .2s, color .2s;
}
.ctf-chip:hover {
	border-color: var(--mastercolor, #000000);
	color: var(--mastercolor, #000000);
}
.ctf-chip svg {
	color: var(--mastercolor, #000000);
}

/* ── Tab switcher ─────────────────────────────────────────── */
.ctf-tabs {
	display: flex;
	gap: 4px;
	padding: 4px;
	margin-bottom: 20px;
	background: var(--light1, #F8F8F8);
	border: 1px solid var(--gray6, #E1E1E1);
	border-radius: 12px;
}
.ctf-tab-btn {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 12px;
	border: none;
	background: transparent;
	border-radius: 9px;
	font-size: 13.5px;
	font-weight: 500;
	color: rgba(0, 0, 0, .55);
	cursor: pointer;
	transition: background .2s, color .2s, box-shadow .2s;
}
.ctf-tab-btn svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}
.ctf-tab-btn:hover {
	color: #000;
}
.ctf-tab-btn.is-active {
	background: #fff;
	color: #000;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 8px 20px -10px rgba(0, 0, 0, .18);
}
.ctf-tab-btn.is-active svg {
	color: var(--mastercolor, #000000);
}
.ctf-panel[hidden] {
	display: none;
}

/* ── "Send a Message" card: browser-dots header around the Bigin iframe ── */
.ctf-frame-card {
	border: 1px solid var(--gray6, #E1E1E1);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 8px 40px rgba(0, 0, 0, .06);
}
.ctf-frame-header {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 12px 16px;
	background: var(--light1, #F8F8F8);
	border-bottom: 1px solid var(--gray6, #E1E1E1);
}
.ctf-frame-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
}
.ctf-dot-red { background: #FF5F56; }
.ctf-dot-yellow { background: #FFBD2E; }
.ctf-dot-green { background: #27C93F; }
.ctf-frame-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	color: rgba(0, 0, 0, .4);
	margin-left: 8px;
}

/* ── "Book a Demo" panel: hosts the pixl.ai embed <iframe> ─────────────── */
.ctf-bkd-container {
	min-height: 480px;
}
.ctf-bkd-container iframe {
	width: 100%;
	border: 0;
	display: block;
}
.ctf-bkd-fallback {
	display: none;
	align-items: center;
	justify-content: center;
	min-height: 200px;
	text-align: center;
	color: var(--color2, #595F69);
	font-size: 14px;
	padding: 24px;
}

@media (max-width: 991.98px) {
	.ctf-chip {
		font-size: 13px;
	}
}