/* Floating Request Tab styles */
#frt-widget {
	--frt-primary: #0d3b3e;
	--frt-accent: #16a596;
	position: fixed;
	top: var(--frt-desktop-top, 160px);   /* fixed distance from top, not centered — avoids colliding with bottom-anchored chat widgets like Cora */
	z-index: 999999;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

#frt-widget.frt-pos-right { right: 0; }
#frt-widget.frt-pos-left  { left: 0; }

/* ---------- The tab button (fixed size — no resize on hover, so no flicker) ---------- */
.frt-tab {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	background: var(--frt-primary);
	color: #fff;
	border: none;
	cursor: pointer;
	border-radius: 12px 0 0 12px;
	padding: 14px 10px;
	box-shadow: 0 6px 20px rgba(0,0,0,0.3);
	white-space: nowrap;
	max-height: 60vh;      /* safety cap so it can never dominate the viewport */
	overflow: hidden;
	transition: background-color 0.2s ease;   /* only ever animates color, never size */
	animation: frt-attention-pulse 3.5s ease-in-out infinite;
}
.frt-pos-left .frt-tab { border-radius: 0 12px 12px 0; }

@keyframes frt-attention-pulse {
	0%, 100% { box-shadow: 0 6px 20px rgba(0,0,0,0.3), 0 0 0 0 rgba(22,165,150,0.55); }
	50%      { box-shadow: 0 6px 20px rgba(0,0,0,0.3), 0 0 0 10px rgba(22,165,150,0); }
}
@media (prefers-reduced-motion: reduce) {
	.frt-tab { animation: none; }
}
.frt-tab:hover, .frt-tab:focus-visible {
	animation: none;
	background: var(--frt-accent);   /* the only hover feedback — a color swap, nothing resizes */
}

.frt-tab-vertical-wrap {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}
.frt-tab-label-group {
	display: flex;
	flex-direction: column;   /* normal horizontal stacking BEFORE rotation — heading above subtitle, fully predictable */
	align-items: center;
	gap: 1px;
	white-space: nowrap;
	transform: rotate(-90deg);   /* rotate the whole (already correctly-ordered) block, instead of using vertical-writing-mode per line — sidesteps a real cross-browser quirk where separate vertical-writing-mode elements can render as side-by-side columns instead of stacked */
}
.frt-tab-vertical-text {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: -0.1px;
	white-space: nowrap;
}
.frt-tab-vertical-sub {
	font-size: 10px;
	letter-spacing: -0.1px;
	opacity: 0.85;
	white-space: nowrap;
}
.frt-tab-circle {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	border-radius: 50%;
	background: rgba(255,255,255,0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s ease;
}
.frt-tab:hover .frt-tab-circle { background: var(--frt-primary); }

/* ---------- Modal panel ---------- */
.frt-panel {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	background: rgba(4, 20, 22, 0.55);
	display: none;
	align-items: center !important;
	justify-content: center !important;
	z-index: 99998;
	padding: 20px;
	box-sizing: border-box;
}
.frt-panel.frt-open { display: flex !important; }

.frt-panel-inner {
	background: #fff;
	border-radius: 14px;
	width: 100%;
	max-width: 620px !important;   /* wider so two-column fields (First/Last, Email/Phone) don't cramp or overflow */
	max-height: 88vh;
	overflow-y: auto;
	position: relative !important;
	top: auto !important;
	right: auto !important;
	box-shadow: 0 20px 60px rgba(0,0,0,0.35);
	animation: frt-pop 0.2s ease;
	box-sizing: border-box;
	margin: auto !important;        /* keep it centered, never pinned to an edge */
}
@keyframes frt-pop {
	from { transform: scale(0.96); opacity: 0; }
	to   { transform: scale(1); opacity: 1; }
}

/* Force anything Fluent Forms renders to respect the panel width */
.frt-panel-form,
.frt-panel-form * {
	max-width: 100% !important;
	box-sizing: border-box !important;
}

/* Only stretch actual text-style fields — NOT radio/checkbox inputs */
.frt-panel-form input[type="text"],
.frt-panel-form input[type="email"],
.frt-panel-form input[type="tel"],
.frt-panel-form input[type="number"],
.frt-panel-form input[type="url"],
.frt-panel-form input[type="password"],
.frt-panel-form input[type="date"],
.frt-panel-form select,
.frt-panel-form textarea {
	width: 100% !important;
}

/* Radio / checkbox choices: circle sits inline next to its label, not stacked */
.frt-panel-form input[type="radio"],
.frt-panel-form input[type="checkbox"] {
	width: auto !important;
	height: auto !important;
	flex-shrink: 0;
	margin: 0 8px 0 0 !important;
	vertical-align: middle;
}
.frt-panel-form .ff-el-form-check,
.frt-panel-form label.ff-el-form-check-label,
.frt-panel-form .ff_selection_group,
.frt-panel-form .ff-el-group .ff-el-form-check {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 8px;
}

.frt-panel-close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f1f1f1;
	border: none;
	border-radius: 50%;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	color: #222;
	z-index: 20;
	pointer-events: auto;
	transition: background 0.15s ease;
}
.frt-panel-close:hover { background: #e2e2e2; }

/* Hide the logo image the client's Fluent Form embeds at the top — redundant inside the modal */
.frt-panel img.alignnone.size-medium.wp-image-57829.aligncenter {
	display: none;
}

.frt-panel-form { padding: 24px 24px 20px; }

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
	#frt-widget { top: auto; bottom: var(--frt-mobile-bottom, 110px); }
	.frt-hide-mobile { display: none !important; }
	.frt-tab { padding: 16px 10px; }
	.frt-panel-inner { max-width: 100% !important; }
}