/**
 * Mobile app — light brand shell (sitewide last-win).
 * Brand #14c131 · sage canvas · white cards · app-like chrome.
 * Loaded after all home-mobile*.css. Desktop ≥850 unchanged.
 *
 * @package Flatsome_Child
 */

/* ── Tokens: bright mobile app ───────────────── */
body.fc-has-mapp,
.fc-mapp-chrome,
.fc-mhome,
.fc-mabout,
.fc-mproducts,
.fc-mparts,
.fc-mpart,
.fc-mproduct,
.fc-mnews,
.fc-mpost,
.fc-mservices,
.fc-mservice,
.fc-mdealers,
.fc-mcontact,
.fc-mrecruit,
.fc-mcompare {
	--mh-pad: 1rem;
	--mh-gap: 0.85rem;
	--mh-radius: 1rem;
	--mh-radius-sm: 0.75rem;
	--mh-ink: #1a2420;
	--mh-muted: #5c6b63;
	--mh-shell: #f2f5f3;
	--mh-shell-soft: #f8fbf9;
	--mh-card: #ffffff;
	--mh-line: #dfe7e2;
	--mh-line-soft: #e8eee9;
	--mh-brand: #14c131;
	--mh-brand-dark: #0a8f22;
	--mh-brand-soft: #1ed93d;
	--mh-mint: #f2faf4;
	--mh-mint-deep: #e8f6ec;
	--mh-help-grad: linear-gradient(145deg, #ffffff 0%, #f3faf5 52%, #e8f6ec 100%);
	--mh-media-plate: linear-gradient(135deg, #e8f3eb 0%, #d8ebe0 48%, #cfe6d6 100%);
	--mh-shadow: 0 10px 28px rgba(16, 26, 21, 0.07);
	--mh-shadow-soft: 0 6px 16px rgba(16, 26, 21, 0.05);
}

/* Mobile button system: balanced, readable and consistent across every app page. */
@media (max-width: 849px) {
	body.fc-has-mapp {
		padding-bottom: 0 !important;
	}

	body.fc-has-mapp #main,
	body.fc-has-mapp.fc-header-overlay #main {
		padding-bottom: 0 !important;
	}

	body.fc-has-mapp :is(
		.fc-mhome,
		.fc-mabout,
		.fc-mproducts,
		.fc-mparts,
		.fc-mpart,
		.fc-mproduct,
		.fc-mnews,
		.fc-mpost,
		.fc-mservices,
		.fc-mservice,
		.fc-mdealers,
		.fc-mcontact,
		.fc-mrecruit,
		.fc-mcompare
	) {
		padding-bottom: calc(var(--mh-tab-h, 3.85rem) + env(safe-area-inset-bottom, 0px) + 0.5rem) !important;
	}

	body.fc-has-mapp .fc-mhome-btn {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 0.42rem !important;
		width: 100%;
		min-height: 2.75rem !important;
		height: auto !important;
		margin: 0 !important;
		padding: 0.62rem 0.85rem !important;
		border-radius: 0.78rem !important;
		box-sizing: border-box !important;
		font-size: 0.8rem !important;
		font-weight: 800 !important;
		line-height: 1.2 !important;
		letter-spacing: 0.01em !important;
		text-align: center;
		text-decoration: none !important;
	}

	body.fc-has-mapp .fc-mhome-btn--primary {
		background: linear-gradient(145deg, #20d942 0%, #14c131 52%, #0e9a26 100%) !important;
		border: 1px solid #14c131 !important;
		color: #fff !important;
		-webkit-text-fill-color: #fff !important;
		box-shadow: 0 6px 14px rgba(20, 193, 49, 0.2) !important;
	}

	body.fc-has-mapp .fc-mhome-btn--soft,
	body.fc-has-mapp .fc-mhome-btn--ghost {
		background: #fff !important;
		background-image: none !important;
		border: 1.5px solid rgba(20, 193, 49, 0.38) !important;
		color: #0a8f22 !important;
		-webkit-text-fill-color: #0a8f22 !important;
		box-shadow: none !important;
	}

	body.fc-has-mapp .fc-mhome-btn:is([disabled], [aria-disabled=true]),
	body.fc-has-mapp button.fc-mhome-btn:disabled {
		background: #eef3f0 !important;
		border-color: #d5dfd8 !important;
		color: #68776e !important;
		-webkit-text-fill-color: #68776e !important;
		box-shadow: none !important;
		opacity: 0.78 !important;
		pointer-events: none;
	}

	body.fc-has-mapp .fc-mhome-btn-ico,
	body.fc-has-mapp .fc-mhome-btn-ico svg {
		width: 1rem !important;
		height: 1rem !important;
		min-width: 1rem;
	}

	body.fc-has-mapp :is(
		.fc-mabout-cta-actions,
		.fc-mprod-help-actions,
		.fc-mnews-help-actions,
		.fc-mpost-help-actions,
		.fc-msvc-help-actions,
		.fc-mdealers-help-actions,
		.fc-mcontact-help-actions,
		.fc-mrecruit-help-actions,
		.fc-mcompare-help-actions,
		.fc-mservice-cta-grid,
		.fc-mproduct-cta-grid,
		.fc-mpart-cta-grid,
		.fc-mdealer-card-actions
	) {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 0.55rem !important;
		align-items: stretch !important;
	}

	body.fc-has-mapp .fc-mabout-cta-actions .fc-mabout-cta-primary {
		grid-column: 1 / -1;
	}

	body.fc-has-mapp :is(
		.fc-mproduct-sticky-cta,
		.fc-mpart-sticky-cta,
		.fc-mservice-sticky-cta,
		.fc-mcontact-sticky-cta,
		.fc-mrecruit-sticky-cta,
		.fc-mnews-sticky-cta,
		.fc-mpost-sticky-cta,
		.fc-mcompare-sticky-cta,
		.fc-mdealers-sticky-cta
	) .fc-mhome-btn {
		min-height: 2.55rem !important;
		padding: 0.52rem 0.65rem !important;
		border-radius: 0.72rem !important;
		font-size: 0.78rem !important;
	}
}

@media (max-width: 360px) {
	body.fc-has-mapp :is(
		.fc-mabout-cta-actions,
		.fc-mprod-help-actions,
		.fc-mnews-help-actions,
		.fc-mpost-help-actions,
		.fc-msvc-help-actions,
		.fc-mdealers-help-actions,
		.fc-mcontact-help-actions,
		.fc-mrecruit-help-actions,
		.fc-mcompare-help-actions,
		.fc-mservice-cta-grid,
		.fc-mproduct-cta-grid,
		.fc-mpart-cta-grid
	) {
		grid-template-columns: 1fr !important;
	}

	body.fc-has-mapp .fc-mabout-cta-actions .fc-mabout-cta-primary {
		grid-column: auto;
	}
}

/* ── Page canvas ─────────────────────────────── */
@media (max-width: 849px) {
	html body.fc-has-mapp,
	html body.fc-has-mapp #wrapper,
	html body.fc-has-mapp #main,
	html body.fc-has-mapp .page-wrapper {
		background: var(--mh-shell) !important;
		color: var(--mh-ink) !important;
	}

	/* App shells */
	.fc-mhome,
	.fc-mabout,
	.fc-mproducts,
	.fc-mparts,
	.fc-mpart,
	.fc-mproduct,
	.fc-mnews,
	.fc-mpost,
	.fc-mservices,
	.fc-mservice,
	.fc-mdealers,
	.fc-mcontact,
	.fc-mrecruit,
	.fc-mcompare {
		background: var(--mh-shell) !important;
		color: var(--mh-ink) !important;
	}

	/* Top bar — frosted white app chrome */
	.fc-mapp-top,
	.fc-mhome-bar {
		background: rgba(255, 255, 255, 0.97) !important;
		border-bottom-color: var(--mh-line-soft) !important;
		box-shadow: 0 1px 0 rgba(16, 26, 21, 0.05) !important;
	}
	.fc-mhome-bar-menu {
		background: var(--mh-mint) !important;
		color: var(--mh-ink) !important;
	}
	.fc-mhome-bar-menu:active {
		background: var(--mh-mint-deep) !important;
	}

	/* Tab bar — clean white dock */
	.fc-mhome-tabbar {
		background: rgba(255, 255, 255, 0.98) !important;
		border-top: 1px solid var(--mh-line-soft) !important;
		box-shadow: 0 -6px 20px rgba(16, 26, 21, 0.06) !important;
	}
	/* Tabbar: every tab shares one line-icon language (incl. Gọi — no solid disk) */
	.fc-mhome-tab {
		color: var(--mh-muted) !important;
		background: transparent !important;
	}
	.fc-mhome-tab--call {
		color: var(--mh-brand) !important;
		background: transparent !important;
	}
	.fc-mhome-tab .fc-mhome-tab-ico,
	.fc-mhome-tab--call .fc-mhome-tab-ico {
		color: inherit !important;
		background: transparent !important;
		box-shadow: none !important;
		border: 0 !important;
		width: 1.65rem !important;
		height: 1.65rem !important;
		margin: 0 !important;
		border-radius: 0 !important;
	}
	.fc-mhome-tab.is-active .fc-mhome-tab-ico,
	.fc-mhome-tab[aria-current="page"] .fc-mhome-tab-ico {
		color: var(--mh-brand) !important;
	}
	.fc-mhome-tab .fc-mhome-tab-label {
		color: var(--mh-muted) !important;
	}
	.fc-mhome-tab.is-active .fc-mhome-tab-label,
	.fc-mhome-tab[aria-current="page"] .fc-mhome-tab-label,
	.fc-mhome-tab--call .fc-mhome-tab-label {
		color: var(--mh-brand-dark, #0a8f22) !important;
		font-weight: 800;
	}

	/* Drawer */
	.fc-mhome-drawer {
		background: #fff !important;
		color: var(--mh-ink) !important;
	}
	.fc-mhome-drawer-bg {
		background: rgba(10, 20, 16, 0.42) !important;
	}

	/* Media plates (no photo / loading) — mint, not carbon */
	.fc-mhome-hero-slider,
	.fc-mhome-hero-media,
	.fc-mnews-hero-media,
	.fc-mservices-hero-media,
	.fc-msvc-hero-media,
	.fc-mdealers-hero-media,
	.fc-mcontact-hero-media,
	.fc-mrecruit-hero-media,
	.fc-mcompare-hero-media,
	.fc-mservice-hero-media,
	.fc-mabout-hero-media,
	.fc-mproducts-hero-media,
	.fc-mparts-hero-media,
	.fc-mpart-hero-media,
	.fc-mproduct-hero-media,
	.fc-mproduct-video {
		background: var(--mh-media-plate) !important;
	}

	/* Softer photo shade for brighter app feel */
	.fc-mhome-hero-shade,
	.fc-mnews-hero-shade,
	.fc-mservices-hero-shade,
	.fc-msvc-hero-shade,
	.fc-mdealers-hero-shade,
	.fc-mcontact-hero-shade,
	.fc-mrecruit-hero-shade,
	.fc-mcompare-hero-shade,
	.fc-mservice-hero-shade {
		background: linear-gradient(
			180deg,
			rgba(10, 26, 16, 0.04) 25%,
			rgba(10, 26, 16, 0.28) 100%
		) !important;
	}

	/* Hero copy cards already white — reinforce */
	.fc-mnews-hero-copy.has-media,
	.fc-mservices-hero-copy.has-media,
	.fc-msvc-hero-copy.has-media,
	.fc-mdealers-hero-copy.has-media,
	.fc-mcontact-hero-copy.has-media,
	.fc-mrecruit-hero-copy.has-media,
	.fc-mcompare-hero-copy.has-media,
	.fc-mservice-hero-copy.has-media {
		background: #fff !important;
		border-color: var(--mh-line) !important;
		box-shadow: var(--mh-shadow) !important;
	}

	/* ── Help / CTA cards: light brand (was forest carbon) ── */
	.fc-mabout-cta,
	.fc-mparts-help-card,
	.fc-mnews-help-card,
	.fc-mpost-help-card,
	.fc-msvc-help-card,
	.fc-mdealers-help-card,
	.fc-mcontact-help-card,
	.fc-mrecruit-help-card,
	.fc-mcompare-help-card,
	.fc-mprod-help-card,
	.fc-mproduct-promo,
	.fc-mservice-booking {
		background: var(--mh-help-grad) !important;
		border: 1px solid var(--mh-line) !important;
		color: var(--mh-ink) !important;
		box-shadow: var(--mh-shadow) !important;
	}

	.fc-mabout-cta-kicker,
	.fc-mparts-help-kicker,
	.fc-mnews-help-kicker,
	.fc-mpost-help-kicker,
	.fc-msvc-help-kicker,
	.fc-mdealers-help-kicker,
	.fc-mcontact-help-kicker,
	.fc-mrecruit-help-kicker,
	.fc-mcompare-help-kicker,
	.fc-mprod-help-kicker,
	.fc-mservice-booking-kicker {
		color: var(--mh-brand-dark) !important;
	}

	.fc-mabout-cta-title,
	.fc-mservice-booking-title {
		color: var(--mh-brand) !important;
		-webkit-text-fill-color: var(--mh-brand) !important;
	}

	.fc-mabout-cta-title,
	.fc-mparts-help-text,
	.fc-mnews-help-text,
	.fc-mpost-help-text,
	.fc-msvc-help-text,
	.fc-mdealers-help-text,
	.fc-mcontact-help-text,
	.fc-mrecruit-help-text,
	.fc-mcompare-help-text,
	.fc-mprod-help-text,
	.fc-mservice-booking-desc,
	.fc-mproduct-promo,
	.fc-mproduct-promo p {
		color: var(--mh-muted) !important;
	}

	.fc-mproduct-promo .fc-mprose-toggle,
	.fc-mproduct-promo .fc-mproduct-prose-toggle {
		color: var(--mh-brand-dark) !important;
	}

	/* Soft buttons on light help cards — outline brand (not white-on-dark) */
	.fc-mnews-help-actions .fc-mhome-btn--soft,
	.fc-mpost-help-actions .fc-mhome-btn--soft,
	.fc-msvc-help-actions .fc-mhome-btn--soft,
	.fc-mdealers-help-actions .fc-mhome-btn--soft,
	.fc-mcontact-help-actions .fc-mhome-btn--soft,
	.fc-mrecruit-help-actions .fc-mhome-btn--soft,
	.fc-mcompare-help-actions .fc-mhome-btn--soft,
	.fc-mprod-help-actions .fc-mhome-btn--soft,
	.fc-mabout-cta-actions .fc-mhome-btn--soft,
	.fc-mparts-help-card .fc-mhome-btn--soft {
		background: #fff !important;
		border: 1.5px solid rgba(20, 193, 49, 0.38) !important;
		color: var(--mh-brand-dark) !important;
		-webkit-text-fill-color: var(--mh-brand-dark) !important;
		box-shadow: none !important;
	}

	/* Primary pills on help — brand gradient */
	.fc-mnews-help-actions .fc-mhome-btn--primary,
	.fc-mpost-help-actions .fc-mhome-btn--primary,
	.fc-msvc-help-actions .fc-mhome-btn--primary,
	.fc-mdealers-help-actions .fc-mhome-btn--primary,
	.fc-mcontact-help-actions .fc-mhome-btn--primary,
	.fc-mrecruit-help-actions .fc-mhome-btn--primary,
	.fc-mcompare-help-actions .fc-mhome-btn--primary,
	.fc-mprod-help-actions .fc-mhome-btn--primary,
	.fc-mabout-cta-actions .fc-mhome-btn--primary,
	.fc-mparts-help-card .fc-mhome-btn--primary {
		background: linear-gradient(145deg, #20d942 0%, #14c131 52%, #0e9a26 100%) !important;
		border: 0 !important;
		color: #fff !important;
		-webkit-text-fill-color: #fff !important;
		box-shadow: 0 8px 18px rgba(20, 193, 49, 0.22) !important;
	}

	/* Service booking outer shell light; inner form stays white */
	.fc-mservice-booking .fc-mservice-form {
		background: #fff !important;
		border: 1px solid var(--mh-line) !important;
		box-shadow: var(--mh-shadow-soft) !important;
	}

	/* Section titles brand */
	.fc-mhome-sec-title,
	.fc-mhome-title,
	.fc-mcontact-form-title,
	.fc-mservice-booking-title {
		color: var(--mh-brand) !important;
	}

	/* Cards — consistent white surface */
	.fc-mprod-card,
	.fc-mfeat-card,
	.fc-msvc-card,
	.fc-mdealers-card,
	.fc-mcontact-info,
	.fc-mcontact-form-card,
	.fc-mrecruit-job,
	.fc-mnews-card,
	.fc-mpost-card,
	.fc-mcompare-slot,
	.fc-mparts-card,
	.fc-mpart-card {
		background: #fff !important;
		border-color: var(--mh-line) !important;
	}

	/* Chips — mint active */
	.fc-msvc-chip.is-active,
	.fc-mdealers-chip.is-active,
	.fc-mprod-chip.is-active,
	.fc-mparts-chip.is-active {
		background: var(--mh-brand) !important;
		border-color: var(--mh-brand) !important;
		color: #fff !important;
	}
	.fc-msvc-chip,
	.fc-mdealers-chip,
	.fc-mprod-chip,
	.fc-mparts-chip {
		background: #fff !important;
		border-color: var(--mh-line) !important;
		color: var(--mh-ink) !important;
	}

	/* Sticky CTA bars — light glass dock */
	.fc-mproduct-sticky-cta,
	.fc-mpart-sticky-cta,
	.fc-mservice-sticky-cta,
	.fc-mcontact-sticky-cta,
	.fc-mrecruit-sticky-cta,
	.fc-mnews-sticky-cta,
	.fc-mpost-sticky-cta,
	.fc-mcompare-sticky-cta,
	.fc-mdealers-sticky-cta {
		background: rgba(255, 255, 255, 0.96) !important;
		border-top: 1px solid var(--mh-line-soft) !important;
		box-shadow: 0 -8px 24px rgba(16, 26, 21, 0.08) !important;
		backdrop-filter: blur(14px);
		-webkit-backdrop-filter: blur(14px);
	}

	/* Contact info panel on mobile — light card (not photo carbon) */
	.fc-mcontact-info {
		background: #fff !important;
		border: 1px solid var(--mh-line) !important;
		border-radius: var(--mh-radius) !important;
		box-shadow: var(--mh-shadow) !important;
		color: var(--mh-ink) !important;
	}
	.fc-mcontact-info-list,
	.fc-mcontact-info-list a,
	.fc-mcontact-company {
		color: var(--mh-ink) !important;
	}
	.fc-mcontact-info-label {
		color: var(--mh-muted) !important;
	}
	.fc-mcontact-info-ico {
		color: var(--mh-brand) !important;
		background: var(--mh-mint) !important;
	}

	/* Form fields — mint fill focus brand */
	.fc-mcontact-field input,
	.fc-mcontact-field textarea,
	.fc-mcontact-form input,
	.fc-mcontact-form textarea,
	.fc-mservice-form input,
	.fc-mservice-form textarea,
	.fc-mservice-form select {
		background: #f4f7f5 !important;
		border: 1px solid var(--mh-line) !important;
		border-radius: 0.7rem !important;
		color: var(--mh-ink) !important;
	}
	.fc-mcontact-field input:focus,
	.fc-mcontact-field textarea:focus,
	.fc-mservice-form input:focus,
	.fc-mservice-form textarea:focus,
	.fc-mservice-form select:focus {
		border-color: var(--mh-brand) !important;
		background: #fff !important;
		box-shadow: 0 0 0 3px rgba(20, 193, 49, 0.14) !important;
	}

	/* Home quick actions — soft mint hover language */
	.fc-mhome-action,
	.fc-mhome-actions .item {
		background: #fff !important;
		border-color: var(--mh-line) !important;
	}

	/* Footer strip inside app shells */
	.fc-mhome-foot,
	.fc-mapp-foot {
		background: var(--mh-shell-soft) !important;
		color: var(--mh-muted) !important;
	}
}

/* Products mobile: use the same calm, compact listing rhythm as Services. */
@media (max-width: 849px) {
	body.fc-has-mproducts .fc-mprod-sticky {
		position: relative !important;
		top: auto !important;
		z-index: 4 !important;
		padding: 0.55rem var(--mh-pad, 1rem) 0.15rem !important;
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
	}

	body.fc-has-mproducts .fc-mprod-chips-wrap {
		margin: 0 !important;
		padding: 0 !important;
	}

	body.fc-has-mproducts .fc-mprod-chips {
		gap: 0.45rem !important;
		padding: 0.1rem 0 0.45rem !important;
	}

	body.fc-has-mproducts .fc-mprod-chip {
		min-height: 2.05rem !important;
		padding: 0.35rem 0.8rem !important;
		border: 1px solid var(--mh-line, #dfe7e2) !important;
		background: #fff !important;
		color: var(--mh-ink, #1a2420) !important;
		font-size: 0.78rem !important;
		font-weight: 750 !important;
	}

	body.fc-has-mproducts .fc-mprod-chip.is-active {
		background: var(--mh-brand, #14c131) !important;
		border-color: var(--mh-brand, #14c131) !important;
		color: #fff !important;
	}

	body.fc-has-mproducts .fc-mprod-chip.is-active .fc-mprod-chip-txt,
	body.fc-has-mproducts .fc-mprod-chip.is-active .fc-mprod-chip-count {
		color: #fff !important;
	}

	body.fc-has-mproducts .fc-mprod-chip-count {
		background: rgba(16, 26, 21, 0.06) !important;
		font-size: 0.68rem !important;
	}

	body.fc-has-mproducts .fc-mprod-chip.is-active .fc-mprod-chip-count {
		background: rgba(255, 255, 255, 0.2) !important;
	}

	body.fc-has-mproducts .fc-mprod-chips-guide {
		margin: 0.15rem 0 0 !important;
		padding-bottom: 0.25rem !important;
	}

	body.fc-has-mproducts .fc-mprod-panel {
		display: none !important;
	}

	body.fc-has-mproducts .fc-mprod-list-section {
		padding: 0.75rem var(--mh-pad, 1rem) 0.25rem !important;
	}

	body.fc-has-mproducts .fc-mprod-card {
		border-radius: 0.95rem !important;
		box-shadow: 0 8px 20px rgba(16, 26, 21, 0.05) !important;
	}

	body.fc-has-mproducts .fc-mprod-card-link {
		display: grid !important;
		grid-template-columns: 7.25rem minmax(0, 1fr) !important;
		min-height: 7.5rem !important;
	}

	body.fc-has-mproducts .fc-mprod-card-media {
		aspect-ratio: auto !important;
		min-height: 7.5rem !important;
	}

	body.fc-has-mproducts .fc-mprod-card-body {
		gap: 0.24rem !important;
		padding: 0.7rem 0.8rem 0.75rem !important;
		min-width: 0;
	}

	body.fc-has-mproducts .fc-mprod-card-title {
		font-size: 0.95rem !important;
	}

	body.fc-has-mproducts .fc-mprod-card-hl {
		font-size: 0.74rem !important;
		-webkit-line-clamp: 1;
	}

	body.fc-has-mproducts .fc-mprod-card-foot {
		margin-top: auto !important;
		padding-top: 0.42rem !important;
	}

	body.fc-has-mproducts .fc-mprod-card-price {
		font-size: 0.78rem !important;
	}

	body.fc-has-mproducts .fc-mprod-card-price-label {
		font-size: 0.58rem !important;
	}

	body.fc-has-mproducts .fc-mprod-card-cta {
		min-height: 1.8rem !important;
		padding: 0.28rem 0.52rem !important;
		font-size: 0.66rem !important;
	}
}

/* Home ending: keep one tab-bar safe zone instead of stacking shell reserves. */
@media (max-width: 849px) {
	html body.home.fc-has-mhome {
		padding-bottom: 0 !important;
	}

	html body.home.fc-has-mhome #main,
	html body.home.fc-has-mhome.fc-header-overlay #main {
		padding-bottom: 0 !important;
	}

	html body.home.fc-has-mhome #footer,
	html body.home.fc-has-mhome footer.footer-wrapper {
		display: none !important;
		height: 0 !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	html body.home.fc-has-mhome .fc-mhome {
		padding-bottom: calc(var(--mh-tab-h, 3.85rem) + env(safe-area-inset-bottom, 0px)) !important;
	}
}