/**
 * Fluent Booking CSS overrides for GLP-1 Centrum design system.
 *
 * Overrides default blue theme with GLP-1 green (#4F7F74).
 * Removes button hover animations.
 */

/* ---------------------------------------------------------------
 * 1. CSS custom properties — override Fluent Booking defaults.
 * --------------------------------------------------------------- */
:root {
	--fcal_primary_color: var(--color-primary) !important;
	--fcal_primaryColor: var(--color-primary) !important;
}

/* ---------------------------------------------------------------
 * 2. Typography & base styles.
 * --------------------------------------------------------------- */
.fcal_wrap,
.fcal_teams,
.fcal_calendar_wrapper {
	font-family: var(--font-body);
}

.fcal_author_header h1,
.fcal_person_name,
.fcal_slot h2,
.fcal_wrap .fcal_host_name,
.fcal_wrap .fcal_event_title {
	font-family: var(--font-heading);
	font-weight: 600;
}

.fcal_wrap .fcal_event_title {
	color: var(--color-primary);
}

/* ---------------------------------------------------------------
 * 3. Primary color overrides — blue → green.
 * --------------------------------------------------------------- */

/* Active date in calendar */
.fcal_wrap .fcal_date.fcal_date_active,
.fcal_wrap .fcal_date:hover {
	background: var(--color-primary) !important;
	color: white !important;
}

/* Time slot selection */
.fcal_wrap .fcal_time.fcal_time_active,
.fcal_wrap .fcal_time:hover {
	border-color: var(--color-primary) !important;
	color: var(--color-primary) !important;
}

/* Confirm / submit buttons */
.fcal_wrap .fcal_submit_btn,
.fcal_wrap .fcal_confirm_btn {
	background: var(--color-accent) !important;
	color: var(--color-text) !important;
	border: none !important;
	border-radius: var(--radius-md) !important;
	font-weight: 600 !important;
	padding: 14px 28px !important;
}

.fcal_wrap .fcal_submit_btn:hover,
.fcal_wrap .fcal_confirm_btn:hover {
	background: var(--color-accent-dark) !important;
}

/* Slot "Book now" button — resting state */
.fcal_slot button {
	transition: none !important;
}

/* Slot "Book now" button — hover: green border + text, no animation */
.fcal_slot button:hover {
	border-color: var(--color-primary) !important;
	color: var(--color-primary) !important;
	padding-right: 16px !important;
}

/* Hide the animated arrow SVG inside the button */
.fcal_slot button svg {
	display: none !important;
}

/* Override SVG arrow stroke color (fallback) */
.fcal_slot button svg path {
	stroke: var(--color-primary) !important;
}

/* Slot hover — no background shift */
.fcal_slot:hover {
	background: var(--fcal_cal_bg) !important;
}

/* Team member card — no hover animation */
.fcal_each_member {
	transition: none !important;
}

.fcal_each_member:hover {
	background: var(--fcal_cal_bg) !important;
}

/* Back to team link */
.fcal_back_btn_team {
	color: var(--color-primary) !important;
}

.fcal_back_btn_team:hover {
	color: var(--color-primary-dark) !important;
}

/* Links and anchors inside Fluent Booking */
.fcal_wrap a,
.fcal_teams a {
	color: var(--color-primary);
}

.fcal_wrap a:hover,
.fcal_teams a:hover {
	color: var(--color-primary-dark);
}

/* Loading spinner */
.fcal-inline-spinner {
	border-color: var(--color-primary-light) !important;
	border-top-color: var(--color-primary) !important;
}

/* ---------------------------------------------------------------
 * 4. Form fields.
 * --------------------------------------------------------------- */
.fcal_wrap .fcal_input input,
.fcal_wrap .fcal_input textarea,
.fcal_wrap .fcal_input select {
	border: 2px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 12px var(--space-md);
	font-family: var(--font-body);
}

.fcal_wrap .fcal_input input:focus,
.fcal_wrap .fcal_input textarea:focus,
.fcal_wrap .fcal_input select:focus {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(79, 127, 116, 0.15);
	outline: none;
}

/* ---------------------------------------------------------------
 * 5. Team view avatar sizing.
 * --------------------------------------------------------------- */
.fcal_author_header img {
	border-radius: 8px;
	width: 96px;
	height: 96px;
	object-fit: cover;
}

.fcal_each_member .fcal_person_avatar img {
	border-radius: 50%;
	width: 44px;
	height: 44px;
	object-fit: cover;
}