/* ==========================================================================
   The Floor Buxtehude — Nimbuscloud public pages (site-3.css)
   Course lists, registration, waiting list, Gutschein (URLs with site=3).
   Loaded after Nimbus' own CSS.

   - External requests: ONLY the site's own self-hosted fonts from
     https://thefloor-bux.de/fonts/ (our first-party server; no third-party
     font CDN, no Google Fonts, so no DSGVO transfer issue). That server sends
     Access-Control-Allow-Origin for thb.nimbuscloud.at (nginx/nginx.conf).
     Before launch the files 404 and the system stacks below take over.
     Otherwise no @import, no remote images (only inline data: SVGs).
   - Palette + type = thefloor-bux.de: ink / bone / copper; Anton (headings),
     Barlow Condensed (buttons, labels), Archivo (body), JetBrains Mono (dates).
     Buttons mirror .btn-slab in src/styles/global.css (bone sweep on hover).
   - Height reporting: Nimbus measures #by-nimbuscloud's offset and posts it
     to the parent page. Never hide that element and never force 100vh.
   ========================================================================== */

@font-face {
	font-family: "Anton";
	src: url("https://thefloor-bux.de/fonts/anton-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Barlow Condensed";
	src: url("https://thefloor-bux.de/fonts/barlow-condensed-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Barlow Condensed";
	src: url("https://thefloor-bux.de/fonts/barlow-condensed-900.woff2") format("woff2");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Archivo";
	src: url("https://thefloor-bux.de/fonts/archivo-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Archivo";
	src: url("https://thefloor-bux.de/fonts/archivo-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Archivo";
	src: url("https://thefloor-bux.de/fonts/archivo-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "JetBrains Mono";
	src: url("https://thefloor-bux.de/fonts/jetbrains-mono-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "JetBrains Mono";
	src: url("https://thefloor-bux.de/fonts/jetbrains-mono-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
	--tf-ink: #0f0d0c;
	--tf-ink-soft: #191512;
	--tf-ink-raised: #211c18;
	--tf-line: #2a241f;
	--tf-line-strong: #4a4037;
	--tf-bone: #f4ede4;
	--tf-bone-dim: #a9a096;
	--tf-copper: #e17c33;
	--tf-copper-light: #feac5c;
	--tf-copper-tint: rgba(225, 124, 51, 0.12);
	--tf-error: #ff8a7a;
	--tf-error-tint: rgba(255, 138, 122, 0.08);
	--tf-success: #9bd8a8;
	--tf-success-tint: rgba(155, 216, 168, 0.08);
	--tf-radius: 2px;
	--tf-font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--tf-display: "Anton", "Arial Narrow", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--tf-condensed: "Barlow Condensed", "Arial Narrow", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--tf-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	--tf-ease-hard: cubic-bezier(0.85, 0, 0.15, 1);
	color-scheme: dark;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
html,
body {
	background: var(--tf-ink) !important;
	color: var(--tf-bone);
	font-family: var(--tf-font);
	font-size: 16px;
	line-height: 1.55;
	min-height: 0 !important;
	height: auto !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	margin: 0;
	/* small inset so focus rings are not clipped by the iframe edge */
	padding: 0 4px;
	overflow-x: hidden;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

::selection {
	background: var(--tf-copper);
	color: var(--tf-ink);
}

a {
	color: var(--tf-copper-light);
	text-decoration: underline;
	text-underline-offset: 3px;
}

a:hover,
a:focus {
	color: var(--tf-bone);
}

strong,
b {
	font-weight: 700;
	color: var(--tf-bone);
}

hr {
	border: 0;
	border-top: 1px solid var(--tf-line);
	margin: 28px 0;
}

/* One focus style for everything */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--tf-copper) !important;
	outline-offset: 2px !important;
	box-shadow: none !important;
}

/* Height marker for the iframe auto-height: keep in flow, keep invisible */
#by-nimbuscloud {
	display: block !important;
	height: 0;
	overflow: hidden;
	visibility: hidden;
}

/* Font Awesome icons inherit colour */
.fa,
.fas,
.far,
.fal {
	color: inherit;
}

/* --------------------------------------------------------------------------
   Buttons = the site's .btn-slab
   Barlow Condensed 900, uppercase, copper ground, ink text, 2px border,
   square corners. Hover: a bone fill sweeps up from the bottom (::before
   behind the label; isolation keeps z-index:-1 inside the button, so the
   Font Awesome icon and the text stay on top).
   -------------------------------------------------------------------------- */
.btn {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55em;
	vertical-align: middle;
	font-family: var(--tf-condensed);
	font-weight: 900;
	font-size: 16px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1;
	border-radius: 0 !important;
	border: 2px solid transparent;
	padding: 14px 24px;
	text-decoration: none;
	box-shadow: none !important;
	text-shadow: none;
	background-image: none !important;
	transition: color 0.18s var(--tf-ease-hard), border-color 0.18s var(--tf-ease-hard);
	white-space: nowrap;
}

.btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--tf-bone);
	transform: translateY(101%);
	transition: transform 0.36s var(--tf-ease-hard);
	pointer-events: none;
}

.btn:hover::before,
.btn:focus-visible::before {
	transform: translateY(0);
}

.btn .btn-icon,
.btn .fas,
.btn .far,
.btn .fa {
	position: relative;
	margin: 0;
	font-size: 0.85em;
}

.btn-xs {
	font-size: 15px;
	padding: 11px 18px;
}

.btn-lg {
	font-size: 18px;
	padding: 18px 30px;
}

/* Primary: copper ground, ink text; stays ink on the bone sweep */
.btn-primary,
.btn-success,
.btn-danger,
#courses-table .btn-default {
	background: var(--tf-copper) !important;
	border-color: var(--tf-copper) !important;
	color: var(--tf-ink) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
#courses-table .btn-default:hover,
#courses-table .btn-default:focus,
#courses-table .btn-default:active {
	background: var(--tf-copper) !important;
	border-color: var(--tf-copper) !important;
	color: var(--tf-ink) !important;
}

.btn-primary.disabled,
.btn-primary[disabled] {
	background: var(--tf-line-strong) !important;
	border-color: var(--tf-line-strong) !important;
	color: var(--tf-bone) !important;
	opacity: 1;
}

.btn.disabled::before,
.btn[disabled]::before {
	display: none;
}

/* Ghost = .btn-slab.is-ghost: bone outline + bone text, copper sweep, ink text.
   Waiting list (btn-warning) and secondary actions ("Daten kopieren"), so a
   full course never looks like an open one. */
.btn-default,
.btn-warning,
#courses-table .btn-warning {
	background: transparent !important;
	border-color: var(--tf-bone) !important;
	color: var(--tf-bone) !important;
}

.btn-default::before,
.btn-warning::before {
	background: var(--tf-copper);
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
#courses-table .btn-warning:hover,
#courses-table .btn-warning:focus {
	background: transparent !important;
	border-color: var(--tf-bone) !important;
	color: var(--tf-ink) !important;
}

/* The course list's register button is .btn-default in Nimbus: keep it copper */
#courses-table .btn-default::before {
	background: var(--tf-bone);
}

#courses-table .btn-default:hover,
#courses-table .btn-default:focus {
	border-color: var(--tf-copper) !important;
}

@media (hover: none) {
	.btn:active {
		transform: scale(0.97);
		transition: transform 0.1s ease;
	}
}

/* --------------------------------------------------------------------------
   Alerts (shared)
   -------------------------------------------------------------------------- */
.alert {
	border-radius: var(--tf-radius);
	border: 1px solid var(--tf-line);
	background: var(--tf-ink-soft);
	color: var(--tf-bone);
	padding: 18px 20px;
	text-shadow: none;
	box-shadow: none;
}

.alert-info {
	border-left: 2px solid var(--tf-copper);
	text-align: left;
}

.alert-warning {
	border-color: var(--tf-copper);
	background: var(--tf-copper-tint);
	color: var(--tf-bone);
}

.alert-warning .fas,
.alert-warning strong {
	color: var(--tf-copper-light);
}

.alert-danger {
	border-color: var(--tf-error);
	background: var(--tf-error-tint);
	color: var(--tf-error);
}

.alert-success {
	border-color: var(--tf-success);
	background: var(--tf-success-tint);
	color: var(--tf-bone);
}

/* --------------------------------------------------------------------------
   Course list  (body.courses-list)
   -------------------------------------------------------------------------- */
.courses-list .courses-container {
	padding: 0;
	margin: 0;
	width: 100%;
}

#courses-table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	background: transparent;
	color: var(--tf-bone);
	font-size: 15px;
	font-variant-numeric: tabular-nums;
}

#courses-table > thead > tr > th {
	font-family: var(--tf-condensed);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tf-bone-dim);
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--tf-copper);
	padding: 12px 14px;
	vertical-align: bottom;
	white-space: nowrap;
}

#courses-table > tbody > tr > td {
	background: transparent;
	border: 0;
	border-top: 1px solid var(--tf-line);
	padding: 16px 14px;
	vertical-align: middle;
	color: var(--tf-bone);
}

/* Subtle striping on real course rows only (event rows sit in between) */
#courses-table > tbody > tr.course-item.odd > td {
	background: var(--tf-ink-soft);
}

#courses-table > tbody > tr.course-item.even > td {
	background: transparent;
}

#courses-table > tbody > tr.course-item:hover > td {
	background: var(--tf-ink-raised);
}

/* Date column */
.course-firstEvent {
	display: inline-block;
	white-space: nowrap;
}

/* Weekday = the site's copper condensed label; date/time = mono figures */
.course-firstEvent-day {
	font-family: var(--tf-condensed);
	font-weight: 700;
	font-size: 17px;
	line-height: 1;
	text-transform: uppercase;
	color: var(--tf-copper);
	letter-spacing: 0.06em;
	margin-right: 2px;
}

.course-firstEvent-date {
	font-family: var(--tf-mono);
	font-weight: 500;
	font-size: 14px;
	color: var(--tf-bone);
	font-variant-numeric: tabular-nums;
}

.course-firstEvent-time {
	display: block;
	font-family: var(--tf-mono);
	font-weight: 500;
	color: var(--tf-bone-dim);
	font-size: 13px;
	margin-top: 4px;
	font-variant-numeric: tabular-nums;
}

/* Course name */
.course-displayName {
	font-family: var(--tf-font);
	font-weight: 700;
	font-size: 17px;
	line-height: 1.3;
	color: var(--tf-bone);
	letter-spacing: 0;
}

#courses-table td.col-coursename {
	min-width: 160px;
}

/* Location / teacher / remarks: secondary info */
#courses-table td.col-location,
#courses-table td.col-teacher,
#courses-table td.col-remarks {
	color: var(--tf-bone-dim);
	font-size: 14px;
}

.location-name {
	display: block;
	color: var(--tf-bone-dim);
	font-size: 12px;
}

.room-name {
	display: block;
	color: var(--tf-bone);
}

/* Events column + toggle */
.course-numberOfEvents {
	color: var(--tf-bone-dim);
	font-size: 14px;
}

.events-info {
	color: var(--tf-copper);
	cursor: pointer;
	margin-left: 4px;
	transition: color 0.15s ease;
}

.events-info:hover {
	color: var(--tf-copper-light);
}

/* Price */
#courses-table td.col-price {
	white-space: nowrap;
}

.course-price {
	font-weight: 700;
	color: var(--tf-bone);
	font-size: 15px;
}

/* Action column */
#courses-table > tbody > tr.course-item > td:last-child {
	text-align: right;
	white-space: nowrap;
}

/* Expandable event list (display is toggled by Nimbus JS — never set display here) */
#courses-table > tbody > tr.course-events > td {
	background: var(--tf-ink) !important;
	border-top: 0;
	padding: 4px 14px 18px 14px;
}

#courses-table .course-events table {
	width: 100%;
	max-width: 560px;
	border-collapse: collapse;
	border-left: 2px solid var(--tf-copper);
	font-family: var(--tf-mono);
	font-weight: 500;
	font-size: 13px;
	color: var(--tf-bone);
}

#courses-table .course-events table td {
	border: 0;
	border-bottom: 1px solid var(--tf-line);
	padding: 7px 12px;
	background: transparent;
}

#courses-table .course-event-item .event-number {
	color: var(--tf-bone-dim);
	width: 44px;
	font-variant-numeric: tabular-nums;
}

#courses-table .course-event-item .event-end-time,
#courses-table .course-event-item .event-block {
	color: var(--tf-bone-dim);
}

#courses-table .course-event-item.past-item td {
	color: var(--tf-bone-dim);
	text-decoration: line-through;
	text-decoration-color: var(--tf-line-strong);
}

#courses-table .course-event-item.past-item .event-end-time,
#courses-table .course-event-item.past-item .event-block {
	text-decoration: none;
}

/* Empty state */
.no-course-warning {
	margin: 24px 0 0;
	border: 1px solid var(--tf-line);
	border-left: 2px solid var(--tf-copper);
	background: var(--tf-ink-soft);
	color: var(--tf-bone);
	font-size: 15px;
	padding: 20px;
}

/* Hide the empty table head when there are no courses */
#courses-table:has(> tbody:empty) {
	display: none;
}

/* --- Narrow: table → stacked cards ------------------------------------- */
@media (max-width: 767px) {
	#courses-table,
	#courses-table > tbody {
		display: block;
		width: 100%;
	}

	#courses-table > thead {
		display: none;
	}

	#courses-table > tbody > tr.course-item {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"date     date"
			"name     name"
			"location location"
			"events   price"
			"remarks  remarks"
			"action   action";
		align-items: center;
		border: 1px solid var(--tf-line);
		border-radius: var(--tf-radius);
		background: var(--tf-ink-soft);
		padding: 16px 16px 16px;
		margin: 0 0 12px;
	}

	#courses-table > tbody > tr.course-item > td {
		display: block;
		border: 0;
		padding: 0;
		background: transparent !important;
		text-align: left;
		min-width: 0;
		white-space: normal;
	}

	#courses-table > tbody > tr.course-item > td.col-firstEvent {
		grid-area: date;
		padding-bottom: 8px;
		margin-bottom: 10px;
		border-bottom: 1px solid var(--tf-line);
	}

	#courses-table .course-firstEvent {
		white-space: normal;
	}

	#courses-table .course-firstEvent-time {
		display: inline;
		margin-left: 4px;
	}

	#courses-table > tbody > tr.course-item > td.col-coursename {
		grid-area: name;
		min-width: 0;
	}

	.course-displayName {
		font-size: 19px;
		line-height: 1.25;
	}

	#courses-table > tbody > tr.course-item > td.col-location {
		grid-area: location;
		padding-top: 2px;
	}

	#courses-table .location-name {
		display: none;
	}

	#courses-table .room-name {
		color: var(--tf-bone-dim);
		font-size: 13px;
	}

	#courses-table > tbody > tr.course-item > td.col-teacher {
		display: none;
	}

	#courses-table > tbody > tr.course-item > td.col-events {
		grid-area: events;
		padding-top: 12px;
	}

	#courses-table > tbody > tr.course-item > td.col-price {
		grid-area: price;
		padding-top: 12px;
		text-align: right;
	}

	#courses-table > tbody > tr.course-item > td.col-remarks {
		grid-area: remarks;
		font-size: 13px;
	}

	#courses-table > tbody > tr.course-item > td:last-child {
		grid-area: action;
		padding-top: 14px;
	}

	#courses-table > tbody > tr.course-item > td:last-child .btn {
		display: flex;
		width: 100%;
		text-align: center;
		padding: 15px 14px;
		font-size: 16px;
		white-space: normal;
	}

	/* Event list under its card (Nimbus JS sets inline display:table-row) */
	#courses-table > tbody > tr.course-events {
		margin: -13px 0 12px;
	}

	/* jQuery .show() sets inline display:table-row — turn it into a block under the card */
	#courses-table > tbody > tr.course-events[style*="table-row"] {
		display: block !important;
	}

	#courses-table > tbody > tr.course-events > td {
		display: block;
		padding: 0 0 16px;
		border: 1px solid var(--tf-line);
		border-top: 0;
		background: var(--tf-ink-soft) !important;
	}

	#courses-table .course-events table {
		max-width: none;
		border-left: 0;
		border-top: 1px solid var(--tf-line);
	}

	#courses-table .course-events table td {
		padding: 7px 8px;
	}

	#courses-table .course-event-item .event-number {
		width: 32px;
		padding-left: 16px;
	}

	#courses-table .course-event-item .event-isStart:empty,
	#courses-table .course-event-item .event-block {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Registration form  (body.public-registration-form-page)
   -------------------------------------------------------------------------- */
.public-registration-form-page #public-registration-form {
	width: 100%;
	max-width: 880px;
	margin: 0 auto;
	padding: 8px 0 24px;
	height: auto !important;
	max-height: none !important;
	background: transparent;
	box-shadow: none;
	border-radius: 0;
}

/* Course summary block */
#public-registration-form > .alert-info {
	margin-bottom: 32px;
	padding: 24px;
	font-size: 15px;
	color: var(--tf-bone);
}

#public-registration-form > .alert-info .registration-name-text-prefix {
	display: block;
	font-family: var(--tf-condensed);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tf-copper);
	margin-bottom: 8px;
}

/* Course name = the site's Anton panel heading */
#public-registration-form > .alert-info .course-system-name,
#public-registration-form > .alert-info .course-key {
	display: block;
	font-family: var(--tf-display);
	font-size: 36px;
	line-height: 0.95;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--tf-bone);
	overflow-wrap: anywhere;
	hyphens: auto;
}

#public-registration-form > .alert-info .course-system-name {
	font-family: var(--tf-condensed);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--tf-bone-dim);
	letter-spacing: 0.08em;
	margin-bottom: 6px;
}

#public-registration-form .info-label {
	display: inline-block;
	min-width: 120px;
	font-family: var(--tf-condensed);
	font-weight: 700;
	text-transform: uppercase;
	color: var(--tf-bone-dim);
	font-size: 15px;
	letter-spacing: 0.06em;
}

#public-registration-form .info-label .fas {
	color: var(--tf-copper);
}

#public-registration-form .info-text {
	color: var(--tf-bone);
}

/* Rich-text details pasted in Nimbus carry inline font sizes/families */
#public-registration-form .info-text,
#public-registration-form .info-text p,
#public-registration-form .info-text li {
	font-size: 15px;
	line-height: 1.6;
}

#public-registration-form .info-text [style],
#form-success [style],
.payment-method-info [style] {
	font-size: inherit !important;
	font-family: inherit !important;
	color: inherit !important;
}

#public-registration-form .alert-info .info-text {
	display: block;
	margin-top: 4px;
	padding: 14px 0 0;
	border-top: 1px solid var(--tf-line);
}

#public-registration-form .alert-info .info-text#selected-date-text,
#public-registration-form .alert-info .info-text#selected-info-text,
#public-registration-form .alert-info span.info-text.room-label {
	display: inline;
	padding: 0;
	border: 0;
	margin: 0;
}

#public-registration-form .info-text p {
	margin: 0 0 8px;
}

#public-registration-form .info-text ul {
	margin: 0 0 14px;
	padding-left: 18px;
}

#public-registration-form .info-text li {
	color: var(--tf-bone);
	margin: 2px 0;
}

#public-registration-form .info-text li::marker {
	color: var(--tf-copper);
}

#public-registration-form .single-or-pair-only {
	color: var(--tf-bone);
	font-size: 14px;
}

#public-registration-form .single-or-pair-only .fas {
	color: var(--tf-copper);
}

/* Section headers = the site's Anton headings over a copper hairline
   (the same rule that sits above the embed on /dance-floor/) */
.registration-section-header {
	display: block;
	font-family: var(--tf-display);
	font-size: 28px;
	font-weight: 400;
	line-height: 0.95;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--tf-bone);
	border-top: 1px solid var(--tf-copper);
	padding: 14px 0 0;
	margin: 12px 0 24px;
	text-align: left;
}

#partnerOptional {
	font-family: var(--tf-font);
	font-size: 15px;
	color: var(--tf-bone-dim);
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
}

/* Grid: label column + field column */
#public-registration-form .row {
	margin-left: 0;
	margin-right: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

#public-registration-form .row::before,
#public-registration-form .row::after {
	display: none;
}

#public-registration-form .row > [class*="col-xs-"] {
	float: none;
	padding-left: 0;
	padding-right: 0;
}

#public-registration-form .row > .col-xs-4 {
	width: 32%;
	padding-right: 20px;
}

#public-registration-form .row > .col-xs-6 {
	width: 68%;
}

#public-registration-form .row > .col-xs-offset-4 {
	margin-left: 32%;
}

/* Labels = the site's .field-label (Kontakt form) */
#public-registration-form label {
	font-family: var(--tf-condensed);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tf-bone);
	margin: 0;
	line-height: 1.2;
}

/* Tall rows (booking tiles, textareas): label to the top */
#public-registration-form .row:has(.booking-types-container),
#public-registration-form .row:has(textarea) {
	align-items: flex-start;
}

#public-registration-form .row:has(.booking-types-container) > .col-xs-4,
#public-registration-form .row:has(textarea) > .col-xs-4 {
	padding-top: 12px;
}

#public-registration-form label.optional-item {
	color: var(--tf-bone-dim);
}

/* Required marker */
#public-registration-form .required-item::after {
	content: " *";
	color: var(--tf-copper);
	font-weight: 700;
}

/* Inputs = the site's .field: ink-soft, hairline, 2px bottom rule that turns
   bone on hover and copper on focus; square */
:is(.public-registration-form-page, .coupon-form) .form-control {
	display: block;
	width: 100%;
	height: 50px;
	padding: 12px 16px;
	margin: 0;
	font-family: var(--tf-font);
	font-size: 16px; /* 16px stops iOS zoom-on-focus */
	color: var(--tf-bone);
	background-color: var(--tf-ink-soft);
	border: 1px solid var(--tf-line);
	border-bottom: 2px solid var(--tf-bone-dim);
	border-radius: 0;
	box-shadow: none;
	text-shadow: none;
	transition: border-color 0.18s ease;
}

:is(.public-registration-form-page, .coupon-form) textarea.form-control {
	height: auto;
	min-height: 96px;
	resize: vertical;
}

:is(.public-registration-form-page, .coupon-form) .form-control::placeholder {
	color: var(--tf-bone-dim);
	opacity: 1;
}

:is(.public-registration-form-page, .coupon-form) .form-control:hover {
	border-bottom-color: var(--tf-bone);
}

:is(.public-registration-form-page, .coupon-form) .form-control:focus {
	border-color: var(--tf-line);
	border-bottom-color: var(--tf-copper);
	box-shadow: none;
	outline: none;
}

:is(.public-registration-form-page, .coupon-form) .form-control:focus-visible {
	outline: 2px solid var(--tf-copper) !important;
	outline-offset: 2px !important;
}

:is(.public-registration-form-page, .coupon-form) .form-control[disabled],
:is(.public-registration-form-page, .coupon-form) .form-control[readonly] {
	background: var(--tf-ink);
	color: var(--tf-bone-dim);
	cursor: not-allowed;
}

/* Datepicker inputs: keep text cursor + calendar hint */
:is(.public-registration-form-page, .coupon-form) .form-control.datepicker {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23e17c33' stroke-width='1.5'%3E%3Crect x='2' y='3' width='12' height='11'/%3E%3Cpath d='M2 6.5h12M5 1.5v3M11 1.5v3'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 42px;
}

/* Browser autofill */
:is(.public-registration-form-page, .coupon-form) .form-control:-webkit-autofill,
:is(.public-registration-form-page, .coupon-form) .form-control:-webkit-autofill:hover,
:is(.public-registration-form-page, .coupon-form) .form-control:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--tf-bone);
	-webkit-box-shadow: 0 0 0 1000px var(--tf-ink-raised) inset;
	caret-color: var(--tf-bone);
}

/* Selects */
:is(.public-registration-form-page, .coupon-form) select.form-control {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 42px;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23e17c33' stroke-width='1.75'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
}

:is(.public-registration-form-page, .coupon-form) select.form-control option {
	background: var(--tf-ink-soft);
	color: var(--tf-bone);
}

/* Checkboxes */
:is(.public-registration-form-page, .coupon-form) input[type="checkbox"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin: 0 6px 0 0;
	vertical-align: middle;
	background: var(--tf-ink-soft);
	border: 1px solid var(--tf-bone-dim);
	border-radius: 0;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

:is(.public-registration-form-page, .coupon-form) input[type="checkbox"]:hover {
	border-color: var(--tf-copper);
}

:is(.public-registration-form-page, .coupon-form) input[type="checkbox"]:checked {
	background-color: var(--tf-copper);
	border-color: var(--tf-copper);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%230f0d0c' stroke-width='2.25'%3E%3Cpath d='M2.5 7.5l3 3 6-7'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

:is(.public-registration-form-page, .coupon-form) input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--tf-copper) !important;
	outline-offset: 2px !important;
}

/* AGB / privacy rows: checkbox sits in the label column */
#agb-container > .col-xs-4,
#privacy-container > .col-xs-4 {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

#agb-container .agb-text,
#privacy-container .privacy-text {
	font-family: var(--tf-font);
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	color: var(--tf-bone);
	font-size: 15px;
	line-height: 1.5;
}

/* "Lesen" next to AGB / Datenschutz: small ghost slab */
#agb-container .btn,
#privacy-container .btn {
	margin-left: 8px;
	padding: 7px 11px;
	font-size: 13px;
	border-width: 1px;
}

/* Booking type tiles */
.public-registration-form-page .booking-types-container {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 10px;
}

.public-registration-form-page .booking-type-item {
	margin: 0;
	min-width: 0;
	max-width: none;
	padding: 14px 14px 12px;
	text-align: left;
	background: var(--tf-ink-soft);
	border: 1px solid var(--tf-line-strong);
	border-radius: 0;
	color: var(--tf-bone);
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
	font-weight: 400;
}

.public-registration-form-page .booking-type-item:hover {
	border-color: var(--tf-copper);
}

.public-registration-form-page .booking-type-item .booking-type-name {
	display: block;
	font-family: var(--tf-condensed);
	font-weight: 700;
	font-size: 17px;
	line-height: 1.15;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tf-bone);
}

.public-registration-form-page .booking-type-name-seperator {
	display: block;
	height: 6px;
	visibility: hidden;
}

.public-registration-form-page .booking-type-name-price {
	display: block;
	font-style: normal;
	font-size: 13px;
	color: var(--tf-bone-dim);
}

.public-registration-form-page .booking-type-price {
	color: var(--tf-bone-dim);
}

.public-registration-form-page .booking-type-item.selected {
	background: var(--tf-copper-tint);
	border: 1px solid var(--tf-copper);
	box-shadow: inset 0 0 0 1px var(--tf-copper);
	font-weight: 400;
	padding: 14px 14px 12px;
	border-radius: 0;
	color: var(--tf-bone);
}

.public-registration-form-page .booking-type-item.selected .booking-type-price {
	color: var(--tf-copper-light);
	font-weight: 700;
}

/* Copy-partner-data button row */
#partnerData .pull-right {
	float: none !important;
}

/* Payment info texts */
.payment-method-info-container {
	margin-top: 16px;
}

.payment-method-info-container .payment-method-info {
	margin: 12px 0 0 !important;
	width: 100%;
	font-size: 14px;
	line-height: 1.6;
	color: var(--tf-bone-dim);
}

.payment-method-info.sepa:first-child {
	display: flex;
	align-items: center;
	color: var(--tf-bone);
	font-weight: 600;
}

.payment-method-info label,
#row-coupon-result .alert-info label {
	font-family: var(--tf-font) !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

.payment-method-info.sepa .required-item::after {
	margin-right: 6px;
}

.payment-method-info p {
	margin: 0;
}

/* Footer: result + actions */
.form-result-and-actions .clearfix {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.form-result-and-actions .clearfix::before,
.form-result-and-actions .clearfix::after {
	display: none;
}

.form-result-and-actions .pull-left,
.form-result-and-actions .pull-right {
	float: none !important;
}

.form-result-and-actions .pull-left p {
	margin: 0 0 4px;
	font-size: 13px;
	color: var(--tf-bone-dim);
}

.form-result-and-actions .pull-left .fas {
	color: var(--tf-copper);
}

#registrationFormSend,
#registration-form-send-surrogate {
	padding: 18px 32px;
	font-size: 18px;
	margin-left: auto;
}

/* Errors / payment message / success */
.public-registration-form-page #form-error {
	margin: 0 0 20px;
	padding: 14px 18px;
	border: 1px solid var(--tf-error);
	border-left-width: 3px;
	border-radius: var(--tf-radius);
	background: var(--tf-error-tint) !important;
	color: var(--tf-error);
	font-weight: 600;
	font-size: 15px;
	text-align: left;
}

.public-registration-form-page #form-error ul {
	margin: 8px 0 0;
	padding-left: 18px;
	font-weight: 400;
}

.public-registration-form-page #form-error a {
	color: var(--tf-error);
}

.public-registration-form-page #form-payment-message {
	margin: 0 0 20px;
	padding: 16px 18px;
	border: 1px solid var(--tf-copper);
	border-radius: var(--tf-radius);
	background: var(--tf-copper-tint);
	color: var(--tf-bone);
	text-align: left;
}

.public-registration-form-page #form-success {
	max-width: 880px;
	margin: 24px auto;
	padding: 28px 24px;
	border: 1px solid var(--tf-success);
	border-left-width: 3px;
	border-radius: var(--tf-radius);
	background: var(--tf-success-tint) !important;
	color: var(--tf-bone);
	font-size: 16px;
	text-align: left;
}

.public-registration-form-page #form-success > .fas {
	display: block;
	width: auto;
	font-size: 28px;
	color: var(--tf-success);
	margin-bottom: 12px;
	text-align: left;
}

.public-registration-form-page #form-success p {
	margin: 0 0 8px;
	font-weight: 700;
}

#reference-number {
	font-family: var(--tf-mono);
	color: var(--tf-copper-light);
	font-weight: 700;
}

/* Coupon result */
#row-coupon-result .alert-info label {
	color: var(--tf-bone-dim);
	font-weight: 600;
	font-size: 13px;
}

/* --- Narrow registration: stack label above field --------------------- */
@media (max-width: 640px) {
	.public-registration-form-page #public-registration-form {
		padding: 0 0 16px;
	}

	#public-registration-form > .alert-info {
		padding: 18px 16px;
	}

	#public-registration-form > .alert-info .course-key {
		font-size: 30px;
	}

	.registration-section-header {
		font-size: 24px;
	}

	#public-registration-form .row > .col-xs-4,
	#public-registration-form .row > .col-xs-6 {
		width: 100%;
		padding-right: 0;
	}

	#public-registration-form .row > .col-xs-4 {
		margin-bottom: 6px;
	}

	#public-registration-form .row > .col-xs-offset-4 {
		margin-left: 0;
	}

	#agb-container,
	#privacy-container {
		flex-wrap: nowrap !important;
		align-items: flex-start !important;
	}

	#agb-container > .col-xs-4,
	#privacy-container > .col-xs-4 {
		width: auto !important;
		margin: 0 8px 0 0;
		justify-content: flex-start;
	}

	#agb-container > .col-xs-6,
	#privacy-container > .col-xs-6 {
		width: auto !important;
		flex: 1 1 auto;
	}

	.public-registration-form-page .booking-types-container {
		grid-template-columns: 1fr 1fr;
	}

	#registrationFormSend,
	#registration-form-send-surrogate {
		display: flex;
		width: 100%;
		text-align: center;
		margin-left: 0;
	}

	.form-result-and-actions .pull-left {
		order: 2;
	}
}

@media (max-width: 380px) {
	.public-registration-form-page .booking-types-container {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   Gutschein  (body.coupon-form, ?r=/registration/iframe/coupon)
   Same language as the registration form: Anton step titles over a copper
   hairline, condensed labels, site fields, square tiles.
   -------------------------------------------------------------------------- */
#public-coupon-form {
	width: 100%;
	max-width: 880px;
	padding: 8px 0 24px;
}

.coupon-form .coupon-step-container {
	margin: 0 0 32px;
	border: 0;
	border-top: 1px solid var(--tf-copper);
	background: transparent;
}

.coupon-form .coupon-step-container .coupon-step-header {
	align-items: center;
	gap: 16px;
	padding: 14px 0 0;
	border: 0;
	background: transparent;
}

.coupon-form .coupon-step-header .registration-section-header {
	margin: 0;
	padding: 0;
	border: 0;
}

.coupon-form .coupon-step-container.closed .registration-section-header {
	color: var(--tf-bone-dim);
}

.coupon-form .coupon-step-header:hover .registration-section-header {
	color: var(--tf-bone);
}

.coupon-form .coupon-step-header .header-icons {
	color: var(--tf-copper);
	font-size: 16px;
}

.coupon-form .coupon-step-container .coupon-step-body {
	padding: 24px 0 4px;
}

.coupon-form .form-row {
	margin: 0 0 22px;
}

.coupon-form .form-label {
	margin: 0 0 8px;
}

.coupon-form label {
	margin: 0;
	font-family: var(--tf-condensed);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tf-bone);
}

.coupon-form label.optional-item {
	color: var(--tf-bone-dim);
}

.coupon-form .required-item::after {
	content: " *";
	color: var(--tf-copper);
	font-weight: 700;
}

.coupon-form .form-row .form-value > .form-control {
	max-width: none;
}

.coupon-form .hint-text {
	margin: 0 0 16px;
	padding: 18px 20px;
	border: 1px solid var(--tf-line);
	border-left: 2px solid var(--tf-copper);
	background: var(--tf-ink-soft);
	color: var(--tf-bone-dim);
	font-size: 14px;
	line-height: 1.65;
}

.coupon-form .hint-text b,
.coupon-form .hint-text strong {
	font-family: var(--tf-condensed);
	font-size: 16px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tf-bone);
}

/* Design + value tiles */
.coupon-form .coupon-template-row .form-value,
.coupon-form .coupon-value-row .form-value {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 10px;
}

.coupon-form .coupon-template-row .form-value::before,
.coupon-form .coupon-template-row .form-value::after,
.coupon-form .coupon-value-row .form-value::before,
.coupon-form .coupon-value-row .form-value::after {
	display: none;
}

.coupon-form .coupon-template-item,
.coupon-form .coupon-value-item {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 12px;
	min-width: 0;
	max-width: none;
	margin: 0;
	padding: 14px;
	text-align: left;
	color: var(--tf-bone);
	background: var(--tf-ink-soft);
	border: 1px solid var(--tf-line-strong);
	border-radius: 0;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.coupon-form .coupon-template-item:hover,
.coupon-form .coupon-value-item:hover {
	border-color: var(--tf-copper);
}

.coupon-form .coupon-template-item.selected,
.coupon-form .coupon-value-item.selected {
	border: 1px solid var(--tf-copper);
	box-shadow: inset 0 0 0 1px var(--tf-copper);
	background: var(--tf-copper-tint);
}

.coupon-form .coupon-template-name {
	font-family: var(--tf-condensed);
	font-weight: 700;
	font-size: 17px;
	line-height: 1.15;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.coupon-form .coupon-template-item .btn {
	margin: 0;
	font-size: 13px;
	padding: 8px 12px;
}

/* Values as the site's big counts (Anton figures) */
.coupon-form .coupon-value-item:not(.custom-value) {
	padding: 18px 14px;
	font-size: inherit;
}

.coupon-form .coupon-value-item:not(.custom-value) .coupon-value {
	font-family: var(--tf-display);
	font-size: 34px;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--tf-bone);
}

.coupon-form .coupon-value-item.selected:not(.custom-value) .coupon-value {
	color: var(--tf-copper-light);
}

.coupon-form .coupon-value-item.custom-value .coupon-value {
	font-family: var(--tf-condensed);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tf-bone-dim);
}

.coupon-form .coupon-custom-value-container {
	display: flex;
	width: 100%;
}

.coupon-form .coupon-custom-value-container .form-control {
	flex: 1 1 auto;
	min-width: 0;
	height: 44px;
}

.coupon-form .input-group-addon {
	display: flex;
	align-items: center;
	width: auto;
	padding: 0 12px;
	font-family: var(--tf-mono);
	font-size: 14px;
	color: var(--tf-bone-dim);
	background: var(--tf-ink);
	border: 1px solid var(--tf-line);
	border-bottom: 2px solid var(--tf-bone-dim);
	border-left: 0;
	border-radius: 0;
}

/* Step 2: two columns with a real gutter (Nimbus uses 50%/50% flex rows) */
@media (min-width: 500px) {
	.coupon-form .coupon-step-container[data-step="2"] .coupon-step-body {
		column-gap: 20px;
	}

	.coupon-form .coupon-step-container[data-step="2"] .coupon-step-body .form-row {
		flex: 0 0 calc(50% - 10px);
		min-width: 0;
		max-width: none;
	}
}

/* AGB / privacy checkboxes */
.coupon-form .form-checkbox {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 4px;
}

.coupon-form .form-checkbox label {
	font-family: var(--tf-font);
	font-weight: 400;
	font-size: 15px;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.5;
	margin-right: 6px;
}

.coupon-form .form-checkbox .required-item {
	margin-right: 2px;
}

.coupon-form .form-checkbox .btn {
	padding: 7px 11px;
	font-size: 13px;
	border-width: 1px;
}

.coupon-form .submit-btn-container {
	display: flex;
	justify-content: flex-end;
}

#coupon-form-send {
	padding: 18px 32px;
	font-size: 18px;
}

.coupon-form .alert {
	margin-top: 20px;
	text-align: left;
}

@media (max-width: 640px) {
	.coupon-form .coupon-template-row .form-value,
	.coupon-form .coupon-value-row .form-value {
		grid-template-columns: 1fr 1fr;
	}

	.coupon-form .coupon-value-item:not(.custom-value) .coupon-value {
		font-size: 28px;
	}

	#coupon-form-send {
		display: flex;
		width: 100%;
	}

	/* keep the label beside its checkbox; "Lesen" may sit at the end */
	.coupon-form .form-checkbox {
		flex-wrap: nowrap;
		align-items: flex-start;
	}

	.coupon-form .form-checkbox label {
		flex: 1 1 0;
		min-width: 0;
	}
}

/* --------------------------------------------------------------------------
   Datepickers
   1) bootstrap-datepicker (what the registration form actually uses)
   -------------------------------------------------------------------------- */
.datepicker.dropdown-menu {
	background: var(--tf-ink-soft) !important;
	border: 1px solid var(--tf-line-strong) !important;
	border-radius: var(--tf-radius) !important;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55) !important;
	padding: 8px;
	color: var(--tf-bone);
	font-family: var(--tf-font);
	font-size: 13px;
	min-width: 0;
}

.datepicker.dropdown-menu::before,
.datepicker.dropdown-menu::after {
	display: none;
}

.datepicker table {
	border-collapse: collapse;
	margin: 0;
}

.datepicker table tr td,
.datepicker table tr th {
	width: 34px;
	height: 32px;
	text-align: center;
	border: 0;
	border-radius: var(--tf-radius);
	background: transparent;
	color: var(--tf-bone);
	font-variant-numeric: tabular-nums;
}

.datepicker table tr th {
	font-weight: 700;
	cursor: pointer;
}

.datepicker table thead tr:last-child th,
.datepicker .dow {
	font-family: var(--tf-condensed);
	color: var(--tf-bone-dim);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: default;
}

.datepicker .datepicker-switch {
	font-family: var(--tf-condensed);
	font-size: 16px;
	text-transform: uppercase;
	color: var(--tf-bone);
	letter-spacing: 0.06em;
}

.datepicker .prev,
.datepicker .next {
	color: var(--tf-copper);
	font-size: 16px;
}

.datepicker table tr th:hover,
.datepicker table tr td.day:hover,
.datepicker table tr td span:hover {
	background: var(--tf-ink-raised);
	color: var(--tf-copper-light);
	cursor: pointer;
}

.datepicker table tr td.day {
	cursor: pointer;
}

.datepicker table tr td.old,
.datepicker table tr td.new {
	color: #8f867c;
}

.datepicker table tr td.cw,
.datepicker table tr th.cw {
	color: #8f867c;
	font-size: 10px;
	width: 26px;
	cursor: default;
}

.datepicker table tr td.today {
	box-shadow: inset 0 0 0 1px var(--tf-copper);
	color: var(--tf-copper-light);
	background: transparent;
}

.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover {
	background: var(--tf-copper) !important;
	color: var(--tf-ink) !important;
	font-weight: 700;
	text-shadow: none;
}

.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
	color: var(--tf-line-strong);
	background: transparent;
	cursor: default;
}

.datepicker table tr td span {
	display: block;
	float: left;
	width: 23%;
	height: 44px;
	line-height: 44px;
	margin: 1%;
	border-radius: var(--tf-radius);
	cursor: pointer;
	color: var(--tf-bone);
}

.datepicker table tr td span.old,
.datepicker table tr td span.new {
	color: #8f867c;
}

/* 2) jQuery UI datepicker (also loaded by Nimbus) */
.ui-datepicker {
	background: var(--tf-ink-soft) !important;
	border: 1px solid var(--tf-line-strong) !important;
	border-radius: var(--tf-radius) !important;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
	color: var(--tf-bone) !important;
	font-family: var(--tf-font) !important;
	padding: 8px;
}

.ui-datepicker .ui-datepicker-header {
	background: transparent !important;
	border: 0 !important;
	border-bottom: 1px solid var(--tf-line) !important;
	border-radius: 0 !important;
	color: var(--tf-bone) !important;
	font-weight: 700;
	padding: 6px 0 8px;
}

.ui-datepicker .ui-datepicker-title select {
	background: var(--tf-ink);
	color: var(--tf-bone);
	border: 1px solid var(--tf-line-strong);
	border-radius: var(--tf-radius);
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
	cursor: pointer;
	border: 0 !important;
	background: transparent !important;
}

.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover {
	background: var(--tf-ink-raised) !important;
}

.ui-datepicker th {
	font-family: var(--tf-condensed);
	color: var(--tf-bone-dim);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.ui-datepicker .ui-state-default,
.ui-datepicker .ui-widget-content .ui-state-default {
	background: transparent !important;
	border: 1px solid transparent !important;
	border-radius: var(--tf-radius);
	color: var(--tf-bone) !important;
	text-align: center;
}

.ui-datepicker .ui-state-hover,
.ui-datepicker .ui-widget-content .ui-state-hover {
	background: var(--tf-ink-raised) !important;
	color: var(--tf-copper-light) !important;
}

.ui-datepicker .ui-state-highlight {
	border-color: var(--tf-copper) !important;
	color: var(--tf-copper-light) !important;
}

.ui-datepicker .ui-state-active {
	background: var(--tf-copper) !important;
	border-color: var(--tf-copper) !important;
	color: var(--tf-ink) !important;
	font-weight: 700;
}

.ui-datepicker .ui-priority-secondary,
.ui-datepicker .ui-datepicker-other-month {
	color: #8f867c !important;
	opacity: 1;
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
	}
}