/*
 * CAEPS Group Membership signup table.
 *
 * A CSS-grid "table" (not a <table>) so each row can be a real <form>
 * wrapping the Seats input and the Add-to-Cart button — valid markup that
 * still reads as a table, and collapses to stacked cards on small screens.
 */

.caeps-gs-wrap {
	margin: var(--caeps-space-4) 0;
}

.caeps-gs-note {
	margin: 0 0 var(--caeps-space-4);
	font-size: var(--caeps-font-size-md);
	line-height: var(--caeps-line-height-normal);
	color: var(--caeps-color-text-secondary);
}

/* Shared column template — header and rows stay aligned. */
.caeps-gs {
	--gs-cols: 90px minmax(120px, 1.1fr) minmax(150px, 2fr) minmax(90px, 0.7fr) 92px minmax(120px, auto);
	border: 1px solid var(--caeps-color-border);
	border-radius: var(--caeps-radius-lg);
	overflow: hidden;
	background: var(--caeps-color-surface);
	box-shadow: var(--caeps-shadow-sm);
}

.caeps-gs__head,
.caeps-gs__row {
	display: grid;
	grid-template-columns: var(--gs-cols);
	align-items: center;
	column-gap: var(--caeps-space-4);
	margin: 0; /* reset form default margin */
}

.caeps-gs__head {
	padding: var(--caeps-space-3) var(--caeps-space-5);
	background: var(--caeps-color-surface-sunken);
	border-bottom: 1px solid var(--caeps-color-border);
	font-size: var(--caeps-font-size-xs);
	font-weight: var(--caeps-font-weight-semibold);
	text-transform: uppercase;
	letter-spacing: var(--caeps-tracking-wide);
	color: var(--caeps-color-text-secondary);
}

.caeps-gs__row {
	padding: var(--caeps-space-4) var(--caeps-space-5);
	border-bottom: 1px solid var(--caeps-color-border-subtle);
}

.caeps-gs__row:last-child {
	border-bottom: 0;
}

.caeps-gs__row:hover {
	background: var(--caeps-color-surface-sunken);
}

.caeps-gs__cell {
	min-width: 0; /* let text wrap inside grid cells */
}

.caeps-gs__img {
	display: flex;
	align-items: center;
}

.caeps-app img.caeps-gs__thumb {
	display: block;
	width: 75px;
	height: 75px;
	max-width: 75px;
	margin: 0;
	object-fit: cover;
	border-radius: var(--caeps-radius-sm);
	border: 1px solid var(--caeps-color-border-subtle);
	background: var(--caeps-color-surface-sunken);
}

.caeps-gs__tier {
	font-size: var(--caeps-font-size-lg);
	font-weight: var(--caeps-font-weight-semibold);
	color: var(--caeps-color-text);
}

.caeps-gs__desc {
	font-size: var(--caeps-font-size-sm);
	line-height: var(--caeps-line-height-snug);
	color: var(--caeps-color-text-secondary);
}

.caeps-gs__desc p {
	margin: 0 0 var(--caeps-space-1);
}

.caeps-gs__desc p:last-child {
	margin-bottom: 0;
}

.caeps-gs__price {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: var(--caeps-font-size-lg);
	font-weight: var(--caeps-font-weight-semibold);
	color: var(--caeps-color-text);
}

.caeps-gs__price .amount {
	white-space: nowrap;
}

.caeps-gs__free {
	color: var(--caeps-color-success);
}

.caeps-gs__per {
	font-size: var(--caeps-font-size-2xs);
	font-weight: var(--caeps-font-weight-regular);
	color: var(--caeps-color-text-tertiary);
	text-transform: none;
	letter-spacing: 0;
}

.caeps-gs__qtyinput {
	width: 72px;
	padding: var(--caeps-space-2) var(--caeps-space-2);
	font-size: var(--caeps-font-size-md);
	text-align: center;
	color: var(--caeps-color-text);
	background: var(--caeps-color-surface);
	border: 1px solid var(--caeps-color-border-strong);
	border-radius: var(--caeps-radius-sm);
	line-height: 1.2;
}

.caeps-gs__qtyinput:focus {
	outline: 2px solid var(--caeps-color-border-focus);
	outline-offset: 1px;
	border-color: var(--caeps-color-border-focus);
}

/* Add-to-Cart CTA — green to match the site's signup buttons. */
.caeps-app .caeps-gs__btn,
.caeps-app a.caeps-gs__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	white-space: nowrap;
	background: var(--caeps-color-success);
	border-color: var(--caeps-color-success);
	color: var(--caeps-color-text-inverse);
}

.caeps-app .caeps-gs__btn:hover,
.caeps-app a.caeps-gs__btn:hover {
	background: #128a3e; /* darker success */
	border-color: #128a3e;
	color: var(--caeps-color-text-inverse);
}

/* ── Adding-to-cart spinner ── */
.caeps-gs__spinner {
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-right: var(--caeps-space-2);
	vertical-align: -2px;
	border: 2px solid rgba(255, 255, 255, 0.45);
	border-top-color: #fff;
	border-radius: 50%;
	animation: caeps-gs-spin 0.6s linear infinite;
}

@keyframes caeps-gs-spin {
	to {
		transform: rotate(360deg);
	}
}

.caeps-app .caeps-gs__btn[disabled] {
	cursor: progress;
	opacity: 0.9;
}

@media (prefers-reduced-motion: reduce) {
	.caeps-gs__spinner {
		animation-duration: 1.6s;
	}
}

/* ── Inline confirmation / error message ──
   Rendered as a sibling below the row (NOT a grid child), so it can't affect
   that row's column alignment. */
.caeps-gs__msg {
	margin: var(--caeps-space-3) var(--caeps-space-5) var(--caeps-space-4);
	padding: var(--caeps-space-2) var(--caeps-space-3);
	font-size: var(--caeps-font-size-sm);
	line-height: var(--caeps-line-height-snug);
	border-radius: var(--caeps-radius-sm);
	animation: caeps-gs-fade 0.25s ease;
}

/* Drop the divider directly above an inline message so it reads as part of
   the row it belongs to. */
.caeps-gs__row:has( + .caeps-gs__msg ) {
	border-bottom-color: transparent;
}

@keyframes caeps-gs-fade {
	from {
		opacity: 0;
		transform: translateY(-3px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* On-brand success — Impreza navy palette: #101E30 navy ink on the site's
   light blue-grey surfaces (#F0F3F5 / #E3E7F0). No green (not in the brand). */
.caeps-gs__msg--success {
	color: #101e30;
	background: #f0f3f5;
	border: 1px solid #e3e7f0;
	border-left: 3px solid #101e30;
	font-weight: var(--caeps-font-weight-medium);
}

.caeps-gs__msg--error {
	color: #6b2a28;
	background: var(--caeps-color-danger-soft);
	border: 1px solid var(--caeps-color-danger-border);
}

.caeps-gs__msg-check {
	font-weight: var(--caeps-font-weight-bold);
	color: #101e30;
}

.caeps-app .caeps-gs__msg-link {
	margin-left: var(--caeps-space-1);
	font-weight: var(--caeps-font-weight-semibold);
	text-decoration: underline;
	white-space: nowrap;
}

/* ── Popup notice (toast) — for blocking messages such as the individual↔group
   cart conflict. Floats top-right, on-brand, dismissible. ── */
.caeps-gs-toast-wrap {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 100000;
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: min(92vw, 400px);
	pointer-events: none;
}

.caeps-gs-toast {
	pointer-events: auto;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 14px 14px 14px 16px;
	background: var(--caeps-color-surface);
	color: #101e30;
	border: 1px solid var(--caeps-color-warning-border);
	border-left: 4px solid var(--caeps-color-warning);
	border-radius: var(--caeps-radius-md);
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16), 0 2px 6px rgba(15, 23, 42, 0.10);
	font-size: var(--caeps-font-size-md);
	line-height: 1.5;
	animation: caeps-gs-toast-in 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.caeps-gs-toast.is-leaving {
	animation: caeps-gs-toast-out 0.22s ease forwards;
}

@keyframes caeps-gs-toast-in {
	from { opacity: 0; transform: translateX(16px); }
	to   { opacity: 1; transform: none; }
}

@keyframes caeps-gs-toast-out {
	to { opacity: 0; transform: translateX(16px); }
}

.caeps-gs-toast__icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	border-radius: 50%;
	background: var(--caeps-color-warning);
	color: #fff;
	font-size: 13px;
	font-weight: var(--caeps-font-weight-bold);
	line-height: 20px;
	text-align: center;
}

.caeps-gs-toast__icon::before {
	content: "!";
}

.caeps-gs-toast__body {
	flex: 1 1 auto;
	min-width: 0;
}

.caeps-app .caeps-gs-toast__link {
	display: inline-block;
	margin-top: 6px;
	font-weight: var(--caeps-font-weight-semibold);
	text-decoration: underline;
	color: var(--caeps-color-text-link);
}

.caeps-gs-toast__close {
	flex: 0 0 auto;
	margin: -4px -4px 0 0;
	padding: 0;
	width: 26px;
	height: 26px;
	border: 0;
	background: transparent;
	color: var(--caeps-color-text-tertiary);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	border-radius: var(--caeps-radius-sm);
}

.caeps-gs-toast__close:hover {
	color: var(--caeps-color-text);
	background: var(--caeps-color-surface-sunken);
}

@media (prefers-reduced-motion: reduce) {
	.caeps-gs-toast,
	.caeps-gs-toast.is-leaving {
		animation: none;
	}
}

/* ── Responsive: stack each row into a labelled card ──
   Starts at 900px — below that the six-column table gets too cramped. */
@media (max-width: 900px) {
	.caeps-gs__head {
		display: none;
	}

	/* Roomier cards with a darker divider so each tier reads as its own block. */
	.caeps-gs__row {
		grid-template-columns: 1fr;
		row-gap: var(--caeps-space-2);
		padding: var(--caeps-space-8) var(--caeps-space-4);
		border-bottom-color: var(--caeps-color-text-tertiary);
	}

	/* Label column caps at 200px so values don't drift right on tablets.
	   minmax(0, 1fr) stops the value column (and the button) from growing
	   past the card's right padding. */
	.caeps-gs__cell {
		display: grid;
		grid-template-columns: clamp(96px, 40%, 200px) minmax(0, 1fr);
		align-items: baseline;
		column-gap: var(--caeps-space-3);
	}

	/* Keep Seats + Add to Cart from stretching across wide cards. */
	.caeps-gs__qtyinput,
	.caeps-app .caeps-gs__btn {
		max-width: 300px;
	}

	/* Smaller Add to Cart on the cards. The extra class is needed to beat the
	   theme's button[type="submit"] styles (20px text, 1.6em side padding). */
	.caeps-gs .caeps-gs__cta .caeps-gs__btn {
		font-size: 1rem;
		padding: 0.375rem var(--caeps-space-5);
	}

	.caeps-gs__cell::before {
		content: attr(data-label);
		font-size: var(--caeps-font-size-2xs);
		font-weight: var(--caeps-font-weight-semibold);
		text-transform: uppercase;
		letter-spacing: var(--caeps-tracking-wide);
		color: var(--caeps-color-text-tertiary);
	}

	/* No product image on mobile — the tier title heads each card instead. */
	.caeps-gs__img {
		display: none;
	}

	/* Tier name becomes the card title: full width, no "Tier" label. */
	.caeps-gs__tier {
		display: block;
		font-size: 1.5rem;
		line-height: var(--caeps-line-height-tight);
		padding-bottom: var(--caeps-space-2);
		margin-bottom: var(--caeps-space-1);
		border-bottom: 1px solid var(--caeps-color-border-subtle);
	}

	.caeps-gs__tier::before {
		content: none;
	}

	/* Inline add-to-cart message: keep it inside its card and keep the divider
	   between cards (desktop hides the row divider above the message). */
	.caeps-gs__row:has( + .caeps-gs__msg ) {
		padding-bottom: var(--caeps-space-2);
	}

	.caeps-gs__msg {
		margin: 0 var(--caeps-space-4) var(--caeps-space-8);
	}

	.caeps-gs__msg + .caeps-gs__row {
		border-top: 1px solid var(--caeps-color-text-tertiary);
	}

	.caeps-gs__price {
		flex-direction: row;
		align-items: baseline;
		gap: var(--caeps-space-2);
	}
}