.c51ec-wizard {
	max-width: 480px;
	margin: 0 auto;
	font-size: 16px;
	/* Explicit, not inherited: the wizard renders inside a host page's own
	   theme (inline embed) or a plain white popup panel (the modal
	   trigger), and several themes — including this site's own — set a
	   light grey as their global body text color, tuned for a dark
	   background. Left unset, that grey cascades straight into the
	   modal's white panel and becomes hard to read (labels especially).
	   Black is legible everywhere this wizard actually renders except the
	   landing page, which is dark-themed and deliberately overrides this
	   back to a lighter color in landing.css. */
	color: #111;
}
.c51ec-progress {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin-bottom: 20px;
}
.c51ec-step-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #ddd;
}
.c51ec-step-dot.is-active {
	background: #333;
}
.c51ec-step label {
	display: block;
	margin-bottom: 14px;
	font-weight: 500;
}
.c51ec-step input[type="number"],
.c51ec-step select {
	display: block;
	width: 100%;
	min-height: 44px;
	font-size: 16px;
	margin-top: 4px;
	padding: 8px;
	box-sizing: border-box;
}
.c51ec-checkbox {
	display: flex !important;
	align-items: center;
	gap: 8px;
	font-weight: 400 !important;
}
.c51ec-checkbox input {
	width: 20px;
	height: 20px;
}
.c51ec-nav {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 20px;
}
.c51ec-nav button {
	min-height: 44px;
	padding: 10px 20px;
	font-size: 16px;
	border-radius: 6px;
	border: 1px solid #ccc;
	background: #fff;
	cursor: pointer;
}
.c51ec-primary {
	background: #222 !important;
	color: #fff !important;
	border-color: #222 !important;
	flex: 1;
}
.c51ec-food-group {
	margin-bottom: 20px;
}
.c51ec-food-group h3 {
	margin-bottom: 8px;
	text-transform: capitalize;
}
.c51ec-food-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid #eee;
}
.c51ec-food-item input[type="number"] {
	width: 70px;
	min-height: 36px;
}
.c51ec-error {
	color: #b32d2e;
	font-weight: 500;
}
#c51ec-results table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 16px;
}
#c51ec-results th, #c51ec-results td {
	text-align: left;
	padding: 8px 4px;
	border-bottom: 1px solid #eee;
}
#c51ec-why summary {
	cursor: pointer;
	font-weight: 500;
	margin-bottom: 8px;
}
.c51ec-step textarea {
	display: block;
	width: 100%;
	font-size: 16px;
	margin-top: 4px;
	padding: 8px;
	box-sizing: border-box;
	font-family: inherit;
}
#c51ec-ai-summary {
	margin: 0 0 12px;
	padding-left: 20px;
}
#c51ec-ai-summary li {
	margin-bottom: 4px;
}
.c51ec-plan-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid #eee;
	flex-wrap: wrap;
}
.c51ec-plan-meta {
	font-size: 13px;
	color: #888;
}
.c51ec-plan-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.c51ec-plan-actions button {
	min-height: 36px;
	padding: 6px 12px;
	font-size: 14px;
	border-radius: 6px;
	border: 1px solid #ccc;
	background: #fff;
	cursor: pointer;
}
.c51ec-save-plan {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid #eee;
}
.c51ec-save-plan input {
	display: block;
	width: 100%;
	min-height: 44px;
	font-size: 16px;
	margin: 8px 0;
	padding: 8px;
	box-sizing: border-box;
}
@media print {
	.c51ec-nav, .c51ec-progress, #c51ec-why, .c51ec-save-plan {
		display: none !important;
	}
}
[data-i18n-pending] {
	visibility: hidden;
}
.c51ec-lang-toggle-row {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 8px;
}
.c51ec-lang-toggle {
	background: none;
	border: 1px solid #ccc;
	border-radius: 6px;
	padding: 6px 12px;
	font-size: 14px;
	cursor: pointer;
}
.c51ec-loading {
	color: #888;
}
.c51ec-trigger-btn {
	min-height: 44px;
	padding: 10px 20px;
	font-size: 16px;
	border-radius: 6px;
	cursor: pointer;
}
/* Only applied when no host `class` attribute is supplied on the
   [cocina51_event_calculator_trigger] shortcode — keeps this plugin's
   own default look without fighting a host page's button styling
   (e.g. Menu Builder's own .c51-btn-secondary) when one is provided. */
.c51ec-trigger-btn-default {
	border: 1px solid #222;
	background: #222;
	color: #fff;
}
.c51ec-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100000;
	padding: 16px;
}
/* CRITICAL: without this, the modal can never actually be dismissed.
   `.c51ec-modal-overlay { display: flex; }` above and the browser's own
   `[hidden] { display: none; }` default rule have IDENTICAL specificity
   (0-1-0 each) — a plain class selector vs a plain attribute selector.
   Our own stylesheet loads after the browser's built-in one, so on a
   specificity tie our rule wins by source order, meaning the `hidden`
   attribute was silently doing nothing: JS could set `hidden = true`
   all day and the overlay stayed visually displayed regardless. This
   rule breaks that tie explicitly (a compound selector already has
   higher specificity than either rule alone, so !important is just a
   defensive second line against whatever a host page's own CSS might
   add on top — a modal that traps the visitor is worth being paranoid
   about). */
.c51ec-modal-overlay[hidden] {
	display: none !important;
}
.c51ec-modal-panel {
	position: relative;
	background: #fff;
	border-radius: 10px;
	max-width: 520px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	padding: 24px 20px;
	box-sizing: border-box;
}
.c51ec-modal-close {
	position: absolute;
	top: 8px;
	right: 12px;
	background: none;
	border: none;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	color: #666;
	padding: 4px 8px;
}

/* ---- v0.5: suggestions + lead-capture gate --------------------------- */

.c51ec-suggestions {
	margin: 20px 0;
	padding: 14px 16px;
	background: #fff8ec;
	border: 1px solid #f0dfb8;
	border-radius: 8px;
}
.c51ec-suggestions h3 {
	margin: 0 0 8px;
	font-size: 15px;
}
.c51ec-suggestions ul {
	margin: 0;
	padding-left: 20px;
}
.c51ec-suggestions li {
	margin-bottom: 6px;
	font-size: 14px;
}
.c51ec-lead-gate {
	margin: 20px 0;
	padding: 16px;
	border: 1px solid #ddd;
	border-radius: 8px;
}
.c51ec-lead-gate input {
	display: block;
	width: 100%;
	min-height: 44px;
	font-size: 16px;
	margin: 4px 0 14px;
	padding: 8px;
	box-sizing: border-box;
}
@media print {
	.c51ec-lead-gate, .c51ec-suggestions {
		display: none !important;
	}
}