/*
 * RaceFinder Additional Services — front end.
 *
 * Every rule is scoped under a wrapper of its own (or the theme's) so the
 * theme's single-class rules for labels, checkboxes and paragraphs, which load
 * after this file, do not win by order. Colours come from the theme's tokens
 * (src/scss/utils/_variables.scss) with fallbacks.
 */

/* ---------------------------------------------------------------------------
 * Shared checkbox row: race page offer, cart rows
 * ------------------------------------------------------------------------ */

/*
 * The box itself is the theme's checkbox (.input__checkbox + .input__checkboxLabel
 * + .input__checkboxLabel__check, components/_forms.scss): the input is hidden
 * absolutely and the theme draws the box and tick. Only the label's spacing and
 * type are ours, so the text and the box sit flush with the card padding.
 */
.rf-as-cp-offer .rf-as-cp-offer__head,
.rf-as-cp-choice,
.rf-as-cp-choice .rf-as-cp-choice__head {
	position: relative;
}

/* The checkbox row: label, then the "i" that opens the details. */
.rf-as-cp-offer .rf-as-cp-offer__head,
.rf-as-cp-choice .rf-as-cp-choice__head {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

.rf-as-cp-offer .rf-as-cp-offer__head > label,
.rf-as-cp-choice .rf-as-cp-choice__head > label {
	flex: 1;
	min-width: 0;
}

.rf-as-cp-offer button.rf-as-cp-info,
.rf-as-cp-choice button.rf-as-cp-info {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	margin: -0.0625rem -0.25rem 0 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	color: var(--black-06, rgba(0, 0, 0, 0.6));
	background: none;
	cursor: pointer;
	transition: color 0.2s ease-in-out;
}

.rf-as-cp-offer button.rf-as-cp-info:hover,
.rf-as-cp-offer button.rf-as-cp-info[aria-expanded="true"],
.rf-as-cp-choice button.rf-as-cp-info:hover,
.rf-as-cp-choice button.rf-as-cp-info[aria-expanded="true"] {
	color: var(--brand, #eb4d00);
}

.rf-as-cp-offer button.rf-as-cp-info:focus-visible,
.rf-as-cp-choice button.rf-as-cp-info:focus-visible {
	outline: 2px solid var(--brand, #eb4d00);
	outline-offset: 1px;
}

/*
 * The tooltip: right under the "i" (1.5rem tall, at the row's top), over the
 * price line, its right edge by the "i" (the button's centre sits 0.5rem in
 * from the row's end), so it never runs past the row's width.
 */
.rf-as-cp-offer .rf-as-cp-tip,
.rf-as-cp-choice .rf-as-cp-tip {
	position: absolute;
	z-index: 30;
	top: 2rem;
	right: -0.375rem;
	box-sizing: border-box;
	width: min(20rem, calc(100% + 0.375rem));
	padding: 0.75rem 0.875rem;
	border: 1px solid var(--black-015, rgba(0, 0, 0, 0.15));
	border-radius: 0.5rem;
	background-color: var(--white, #fff);
	box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.12);
	text-align: start;
}

/* The arrow, pointing at the "i". */
.rf-as-cp-offer .rf-as-cp-tip::before,
.rf-as-cp-choice .rf-as-cp-tip::before {
	content: "";
	position: absolute;
	top: -0.4375rem;
	right: 0.5rem;
	width: 0.75rem;
	height: 0.75rem;
	border-top: 1px solid var(--black-015, rgba(0, 0, 0, 0.15));
	border-left: 1px solid var(--black-015, rgba(0, 0, 0, 0.15));
	background-color: inherit;
	transform: rotate(45deg);
}

/* Bridges the gap to the "i", so the mouse can move into the tooltip. */
.rf-as-cp-offer .rf-as-cp-tip::after,
.rf-as-cp-choice .rf-as-cp-tip::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 100%;
	width: 2.5rem;
	height: 0.625rem;
}

.rf-as-cp-offer .rf-as-cp-tip[hidden],
.rf-as-cp-choice .rf-as-cp-tip[hidden] {
	display: none;
}

.rf-as-cp-offer label.rf-as-cp-offer__label,
.rf-as-cp-choice label.rf-as-cp-choice__label {
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.35;
	text-transform: none;
	letter-spacing: normal;
	color: var(--dark-900, #1e1f1e);
}

.rf-as-cp-offer .rf-as-cp-offer__label .input__checkboxLabel__check,
.rf-as-cp-choice .rf-as-cp-choice__label .input__checkboxLabel__check {
	margin-top: 0.125rem;
}

.rf-as-cp-offer .rf-as-cp-offer__text,
.rf-as-cp-choice .rf-as-cp-choice__text {
	display: flex;
	flex: 1;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.125rem 0.5rem;
	min-width: 0;
}

.rf-as-cp-offer .rf-as-cp-offer__price,
.rf-as-cp-choice .rf-as-cp-choice__price {
	font-weight: 400;
	white-space: nowrap;
}

.rf-as-cp-offer .rf-as-cp-offer__price strong,
.rf-as-cp-choice .rf-as-cp-choice__price strong {
	font-weight: 700;
	color: var(--brand, #eb4d00);
}

.rf-as-cp-offer .rf-as-cp-offer__pct,
.rf-as-cp-choice .rf-as-cp-offer__pct {
	font-size: 0.75rem;
	color: var(--black-06, rgba(0, 0, 0, 0.6));
}

.rf-as-cp-offer p.rf-as-cp-offer__desc,
.rf-as-cp-offer p.rf-as-cp-offer__terms,
.rf-as-cp-choice p.rf-as-cp-choice__terms,
.rf-as-cp-choice p.rf-as-cp-tip__text {
	margin: 0.375rem 0 0;
	font-size: 0.75rem;
	line-height: 1.45;
	color: var(--black-06, rgba(0, 0, 0, 0.6));
}

.rf-as-cp-offer .rf-as-cp-tip p:first-child,
.rf-as-cp-choice .rf-as-cp-tip p:first-child {
	margin-top: 0;
}

/* The tooltip's lead line reads as body text, the terms under it stay grey. */
.rf-as-cp-offer .rf-as-cp-tip p.rf-as-cp-offer__desc {
	font-size: 0.8125rem;
	color: var(--dark-900, #1e1f1e);
}

/* Under the text, past the 16px box and its 12px gap. */
.rf-as-cp-choice p.rf-as-cp-choice__terms {
	margin-inline-start: 1.75rem;
}

.rf-as-cp-offer a,
.rf-as-cp-choice a {
	color: inherit;
	text-decoration: underline;
}

.rf-as-cp-choice .rf-as-cp-choice__note {
	font-weight: 600;
	color: var(--dark-900, #1e1f1e);
}

/* ---------------------------------------------------------------------------
 * Race page — booking card
 * ------------------------------------------------------------------------ */

.bookingCard__form .rf-as-cp-offer {
	margin: 0 0 1rem;
	padding: 0.75rem 0.8125rem;
	border: 1px solid var(--black-015, rgba(0, 0, 0, 0.15));
	background-color: var(--white, #fff);
}

.bookingCard__form .rf-as-cp-offer[hidden] {
	display: none;
}

.bookingCard__form .rf-as-cp-offer:has(input:checked) {
	border-color: var(--brand, #eb4d00);
}

/* ---------------------------------------------------------------------------
 * Cart — under a participant row
 * ------------------------------------------------------------------------ */

.cartproduct__participants .rf-as-cp-choice {
	margin-top: 0.75rem;
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--black-015, rgba(0, 0, 0, 0.15));
	background-color: var(--white, #fff);
}

.cartproduct__participants .rf-as-cp-choice.is-checked {
	border-color: var(--brand, #eb4d00);
}

/* ---------------------------------------------------------------------------
 * Orders → Additional services
 * ------------------------------------------------------------------------ */

.rf-as-services .rf-as-cp-outcome {
	margin: 0 0 1rem;
	padding: 0.75rem 1rem;
	border-left: 3px solid var(--success-500, #3ca115);
	font-size: 0.875rem;
	background-color: var(--grey-200, #f2f2f2);
}

.rf-as-services .rf-as-cp-outcome.woocommerce-error {
	border-left-color: var(--error-500, #da2e2e);
}

.rf-as-cp-list,
.rf-as-cp-list .rf-as-cp-group {
	display: grid;
	gap: 1rem;
}

/* The cards of one order line, and each card; the order view's "Manage"
   links target them. The offset clears the theme's sticky header (72px,
   120px from 1200px). */
.rf-as-cp-list .rf-as-cp-group,
.rf-as-cp-list .rf-as-cp-card {
	scroll-margin-top: calc(4.5rem + 1.5rem);
}

@media (min-width: 1200px) {
	.rf-as-cp-list .rf-as-cp-group,
	.rf-as-cp-list .rf-as-cp-card {
		scroll-margin-top: calc(7.5rem + 1.5rem);
	}
}

.rf-as-cp-list .rf-as-cp-card {
	padding: 1rem 1.25rem;
	border: 1px solid var(--black-015, rgba(0, 0, 0, 0.15));
	background-color: var(--white, #fff);
}

.rf-as-cp-list .rf-as-cp-group:target .rf-as-cp-card,
.rf-as-cp-list .rf-as-cp-card:target {
	border-color: var(--brand, #eb4d00);
	box-shadow: inset 3px 0 0 var(--brand, #eb4d00);
}

.rf-as-cp-card .rf-as-cp-card__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.25rem 1rem;
	margin-bottom: 0.75rem;
}

.rf-as-cp-card h3.rf-as-cp-card__title {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.3;
}

/* Status badge, in the colours of the participant badges (.cpe-status--*)
   and with the meanings of the admin ones (.rfAsCpAdmin__status-*). */
.rf-as-cp-card .rf-as-cp-card__status {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border: 1px solid #d1d5db;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #4b5563;
	background-color: #f3f4f6;
}

/* All in order. */
.rf-as-cp-card--active .rf-as-cp-card__status {
	border-color: #a7f3d0;
	color: #065f46;
	background-color: #ecfdf5;
}

/* Waits for an admin. */
.rf-as-cp-card--requested .rf-as-cp-card__status {
	border-color: #bfdbfe;
	color: #1e40af;
	background-color: #eff6ff;
}

/* The order is not paid yet. */
.rf-as-cp-card--pending .rf-as-cp-card__status {
	border-color: #fde68a;
	color: #92400e;
	background-color: #fffbeb;
}

.rf-as-cp-card--rejected .rf-as-cp-card__status {
	border-color: #fecaca;
	color: #991b1b;
	background-color: #fef2f2;
}

/* refunded and expired keep the neutral base: closed, nothing to do. */

.rf-as-cp-card dl.rf-as-cp-card__facts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
	gap: 0.5rem 1rem;
	margin: 0;
}

.rf-as-cp-card .rf-as-cp-card__facts dt {
	font-size: 0.75rem;
	color: var(--black-06, rgba(0, 0, 0, 0.6));
}

.rf-as-cp-card .rf-as-cp-card__facts dd {
	margin: 0.125rem 0 0;
	font-size: 0.875rem;
	overflow-wrap: anywhere;
}

.rf-as-cp-card p.rf-as-cp-card__terms {
	margin: 0.75rem 0 0;
	font-size: 0.8125rem;
}

.rf-as-cp-card details.rf-as-cp-request {
	margin-top: 1rem;
}

.rf-as-cp-card .rf-as-cp-request summary {
	display: inline-flex;
	list-style: none;
	cursor: pointer;
}

.rf-as-cp-card .rf-as-cp-request summary::-webkit-details-marker {
	display: none;
}

.rf-as-cp-card .rf-as-cp-request[open] summary {
	display: none;
}

.rf-as-cp-card .rf-as-cp-request__form p {
	margin: 0 0 0.75rem;
	font-size: 0.875rem;
}

.rf-as-cp-card .rf-as-cp-request__form label.rf-as-cp-request__label {
	display: block;
	margin-bottom: 0.25rem;
	font-size: 0.8125rem;
}

.rf-as-cp-card .rf-as-cp-request__form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0.5rem 0.625rem;
	border: 1px solid var(--black-03, rgba(0, 0, 0, 0.3));
	font: inherit;
}

.rf-as-cp-card .rf-as-cp-request__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

/* Order view badge */
.rf-as-cp-badge {
	margin: 0.25rem 0 0;
	color: var(--black-06, rgba(0, 0, 0, 0.6));
}

/* Order view: a unit inside its participant's card (.cpe-order-entry). The
   status text takes the colours of the account cards' badges. */
.cpe-order-entry p.rf-as-cp-unit {
	margin: 0.5rem 0 0;
	color: var(--black-06, rgba(0, 0, 0, 0.6));
}

.rf-as-cp-unit .rf-as-cp-unit__status {
	font-weight: 600;
	color: #4b5563;
}

.rf-as-cp-unit--active .rf-as-cp-unit__status {
	color: #065f46;
}

.rf-as-cp-unit--requested .rf-as-cp-unit__status {
	color: #1e40af;
}

.rf-as-cp-unit--pending .rf-as-cp-unit__status {
	color: #92400e;
}

.rf-as-cp-unit--rejected .rf-as-cp-unit__status {
	color: #991b1b;
}