/* ─────────────────────────────────────────
   MealApp Interactive Revenue Calculator
   ───────────────────────────────────────── */

.marc-wrap {
	--marc-bg:     #0D1B2F;
	--marc-bg-alt: #0A1728;
	--marc-border: rgba(29, 45, 68, 1);
	--marc-green:  #1fe689;
	--marc-white:  #f3f7fc;
	--marc-muted:  #94a3b8;
	--marc-red:    #f87171;
	--marc-track:  rgba(148, 163, 184, .25);

	width:        100%;
	max-width:    auto;
	margin-left:  auto;
	margin-right: auto;
	background:   var(--marc-bg);
	border:       1px solid var(--marc-border);
	border-radius: 28px;
	padding:      16px;
	font-family:  'Inter', Helvetica, sans-serif;
	-webkit-font-smoothing: antialiased;
	box-sizing:   border-box;
}
@media (min-width: 900px) {
	.marc-wrap { padding: 28px; border-radius: 32px; }
}
.marc-wrap *, .marc-wrap *::before, .marc-wrap *::after { box-sizing: border-box; }
/* Neutralise theme typography (some themes force a condensed/uppercase display font) */
.marc-wrap, .marc-wrap * {
	font-family:    'Inter', Helvetica, Arial, sans-serif !important;
	text-transform: none !important;
	letter-spacing: normal;
}

.marc-grid {
	display:        flex;
	flex-direction: column;
	gap:            16px;
}

.marc-left {
	padding: 12px 12px 4px;
}

/* Right results panel is its own nested card inside the main container */
.marc-right {
	background:     var(--marc-bg-alt);
	border:         1px solid var(--marc-border);
	border-radius:  24px;
	padding:        24px 22px;
	display:        flex;
	flex-direction: column;
}

@media (min-width: 900px) {
	.marc-grid  { flex-direction: row; align-items: stretch; gap: 28px; }
	.marc-left  { flex: 1.25; padding: 20px 8px 20px 20px; }
	.marc-right { flex: 1; padding: 32px; }
}

/* ── Eyebrow ── */
.marc-eyebrow {
	display:     flex;
	align-items: center;
	gap:         8px;
	color:       var(--marc-green);
	font-size:   13.5px;
	font-weight: 700;
	margin-bottom: 14px;
}
.marc-eyebrow svg { width: 16px; height: 16px; flex-shrink: 0; }

.marc-title {
	color:          var(--marc-white) !important;
	font-size:      23px;
	font-weight:    800;
	line-height:    1.2;
	letter-spacing: -0.01em;
	margin:         0 0 30px;
	padding:        0;
}
@media (min-width: 900px) {
	.marc-title { font-size: 29px; }
}

/* ── Sliders ── */
.marc-field { margin-bottom: 28px; }

.marc-field-head {
	display:        flex;
	justify-content: space-between;
	align-items:    baseline;
	gap:            12px;
	margin-bottom:  14px;
}
.marc-field-head label {
	color:       var(--marc-muted);
	font-size:   15px;
	font-weight: 500;
}
.marc-field-value {
	color:       var(--marc-white);
	font-size:   19px;
	font-weight: 700;
	white-space: nowrap;
}

.marc-slider {
	-webkit-appearance: none;
	appearance:   none;
	width:        100%;
	height:       6px;
	border-radius: 999px;
	background:   var(--marc-track);
	outline:      none;
	cursor:       pointer;
	margin:       0;
}
.marc-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance:    none;
	width:         20px;
	height:        20px;
	border-radius: 50%;
	background:    #ffffff;
	border:        0;
	box-shadow:    0 0 0 4px rgba(31, 230, 137, .18), 0 2px 8px rgba(0, 0, 0, .35);
	cursor:        pointer;
	transition:    box-shadow .2s ease;
}
.marc-slider::-webkit-slider-thumb:hover,
.marc-slider:focus-visible::-webkit-slider-thumb {
	box-shadow: 0 0 0 6px rgba(31, 230, 137, .25), 0 2px 8px rgba(0, 0, 0, .35);
}
.marc-slider::-moz-range-track {
	height:       6px;
	border-radius: 999px;
	background:   var(--marc-track);
}
.marc-slider::-moz-range-progress {
	height:       6px;
	border-radius: 999px;
	background:   var(--marc-green);
}
.marc-slider::-moz-range-thumb {
	width:         20px;
	height:        20px;
	border-radius: 50%;
	background:    #ffffff;
	border:        0;
	box-shadow:    0 0 0 4px rgba(31, 230, 137, .18), 0 2px 8px rgba(0, 0, 0, .35);
	cursor:        pointer;
}

/* ── Plan selector ── */
.marc-plans-head {
	display:        flex;
	justify-content: space-between;
	align-items:    center;
	margin-bottom:  12px;
}
.marc-plans-head span:first-child {
	color:       var(--marc-white);
	font-size:   15px;
	font-weight: 600;
}
.marc-muted { color: var(--marc-muted); font-size: 14px; }

.marc-plans {
	display:               grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap:                   8px;
}
@media (min-width: 480px) {
	.marc-plans { gap: 10px; }
}

.marc-plan {
	-webkit-appearance: none;
	appearance:     none;
	display:        flex !important;
	flex-direction: column !important;
	align-items:    flex-start !important;
	justify-content: center;
	gap:            8px;
	width:          100%;
	min-width:      0;
	min-height:     78px;
	margin:         0;
	padding:        12px 10px !important;
	border-radius:  16px !important;
	border:         1px solid var(--marc-border) !important;
	background:     rgba(255, 255, 255, .02) !important;
	color:          var(--marc-white) !important;
	cursor:         pointer;
	text-align:     left !important;
	box-shadow:     none !important;
	transition:     border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.marc-plan:hover { border-color: rgba(255, 255, 255, .18) !important; }
.marc-plan:focus-visible { outline: 2px solid var(--marc-green); outline-offset: 2px; }

.marc-plan-label {
	color:          var(--marc-muted);
	font-size:      10px;
	font-weight:    700;
	text-transform: uppercase !important;
	letter-spacing: .02em;
	line-height:    1.15;
}
.marc-plan-rate {
	color:       var(--marc-white);
	font-size:   19px;
	font-weight: 800;
	line-height: 1;
}

.marc-plan.is-active {
	border-color: var(--marc-green) !important;
	background:   rgba(31, 230, 137, .10) !important;
	box-shadow:   0 0 24px -8px rgba(31, 230, 137, .55) !important;
}
.marc-plan.is-active .marc-plan-label,
.marc-plan.is-active .marc-plan-rate { color: var(--marc-green); }

@media (min-width: 480px) {
	.marc-plan       { min-height: 86px; padding: 14px 14px !important; gap: 10px; }
	.marc-plan-label { font-size: 12px; letter-spacing: .04em; }
	.marc-plan-rate  { font-size: 22px; }
}
@media (min-width: 900px) {
	.marc-plan      { min-height: 96px; padding: 18px 18px !important; }
	.marc-plan-rate { font-size: 24px; }
}

/* ── Results panel ── */
.marc-results-label {
	color:        var(--marc-muted);
	font-size:    14px;
	margin-bottom: 10px;
}

.marc-net {
	color:       var(--marc-white);
	font-size:   38px;
	font-weight: 800;
	line-height: 1.1;
	margin-bottom: 24px;
	display:     flex;
	align-items: baseline;
	gap:         8px;
}
.marc-net-suffix {
	color:       var(--marc-green);
	font-size:   17px;
	font-weight: 700;
}
@media (min-width: 900px) {
	.marc-net { font-size: 44px; }
}

.marc-stats { display: flex; flex-direction: column; }

.marc-stat {
	display:        flex;
	justify-content: space-between;
	align-items:    center;
	gap:            12px;
	padding:        13px 0;
	border-top:     1px solid rgba(148, 163, 184, .12);
	font-size:      14px;
}
.marc-stat span   { color: var(--marc-muted); }
.marc-stat strong { color: var(--marc-white); font-weight: 700; }
.marc-stat strong.marc-negative { color: var(--marc-red); }
.marc-stat strong.marc-positive { color: var(--marc-green); }

.marc-stat--score { padding-bottom: 12px; }

.marc-progress {
	height:        8px;
	border-radius: 999px;
	background:    rgba(148, 163, 184, .15);
	overflow:      hidden;
	margin-bottom: 24px;
}
.marc-progress-bar {
	height:        100%;
	border-radius: 999px;
	background:    linear-gradient(90deg, #1fe689, #2dd4bf);
	box-shadow:    0 0 12px rgba(31, 230, 137, .5);
	transition:    width .35s ease;
}

@media (min-width: 900px) {
	.marc-cta { margin-top: auto; }
}

/* ── CTA ── */
.marc-cta {
	display:         flex;
	align-items:     center;
	justify-content: center;
	gap:             8px;
	width:           100%;
	padding:         16px 24px;
	border-radius:   999px;
	background:      var(--marc-green);
	color:           #06210F !important;
	font-size:       15px;
	font-weight:     800;
	text-decoration: none !important;
	transition:      transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.marc-cta:hover {
	background: #25f594;
	box-shadow: 0 8px 28px -10px rgba(31, 230, 137, .6);
	transform:  translateY(-1px);
}
.marc-cta svg { flex-shrink: 0; }

@media (prefers-reduced-motion: reduce) {
	.marc-slider::-webkit-slider-thumb,
	.marc-progress-bar,
	.marc-cta { transition: none; }
}