/* MyBookaro — Minimal supplementary CSS for the 11 Elementor landing pages.
   Most styling now comes from Elementor's native rendering of Porto widget
   settings. This file only handles the structural overrides that Elementor's
   per-post CSS generator misses for programmatically-saved data:
     - Hero badge gradient pill (heading[span] bg-gradient styling)
     - Final CTA white-pill badge fallback
     - Related cards 4-col grid layout
*/

/* === Hero badge — teal-gradient pill (matches Home/Solutions convention) === */
.mb-landing-elem-hero .mb-landing-elem-badge {
	margin-bottom: 18px !important;
	text-align: center;
}
.mb-landing-elem-hero .mb-landing-elem-badge .elementor-heading-title {
	display: inline-block;
	background: linear-gradient(90deg, #0F766E 0%, #115E59 100%);
	color: #FFFFFF !important;
	padding: 4px 1.25rem;
	border-radius: 1rem;
	font-family: 'Lexend', -apple-system, sans-serif;
	font-size: 0.875rem !important;
	font-weight: 500 !important;
	line-height: 1.7;
}

/* === Hero typography === */
.mb-landing-elem-hero h1 {
	font-family: 'Lexend', -apple-system, sans-serif;
}
.mb-landing-elem-hero h1 strong {
	color: #0F766E !important;
	font-weight: inherit;
}

/* === Hero — centered text-only === */
.mb-landing-elem-hero h1 { text-align: center; }
.mb-landing-elem-hero .elementor-widget-text-editor p {
	text-align: center;
	font-size: 1.05rem; color: #475569;
	max-width: 720px; margin: 0 auto 1.5rem; line-height: 1.7;
}
.mb-landing-elem-hero .elementor-widget-porto_button {
	text-align: center !important;
	margin-top: 0.5rem !important;
}
.mb-landing-elem-hero .elementor-widget-porto_button .elementor-widget-container {
	text-align: center !important;
}

/* === Marquee strip — mint gradient ribbon === */
.mb-landing-elem-marquee.mb-landing-elem-marquee {
	background: linear-gradient(90deg, #A7F3D0 0%, #D6EFE8 100%) !important;
	padding: 1.2rem 0 !important;
	overflow: hidden !important;
}
.mb-landing-elem-marquee .elementor-heading-title {
	display: inline-block;
	white-space: nowrap;
	font-family: 'Lexend', -apple-system, sans-serif;
	font-size: 1.05rem;
	font-weight: 500;
	color: #0F172A;
}
/* If porto_ultimate_heading marquee animation isn't available, fall back to static centered text */
.mb-landing-elem-marquee .elementor-widget-porto_ultimate_heading,
.mb-landing-elem-marquee .ultimate-heading-content,
.mb-landing-elem-marquee .uvc-heading-wrapper {
	text-align: center !important;
}

/* === Steps section — porto_steps numbered horizontal process ===
   Used on /request-to-book/, /provider-dashboard/, /multi-provider-booking/,
   /use-cases/. Mirrors the /features/ porto_steps layout. */
.mb-landing-elem-steps.mb-landing-elem-steps {
	background: #FFFFFF !important;
	padding: 4.5rem 1.5rem 4.5rem !important;
}
.mb-landing-elem-steps > .e-con-inner {
	width: 100% !important;
	max-width: 1100px !important;
	margin: 0 auto !important;
}
/* Eyebrow + H2 styled to match other sections */
.mb-landing-elem-steps .elementor-widget-heading:first-of-type .elementor-heading-title {
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 1.5px !important;
	text-transform: uppercase !important;
	color: #0F766E !important;
}
.mb-landing-elem-steps .elementor-widget-heading + .elementor-widget-heading .elementor-heading-title {
	font-family: 'Lexend', -apple-system, sans-serif !important;
	font-size: 1.95rem !important;
	font-weight: 600 !important;
	letter-spacing: -0.02em !important;
	color: #0F172A !important;
	margin: 0 0 2rem !important;
	max-width: 700px;
}
/* The porto_steps widget — matches /features/ "Five stages, one product"
   exactly: outline-circle teal icons + connector lines + centered text.
   Porto DOM: .porto-process.process-horizontal > .process-step (per card)
   each card: .process-step-circle > .process-step-circle-content > i
              .process-step-content > h4.step-item-title + .process-step-desc */
.mb-landing-elem-steps .porto-process.process-horizontal {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	gap: 0 !important;
	align-items: flex-start !important;
	justify-content: center !important;
	width: 100% !important;
}
.mb-landing-elem-steps .process-step {
	flex: 1 1 0 !important;
	min-width: 180px !important;
	max-width: 240px !important;
	padding: 0 12px !important;
	background: transparent !important;
	border: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	text-align: center !important;
	position: relative;
}
/* Horizontal connector line linking adjacent step circles */
.mb-landing-elem-steps .process-step:not(:last-child)::after {
	content: '';
	position: absolute;
	top: 32px;            /* roughly the vertical center of the circle */
	left: calc(50% + 32px);
	width: calc(100% - 64px);
	height: 1px;
	background: #CBD5E1;
	z-index: 0;
}
.mb-landing-elem-steps .process-step-circle {
	display: inline-flex !important;
	width: 64px !important;
	height: 64px !important;
	align-items: center !important;
	justify-content: center !important;
	background: #FFFFFF !important;
	border: 2px solid #0F766E !important;
	border-radius: 50% !important;
	margin: 0 0 18px !important;
	position: relative;
	z-index: 1;
	transition: background-color 200ms ease, transform 200ms ease;
}
.mb-landing-elem-steps .process-step:hover .process-step-circle {
	background: #ECFDF5 !important;
	transform: translateY(-2px);
}
.mb-landing-elem-steps .process-step-circle-content {
	background: transparent !important;
	color: #0F766E !important;
	font-weight: 600 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}
.mb-landing-elem-steps .process-step-circle-content i {
	color: #0F766E !important;
	font-size: 22px !important;
	margin: 0 !important;
}
.mb-landing-elem-steps .step-item-title {
	font-family: 'Lexend', -apple-system, sans-serif !important;
	font-size: 1.15rem !important;
	font-weight: 600 !important;
	color: #0F172A !important;
	margin: 0 0 10px !important;
	line-height: 1.3 !important;
	letter-spacing: -0.01em !important;
}
.mb-landing-elem-steps .process-step-desc {
	font-size: 0.92rem !important;
	line-height: 1.55 !important;
	color: #475569 !important;
	margin: 0 !important;
	max-width: 200px;
}
/* Center the eyebrow + H2 above the steps to mirror /features/ alignment */
.mb-landing-elem-steps > .e-con-inner > .elementor-widget-heading {
	text-align: center !important;
}
.mb-landing-elem-steps > .e-con-inner > .elementor-widget-heading .elementor-heading-title {
	display: inline-block !important;
}
@media (max-width: 900px) {
	.mb-landing-elem-steps .process-step {
		flex: 1 1 100% !important;
		max-width: 100% !important;
		margin-bottom: 32px;
	}
	.mb-landing-elem-steps .process-step:not(:last-child)::after {
		display: none;  /* hide horizontal connectors on stacked layout */
	}
}

/* === Features 3-col cards — porto_info_box on slate-50 bg === */
.mb-landing-elem-features.mb-landing-elem-features {
	background: #F8FAFC !important;
	padding: 4rem 1.5rem 4rem !important;
}
.mb-landing-elem-features > .e-con-inner {
	width: 100% !important;
	max-width: 1195px !important;
	margin: 0 auto !important;
}
/* The single inner row that holds the 3 cards: force flex-row */
.mb-landing-elem-features > .e-con-inner > .e-con.e-child {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	align-items: stretch !important;
	gap: 20px !important;
	background: transparent !important;
	padding: 0 !important;
	width: 100% !important;
}
/* Individual card columns (children of the row) */
.mb-landing-elem-features > .e-con-inner > .e-con.e-child > .e-con.e-child {
	flex: 1 1 280px !important;
	max-width: calc((100% - 40px) / 3) !important;
	min-width: 240px !important;
	transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.mb-landing-elem-features > .e-con-inner > .e-con.e-child > .e-con.e-child:hover {
	transform: translateY(-2px);
	border-color: rgba(15, 118, 110, 0.25) !important;
	box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08) !important;
}
@media (max-width: 900px) {
	.mb-landing-elem-features > .e-con-inner > .e-con.e-child > .e-con.e-child {
		max-width: 100% !important;
		flex: 1 1 100% !important;
	}
}
/* porto_info_box internals — icon-on-top, left-aligned.
   Porto's actual DOM: .porto-sicon-box > .porto-sicon-top (icon wrap)
   + .porto-sicon-header > .porto-sicon-title + .porto-sicon-description */
.mb-landing-elem-features .porto-sicon-box {
	text-align: left !important;
}
.mb-landing-elem-features .porto-sicon-top {
	margin-bottom: 16px !important;
}
.mb-landing-elem-features .porto-sicon-top i,
.mb-landing-elem-features .porto-just-icon-wrapper i {
	color: #0F766E !important;
	font-size: 22px !important;
}
.mb-landing-elem-features .porto-sicon-title {
	font-family: 'Lexend', -apple-system, sans-serif !important;
	font-size: 1.12rem !important;
	font-weight: 600 !important;
	color: #0F172A !important;
	margin: 0 0 10px !important;
	line-height: 1.3 !important;
}
.mb-landing-elem-features .porto-sicon-description {
	font-size: 0.95rem !important;
	line-height: 1.6 !important;
	color: #475569 !important;
	margin: 0 !important;
}

/* Also fix the related-section info_box cards (same class names) */
.mb-landing-elem-related .porto-sicon-box {
	text-align: left !important;
}
.mb-landing-elem-related .porto-sicon-top i {
	color: #0F766E !important;
	font-size: 18px !important;
}
.mb-landing-elem-related .porto-sicon-title {
	font-family: 'Lexend', -apple-system, sans-serif !important;
	font-size: 1.05rem !important;
	font-weight: 600 !important;
	color: #0F172A !important;
	margin: 0 0 6px !important;
}
.mb-landing-elem-related .porto-sicon-description {
	font-size: 0.9rem !important;
	line-height: 1.55 !important;
	color: #64748B !important;
	margin: 0 !important;
}

/* Final CTA button — left aligned + brand-teal background so it pops on
   the dark navy bg. Without this override Porto's "light" skin renders as
   white-ish which can fade on certain monitors; brand-teal is unambiguous. */
.mb-landing-elem-final-cta .elementor-widget-porto_button,
.mb-landing-elem-final .elementor-widget-porto_button {
	text-align: left !important;
}
.mb-landing-elem-final-cta .elementor-widget-porto_button .elementor-widget-container,
.mb-landing-elem-final .elementor-widget-porto_button .elementor-widget-container {
	text-align: left !important;
}
.mb-landing-elem-final-cta .btn,
.mb-landing-elem-final .btn {
	background-color: #0F766E !important;
	color: #FFFFFF !important;
	border-color: #0F766E !important;
	padding: 14px 26px !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	transition: background-color 180ms ease, transform 180ms ease, box-shadow 180ms ease !important;
}
.mb-landing-elem-final-cta .btn:hover,
.mb-landing-elem-final .btn:hover {
	background-color: #115E59 !important;
	color: #FFFFFF !important;
	transform: translateY(-1px);
	box-shadow: 0 12px 28px rgba(15, 118, 110, 0.4) !important;
}

/* === Body section — split into multiple alternating-bg containers ===
   Each H2-section is its own root container with full-width bg (#FFFFFF or
   #F8FAFC) and a centered 760px reading column. Mirrors /home/ and /features/
   which have 7-15 root sections with alternating slate-50 backgrounds.
   Programmatically-saved containers don't get per-post CSS for bg-color, so
   we paint via class fallback here. */
.mb-landing-elem-body.mb-landing-elem-body {
	padding: 3.5rem 1.5rem 3.5rem !important;
}
.mb-landing-elem-body-main.mb-landing-elem-body-main {
	background: #FFFFFF !important;
}
.mb-landing-elem-body-alt.mb-landing-elem-body-alt {
	background: #F8FAFC !important;
}
.mb-landing-elem-faq.mb-landing-elem-faq {
	background: #F8FAFC !important;
}
.mb-landing-elem-body > .e-con-inner {
	display: flex !important;
	flex-direction: column !important;
	width: 100% !important;
	max-width: 760px !important;
	margin: 0 auto !important;
	box-sizing: border-box !important;
}
/* Sections containing a card grid use a wider container so 2-3 cols fit. */
.mb-landing-elem-body-wide > .e-con-inner {
	max-width: 1100px !important;
}

/* 2-col icon-list — Elementor's flex calc with 50%+50%+gap overflows and
   wraps to single column. Force flex:1 0 calc(50% - 8px) so they fit. */
.mb-landing-elem-body .e-con-inner > .e-con.e-child:has(> .e-con.e-child .elementor-widget-icon-list + .e-con.e-child .elementor-widget-icon-list),
.mb-landing-elem-body .e-flex.e-con:has(> .e-con > .elementor-widget-icon-list) {
	flex-direction: row !important;
	flex-wrap: wrap !important;
	gap: 16px !important;
	width: 100% !important;
}
.mb-landing-elem-body .e-flex.e-con:has(> .e-con > .elementor-widget-icon-list) > .e-con.e-child {
	flex: 1 1 calc(50% - 10px) !important;
	max-width: calc(50% - 10px) !important;
	width: auto !important;
	min-width: 240px !important;
	padding: 0 !important;
}
@media (max-width: 760px) {
	.mb-landing-elem-body .e-flex.e-con:has(> .e-con > .elementor-widget-icon-list) > .e-con.e-child {
		flex: 1 1 100% !important;
		max-width: 100% !important;
	}
}

/* Card grid inside body — h3p_card_grid renders porto_info_box cards in
   a flex row. Force 2-col at 760px containers, 3-col at 1100px wide containers. */
.mb-landing-elem-body .e-flex.e-con:has(> .e-con .elementor-widget-porto_info_box) {
	flex-direction: row !important;
	flex-wrap: wrap !important;
	gap: 16px !important;
	width: 100% !important;
	justify-content: flex-start !important;
}
.mb-landing-elem-body:not(.mb-landing-elem-body-wide) .e-flex.e-con:has(> .e-con .elementor-widget-porto_info_box) > .e-con.e-child {
	flex: 1 1 calc(50% - 8px) !important;
	max-width: calc(50% - 8px) !important;
}
.mb-landing-elem-body-wide .e-flex.e-con:has(> .e-con .elementor-widget-porto_info_box) > .e-con.e-child {
	flex: 1 1 calc(33.333% - 12px) !important;
	max-width: calc(33.333% - 12px) !important;
	min-width: 240px !important;
}
@media (max-width: 760px) {
	.mb-landing-elem-body .e-flex.e-con:has(> .e-con .elementor-widget-porto_info_box) > .e-con.e-child {
		flex: 1 1 100% !important;
		max-width: 100% !important;
	}
}
/* Card hover lift for the body card grids */
.mb-landing-elem-body .e-flex.e-con:has(> .e-con .elementor-widget-porto_info_box) > .e-con.e-child {
	transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.mb-landing-elem-body .e-flex.e-con:has(> .e-con .elementor-widget-porto_info_box) > .e-con.e-child:hover {
	transform: translateY(-2px);
	border-color: rgba(15, 118, 110, 0.25) !important;
	box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08) !important;
}
.mb-landing-elem-body > .e-con-inner > * + * {
	margin-top: 1.2rem;
}
/* H2 — no border-bottom now that each H2 is in its own section box */
.mb-landing-elem-body h2 {
	font-family: 'Lexend', -apple-system, sans-serif;
	font-size: 1.95rem !important;
	line-height: 1.2 !important;
	letter-spacing: -0.02em !important;
	color: #0F172A !important;
	margin: 0 0 1.4rem !important;
	padding-bottom: 0 !important;
	border-bottom: 0 !important;
	font-weight: 600 !important;
}
/* Eyebrow label above each H2 — span element renders the eyebrow
   (porto_button helper sets header_size=span, so the widget output is a span). */
.mb-landing-elem-body span.elementor-heading-title,
.mb-landing-elem-steps span.elementor-heading-title {
	font-family: 'Lexend', -apple-system, sans-serif !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 1.5px !important;
	text-transform: uppercase !important;
	color: #0F766E !important;
	display: block !important;
	margin-bottom: 0.5rem !important;
}
.mb-landing-elem-body h3 {
	font-size: 1.15rem !important;
	color: #0F172A !important;
	margin-top: 1.5rem !important;
	margin-bottom: 0.5rem !important;
	font-weight: 700 !important;
}
.mb-landing-elem-body .elementor-widget-text-editor p {
	font-size: 1rem;
	line-height: 1.75;
	color: #334155;
	margin: 0 0 1rem;
}
.mb-landing-elem-body p strong { color: #0F172A; font-weight: 700; }
.mb-landing-elem-body p em { color: #475569; font-style: italic; }
.mb-landing-elem-body a {
	color: #0F766E;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid rgba(15, 118, 110, 0.3);
}
.mb-landing-elem-body a:hover { border-bottom-color: #0F766E; }

/* Icon-list bullets — brand teal checks */
.mb-landing-elem-body .elementor-icon-list-icon {
	color: #0F766E;
}
.mb-landing-elem-body .elementor-icon-list-item {
	border-bottom: 1px dashed #F1F5F9;
	padding: 10px 0 !important;
}
.mb-landing-elem-body .elementor-icon-list-item:last-child {
	border-bottom: 0;
}
.mb-landing-elem-body .elementor-icon-list-text {
	color: #334155 !important;
	font-size: 1rem;
	line-height: 1.65;
}

/* === Related cards 4-col grid =====================================
   The related section is e-con-full with mixed direct children:
     - heading widgets (badge + h2)
     - card containers (porto_info_box wrappers, 4 of them)
   We need the LAST direct e-con (which contains the cards) to flex-row. */
.mb-landing-elem-related.mb-landing-elem-related {
	background: #F8FAFC !important;
	padding: 4rem 1.5rem 4.5rem !important;
}
.mb-landing-elem-related .e-con.e-child:has(> .e-con.e-child + .e-con.e-child) {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	align-items: stretch !important;
	gap: 18px !important;
	width: 100% !important;
	max-width: 980px !important;
	margin: 32px auto 0 !important;
	background: transparent !important;
	padding: 0 !important;
}
.mb-landing-elem-related .e-con.e-child:has(> .e-con.e-child + .e-con.e-child) > .e-con.e-child {
	flex: 1 1 220px !important;
	max-width: 240px !important;
	min-width: 200px !important;
	transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.mb-landing-elem-related .e-con.e-child:has(> .e-con.e-child + .e-con.e-child) > .e-con.e-child:hover {
	transform: translateY(-2px);
	border-color: rgba(15, 118, 110, 0.25) !important;
}

/* === Final CTA — match Home dark-CTA pattern.
   Programmatically-saved bg doesn't get per-post CSS, so we paint via class. */
.mb-landing-elem-final-cta.mb-landing-elem-final-cta,
.mb-landing-elem-final.mb-landing-elem-final {
	background: #0F172A !important;
	padding: 6rem 2rem 5rem !important;
}
.mb-landing-elem-final-cta > .e-con-inner,
.mb-landing-elem-final > .e-con-inner {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	width: 100% !important;
	max-width: 1195px !important;
	margin: 0 auto !important;
}
/* White-pill badge inside the final CTA — first heading widget child */
.mb-landing-elem-final-cta > .e-con-inner > .elementor-widget-heading:first-of-type .elementor-heading-title,
.mb-landing-elem-final > .e-con-inner > .elementor-widget-heading:first-of-type .elementor-heading-title {
	display: inline-block;
	background: #FFFFFF;
	color: #115E59 !important;
	padding: 4px 1.25rem;
	border-radius: 1rem;
	font-family: 'Lexend', -apple-system, sans-serif;
	font-size: 0.875rem !important;
	font-weight: 500 !important;
	line-height: 1.7;
}
/* The H2 inside final-cta must be white (Elementor's title_color setting
   doesn't generate CSS for programmatic saves). */
.mb-landing-elem-final-cta > .e-con-inner > .elementor-widget-heading:nth-of-type(2) .elementor-heading-title,
.mb-landing-elem-final > .e-con-inner > .elementor-widget-heading:nth-of-type(2) .elementor-heading-title {
	color: #FFFFFF !important;
	font-family: 'Lexend', -apple-system, sans-serif;
	font-size: 2.6rem;
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.04em;
	max-width: 720px;
}
@media (max-width: 760px) {
	.mb-landing-elem-final-cta > .e-con-inner > .elementor-widget-heading:nth-of-type(2) .elementor-heading-title,
	.mb-landing-elem-final > .e-con-inner > .elementor-widget-heading:nth-of-type(2) .elementor-heading-title {
		font-size: 1.75rem !important;
	}
}

/* === Mobile === */
@media (max-width: 760px) {
	.mb-landing-elem-hero { padding: 3rem 1rem 2rem !important; }
	.mb-landing-elem-hero h1 { font-size: 1.85rem !important; }
	.mb-landing-elem-features { padding: 2.5rem 1rem 3rem !important; }
	.mb-landing-elem-steps { padding: 3rem 1rem 3rem !important; }
	.mb-landing-elem-body { padding: 2.5rem 1rem 2.5rem !important; }
	.mb-landing-elem-body h2 { font-size: 1.5rem !important; }
	.mb-landing-elem-related { padding: 3rem 1rem 3.5rem !important; }
	.mb-landing-elem-related .e-con.e-child:has(> .e-con.e-child + .e-con.e-child) > .e-con.e-child { max-width: 100% !important; }
	.mb-landing-elem-final-cta, .mb-landing-elem-final { padding: 4rem 1.5rem 3.5rem !important; }
}