/*
 * Base styling for the plugin's public-facing shortcode surfaces
 * (#coa-signup-form, #coa-panel, #coa-activities-list). 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,
#coa-panel,
#coa-activities-list {
	--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;

	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;
}

/* --- Forms: labels, fields, fieldset --- */

#coa-signup-form label {
	display: block;
	margin-bottom: var(--coa-space-md);
	font-weight: 500;
}

#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;
	margin-top: var(--coa-space-xs);
	padding: 10px var(--coa-space-sm);
	font-size: 1em;
	color: var(--coa-text);
	border: 1px solid var(--coa-border);
	border-radius: var(--coa-radius);
}

#coa-signup-form fieldset {
	margin-bottom: var(--coa-space-md);
	padding: var(--coa-space-md);
	border: 1px solid var(--coa-border-light);
	border-radius: var(--coa-radius);
}

#coa-signup-form fieldset label {
	margin-bottom: var(--coa-space-sm);
	font-weight: 400;
}

#coa-signup-form fieldset label:last-child {
	margin-bottom: 0;
}

/* The consent checkbox's own label: keep the checkbox and its (often
   multi-line) text aligned at the top, not vertically centered. */
#coa-signup-form label:has(input[type="checkbox"]) {
	display: flex;
	align-items: flex-start;
	gap: var(--coa-space-sm);
	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 {
	display: inline-flex;
	align-items: 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 {
	background: var(--coa-primary-hover);
}

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

/* 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-signup-form input:focus-visible,
#coa-signup-form select:focus-visible {
	outline: 2px solid var(--coa-primary);
	outline-offset: 2px;
}

/* --- Member panel: reservation lists --- */

#coa-panel h2 {
	margin-top: var(--coa-space-lg);
	margin-bottom: var(--coa-space-sm);
	font-size: 1.15em;
}

#coa-panel ul {
	margin: 0 0 var(--coa-space-lg);
	padding: 0;
	list-style: none;
}

#coa-panel li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--coa-space-md);
	padding: 10px 0;
	border-bottom: 1px solid var(--coa-border-light);
}

#coa-panel li button {
	min-height: 36px;
	padding: 6px var(--coa-space-md);
	font-size: 0.9em;
	flex-shrink: 0;
}

/* --- 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);
}

#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;
	}
}

/* --- 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);
}

.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);
}

.coa-activity-card__image {
	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__registration {
	margin: var(--coa-space-xs) 0 0;
	color: var(--coa-primary);
	font-size: 0.85em;
	font-weight: 500;
}