/**
 * Native Sign Ups: the public sign-up page (SignUpGenius baseline, in the
 * site's brand), the manage page, the contact modal, and the Board Portal
 * editor. Rides the palette tokens the plugin prints on every page (--rt-*).
 * Headers use the dark brand strip with a primary accent (the fleet card-band
 * recipe) so text stays readable whether a site's primary is blue, red, or a
 * light gold.
 */

/* ---- Page frame --------------------------------------------------------- */

.rt-su-page .rt-container {
	max-width: min(1100px, 94vw);
	margin: 0 auto;
	padding: 0 16px;
}

/* ---- Header ------------------------------------------------------------- */

.rt-su-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 190px;
	overflow: hidden;
	background-color: var(--rt-black, #141414);
	background-image:
		radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--rt-primary, #f4b41c) 45%, transparent) 0%, transparent 62%),
		linear-gradient(135deg, var(--rt-black, #141414) 0%, color-mix(in srgb, var(--rt-black, #141414) 78%, var(--rt-secondary, #d99a00)) 100%);
	box-shadow: inset 0 -5px 0 var(--rt-primary, #f4b41c);
	color: #fff;
}

.rt-su-hero.has-img {
	min-height: clamp(220px, 30vw, 380px);
	background-image:
		linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.25) 55%, rgba(0, 0, 0, 0.05) 100%),
		var(--rt-su-hero);
	background-size: cover;
	background-position: center;
}

.rt-su-hero-mark {
	position: absolute;
	right: 4%;
	top: calc(50% - 18px); /* centered in the band the info strip leaves showing */
	transform: translateY(-50%);
	height: 64%;
	max-height: 140px;
	width: auto;
	opacity: 0.92;
	pointer-events: none;
}

.rt-su-hero-inner {
	position: relative;
	width: min(1100px, 94vw);
	margin: 0 auto;
	padding: 30px 16px 58px;
	box-sizing: border-box;
}

.rt-su-kicker {
	margin: 0 0 6px;
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--rt-primary-bright, #ffc845);
}

.rt-su-hero .rt-su-title {
	margin: 0;
	max-width: 780px;
	color: #fff;
	font-size: clamp(1.7rem, 4vw, 2.7rem);
	line-height: 1.1;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

/* ---- Info strip (overlaps the header) ------------------------------------ */

.rt-su-info {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	margin: -36px 0 22px;
	background: #fff;
	border: 1px solid var(--rt-line, #e7e2d6);
	border-radius: 14px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
	overflow: hidden;
}

.rt-su-info-cell {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 16px 18px;
	border-right: 1px solid var(--rt-line, #e7e2d6);
	min-width: 0;
}

.rt-su-info-cell:last-child {
	border-right: 0;
}

.rt-su-info-cell > i {
	flex: 0 0 1.4em;
	margin-top: 3px;
	font-size: 1.15rem;
	text-align: center;
	color: var(--rt-secondary, #d99a00);
}

.rt-su-info-cell > div {
	min-width: 0;
	flex: 1 1 auto;
}

.rt-su-info-label {
	display: block;
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--rt-gray, #6b6b6b);
}

.rt-su-info-val {
	display: block;
	font-weight: 700;
	color: var(--rt-ink, #1f1f1f);
	overflow-wrap: anywhere;
}

.rt-su-meter {
	display: block;
	height: 8px;
	margin-top: 7px;
	background: var(--rt-line, #e7e2d6);
	border-radius: 999px;
	overflow: hidden;
}

.rt-su-meter > span {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--rt-primary, #f4b41c), var(--rt-primary-bright, #ffc845));
	border-radius: 999px;
}

.rt-su-meter--sm {
	height: 6px;
	max-width: 170px;
	margin-top: 5px;
}

.rt-su-contact-open {
	margin-top: 8px;
	padding: 5px 13px;
	background: transparent;
	border: 1px solid var(--rt-line, #e7e2d6);
	border-radius: 999px;
	font: inherit;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--rt-ink, #1f1f1f);
	cursor: pointer;
}

.rt-su-contact-open:hover {
	background: var(--rt-primary, #f4b41c);
	border-color: var(--rt-primary, #f4b41c);
	color: var(--rt-on-primary, #141414);
}

/* ---- Description --------------------------------------------------------- */

.rt-su-desc {
	margin: 0 0 22px;
	padding: 20px 24px;
	background: #fff;
	border: 1px solid var(--rt-line, #e7e2d6);
	border-radius: 14px;
	line-height: 1.65;
}

.rt-su-desc > :first-child { margin-top: 0; }
.rt-su-desc > :last-child { margin-bottom: 0; }

.rt-su-desc img {
	max-width: 100%;
	height: auto;
	border-radius: 10px;
	vertical-align: middle; /* an icon sits in its line of text */
}

.rt-su-desc h2,
.rt-su-desc h3,
.rt-su-desc h4 {
	margin: 1.1em 0 0.4em;
}

/* ---- Spots, grouped by date ---------------------------------------------- */

.rt-su-slots {
	margin: 0 0 8px;
}

.rt-su-day {
	margin: 0 0 18px;
	background: #fff;
	border: 1px solid var(--rt-line, #e7e2d6);
	border-radius: 14px;
	overflow: hidden;
}

.rt-su-day-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 12px 18px;
	background: var(--rt-black, #141414);
	box-shadow: inset 0 -3px 0 var(--rt-primary, #f4b41c);
	color: #fff;
	font-size: 1.05rem;
	letter-spacing: 0.01em;
}

.rt-su-day-title i {
	color: var(--rt-primary-bright, #ffc845);
}

.rt-su-row + .rt-su-row {
	border-top: 1px solid var(--rt-line, #e7e2d6);
}

.rt-su-row-main {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr) 200px auto;
	grid-template-areas: "time what avail act";
	gap: 16px;
	align-items: center;
	padding: 14px 18px;
}

.rt-su-row-time {
	grid-area: time;
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--rt-ink, #1f1f1f);
}

.rt-su-row-any {
	color: var(--rt-gray, #6b6b6b);
	font-weight: 600;
}

.rt-su-row-what {
	grid-area: what;
	display: flex;
	gap: 12px;
	align-items: flex-start;
	min-width: 0;
}

.rt-su-row-img {
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 10px;
}

.rt-su-row .rt-su-slot-name {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.3;
}

.rt-su-row-note,
.rt-su-row-loc {
	margin: 3px 0 0;
	color: var(--rt-gray, #6b6b6b);
	font-size: 0.9rem;
	line-height: 1.45;
}

.rt-su-row-avail {
	grid-area: avail;
	font-size: 0.88rem;
}

.rt-su-row-count {
	display: block;
	font-weight: 700;
	color: var(--rt-ink, #1f1f1f);
}

.rt-su-row-count.is-full {
	color: var(--rt-gray, #6b6b6b);
}

.rt-su-row-who {
	display: block;
	margin-top: 4px;
	color: var(--rt-gray, #6b6b6b);
	font-size: 0.82rem;
	line-height: 1.4;
}

.rt-su-row-act {
	grid-area: act;
	text-align: right;
}

.rt-su-row-act .rt-sg-btn {
	white-space: nowrap;
}

.rt-su-slot--full .rt-su-row-main {
	background: #fafafa;
}

.rt-su-row.is-open .rt-su-row-main {
	background: color-mix(in srgb, var(--rt-primary, #f4b41c) 7%, #fff);
}

/* ---- Claim form (opens under its row) ------------------------------------ */

.rt-su-form {
	padding: 4px 18px 18px;
	background: color-mix(in srgb, var(--rt-primary, #f4b41c) 7%, #fff);
	border-top: 1px dashed var(--rt-line, #e7e2d6);
}

.rt-su-form-note {
	margin: 12px 0 0;
	font-weight: 600;
}

.rt-su-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 16px;
	padding-top: 12px;
}

.rt-su-field {
	margin: 0 0 12px;
}

.rt-su-field label {
	display: block;
	font-weight: 600;
}

.rt-su-field input[type="text"],
.rt-su-field input[type="email"],
.rt-su-field input[type="number"],
.rt-su-field select,
.rt-su-field textarea {
	display: block;
	width: 100%;
	margin-top: 4px;
	padding: 9px 11px;
	border: 1px solid var(--rt-neutral, #cbd5e1);
	border-radius: 8px;
	background: #fff;
	font: inherit;
	box-sizing: border-box;
}

/* Honeypot: off-screen, never shown to a person. */
.rt-su-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Fleet rule: Cancel left, the primary action right. */
.rt-su-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}

.rt-su-actions > :last-child {
	margin-left: auto;
}

.rt-su-msg {
	margin: 10px 0 0;
	font-weight: 600;
}

.rt-su-msg--error {
	color: #b32d2e;
}

.rt-su-msg--ok,
.rt-su-done {
	color: var(--rt-ink, #1f1f1f);
}

.rt-su-done {
	margin: 14px 0 4px;
	font-weight: 700;
}

.rt-su-link {
	font-size: 0.9rem;
	word-break: break-all;
}

.rt-su-closed,
.rt-su-empty,
.rt-su-note {
	padding: 14px 0;
	text-align: center;
	font-size: 1.05rem;
	color: var(--rt-gray, #6b6b6b);
}

.rt-su-fineprint {
	margin: 6px 0 30px;
	text-align: center;
	font-size: 0.88rem;
	color: var(--rt-gray, #6b6b6b);
}

/* Before the Opens date: when it opens, a board preview note, and a chip in
   place of each Sign Up button. */
.rt-su-upcoming,
.rt-su-preview {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 16px;
	padding: 14px 18px;
	border-radius: 12px;
	font-weight: 600;
	line-height: 1.45;
}

.rt-su-upcoming {
	background: #e8f0fe;
	color: #1d3f8a;
	font-size: 1.05rem;
}

.rt-su-preview {
	background: #fff4dc;
	color: #7a4f00;
	font-size: 0.92rem;
}

.rt-su-upcoming i,
.rt-su-preview i {
	margin-top: 0.2em;
}

.rt-su-soon {
	display: inline-block;
	padding: 8px 14px;
	border-radius: 999px;
	background: #eef1f5;
	color: #4a5568;
	font-size: 0.85rem;
	font-weight: 700;
	white-space: nowrap;
}

/* ---- Manage page ---------------------------------------------------------- */

.rt-su-head {
	margin: 8px 0 4px;
	text-align: center;
}

.rt-su-head .rt-su-title {
	margin: 0;
}

.rt-su-year {
	margin: 4px 0 0;
	font-weight: 600;
	color: var(--rt-gray, #6b6b6b);
}

/* ---- Contact modal --------------------------------------------------------- */

.rt-su-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(0, 0, 0, 0.5);
}

.rt-su-modal-box {
	position: relative;
	width: 100%;
	max-width: 460px;
	max-height: 90vh;
	overflow: auto;
	padding: 22px;
	background: #fff;
	border-radius: 12px;
}

.rt-su-modal-box h2 {
	margin: 0 0 14px;
}

.rt-su-modal-x {
	position: absolute;
	top: 8px;
	right: 12px;
	background: none;
	border: 0;
	font-size: 1.6rem;
	line-height: 1;
	color: var(--rt-gray, #6b6b6b);
	cursor: pointer;
}

.rt-su-modal .rt-su-actions .rt-su-modal-x {
	position: static;
	font-size: inherit;
}

/* ---- Phones --------------------------------------------------------------- */

@media (max-width: 760px) {
	.rt-su-hero-inner {
		padding: 24px 16px 54px;
	}

	.rt-su-hero-mark {
		height: 40%;
		top: 18px;
		transform: none;
		opacity: 0.35;
	}

	.rt-su-info-cell {
		border-right: 0;
		border-bottom: 1px solid var(--rt-line, #e7e2d6);
	}

	.rt-su-info-cell:last-child {
		border-bottom: 0;
	}

	.rt-su-desc {
		padding: 16px 18px;
	}

	.rt-su-row-main {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"time act"
			"what what"
			"avail avail";
		gap: 8px 12px;
		padding: 14px 16px;
	}

	.rt-su-row-img {
		flex-basis: 52px;
		width: 52px;
		height: 52px;
	}

	.rt-su-meter--sm {
		max-width: none;
	}

	.rt-su-form {
		padding: 4px 16px 16px;
	}

	.rt-su-form-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==== Board Portal editor ================================================= */

.rt-su-editor form {
	padding: 0 1.2rem 1rem;
}

.rt-su-ed-h {
	margin: 20px 0 8px;
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--rt-gray, #6b6b6b);
}

.rt-su-editor .rt-board-grid small {
	display: block;
	font-weight: 400;
	color: var(--rt-gray, #6b6b6b);
}

/* A label with a hint under it makes its row taller; its neighbors' boxes
   keep their own height instead of stretching to match. */
.rt-su-editor .rt-board-grid > label {
	align-content: start;
}

.rt-su-hint {
	margin: 4px 0 0;
	font-size: 0.85rem;
	color: var(--rt-gray, #6b6b6b);
}

.rt-su-check {
	margin: 6px 0;
}

.rt-su-check label {
	font-weight: 700;
}

/* Spot rows */
.rt-su-brow {
	margin: 0 0 12px;
	padding: 14px;
	background: #fbfbfc;
	border: 1px solid var(--rt-line, #e2e8f0);
	border-left: 4px solid var(--rt-primary, #f4b41c);
	border-radius: 12px;
}

@media (min-width: 700px) {
	.rt-su-span2 {
		grid-column: span 2;
	}
}

.rt-su-inlinecheck span {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-top: 1.55rem;
	font-weight: 700;
}

/* The board grid stretches inputs to full width; a checkbox stays a checkbox. */
.rt-su-editor .rt-su-inlinecheck input[type="checkbox"] {
	width: auto;
	margin: 0;
}

/* Amount fields only matter on a paid spot. */
.rt-su-brow:not(:has(input[name$="[paid]"]:checked)) .rt-su-paidonly {
	display: none;
}

.rt-su-brow-foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 12px;
	margin-top: 12px;
}

.rt-su-brow-acts {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

/* A spot's times: one compact row each (date, start, end), labels once. */
.rt-su-times {
	display: grid;
	gap: 8px;
	padding: 12px;
	background: #fff;
	border: 1px solid var(--rt-line, #e2e8f0);
	border-radius: 10px;
}

.rt-su-times-h {
	font-size: 0.85rem;
	font-weight: 700;
}

.rt-su-time {
	display: grid;
	/* A fixed last column keeps every row lined up, badge or not. */
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) 8.5rem;
	align-items: end;
	gap: 8px 10px;
}

/* Date and time boxes the same height (the date box's calendar icon made it taller). */
.rt-su-editor .rt-su-time input {
	height: 2.75rem;
	box-sizing: border-box;
}

.rt-su-editor .rt-su-time label {
	display: grid;
	gap: 0.25rem;
	font-size: 0.8rem;
	font-weight: 700;
}

/* Column labels on the first time only; later rows keep them for screen readers. */
.rt-su-time + .rt-su-time label > span {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.rt-su-time-side {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	min-height: 2.75rem;
}

.rt-su-time-count {
	padding: 2px 8px;
	border-radius: 999px;
	background: #e6f6ec;
	color: #1f7a3f;
	font-size: 0.75rem;
	font-weight: 700;
	white-space: nowrap;
}

.rt-su-time-x {
	display: inline-grid;
	place-items: center;
	width: 2.2rem;
	height: 2.2rem;
	padding: 0;
	border: 1px solid var(--rt-line, #e2e8f0);
	border-radius: 8px;
	background: #fff;
	color: var(--rt-gray, #6b6b6b);
	cursor: pointer;
}

.rt-su-time-x:hover,
.rt-su-time-x.is-armed {
	border-color: #9b1c1c;
	color: #9b1c1c;
}

.rt-su-time-warn {
	grid-column: 1 / -1;
	font-size: 0.8rem;
	font-weight: 600;
	color: #9b1c1c;
}

.rt-su-time-add {
	justify-self: start;
}

@media (max-width: 560px) {
	.rt-su-time {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
	}
	.rt-su-time-side {
		justify-content: flex-start;
	}
	.rt-su-time label:first-of-type {
		grid-column: 1 / -1;
	}
	/* On a phone every row keeps its labels. */
	.rt-su-time + .rt-su-time label > span {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip: auto;
	}
	.rt-su-time + .rt-su-time {
		padding-top: 8px;
		border-top: 1px dashed var(--rt-line, #e2e8f0);
	}
}

/* Picture pickers */
.rt-su-upl {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.rt-su-upl-img {
	display: none;
	width: 64px;
	height: 64px;
	object-fit: cover;
	border: 1px solid var(--rt-line, #e2e8f0);
	border-radius: 8px;
}

.rt-su-upl.has-img .rt-su-upl-img {
	display: block;
}

.rt-su-upl--wide .rt-su-upl-img {
	width: 260px;
	height: 108px;
}

.rt-su-upl-btns {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.rt-su-upl-clear {
	display: none !important;
}

.rt-su-upl.has-img .rt-su-upl-clear {
	display: inline-block !important;
}

.rt-su-upl-msg {
	display: block;
	width: 100%;
	font-size: 0.82rem;
	color: var(--rt-gray, #6b6b6b);
}

.rt-su-upl-msg:empty {
	display: none;
}

/* Formatting editor */
.rt-su-rte {
	position: relative; /* anchors the picture size bar */
	background: #fff;
	border: 1px solid var(--rt-line, #cbd5e0);
	border-radius: 10px;
}

.rt-su-rte-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	padding: 6px;
	background: #f6f7f9;
	border-bottom: 1px solid var(--rt-line, #e2e8f0);
	border-radius: 10px 10px 0 0;
}

.rt-su-rte-btn {
	width: 34px;
	height: 32px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 6px;
	color: var(--rt-ink, #1f1f1f);
	cursor: pointer;
}

.rt-su-rte-btn:hover,
.rt-su-rte-btn:focus-visible {
	background: #e7eaf0;
}

.rt-su-rte-sep {
	width: 1px;
	margin: 4px;
	background: var(--rt-line, #e2e8f0);
}

.rt-su-rte-area {
	min-height: 170px;
	padding: 12px 14px;
	line-height: 1.6;
	outline: none;
}

.rt-su-rte-area:empty::before {
	content: attr(data-placeholder);
	color: var(--rt-gray, #6b6b6b);
}

.rt-su-rte-area img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	vertical-align: middle; /* an icon sits in its line of text */
	cursor: pointer;
}

.rt-su-rte-area img.is-sel {
	outline: 3px solid var(--rt-primary, #f4b41c);
	outline-offset: 2px;
}

/* Picture size bar: shows under a clicked picture. */
.rt-su-imgbar {
	position: absolute;
	z-index: 5;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	max-width: 100%;
	padding: 6px;
	background: var(--rt-black, #1a1d2b);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.rt-su-imgbar[hidden] {
	display: none;
}

.rt-su-imgbar-h {
	padding: 0 6px;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
}

.rt-su-imgbar button {
	padding: 5px 10px;
	border: 0;
	border-radius: 7px;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	font: inherit;
	font-size: 0.82rem;
	font-weight: 700;
	cursor: pointer;
}

.rt-su-imgbar button:hover,
.rt-su-imgbar button.is-on {
	background: var(--rt-primary, #f4b41c);
	color: var(--rt-on-primary, #1a1d2b);
}

.rt-su-imgbar .rt-su-imgbar-x {
	background: transparent;
	color: #ffb4b4;
}

.rt-su-rte > .rt-su-upl-msg {
	padding: 0 14px 8px;
}

/* Actions and secondary actions */
.rt-su-editor .rt-su-actions {
	margin-top: 18px;
}

.rt-su-secondary {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 14px;
	margin: 6px 1.2rem 1rem;
	padding-top: 12px;
	border-top: 1px solid var(--rt-line, #e2e8f0);
}

.rt-su-inline {
	display: inline;
}

.rt-su-danger,
.rt-su-danger:hover {
	color: #b32d2e !important;
}

/* The list */
.rt-su-board-new {
	margin: 0 0 14px;
}

.rt-su-board-name {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	text-decoration: none;
}

.rt-su-board-name img,
.rt-su-board-noimg {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	border-radius: 8px;
	object-fit: cover;
}

.rt-su-board-noimg {
	display: grid;
	place-items: center;
	background: #f1f3f6;
	color: var(--rt-gray, #6b6b6b);
}

.rt-su-board-name small {
	display: block;
	font-weight: 400;
	color: var(--rt-gray, #6b6b6b);
}

.rt-su-board-title {
	margin: 4px 0 8px;
}

.rt-su-board-acts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.rt-su-state {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 700;
	background: #eef1f5;
	color: #444;
}

.rt-su-state--live,
.rt-su-state--confirmed {
	background: #e6f6ec;
	color: #1f7a3f;
}

.rt-su-state--closed {
	background: #fdecec;
	color: #9b1c1c;
}

.rt-su-state--upcoming {
	background: #e8f0fe;
	color: #1d4ed8;
}

.rt-su-state--ended {
	background: #eef1f5;
	color: #4a5568;
}

.rt-su-state--waitlist,
.rt-su-state--held {
	background: #fff4dc;
	color: #8a5a00;
}