/**
 * FEF Chatbot — Dr. Jariwala Laboratory & Diagnostics theme.
 *
 * A thin, additive skin for the FEF Chatbot. It only re-points the theme's
 * existing CSS variables (defined in fef-chatbot.css) to the lab's green
 * palette and repairs the few hard-coded purple focus rings on the controls
 * the lab flows use most (dropdowns, date/time, inputs). Nothing here changes
 * layout, motion or structure — it is purely a colour re-brand.
 *
 * SCOPING
 *   Every rule is scoped under `.fef-cbt--lab`, so it themes ONLY the lab
 *   widget and never affects any other FEF Chatbot on the site. The class is
 *   added automatically by class-fef-chatbot-lab.php to widgets that use the
 *   "Diagnostics Lab" template. (You can also add it by hand in the widget's
 *   Advanced → CSS Classes field if you prefer.)
 *
 * Palette mirrors the confirmation emails:
 *   deep green  #0b6b3a   ·   bright green #3d9b4b   ·   mint #eaf7ef / #f2f9f4
 *
 * @package Frontend_Forms
 * @subpackage Chatbot
 */

/* ── Brand tokens — this is what re-colours the whole widget ─────────── */
.fef-cbt.fef-cbt--lab {
	--cbt-primary:        #0b6b3a;   /* deep lab green   */
	--cbt-primary-2:      #3d9b4b;   /* gradient end     */
	--cbt-accent:         #0b6b3a;

	/* Quick replies / chips / menu buttons */
	--cbt-qr-bg:          #ffffff;
	--cbt-qr-color:       #0b6b3a;
	--cbt-qr-border:      #cfe6d6;

	/* Bot bubbles + soft surfaces lean faintly green so it reads "clinical" */
	--cbt-bot-bubble-bg:  #eef7f0;
	--cbt-bot-bubble-color:#123b26;
	--cbt-surface-soft:   #f2f9f4;
	--cbt-border:         #dce8de;

	--cbt-success:        #2e8b4f;
}

/* ── Focus rings: the base file hard-codes a purple rgba() on the picker
 *    controls (not a token), so re-assert them in green here. These are the
 *    controls the Book-a-Test / Home-Visit flows use for test, date and time. */
.fef-cbt--lab .fef-cbt__select:focus,
.fef-cbt--lab .fef-cbt__select-search:focus,
.fef-cbt--lab .fef-cbt__datetime:focus,
.fef-cbt--lab .fef-cbt__otp-box:focus {
	border-color: var(--cbt-accent);
	box-shadow: 0 0 0 3px rgba(11, 107, 58, 0.16);
}
.fef-cbt--lab .fef-cbt__launcher:focus-visible {
	outline-color: rgba(11, 107, 58, 0.55);
}
.fef-cbt--lab .fef-cbt__chip:focus-visible,
.fef-cbt--lab .fef-cbt__star:focus-visible {
	outline-color: rgba(11, 107, 58, 0.45);
}

/* ── Header avatar chip reads a touch warmer against the green header ─── */
.fef-cbt--lab .fef-cbt__avatar { background: #ffffff; color: var(--cbt-accent); }

/* ── "Open Reports Portal" and other primary CTAs: make the primary quick
 *    reply a solid green button so the report/login action stands out. The
 *    engine adds .fef-cbt__qr--primary to the lead CTA; we also promote the
 *    first option in the report node via its own class if present. */
.fef-cbt--lab .fef-cbt__qr--primary,
.fef-cbt--lab .fef-cbt__qr--primary:hover {
	background: linear-gradient(135deg, var(--cbt-primary), var(--cbt-primary-2)) !important;
	color: #ffffff !important;
	border-color: var(--cbt-primary) !important;
	box-shadow: 0 4px 14px rgba(11, 107, 58, 0.28) !important;
}

/* ── Test / date / time dropdowns: a hair more padding for easier tapping
 *    since patients pick from these on mobile. Purely ergonomic. */
.fef-cbt--lab .fef-cbt__select,
.fef-cbt--lab .fef-cbt__select-search,
.fef-cbt--lab .fef-cbt__datetime {
	padding: 12px 14px;
	border-radius: 12px;
}

/* ── Confirmation "success" bubble (end screens) gets the lab green rail ─ */
.fef-cbt--lab .fef-cbt__msg--bot .fef-cbt__bubble--success {
	background: #eaf7ef;
	color: #0b6b3a;
	box-shadow: inset 3px 0 0 var(--cbt-success);
}

/* ── Price/accent text on any test cards you later enable ───────────────── */
.fef-cbt--lab .fef-cbt__card-price { color: var(--cbt-accent); }

/* ── High-contrast users: keep the green legible ───────────────────────── */
@media (prefers-contrast: more) {
	.fef-cbt.fef-cbt--lab {
		--cbt-qr-border: #0b6b3a;
		--cbt-border: #6b8a76;
	}
}