/* ─────────────────────────────────────────
   MealApp Pricing Table — mobile-first
   ───────────────────────────────────────── */

.mptable-wrap {
	max-width:   1300px;
	margin:      0 auto;
	padding:     0 16px;
	font-family: 'Inter', Helvetica, sans-serif;
	-webkit-font-smoothing: antialiased;
}

.mptable-scroll {
	background:    #0D1B2F;
	border:        1px solid rgba(29, 45, 68, 1);
	border-radius: 16px;
	overflow:      hidden;
}

/* ─────────────────────────────────────────
   MOBILE: TAB SWITCHER
   ───────────────────────────────────────── */

/* Tab strip — visible on mobile only */
.mpt-tabs {
	display:       flex;
	flex-wrap:     wrap;
	gap:           6px;
	padding:       14px;
	border-bottom: 1px solid rgba(29, 45, 68, 1);
}

.mpt-tab {
	flex:            1 1 0            !important;
	min-width:       80px             !important;
	padding:         9px 4px          !important;
	font-family:     'Inter', Helvetica, sans-serif !important;
	font-size:       11px             !important;
	font-weight:     600              !important;
	line-height:     1.35             !important;
	letter-spacing:  0                !important;
	text-align:      center           !important;
	text-transform:  none             !important;
	text-decoration: none             !important;
	cursor:          pointer          !important;
	border:          1px solid rgba(29, 45, 68, 1) !important;
	border-radius:   10px             !important;
	background:      transparent      !important;
	color:           #8a97ab          !important;
	box-shadow:      none             !important;
	outline:         none             !important;
	transition:      color 0.2s, background 0.2s, border-color 0.2s;
}

.mpt-tab.active {
	background:   rgba(31, 230, 137, 0.08) !important;
	border-color: rgba(31, 230, 137, 0.35) !important;
	color:        #1fe689                  !important;
}

/* ─────────────────────────────────────────
   MOBILE: HEADER — one card at a time
   ───────────────────────────────────────── */

.mpt-header {
	display: flex;
	padding: 14px;
}

/* "Feature" label hidden on mobile */
.mpt-head-feature { display: none; }

.mpt-head-cards {
	flex:    1;
	display: flex;
}

/* Plan cards: all hidden on mobile, JS shows the active one */
.mpt-card {
	display:        none;
	flex:           1;
	flex-direction: column;
	align-items:    center;
	gap:            4px;
	background:     #0D1B2F;
	border:         2px solid rgba(29, 45, 68, 1);
	border-radius:  16px;
	padding:        18px 16px;
	box-sizing:     border-box;
	text-align:     center;
}

.mpt-card.active { display: flex; }

.mpt-card--feat { border-color: rgba(32, 230, 138, 1); }

/* ── Badges ── */
.mpt-badge-text {
	display:        block;
	font-size:      12px;
	font-weight:    700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color:          #1fe689;
	line-height:    16px;
}

/* Per-plan badge colours (matches Figma) */
.mpt-card[data-plan="r"] .mpt-badge-text { color: #2dd4bf; }  /* teal-400    */
.mpt-card[data-plan="d"] .mpt-badge-text { color: #10b981; }  /* emerald-500 */

.mpt-badge-pill {
	display:       inline-flex;
	align-items:   center;
	align-self:    center;
	background:    #1fe689;
	color:         #050B18;
	border-radius: 999px;
	padding:       4px 12px;
	font-size:     12px;
	font-weight:   700;
	line-height:   16px;
}

/* ── Plan name / price / desc — mobile ── */
.mpt-plan-name {
	font-family:    'Inter', Helvetica, sans-serif !important;
	font-size:      20px !important;
	font-weight:    600 !important;
	line-height:    26px !important;
	letter-spacing: 0 !important;
	color:          #f3f7fc;
}

.mpt-plan-price {
	font-family:    'Inter', Helvetica, sans-serif !important;
	font-size:      18px !important;
	font-weight:    700 !important;
	line-height:    26px !important;
	letter-spacing: 0 !important;
	color:          #94a3b8;   /* slate-400 — muted, per Figma */
}

.mpt-plan-price span {
	font-size:   14px;
	font-weight: 700;
	color:       #94a3b8;
}

.mpt-plan-desc {
	font-family:    'Inter', Helvetica, sans-serif !important;
	font-size:      12px !important;
	font-weight:    400 !important;
	line-height:    19.5px !important;
	letter-spacing: 0 !important;
	color:          #8a97ab;
	margin:         0;
}

/* ─────────────────────────────────────────
   MOBILE: SECTION TITLES
   ───────────────────────────────────────── */

/* Section heading — solid full-width bar, no column borders/overlay (per Figma) */
.mpt-section-title {
	padding:       12px 14px 10px;
	background:    #030814;
	font-size:     12px;
	font-weight:   600;
	color:         #f3f7fc;
	border-top:    1px solid rgba(29, 45, 68, 1);
	border-bottom: 1px solid rgba(29, 45, 68, 1);
}

/* ─────────────────────────────────────────
   MOBILE: FEATURE ROWS — 2 column
   (feature name + active plan check)
   ───────────────────────────────────────── */

.mpt-row,
.mpt-row--alt {
	display:       flex;
	align-items:   stretch;   /* cells fill full row height so the overlay has no gaps */
	border-bottom: 1px solid rgba(29, 45, 68, 0.5);
}

.mpt-row      { background: #0D1B2F; }
.mpt-row--alt { background: #0A1728; }   /* subtle zebra stripe */

/* Feature name — takes all available space */
.mpt-cell-feature {
	flex:         1;
	display:      flex;
	align-items:  center;
	padding:      13px 12px 13px 14px;
	font-size:    14px;
	font-weight:  500;
	line-height:  20px;
	color:        #94a3b8;   /* slate-400, per Figma */
	border-right: 1px solid rgba(29, 45, 68, 1);
}

/* Plan check cells: all hidden, JS makes active one visible */
.mpt-cell-plan {
	flex:            0 0 60px;
	display:         none;
	align-items:     center;
	justify-content: center;
	padding:         13px 6px;
}

.mpt-cell-plan.active { display: flex; }

/* Featured cell overlay — lighter slate fill (slate-800/50) */
.mpt-cell-feat {
	background:   rgba(30, 41, 59, 0.5) !important;
}

/* ── Icons ── */
.mpt-icon-check {
	display: block;
	color:   #1fe689;
}

.mpt-dash {
	display:     block;
	color:       rgba(138, 151, 171, 0.2);
	font-size:   20px;
	font-weight: 300;
	line-height: 1;
}

.mpt-feature-label {
	font-size:   18px;
	font-weight: 700;
	line-height: 28px;
	color:       #f3f7fc;
}

/* ─────────────────────────────────────────
   DESKTOP ≥ 768px — full side-by-side table
   ───────────────────────────────────────── */

@media (min-width: 768px) {
	.mptable-wrap   { padding: 0 24px; }
	.mptable-scroll { overflow: hidden; }

	/* Hide tabs on desktop */
	.mpt-tabs { display: none; }

	/* Header — cards flush against container edges */
	.mpt-header {
		align-items: stretch;
		padding:     0;
	}

	.mpt-head-feature {
		display:      flex;
		flex:         0 0 38%;
		box-sizing:   border-box;
		align-items:  center;
		padding:      24px;
		border-right: 1px solid rgba(29, 45, 68, 1);
	}

	.mpt-head-cards {
		flex:        1;
		align-items: stretch;
		gap:         0;
	}

	/* Plan cards: flush, square, transparent — dividers separate them */
	.mpt-card {
		display:       flex !important;
		flex:          1;
		border:        0          !important;
		border-radius: 0          !important;
		background:    transparent !important;
		padding:       24px 24px 23px 24px;
		min-height:    211.5px;
	}

	/* Thin vertical divider between the two non-featured cards */
	.mpt-card:not(.mpt-card--feat) + .mpt-card:not(.mpt-card--feat) {
		border-left: 1px solid rgba(29, 45, 68, 1) !important;
	}

	/* Featured card: lighter slate box, green outline + glow (matches Figma) */
	.mpt-card--feat {
		border:        2px solid rgba(32, 230, 138, 1) !important;
		border-radius: 24px         !important;
		background:    #1e293b      !important;
		box-shadow:    0 0 100px 0 rgba(32, 230, 138, 0.18) !important;
	}

	/* Restore full typography */
	.mpt-plan-name  { font-size: 20px !important; line-height: 28px !important; }
	.mpt-plan-price { font-size: 18px !important; line-height: 28px !important; }

	/* Section heading — plain full-width bar, no column overlay */
	.mpt-section-title { padding: 14px 20px 13px; font-size: 13px; }

	/* Feature rows */
	.mpt-cell-feature {
		flex:       0 0 38%;
		box-sizing: border-box;
		padding:    14px 24px 14px 20px;
	}

	/* Show ALL plan check cells */
	.mpt-cell-plan {
		display:    flex !important;
		flex:       1;
		box-sizing: border-box;
		min-width:  0;
		padding:    14px 8px;
	}

	/* Featured column: lighter slate overlay + 2px green side borders.
	   Applies to both the feature-row cells and the empty section-row cells,
	   so the highlighted column is continuous and perfectly aligned. */
	.mpt-cell-feat {
		background:   rgba(30, 41, 59, 0.5) !important;
		border-left:  2px solid rgba(32, 230, 138, 0.3) !important;
		border-right: 2px solid rgba(32, 230, 138, 0.3) !important;
	}
}

/* ─────────────────────────────────────────
   WIDER BREAKPOINTS — keep a modest inset so the
   table can grow to its full 1300px max-width.
   ───────────────────────────────────────── */

@media (min-width: 1024px) { .mptable-wrap { padding: 0 32px; } }