/*
 * Smart Meal Planner
 * PART 2 — Production UI
 * Scoped to .smp-app
 */


/* =========================================================
   1. APP FOUNDATION
========================================================= */

.smp-app {
	--smp-bg: #07111f;
	--smp-bg-soft: #0b1728;
	--smp-surface: rgba(15, 29, 48, 0.72);
	--smp-surface-strong: rgba(18, 34, 56, 0.92);
	--smp-glass: rgba(255, 255, 255, 0.055);
	--smp-glass-hover: rgba(255, 255, 255, 0.09);

	--smp-border: rgba(255, 255, 255, 0.10);
	--smp-border-strong: rgba(255, 255, 255, 0.17);

	--smp-text: #f5f8ff;
	--smp-text-soft: #aebbd0;
	--smp-text-muted: #7f8da3;

	--smp-primary: #6d7cff;
	--smp-primary-hover: #8290ff;
	--smp-primary-soft: rgba(109, 124, 255, 0.14);

	--smp-success: #4ade80;
	--smp-warning: #fbbf24;

	--smp-radius-sm: 10px;
	--smp-radius-md: 16px;
	--smp-radius-lg: 22px;
	--smp-radius-xl: 28px;

	--smp-shadow:
		0 24px 70px rgba(0, 0, 0, 0.30);

	--smp-shadow-soft:
		0 12px 35px rgba(0, 0, 0, 0.20);

	position: relative;
	width: 100%;
	padding: 72px 20px 80px;
	background:
		radial-gradient(
			circle at 15% 5%,
			rgba(74, 92, 255, 0.15),
			transparent 32%
		),
		radial-gradient(
			circle at 88% 12%,
			rgba(52, 211, 153, 0.08),
			transparent 28%
		),
		linear-gradient(
			180deg,
			#07111f 0%,
			#091524 55%,
			#07111f 100%
		);

	color: var(--smp-text);
	font-family:
		Inter,
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Roboto,
		Helvetica,
		Arial,
		sans-serif;

	line-height: 1.6;
	overflow: hidden;
	isolation: isolate;
}


/* Decorative glow */

.smp-app::before {
	content: "";
	position: absolute;
	width: 460px;
	height: 460px;
	top: 220px;
	left: -240px;
	border-radius: 50%;
	background: rgba(86, 100, 255, 0.10);
	filter: blur(80px);
	pointer-events: none;
	z-index: -1;
}

.smp-app::after {
	content: "";
	position: absolute;
	width: 420px;
	height: 420px;
	right: -220px;
	top: 620px;
	border-radius: 50%;
	background: rgba(56, 189, 248, 0.07);
	filter: blur(90px);
	pointer-events: none;
	z-index: -1;
}


/* =========================================================
   2. SAFE RESET — ONLY INSIDE TOOL
========================================================= */

.smp-app *,
.smp-app *::before,
.smp-app *::after {
	box-sizing: border-box;
}

.smp-app h1,
.smp-app h2,
.smp-app h3,
.smp-app p {
	margin-top: 0;
}

.smp-app button,
.smp-app input,
.smp-app select {
	font: inherit;
}

.smp-app button {
	margin: 0;
}


/* Native hidden support */

.smp-app [hidden] {
	display: none !important;
}


/* =========================================================
   3. MAIN CONTAINER
========================================================= */

.smp-container {
	width: min(1180px, 100%);
	margin: 0 auto;
}


/* =========================================================
   4. HERO
========================================================= */

.smp-hero {
	max-width: 790px;
	margin: 0 auto 48px;
	text-align: center;
}

.smp-eyebrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 30px;
	margin-bottom: 16px;
	padding: 5px 12px;

	border: 1px solid rgba(129, 140, 248, 0.25);
	border-radius: 999px;

	background: rgba(99, 102, 241, 0.10);

	color: #aeb8ff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.smp-hero__title {
	margin-bottom: 16px;

	color: var(--smp-text);
	font-size: clamp(36px, 5vw, 58px);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.045em;
}

.smp-hero__description {
	max-width: 650px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;

	color: var(--smp-text-soft);
	font-size: 17px;
	line-height: 1.75;
}


/* =========================================================
   5. MAIN PLANNER GLASS PANEL
========================================================= */

.smp-planner {
	position: relative;

	padding: 30px;

	border: 1px solid var(--smp-border);
	border-radius: var(--smp-radius-xl);

	background:
		linear-gradient(
			145deg,
			rgba(255, 255, 255, 0.065),
			rgba(255, 255, 255, 0.025)
		);

	box-shadow: var(--smp-shadow);

	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
}


/* =========================================================
   6. PROGRESS NAVIGATION
========================================================= */

.smp-progress {
	margin-bottom: 34px;
	padding: 16px 18px;

	border: 1px solid var(--smp-border);
	border-radius: var(--smp-radius-md);

	background: rgba(5, 13, 25, 0.38);

	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

.smp-progress__list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;

	margin: 0;
	padding: 0;

	list-style: none;
}

.smp-progress__item {
	position: relative;

	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;

	min-width: 0;
	padding: 10px;

	border-radius: 12px;

	color: var(--smp-text-muted);

	font-size: 13px;
	font-weight: 650;

	transition:
		background-color 0.2s ease,
		color 0.2s ease;
}

.smp-progress__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	flex: 0 0 28px;
	width: 28px;
	height: 28px;

	border: 1px solid var(--smp-border);
	border-radius: 50%;

	background: rgba(255, 255, 255, 0.035);

	color: var(--smp-text-soft);
	font-size: 12px;
	font-weight: 800;
}

.smp-progress__item.is-active {
	background: var(--smp-primary-soft);
	color: var(--smp-text);
}

.smp-progress__item.is-active .smp-progress__number {
	border-color: rgba(129, 140, 248, 0.55);
	background: var(--smp-primary);
	color: #fff;
}


/* =========================================================
   7. STEP PANEL
========================================================= */

.smp-step {
	padding: 18px 6px 4px;
}

.smp-step__header {
	max-width: 720px;
	margin-bottom: 30px;
}

.smp-step__count {
	margin-bottom: 8px;

	color: #8996ff;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.smp-step__title {
	margin-bottom: 10px;

	color: var(--smp-text);
	font-size: clamp(26px, 3vw, 34px);
	font-weight: 750;
	line-height: 1.2;
	letter-spacing: -0.025em;
}

.smp-step__description {
	margin-bottom: 0;

	color: var(--smp-text-soft);
	font-size: 15px;
}


/* =========================================================
   8. FIELDSETS
========================================================= */

.smp-fieldset {
	min-width: 0;
	margin: 0 0 34px;
	padding: 0;

	border: 0;
}

.smp-fieldset__legend {
	width: 100%;
	margin-bottom: 14px;
	padding: 0;

	color: var(--smp-text);
	font-size: 14px;
	font-weight: 700;
}


/* =========================================================
   9. CATEGORY CARDS
========================================================= */

.smp-category-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 12px;
}

.smp-choice-card {
	position: relative;

	display: flex;
	flex-direction: column;
	align-items: flex-start;

	min-height: 150px;
	padding: 18px;

	border: 1px solid var(--smp-border);
	border-radius: var(--smp-radius-md);

	background:
		linear-gradient(
			145deg,
			rgba(255, 255, 255, 0.055),
			rgba(255, 255, 255, 0.025)
		);

	cursor: pointer;

	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);

	transition:
		transform 0.2s ease,
		border-color 0.2s ease,
		background-color 0.2s ease,
		box-shadow 0.2s ease;
}

.smp-choice-card:hover {
	transform: translateY(-2px);

	border-color: rgba(129, 140, 248, 0.38);

	background: rgba(255, 255, 255, 0.075);

	box-shadow: var(--smp-shadow-soft);
}

.smp-choice-card:has(input:checked) {
	border-color: rgba(129, 140, 248, 0.70);

	background:
		linear-gradient(
			145deg,
			rgba(99, 102, 241, 0.20),
			rgba(99, 102, 241, 0.07)
		);

	box-shadow:
		0 0 0 1px rgba(129, 140, 248, 0.12),
		0 16px 40px rgba(0, 0, 0, 0.22);
}

.smp-choice-card input {
	position: absolute;

	width: 1px;
	height: 1px;

	opacity: 0;
	pointer-events: none;
}

.smp-choice-card:has(input:focus-visible) {
	outline: 3px solid rgba(129, 140, 248, 0.45);
	outline-offset: 3px;
}

.smp-choice-card__icon {
	display: block;
	margin-bottom: 14px;

	font-size: 27px;
	line-height: 1;
}

.smp-choice-card__title {
	display: block;
	margin-bottom: 6px;

	color: var(--smp-text);
	font-size: 14px;
	font-weight: 750;
	line-height: 1.35;
}

.smp-choice-card__text {
	display: block;

	color: var(--smp-text-muted);
	font-size: 12px;
	line-height: 1.5;
}


/* =========================================================
   10. FORM GRID
========================================================= */

.smp-fields-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.smp-field {
	min-width: 0;
	margin-bottom: 22px;
}

.smp-field--full {
	width: 100%;
}

.smp-label {
	display: block;
	margin-bottom: 8px;

	color: var(--smp-text);
	font-size: 13px;
	font-weight: 700;
}

.smp-label__optional {
	color: var(--smp-text-muted);
	font-size: 12px;
	font-weight: 500;
}


/* =========================================================
   11. INPUTS & SELECTS
========================================================= */

.smp-app .smp-input,
.smp-app .smp-select {
	display: block;

	width: 100%;
	min-height: 50px;
	margin: 0;
	padding: 0 15px;

	border: 1px solid var(--smp-border);
	border-radius: var(--smp-radius-sm);

	outline: none;

	background-color: rgba(4, 12, 23, 0.60);

	color: var(--smp-text);

	font-size: 14px;
	line-height: normal;

	box-shadow: none;

	transition:
		border-color 0.2s ease,
		background-color 0.2s ease,
		box-shadow 0.2s ease;
}

.smp-app .smp-input::placeholder {
	color: #69778d;
	opacity: 1;
}

.smp-app .smp-input:hover,
.smp-app .smp-select:hover {
	border-color: var(--smp-border-strong);
}

.smp-app .smp-input:focus,
.smp-app .smp-select:focus {
	border-color: rgba(129, 140, 248, 0.75);

	background-color: rgba(7, 17, 31, 0.90);

	box-shadow:
		0 0 0 3px rgba(99, 102, 241, 0.14);
}

.smp-app .smp-select {
	cursor: pointer;
}

.smp-app .smp-select option {
	background: #0b1728;
	color: #f5f8ff;
}

.smp-field__help {
	margin-top: 9px;
	margin-bottom: 0;

	color: var(--smp-text-muted);
	font-size: 12px;
	line-height: 1.55;
}


/* =========================================================
   12. BUTTON SYSTEM — GLASSMORPHISM
========================================================= */

.smp-app .smp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;

	min-height: 48px;
	margin: 0;
	padding: 11px 20px;

	border: 1px solid var(--smp-border);
	border-radius: 12px;

	outline: none;

	background: rgba(255, 255, 255, 0.055);

	color: var(--smp-text);

	font-size: 13px;
	font-weight: 750;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;

	cursor: pointer;

	box-shadow: none;

	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);

	transition:
		transform 0.18s ease,
		background-color 0.18s ease,
		border-color 0.18s ease,
		box-shadow 0.18s ease;
}

.smp-app .smp-btn:hover {
	transform: translateY(-1px);

	border-color: var(--smp-border-strong);

	background: var(--smp-glass-hover);
}

.smp-app .smp-btn:active {
	transform: translateY(0);
}

.smp-app .smp-btn:focus-visible {
	outline: 3px solid rgba(129, 140, 248, 0.45);
	outline-offset: 3px;
}


/* Primary */

.smp-app .smp-btn--primary {
	border-color: rgba(139, 149, 255, 0.55);

	background:
		linear-gradient(
			135deg,
			#6978ff,
			#5664e8
		);

	color: #fff;

	box-shadow:
		0 12px 30px rgba(78, 92, 230, 0.25);
}

.smp-app .smp-btn--primary:hover {
	border-color: rgba(170, 177, 255, 0.75);

	background:
		linear-gradient(
			135deg,
			#7886ff,
			#6472ef
		);

	box-shadow:
		0 15px 36px rgba(78, 92, 230, 0.32);
}


/* Secondary */

.smp-app .smp-btn--secondary {
	background: rgba(255, 255, 255, 0.045);
}


/* Action */

.smp-app .smp-btn--action {
	min-height: 42px;
	padding: 9px 14px;

	background: rgba(255, 255, 255, 0.05);

	font-size: 12px;
}


/* Generate */

.smp-app .smp-btn--generate {
	min-width: 210px;
}


/* =========================================================
   13. STEP ACTIONS
========================================================= */

.smp-step__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;

	margin-top: 14px;
	padding-top: 22px;

	border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.smp-step__actions--end {
	justify-content: flex-end;
}


/* =========================================================
   14. RESULT DASHBOARD
========================================================= */

.smp-results {
	position: relative;
	margin-top: 8px;
}

.smp-results__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;

	margin-bottom: 24px;
	padding: 24px;

	border: 1px solid var(--smp-border);
	border-radius: var(--smp-radius-lg);

	background:
		linear-gradient(
			145deg,
			rgba(255, 255, 255, 0.07),
			rgba(255, 255, 255, 0.025)
		);

	box-shadow: var(--smp-shadow-soft);

	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
}

.smp-results__title {
	margin-bottom: 7px;

	color: var(--smp-text);
	font-size: clamp(28px, 4vw, 38px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.03em;
}

.smp-results__description {
	margin-bottom: 0;

	color: var(--smp-text-soft);
	font-size: 14px;
}

.smp-results__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px;
}


/* =========================================================
   15. RESULT SECTIONS
========================================================= */

.smp-overview,
.smp-daily-plan,
.smp-grocery,
.smp-prep-tips,
.smp-disclaimer {
	margin-bottom: 20px;
	padding: 24px;

	border: 1px solid var(--smp-border);
	border-radius: var(--smp-radius-lg);

	background:
		linear-gradient(
			145deg,
			rgba(255, 255, 255, 0.055),
			rgba(255, 255, 255, 0.022)
		);

	box-shadow: var(--smp-shadow-soft);

	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}

.smp-section-title {
	margin-bottom: 8px;

	color: var(--smp-text);
	font-size: 20px;
	font-weight: 750;
	line-height: 1.3;
}

.smp-section-description {
	margin-bottom: 18px;

	color: var(--smp-text-soft);
	font-size: 13px;
}


/* =========================================================
   16. OVERVIEW GRID
========================================================= */

.smp-overview__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}

/*
 * These styles are ready for the overview items
 * JavaScript will create later.
 */

.smp-overview__item {
	padding: 15px;

	border: 1px solid var(--smp-border);
	border-radius: 13px;

	background: rgba(255, 255, 255, 0.035);
}

.smp-overview__label {
	display: block;
	margin-bottom: 5px;

	color: var(--smp-text-muted);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.smp-overview__value {
	display: block;

	color: var(--smp-text);
	font-size: 14px;
	font-weight: 700;
}


/* =========================================================
   17. FUTURE DAILY MEAL CARDS
   Used when JavaScript renders results
========================================================= */

.smp-day {
	margin-top: 16px;
	padding: 20px;

	border: 1px solid var(--smp-border);
	border-radius: var(--smp-radius-md);

	background: rgba(4, 12, 23, 0.38);
}

.smp-day__title {
	margin-bottom: 16px;

	color: var(--smp-text);
	font-size: 18px;
	font-weight: 750;
}

.smp-meals-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.smp-meal-card {
	padding: 18px;

	border: 1px solid var(--smp-border);
	border-radius: 14px;

	background: rgba(255, 255, 255, 0.04);
}

.smp-meal-card__type {
	display: block;
	margin-bottom: 7px;

	color: #9ca7ff;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.smp-meal-card__title {
	margin-bottom: 9px;

	color: var(--smp-text);
	font-size: 16px;
	font-weight: 750;
	line-height: 1.35;
}

.smp-meal-card__text {
	color: var(--smp-text-soft);
	font-size: 13px;
	line-height: 1.6;
}


/* =========================================================
   18. FUTURE GROCERY GRID
========================================================= */

.smp-grocery-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

.smp-grocery-group {
	padding: 17px;

	border: 1px solid var(--smp-border);
	border-radius: 14px;

	background: rgba(255, 255, 255, 0.035);
}

.smp-grocery-group__title {
	margin-bottom: 10px;

	color: var(--smp-text);
	font-size: 14px;
	font-weight: 750;
}

.smp-grocery-group ul {
	margin: 0;
	padding-left: 18px;

	color: var(--smp-text-soft);
	font-size: 13px;
}


/* =========================================================
   19. FUTURE PREP TIPS
========================================================= */

.smp-tips-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

.smp-tip {
	padding: 17px;

	border: 1px solid var(--smp-border);
	border-radius: 14px;

	background: rgba(255, 255, 255, 0.035);
}

.smp-tip__title {
	margin-bottom: 6px;

	color: var(--smp-text);
	font-size: 14px;
	font-weight: 750;
}

.smp-tip__text {
	margin-bottom: 0;

	color: var(--smp-text-soft);
	font-size: 13px;
}


/* =========================================================
   20. DISCLAIMER
========================================================= */

.smp-disclaimer {
	border-color: rgba(251, 191, 36, 0.17);

	background:
		linear-gradient(
			145deg,
			rgba(251, 191, 36, 0.055),
			rgba(255, 255, 255, 0.018)
		);
}

.smp-disclaimer__title {
	margin-bottom: 10px;

	color: #f5d87a;
	font-size: 15px;
	font-weight: 750;
}

.smp-disclaimer p {
	margin-bottom: 8px;

	color: var(--smp-text-soft);
	font-size: 12px;
	line-height: 1.7;
}

.smp-disclaimer p:last-child {
	margin-bottom: 0;
}


/* =========================================================
   21. RESULT FOOTER
========================================================= */

.smp-results__footer {
	display: flex;
	justify-content: center;

	padding-top: 8px;
}


/* =========================================================
   22. GUTENBERG CONTENT SEPARATION
========================================================= */

/*
 * Intentionally NOT applying the dark Meal Planner styling
 * to .smp-editorial-content.
 *
 * Gutenberg/Astra controls the editorial area so normal
 * posts, headings, tables, images, FAQ blocks etc. remain
 * independent from the application.
 */

.smp-editorial-content {
	width: 100%;
}


/* =========================================================
   23. TABLET
========================================================= */

@media (max-width: 1024px) {

	.smp-app {
		padding-top: 58px;
		padding-bottom: 64px;
	}

	.smp-category-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.smp-overview__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.smp-grocery-grid,
	.smp-tips-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

}


/* =========================================================
   24. SMALL TABLET
========================================================= */

@media (max-width: 768px) {

	.smp-app {
		padding: 46px 16px 56px;
	}

	.smp-hero {
		margin-bottom: 34px;
	}

	.smp-hero__description {
		font-size: 15px;
	}

	.smp-planner {
		padding: 20px;
		border-radius: 22px;
	}

	.smp-progress {
		padding: 12px;
		overflow-x: auto;
	}

	.smp-progress__list {
		min-width: 520px;
	}

	.smp-category-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.smp-fields-grid {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.smp-results__header {
		flex-direction: column;
	}

	.smp-results__actions {
		justify-content: flex-start;
		width: 100%;
	}

	.smp-meals-grid {
		grid-template-columns: 1fr;
	}

}


/* =========================================================
   25. MOBILE
========================================================= */

@media (max-width: 520px) {

	.smp-app {
		padding: 38px 12px 46px;
	}

	.smp-hero__title {
		font-size: 34px;
	}

	.smp-planner {
		padding: 15px;

		border-radius: 18px;
	}

	.smp-progress {
		margin-bottom: 24px;
	}

	.smp-step {
		padding-right: 0;
		padding-left: 0;
	}

	.smp-category-grid {
		grid-template-columns: 1fr;
	}

	.smp-choice-card {
		min-height: auto;
	}

	.smp-step__actions {
		flex-direction: column-reverse;
		align-items: stretch;
	}

	.smp-step__actions--end {
		flex-direction: column;
	}

	.smp-app .smp-btn {
		width: 100%;
	}

	.smp-results__header,
	.smp-overview,
	.smp-daily-plan,
	.smp-grocery,
	.smp-prep-tips,
	.smp-disclaimer {
		padding: 18px;
		border-radius: 16px;
	}

	.smp-results__actions {
		display: grid;
		grid-template-columns: 1fr;
	}

	.smp-overview__grid,
	.smp-grocery-grid,
	.smp-tips-grid {
		grid-template-columns: 1fr;
	}

}


/* =========================================================
   26. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

	.smp-app *,
	.smp-app *::before,
	.smp-app *::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}

}


/* =========================================================
   27. PRINT
========================================================= */

@media print {

	.smp-app {
		padding: 0;

		background: #fff !important;
		color: #111 !important;
	}

	.smp-app::before,
	.smp-app::after,
	.smp-hero,
	.smp-progress,
	.smp-form,
	.smp-results__actions,
	.smp-results__footer {
		display: none !important;
	}

	.smp-planner,
	.smp-results,
	.smp-results__header,
	.smp-overview,
	.smp-daily-plan,
	.smp-grocery,
	.smp-prep-tips,
	.smp-disclaimer,
	.smp-day,
	.smp-meal-card,
	.smp-overview__item,
	.smp-grocery-group,
	.smp-tip {
		border-color: #ddd !important;

		background: #fff !important;
		color: #111 !important;

		box-shadow: none !important;

		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
	}

	.smp-app h1,
	.smp-app h2,
	.smp-app h3,
	.smp-app p,
	.smp-app span,
	.smp-app li {
		color: #111 !important;
	}

	.smp-results__header,
	.smp-overview,
	.smp-day,
	.smp-meal-card,
	.smp-grocery-group,
	.smp-tip,
	.smp-disclaimer {
		break-inside: avoid;
		page-break-inside: avoid;
	}

}