/* Art Play Booking — Monthly Themes block */

.app-themes-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--app-theme-card-gap, 20px);
	margin-top: var(--app-theme-grid-margin, 20px);
	margin-bottom: var(--app-theme-grid-margin, 20px);
	margin-left: auto;
	margin-right: auto;
	max-width: var(--app-theme-grid-max-width, none);
}

.app-themes-card {
	flex: 1 1 0;
	min-width: 240px;
	max-width: var(--app-theme-card-max-width, none);
	border: var(--app-theme-card-border-width, 1px) solid var(--app-theme-card-border-color, #dddddd);
	border-radius: var(--app-theme-card-radius, 10px);
	padding: var(--app-theme-card-padding, 22px) calc(var(--app-theme-card-padding, 22px) + 2px);
	background: #fff;
	box-sizing: border-box;
}

.app-themes-card.app-themes-current {
	border: 2px solid var(--app-color-theme-accent, #2271b1);
	box-shadow: 0 0 0 1px var(--app-color-theme-accent, #2271b1);
}

.app-themes-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 6px;
}

.app-themes-month {
	font-size: 1.3em;
	font-weight: 700;
	margin: 0;
}

.app-themes-badge {
	display: inline-block;
	font-size: var(--app-theme-highlight-size, 12px);
	font-weight: 700;
	color: #fff;
	background: var(--app-color-theme-accent, #2271b1);
	padding: 3px 10px;
	border-radius: 999px;
	white-space: nowrap;
}

.app-themes-name {
	font-weight: 700;
	margin: 6px 0 14px;
}

.app-themes-weeks {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--app-theme-week-size, 15px);
}

.app-themes-weeks li {
	margin-bottom: 6px;
}

.app-themes-week-label {
	font-weight: 700;
}

.app-themes-weeks li.app-themes-week-current {
	background: var(--app-color-theme-accent-soft, rgba(34, 113, 177, 0.12));
	padding: 4px 8px;
	margin-left: -8px;
	border-radius: 6px;
}

.app-themes-week-tag {
	display: inline-block;
	font-size: var(--app-theme-highlight-size, 12px);
	font-weight: 700;
	color: var(--app-color-theme-accent, #2271b1);
	margin-left: 8px;
}

.app-themes-admin-note {
	padding: 10px 14px;
	background: #fff8e5;
	border: 1px dashed #d6a600;
	border-radius: 6px;
	font-size: 0.9em;
	color: #6b5300;
	margin: 12px 0;
}

/* Mobile: stack the cards instead of wrapping side by side. */
@media (max-width: 680px) {
	.app-themes-grid {
		flex-direction: column;
		align-items: stretch;
	}

	.app-themes-card {
		flex: 1 1 auto;
		max-width: 100%;
		width: 100%;
	}
}