/**
 * Fluent Booking — Sunroom skin.
 *
 * The plugin injects cool-blue --fcal_* tokens and system fonts. Remap those
 * onto --u-* and restyle the chrome so the widget reads as Organix, not as
 * a Calendly clone. Do not edit plugin files; this sheet wins on specificity.
 */

/* ── Token remap (plugin writes these on :root; we rewrite them) ── */
html,
.fcal_cal_wrap,
.fluent_booking_app,
.fcal-light-mode,
.fcal-dark-mode {
	--fcal_primary_color: var(--u-accent);
	--fcal_date_radius: var(--u-r-md);
	--fcal_avatar_radius: var(--u-r-md);
	--fcal_cal_bg: var(--u-surface);
	--fcal_slot_border: var(--u-line);
	--fcal_date_disabled_bg: var(--u-surface);
	--fcal_enable_day_bg: color-mix(in srgb, var(--u-sage) 42%, var(--u-surface));
	--fcal_date_disabled_color: var(--u-muted);
	--fcal_thBG: var(--u-bg);
	--fcal_dark: var(--u-heading);
	--fcal_whiteColor: var(--u-surface);
	--fcal_scroll_bar_bg: var(--u-line);
	--fcal_input_bg: var(--u-field);
	--fcal_body_bg: var(--u-bg);
	--fcal_input_disable_bg: var(--u-bg);
	--fcal_gray: var(--u-muted);
	--fcal_skeleton_bg: linear-gradient(90deg, var(--u-bg) 25%, var(--u-line) 37%, var(--u-bg) 63%);
	--date-picker-selected-background: var(--u-accent);
	--date-picker-highlight-border: var(--u-accent);
	--date-picker-selected-color: var(--u-accent-ink);
}

.fcal_cal_wrap,
.fluent_booking_app {
	font-family: var(--u-font);
	color: var(--u-ink);
	background: var(--u-surface);
	border: 1px solid var(--u-line);
	border-radius: var(--u-r-lg);
	overflow: hidden;
}

.fcal_cal_wrap h1,
.fcal_cal_wrap h2,
.fcal_cal_wrap h3,
.fluent_booking_app h1,
.fluent_booking_app h2,
.fluent_booking_app h3 {
	font-family: var(--u-font-display);
	font-weight: 550;
	color: var(--u-heading);
	letter-spacing: -0.01em;
}

.fcal_btn_submit,
.fluent_booking_app button[type="submit"],
.fcal_cal_wrap .fcal_btn {
	background: var(--u-accent) !important;
	color: var(--u-accent-ink) !important;
	border: 0 !important;
	border-radius: var(--u-r-md) !important;
	font-family: var(--u-font) !important;
	font-weight: 600 !important;
	padding: 11px 22px !important;
	box-shadow: none !important;
	cursor: pointer;
}
.fcal_btn_submit:hover,
.fluent_booking_app button[type="submit"]:hover {
	background: var(--u-accent-hover) !important;
}

.fcal_cal_wrap input,
.fcal_cal_wrap textarea,
.fcal_cal_wrap select,
.fluent_booking_app input,
.fluent_booking_app textarea,
.fluent_booking_app select {
	background: var(--u-field) !important;
	border: 1px solid var(--u-line) !important;
	border-radius: var(--u-r-md) !important;
	color: var(--u-ink) !important;
	font-family: var(--u-font) !important;
	box-shadow: none !important;
}
.fcal_cal_wrap input:focus,
.fcal_cal_wrap textarea:focus,
.fluent_booking_app input:focus,
.fluent_booking_app textarea:focus {
	outline: none !important;
	box-shadow: var(--u-ring) !important;
	border-color: var(--u-accent) !important;
}

.fcal_cal_wrap label,
.fluent_booking_app label {
	color: var(--u-heading);
	font-weight: 600;
	font-size: 0.92rem;
}

/* Time slots — a quiet pill, not a blue chip. */
.fcal_cal_wrap [class*="slot"] button,
.fluent_booking_app [class*="time_slot"] {
	border-radius: var(--u-r-md) !important;
	border-color: var(--u-line) !important;
	font-family: var(--u-mono) !important;
	font-variant-numeric: tabular-nums;
}

/* ── Our class list (Sunroom cards wrapping the widget) ── */
.urlar-classes {
	display: grid;
	gap: 12px;
	margin: 0 auto;
	max-width: 820px;
}
.urlar-classes--compact {
	gap: 10px;
	max-width: 780px;
	margin: 0;
}

.urlar-classes__empty {
	margin: 0;
	padding: 22px;
	background: var(--u-surface);
	border: 1px solid var(--u-line);
	border-radius: var(--u-r-lg);
	color: var(--u-muted);
	text-align: center;
}

.urlar-class {
	background: var(--u-surface);
	border: 1px solid var(--u-line);
	border-radius: var(--u-r-lg);
	padding: 20px 22px;
}
.urlar-classes--compact .urlar-class {
	padding: 14px 16px;
}

.urlar-class__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
}
.urlar-classes--compact .urlar-class__row { gap: 16px; }

.urlar-class__when {
	flex-shrink: 0;
	width: 11ch;
	color: var(--u-muted);
	font-family: var(--u-mono);
	font-size: 0.8rem;
	font-variant-numeric: tabular-nums;
	line-height: 1.7;
}

.urlar-class__copy {
	flex: 1 1 240px;
	min-width: 200px;
}
.urlar-class__copy h3 {
	margin: 0 0 2px;
	color: var(--u-heading);
	font-family: var(--u-font);
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: 0;
}
.urlar-classes--compact .urlar-class__copy h3 {
	font-size: 1.08rem;
	font-weight: 550;
	margin: 0;
}
.urlar-class__meta {
	color: var(--u-muted);
	font-size: 0.87rem;
}
.urlar-classes--compact .urlar-class__meta { font-size: 0.84rem; }

.urlar-class__aside {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	flex-shrink: 0;
	gap: 8px;
}
.urlar-classes--compact .urlar-class__aside {
	flex-direction: row;
	align-items: center;
}

.urlar-class__seats {
	display: inline-block;
	border-radius: var(--u-r-pill);
	font-family: var(--u-mono);
	font-size: 0.76rem;
	font-weight: 500;
	padding: 3px 10px;
	background: var(--u-good-faint);
	color: var(--u-good);
}
.urlar-class__seats--low {
	background: var(--u-honey-faint);
	color: var(--u-honey);
}
.urlar-class__seats--full {
	background: var(--u-clay-faint);
	color: var(--u-clay);
}

.urlar-class__price {
	color: var(--u-heading);
	font-family: var(--u-mono);
	font-size: 0.9rem;
}

.urlar-class__book {
	display: inline-block;
	background: var(--u-accent);
	color: var(--u-accent-ink);
	border: 0;
	border-radius: var(--u-r-md);
	font-family: var(--u-font);
	font-size: 0.95rem;
	font-weight: 600;
	padding: 11px 22px;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.18s ease;
}
.urlar-class__book:hover { background: var(--u-accent-hover); color: var(--u-accent-ink); }
.urlar-class__book:focus-visible { outline: none; box-shadow: var(--u-ring); }
.urlar-class__book[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

.urlar-classes--compact .urlar-class__book {
	background: transparent;
	color: var(--u-heading);
	border: 1px solid var(--u-line);
	font-size: 0.88rem;
	padding: 8px 16px;
}
.urlar-classes--compact .urlar-class__book:hover {
	background: color-mix(in srgb, var(--u-sage) 30%, transparent);
	color: var(--u-heading);
}

.urlar-class__widget {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--u-line);
}
.urlar-class__widget[hidden] { display: none; }

.urlar-class__pay {
	margin: 0 0 14px;
	color: var(--u-muted);
	font-size: 0.87rem;
	max-width: 52ch;
}

.urlar-book-note {
	margin: 28px auto 0;
	max-width: 820px;
	color: var(--u-muted);
	font-size: 0.95rem;
	text-align: center;
}
.urlar-book-note a {
	color: var(--u-secondary);
	font-weight: 600;
	text-decoration: none;
}
.urlar-book-note a:hover { text-decoration: underline; }

/* Fluent still paints author/host chrome even with disable_author=yes. */
.fcal_cal_wrap .fcal_author,
.fcal_cal_wrap .fcal_author_wrap,
.fcal_cal_wrap .fcal_user_details,
.fcal_host_name,
.fcal_host_badge {
	display: none !important;
}

.fcal_confirmation {
	background: transparent;
	color: var(--u-ink);
	font-family: var(--u-font);
}
.fcal_confirm_header {
	text-align: left;
	padding: 4px 0 16px;
}
.fcal_check_holder {
	display: none;
}
.fcal_confirm_header h2 {
	margin: 0 0 6px;
	font-family: var(--u-font-display);
	font-weight: 550;
	font-size: 1.55rem;
	color: var(--u-heading);
	letter-spacing: -0.02em;
}
.fcal_confirm_header p {
	margin: 0;
	color: var(--u-muted);
}
.fcal_confirm_section_title h4 {
	font-family: var(--u-font-display);
	font-weight: 550;
	color: var(--u-heading);
}
.fcal_booking_manage a {
	color: var(--u-secondary);
}

body.booking-confirmation-page {
	background: var(--u-bg);
	color: var(--u-ink);
	font-family: var(--u-font);
}
.confirmation_page .fcal_conf_wrap {
	background: var(--u-surface);
	border: 1px solid var(--u-line);
	border-radius: var(--u-r-lg);
	overflow: hidden;
}
.fcal_back_btn a {
	color: var(--u-secondary);
	text-decoration: none;
	font-family: var(--u-font);
	font-weight: 600;
}

@media (max-width: 768px) {
	.urlar-class__aside {
		align-items: flex-start;
		flex-direction: row;
	}
}