/**
 * RecTrac Connect - Frontend Programs Styles
 *
 * Modern, accessible styles for displaying RecTrac programs.
 * Responsive design with mobile-first approach.
 *
 * @package RecTrac_Connect
 */

/* ============================================
   CSS Custom Properties (Variables)
   ============================================ */
:root {
	/* Color Palette */
	--rectrac-primary: #2563eb;
	--rectrac-primary-hover: #1d4ed8;
	--rectrac-primary-dark: #1e40af;
	--rectrac-secondary: #64748b;
	--rectrac-success: #10b981;
	--rectrac-warning: #f59e0b;
	--rectrac-danger: #ef4444;
	--rectrac-info: #3b82f6;

	/* Status Colors */
	--rectrac-status-open: #10b981;
	--rectrac-status-waitlist: #f59e0b;
	--rectrac-status-full: #ef4444;

	/* Neutral Colors */
	--rectrac-white: #ffffff;
	--rectrac-gray-50: #f9fafb;
	--rectrac-gray-100: #f3f4f6;
	--rectrac-gray-200: #e5e7eb;
	--rectrac-gray-300: #d1d5db;
	--rectrac-gray-400: #9ca3af;
	--rectrac-gray-500: #6b7280;
	--rectrac-gray-600: #4b5563;
	--rectrac-gray-700: #374151;
	--rectrac-gray-800: #1f2937;
	--rectrac-gray-900: #111827;

	/* Spacing Scale (4px base) */
	--rectrac-space-1: 0.25rem;  /* 4px */
	--rectrac-space-2: 0.5rem;   /* 8px */
	--rectrac-space-3: 0.75rem;  /* 12px */
	--rectrac-space-4: 1rem;     /* 16px */
	--rectrac-space-5: 1.25rem;  /* 20px */
	--rectrac-space-6: 1.5rem;   /* 24px */
	--rectrac-space-8: 2rem;     /* 32px */
	--rectrac-space-10: 2.5rem;  /* 40px */
	--rectrac-space-12: 3rem;    /* 48px */

	/* Typography */
	--rectrac-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--rectrac-font-size-xs: 0.75rem;    /* 12px */
	--rectrac-font-size-sm: 0.875rem;   /* 14px */
	--rectrac-font-size-base: 1rem;     /* 16px */
	--rectrac-font-size-lg: 1.125rem;   /* 18px */
	--rectrac-font-size-xl: 1.25rem;    /* 20px */
	--rectrac-font-size-2xl: 1.5rem;    /* 24px */

	--rectrac-font-weight-normal: 400;
	--rectrac-font-weight-medium: 500;
	--rectrac-font-weight-semibold: 600;
	--rectrac-font-weight-bold: 700;

	--rectrac-line-height-tight: 1.25;
	--rectrac-line-height-normal: 1.5;
	--rectrac-line-height-relaxed: 1.75;

	/* Border Radius */
	--rectrac-radius-sm: 0.25rem;  /* 4px */
	--rectrac-radius-md: 0.5rem;   /* 8px */
	--rectrac-radius-lg: 0.75rem;  /* 12px */
	--rectrac-radius-xl: 1rem;     /* 16px */
	--rectrac-radius-full: 9999px;

	/* Shadows */
	--rectrac-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--rectrac-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
	--rectrac-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--rectrac-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	--rectrac-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

	/* Transitions */
	--rectrac-transition: all 0.2s ease-in-out;
	--rectrac-transition-fast: all 0.15s ease-in-out;
	--rectrac-transition-slow: all 0.3s ease-in-out;
}

/* ============================================
   Base Styles & Resets
   ============================================ */
.rectrac-programs-grid,
.rectrac-programs-list,
.rectrac-programs-table-wrapper {
	font-family: var(--rectrac-font-sans);
	font-size: var(--rectrac-font-size-base);
	line-height: var(--rectrac-line-height-normal);
	color: var(--rectrac-gray-800);
	box-sizing: border-box;
}

.rectrac-programs-grid *,
.rectrac-programs-list *,
.rectrac-programs-table-wrapper * {
	box-sizing: border-box;
}

/* No Programs Message */
.rectrac-no-programs {
	padding: var(--rectrac-space-8);
	text-align: center;
	background-color: var(--rectrac-gray-50);
	border: 2px dashed var(--rectrac-gray-300);
	border-radius: var(--rectrac-radius-lg);
	color: var(--rectrac-gray-600);
}

.rectrac-no-programs__container {
	max-width: 32rem;
	margin: 0 auto;
}

.rectrac-no-programs__icon {
	width: 4rem;
	height: 4rem;
	margin: 0 auto 1.5rem;
	color: var(--rectrac-gray-400);
}

.rectrac-no-programs__icon svg {
	width: 100%;
	height: 100%;
}

.rectrac-no-programs__title {
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--rectrac-gray-900);
	margin: 0 0 0.75rem;
}

.rectrac-no-programs__message {
	font-size: 1rem;
	color: var(--rectrac-gray-500);
	line-height: 1.5;
	margin: 0;
}

.rectrac-no-programs__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1.5rem;
	padding: 0.75rem 1.5rem;
	background-color: var(--rectrac-primary);
	color: var(--rectrac-white);
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	border-radius: var(--rectrac-radius-md);
	transition: var(--rectrac-transition);
	box-shadow: var(--rectrac-shadow-sm);
}

.rectrac-no-programs__link:hover {
	background-color: var(--rectrac-primary-hover);
	transform: translateY(-2px);
	box-shadow: var(--rectrac-shadow-md);
	color: var(--rectrac-white);
}

.rectrac-no-programs p {
	margin: 0;
	font-size: var(--rectrac-font-size-lg);
}

/* ============================================
   GRID LAYOUT
   ============================================ */
.rectrac-programs-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--rectrac-space-6);
	padding: var(--rectrac-space-4);
	padding-top: calc(var(--rectrac-space-4) + 4px); /* Extra space for hover transform */
}

/* Tablet: 2 columns */
@media (min-width: 768px) {
	.rectrac-programs-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--rectrac-space-8);
		padding: var(--rectrac-space-6);
	}
}

/* Desktop: 4 columns */
@media (min-width: 1024px) {
	.rectrac-programs-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Program Card */
.rectrac-program-card {
	display: flex;
	flex-direction: column;
	background-color: var(--rectrac-white);
	border: 1px solid var(--rectrac-gray-200);
	border-radius: var(--rectrac-radius-lg);
	overflow: hidden;
	transition: var(--rectrac-transition);
	box-shadow: var(--rectrac-shadow-sm);
}

.rectrac-program-card:hover {
	box-shadow: var(--rectrac-shadow-lg);
	transform: translateY(-4px);
	border-color: var(--rectrac-primary);
}

.rectrac-program-card:focus-within {
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
	outline: none;
}

/* Card Image */
.rectrac-program-card__image {
	position: relative;
	width: 100%;
	height: 200px;
	overflow: hidden;
	background-color: var(--rectrac-gray-100);
}

.rectrac-program-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: var(--rectrac-transition-slow);
}

.rectrac-program-card:hover .rectrac-program-card__image img {
	transform: scale(1.05);
}

.rectrac-program-card__image--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--rectrac-gray-400);
}

.rectrac-program-card__image--placeholder svg {
	width: 64px;
	height: 64px;
}

/* Status Badge on Image */
.rectrac-program-card__status-badge {
	position: absolute;
	top: var(--rectrac-space-3);
	right: var(--rectrac-space-3);
	padding: var(--rectrac-space-1) var(--rectrac-space-3);
	background-color: var(--rectrac-white);
	color: var(--rectrac-gray-800);
	font-size: var(--rectrac-font-size-xs);
	font-weight: var(--rectrac-font-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-radius: var(--rectrac-radius-full);
	box-shadow: var(--rectrac-shadow-md);
}

.rectrac-status-full {
	background-color: var(--rectrac-status-full);
	color: var(--rectrac-white);
}

.rectrac-status-waitlist {
	background-color: var(--rectrac-status-waitlist);
	color: var(--rectrac-white);
}

/* Card Content */
.rectrac-program-card__content {
	flex: 1;
	padding: var(--rectrac-space-5);
	display: flex;
	flex-direction: column;
	gap: var(--rectrac-space-4);
}

.rectrac-program-card__header {
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	min-height: 1.5rem;
}

.rectrac-program-card__title {
	flex: 1;
	margin: 0;
	font-size: var(--rectrac-font-size-lg);
	font-weight: var(--rectrac-font-weight-bold);
	line-height: var(--rectrac-line-height-tight);
	color: var(--rectrac-gray-900);
}

.rectrac-program-card__badge {
	flex-shrink: 0;
	padding: 0.25rem 0.625rem;
	background-color: var(--rectrac-gray-800);
	color: var(--rectrac-white);
	font-size: 0.6875rem;
	font-weight: var(--rectrac-font-weight-semibold);
	border-radius: var(--rectrac-radius-full);
	letter-spacing: 0.025em;
	text-transform: uppercase;
	white-space: nowrap;
}

.rectrac-program-card__description {
	margin: 0;
	font-size: var(--rectrac-font-size-sm);
	color: var(--rectrac-gray-600);
	line-height: var(--rectrac-line-height-relaxed);
}

.rectrac-program-card__meta {
	display: flex;
	flex-direction: column;
	gap: var(--rectrac-space-3);
	padding-top: var(--rectrac-space-3);
	border-top: 1px solid var(--rectrac-gray-200);
}

.rectrac-program-card__meta-item {
	display: flex;
	align-items: center;
	gap: var(--rectrac-space-2);
	font-size: var(--rectrac-font-size-sm);
	color: var(--rectrac-gray-600);
}

.rectrac-program-card__meta-item svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: var(--rectrac-gray-400);
}

/* Enrollment Info */
.rectrac-enrollment-info {
	display: flex;
	flex-direction: column;
	gap: var(--rectrac-space-2);
}

.rectrac-enrollment-info__text {
	font-size: var(--rectrac-font-size-sm);
	font-weight: var(--rectrac-font-weight-medium);
	color: var(--rectrac-gray-700);
}

/* Progress Bar */
.rectrac-progress-bar {
	width: 100%;
	height: 8px;
	background-color: var(--rectrac-gray-200);
	border-radius: var(--rectrac-radius-full);
	overflow: hidden;
}

.rectrac-progress-bar__fill {
	height: 100%;
	background-color: var(--rectrac-primary);
	border-radius: var(--rectrac-radius-full);
	transition: width 0.3s ease-in-out;
}

.rectrac-progress-bar__fill--open {
	background-color: var(--rectrac-status-open);
}

.rectrac-progress-bar__fill--waitlist {
	background-color: var(--rectrac-status-waitlist);
}

.rectrac-progress-bar__fill--full {
	background-color: var(--rectrac-status-full);
}

/* Card Footer */
.rectrac-program-card__footer {
	padding: var(--rectrac-space-5);
	padding-top: 0;
}

/* Grid Register Button - Full Width */
.rectrac-program-card__footer .rectrac-register-btn,
.rectrac-program-card__footer .rectrac-btn--disabled {
	width: 100%;
}

/* ============================================
   BUTTONS
   ============================================ */
.rectrac-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--rectrac-space-2);
	padding: var(--rectrac-space-3) var(--rectrac-space-6);
	font-size: var(--rectrac-font-size-base);
	font-weight: var(--rectrac-font-weight-semibold);
	line-height: 1;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	border: none;
	border-radius: var(--rectrac-radius-md);
	cursor: pointer;
	transition: var(--rectrac-transition);
	box-shadow: var(--rectrac-shadow-sm);
}

.rectrac-btn svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.rectrac-btn:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
}

.rectrac-btn--primary {
	background-color: var(--rectrac-primary);
	color: var(--rectrac-white);
}

.rectrac-btn--primary:hover {
	background-color: var(--rectrac-primary-hover);
	transform: translateY(-2px);
	box-shadow: var(--rectrac-shadow-md);
}

.rectrac-btn--primary:active {
	background-color: var(--rectrac-primary-dark);
	transform: translateY(0);
}

.rectrac-btn--small {
	padding: var(--rectrac-space-2) var(--rectrac-space-4);
	font-size: var(--rectrac-font-size-sm);
}

.rectrac-btn--disabled {
	background-color: var(--rectrac-gray-300);
	color: var(--rectrac-gray-500);
	cursor: not-allowed;
	box-shadow: none;
}

.rectrac-btn--disabled:hover {
	transform: none;
	box-shadow: none;
}

/* ============================================
   LIST LAYOUT
   ============================================ */
.rectrac-programs-list {
	display: flex;
	flex-direction: column;
	gap: var(--rectrac-space-4);
	padding: var(--rectrac-space-4);
}

@media (min-width: 768px) {
	.rectrac-programs-list {
		gap: var(--rectrac-space-6);
		padding: var(--rectrac-space-6);
	}
}

.rectrac-program-list-item {
	display: flex;
	flex-direction: column;
	background-color: var(--rectrac-white);
	border: 1px solid var(--rectrac-gray-200);
	border-radius: var(--rectrac-radius-lg);
	overflow: hidden;
	transition: var(--rectrac-transition);
}

@media (min-width: 768px) {
	.rectrac-program-list-item {
		flex-direction: row;
	}
}

.rectrac-program-list-item:hover {
	box-shadow: var(--rectrac-shadow-md);
	border-color: var(--rectrac-gray-300);
}

.rectrac-program-list-item--even {
	background-color: var(--rectrac-white);
}

.rectrac-program-list-item--odd {
	background-color: var(--rectrac-gray-50);
}

/* Thumbnail */
.rectrac-program-list-item__thumbnail {
	width: 100%;
	height: 200px;
	flex-shrink: 0;
	background-color: var(--rectrac-gray-100);
	overflow: hidden;
}

@media (min-width: 768px) {
	.rectrac-program-list-item__thumbnail {
		width: 150px;
		height: auto;
	}
}

.rectrac-program-list-item__thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rectrac-program-list-item__thumbnail-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--rectrac-gray-400);
}

.rectrac-program-list-item__thumbnail-placeholder svg {
	width: 48px;
	height: 48px;
}

/* Content */
.rectrac-program-list-item__content {
	flex: 1;
	padding: var(--rectrac-space-5);
	display: flex;
	flex-direction: column;
	gap: var(--rectrac-space-4);
}

.rectrac-program-list-item__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--rectrac-space-4);
	flex-wrap: wrap;
}

.rectrac-program-list-item__title {
	margin: 0;
	font-size: var(--rectrac-font-size-xl);
	font-weight: var(--rectrac-font-weight-bold);
	color: var(--rectrac-gray-900);
	line-height: var(--rectrac-line-height-tight);
}

.rectrac-program-list-item__badges {
	display: flex;
	align-items: center;
	gap: var(--rectrac-space-2);
	flex-wrap: wrap;
}

.rectrac-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--rectrac-space-1);
	padding: var(--rectrac-space-1) var(--rectrac-space-2);
	font-size: var(--rectrac-font-size-xs);
	font-weight: var(--rectrac-font-weight-semibold);
	border-radius: var(--rectrac-radius-sm);
	white-space: nowrap;
}

.rectrac-badge svg {
	width: 12px;
	height: 12px;
}

.rectrac-badge--activity {
	background-color: var(--rectrac-gray-100);
	color: var(--rectrac-gray-700);
}

.rectrac-badge--status {
	color: var(--rectrac-white);
}

.rectrac-badge--open {
	background-color: var(--rectrac-status-open);
}

.rectrac-badge--waitlist {
	background-color: var(--rectrac-status-waitlist);
}

.rectrac-badge--full {
	background-color: var(--rectrac-status-full);
}

.rectrac-program-list-item__description {
	margin: 0;
}

.rectrac-program-list-item__description p {
	margin: 0;
	font-size: var(--rectrac-font-size-base);
	color: var(--rectrac-gray-600);
	line-height: var(--rectrac-line-height-relaxed);
}

.rectrac-program-list-item__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rectrac-space-4);
	padding-top: var(--rectrac-space-3);
	border-top: 1px solid var(--rectrac-gray-200);
}

.rectrac-meta-item {
	display: flex;
	align-items: center;
	gap: var(--rectrac-space-2);
	font-size: var(--rectrac-font-size-sm);
}

.rectrac-meta-item svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: var(--rectrac-gray-400);
}

.rectrac-meta-item strong {
	font-weight: var(--rectrac-font-weight-semibold);
	color: var(--rectrac-gray-700);
}

.rectrac-meta-item span {
	color: var(--rectrac-gray-600);
}

.rectrac-meta-item--enrollment {
	flex: 1;
	min-width: 200px;
}

.rectrac-progress-bar--inline {
	flex: 1;
	margin-left: var(--rectrac-space-2);
}

/* Actions */
.rectrac-program-list-item__actions {
	padding: var(--rectrac-space-5);
	padding-top: 0;
	display: flex;
	justify-content: flex-end;
}

@media (min-width: 768px) {
	.rectrac-program-list-item__actions {
		padding: var(--rectrac-space-5);
		align-items: center;
	}
}

/* ============================================
   TABLE LAYOUT
   ============================================ */
.rectrac-programs-table-wrapper {
	overflow-x: auto;
	padding: var(--rectrac-space-4);
	background-color: var(--rectrac-white);
	border: 1px solid var(--rectrac-gray-200);
	border-radius: var(--rectrac-radius-lg);
	box-shadow: var(--rectrac-shadow-sm);
}

.rectrac-programs-table-wrapper:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

.rectrac-programs-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--rectrac-font-size-sm);
}

/* Table Header */
.rectrac-programs-table thead {
	background-color: var(--rectrac-gray-50);
	border-bottom: 2px solid var(--rectrac-gray-200);
}

.rectrac-programs-table__header {
	padding: var(--rectrac-space-4);
	text-align: left;
	font-weight: var(--rectrac-font-weight-semibold);
	color: var(--rectrac-gray-700);
	white-space: nowrap;
}

.rectrac-programs-table__header--sortable {
	padding: 0;
}

.rectrac-sort-btn {
	width: 100%;
	padding: var(--rectrac-space-4);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rectrac-space-2);
	background: none;
	border: none;
	font-size: var(--rectrac-font-size-sm);
	font-weight: var(--rectrac-font-weight-semibold);
	color: var(--rectrac-gray-700);
	cursor: pointer;
	transition: var(--rectrac-transition-fast);
}

.rectrac-sort-btn:hover {
	background-color: var(--rectrac-gray-100);
	color: var(--rectrac-gray-900);
}

.rectrac-sort-btn:focus {
	outline: none;
	box-shadow: inset 0 0 0 2px var(--rectrac-primary);
}

.rectrac-sort-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	opacity: 0.5;
	transition: var(--rectrac-transition-fast);
}

.rectrac-sort-btn:hover .rectrac-sort-icon {
	opacity: 1;
}

/* Table Body */
.rectrac-programs-table tbody tr {
	border-bottom: 1px solid var(--rectrac-gray-200);
	transition: var(--rectrac-transition-fast);
}

.rectrac-programs-table tbody tr:hover {
	background-color: var(--rectrac-gray-50);
}

.rectrac-programs-table tbody tr:nth-child(even) {
	background-color: var(--rectrac-gray-50);
}

.rectrac-programs-table tbody tr:nth-child(even):hover {
	background-color: var(--rectrac-gray-100);
}

.rectrac-programs-table__cell {
	padding: var(--rectrac-space-4);
	vertical-align: middle;
}

.rectrac-programs-table__cell--name {
	font-weight: var(--rectrac-font-weight-medium);
	color: var(--rectrac-gray-900);
	max-width: 300px;
}

.rectrac-programs-table__cell--name strong {
	display: block;
}

.rectrac-table-badge {
	display: inline-block;
	padding: var(--rectrac-space-1) var(--rectrac-space-2);
	background-color: var(--rectrac-gray-100);
	color: var(--rectrac-gray-700);
	font-size: var(--rectrac-font-size-xs);
	font-weight: var(--rectrac-font-weight-semibold);
	border-radius: var(--rectrac-radius-sm);
	white-space: nowrap;
}

.rectrac-table-facility {
	display: inline-flex;
	align-items: center;
	gap: var(--rectrac-space-1);
	color: var(--rectrac-gray-600);
}

.rectrac-table-facility svg {
	width: 14px;
	height: 14px;
	color: var(--rectrac-gray-400);
}

.rectrac-table-empty {
	color: var(--rectrac-gray-400);
}

.rectrac-table-enrollment {
	display: flex;
	flex-direction: column;
	gap: var(--rectrac-space-2);
	min-width: 120px;
}

.rectrac-table-enrollment__text {
	font-weight: var(--rectrac-font-weight-medium);
	color: var(--rectrac-gray-700);
}

/* Table Pricing Styles */
.rectrac-table-pricing {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.rectrac-table-price {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	font-size: var(--rectrac-font-size-sm);
}

.rectrac-table-price__label {
	color: var(--rectrac-gray-500);
	font-weight: var(--rectrac-font-weight-medium);
}

.rectrac-table-price__amount {
	color: var(--rectrac-gray-900);
	font-weight: var(--rectrac-font-weight-semibold);
}

.rectrac-progress-bar--small {
	height: 6px;
}

.rectrac-status-badge {
	display: inline-block;
	padding: var(--rectrac-space-1) var(--rectrac-space-3);
	font-size: var(--rectrac-font-size-xs);
	font-weight: var(--rectrac-font-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-radius: var(--rectrac-radius-full);
	white-space: nowrap;
}

.rectrac-status-badge--open {
	background-color: #d1fae5;
	color: #065f46;
}

.rectrac-status-badge--waitlist {
	background-color: #fef3c7;
	color: #92400e;
}

.rectrac-status-badge--full {
	background-color: #fee2e2;
	color: #991b1b;
}

/* Responsive Table for Mobile */
@media (max-width: 767px) {
	.rectrac-programs-table thead {
		display: none;
	}

	.rectrac-programs-table tbody,
	.rectrac-programs-table tr,
	.rectrac-programs-table td {
		display: block;
		width: 100%;
	}

	.rectrac-programs-table__row {
		margin-bottom: var(--rectrac-space-4);
		border: 1px solid var(--rectrac-gray-200);
		border-radius: var(--rectrac-radius-md);
		overflow: hidden;
	}

	.rectrac-programs-table__cell {
		position: relative;
		padding: var(--rectrac-space-3) var(--rectrac-space-4);
		border-bottom: 1px solid var(--rectrac-gray-200);
	}

	.rectrac-programs-table__cell:last-child {
		border-bottom: none;
	}

	.rectrac-programs-table__cell::before {
		content: attr(data-label);
		display: block;
		font-weight: var(--rectrac-font-weight-semibold);
		color: var(--rectrac-gray-700);
		margin-bottom: var(--rectrac-space-2);
	}

	.rectrac-programs-table__cell--action {
		text-align: center;
	}

	.rectrac-programs-table__cell--action .rectrac-btn {
		width: 100%;
	}
}

/* ============================================
   Accessibility Enhancements
   ============================================ */

/* Focus visible for keyboard navigation */
.rectrac-register-btn:focus-visible,
.rectrac-sort-btn:focus-visible {
	outline: 2px solid var(--rectrac-primary);
	outline-offset: 2px;
}

/* Skip to content link */
.rectrac-skip-link {
	position: absolute;
	top: -40px;
	left: 0;
	background-color: var(--rectrac-primary);
	color: var(--rectrac-white);
	padding: var(--rectrac-space-2) var(--rectrac-space-4);
	text-decoration: none;
	border-radius: var(--rectrac-radius-md);
	z-index: 100;
}

.rectrac-skip-link:focus {
	top: 0;
}

/* Screen reader only text */
.rectrac-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* ============================================
   Print Styles
   ============================================ */
@media print {
	.rectrac-program-card,
	.rectrac-program-list-item,
	.rectrac-programs-table-wrapper {
		box-shadow: none;
		border: 1px solid #000;
	}

	.rectrac-program-card__image,
	.rectrac-program-list-item__thumbnail {
		display: none;
	}

	.rectrac-btn {
		display: none;
	}
}

/* ============================================
   WordPress Block Editor Compatibility
   ============================================ */
.wp-block-group .rectrac-programs-grid,
.wp-block-group .rectrac-programs-list,
.wp-block-group .rectrac-programs-table-wrapper {
	margin-top: 0;
	margin-bottom: 0;
}

/* ============================================
   GRID LAYOUT - Column Variations
   ============================================ */
.rectrac-programs-grid--columns-1 {
	grid-template-columns: 1fr;
}

.rectrac-programs-grid--columns-2 {
	grid-template-columns: repeat(1, 1fr);
}

@media (min-width: 768px) {
	.rectrac-programs-grid--columns-2 {
		grid-template-columns: repeat(2, 1fr);
	}
}

.rectrac-programs-grid--columns-3 {
	grid-template-columns: repeat(1, 1fr);
}

@media (min-width: 768px) {
	.rectrac-programs-grid--columns-3 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.rectrac-programs-grid--columns-3 {
		grid-template-columns: repeat(3, 1fr);
	}
}

.rectrac-programs-grid--columns-4 {
	grid-template-columns: repeat(1, 1fr);
}

@media (min-width: 640px) {
	.rectrac-programs-grid--columns-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.rectrac-programs-grid--columns-4 {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1280px) {
	.rectrac-programs-grid--columns-4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ============================================
   CARDS LAYOUT
   ============================================ */
.rectrac-programs-cards {
	display: grid;
	gap: 1.5rem;
	padding: 1rem 0;
	padding-top: calc(1rem + 4px); /* Extra space for hover transform */
}

.rectrac-programs-cards--columns-1 {
	grid-template-columns: 1fr;
}

.rectrac-programs-cards--columns-2 {
	grid-template-columns: repeat(1, 1fr);
}

@media (min-width: 768px) {
	.rectrac-programs-cards--columns-2 {
		grid-template-columns: repeat(2, 1fr);
	}
}

.rectrac-programs-cards--columns-3 {
	grid-template-columns: repeat(1, 1fr);
}

@media (min-width: 768px) {
	.rectrac-programs-cards--columns-3 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.rectrac-programs-cards--columns-3 {
		grid-template-columns: repeat(3, 1fr);
	}
}

.rectrac-programs-cards--columns-4 {
	grid-template-columns: repeat(1, 1fr);
}

@media (min-width: 640px) {
	.rectrac-programs-cards--columns-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.rectrac-programs-cards--columns-4 {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1280px) {
	.rectrac-programs-cards--columns-4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ============================================
   ENHANCED PROGRAM CARD STYLES
   ============================================ */
.rectrac-program-card__details {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	margin-bottom: 1rem;
}

.rectrac-program-card__detail-item {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-size: 0.875rem;
	color: #4B5563;
	line-height: 1.4;
}

.rectrac-program-card__enrollment {
	background-color: #F9FAFB;
	border-radius: 0.5rem;
	padding: 0.875rem;
	margin-bottom: 1rem;
}

.rectrac-enrollment-spots {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	margin-bottom: 0.5rem;
}

.rectrac-spots-count {
	font-size: 1.125rem;
	font-weight: 700;
	color: #059669;
}

.rectrac-spots-label {
	font-size: 0.875rem;
	color: #059669;
}

.rectrac-spots-label--waitlist {
	color: #D97706;
}

.rectrac-spots-label--full {
	color: #DC2626;
}

.rectrac-enrollment-spots--waitlist .rectrac-spots-count,
.rectrac-enrollment-spots--waitlist .rectrac-spots-label {
	color: #D97706;
}

.rectrac-enrollment-spots--full .rectrac-spots-count,
.rectrac-enrollment-spots--full .rectrac-spots-label {
	color: #DC2626;
}

.rectrac-enrollment-count {
	font-size: 0.75rem;
	color: #6B7280;
}

/* Pricing Section */
.rectrac-program-card__pricing {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
	margin-bottom: 0.5rem;
	align-items: stretch;
}

.rectrac-program-card__pricing--single {
	grid-template-columns: 1fr;
}

.rectrac-price-box {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	min-height: 4.5rem;
	padding: 0.75rem;
	background-color: #F3F4F6;
	border-radius: 0.5rem;
	text-align: center;
}

.rectrac-price-box--single {
	padding: 1rem;
	background-color: #E8F5E9;
}

.rectrac-price-label {
	font-size: 0.6875rem;
	font-weight: 500;
	color: #6B7280;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 0.25rem;
}

.rectrac-price-box--single .rectrac-price-label {
	color: #2E7D32;
}

.rectrac-price-amount {
	font-size: 1.125rem;
	font-weight: 700;
	color: #111827;
}

.rectrac-price-box--single .rectrac-price-amount {
	font-size: 1.25rem;
	color: #1B5E20;
}

/* Free pricing box - Grid */
.rectrac-price-box--free {
	padding: 1rem;
	background-color: #E8F5E9;
}

.rectrac-price-box--free .rectrac-price-label {
	color: #2E7D32;
}

.rectrac-price-box--free .rectrac-price-amount {
	font-size: 1.25rem;
	color: #1B5E20;
}

/* ============================================
   LIST LAYOUT - COMPACT STYLES
   ============================================ */
.rectrac-list-item {
	background-color: white;
	border-radius: 0.75rem;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
	padding: 1rem 1.25rem;
	transition: transform 0.2s, box-shadow 0.2s;
}

.rectrac-list-item:hover {
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.rectrac-list-item__main {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

@media (min-width: 1024px) {
	.rectrac-list-item__main {
		flex-direction: row;
		align-items: center;
		gap: 1.5rem;
	}
}

.rectrac-list-item__info {
	flex: 1;
	min-width: 0;
}

.rectrac-list-item__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}

.rectrac-list-item__badge {
	display: inline-flex;
	align-items: center;
	padding: 0.2rem 0.6rem;
	font-size: 0.6875rem;
	font-weight: 600;
	color: white;
	background-color: #1F2937;
	border-radius: 9999px;
	letter-spacing: 0.025em;
	flex-shrink: 0;
}

.rectrac-list-item__title {
	font-size: 1.125rem;
	font-weight: 700;
	color: #111827;
	line-height: 1.3;
	margin: 0;
}

.rectrac-list-item__details {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
}

.rectrac-list-item__detail {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.8125rem;
	color: #6B7280;
}

.rectrac-list-item__detail .rectrac-icon {
	width: 0.875rem;
	height: 0.875rem;
	flex-shrink: 0;
	color: #9CA3AF;
}

/* Middle Section */
.rectrac-list-item__middle {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

@media (min-width: 1024px) {
	.rectrac-list-item__middle {
		flex-shrink: 0;
		gap: 1.5rem;
	}
}

/* Enrollment Compact */
.rectrac-list-item__enrollment {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 80px;
}

.rectrac-enrollment-compact {
	display: flex;
	align-items: baseline;
	gap: 0.25rem;
}

.rectrac-enrollment-compact .rectrac-spots-count {
	font-size: 1rem;
	font-weight: 700;
	color: #059669;
}

.rectrac-enrollment-compact .rectrac-spots-label {
	font-size: 0.75rem;
	color: #059669;
}

.rectrac-enrollment-compact--waitlist .rectrac-spots-count,
.rectrac-enrollment-compact--waitlist .rectrac-spots-label {
	color: #D97706;
}

.rectrac-enrollment-compact--full .rectrac-spots-count,
.rectrac-enrollment-compact--full .rectrac-spots-label {
	color: #DC2626;
}

.rectrac-progress-bar-mini {
	width: 100%;
	height: 4px;
	background-color: #E5E7EB;
	border-radius: 2px;
	overflow: hidden;
}

.rectrac-progress-bar-mini__fill {
	height: 100%;
	background-color: #10B981;
	transition: width 0.3s;
	border-radius: 2px;
}

.rectrac-progress-bar-mini__fill--full {
	background-color: #EF4444;
}

.rectrac-progress-bar-mini__fill--waitlist {
	background-color: #F59E0B;
}

.rectrac-enrollment-text {
	font-size: 0.6875rem;
	color: #9CA3AF;
}

/* Pricing Compact */
.rectrac-list-item__pricing {
	display: flex;
	gap: 0.75rem;
}

.rectrac-price-compact {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0.375rem 0.625rem;
	background-color: #F3F4F6;
	border-radius: 0.375rem;
	min-width: 60px;
}

.rectrac-price-compact .rectrac-price-label {
	font-size: 0.5625rem;
	font-weight: 500;
	color: #9CA3AF;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.rectrac-price-compact .rectrac-price-amount {
	font-size: 0.875rem;
	font-weight: 700;
	color: #111827;
}

/* Free pricing - List layout */
.rectrac-price-compact--free {
	background-color: #E8F5E9;
}

.rectrac-price-compact--free .rectrac-price-label {
	color: #2E7D32;
}

.rectrac-price-compact--free .rectrac-price-amount {
	color: #2E7D32;
}

/* Action Section */
.rectrac-list-item__action {
	flex-shrink: 0;
}

@media (min-width: 1024px) {
	.rectrac-list-item__action {
		width: auto;
	}
}

.rectrac-list-item__action .rectrac-btn {
	width: 100%;
}

@media (min-width: 1024px) {
	.rectrac-list-item__action .rectrac-btn {
		width: auto;
		min-width: 140px;
	}
}

/* ============================================
   ENHANCED NO PROGRAMS - EMPTY STATE
   ============================================ */
.rectrac-no-programs__container {
	max-width: 32rem;
	margin: 0 auto;
}

.rectrac-no-programs__icon {
	width: 4rem;
	height: 4rem;
	margin: 0 auto 1.5rem;
	color: #9CA3AF;
}

.rectrac-no-programs__icon svg {
	width: 100%;
	height: 100%;
}

.rectrac-no-programs__title {
	font-size: 1.5rem;
	font-weight: 600;
	color: #111827;
	margin: 0 0 0.75rem;
}

.rectrac-no-programs__message {
	font-size: 1rem;
	color: #6B7280;
	line-height: 1.5;
	margin: 0 0 1.5rem;
}

.rectrac-no-programs__actions {
	margin-top: 1.5rem;
}

.rectrac-no-programs__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	font-size: 1rem;
	font-weight: 500;
	color: white;
	background-color: #2563EB;
	border-radius: 0.5rem;
	text-decoration: none;
	transition: background-color 0.2s;
}

.rectrac-no-programs__link:hover {
	background-color: #1D4ED8;
}

.rectrac-no-programs__link svg {
	width: 1rem;
	height: 1rem;
}

/* ============================================
   ICON STYLES
   ============================================ */
.rectrac-icon {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
	margin-top: 0.125rem;
	color: #6B7280;
}

/* ============================================
   CAROUSEL LAYOUT - Swiper WebComponent
   ============================================ */
.rectrac-programs-carousel-wrapper {
	position: relative;
	padding: var(--rectrac-space-4) 60px; /* Side padding for arrows */
	padding-bottom: 60px; /* Space for pagination BELOW slides */
	margin: 0 auto;
	max-width: 100%;
}

/* External Navigation Buttons */
.rectrac-carousel-nav {
	position: absolute;
	top: 50%;
	transform: translateY(calc(-50% - 30px)); /* Offset for pagination space */
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background-color: rgba(255, 255, 255, 0.95);
	border: none;
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	cursor: pointer;
	transition: all 0.2s ease-in-out;
	color: var(--rectrac-primary);
}

.rectrac-carousel-nav:hover {
	background-color: var(--rectrac-primary);
	color: var(--rectrac-white);
	box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.rectrac-carousel-nav:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3), 0 2px 8px rgba(0, 0, 0, 0.15);
}

.rectrac-carousel-nav:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.rectrac-carousel-nav svg {
	width: 20px;
	height: 20px;
}

.rectrac-carousel-nav--prev {
	left: 8px;
}

.rectrac-carousel-nav--next {
	right: 8px;
}

/* External Pagination - positioned below carousel */
.rectrac-carousel-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
	padding: var(--rectrac-space-4) 1rem;
	margin-top: var(--rectrac-space-4);
	position: relative;
	z-index: 5;
	max-width: 100%;
	box-sizing: border-box;
}

.rectrac-carousel-pagination .swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	min-width: 10px;
	min-height: 10px;
	flex-shrink: 0;
	padding: 0;
	margin: 0;
	background-color: var(--rectrac-gray-300);
	border: none;
	border-radius: 50%;
	opacity: 1;
	cursor: pointer;
	transition: all 0.2s ease-in-out;
}

.rectrac-carousel-pagination .swiper-pagination-bullet:hover {
	background-color: var(--rectrac-gray-400);
}

.rectrac-carousel-pagination .swiper-pagination-bullet:focus {
	outline: none;
	box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
}

.rectrac-carousel-pagination .swiper-pagination-bullet-active {
	background-color: var(--rectrac-primary);
	width: 24px;
	border-radius: 9999px;
}

.rectrac-carousel-pagination .swiper-pagination-bullet-active:hover {
	background-color: var(--rectrac-primary-dark);
}

/* Main Swiper container - using CSS custom properties for WebComponent */
.rectrac-programs-carousel {
	width: 100%;
	overflow: visible;
	/* Swiper WebComponent CSS custom properties - disabled, using external elements */
	--swiper-navigation-color: var(--rectrac-primary);
	--swiper-navigation-size: 24px;
	--swiper-pagination-color: var(--rectrac-primary);
	--swiper-pagination-bullet-inactive-color: var(--rectrac-gray-300);
	--swiper-pagination-bullet-inactive-opacity: 1;
	--swiper-pagination-bullet-size: 10px;
	--swiper-pagination-bullet-horizontal-gap: 6px;
}

/* Individual slide */
.rectrac-carousel-slide {
	height: auto;
	display: flex;
	padding-top: 8px; /* Space for hover transform to prevent clipping */
}

/* Carousel card - main container */
.rectrac-carousel-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	background-color: var(--rectrac-white);
	border: 1px solid var(--rectrac-gray-200);
	border-radius: var(--rectrac-radius-lg);
	overflow: hidden;
	transition: var(--rectrac-transition);
	box-shadow: var(--rectrac-shadow-sm);
}

.rectrac-carousel-card:hover {
	box-shadow: var(--rectrac-shadow-lg);
	transform: translateY(-4px);
	border-color: var(--rectrac-primary);
}

/* Card content wrapper */
.rectrac-carousel-card__content {
	flex: 1;
	padding: var(--rectrac-space-5);
	display: flex;
	flex-direction: column;
	gap: var(--rectrac-space-4);
}

/* Card header with badge */
.rectrac-carousel-card__header {
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	min-height: 1.5rem;
}

.rectrac-carousel-card__badge {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.625rem;
	background-color: var(--rectrac-gray-800);
	color: var(--rectrac-white);
	font-size: 0.6875rem;
	font-weight: var(--rectrac-font-weight-semibold);
	border-radius: var(--rectrac-radius-full);
	letter-spacing: 0.025em;
	text-transform: uppercase;
}

/* Card title */
.rectrac-carousel-card__title {
	margin: 0;
	font-size: var(--rectrac-font-size-lg);
	font-weight: var(--rectrac-font-weight-bold);
	line-height: var(--rectrac-line-height-tight);
	color: var(--rectrac-gray-900);
}

/* Card details section */
.rectrac-carousel-card__details {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.rectrac-carousel-card__detail-item {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-size: var(--rectrac-font-size-sm);
	color: var(--rectrac-gray-600);
	line-height: 1.4;
}

.rectrac-carousel-card__detail-item .rectrac-icon {
	flex-shrink: 0;
	margin-top: 0.125rem;
	color: var(--rectrac-gray-400);
}

.rectrac-carousel-card__detail-label {
	font-weight: var(--rectrac-font-weight-medium);
	color: var(--rectrac-gray-700);
}

.rectrac-carousel-card__detail-value {
	color: var(--rectrac-gray-600);
}

/* Enrollment section */
.rectrac-carousel-card__enrollment {
	background-color: var(--rectrac-gray-50);
	border-radius: var(--rectrac-radius-md);
	padding: 0.875rem;
}

.rectrac-carousel-enrollment-spots {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	margin-bottom: 0.5rem;
}

.rectrac-carousel-spots-count {
	font-size: 1.125rem;
	font-weight: var(--rectrac-font-weight-bold);
	color: var(--rectrac-status-open);
}

.rectrac-carousel-spots-label {
	font-size: var(--rectrac-font-size-sm);
	color: var(--rectrac-status-open);
}

.rectrac-carousel-spots-label--waitlist {
	color: var(--rectrac-status-waitlist);
}

.rectrac-carousel-spots-label--full {
	color: var(--rectrac-status-full);
}

.rectrac-carousel-enrollment-spots--waitlist .rectrac-carousel-spots-count,
.rectrac-carousel-enrollment-spots--waitlist .rectrac-carousel-spots-label {
	color: var(--rectrac-status-waitlist);
}

.rectrac-carousel-enrollment-spots--full .rectrac-carousel-spots-count,
.rectrac-carousel-enrollment-spots--full .rectrac-carousel-spots-label {
	color: var(--rectrac-status-full);
}

/* Progress bar */
.rectrac-carousel-progress-bar {
	width: 100%;
	height: 8px;
	background-color: var(--rectrac-gray-200);
	border-radius: var(--rectrac-radius-full);
	overflow: hidden;
	margin-bottom: 0.5rem;
}

.rectrac-carousel-progress-bar__fill {
	height: 100%;
	border-radius: var(--rectrac-radius-full);
	transition: width 0.3s ease-in-out;
}

.rectrac-carousel-progress-bar__fill--open {
	background-color: var(--rectrac-status-open);
}

.rectrac-carousel-progress-bar__fill--waitlist {
	background-color: var(--rectrac-status-waitlist);
}

.rectrac-carousel-progress-bar__fill--full {
	background-color: var(--rectrac-status-full);
}

.rectrac-carousel-enrollment-count {
	font-size: var(--rectrac-font-size-xs);
	color: var(--rectrac-gray-500);
}

/* Pricing section */
.rectrac-carousel-card__pricing {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
	align-items: stretch;
}

.rectrac-carousel-card__pricing--single {
	grid-template-columns: 1fr;
}

.rectrac-carousel-price-box {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	min-height: 4.5rem;
	padding: 0.75rem;
	background-color: var(--rectrac-gray-100);
	border-radius: var(--rectrac-radius-md);
	text-align: center;
}

.rectrac-carousel-price-box--single {
	padding: 1rem;
	background-color: #E8F5E9;
}

.rectrac-carousel-price-label {
	font-size: 0.6875rem;
	font-weight: var(--rectrac-font-weight-medium);
	color: var(--rectrac-gray-500);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 0.25rem;
}

.rectrac-carousel-price-box--single .rectrac-carousel-price-label {
	color: #2E7D32;
}

.rectrac-carousel-price-amount {
	font-size: 1.125rem;
	font-weight: var(--rectrac-font-weight-bold);
	color: var(--rectrac-gray-900);
}

.rectrac-carousel-price-box--single .rectrac-carousel-price-amount {
	font-size: 1.25rem;
	color: #1B5E20;
}

/* Free pricing box - Carousel */
.rectrac-carousel-price-box--free {
	padding: 1rem;
	background-color: #E8F5E9;
}

.rectrac-carousel-price-box--free .rectrac-carousel-price-label {
	color: #2E7D32;
}

.rectrac-carousel-price-box--free .rectrac-carousel-price-amount {
	font-size: 1.25rem;
	color: #1B5E20;
}

/* Card footer */
.rectrac-carousel-card__footer {
	padding: var(--rectrac-space-5);
	padding-top: 0;
}

.rectrac-carousel-register-btn,
.rectrac-carousel-card__footer .rectrac-btn--disabled {
	width: 100%;
}

/* ============================================
   Swiper WebComponent Styling using ::part()
   ============================================ */

/* WebComponent navigation buttons using ::part() */
swiper-container.rectrac-programs-carousel::part(button-prev),
swiper-container.rectrac-programs-carousel::part(button-next) {
	color: var(--rectrac-primary);
	background-color: rgba(255, 255, 255, 0.95);
	border-radius: 50%;
	width: 44px;
	height: 44px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	transition: all 0.2s ease-in-out;
	top: calc(50% - 60px); /* Adjust for pagination space */
}

swiper-container.rectrac-programs-carousel::part(button-prev) {
	left: -50px; /* Position outside the container (in wrapper padding) */
}

swiper-container.rectrac-programs-carousel::part(button-next) {
	right: -50px; /* Position outside the container (in wrapper padding) */
}

swiper-container.rectrac-programs-carousel::part(button-prev):hover,
swiper-container.rectrac-programs-carousel::part(button-next):hover {
	background-color: var(--rectrac-primary);
	color: var(--rectrac-white);
	box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

/* WebComponent pagination using ::part() */
swiper-container.rectrac-programs-carousel::part(pagination) {
	bottom: 10px;
	position: absolute;
	left: 0;
	right: 0;
	text-align: center;
}

swiper-container.rectrac-programs-carousel::part(bullet) {
	width: 10px;
	height: 10px;
	background-color: var(--rectrac-gray-300);
	opacity: 1;
	margin: 0 4px;
	transition: all 0.2s ease-in-out;
	border-radius: 50%;
}

swiper-container.rectrac-programs-carousel::part(bullet-active) {
	background-color: var(--rectrac-primary);
	width: 24px;
	border-radius: 9999px;
}

/* Fallback for standard Swiper (React Swiper) - used in editor */
.rectrac-programs-carousel .swiper-button-prev,
.rectrac-programs-carousel .swiper-button-next {
	color: var(--rectrac-primary);
	background-color: rgba(255, 255, 255, 0.95);
	border-radius: 50%;
	width: 44px;
	height: 44px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	transition: all 0.2s ease-in-out;
	z-index: 10;
	top: calc(50% - 30px); /* Adjust for pagination space */
}

.rectrac-programs-carousel .swiper-button-prev {
	left: -50px;
}

.rectrac-programs-carousel .swiper-button-next {
	right: -50px;
}

.rectrac-programs-carousel .swiper-button-prev:after,
.rectrac-programs-carousel .swiper-button-next:after {
	font-size: 18px;
	font-weight: 600;
}

.rectrac-programs-carousel .swiper-button-prev:hover,
.rectrac-programs-carousel .swiper-button-next:hover {
	background-color: var(--rectrac-primary);
	color: var(--rectrac-white);
	box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.rectrac-programs-carousel .swiper-button-disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

/* Standard Swiper pagination styling - used in editor */
.rectrac-programs-carousel .swiper-pagination {
	bottom: 10px !important;
	position: absolute;
	left: 0;
	right: 0;
	text-align: center;
}

.rectrac-programs-carousel .swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	background-color: var(--rectrac-gray-300);
	opacity: 1;
	margin: 0 4px;
	transition: all 0.2s ease-in-out;
}

.rectrac-programs-carousel .swiper-pagination-bullet-active {
	background-color: var(--rectrac-primary);
	width: 24px;
	border-radius: 9999px;
}

/* Responsive adjustments */
@media (max-width: 640px) {
	.rectrac-programs-carousel-wrapper {
		padding: var(--rectrac-space-2) var(--rectrac-space-4);
		padding-bottom: 60px; /* Space for pagination */
	}

	.rectrac-programs-carousel {
		padding-bottom: 0; /* No internal padding needed, external pagination handles it */
	}

	.rectrac-carousel-card__content {
		padding: var(--rectrac-space-4);
		gap: var(--rectrac-space-3);
	}

	.rectrac-carousel-card__title {
		font-size: var(--rectrac-font-size-base);
	}

	.rectrac-carousel-card__footer {
		padding: var(--rectrac-space-4);
		padding-top: 0;
	}

	/* Hide navigation on mobile, use swipe */
	.rectrac-carousel-nav {
		display: none !important;
	}

	swiper-container.rectrac-programs-carousel::part(button-prev),
	swiper-container.rectrac-programs-carousel::part(button-next) {
		display: none !important;
	}
}

/* Tablet adjustments */
@media (min-width: 641px) and (max-width: 1023px) {
	.rectrac-programs-carousel-wrapper {
		padding: var(--rectrac-space-4) 55px;
		padding-bottom: 60px;
	}

	.rectrac-programs-carousel {
		padding-bottom: 0; /* External pagination handles spacing */
	}

	.rectrac-carousel-card__content {
		padding: var(--rectrac-space-4);
	}

	.rectrac-carousel-nav--prev {
		left: 6px;
	}

	.rectrac-carousel-nav--next {
		right: 6px;
	}
}

/* Desktop - ensure arrows are visible */
@media (min-width: 1024px) {
	.rectrac-programs-carousel-wrapper {
		padding: var(--rectrac-space-4) 65px;
		padding-bottom: 70px;
	}

	.rectrac-programs-carousel {
		padding-bottom: 0; /* External pagination handles spacing */
	}
}

/* Print styles for carousel */
@media print {
	.rectrac-programs-carousel-wrapper {
		display: block;
	}

	.rectrac-programs-carousel {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 1rem;
	}

	.rectrac-carousel-slide {
		break-inside: avoid;
	}

	.rectrac-programs-carousel::part(button-prev),
	.rectrac-programs-carousel::part(button-next),
	.rectrac-programs-carousel::part(pagination) {
		display: none;
	}
}

/* ============================================
   NEW PROGRAM ITEM STRUCTURE
   ============================================ */

/* Main Program Item Card */
.rectrac-program-item {
	display: flex;
	flex-direction: column;
	background-color: var(--rectrac-white);
	border: 1px solid var(--rectrac-gray-200);
	border-radius: var(--rectrac-radius-lg);
	overflow: hidden;
	transition: var(--rectrac-transition);
	box-shadow: var(--rectrac-shadow-sm);
}

.rectrac-program-item:hover {
	box-shadow: var(--rectrac-shadow-lg);
	transform: translateY(-4px);
	border-color: var(--rectrac-primary);
}

.rectrac-program-item:focus-within {
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
	outline: none;
}

/* Top Content Section */
.rectrac-program-top-content {
	padding: var(--rectrac-space-5);
	padding-bottom: var(--rectrac-space-3);
}

/* Program Header with Badge and Pill */
.rectrac-program-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rectrac-space-3);
	margin-bottom: var(--rectrac-space-3);
}

/* Search Result Badge ("Program") */
.search-result-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.625rem;
	background-color: var(--rectrac-primary);
	color: var(--rectrac-white);
	font-size: 0.6875rem;
	font-weight: var(--rectrac-font-weight-semibold);
	border-radius: var(--rectrac-radius-full);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* Activity Code Pill */
.rectrac-activity-pill {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.625rem;
	background-color: var(--rectrac-gray-100);
	color: var(--rectrac-gray-700);
	font-size: 0.75rem;
	font-weight: var(--rectrac-font-weight-semibold);
	border-radius: var(--rectrac-radius-full);
	font-family: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
}

/* Program Title */
.rectrac-program-title {
	margin: 0;
	font-size: var(--rectrac-font-size-lg);
	font-weight: var(--rectrac-font-weight-bold);
	line-height: var(--rectrac-line-height-tight);
	color: var(--rectrac-gray-900);
}

/* Bottom Content Section */
.rectrac-program-bottom-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--rectrac-space-4);
	padding: 0 var(--rectrac-space-5) var(--rectrac-space-5);
}

/* Program Meta Section */
.rectrac-program-meta {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.rectrac-program-meta--inline {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
}

/* Meta Items (Location, Dates, Times, Days) */
.rectrac-location,
.rectrac-dates,
.rectrac-times,
.rectrac-days {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-size: var(--rectrac-font-size-sm);
	color: var(--rectrac-gray-600);
	line-height: 1.4;
}

.rectrac-location .dashicons,
.rectrac-dates .dashicons,
.rectrac-times .dashicons,
.rectrac-days .dashicons {
	width: 16px;
	height: 16px;
	font-size: 16px;
	color: var(--rectrac-gray-400);
	flex-shrink: 0;
}

/* Screen Reader Text */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* Enrollment Section */
.rectrac-enrollment-section {
	background-color: var(--rectrac-gray-50);
	border-radius: var(--rectrac-radius-md);
	padding: 0.875rem;
}

.rectrac-enrollment-section--compact {
	padding: 0.625rem;
}

/* Enrollment Status Badge */
.rectrac-enrollment-status-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.625rem;
	font-size: var(--rectrac-font-size-sm);
	font-weight: var(--rectrac-font-weight-semibold);
	border-radius: var(--rectrac-radius-full);
	margin-bottom: 0.5rem;
}

.rectrac-enrollment-open {
	background-color: #d1fae5;
	color: #065f46;
}

.rectrac-enrollment-waitlist {
	background-color: #fef3c7;
	color: #92400e;
}

.rectrac-enrollment-full {
	background-color: #fee2e2;
	color: #991b1b;
}

/* Enrollment Meter */
.rectrac-enrollment-meter {
	width: 100%;
	height: 8px;
	border-radius: var(--rectrac-radius-full);
	overflow: hidden;
	margin-bottom: 0.5rem;
}

.rectrac-enrollment-meter--mini {
	height: 4px;
}

.rectrac-meter-background {
	width: 100%;
	height: 100%;
	background-color: var(--rectrac-gray-200);
	border-radius: var(--rectrac-radius-full);
	overflow: hidden;
}

.rectrac-meter-fill {
	height: 100%;
	border-radius: var(--rectrac-radius-full);
	transition: width 0.3s ease-in-out;
}

.rectrac-meter-open {
	background-color: var(--rectrac-status-open);
}

.rectrac-meter-waitlist {
	background-color: var(--rectrac-status-waitlist);
}

.rectrac-meter-full {
	background-color: var(--rectrac-status-full);
}

/* Enrollment Numbers */
.rectrac-enrollment-numbers {
	font-size: var(--rectrac-font-size-xs);
	color: var(--rectrac-gray-500);
}

/* Pricing Section */
.rectrac-pricing-section {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.rectrac-pricing-section--compact {
	gap: 0.375rem;
}

/* Price Row */
.rectrac-price-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.5rem 0.75rem;
	background-color: var(--rectrac-gray-100);
	border-radius: var(--rectrac-radius-md);
}

.rectrac-price-row--free {
	background-color: #E8F5E9;
}

.rectrac-price-row--free .rectrac-price-label {
	color: #2E7D32;
}

.rectrac-price-row--free .rectrac-price-amount {
	color: #1B5E20;
}

.rectrac-price-label {
	font-size: var(--rectrac-font-size-xs);
	font-weight: var(--rectrac-font-weight-medium);
	color: var(--rectrac-gray-500);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.rectrac-price-amount {
	font-size: var(--rectrac-font-size-base);
	font-weight: var(--rectrac-font-weight-bold);
	color: var(--rectrac-gray-900);
}

/* Program Action Button */
.rectrac-program-action {
	margin-top: auto;
}

.rectrac-program-action .rectrac-btn {
	width: 100%;
}

.rectrac-program-action .dashicons {
	margin-left: 0.25rem;
}

/* ============================================
   LIST LAYOUT - NEW STRUCTURE
   ============================================ */

.rectrac-program-item--list {
	border-radius: var(--rectrac-radius-lg);
}

.rectrac-program-item--list:hover {
	transform: none;
}

.rectrac-list-row {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1rem 1.25rem;
}

@media (min-width: 1024px) {
	.rectrac-list-row {
		flex-direction: row;
		align-items: center;
		gap: 1.5rem;
	}
}

.rectrac-list-info {
	flex: 1;
	min-width: 0;
}

.rectrac-list-middle {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

@media (min-width: 1024px) {
	.rectrac-list-middle {
		flex-shrink: 0;
		gap: 1.5rem;
	}
}

.rectrac-list-action {
	flex-shrink: 0;
}

@media (min-width: 1024px) {
	.rectrac-list-action .rectrac-btn {
		min-width: 140px;
	}
}

/* ============================================
   DASHICONS BUTTON STYLES
   ============================================ */

.rectrac-btn .dashicons {
	width: 16px;
	height: 16px;
	font-size: 16px;
	line-height: 1;
}