/**
 * Sport Alliance Connect — front-end styles.
 *
 * Deliberately unopinionated: colours, radii and spacing come from custom
 * properties so a theme can restyle everything without overriding rules.
 * Disable this file entirely under Settings → Sport Alliance.
 */

.sac {
	--sac-accent: #0b6b5b;
	--sac-accent-contrast: #ffffff;
	--sac-text: #1c1f22;
	--sac-muted: #5c6670;
	--sac-border: #dde2e6;
	--sac-surface: #ffffff;
	--sac-surface-alt: #f5f7f8;
	--sac-radius: 10px;
	--sac-gap: 1rem;
	--sac-danger: #a3231d;
	--sac-success: #1d6f3c;
	--sac-warning: #8a6100;

	color: var(--sac-text);
	box-sizing: border-box;
}

.sac *,
.sac *::before,
.sac *::after {
	box-sizing: inherit;
}

/*
 * Several blocks below set `display`, which on its own beats the `hidden`
 * attribute the scripts use to reveal and conceal them. This keeps hidden
 * meaning hidden.
 */
.sac [hidden] {
	display: none;
}

/* Layout ------------------------------------------------------------- */

.sac-grid {
	display: grid;
	gap: var(--sac-gap);
	grid-template-columns: 1fr;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 600px) {
	.sac-grid--2,
	.sac-grid--3,
	.sac-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.sac-grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.sac-grid--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.sac-card {
	background: var(--sac-surface);
	border: 1px solid var(--sac-border);
	border-radius: var(--sac-radius);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	position: relative;
}

.sac-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.6rem;
	min-width: 0;
	padding: 1.15rem;
}

.sac-empty {
	color: var(--sac-muted);
	font-style: italic;
}

/* Badges and pills --------------------------------------------------- */

.sac-badge {
	align-self: flex-start;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	padding: 0.18rem 0.6rem;
}

.sac-badge--open {
	background: #e3f3e8;
	color: var(--sac-success);
}

.sac-badge--closed {
	background: #f1f2f3;
	color: var(--sac-muted);
}

.sac-badge--demo {
	background: #fdf3d8;
	color: var(--sac-warning);
}

.sac-pill {
	background: var(--sac-surface-alt);
	border-radius: 999px;
	color: var(--sac-muted);
	font-size: 0.8rem;
	padding: 0.2rem 0.65rem;
}

.sac-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sac-tag {
	background: var(--sac-surface-alt);
	border-radius: 4px;
	font-size: 0.78rem;
	padding: 0.15rem 0.45rem;
}

/* Studios ------------------------------------------------------------ */

.sac-studio__name {
	font-size: 1.15rem;
	line-height: 1.3;
	margin: 0;
}

.sac-studio__address {
	color: var(--sac-muted);
	margin: 0;
}

.sac-studio__contact {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sac-studio__contact a {
	color: inherit;
	text-decoration: none;
}

.sac-studio__contact a:hover,
.sac-studio__contact a:focus {
	text-decoration: underline;
}

.sac-studio__hours summary {
	cursor: pointer;
	font-weight: 600;
}

.sac-studios__filter {
	margin-bottom: 1.25rem;
	max-width: 26rem;
}

.sac-studio-detail__grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
}

@media (min-width: 700px) {
	.sac-studio-detail__grid {
		grid-template-columns: 1fr 1fr;
	}
}

.sac-studio-detail__head {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.sac-studio-detail__name {
	margin: 0;
}

.sac-address {
	font-style: normal;
	line-height: 1.6;
}

/* Opening hours ------------------------------------------------------ */

.sac-hours__head {
	align-items: center;
	display: flex;
	gap: 0.75rem;
	justify-content: space-between;
	margin-bottom: 0.5rem;
}

.sac-hours__caption {
	font-size: 1rem;
	margin: 0;
}

.sac-hours__table {
	border-collapse: collapse;
	width: 100%;
}

.sac-hours__table th,
.sac-hours__table td {
	border-bottom: 1px solid var(--sac-border);
	font-weight: 400;
	padding: 0.35rem 0;
	text-align: left;
}

.sac-hours__table tr.is-today th,
.sac-hours__table tr.is-today td {
	font-weight: 700;
}

.sac-hours__closed {
	color: var(--sac-muted);
}

/* Utilization -------------------------------------------------------- */

.sac-utilization__head {
	align-items: center;
	display: flex;
	gap: 0.75rem;
	justify-content: space-between;
}

.sac-utilization__head h3 {
	font-size: 1rem;
	margin: 0;
}

.sac-utilization__chart {
	align-items: flex-end;
	display: flex;
	gap: 3px;
	height: 140px;
	list-style: none;
	margin: 0.75rem 0 0.5rem;
	padding: 0;
}

.sac-utilization__bar {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	height: 100%;
	justify-content: flex-end;
	position: relative;
}

.sac-utilization__fill {
	border-radius: 3px 3px 0 0;
	display: block;
	width: 100%;
}

.sac-utilization__fill--low {
	background: #9ccfae;
}

.sac-utilization__fill--normal {
	background: #e6b800;
}

.sac-utilization__fill--high {
	background: #d4674f;
}

.sac-utilization__bar.is-current .sac-utilization__fill {
	outline: 2px solid var(--sac-text);
	outline-offset: 1px;
}

.sac-utilization__hour {
	color: var(--sac-muted);
	font-size: 0.65rem;
	padding-top: 2px;
	text-align: center;
}

.sac-legend {
	color: var(--sac-muted);
	display: flex;
	font-size: 0.8rem;
	gap: 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sac-legend li {
	align-items: center;
	display: flex;
	gap: 0.35rem;
}

.sac-legend__swatch {
	border-radius: 3px;
	display: inline-block;
	height: 0.7rem;
	width: 0.7rem;
}

/* Rates -------------------------------------------------------------- */

.sac-rate--highlight {
	border-color: var(--sac-accent);
	box-shadow: 0 0 0 1px var(--sac-accent);
}

.sac-rate__ribbon {
	background: var(--sac-accent);
	color: var(--sac-accent-contrast);
	font-size: 0.75rem;
	font-weight: 700;
	padding: 0.25rem 0.75rem;
	position: absolute;
	right: 0;
	top: 0;
}

.sac-rate__image {
	display: block;
	height: auto;
	width: 100%;
}

.sac-rate__name {
	font-size: 1.2rem;
	margin: 0;
	overflow-wrap: break-word;
}

.sac-rate__description {
	margin: 0;
	overflow-wrap: break-word;
}

.sac-rate__sub {
	color: var(--sac-muted);
	margin: 0;
}

/*
 * The amount and its currency symbol are one unit and must never be split
 * across lines; when the rhythm ("per month") no longer fits beside them it
 * drops to its own line rather than wrapping mid-phrase.
 */
.sac-rate__price {
	align-items: baseline;
	column-gap: 0.4rem;
	display: flex;
	flex-wrap: wrap;
	margin: 0.25rem 0;
	row-gap: 0.1rem;
}

.sac-rate__price strong {
	font-size: 1.75rem;
	line-height: 1.15;
	white-space: nowrap;
}

.sac-rate__frequency {
	color: var(--sac-muted);
	font-size: 0.85rem;
	white-space: nowrap;
}

.sac-rate__modules {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sac-rate__modules li {
	padding-left: 1.25rem;
	position: relative;
}

.sac-rate__modules li::before {
	color: var(--sac-accent);
	content: "\2713";
	left: 0;
	position: absolute;
}

/*
 * Terms, payment methods and the checkout button sit at the foot of the card.
 * Descriptions differ wildly in length between offers, so without this the
 * blocks land at a different height in every column of the grid.
 */
.sac-rate__footer {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	margin-top: auto;
	padding-top: 0.4rem;
}

.sac-rate__terms {
	border-top: 1px solid var(--sac-border);
	display: grid;
	gap: 0.2rem;
	margin: 0;
	padding-top: 0.6rem;
}

.sac-rate__terms > div {
	display: flex;
	font-size: 0.88rem;
	gap: 0.5rem;
	justify-content: space-between;
}

/* The label may wrap, the value ("12 months") must stay in one piece. */
.sac-rate__terms dt {
	color: var(--sac-muted);
	flex: 1 1 auto;
	min-width: 0;
}

.sac-rate__terms dd {
	flex: 0 0 auto;
	margin: 0;
	text-align: right;
	white-space: nowrap;
}

.sac-rate__payments,
.sac-rate__footnote {
	color: var(--sac-muted);
	font-size: 0.8rem;
	margin: 0;
}

/*
 * Elementor-style offer cards. Elementor's global variables are supplied by
 * Theme_Bridge, while the markup and offer data remain owned by the plugin.
 */
.sac-rates--theme .sac-grid {
	gap: 1rem;
}

.sac-rates--theme .sac-rate {
	background: transparent;
	border: 1px solid var(--sac-elementor-accent);
	border-radius: 0;
	box-shadow: none;
	min-height: 100%;
	overflow: visible;
}

.sac-rates--theme .sac-rate__image {
	display: none;
}

.sac-rates--theme.sac-rates--show-images .sac-rate__image {
	display: block;
	align-self: stretch;
	height: auto;
	max-width: none !important;
	width: 100% !important;
}

.sac-rates--theme.sac-rates--show-images .sac-rate__ribbon--below-image {
	align-self: center;
	display: block;
	left: auto;
	margin: 0.55rem 0 0;
	position: static;
	right: auto;
	top: auto;
	transform: none;
	width: calc(100% - 1.5rem);
}

.sac-rates--theme .sac-card__body {
	align-items: center;
	gap: 0.55rem;
	padding: 1.35rem 1rem 1.5rem;
	text-align: center;
}

.sac-rates--theme .sac-rate:has(.sac-rate__ribbon:not(.sac-rate__ribbon--below-image)) .sac-card__body {
	padding-top: 3.45rem;
}

.sac-rates--theme {
	font-family: var(--sac-elementor-font-text);
}

.sac-rates--theme .sac-rate__name {
	color: var(--sac-elementor-accent);
	font-size: 1.35rem;
	font-style: italic;
	font-weight: 700;
	font-family: var(--sac-elementor-font-primary);
	line-height: 1.35;
	margin-bottom: 0.1rem;
}

.sac-rates--theme .sac-rate__sub,
.sac-rates--theme .sac-rate__description,
.sac-rates--theme .sac-rate__payments,
.sac-rates--theme .sac-rate__footnote {
	color: var(--sac-elementor-secondary);
	font-size: 0.78rem;
}

.sac-rates--theme .sac-rate__price {
	align-items: baseline;
	display: block;
	margin: 0.1rem 0;
}

.sac-rates--theme .sac-rate__price strong {
	color: var(--sac-elementor-text);
	display: block;
	font-size: clamp(1.55rem, 3vw, 2rem);
	font-weight: 700;
	font-family: var(--sac-elementor-font-primary);
	line-height: 1.1;
}

.sac-rates--theme .sac-rate__frequency {
	color: var(--sac-elementor-text);
	display: block;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	margin-top: 0.2rem;
	text-transform: uppercase;
}

.sac-rates--theme .sac-rate__modules {
	color: var(--sac-elementor-text);
	font-size: 0.75rem;
	line-height: 1.65;
	margin-top: 0.35rem;
}

.sac-rates--theme .sac-rate__modules li {
	padding-left: 0;
}

.sac-rates--theme .sac-rate__modules li::before {
	content: none;
}

.sac-rates--theme .sac-rate__footer {
	align-items: center;
	gap: 0.7rem;
	padding-top: 0.75rem;
	width: 100%;
}

.sac-rates--theme .sac-rate__terms {
	border-top-color: color-mix(in srgb, var(--sac-elementor-text) 25%, transparent);
	font-size: 0.7rem;
	text-align: left;
	width: 100%;
}

.sac-rates--theme .sac-rate__terms > div {
	font-size: 0.7rem;
	text-align: left;
}

.sac-rates--theme .sac-rate__terms dt {
	color: var(--sac-elementor-secondary);
}

.sac-rates--theme .sac-rate__terms dd {
	color: var(--sac-elementor-text);
}

.sac-rates--theme .sac-button {
	background: var(--sac-elementor-accent);
	border-color: var(--sac-elementor-accent);
	border-radius: 0;
	color: var(--sac-accent-contrast);
	font-size: 0.72rem;
	font-weight: 600;
	font-family: var(--sac-elementor-font-accent);
	margin-top: 0.35rem;
	padding: 0.65rem 1.25rem;
	text-transform: uppercase;
	transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.sac-rates--theme .sac-button:hover,
.sac-rates--theme .sac-button:focus-visible {
	background: color-mix(in srgb, var(--sac-elementor-accent) 78%, #fff);
	border-color: color-mix(in srgb, var(--sac-elementor-accent) 78%, #fff);
	color: var(--sac-accent-contrast);
}

.sac-rates--theme .sac-rate--highlight {
	border-color: var(--sac-elementor-primary);
	box-shadow: 0 0 0 1px var(--sac-elementor-primary);
}

.sac-rates--theme .sac-rate__ribbon {
	background: var(--sac-elementor-accent);
	border: 0;
	border-radius: 999px;
	box-shadow: none;
	color: var(--sac-accent-contrast);
	font-family: var(--sac-elementor-font-accent);
	font-size: 0.62rem;
	font-weight: 700;
	left: 0.75rem;
	letter-spacing: 0.06em;
	padding: 0.3rem 0.65rem;
	position: absolute;
	right: 0.75rem;
	text-align: center;
	top: 0.75rem;
	text-transform: uppercase;
	z-index: 1;
}

/* Checkout ----------------------------------------------------------- */

/*
 * One card on an otherwise empty page, so it is held to a readable width
 * rather than stretching across a full-width template.
 */
.sac-checkout {
	max-width: 48rem;
}

.sac-checkout--theme {
	color: var(--sac-elementor-text);
	max-width: 48rem;
}

.sac-checkout--theme .sac-checkout__title,
.sac-checkout--theme .sac-rate__name,
.sac-checkout--theme .sac-rate__price strong,
.sac-checkout--theme .sac-rate__frequency,
.sac-checkout--theme .sac-rate__terms dd {
	color: var(--sac-elementor-text);
}

.sac-checkout--theme .sac-input,
.sac-checkout--theme .sac-input::placeholder {
	background: #fff;
	color: #1c1f22;
}

.sac-checkout--theme .sac-choice,
.sac-checkout--theme .sac-choice__title,
.sac-checkout--theme .sac-choice__meta,
.sac-checkout--theme .sac-form,
.sac-checkout--theme .sac-fieldset,
.sac-checkout--theme .sac-field__label,
.sac-checkout--theme .sac-check,
.sac-checkout--theme .sac-summary,
.sac-checkout--theme .sac-summary__rows dd,
.sac-checkout--theme .sac-summary__rows .sac-summary__row--strong dt {
	color: var(--sac-elementor-text);
}

.sac-checkout--theme .sac-summary__rows dt,
.sac-checkout--theme .sac-summary__rows .sac-summary__row--soft dd {
	color: color-mix(in srgb, var(--sac-elementor-text) 72%, transparent);
}

.sac-checkout--theme .sac-rate__sub,
.sac-checkout--theme .sac-rate__description,
.sac-checkout--theme .sac-rate__payments,
.sac-checkout--theme .sac-rate__footnote,
.sac-checkout--theme .sac-rate__terms dt {
	color: color-mix(in srgb, var(--sac-elementor-text) 72%, transparent);
}

.sac-checkout--theme .sac-checkout__offer {
	margin: 0;
}

.sac-checkout--theme .sac-checkout__action {
	text-align: center;
}

.sac-checkout--theme .sac-checkout__back {
	text-align: center;
}

.sac-checkout__title {
	margin: 0 0 0.8rem;
}

.sac-checkout__offer .sac-rate__terms {
	margin-top: 0.5rem;
}

.sac-checkout__action {
	margin-top: 1.1rem;
}

.sac-checkout__lead-intro {
	margin: 0 0 0.8rem;
}

.sac-checkout__back {
	font-size: 0.9rem;
	margin: 1rem 0 0;
}

.sac-checkout .sac-form {
	max-width: none;
}

/* Forms -------------------------------------------------------------- */

.sac-form {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	max-width: 46rem;
}

.sac-form__title {
	margin: 0;
}

.sac-fieldset {
	border: 1px solid var(--sac-border);
	border-radius: var(--sac-radius);
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	margin: 0;
	padding: 1rem 1.15rem 1.15rem;
}

.sac-fieldset legend {
	font-weight: 700;
	padding: 0 0.35rem;
}

.sac-row {
	display: grid;
	gap: 0.85rem;
	grid-template-columns: 1fr;
}

@media (min-width: 560px) {
	.sac-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sac-field--narrow {
		max-width: 10rem;
	}

	/*
	 * Wider than a narrow field: a date input has to fit a whole formatted
	 * date plus the browser's own calendar button, which the 10rem above
	 * clips — the value ends up sliding under the icon.
	 */
	.sac-field--date {
		max-width: 14rem;
	}
}

.sac-field {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.sac-field__label {
	font-size: 0.9rem;
	font-weight: 600;
}

.sac-field__hint {
	color: var(--sac-muted);
	font-size: 0.8rem;
}

.sac-field__error {
	color: var(--sac-danger);
	font-size: 0.82rem;
}

.sac-required {
	color: var(--sac-danger);
}

.sac-input {
	background: var(--sac-surface);
	border: 1px solid var(--sac-border);
	border-radius: 6px;
	color: inherit;
	font: inherit;
	padding: 0.55rem 0.7rem;
	width: 100%;
}

.sac-input:focus {
	border-color: var(--sac-accent);
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow: 0 0 0 3px rgba(11, 107, 91, 0.18);
}

.sac-input--invalid {
	border-color: var(--sac-danger);
}

.sac-check {
	align-items: flex-start;
	display: flex;
	gap: 0.5rem;
	line-height: 1.45;
}

.sac-check--inline {
	align-items: center;
}

/*
 * An extra another one already covers. Dimmed rather than hidden, so the member
 * can see they get it — and see what they get it through.
 */
.sac-check.is-covered {
	cursor: default;
	opacity: 0.65;
}

.sac-check__covered {
	color: var(--sac-muted);
	font-size: 0.85em;
	white-space: nowrap;
}

/* Contract checkout -------------------------------------------------- */

.sac-subfieldset {
	border: 0;
	border-top: 1px solid var(--sac-border);
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin: 0;
	padding: 0.75rem 0 0;
}

.sac-subfieldset legend {
	color: var(--sac-muted);
	font-size: 0.85rem;
	font-weight: 600;
	padding: 0;
}

/* Term and payment pickers: a whole card is the click target, not just the dot. */
.sac-choices {
	display: grid;
	gap: 0.5rem;
}

.sac-choice {
	align-items: flex-start;
	border: 1px solid var(--sac-border);
	border-radius: var(--sac-radius);
	cursor: pointer;
	display: flex;
	gap: 0.6rem;
	padding: 0.7rem 0.85rem;
}

.sac-choice:has(input:checked) {
	border-color: var(--sac-accent);
	box-shadow: 0 0 0 1px var(--sac-accent);
}

.sac-choice__body {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
	/* The body is only as wide as its title, so a theme that centres its text
	   would sit the price in the middle of the line above instead of under its
	   first character. The two lines belong to one another and read as a pair. */
	text-align: left;
}

.sac-choice__title {
	font-weight: 600;
}

.sac-choice__meta {
	color: var(--sac-muted);
	font-size: 0.85rem;
}

.sac-check__price {
	color: var(--sac-muted);
	white-space: nowrap;
}

.sac-summary {
	background: var(--sac-surface-alt);
	border-radius: var(--sac-radius);
	padding: 0.75rem 0.9rem;
}

.sac-summary__title {
	font-size: 0.9rem;
	margin: 0 0 0.4rem;
}

.sac-summary__rows {
	display: grid;
	gap: 0.2rem;
	margin: 0;
}

.sac-summary__rows > div {
	display: flex;
	font-size: 0.9rem;
	gap: 0.75rem;
	justify-content: space-between;
}

.sac-summary__rows dt {
	color: var(--sac-muted);
	min-width: 0;
}

.sac-summary__rows dd {
	font-weight: 600;
	margin: 0;
	white-space: nowrap;
}

/*
 * A rule opens a block; the weight marks the figure the member is actually
 * billed. They are separate so the monthly and yearly rows can share one rule
 * with only the rhythm being charged set in bold.
 */
.sac-summary__rows .sac-summary__row--ruled {
	border-top: 1px solid var(--sac-border);
	margin-top: 0.3rem;
	padding-top: 0.35rem;
}

.sac-summary__rows .sac-summary__row--strong {
	font-size: 1rem;
}

.sac-summary__rows .sac-summary__row--strong dt {
	color: inherit;
	font-weight: 600;
}

/*
 * The rhythm that is not being charged. Its amount is a conversion of the one
 * above or below it, so it carries no weight of its own.
 */
.sac-summary__rows .sac-summary__row--soft dd {
	color: var(--sac-muted);
	font-weight: 400;
}

.sac-bank {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

/*
 * The fields inside come from the payment provider's own script and carry
 * their own styling; this only gives them somewhere to sit.
 */
.sac-payment-card {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.sac-payment-card__mount:empty::after {
	color: var(--sac-muted);
	content: "…";
}

.sac-payment-card__status {
	color: var(--sac-muted);
	font-size: 0.85rem;
	margin: 0;
}

.sac-textblock {
	border-top: 1px solid var(--sac-border);
	padding-top: 0.8rem;
}

.sac-textblock__title {
	font-size: 1rem;
	margin: 0 0 0.35rem;
}

/*
 * Contract terms can run to pages. They stay scrollable in place rather than
 * pushing the rest of the form off the screen.
 */
.sac-textblock__body,
.sac-legal-text__body {
	color: var(--sac-muted);
	font-size: 0.9rem;
	max-height: 14rem;
	overflow-y: auto;
}

.sac-textblock__body p:first-child,
.sac-legal-text__body p:first-child {
	margin-top: 0;
}

.sac-legal-text summary {
	cursor: pointer;
	font-size: 0.9rem;
}

.sac-comms {
	border-top: 1px solid var(--sac-border);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding-top: 0.8rem;
}

.sac-comms__intro {
	font-weight: 600;
	margin: 0;
}

.sac-comms__group {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1rem;
}

.sac-comms__label {
	color: var(--sac-muted);
	flex: 1 1 100%;
	font-size: 0.85rem;
}

.sac-signature {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.sac-signature__hint {
	color: var(--sac-muted);
	font-size: 0.82rem;
	margin: 0;
}

/* Matches the canvas' own 600x200, so strokes are not drawn distorted. */
.sac-signature__pad {
	aspect-ratio: 3 / 1;
	background: var(--sac-surface);
	border: 1px dashed var(--sac-border);
	border-radius: var(--sac-radius);
	cursor: crosshair;
	height: auto;
	max-width: 100%;
	touch-action: none;
	width: 100%;
}

.sac-signature__actions {
	margin: 0;
}

.sac-signature__clear {
	background: none;
	border: 0;
	color: var(--sac-accent);
	cursor: pointer;
	font: inherit;
	font-size: 0.85rem;
	padding: 0;
	text-decoration: underline;
}

.sac-consent__channels {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.25rem;
}

.sac-consent__channels-label {
	color: var(--sac-muted);
	font-size: 0.85rem;
	margin: 0.35rem 0 0;
}

/* The honeypot must be reachable by bots but invisible to people. */
.sac-hp {
	height: 0;
	left: -9999px;
	overflow: hidden;
	position: absolute;
	width: 0;
}

.sac-button {
	background: var(--sac-surface-alt);
	border: 1px solid var(--sac-border);
	border-radius: 6px;
	cursor: pointer;
	display: inline-block;
	font: inherit;
	font-weight: 600;
	padding: 0.65rem 1.35rem;
	text-decoration: none;
}

.sac-button--primary {
	background: var(--sac-accent);
	border-color: var(--sac-accent);
	color: var(--sac-accent-contrast);
}

.sac-button[disabled] {
	cursor: default;
	opacity: 0.6;
}

/* Slot picker -------------------------------------------------------- */

.sac-slots__days {
	display: flex;
	gap: 0.4rem;
	overflow-x: auto;
	padding-bottom: 0.35rem;
}

.sac-slots__day {
	background: var(--sac-surface);
	border: 1px solid var(--sac-border);
	border-radius: 8px;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	font: inherit;
	gap: 0.1rem;
	min-width: 4.25rem;
	padding: 0.45rem 0.6rem;
	text-align: center;
}

.sac-slots__day.is-active {
	background: var(--sac-accent);
	border-color: var(--sac-accent);
	color: var(--sac-accent-contrast);
}

.sac-slots__weekday {
	font-size: 0.75rem;
	text-transform: uppercase;
}

.sac-slots__date {
	font-weight: 700;
}

.sac-slots__times {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: 0.85rem;
}

.sac-slot {
	background: var(--sac-surface);
	border: 1px solid var(--sac-border);
	border-radius: 6px;
	cursor: pointer;
	font: inherit;
	padding: 0.4rem 0.75rem;
}

.sac-slot.is-selected {
	background: var(--sac-accent);
	border-color: var(--sac-accent);
	color: var(--sac-accent-contrast);
}

.sac-slots__loading {
	color: var(--sac-muted);
	margin: 0;
}

/* Notices ------------------------------------------------------------ */

.sac-notice {
	border-left: 4px solid var(--sac-border);
	border-radius: 4px;
	margin: 0 0 1rem;
	padding: 0.7rem 0.9rem;
}

.sac-notice__message {
	margin: 0;
}

.sac-notice__meta {
	color: var(--sac-muted);
	font-size: 0.78rem;
	margin: 0.35rem 0 0;
}

.sac-notice--error {
	background: #fcecea;
	border-left-color: var(--sac-danger);
	color: var(--sac-danger);
}

.sac-notice--success {
	background: #e9f5ee;
	border-left-color: var(--sac-success);
	color: var(--sac-success);
}

.sac-notice--info {
	background: var(--sac-surface-alt);
	border-left-color: var(--sac-muted);
}

.sac-notice--demo {
	background: #fdf3d8;
	border-left-color: var(--sac-warning);
	color: var(--sac-warning);
}

.sac-link {
	color: var(--sac-accent);
}

/* Legal -------------------------------------------------------------- */

.sac-legal__title {
	margin-top: 0;
}

.sac-legal__body {
	line-height: 1.6;
}

@media (prefers-color-scheme: dark) {
	.sac {
		--sac-text: #e8eaec;
		--sac-muted: #9aa4ad;
		--sac-border: #3a4148;
		--sac-surface: #1e2226;
		--sac-surface-alt: #272c31;
	}
}