/* ==========================================================
   Monkey Puzzle Activities — Frontend Styles
   All selectors scoped under .mp-* to avoid theme conflicts.
   Per-day accent colours injected inline by PHP.
   ========================================================== */

.mp-activities-wrap {
	--mp-teal-soft: #ddf1f0;
	--mp-cream: #f8f5f2;
	--mp-ink: #2a2a2a;
	--mp-ink-soft: #5a5a5a;
	--mp-white: #ffffff;
	--mp-line: rgba(42, 42, 42, 0.08);
	--mp-radius: 25px;
	--mp-radius-lg: 32px;
	--mp-shadow: 0 20px 50px -20px rgba(42, 42, 42, 0.18);
	--mp-shadow-soft: 0 10px 30px -15px rgba(42, 42, 42, 0.12);

	font-weight: 400;
	color: var(--mp-ink);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.mp-activities-wrap *,
.mp-activities-wrap *::before,
.mp-activities-wrap *::after {
	box-sizing: border-box;
}

.mp-activities-wrap img { max-width: 100%; display: block; }
.mp-activities-wrap button { font: inherit; color: inherit; cursor: pointer; border: none; padding: 0; }

/* ============ DAY PICKER ============ */
.mp-day-picker-wrap {
	background: var(--mp-white) !important;
	padding: 28px 24px 22px !important;
	margin: 0 !important;
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 1px solid var(--mp-line) !important;
}
.mp-day-picker {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 14px !important;
	justify-content: center;
	max-width: 1100px;
	margin: 0 auto !important;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding: 4px 4px 10px !important;
	scrollbar-width: none;
	list-style: none !important;
}
.mp-day-picker::-webkit-scrollbar { display: none; }

/* Native select dropdown — shown on mobile only */
.mp-day-select {
	display: none;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 14px 42px 14px 18px !important;
	background-color: var(--mp-teal-soft) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%232a2a2a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 16px center !important;
	background-size: 12px 8px !important;
	border: none !important;
	border-radius: 14px !important;
	font-family: inherit !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	line-height: 1.3 !important;
	letter-spacing: normal !important;
	color: var(--mp-ink) !important;
	text-transform: none !important;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	box-shadow: none !important;
	text-decoration: none !important;
}
.mp-day-select:focus { outline: 2px solid var(--mp-ink); outline-offset: 2px; }

.mp-day-btn {
	display: block;
	flex: 1;
	min-width: 170px;
	min-height: 76px !important;
	background-color: var(--mp-teal-soft) !important;
	border: 2px solid transparent !important;
	border-radius: 18px !important;
	padding: 16px 18px !important;
	margin: 0 !important;
	text-align: left;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	line-height: 1.3 !important;
	box-shadow: none;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
	transition: transform 0.3s cubic-bezier(.34, 1.56, .64, 1), background-color 0.3s, box-shadow 0.3s;
	scroll-snap-align: center;
	position: relative;
	overflow: hidden;
}
.mp-day-btn:hover {
	transform: translateY(-3px);
}
.mp-day-btn .mp-day-short {
	font-weight: 600 !important;
	font-size: 12px !important;
	text-transform: uppercase !important;
	letter-spacing: 1.8px !important;
	color: var(--mp-ink-soft) !important;
	text-decoration: none !important;
	display: block !important;
	margin: 0 0 6px !important;
	padding: 0 !important;
	line-height: 1.2 !important;
	transition: color 0.3s;
}
.mp-day-btn .mp-day-activity {
	font-weight: 700 !important;
	font-size: 18px !important;
	line-height: 1.25 !important;
	color: var(--mp-ink) !important;
	text-decoration: none !important;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	transition: color 0.3s;
}
/* Per-theme active background, exposed as a variable the active rule consumes */
.mp-day-btn.is-cyan { --mp-active-bg: #3d97a5; }
.mp-day-btn.is-teal { --mp-active-bg: #4797a8; }
.mp-day-btn.is-purple { --mp-active-bg: #8246af; }
.mp-day-btn.is-green { --mp-active-bg: #86b96b; }
.mp-day-btn.is-deep-teal { --mp-active-bg: #2d6b7a; }
.mp-day-btn.is-gold { --mp-active-bg: #b8954f; }

/* Active day label (driven by the checked radio) */
.mp-day-radio:nth-of-type(1):checked ~ .mp-day-picker-wrap .mp-day-picker .mp-day-btn:nth-of-type(1),
.mp-day-radio:nth-of-type(2):checked ~ .mp-day-picker-wrap .mp-day-picker .mp-day-btn:nth-of-type(2),
.mp-day-radio:nth-of-type(3):checked ~ .mp-day-picker-wrap .mp-day-picker .mp-day-btn:nth-of-type(3),
.mp-day-radio:nth-of-type(4):checked ~ .mp-day-picker-wrap .mp-day-picker .mp-day-btn:nth-of-type(4),
.mp-day-radio:nth-of-type(5):checked ~ .mp-day-picker-wrap .mp-day-picker .mp-day-btn:nth-of-type(5),
.mp-day-radio:nth-of-type(6):checked ~ .mp-day-picker-wrap .mp-day-picker .mp-day-btn:nth-of-type(6),
.mp-day-radio:nth-of-type(7):checked ~ .mp-day-picker-wrap .mp-day-picker .mp-day-btn:nth-of-type(7) {
	background-color: var(--mp-active-bg, #4797a8) !important;
}
.mp-day-radio:nth-of-type(1):checked ~ .mp-day-picker-wrap .mp-day-picker .mp-day-btn:nth-of-type(1) .mp-day-short,
.mp-day-radio:nth-of-type(2):checked ~ .mp-day-picker-wrap .mp-day-picker .mp-day-btn:nth-of-type(2) .mp-day-short,
.mp-day-radio:nth-of-type(3):checked ~ .mp-day-picker-wrap .mp-day-picker .mp-day-btn:nth-of-type(3) .mp-day-short,
.mp-day-radio:nth-of-type(4):checked ~ .mp-day-picker-wrap .mp-day-picker .mp-day-btn:nth-of-type(4) .mp-day-short,
.mp-day-radio:nth-of-type(5):checked ~ .mp-day-picker-wrap .mp-day-picker .mp-day-btn:nth-of-type(5) .mp-day-short,
.mp-day-radio:nth-of-type(6):checked ~ .mp-day-picker-wrap .mp-day-picker .mp-day-btn:nth-of-type(6) .mp-day-short,
.mp-day-radio:nth-of-type(7):checked ~ .mp-day-picker-wrap .mp-day-picker .mp-day-btn:nth-of-type(7) .mp-day-short {
	color: var(--mp-white) !important;
	opacity: 0.85;
}
.mp-day-radio:nth-of-type(1):checked ~ .mp-day-picker-wrap .mp-day-picker .mp-day-btn:nth-of-type(1) .mp-day-activity,
.mp-day-radio:nth-of-type(2):checked ~ .mp-day-picker-wrap .mp-day-picker .mp-day-btn:nth-of-type(2) .mp-day-activity,
.mp-day-radio:nth-of-type(3):checked ~ .mp-day-picker-wrap .mp-day-picker .mp-day-btn:nth-of-type(3) .mp-day-activity,
.mp-day-radio:nth-of-type(4):checked ~ .mp-day-picker-wrap .mp-day-picker .mp-day-btn:nth-of-type(4) .mp-day-activity,
.mp-day-radio:nth-of-type(5):checked ~ .mp-day-picker-wrap .mp-day-picker .mp-day-btn:nth-of-type(5) .mp-day-activity,
.mp-day-radio:nth-of-type(6):checked ~ .mp-day-picker-wrap .mp-day-picker .mp-day-btn:nth-of-type(6) .mp-day-activity,
.mp-day-radio:nth-of-type(7):checked ~ .mp-day-picker-wrap .mp-day-picker .mp-day-btn:nth-of-type(7) .mp-day-activity {
	color: var(--mp-white) !important;
}

/* ============ PANELS ============ */
.mp-panels {
	max-width: 1180px;
	margin: 0 auto !important;
	padding: 50px 24px 60px !important;
	position: relative;
	min-height: 600px;
}
/* CSS-only tab state */
.mp-day-radio {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	border: 0 !important;
	opacity: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	pointer-events: none !important;
}

.mp-panel {
	display: none;
}
.mp-day-radio:nth-of-type(1):checked ~ .mp-panels .mp-panel:nth-of-type(1),
.mp-day-radio:nth-of-type(2):checked ~ .mp-panels .mp-panel:nth-of-type(2),
.mp-day-radio:nth-of-type(3):checked ~ .mp-panels .mp-panel:nth-of-type(3),
.mp-day-radio:nth-of-type(4):checked ~ .mp-panels .mp-panel:nth-of-type(4),
.mp-day-radio:nth-of-type(5):checked ~ .mp-panels .mp-panel:nth-of-type(5),
.mp-day-radio:nth-of-type(6):checked ~ .mp-panels .mp-panel:nth-of-type(6),
.mp-day-radio:nth-of-type(7):checked ~ .mp-panels .mp-panel:nth-of-type(7) {
	display: block;
	animation: mpSlideIn 0.45s cubic-bezier(.25, .8, .25, 1);
}

@keyframes mpSlideIn {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: translateY(0); }
}

.mp-panel-header {
	text-align: center !important;
	margin: 0 0 56px !important;
	padding: 0 !important;
}
.mp-panel-tag {
	display: inline-block !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	text-transform: uppercase !important;
	letter-spacing: 1.6px !important;
	padding: 11px 24px !important;
	border-radius: 999px !important;
	color: var(--mp-white) !important;
	margin: 0 0 22px !important;
	text-decoration: none !important;
	line-height: 1 !important;
}
.mp-panels h2.mp-panel-title {
	font-weight: 700 !important;
	font-size: clamp(36px, 5vw, 56px) !important;
	line-height: 1.05 !important;
	letter-spacing: -0.5px !important;
	margin: 0 0 18px !important;
	padding: 0 !important;
	color: var(--mp-ink) !important;
}
.mp-panel-title .mp-underline {
	position: relative;
	display: inline-block;
}
.mp-panel-title .mp-underline::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 4px;
	height: 14px;
	border-radius: 6px;
	opacity: 0.4;
	z-index: -1;
}

.mp-panel-tagline {
	font-size: 18px !important;
	line-height: 1.5 !important;
	color: var(--mp-ink-soft) !important;
	max-width: 580px;
	margin: 0 auto !important;
	padding: 0 !important;
}

.mp-panel-grid {
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	gap: 64px;
	align-items: center;
	margin: 0 0 40px !important;
}

.mp-panel-img-wrap {
	position: relative;
	aspect-ratio: 1 / 1.08;
	border-radius: var(--mp-radius);
	overflow: hidden;
	box-shadow: var(--mp-shadow);
}
.mp-panel-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s cubic-bezier(.25, .8, .25, 1) !important;
}
.mp-panel-img-wrap:hover .mp-panel-img {
	transform: scale(1.05);
}
.mp-panel-img-wrap::after {
	content: '';
	position: absolute;
	width: 55%;
	height: 55%;
	border-radius: 50%;
	bottom: -20%;
	right: -15%;
	z-index: -1;
	filter: blur(50px);
	opacity: 0.6;
}

.mp-panel-text p {
	font-size: 17px !important;
	line-height: 1.65 !important;
	color: var(--mp-ink-soft) !important;
	margin: 0 0 18px !important;
	padding: 0 !important;
}
.mp-panel-text p:last-child { margin-bottom: 0 !important; }
.mp-panel-text strong { color: var(--mp-ink) !important; font-weight: 600 !important; }

.mp-age-rotation {
	margin: 24px 0 0 !important;
	padding: 18px 22px !important;
	background: var(--mp-teal-soft) !important;
	border-radius: 16px !important;
	font-size: 14.5px !important;
	line-height: 1.5 !important;
	color: var(--mp-ink) !important;
}

/* ============ BENEFITS ============ */
.mp-benefits-wrap {
	margin: 30px 0 0 !important;
	padding: 0 !important;
	position: relative;
}
.mp-benefits-band {
	background-color: #ddf1f0 !important;
	border-radius: 25px !important;
	padding: 40px 28px !important;
	margin: 0 !important;
}
.mp-benefits-band-inner {
	max-width: 1100px;
	margin: 0 auto !important;
	padding: 0 !important;
}

.mp-benefits-section { text-align: center !important; margin: 0 !important; }
.mp-benefits-section h2.mp-benefits-label,
.mp-benefits-section .mp-benefits-label {
	font-size: 12px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 2.5px !important;
	color: var(--mp-ink-soft) !important;
	margin: 0 0 28px !important;
	padding: 0 !important;
	line-height: 1.4 !important;
	text-decoration: none !important;
	text-align: center !important;
	background: none !important;
}
.mp-benefits {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	max-width: 960px;
	margin: 0 auto !important;
	padding: 0 !important;
	list-style: none !important;
}
.mp-benefit {
	background: var(--mp-white) !important;
	border-radius: 20px !important;
	padding: 30px 18px 26px !important;
	margin: 0 !important;
	text-align: center !important;
	box-shadow: 0 8px 28px -12px rgba(42, 42, 42, 0.15), 0 2px 4px rgba(42, 42, 42, 0.04) !important;
	transition: transform 0.4s cubic-bezier(.34, 1.56, .64, 1), box-shadow 0.3s !important;
	position: relative;
	overflow: hidden;
}
.mp-benefit:hover {
	transform: translateY(-6px) !important;
	box-shadow: 0 20px 40px -14px rgba(42, 42, 42, 0.2), 0 4px 8px rgba(42, 42, 42, 0.06) !important;
}
.mp-benefit-icon-wrap {
	width: 64px !important;
	height: 64px !important;
	margin: 0 auto 18px !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background-color: rgba(89, 190, 202, 0.18) !important;
	transition: transform 0.4s cubic-bezier(.34, 1.56, .64, 1) !important;
}
.mp-benefit:hover .mp-benefit-icon-wrap {
	transform: scale(1.1) rotate(-6deg) !important;
}
.mp-benefit-icon {
	width: 30px !important;
	height: 30px !important;
	margin: 0 !important;
	display: block !important;
	color: #3d97a5 !important;
}
.mp-benefit-label {
	font-weight: 700 !important;
	font-size: 16px !important;
	line-height: 1.3 !important;
	color: var(--mp-ink) !important;
	margin: 0 !important;
}

/* ============ COLOUR THEMES ============
   Applied via .is-{theme} class on day buttons and panels.
   ====================================== */

/* CYAN */
.mp-panel.is-cyan .mp-panel-tag { background-color: #3d97a5 !important; }
.mp-panel.is-cyan .mp-panel-title .mp-underline::after { background-color: #59beca; }
.mp-panel.is-cyan .mp-panel-img-wrap::after { background-color: #59beca; }

/* TEAL */
.mp-panel.is-teal .mp-panel-tag { background-color: #4797a8 !important; }
.mp-panel.is-teal .mp-panel-title .mp-underline::after { background-color: #4797a8; }
.mp-panel.is-teal .mp-panel-img-wrap::after { background-color: #4797a8; }

/* PURPLE */
.mp-panel.is-purple .mp-panel-tag { background-color: #8246af !important; }
.mp-panel.is-purple .mp-panel-title .mp-underline::after { background-color: #8246af; }
.mp-panel.is-purple .mp-panel-img-wrap::after { background-color: #8246af; }

/* GREEN */
.mp-panel.is-green .mp-panel-tag { background-color: #86b96b !important; }
.mp-panel.is-green .mp-panel-title .mp-underline::after { background-color: #addb92; }
.mp-panel.is-green .mp-panel-img-wrap::after { background-color: #addb92; }

/* DEEP TEAL */
.mp-panel.is-deep-teal .mp-panel-tag { background-color: #2d6b7a !important; }
.mp-panel.is-deep-teal .mp-panel-title .mp-underline::after { background-color: #4797a8; }
.mp-panel.is-deep-teal .mp-panel-img-wrap::after { background-color: #4797a8; }

/* GOLD */
.mp-panel.is-gold .mp-panel-tag { background-color: #b8954f !important; }
.mp-panel.is-gold .mp-panel-title .mp-underline::after { background-color: #d2b370; }
.mp-panel.is-gold .mp-panel-img-wrap::after { background-color: #d2b370; }

/* ============ CTA ============ */
.mp-cta-section {
	margin: 40px 24px 80px;
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
	background: #8246af;
	border-radius: var(--mp-radius-lg);
	padding: 64px 32px;
	text-align: center;
	color: var(--mp-white);
	position: relative;
	overflow: hidden;
}
.mp-cta-section::before,
.mp-cta-section::after {
	content: '';
	position: absolute;
	border-radius: 50%;
	filter: blur(60px);
	opacity: 0.4;
}
.mp-cta-section::before {
	width: 300px;
	height: 300px;
	background: #4797a8;
	top: -100px;
	left: -80px;
}
.mp-cta-section::after {
	width: 260px;
	height: 260px;
	background: #59beca;
	bottom: -80px;
	right: -50px;
}
.mp-cta-section > * { position: relative; z-index: 2; }
.mp-cta-section h2 {
	font-weight: 700;
	font-size: clamp(28px, 4vw, 42px);
	line-height: 1.15;
	margin: 0 0 14px;
	letter-spacing: -0.3px;
	color: var(--mp-white);
}
.mp-cta-section p {
	font-size: 17px;
	opacity: 0.92;
	max-width: 520px;
	margin: 0 auto 28px;
}
.mp-cta-btn {
	display: inline-block;
	background: var(--mp-white);
	color: #8246af;
	font-weight: 600;
	font-size: 16px;
	padding: 18px 38px;
	border-radius: 999px;
	text-decoration: none;
	transition: transform 0.25s cubic-bezier(.34, 1.56, .64, 1), background 0.25s;
}
.mp-cta-btn:hover {
	transform: translateY(-3px) scale(1.02);
	background: var(--mp-cream);
}

/* ============ MOBILE ============ */
@media (max-width: 820px) {
	.mp-day-picker-wrap { padding: 14px 14px 12px; }
	/* No-JS fallback: keep the pill row (CSS-only tabs work without the dropdown) */
	.mp-day-picker {
		display: flex !important;
		justify-content: flex-start;
		gap: 10px !important;
	}
	.mp-day-btn { flex: 0 0 auto; min-width: 150px; }
	.mp-day-select { display: none; }
	/* When JS is available, swap the pill row for the dropdown */
	.mp-js .mp-day-picker { display: none !important; }
	.mp-js .mp-day-select { display: block; }

	.mp-panels { padding: 32px 14px; }
	.mp-panel-header { margin-bottom: 36px; }
	.mp-panel-grid {
		grid-template-columns: 1fr;
		gap: 32px;
		margin-bottom: 48px;
	}
	.mp-panel-img-wrap { aspect-ratio: 4 / 3; }
	.mp-benefits-wrap { margin: 24px 0 0 !important; }
	.mp-benefits-band { padding: 28px 14px !important; border-radius: 20px !important; }
	.mp-benefits {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
	.mp-benefit { padding: 20px 10px 16px; }
	.mp-benefit-label { font-size: 14px; }
	.mp-cta-section { padding: 48px 24px; margin: 20px 14px 60px; }
}
.mp-swipe-hint { display: none; }