/*
 * Base styling for the plugin's public-facing shortcode surfaces
 * (#coa-signup-form, #coa-panel, #coa-activities-list), loaded on every
 * page. The tabbed member panel's own rules (0.41.0) live in
 * member-panel.css, loaded only where the panel renders, right after this
 * file; what the panel shares with the public listing, the signup form
 * and the feedback form (tokens, buttons, role picker, capacity bar,
 * activity CTAs) stays here. Templates ship
 * with zero classes beyond these container IDs and rely entirely on the
 * active theme for form/button chrome — several modern block themes
 * reset unclassed <button>/<input> elements to look like plain text, so
 * this gives them a baseline that looks like a button/field regardless
 * of theme. Design tokens (--coa-*) are scoped to these containers only
 * — nothing here touches the rest of the site — so the club can retint
 * the whole surface by overriding a handful of variables instead of
 * hunting through selectors.
 */

#coa-signup-form-wrap,
#coa-panel,
#coa-activities-list,
#coa-feedback-wrap {
	--coa-primary: #2271b1;
	--coa-primary-hover: #135e96;
	--coa-success: #1a7f37;
	--coa-success-bg: #edf7ed;
	--coa-error: #b32d2e;
	--coa-error-bg: #fbeaea;
	--coa-border: #8c8f94;
	--coa-border-light: #dcdcde;
	--coa-text: #1d2327;
	--coa-text-muted: #50575e;
	--coa-radius: 4px;
	--coa-space-xs: 4px;
	--coa-space-sm: 8px;
	--coa-space-md: 16px;
	--coa-space-lg: 24px;
	--coa-space-xl: 40px;

	max-width: 480px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--coa-text);
}

/* The activities grid wants the full width its container gives it, not
   the 480px cap that keeps the two form surfaces readable as a single
   column — override rather than exclude it from the shared block, so it
   still inherits every --coa-* token above. */
#coa-activities-list {
	max-width: none;
}

/* The signup form's two-column field rows want a bit more breathing room
   than a single-column layout — still capped, just wider. */
#coa-signup-form-wrap {
	max-width: 600px;
}

/* The member panel now carries a sidebar ("Mis datos") alongside its main
   column — wider than the other single-column surfaces so both have room
   to breathe instead of squeezing the sidebar into a sliver. */
#coa-panel {
	max-width: 960px;
}

/* --- Signup form: sectioned layout (Tus datos / ¿Cómo quieres
   participar? / consent+submit), replacing what used to be one flat
   stack of labelled inputs. --- */

.coa-already-member {
	margin-bottom: var(--coa-space-lg);
	color: var(--coa-text-muted);
}

.coa-form-section {
	margin-bottom: var(--coa-space-lg);
	padding-bottom: var(--coa-space-lg);
	border-bottom: 1px solid var(--coa-border-light);
}

.coa-form-section--last {
	border-bottom: none;
	padding-bottom: 0;
}

.coa-form-section__title {
	margin: 0 0 var(--coa-space-xs);
	font-size: 1.15em;
	font-weight: 600;
}

.coa-form-section__hint {
	margin: 0 0 var(--coa-space-md);
	color: var(--coa-text-muted);
	font-size: 0.9em;
}

/* minmax(0, 1fr), never a plain 1fr: a 1fr track grows to the min-content
   of its widest child (0.35.0's country select did exactly that, squeezing
   Email to ~60px and pushing the phone row out of the card). */
.coa-form-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 0 var(--coa-space-md);
}

/* 0.36.1: Email + Teléfono, one full-width row each at every width. */
.coa-form-row--stack {
	grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 480px) {
	.coa-form-row {
		/* minmax(0, 1fr): a plain 1fr track grows to the min-content of its
		   widest child (the country select), pushing the form off a phone screen. */
		grid-template-columns: minmax(0, 1fr);
	}
}

#coa-signup-form label:not(.coa-visually-hidden) {
	display: block;
	margin-bottom: var(--coa-space-xs);
	font-weight: 500;
}

.coa-field {
	margin-bottom: var(--coa-space-md);
}

#coa-signup-form input[type="text"],
#coa-signup-form input[type="email"],
#coa-signup-form input[type="tel"],
#coa-signup-form select {
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	min-height: 44px;
	padding: 10px var(--coa-space-sm);
	font-size: 1em;
	color: var(--coa-text);
	border: 1px solid var(--coa-border);
	border-radius: var(--coa-radius);
}

/* An invalid field needs to be identifiable without relying on the error
   text's color alone — the border carries the same signal a sighted user
   would otherwise only get from reading it.
   #coa-signup-form-qualified, like the two other specificity fixes already
   in this file (search "same specificity bug pattern"): unqualified,
   ".coa-field--invalid input" (0-1-1) can never beat the plain input rule
   above (#coa-signup-form input[type="text"], 1-1-1) — confirmed live, the
   red border never actually applied, on any theme. Same story for
   .coa-field-error below against a theme's own ".com-content p"-style
   rules (typically 0-2-0, beating an unqualified 0-1-0).
   Even ID-qualified to (1-1-1), this still TIES the active theme's own
   "#coa-signup-form input:hover" rule (also 1-1-1) — confirmed live, a
   hovered invalid field loses the red border back to the theme's hover
   color purely because the theme's stylesheet loads after this one. The
   [type="…"] list below matches the specificity of the base input rule's
   OWN selector list one-for-one, landing at 1-2-1 — unambiguously higher
   than any 1-1-1 rule regardless of state or load order. */
#coa-signup-form .coa-field--invalid input[type="text"],
#coa-signup-form .coa-field--invalid input[type="email"],
#coa-signup-form .coa-field--invalid input[type="tel"] {
	border-color: var(--coa-error);
}

#coa-signup-form .coa-field-error {
	margin: var(--coa-space-xs) 0 0;
	overflow-wrap: break-word;
	color: var(--coa-error);
	font-size: 0.85em;
}

/* Screen-reader-only text: visible group titles duplicate an adjacent
   heading and would be redundant on screen, but still need a real label
   for assistive tech (a <fieldset> with no <legend> announces its radios
   as unlabelled). Standard clip-based hiding pattern — 1px, not display:none
   (which would remove it from the accessibility tree too). */
.coa-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Reset the browser's own <fieldset>/<legend> box (border, padding) —
   used purely for grouping semantics here, not for its default look. */
.coa-fieldset {
	margin: 0 0 var(--coa-space-md);
	padding: 0;
	border: none;
	min-width: 0;
}

.coa-fieldset:last-child {
	margin-bottom: 0;
}

.coa-fieldset__legend {
	padding: 0;
	margin: 0 0 var(--coa-space-sm);
	font-size: 0.95em;
	font-weight: 600;
	color: var(--coa-text);
}

/* --- 0.64.1: «¿Cómo quieres participar?» and «¿Qué nivel…?» — one row of
   equal buttons per question (owner: «que todos los botones encajen en una
   linea»). The real radios stay, visually hidden but focusable: arrow keys,
   the form post and the template's script work as before. The chosen
   option's description shows once under the row. --- */

#coa-signup-form-wrap .coa-segmented {
	display: grid;
	grid-template-columns: repeat(var(--coa-segments, 2), minmax(0, 1fr));
	gap: var(--coa-space-xs);
	padding: var(--coa-space-xs);
	border: 1px solid var(--coa-border);
	border-radius: var(--coa-radius);
	background: #fff;
}

#coa-signup-form-wrap label.coa-segment {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	column-gap: 0.4em;
	min-width: 0;
	min-height: 44px;
	margin: 0;
	padding: 6px var(--coa-space-sm);
	border-radius: calc(var(--coa-radius) - 2px);
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	color: var(--coa-text);
	cursor: pointer;
}

#coa-signup-form-wrap label.coa-segment:hover {
	background: color-mix(in srgb, var(--coa-primary) 7%, #fff);
}

#coa-signup-form-wrap label.coa-segment:has(.coa-segment__input:checked) {
	background: var(--coa-primary);
	color: #fff;
}

#coa-signup-form-wrap label.coa-segment:has(.coa-segment__input:focus-visible) {
	outline: 2px solid var(--coa-primary);
	outline-offset: 2px;
}

/* Hidden but still the focusable, checkable control (no display:none). */
#coa-signup-form-wrap .coa-segment__input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

/* Words are never split inside a word («Tribu-na»): a name wraps only
   between words, and on a narrow phone the buttons get smaller padding and
   type (media query below) so the longest level name still fits. */
#coa-signup-form-wrap .coa-segment__name,
#coa-signup-form-wrap .coa-segment__price {
	min-width: 0;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

@media (max-width: 420px) {
	#coa-signup-form-wrap .coa-segmented {
		gap: 2px;
		padding: 3px;
	}
	#coa-signup-form-wrap label.coa-segment {
		padding: 6px 4px;
		font-size: 0.88em;
	}
}

/* When the name and the price do not fit side by side (three levels on a
   phone) the price drops under the name inside the button — the row itself
   never wraps. */
#coa-signup-form-wrap .coa-segment__price {
	font-weight: 500;
	white-space: nowrap;
	opacity: 0.85;
}

#coa-signup-form-wrap label.coa-segment:has(.coa-segment__input:checked) .coa-segment__price {
	opacity: 1;
}

.coa-segment-descs {
	margin: var(--coa-space-sm) 0 var(--coa-space-md);
}

.coa-segment-desc {
	margin: 0 0 var(--coa-space-xs);
	font-size: 0.9em;
	color: var(--coa-text-muted);
}

.coa-segment-desc__name {
	font-weight: 600;
	color: var(--coa-text);
}

/* Without :has() (Firefox ESR 115, Safari < 15.4) the button cannot show
   its checked or focus state, so the radio itself is shown, as a plain
   readable list, with the browser's own selection and focus ring. */
@supports not selector(:has(*)) {
	#coa-signup-form-wrap .coa-segment__input {
		position: static;
		width: auto;
		height: auto;
		margin: 0 0.4em 0 0;
		opacity: 1;
	}
	#coa-signup-form-wrap label.coa-segment {
		justify-content: flex-start;
	}
}

/* With :has(): only the checked option's description, without its name
   (the button above already says it). Up to four options per question —
   two intents and the three levels of Level_Catalog; Test_Signup_Form_Template
   fails if the catalog ever grows past that. */
@supports selector(:has(*)) {
	.coa-segment-desc,
	.coa-segment-desc__name {
		display: none;
	}
	.coa-fieldset:has(.coa-segment:nth-child(1) .coa-segment__input:checked) .coa-segment-desc:nth-child(1),
	.coa-fieldset:has(.coa-segment:nth-child(2) .coa-segment__input:checked) .coa-segment-desc:nth-child(2),
	.coa-fieldset:has(.coa-segment:nth-child(3) .coa-segment__input:checked) .coa-segment-desc:nth-child(3),
	.coa-fieldset:has(.coa-segment:nth-child(4) .coa-segment__input:checked) .coa-segment-desc:nth-child(4) {
		display: block;
	}
}

/* The consent checkbox's own label: keep the checkbox and its (often
   multi-line) text aligned at the top, not vertically centered. */
.coa-consent {
	display: flex;
	align-items: flex-start;
	gap: var(--coa-space-sm);
	margin-bottom: var(--coa-space-md);
	font-weight: 400;
}

/* --- Buttons (shared by the signup form's submit and the panel's
   reserve/cancel/cancel-membership actions) --- */

#coa-signup-form button[type="submit"],
#coa-panel button,
#coa-feedback-wrap button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--coa-space-sm);
	min-height: 44px;
	padding: 10px var(--coa-space-lg);
	font-size: 1em;
	color: #fff;
	background: var(--coa-primary);
	border: none;
	border-radius: var(--coa-radius);
	cursor: pointer;
}

#coa-signup-form button[type="submit"]:hover,
#coa-panel button:hover,
#coa-feedback-wrap button:hover {
	background: var(--coa-primary-hover);
}

#coa-signup-form button[type="submit"]:disabled,
#coa-panel button:disabled,
#coa-feedback-wrap button:disabled {
	background: var(--coa-text-muted);
	cursor: not-allowed;
	opacity: 0.8;
}

/* Cancelling a reservation is destructive — red marks it as a different
   kind of action from "Reservar"'s primary blue, instead of the two
   looking identical. Needs the #coa-panel-qualified selector to win over
   the plain "#coa-panel button" rule above (same specificity bug pattern
   documented elsewhere in this file: an unqualified class alone would
   lose to that ID+tag rule). */
#coa-panel button.coa-cancel-registration {
	background: var(--coa-error);
}

#coa-panel button.coa-cancel-registration:hover {
	background: #8f2423; /* a darker shade of --coa-error for the same hover-darkens pattern var(--coa-primary-hover) gives the primary button */
}

/* "Armed" state for the cancel/level-upgrade double-click confirm pattern
   (see confirmThenAct() in this template's own <script>) — a clear visual
   change beyond the text swap, so the button doesn't just quietly relabel
   itself. Same --coa-error ring on both actions: cancelling a reservation
   and paying for an upgrade are both "about to do something costly",
   regardless of the resting button's own color. */
#coa-panel button.coa-confirming,
.coa-activity-card__cta.coa-confirming {
	outline: 3px solid var(--coa-error);
	outline-offset: 2px;
	font-weight: 700;
}

/* Visible keyboard-focus ring, independent of whatever the active theme
   does with :focus — never removed, only made consistent. */
#coa-signup-form button[type="submit"]:focus-visible,
#coa-panel button:focus-visible,
#coa-feedback-wrap button:focus-visible,
#coa-feedback-wrap textarea:focus-visible,
#coa-signup-form input:focus-visible,
#coa-signup-form select:focus-visible {
	outline: 2px solid var(--coa-primary);
	outline-offset: 2px;
}

/* One-line explanation right under a heading of the member panel. */
.coa-panel-section-desc {
	margin: 0 0 var(--coa-space-sm);
	color: var(--coa-text-muted);
	font-size: 0.9em;
}

/* Had no rule of its own at all — up to two upgrade buttons (Tribuna,
   Ágora) rendered with only inline-flex whitespace between them. */
.coa-level-upgrades {
	display: flex;
	flex-wrap: wrap;
	gap: var(--coa-space-sm);
}

/* The whole image+title+date area is one link/span (both here and on the
   public listing below) to that activity's full-page detail — reset it
   back to looking like part of the card, not a link. coa_activity has no
   public single-post view of its own; ?coa_actividad_id=<id> on the
   public listing (public-activities.php) is the closest thing to "open
   the activity" this plugin's architecture supports. A card with no
   public listing page to link to yet (find_shortcode_page_url() found
   nothing) renders this as a plain, non-interactive <span> instead of a
   link — see the templates. */
.coa-activity-card__trigger {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 0;
	padding: 0;
	background: none;
	color: inherit;
	border: none;
	border-radius: 0;
	text-align: left;
	text-decoration: none;
}

a.coa-activity-card__trigger {
	cursor: pointer;
}

.coa-activity-card__trigger:hover .coa-activity-card__title {
	color: var(--coa-primary);
}

.coa-activity-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--coa-space-xs);
}

/* 0.64.2: the swappable wrapper of a card's call-to-action
   (Activity_Fragments::card_cta()) takes no box of its own, so the
   layout is exactly what it was without it. */
.coa-cta-slot {
	display: contents;
}

.coa-activity-card__footer {
	padding: 0 var(--coa-space-md) var(--coa-space-md);
	/* .coa-activity-card is a flex column and the row/grid it sits in
	   already stretches every card to the row's tallest — without this,
	   that extra height lands as blank space below a short card's own
	   footer instead of pushing the footer down, so buttons across a row
	   land at different heights depending on each activity's title/
	   summary length. margin-top:auto sinks the footer to the bottom of
	   the (now equal-height) card instead. */
	margin-top: auto;
}

@media (prefers-reduced-motion: no-preference) {
	.coa-activity-card__title {
		transition: color 150ms ease;
	}
}

/* --- One activity's full-page detail (public-activities.php in
   ?coa_actividad_id=<id> mode): image, full description, "Volver a
   actividades" back link. --- */

/* Qualified with the id: #coa-activities-list's own "display: grid" rule
   (further down this file) is an ID selector too, and would otherwise
   win over a bare class one regardless of source order. */
#coa-activities-list.coa-activities-list--detail {
	display: block;
	max-width: 640px;
}

.coa-activity-detail__back {
	margin: 0 0 var(--coa-space-md);
}

.coa-activity-detail__back a {
	color: var(--coa-primary);
	font-weight: 500;
	text-decoration: none;
}

.coa-activity-detail__back a:hover {
	text-decoration: underline;
}

.coa-activity-detail__image {
	display: block;
	width: 100%;
	max-height: 360px;
	object-fit: cover;
	border-radius: var(--coa-radius);
}

.coa-activity-detail__title {
	margin: var(--coa-space-md) 0 0;
	font-size: 1.5em;
	line-height: 1.3;
}

/* 0.42.1: «Actividad celebrada» on a past activity's detail — the same
   green pill as the panel's «Realizada» (member-panel.css only loads on
   the panel page, so the pill is restated here for the public listing). */
.coa-activity-detail__past {
	margin: var(--coa-space-xs) 0 0;
}

#coa-activities-list .coa-chip--done {
	display: inline-flex;
	align-items: center;
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	color: var(--coa-success);
	background: var(--coa-success-bg);
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.4;
}

.coa-activity-detail__date,
.coa-activity-detail__location {
	margin: var(--coa-space-xs) 0 0;
	color: var(--coa-text-muted);
}

.coa-activity-detail__summary {
	margin: var(--coa-space-sm) 0 0;
	font-size: 1.1em;
	line-height: 1.5;
}

.coa-activity-detail__desc {
	margin-top: var(--coa-space-md);
	line-height: 1.6;
}

.coa-activity-detail__desc p {
	margin: 0 0 var(--coa-space-md);
}

.coa-activity-detail__desc p:last-child {
	margin-bottom: 0;
}

.coa-activity-detail .coa-activity-card__cta {
	margin-top: var(--coa-space-lg);
}

/* "Documentos" — the activity's Google Drive material (Activity_Metabox's
   "Documento (Google Drive)" field), as an outlined secondary button next
   to the primary Apúntate/Reservar CTA below it: a real button, but
   visually secondary since it's "more info", not the main action on this
   page. (The member panel's rows have their own links since 0.41.0:
   member-panel.css.) */
.coa-activity-detail__document {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: var(--coa-space-md);
	min-height: 40px;
	padding: 8px var(--coa-space-md);
	color: var(--coa-primary);
	background: #fff;
	border: 1px solid var(--coa-primary);
	border-radius: var(--coa-radius);
	font-weight: 500;
	text-decoration: none;
}

.coa-activity-detail__document:hover {
	background: var(--coa-border-light);
}

/* "Próximas actividades" below the single-activity detail — a compact
   row of the same card component used elsewhere, not a full repeat of
   the public listing (no capacity bar, no reserve button: it's a
   "discover what else is on" nudge, not another place to book from). */
.coa-activity-detail__related {
	margin-top: var(--coa-space-xl);
	padding-top: var(--coa-space-lg);
	border-top: 1px solid var(--coa-border-light);
}

.coa-activity-detail__related-title {
	margin: 0 0 var(--coa-space-md);
	font-size: 1.15em;
}

.coa-activity-detail__related-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: var(--coa-space-md);
}

.coa-activity-card--compact .coa-activity-card__body {
	padding: var(--coa-space-sm);
}

.coa-activity-card--compact .coa-activity-card__title {
	font-size: 1em;
}

/* --- Status messages: success/error need to be tellable apart at a
   glance, not just by reading the words — color, an icon-free left
   border, and a background tint all carry the distinction so it doesn't
   rely on color alone. --- */

#coa-signup-form #coa-signup-message,
#coa-panel #coa-panel-message {
	margin-top: var(--coa-space-md);
	font-weight: 600;
}

#coa-signup-form #coa-signup-message:not(:empty),
#coa-panel #coa-panel-message:not(:empty) {
	padding: 10px var(--coa-space-md);
	border-left: 3px solid var(--coa-text-muted);
	border-radius: var(--coa-radius);
	background: var(--coa-border-light);
}

/* The message now sits above the two-column layout (was the very last
   thing in the panel before that existed) — needs its own bottom margin
   to separate it from the grid below when it has something to say. */
#coa-panel #coa-panel-message:not(:empty) {
	margin-bottom: var(--coa-space-lg);
}

#coa-signup-form #coa-signup-message.is-success,
#coa-panel #coa-panel-message.is-success {
	color: var(--coa-success);
	background: var(--coa-success-bg);
	border-left-color: var(--coa-success);
}

#coa-signup-form #coa-signup-message.is-error,
#coa-panel #coa-panel-message.is-error {
	color: var(--coa-error);
	background: var(--coa-error-bg);
	border-left-color: var(--coa-error);
}

@media (prefers-reduced-motion: no-preference) {
	#coa-signup-form button[type="submit"],
	#coa-panel button {
		transition: background-color 150ms ease;
	}

	#coa-signup-form-wrap label.coa-segment {
		transition: background-color 150ms ease, color 150ms ease;
	}
}

/* --- Public activities listing (image + title + date cards) --- */

#coa-activities-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--coa-space-lg);
}

/* The "Ver todas las actividades" link (only rendered when
   [club_avanza_actividades limit="N"] is set AND the number of upcoming
   activities actually fetched meets or exceeds that limit — i.e. the
   list was genuinely truncated, not just capped with nothing left out)
   sits inside #coa-activities-list's own grid, so without this it would
   become one more narrow grid cell alongside the cards instead of a
   full-width row below them. */
.coa-activities-see-all {
	grid-column: 1 / -1;
	margin: 0;
	padding-top: var(--coa-space-sm);
	text-align: center;
}

.coa-activities-see-all a {
	color: var(--coa-primary);
	font-weight: 600;
	text-decoration: none;
}

.coa-activities-see-all a:hover {
	text-decoration: underline;
}

.coa-activity-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--coa-border-light);
	border-radius: var(--coa-radius);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	/* So a "#coa-activity-{id}" jump (the panel's "Ir a la actividad" link)
	   doesn't land the card flush against the viewport's top edge. */
	scroll-margin-top: var(--coa-space-lg);
}

.coa-activity-card__trigger,
.coa-activity-card__image {
	/* The image keeps the card's top corners itself, also while an open
	   role list lifts the card's clipping (0.64.0). */
	border-top-left-radius: inherit;
	border-top-right-radius: inherit;
}

.coa-activity-card__image {
	/* Explicit rather than relying on the element's own default — this
	   class is used on a <div> in the public listing but a <span> inside
	   the member panel's <button> trigger (buttons can't contain <div>s). */
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.coa-activity-card__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.coa-activity-card__body {
	padding: var(--coa-space-md);
}

.coa-activity-card__title {
	margin: 0 0 var(--coa-space-xs);
	font-size: 1.1em;
	line-height: 1.3;
	color: var(--coa-text);
}

.coa-activity-card__date {
	margin: 0;
	color: var(--coa-text-muted);
	font-size: 0.9em;
}

.coa-activity-card__summary {
	margin: 0;
	color: var(--coa-text);
	font-size: 0.9em;
	line-height: 1.4;
}

.coa-activity-card__registration {
	margin: var(--coa-space-xs) 0 0;
	color: var(--coa-primary);
	font-size: 0.85em;
	font-weight: 500;
}

/* Role picker (role-picker.php), 0.64.0: a compact dropdown, one field
   row when closed so cards line up; the open list floats over what is
   below (its card stops clipping while open), with its own scroll. */
.coa-role-picker {
	margin: var(--coa-space-md) 0 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.coa-role-picker__legend {
	margin-bottom: var(--coa-space-xs);
	padding: 0;
	color: var(--coa-text-muted);
	font-size: 0.85em;
	font-weight: 500;
}

.coa-role-picker__menu {
	position: relative;
}

.coa-role-picker__trigger {
	display: flex;
	align-items: center;
	gap: var(--coa-space-sm);
	box-sizing: border-box;
	min-height: 44px;
	padding: 6px 12px;
	color: var(--coa-text);
	font-weight: 600;
	line-height: 1.3;
	background: #fff;
	border: 1.5px solid var(--coa-border);
	border-radius: var(--coa-radius);
	cursor: pointer;
	list-style: none;
}

.coa-role-picker__trigger::-webkit-details-marker {
	display: none;
}

.coa-role-picker__trigger::marker {
	content: "";
}

.coa-role-picker__trigger:hover {
	border-color: var(--coa-primary);
}

.coa-role-picker__trigger:focus-visible {
	outline: 2px solid var(--coa-primary);
	outline-offset: 2px;
}

.coa-role-picker__current {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}

.coa-role-picker__chevron {
	flex: 0 0 auto;
	color: var(--coa-text-muted);
}

.coa-role-picker__menu[open] > .coa-role-picker__trigger {
	border-color: var(--coa-primary);
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.coa-role-picker__menu[open] .coa-role-picker__chevron {
	transform: rotate(180deg);
}

.coa-role-picker__options {
	box-sizing: border-box;
	max-height: 17rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 30;
	padding: 4px;
	background: #fff;
	box-shadow: 0 14px 28px -12px rgba(64, 0, 31, 0.4);
	border: 1.5px solid var(--coa-primary);
	border-top: 0;
	border-radius: 0 0 var(--coa-radius) var(--coa-radius);
}

.coa-activity-card:has( .coa-role-picker__menu[open] ) {
	position: relative;
	z-index: 5;
	overflow: visible;
}

.coa-role-option {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: var(--coa-space-sm);
	align-items: center;
	min-height: 44px;
	box-sizing: border-box;
	padding: 6px var(--coa-space-sm);
	border-radius: var(--coa-radius);
	cursor: pointer;
}

.coa-role-option:hover {
	background: color-mix( in srgb, var(--coa-primary) 5%, #fff );
}

.coa-role-option:has( input:checked ) {
	background: color-mix( in srgb, var(--coa-primary) 9%, #fff );
}

.coa-role-option:has( input:focus-visible ) {
	outline: 2px solid var(--coa-primary);
	outline-offset: -2px;
}

.coa-role-option input {
	margin: 0;
	accent-color: var(--coa-primary);
}

.coa-role-option__name {
	display: block;
	font-weight: 600;
	line-height: 1.3;
}

.coa-role-option__tag {
	display: inline-block;
	margin-left: 4px;
	padding: 1px 7px;
	border-radius: 999px;
	background: #fef3c7;
	color: #92400e;
	font-size: 0.72em;
	font-weight: 600;
	vertical-align: middle;
}

.coa-role-option__left {
	color: var(--coa-text-muted);
	font-size: 0.8em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Two classes / #coa-panel: beat the theme's ".com-content p" and the
   panel's reset of p (review M2). The description is shown whole. */
.coa-role-picker .coa-role-picker__desc,
#coa-panel .coa-role-picker__desc {
	margin: var(--coa-space-xs) 0 0;
	color: var(--coa-text-muted);
	font-size: 0.85rem;
	line-height: 1.4;
}

.coa-role-picker .coa-role-picker__note,
.coa-role-picker__note,
#coa-panel .coa-role-picker__note {
	margin: var(--coa-space-xs) 0 0;
	padding: 7px 9px;
	border-radius: var(--coa-radius);
	background: #fffbeb;
	color: #92400e;
	font-size: 0.85rem;
	line-height: 1.4;
}

.coa-role-picker .coa-role-picker__locked,
.coa-role-picker__locked,
#coa-panel .coa-role-picker__locked {
	margin: var(--coa-space-xs) 0 0;
	color: var(--coa-text-muted);
	font-size: 0.85rem;
}

/* Locked after booking (lock()): the trigger names the role and never
   opens; the legend stays for screen readers. Grid beats [hidden]. */
.coa-role-option[hidden],
.coa-role-option__left[hidden],
.coa-role-picker .coa-role-picker__desc[hidden],
#coa-panel .coa-role-picker__desc[hidden] {
	display: none;
}

.coa-role-picker--locked .coa-role-picker__legend {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.coa-role-picker--locked .coa-role-picker__trigger {
	color: var(--coa-text);
	background: color-mix( in srgb, var(--coa-primary) 6%, #fff );
	border-color: var(--coa-border);
	cursor: default;
	pointer-events: none;
}

.coa-role-picker--locked .coa-role-picker__chevron {
	display: none;
}

@media (prefers-reduced-motion: no-preference) {
	.coa-role-picker__trigger,
	.coa-role-option {
		transition: border-color 150ms ease, background-color 150ms ease;
	}

	.coa-role-picker__chevron {
		transition: transform 150ms ease;
	}
}

.coa-activity-card__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: var(--coa-space-md);
	min-height: 40px;
	padding: 8px var(--coa-space-md);
	color: #fff;
	background: var(--coa-primary);
	/* Reset the <button> defaults this class now also renders as (the
	   public listing's "Reservar"/"Reservado" CTA — see public-activities.php)
	   so it's indistinguishable from the <a> version it was originally
	   written for. */
	border: none;
	border-radius: var(--coa-radius);
	font: inherit;
	text-decoration: none;
	font-weight: 500;
	cursor: pointer;
}

.coa-activity-card__cta:hover {
	background: var(--coa-primary-hover);
}

/* Already reserved / no capacity left / registration not open right now —
   same muted-grey "can't act on this" look #coa-panel button:disabled
   already uses, so the two surfaces agree on what "disabled" looks like. */
.coa-activity-card__cta:disabled {
	background: var(--coa-text-muted);
	cursor: not-allowed;
	opacity: 0.8;
}

/* --- Capacity bar ("12 de 30 plazas") — public listing cards/detail and
   the member panel's "Actividades abiertas". --- */

.coa-capacity {
	display: flex;
	align-items: center;
	gap: var(--coa-space-sm);
	margin-top: var(--coa-space-sm);
}

.coa-capacity__bar {
	flex: 1 1 auto;
	height: 6px;
	background: var(--coa-border-light);
	border-radius: 999px;
	overflow: hidden;
}

.coa-capacity__fill {
	height: 100%;
	background: var(--coa-primary);
	border-radius: 999px;
}

.coa-capacity__label {
	flex: 0 0 auto;
	color: var(--coa-text-muted);
	font-size: 0.8em;
	white-space: nowrap;
}

/* --- "Unirse a la lista de espera" — a real but secondary action next to
   "Reservar"'s solid primary button, so the two don't look identical:
   outlined instead of filled. Needs the #coa-panel-qualified selector to
   win over the plain "#coa-panel button" rule (same specificity pattern
   documented elsewhere in this file — an unqualified class alone would
   lose to that ID+tag rule). */
.coa-activity-card__cta.coa-join-waitlist,
#coa-panel button.coa-join-waitlist {
	color: var(--coa-primary);
	background: #fff;
	border: 1px solid var(--coa-primary);
}

.coa-activity-card__cta.coa-join-waitlist:hover,
#coa-panel button.coa-join-waitlist:hover {
	background: var(--coa-border-light);
}

/* "Cancelar reserva" / "Salir de la lista de espera" on the public
   listing/detail — a real, active cancel action (not the old disabled
   "Reservado" placeholder) for a visitor who already has a confirmed or
   waitlisted spot. Solid error-red, matching #coa-panel
   button.coa-cancel-registration's own default a few rules up — the two
   surfaces should look like the same product. */
.coa-activity-card__cta.coa-cancel-registration {
	background: var(--coa-error);
}

.coa-activity-card__cta.coa-cancel-registration:hover {
	background: #8f2423; /* a darker shade of --coa-error, matching #coa-panel button.coa-cancel-registration:hover above */
}

/* --- Member panel: "Mis datos" read-only sidebar card, with an "Editar"
   toggle that reveals the phone form below it (the only field a socio can
   change themselves — see the template's own comment on why). --- */

.coa-member-card {
	padding: var(--coa-space-md);
	border: 1px solid var(--coa-border-light);
	border-radius: var(--coa-radius);
	background: #fafafa;
}

.coa-member-card__list {
	margin: 0 0 var(--coa-space-md);
}

.coa-member-card__row {
	padding: var(--coa-space-xs) 0;
	border-bottom: 1px solid var(--coa-border-light);
}

.coa-member-card__row:last-child {
	border-bottom: none;
}

.coa-member-card__row dt {
	margin: 0 0 2px;
	font-size: 0.8em;
	color: var(--coa-text-muted);
}

.coa-member-card__row dd {
	margin: 0;
	font-weight: 500;
	overflow-wrap: break-word;
}

/* #coa-panel-qualified — same specificity bug pattern documented
   elsewhere in this file: the unqualified class (0-1-0) lost to the
   generic "#coa-panel button" rule (1-0-1) above, so "Editar" rendered
   solid terracotta instead of its intended outlined-secondary look,
   making a minor action the loudest button in the sidebar. */
#coa-panel .coa-member-card__edit-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px var(--coa-space-lg);
	font-size: 1em;
	color: var(--coa-primary);
	background: #fff;
	border: 1px solid var(--coa-primary);
	border-radius: var(--coa-radius);
	cursor: pointer;
}

#coa-panel .coa-member-card__edit-toggle:hover {
	background: var(--coa-border-light);
}

.coa-member-card__edit-toggle:focus-visible {
	outline: 2px solid var(--coa-primary);
	outline-offset: 2px;
}

/* "Escribir por WhatsApp" sidebar button — its own standalone block below
   the "Mis datos" card (not a row inside it), full-width to read as a
   distinct action, and WhatsApp's own brand green rather than the site's
   --coa-primary so it's immediately recognizable for what it opens,
   matching the near-universal convention for this exact kind of button.
   Selector is the compound ".coa-activity-card__cta.coa-whatsapp-cta"
   (two classes), not ".coa-whatsapp-cta" alone: the theme's own site.css
   (loaded after this stylesheet — see the Fase 3 "restyle plugin surfaces
   from the theme" pass) sets a same-specificity, single-class
   ".coa-activity-card__cta { background: ... }" rule of its own, which
   would otherwise win purely by loading later, regardless of this rule's
   position within this file. The extra class makes this selector strictly
   more specific, so it wins regardless of stylesheet load order. */
.coa-activity-card__cta.coa-whatsapp-cta {
	display: flex;
	width: 100%;
	margin-top: var(--coa-space-md);
	background: #25d366;
}

.coa-activity-card__cta.coa-whatsapp-cta:hover {
	background: #1ebe5a;
}

.coa-panel-phone-form {
	margin-top: var(--coa-space-md);
}

.coa-panel-phone-form label:not(.coa-visually-hidden) {
	display: block;
	margin-bottom: var(--coa-space-xs);
	font-weight: 500;
}

/* Stacked, not side-by-side: the 280px sidebar column doesn't leave a
   side-by-side input+button row enough width for either to render
   correctly — the button used to collapse to ~60px and wrap its own
   label one letter per line. Both elements go full-width instead,
   reusing the same "full-width action button in a narrow column" idiom
   .coa-activity-card__footer button already uses. */
.coa-panel-phone-form__row {
	display: flex;
	flex-direction: column;
	gap: var(--coa-space-sm);
}

.coa-panel-phone-form__row input {
	width: 100%;
	box-sizing: border-box;
	min-height: 44px;
	padding: 8px var(--coa-space-sm);
	border: 1px solid var(--coa-border);
	border-radius: var(--coa-radius);
	font-size: 1em;
}

.coa-panel-phone-form__row button {
	width: 100%;
}

/* Phone field (0.35.0): country selector + national number side by side.
   ID-qualified copies beat the signup form's own
   "#coa-signup-form select / input[type=tel]" rules (width: 100%). */
.coa-phone-field__row,
#coa-signup-form .coa-phone-field__row {
	display: flex;
	gap: var(--coa-space-sm);
	align-items: stretch;
}

/* 0.36.1: the selector takes a fixed share of the row and never grows with
   its label — a long country ("República Democrática del Congo (+243)")
   is cut with an ellipsis instead of widening the row; the number takes
   the rest. */
.coa-phone-field__row select,
#coa-signup-form .coa-phone-field__row select {
	flex: 0 0 clamp(9.5rem, 38%, 16rem);
	width: auto;
	min-width: 0;
	max-width: 100%;
	min-height: 44px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.coa-phone-field__row input[type="tel"],
#coa-signup-form .coa-phone-field__row input[type="tel"] {
	flex: 1 1 0;
	width: auto;
	min-width: 0;
	min-height: 44px;
}

/* A field too narrow for both (under 16rem: a 320px phone leaves ~220px): selector and
   number stack, each full width, instead of a ~60px number box. Scoped to
   the signup form — a size container inside a wp-admin table cell would
   stop the cell from sizing to its content. */
#coa-signup-form .coa-phone-field {
	container-type: inline-size;
}

@container (max-width: 16rem) {
	#coa-signup-form .coa-phone-field__row {
		flex-direction: column;
	}

	#coa-signup-form .coa-phone-field__row select,
	#coa-signup-form .coa-phone-field__row input[type="tel"] {
		flex: 0 0 auto;
		width: 100%;
	}
}

/* The panel's 280px sidebar: stacked, like the rest of that form. */
.coa-panel-phone-form .coa-phone-field {
	margin-bottom: var(--coa-space-sm);
}

.coa-panel-phone-form .coa-phone-field__row {
	flex-direction: column;
}

.coa-panel-phone-form .coa-phone-field__row select,
.coa-panel-phone-form .coa-phone-field__row input[type="tel"] {
	flex: 0 0 auto;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding: 8px var(--coa-space-sm);
	border: 1px solid var(--coa-border);
	border-radius: var(--coa-radius);
	font-size: 1em;
}

/* Post-activity speaker feedback form ([club_avanza_feedback]) */
#coa-feedback-wrap {
	--coa-star-empty: #767a80;  /* 4.1:1 vs this wrap's own white background — a plain --coa-border-light (#dcdcde) only reaches ~1.3:1, functionally invisible as an "empty star" outline */
	--coa-star-filled: #a86c00; /* darker amber than a typical theme accent (many land near ~2:1 against a light background), so it clears the 3:1 WCAG floor for a state-bearing icon regardless of theme */
	max-width: 640px;
	margin: 0 auto;
	/* An explicit, theme-independent background: the sticky progress bar
	   below needs an opaque surface to cover content scrolling underneath
	   it, and this plugin is meant to stay legible regardless of the
	   active theme's own page background — never assume it's light. */
	background: #fff;
	padding: var(--coa-space-lg);
	border-radius: var(--coa-radius);
	box-sizing: border-box;
}
.coa-feedback-state {
	text-align: center;
	padding: var(--coa-space-xl) var(--coa-space-lg);
}
.coa-feedback-intro {
	margin-bottom: var(--coa-space-lg);
}
.coa-feedback-lead {
	color: var(--coa-text-muted);
	font-size: 1.05em;
}
/* Sticky so the "how much is left" signal stays on screen through the
   whole scroll — the single biggest fix for a form this long, per both
   halves of the impeccable critique that shipped this redesign. */
.coa-feedback-progress {
	position: sticky;
	top: 0;
	z-index: 10;
	background: #fff;
	padding: var(--coa-space-sm) 0;
	margin-bottom: var(--coa-space-md);
}
.coa-feedback-progress__label {
	font-size: 0.9em;
	font-weight: 600;
	color: var(--coa-text-muted);
	margin: 0 0 var(--coa-space-xs);
}
.coa-feedback-progress__track {
	height: 6px;
	border-radius: 3px;
	background: var(--coa-border-light);
	overflow: hidden;
}
.coa-feedback-progress__fill {
	height: 100%;
	background: var(--coa-primary);
	transition: width 200ms ease;
}
.coa-feedback-speaker {
	border: none;
	padding: 0;
	margin: 0 0 var(--coa-space-xl);
}
/* The one thing a respondent must never lose track of if interrupted
   mid-form: WHICH person they're currently rating. A full-width tinted
   band, not just a legend line, so it reads as a real chapter break. */
.coa-feedback-speaker__header {
	background: var(--coa-error-bg);
	border-radius: var(--coa-radius);
	padding: var(--coa-space-md) var(--coa-space-lg);
	margin-bottom: var(--coa-space-lg);
}
.coa-feedback-speaker__eyebrow {
	margin: 0 0 var(--coa-space-xs);
	font-size: 0.85em;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--coa-error);
}
.coa-feedback-speaker__name {
	margin: 0;
	font-size: 1.4em;
}
.coa-feedback-block {
	margin: 0 0 var(--coa-space-lg);
	font-size: 1.1em;
	color: var(--coa-text);
	border: none;
	padding: 0;
}
.coa-star-rating {
	border: none;
	border-top: 1px solid var(--coa-border-light);
	padding: var(--coa-space-md) 0;
	margin: 0;
}
.coa-star-rating:first-of-type {
	border-top: none;
}
.coa-star-rating legend {
	font-weight: 400;
	font-size: 1em;
	padding: 0 0 var(--coa-space-sm);
	white-space: normal;
}
/* Star widget: radios rendered in NATURAL 1-to-5 order (not the classic
   5-down-to-1-plus-row-reverse CSS trick this used to be — that made a
   keyboard user's arrow keys feel backwards, since native radio-group
   arrow navigation follows DOM order, and DOM order was the reverse of
   the visual left-to-right reading order). The fill state (which stars
   look "on") is now driven by a small JS helper in public-feedback.php
   (syncStarFill()) that toggles a plain .is-filled class up to the
   checked/hovered value — natural DOM order means arrow keys, Tab order,
   and screen-reader traversal all now match what's on screen. */
.coa-stars {
	display: flex;
	gap: var(--coa-space-sm);
}
.coa-stars input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}
.coa-stars label {
	cursor: pointer;
	font-size: 1.8em;
	line-height: 1;
	/* 44x44 minimum tap target per WCAG mobile guidance — the glyph itself
	   is much smaller, padding pads out the actual clickable box without
	   changing the visual size of the star. */
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--coa-star-empty);
	border-radius: var(--coa-radius);
}
.coa-stars label::before {
	content: "★";
}
.coa-stars label.is-filled {
	color: var(--coa-star-filled);
}
.coa-stars input:focus-visible ~ label {
	outline: 2px solid var(--coa-primary);
	outline-offset: 2px;
}
.coa-feedback-open textarea {
	width: 100%;
	max-width: 100%;
}
.coa-feedback-step__nav {
	display: flex;
	justify-content: space-between;
	gap: var(--coa-space-md);
	margin-top: var(--coa-space-lg);
}
/* "Anterior" is a secondary action — outlined, not filled, so it never
   competes with "Siguiente"/"Enviar mi opinión" for attention. */
.coa-feedback-prev {
	background: transparent !important;
	color: var(--coa-primary) !important;
	border: 1px solid var(--coa-primary) !important;
}
.coa-feedback-prev:hover {
	background: var(--coa-error-bg) !important;
}
.coa-feedback-next,
#coa-feedback-submit {
	margin-left: auto;
}
.coa-feedback-message {
	padding: var(--coa-space-sm) var(--coa-space-md);
	border-radius: var(--coa-radius);
	margin: var(--coa-space-md) 0;
}
.coa-feedback-message:empty {
	display: none;
}
.coa-feedback-message.is-success {
	background: var(--coa-success-bg);
	color: var(--coa-success);
}
.coa-feedback-message.is-error {
	background: var(--coa-error-bg);
	color: var(--coa-error);
}
.coa-feedback-message.is-info {
	background: var(--coa-border-light);
	color: var(--coa-text);
}
.coa-feedback-success {
	text-align: center;
	padding: var(--coa-space-xl) var(--coa-space-lg);
}
.coa-feedback-success__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--coa-success-bg);
	color: var(--coa-success);
	font-size: 1.8em;
	margin-bottom: var(--coa-space-md);
}
.coa-feedback-success__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px var(--coa-space-lg);
	margin-top: var(--coa-space-md);
	color: #fff;
	background: var(--coa-primary);
	border-radius: var(--coa-radius);
	text-decoration: none;
}
.coa-feedback-success__cta:hover {
	background: var(--coa-primary-hover);
}
.coa-feedback-success__cta:focus-visible {
	outline: 2px solid var(--coa-primary);
	outline-offset: 2px;
}

/* 0.37.0: «Tengo un código» on the signup form (a native <details>). */
.coa-coupon summary {
	display: inline-block;
	padding: var(--coa-space-sm) 0;
	min-height: 24px;
	color: var(--coa-primary, #660032);
	font-weight: 700;
	text-decoration: underline;
	cursor: pointer;
}
.coa-coupon[open] summary {
	margin-bottom: var(--coa-space-sm);
}
.coa-coupon input[type="text"] {
	max-width: 20rem;
	text-transform: uppercase;
}

/* M5: the visitor's «Iniciar sesión» (outside #coa-panel, inside the
   theme's .com-content, whose "a" rule is 0-1-1). */
.coa-panel-login a.coa-panel-login__cta {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-left: 0.25rem;
	padding: 0 1.25rem;
	border-radius: 999px;
	color: #fff;
	background: #ce3402;
	font-weight: 800;
	text-decoration: none;
}

.coa-panel-login a.coa-panel-login__cta:hover {
	background: #b52d00;
}

.coa-panel-login a.coa-panel-login__cta:focus-visible {
	outline: 2px solid #660032;
	outline-offset: 3px;
}