/* TSIC marketing site fixes for Laravel static delivery */

/*
 * Homepage (post 67): kit purple/pink → Tesla red; hero stays dark/red. Content sections use the
 * template’s light surfaces again — only the hero stack is intentionally dark.
 */
body.elementor-page-67 {
	--e-global-color-accent: #e82127;
	/* Was coral #ff6b6b — reads pink; use the same brand red as headings/links */
	--e-global-color-secondary: #e82127;
	--e-global-color-primary: #0a0606;
	--e-global-color-2ce8442: #b01018;
	--e-global-color-20e1f79: #2a080c;
	/* Neutral lights — no rose tint */
	--e-global-color-424db89: #f0f0f2;
	--e-global-color-8894bde: #ffffff;
	/* Readable on white/light sections (hero subcopy overrides its own widgets) */
	--e-global-color-text: #55555e;
	background-color: #ffffff;
}

.elementor-invisible {
	visibility: visible !important;
}

/* Hero: no purple BG-Gradient art — Tesla red stack only (post-67 kit loads JPG elsewhere) */
.elementor-67 .elementor-element.elementor-element-143aa98:not(.elementor-motion-effects-element-type-background),
.elementor-67 .elementor-element.elementor-element-143aa98 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
	background-color: #120204;
	background-image: linear-gradient(
		180deg,
		#050101 0%,
		#1a0508 10%,
		#4a0a12 32%,
		#9a1420 50%,
		#6a0e16 70%,
		#1a0408 90%,
		#050101 100%
	);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
}

/* Red atmosphere for homepage hero (no purple JPG layer) */
body.elementor-page-67 .elementor-67 .elementor-element.elementor-element-143aa98:not(.elementor-motion-effects-element-type-background),
body.elementor-page-67 .elementor-67 .elementor-element.elementor-element-143aa98 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
	background-color: #080102;
	background-image: linear-gradient(
			180deg,
			#050101 0%,
			#140308 8%,
			#5a0c14 30%,
			#a01824 48%,
			#e82127 52%,
			#7a1018 68%,
			#2a060c 86%,
			#050101 100%
		),
		linear-gradient(180deg, rgba(50, 6, 10, 0.96) 0%, rgba(8, 1, 2, 0.98) 100%);
	background-repeat: no-repeat, no-repeat;
	background-position: center top, center top;
	background-size: cover, cover;
}

/* Partners / chart band: light neutral (chart card stays dark in site-tesla-chart.css) */
body.elementor-page-67 .elementor-67 .elementor-element.elementor-element-47650a2:not(.elementor-motion-effects-element-type-background),
body.elementor-page-67 .elementor-67 .elementor-element.elementor-element-47650a2 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
	background-color: #f4f4f6;
	background-image: linear-gradient(180deg, #f4f4f6 0%, #fafafa 50%, #f4f4f6 100%);
}

/*
 * App promo (“Grow Exposure…”) — was purple Gradient-Background.jpg; use brand red gradient + bright copy.
 */
body.elementor-page-67 .elementor-67 .elementor-element.elementor-element-34cedb8:not(.elementor-motion-effects-element-type-background),
body.elementor-page-67 .elementor-67 .elementor-element.elementor-element-34cedb8 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
	background-color: #6a0e16;
	background-image: linear-gradient(
		165deg,
		#f02830 0%,
		#e82127 18%,
		#b81822 42%,
		#7a1018 72%,
		#42090e 100%
	);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

body.elementor-page-67 .elementor-67 .elementor-element-34cedb8 .elementor-element-0252794 .elementor-heading-title {
	color: #ffffff !important;
	text-shadow: 0 1px 22px rgba(0, 0, 0, 0.25);
}

body.elementor-page-67 .elementor-67 .elementor-element-34cedb8 .elementor-element-0c148b8 .elementor-heading-title {
	color: rgba(255, 255, 255, 0.98) !important;
	text-shadow: 0 1px 18px rgba(0, 0, 0, 0.22);
}

body.elementor-page-67 .elementor-67 #home .elementor-element-c1f1b78 .elementor-button {
	border-color: rgba(232, 33, 39, 0.95) !important;
	color: #ffffff !important;
	fill: #ffffff !important;
	/* Kit uses transparent fill — hero gradient reads as purple through the outline CTA */
	background-color: rgba(42, 8, 14, 0.94) !important;
}

body.elementor-page-67 .elementor-67 #home .elementor-element-c1f1b78 .elementor-button:hover,
body.elementor-page-67 .elementor-67 #home .elementor-element-c1f1b78 .elementor-button:focus {
	background-color: rgba(160, 10, 22, 0.92) !important;
	border-color: #ffffff !important;
	color: #ffffff !important;
	fill: #ffffff !important;
}

/* Hero copy: lock “Welcome” + subhead to true red / neutral (kit secondary/text sat on purple) */
body.elementor-page-67 .elementor-67 #home .elementor-element-19110d7 .elementor-heading-title {
	color: #e82127 !important;
}

body.elementor-page-67 .elementor-67 #home .elementor-element-d93f574 .elementor-heading-title {
	color: rgba(255, 255, 255, 0.82) !important;
}

/* Dashboard mockup: drop hue-rotate (often shifts into magenta); slight warm contrast only */
body.elementor-page-67 .elementor-67 .elementor-element-f33c12a .tsic-hero-dashboard {
	filter: contrast(1.06) saturate(0.92);
}

/* Empty state when no active plans */
.elementor-67 .elementor-element.tsic-admin-plans-empty {
	width: 100%;
	text-align: center;
}

/*
 * Admin plan cards are dark panels (#19191B). In OS/browser light color-scheme, inherited
 * or kit colors (e.g. primary on h3) can render as near-black on dark — fix with a dark
 * color-scheme island and explicit contrast.
 */
.elementor-67 .elementor-element.elementor-element-754c6ba.tsic-admin-plan-card {
	color-scheme: dark;
	color: rgba(255, 255, 255, 0.92);
}

.elementor-67 .elementor-element.elementor-element-754c6ba.tsic-admin-plan-card .elementor-element-33f13c2 .elementor-heading-title {
	color: var(--e-global-color-secondary, #e82127);
}

.elementor-67 .elementor-element.elementor-element-754c6ba.tsic-admin-plan-card .elementor-element-c83bea2 .elementor-heading-title {
	color: #ffffff;
}

.elementor-67 .elementor-element.elementor-element-754c6ba.tsic-admin-plan-card .elementor-element-159a06b .elementor-heading-title {
	color: rgba(255, 255, 255, 0.86);
}

.elementor-67 .elementor-element.elementor-element-754c6ba.tsic-admin-plan-card .elementor-element-10876f1 .elementor-icon-list-text {
	color: rgba(255, 255, 255, 0.92);
}

.elementor-67 .elementor-element.elementor-element-754c6ba.tsic-admin-plan-card .elementor-element-10876f1 .elementor-icon-list-icon svg {
	fill: var(--e-global-color-accent, #e82127);
}

/* Outline CTA: dark label on white — lock when light scheme flips global tokens */
.elementor-67 .elementor-element.elementor-element-754c6ba.tsic-admin-plan-card .elementor-element-114a007 .elementor-button {
	color: #0a0606 !important;
	background-color: #ffffff !important;
	fill: #0a0606 !important;
	border-color: transparent;
}

.elementor-67 .elementor-element.elementor-element-754c6ba.tsic-admin-plan-card .elementor-element-114a007 .elementor-button:hover,
.elementor-67 .elementor-element.elementor-element-754c6ba.tsic-admin-plan-card .elementor-element-114a007 .elementor-button:focus {
	color: #ffffff !important;
	background-color: var(--e-global-color-accent, #e82127) !important;
	fill: #ffffff !important;
}

/* Testimonials (homepage) — name, quote, country */
.elementor-67 .tsic-testimonials {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.25rem;
	width: 100%;
	max-width: 1080px;
	margin: 0.75rem auto 0;
	padding: 0;
	list-style: none;
}

.elementor-67 .tsic-testimonial-card {
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: #ffffff;
	border: 1px solid rgba(12, 4, 5, 0.08);
	border-radius: 18px;
	box-shadow: 0 14px 40px rgba(12, 4, 5, 0.06);
	display: flex;
	flex-direction: column;
	height: 100%;
	box-sizing: border-box;
}

.elementor-67 .tsic-testimonial-card__media {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: rgba(12, 4, 5, 0.06);
	flex-shrink: 0;
}

.elementor-67 .tsic-testimonial-card__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.elementor-67 .tsic-testimonial-card__quote {
	margin: 0;
	padding: 1.15rem 1.35rem 0.9rem;
	border: 0;
	flex: 1 1 auto;
}

.elementor-67 .tsic-testimonial-card__quote p {
	margin: 0;
	font-family: var(--e-global-typography-4ed8f43-font-family), "DM Sans", sans-serif;
	font-size: 0.95rem;
	font-weight: 400;
	line-height: 1.62;
	color: var(--e-global-color-primary, #0a0606);
}

.elementor-67 .tsic-testimonial-card__meta {
	margin-top: auto;
	padding: 1rem 1.35rem 1.2rem;
	border-top: 1px solid rgba(12, 4, 5, 0.07);
}

.elementor-67 .tsic-testimonial-card__who {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
}

.elementor-67 .tsic-testimonial-card__name {
	font-family: var(--e-global-typography-6b9055b-font-family), Syne, sans-serif;
	font-size: 1rem;
	font-weight: 600;
	font-style: normal;
	color: var(--e-global-color-primary, #0a0606);
	line-height: 1.25;
}

.elementor-67 .tsic-testimonial-card__country {
	font-family: var(--e-global-typography-990a8b9-font-family), "DM Sans", sans-serif;
	font-size: 0.8125rem;
	color: var(--e-global-color-text, #8b8d98);
}

@media (max-width: 600px) {
	.elementor-67 .tsic-testimonials {
		grid-template-columns: 1fr;
	}
}

/*
 * About (#about): light section (matches Elementor intent). Dark type for contrast; milestone
 * blurbs stay dark on light chips.
 */
body.elementor-page-67 .elementor-67 #about.elementor-element-d4b5764:not(.elementor-motion-effects-element-type-background),
body.elementor-page-67 .elementor-67 #about.elementor-element-d4b5764 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
	background-color: #ffffff;
	background-image: none;
}

body.elementor-page-67 .elementor-67 #about .elementor-element-43628ca .elementor-heading-title,
body.elementor-page-67 .elementor-67 #about .elementor-element-91edf39 .elementor-heading-title {
	color: var(--e-global-color-primary, #0a0606) !important;
}

body.elementor-page-67 .elementor-67 #about .elementor-element-1f426ee .elementor-heading-title,
body.elementor-page-67 .elementor-67 #about .elementor-element-tsic-elon-context .elementor-heading-title {
	color: #2f313a !important;
	line-height: 1.65;
	font-weight: 400;
}

body.elementor-page-67 .elementor-67 #about .elementor-element-c2f216e .elementor-heading-title,
body.elementor-page-67 .elementor-67 #about .elementor-element-11b9dde .elementor-heading-title,
body.elementor-page-67 .elementor-67 #about .elementor-element-7b8374f .elementor-heading-title {
	color: #1a1b1f !important;
	line-height: 1.58;
	font-weight: 400;
}

.elementor-67 #about .elementor-element-1f426ee {
	width: 100%;
	max-width: 42rem;
	margin-inline: auto;
}

/*
 * Image placeholder: Elementor flex columns can stretch widgets so this box grew to full column
 * height and the label sat over headings. Lock flex basis and give an explicit min-height.
 */
.elementor-67 #about .elementor-element-tsic-about-media-placeholder,
.elementor-67 #about .elementor-element-tsic-about-media-placeholder .elementor-widget-container {
	flex: 0 0 auto;
	align-self: center;
	width: 100%;
	max-width: 42rem;
}

.elementor-67 #about .elementor-element-tsic-about-media-placeholder .elementor-widget-container {
	display: flex;
	justify-content: center;
	margin-top: 0;
	margin-bottom: 1.5rem;
}

.elementor-67 #about .tsic-about-media-placeholder {
	width: 100%;
	max-width: 42rem;
	border-radius: 14px;
	border: 1px solid rgba(15, 15, 18, 0.12);
	background: #0c0c0e;
	box-sizing: border-box;
	display: block;
	overflow: hidden;
	position: relative;
	line-height: 0;
	flex: none;
}

.elementor-67 #about .tsic-about-media-placeholder__img {
	width: 100%;
	height: auto;
	display: block;
	vertical-align: top;
	object-fit: contain;
}

.elementor-67 #about .elementor-element-tsic-elon-context {
	text-align: left;
	width: 100%;
	max-width: 42rem;
	margin-inline: auto;
	margin-top: 1.25rem;
}

.elementor-67 #about .elementor-element-tsic-elon-context .elementor-widget-container {
	text-align: left;
}

.elementor-67 #about .elementor-element-f7977e1 {
	margin-top: 2.75rem;
}

.elementor-67 #about .elementor-element-91edf39 {
	text-align: center;
	width: 100%;
}

.elementor-67 #about .elementor-element-91edf39 .elementor-heading-title {
	width: 100%;
}