/*
 * CarAssist247 reusable components. Classes are prefixed `carassist247-`
 * and are meant to be applied to Elementor elements via the free
 * "CSS Classes" advanced-tab field, or used directly in theme templates.
 */

/* ---------- Base ---------- */

body {
	background-color: var(--ca-color-background);
	color: var(--ca-color-text);
	font-family: var(--ca-font-family);
	font-size: var(--ca-font-size-body);
	font-weight: var(--ca-font-weight-body);
	line-height: var(--ca-line-height-body);
	-webkit-font-smoothing: antialiased;
}

h1, .carassist247-h1 {
	font-size: var(--ca-font-size-h1);
	line-height: var(--ca-line-height-h1);
	letter-spacing: var(--ca-letter-spacing-h1);
	font-weight: var(--ca-font-weight-h1);
	color: var(--ca-color-text);
	margin: 0 0 var(--ca-space-sm);
}

h2, .carassist247-h2 {
	font-size: var(--ca-font-size-h2);
	line-height: var(--ca-line-height-h2);
	letter-spacing: var(--ca-letter-spacing-h2);
	font-weight: var(--ca-font-weight-h2);
	color: var(--ca-color-text);
	margin: 0 0 var(--ca-space-sm);
}

h3, .carassist247-h3 {
	font-size: var(--ca-font-size-h3);
	line-height: var(--ca-line-height-h3);
	font-weight: var(--ca-font-weight-h3);
	color: var(--ca-color-text);
	margin: 0 0 var(--ca-space-xs);
}

h4, .carassist247-h4 {
	font-size: var(--ca-font-size-h4);
	line-height: var(--ca-line-height-h4);
	font-weight: var(--ca-font-weight-h4);
	color: var(--ca-color-text);
	margin: 0 0 var(--ca-space-xs);
}

.carassist247-display {
	font-size: var(--ca-font-size-display);
	line-height: var(--ca-line-height-display);
	letter-spacing: var(--ca-letter-spacing-display);
	font-weight: var(--ca-font-weight-display);
	color: var(--ca-color-text);
	margin: 0 0 var(--ca-space-md);
}

.carassist247-small {
	font-size: var(--ca-font-size-small);
	line-height: var(--ca-line-height-small);
}

.carassist247-caption {
	font-size: var(--ca-font-size-caption);
	letter-spacing: var(--ca-letter-spacing-caption);
	color: var(--ca-color-text-muted);
}

.carassist247-text-muted {
	color: var(--ca-color-text-muted);
}

.carassist247-nums {
	font-variant-numeric: tabular-nums;
}

.carassist247-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

a { color: var(--ca-color-primary); }

/*
 * Elementor's own generated per-widget CSS
 * (.elementor-widget-heading .elementor-heading-title{margin:0;line-height:1;
 * color:var(--e-global-color-primary)...}) has higher specificity than the
 * plain `h1`-`h4` element rules above, so every Elementor-built heading was
 * losing its Phase B size/line-height/margin/color regardless of header_size
 * (h1 through h4 all rendered identically, using browser default sizing).
 * These rules match Elementor's own specificity (two classes) plus the tag,
 * which is enough to win the cascade without !important, and simply
 * reapply the same tokens the plain h1-h4 rules already use above.
 */
.elementor-widget-heading h1.elementor-heading-title {
	font-size: var(--ca-font-size-h1);
	line-height: var(--ca-line-height-h1);
	letter-spacing: var(--ca-letter-spacing-h1);
	font-weight: var(--ca-font-weight-h1);
	color: var(--ca-color-text);
	margin: 0 0 var(--ca-space-sm);
}

.elementor-widget-heading h2.elementor-heading-title {
	font-size: var(--ca-font-size-h2);
	line-height: var(--ca-line-height-h2);
	letter-spacing: var(--ca-letter-spacing-h2);
	font-weight: var(--ca-font-weight-h2);
	color: var(--ca-color-text);
	margin: 0 0 var(--ca-space-sm);
}

.elementor-widget-heading h3.elementor-heading-title {
	font-size: var(--ca-font-size-h3);
	line-height: var(--ca-line-height-h3);
	font-weight: var(--ca-font-weight-h3);
	color: var(--ca-color-text);
	margin: 0 0 var(--ca-space-xs);
}

.elementor-widget-heading h4.elementor-heading-title {
	font-size: var(--ca-font-size-h4);
	line-height: var(--ca-line-height-h4);
	font-weight: var(--ca-font-weight-h4);
	color: var(--ca-color-text);
	margin: 0 0 var(--ca-space-xs);
}

/* Consistent, visible focus state everywhere - never color alone. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.carassist247-btn:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid transparent;
	box-shadow: var(--ca-focus-ring);
	border-radius: var(--ca-radius-sm);
}

/* ---------- Layout ---------- */

.carassist247-container {
	max-width: var(--ca-container-max);
	margin-inline: auto;
	padding-inline: var(--ca-gutter);
}

.carassist247-container--reading {
	max-width: var(--ca-container-content);
	margin-inline: auto;
	padding-inline: var(--ca-gutter);
}

.carassist247-section {
	padding-block: var(--ca-space-xl);
}

.carassist247-section--alt {
	background-color: var(--ca-color-surface-alt);
}

@media (min-width: 1024px) {
	.carassist247-section {
		padding-block: var(--ca-space-2xl);
	}
}

/*
 * Phase C.5: two-column split (hero, trust/photography, service-page
 * common-situations panels, homepage areas+brands). The Elementor
 * container carrying this class already gets `flex_direction: row`
 * (desktop) / `column` (tablet+mobile) from Elementor's own settings
 * (see build script) - this class only adds the gap and equal-width
 * children, since Elementor's per-child sizing controls aren't used here.
 */
.carassist247-split {
	gap: var(--ca-space-xl);
	align-items: center;
}

.carassist247-split__col {
	flex: 1 1 0;
	min-width: 0;
}

.carassist247-split img {
	width: 100%;
	height: auto;
	border-radius: var(--ca-radius-lg);
	display: block;
}

/* ---------- Buttons ---------- */

.carassist247-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	height: 48px;
	padding: 0 var(--ca-space-md);
	border-radius: var(--ca-radius-md);
	font-family: var(--ca-font-family);
	font-size: var(--ca-font-size-button);
	font-weight: var(--ca-font-weight-button);
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	border: 2px solid transparent;
	cursor: pointer;
	transition: background-color var(--ca-transition-fast), border-color var(--ca-transition-fast), color var(--ca-transition-fast), opacity var(--ca-transition-fast), transform var(--ca-transition-fast), box-shadow var(--ca-transition-fast);
}

.carassist247-btn:disabled,
.carassist247-btn[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

/*
 * Subtle press/lift feedback (all buttons, incl. Request Service and
 * WhatsApp/Call) - existing colors/sizes/radii untouched, only motion.
 * Excluded on the internal technician page (its own operational buttons
 * are intentionally left unanimated), and on any disabled/loading state.
 */
body:not(.carassist247-technician-page) .carassist247-btn:not(:disabled):not([aria-disabled="true"]):not(.carassist247-btn--loading):hover {
	transform: translateY(-2px);
	box-shadow: var(--ca-shadow-sm);
}

body:not(.carassist247-technician-page) .carassist247-btn:not(:disabled):not([aria-disabled="true"]):not(.carassist247-btn--loading):active {
	transform: translateY(0);
}

.carassist247-btn--loading {
	position: relative;
	color: transparent !important;
	pointer-events: none;
}

.carassist247-btn--loading::after {
	content: "";
	position: absolute;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid currentColor;
	border-top-color: transparent;
	color: inherit;
	animation: carassist247-spin 700ms linear infinite;
}

@keyframes carassist247-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.carassist247-btn--loading::after {
		animation-duration: 1400ms;
	}
}

/* Primary: dominant conversion action (Request Service, form Submit/Confirm) */
.carassist247-btn--primary {
	background-color: var(--ca-color-accent);
	border-color: var(--ca-color-accent);
	color: var(--ca-color-text-on-dark);
}
.carassist247-btn--primary:hover { background-color: var(--ca-color-accent-hover); border-color: var(--ca-color-accent-hover); color: var(--ca-color-text-on-dark); }

/* Secondary: Call Now, multi-step form Next */
.carassist247-btn--secondary {
	background-color: var(--ca-color-primary);
	border-color: var(--ca-color-primary);
	color: var(--ca-color-text-on-dark);
}
.carassist247-btn--secondary:hover { background-color: var(--ca-color-primary-hover); border-color: var(--ca-color-primary-hover); color: var(--ca-color-text-on-dark); }

/* Tertiary: WhatsApp only - recognizable brand color, lighter visual weight */
.carassist247-btn--whatsapp {
	background-color: transparent;
	border-color: var(--ca-color-whatsapp);
	color: var(--ca-color-whatsapp);
}
.carassist247-btn--whatsapp:hover {
	background-color: var(--ca-color-whatsapp);
	border-color: var(--ca-color-whatsapp);
	color: var(--ca-color-text-on-dark);
}

/* Ghost: Learn More, View Service, Back */
.carassist247-btn--ghost {
	background-color: transparent;
	border-color: var(--ca-color-border);
	color: var(--ca-color-primary);
}
.carassist247-btn--ghost:hover { border-color: var(--ca-color-primary); background-color: var(--ca-color-surface-alt); }

.carassist247-btn--full { width: 100%; }
.carassist247-btn--sm { height: 40px; padding: 0 var(--ca-space-sm); font-size: var(--ca-font-size-small); }

/* ---------- Forms ---------- */

.carassist247-field { margin-bottom: var(--ca-space-md); }

.carassist247-label {
	display: block;
	font-size: var(--ca-font-size-label);
	font-weight: var(--ca-font-weight-label);
	color: var(--ca-color-text);
	margin-bottom: 0.4em;
}

.carassist247-label__optional {
	font-weight: 400;
	color: var(--ca-color-text-muted);
}

.carassist247-input,
.carassist247-select,
.carassist247-textarea {
	display: block;
	width: 100%;
	min-height: 48px;
	padding: 0.65em 0.9em;
	font-family: var(--ca-font-family);
	font-size: 1rem;
	color: var(--ca-color-text);
	background-color: var(--ca-color-surface);
	border: 1.5px solid var(--ca-color-border);
	border-radius: var(--ca-radius-sm);
	transition: border-color var(--ca-transition-fast), box-shadow var(--ca-transition-fast);
}

.carassist247-textarea { min-height: 120px; resize: vertical; }

.carassist247-input:focus-visible,
.carassist247-select:focus-visible,
.carassist247-textarea:focus-visible {
	border-color: var(--ca-color-focus);
	box-shadow: var(--ca-focus-ring);
	outline: none;
}

.carassist247-input[disabled],
.carassist247-select[disabled],
.carassist247-textarea[disabled] {
	background-color: var(--ca-color-surface-alt);
	color: var(--ca-color-text-muted);
	cursor: not-allowed;
}

.carassist247-input--error,
.carassist247-select--error,
.carassist247-textarea--error {
	border-color: var(--ca-color-error);
}

.carassist247-field-message {
	display: flex;
	align-items: flex-start;
	gap: 0.4em;
	font-size: var(--ca-font-size-small);
	margin-top: 0.4em;
}

.carassist247-field-message--error { color: var(--ca-color-error); }
.carassist247-field-message--success { color: var(--ca-color-success); }

.carassist247-checkbox-row,
.carassist247-radio-row {
	display: flex;
	align-items: center;
	gap: 0.6em;
	min-height: 44px;
}

.carassist247-checkbox-row input,
.carassist247-radio-row input {
	width: 20px;
	height: 20px;
	accent-color: var(--ca-color-primary);
}

.carassist247-file-upload {
	display: flex;
	flex-direction: column;
	gap: var(--ca-space-xs);
	padding: var(--ca-space-md);
	border: 1.5px dashed var(--ca-color-border);
	border-radius: var(--ca-radius-md);
	background-color: var(--ca-color-surface-alt);
	text-align: center;
}

/* ---------- Cards ---------- */

.carassist247-card {
	background-color: var(--ca-color-surface);
	border: 1px solid var(--ca-color-border);
	border-radius: var(--ca-radius-md);
	box-shadow: var(--ca-shadow-sm);
	padding: var(--ca-space-md);
	transition: box-shadow var(--ca-transition-base), transform var(--ca-transition-base);
}

/* Service card */
.carassist247-service-card {
	display: flex;
	flex-direction: column;
	gap: var(--ca-space-xs);
	text-decoration: none;
	color: inherit;
}

.carassist247-service-card:hover {
	box-shadow: var(--ca-shadow-md);
	transform: translateY(-4px);
}

.carassist247-service-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--ca-radius-sm);
	background-color: var(--ca-color-surface-alt);
	color: var(--ca-color-primary);
	font-size: 1.25rem;
	transition: transform var(--ca-transition-base);
}

.carassist247-service-card:hover .carassist247-service-card__icon {
	transform: scale(1.06);
}

.carassist247-service-card__title {
	font-size: var(--ca-font-size-h4);
	font-weight: var(--ca-font-weight-h4);
	color: var(--ca-color-text);
	/* Service names vary a lot in length ("Battery Testing" vs "Tyre
	   Puncture Assistance"); without a clamp, cards in the same grid row
	   end up with wildly different title heights and the description
	   starts at a different point in each card. */
	display: -webkit-box;
	line-clamp: 2;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.carassist247-service-card__desc {
	color: var(--ca-color-text-muted);
	font-size: var(--ca-font-size-small);
	display: -webkit-box;
	line-clamp: 3;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.carassist247-service-card__more {
	margin-top: auto;
	padding-top: var(--ca-space-xs);
	font-size: var(--ca-font-size-small);
	font-weight: 600;
	color: var(--ca-color-primary);
}

.carassist247-service-card:hover .carassist247-service-card__more {
	color: var(--ca-color-accent);
}

/* Area / brand chip card (service areas, car brands) */
.carassist247-chip-card {
	display: flex;
	align-items: center;
	gap: var(--ca-space-xs);
	padding: var(--ca-space-sm);
	background-color: var(--ca-color-surface);
	border: 1px solid var(--ca-color-border);
	border-radius: var(--ca-radius-md);
	text-decoration: none;
	color: var(--ca-color-text);
	font-weight: 600;
}

.carassist247-chip-card:hover {
	border-color: var(--ca-color-primary);
}

/* Trust component */
.carassist247-trust-item {
	display: flex;
	align-items: flex-start;
	gap: var(--ca-space-xs);
	padding-block: var(--ca-space-xs);
}

.carassist247-trust-item__icon {
	flex: none;
	color: var(--ca-color-primary);
	font-size: 1.25rem;
}

/*
 * Phase C.5: Why Choose Us reads as a credible checklist, not a
 * feature-card grid - wider tracks (fewer, denser columns) and a smaller
 * icon than the default .carassist247-card-grid, no card chrome
 * (border/shadow/bg) since .carassist247-trust-item never had any.
 */
.carassist247-card-grid--checklist {
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	row-gap: 0;
	column-gap: var(--ca-space-lg);
}

.carassist247-card-grid--checklist .carassist247-trust-item__icon {
	font-size: 1rem;
}

.carassist247-card-grid--checklist .carassist247-trust-item .carassist247-icon {
	width: 18px;
	height: 18px;
}

/* ---------- CTA block ---------- */

.carassist247-cta {
	background-color: var(--ca-color-primary);
	color: var(--ca-color-text-on-dark);
	border-radius: var(--ca-radius-lg);
	padding: var(--ca-space-lg) var(--ca-space-md);
	text-align: center;
}

.carassist247-cta h2,
.carassist247-cta .carassist247-h2 {
	color: var(--ca-color-text-on-dark);
}

/*
 * The Elementor-heading-widget fix added elsewhere in this file
 * (`.elementor-widget-heading h2.elementor-heading-title`) has higher
 * specificity than the plain rule above, so it would otherwise win here
 * and render dark Text-colored headings on this dark navy card (broken
 * contrast). This also applies the Phase C.5 Display-size treatment for
 * a stronger closing moment on the final CTA.
 */
.carassist247-cta .elementor-widget-heading h2.elementor-heading-title {
	color: var(--ca-color-text-on-dark);
	font-size: var(--ca-font-size-display);
	line-height: var(--ca-line-height-display);
	letter-spacing: var(--ca-letter-spacing-display);
	font-weight: var(--ca-font-weight-display);
	margin: 0 0 var(--ca-space-sm);
}

.carassist247-cta p {
	color: rgba(255, 255, 255, 0.85);
	margin: 0 0 var(--ca-space-md);
}

.carassist247-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ca-space-xs);
	justify-content: center;
}

/* On a dark CTA the ghost/whatsapp buttons need light-friendly variants */
.carassist247-cta .carassist247-btn--ghost {
	border-color: rgba(255, 255, 255, 0.5);
	color: var(--ca-color-text-on-dark);
}
.carassist247-cta .carassist247-btn--ghost:hover {
	background-color: rgba(255, 255, 255, 0.1);
	border-color: var(--ca-color-text-on-dark);
}

.carassist247-key-facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ca-space-xs);
	margin: 0 0 var(--ca-space-md);
	padding: 0;
	list-style: none;
}

.carassist247-key-facts li {
	padding: 0.35em 0.85em;
	border: 1px solid var(--ca-color-border);
	border-radius: var(--ca-radius-pill);
	background-color: var(--ca-color-surface-alt);
	color: var(--ca-color-primary);
	font-size: var(--ca-font-size-small);
	font-weight: 600;
	line-height: 1.3;
}

/* Secondary is navy, the same color as this card, so invert it here */
.carassist247-cta .carassist247-btn--secondary {
	background-color: var(--ca-color-surface);
	border-color: var(--ca-color-surface);
	color: var(--ca-color-primary);
}
.carassist247-cta .carassist247-btn--secondary:hover {
	background-color: var(--ca-color-surface-alt);
	border-color: var(--ca-color-surface-alt);
	color: var(--ca-color-primary);
}

/* ---------- FAQ accordion ---------- */

.carassist247-faq { border-top: 1px solid var(--ca-color-border); }

.carassist247-faq-item { border-bottom: 1px solid var(--ca-color-border); }

.carassist247-faq-item__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ca-space-sm);
	width: 100%;
	padding: var(--ca-space-sm) 0;
	background: none;
	border: none;
	text-align: left;
	font-size: 1rem;
	font-weight: 600;
	color: var(--ca-color-text);
	cursor: pointer;
}

.carassist247-faq-item__icon {
	flex: none;
	transition: transform var(--ca-transition-base);
}

.carassist247-faq-item__question[aria-expanded="true"] .carassist247-faq-item__icon {
	transform: rotate(180deg);
}

.carassist247-faq-item__answer {
	overflow: hidden;
	max-height: 0;
	transition: max-height var(--ca-transition-base);
	color: var(--ca-color-text-muted);
}

.carassist247-faq-item__answer[data-open="true"] {
	max-height: 60em;
	padding-bottom: var(--ca-space-sm);
}

/* ---------- Breadcrumb (Phase C addition - gap-fill, existing tokens only) ---------- */

.carassist247-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4em;
	font-size: var(--ca-font-size-small);
	color: var(--ca-color-text-muted);
	margin-bottom: var(--ca-space-sm);
}

.carassist247-breadcrumb a {
	color: var(--ca-color-text-muted);
	text-decoration: none;
}

.carassist247-breadcrumb a:hover { color: var(--ca-color-primary); }

.carassist247-breadcrumb__sep { color: var(--ca-color-border); }

.carassist247-breadcrumb__current { color: var(--ca-color-text); font-weight: 600; }

/* ---------- Reusable responsive grid for repeating cards/chips ---------- */

.carassist247-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--ca-space-sm);
}

.carassist247-card-grid--chips {
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

/* ---------- Numbered step (How It Works) ---------- */

/*
 * Phase C.5: a dedicated grid (not the generic .carassist247-card-grid)
 * so a restrained connector line can run between the numbered circles at
 * desktop, making the 4 steps read as one process instead of four
 * unrelated cards. Stacks to one column below tablet.
 */
.carassist247-steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--ca-space-md);
}

@media (max-width: 767px) {
	.carassist247-steps {
		grid-template-columns: 1fr;
	}
}

.carassist247-step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ca-space-xs);
}

.carassist247-step__number {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--ca-radius-pill);
	background-color: var(--ca-color-primary);
	color: var(--ca-color-text-on-dark);
	font-weight: 700;
}

@media (min-width: 768px) {
	.carassist247-steps .carassist247-step:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 19px;
		left: 40px;
		right: calc(-1 * var(--ca-space-md));
		height: 2px;
		background-color: var(--ca-color-border);
	}
}

/* ---------- Contact details list ---------- */

.carassist247-contact-details {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--ca-space-sm);
}

.carassist247-contact-details li {
	padding: var(--ca-space-sm);
	background-color: var(--ca-color-surface);
	border: 1px solid var(--ca-color-border);
	border-radius: var(--ca-radius-md);
}

.carassist247-contact-details strong {
	display: block;
	font-size: var(--ca-font-size-small);
	color: var(--ca-color-text-muted);
	margin-bottom: 0.2em;
}

/* ---------- Legal-page notice banner ---------- */

.carassist247-notice {
	display: flex;
	gap: var(--ca-space-xs);
	background-color: rgba(202, 138, 4, 0.1);
	border: 1px solid rgba(202, 138, 4, 0.3);
	color: var(--ca-color-text);
	border-radius: var(--ca-radius-md);
	padding: var(--ca-space-sm);
	font-size: var(--ca-font-size-small);
}

/* ---------- Status badges (New / Assigned / On The Way / Arrived / Service Started / Completed / Cancelled) ---------- */

.carassist247-status {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.3em 0.8em;
	border-radius: var(--ca-radius-pill);
	font-size: var(--ca-font-size-small);
	font-weight: 600;
	border: 1px solid transparent;
}

.carassist247-status--new { background-color: var(--ca-color-surface-alt); color: var(--ca-color-secondary); border-color: var(--ca-color-border); }
.carassist247-status--assigned { background-color: rgba(47, 111, 237, 0.1); color: var(--ca-color-focus); border-color: rgba(47, 111, 237, 0.3); }
.carassist247-status--on-the-way { background-color: rgba(194, 87, 10, 0.1); color: var(--ca-color-accent); border-color: rgba(194, 87, 10, 0.3); }
.carassist247-status--arrived { background-color: rgba(202, 138, 4, 0.12); color: var(--ca-color-warning); border-color: rgba(202, 138, 4, 0.3); }
.carassist247-status--service-started { background-color: rgba(22, 41, 77, 0.08); color: var(--ca-color-primary); border-color: rgba(22, 41, 77, 0.25); }
.carassist247-status--completed { background-color: rgba(31, 157, 85, 0.1); color: var(--ca-color-success); border-color: rgba(31, 157, 85, 0.3); }
.carassist247-status--cancelled { background-color: rgba(220, 38, 38, 0.1); color: var(--ca-color-error); border-color: rgba(220, 38, 38, 0.3); }

/* ---------- Phase D1: Request Service form ---------- */

.carassist247-request-form-wrap {
	max-width: var(--ca-container-content);
	margin-inline: auto;
}

/* Compact stepper - deliberately not the marketing .carassist247-steps
   component (that one carries a connector line + descriptions sized for
   content sections, too heavy for a form header). */
.carassist247-form-progress {
	display: flex;
	justify-content: space-between;
	list-style: none;
	margin: 0 0 var(--ca-space-lg);
	padding: 0;
	gap: var(--ca-space-xs);
}

.carassist247-form-progress__step {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3em;
	text-align: center;
	color: var(--ca-color-text-muted);
}

.carassist247-form-progress__step span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: var(--ca-radius-pill);
	background-color: var(--ca-color-surface-alt);
	border: 1px solid var(--ca-color-border);
	font-size: var(--ca-font-size-small);
	font-weight: 700;
}

.carassist247-form-progress__step em {
	font-style: normal;
	font-size: var(--ca-font-size-caption);
}

.carassist247-form-progress__step.is-active span {
	background-color: var(--ca-color-primary);
	border-color: var(--ca-color-primary);
	color: var(--ca-color-text-on-dark);
}

.carassist247-form-progress__step.is-active em,
.carassist247-form-progress__step.is-done em {
	color: var(--ca-color-text);
}

.carassist247-form-progress__step.is-done span {
	background-color: var(--ca-color-success);
	border-color: var(--ca-color-success);
	color: var(--ca-color-text-on-dark);
}

@media (max-width: 430px) {
	.carassist247-form-progress__step em { display: none; }
}

.carassist247-form-step {
	border: none;
	margin: 0 0 var(--ca-space-md);
	padding: 0;
}

.carassist247-form-step legend {
	padding: 0;
	margin-bottom: var(--ca-space-sm);
	width: 100%;
}

.carassist247-form-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--ca-space-xs);
	margin-top: var(--ca-space-md);
}

.carassist247-form-row {
	display: flex;
	flex-direction: column;
	gap: 0;
}

@media (min-width: 600px) {
	.carassist247-form-row {
		flex-direction: row;
		gap: var(--ca-space-sm);
	}

	.carassist247-form-row .carassist247-field {
		flex: 1 1 0;
		min-width: 0;
	}
}

/* Honeypot - visually hidden but still reachable/labelled for assistive
   tech that ignores CSS, so it never traps a real keyboard user; real
   visitors never see or need to interact with it. */
.carassist247-honeypot {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.carassist247-photo-preview {
	list-style: none;
	margin: var(--ca-space-xs) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--ca-space-xs);
}

.carassist247-photo-preview li {
	display: flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.4em 0.7em;
	background-color: var(--ca-color-surface-alt);
	border: 1px solid var(--ca-color-border);
	border-radius: var(--ca-radius-sm);
	font-size: var(--ca-font-size-small);
}

.carassist247-photo-preview button {
	background: none;
	border: none;
	color: var(--ca-color-error);
	cursor: pointer;
	font-weight: 700;
	padding: 0;
	line-height: 1;
}

.carassist247-review {
	margin: 0 0 var(--ca-space-md);
}

.carassist247-review > div {
	display: flex;
	justify-content: space-between;
	gap: var(--ca-space-sm);
	padding: var(--ca-space-xs) 0;
	border-bottom: 1px solid var(--ca-color-border);
}

.carassist247-review dt {
	color: var(--ca-color-text-muted);
	font-size: var(--ca-font-size-small);
	flex: 0 0 auto;
}

.carassist247-review dd {
	margin: 0;
	text-align: right;
	font-weight: 600;
}

.carassist247-review__edit {
	background: none;
	border: none;
	color: var(--ca-color-primary);
	font-size: var(--ca-font-size-small);
	font-weight: 600;
	cursor: pointer;
	padding: 0;
	margin-left: var(--ca-space-xs);
}

.carassist247-confirmation {
	max-width: var(--ca-container-content);
	margin-inline: auto;
	text-align: center;
	background-color: var(--ca-color-surface);
	border: 1px solid var(--ca-color-border);
	border-radius: var(--ca-radius-lg);
	padding: var(--ca-space-lg) var(--ca-space-md);
}

.carassist247-confirmation__ref {
	font-size: var(--ca-font-size-h3);
	font-weight: 700;
	color: var(--ca-color-primary);
}

/* ---------- Contact Us: general enquiry form ---------- */
/* Sits inside a .carassist247-split__col on the Contact page - that
   column already constrains its width, so this wrap needs no max-width
   of its own, just field/crosslink spacing. */

.carassist247-contact-form-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--ca-space-md);
}

.carassist247-contact-form-crosslink {
	margin: 0;
}

.carassist247-contact-form-crosslink a {
	margin-inline-start: 0.35em;
	color: var(--ca-color-primary);
	font-weight: 600;
	text-decoration: none;
}

.carassist247-contact-form-crosslink a:hover { text-decoration: underline; }

/* ---------- Phase D3: Technician dashboard ---------- */

.carassist247-tech-dashboard {
	max-width: var(--ca-container-content);
	margin-inline: auto;
	padding: var(--ca-space-md) var(--ca-gutter) var(--ca-space-xl);
}

.carassist247-tech-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--ca-space-sm);
	margin-bottom: var(--ca-space-md);
}

.carassist247-tech-logout {
	flex: none;
	font-size: var(--ca-font-size-small);
	color: var(--ca-color-text-muted);
	text-decoration: underline;
	padding: 0.5em; /* comfortable tap target without shifting layout */
}

.carassist247-job-list {
	display: flex;
	flex-direction: column;
	gap: var(--ca-space-sm);
}

.carassist247-job-card {
	display: block;
	text-decoration: none;
	color: inherit;
}

.carassist247-job-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ca-space-sm);
	margin-bottom: 0.3em;
}

.carassist247-job-card__service {
	font-weight: 600;
	margin-bottom: 0.2em;
}

/* Status action: deliberately a large, un-missable inline button near the
   top of the job (not tucked into the fixed bar below, so a state change
   is never one accidental tap away while scrolling). */
.carassist247-tech-status-btn {
	margin-block: var(--ca-space-sm);
}

/* Fixed contact/navigation bar - separate from the public site's
   .carassist247-mobile-bar (Call/Request/WhatsApp for the business),
   since this bar's destinations are this specific customer/job, not the
   company. Same layout convention (fixed, hidden at desktop) reused. */
.carassist247-tech-actions {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 9998;
	display: flex;
	background-color: var(--ca-color-surface);
	border-top: 1px solid var(--ca-color-border);
	box-shadow: var(--ca-shadow-lg);
	padding-bottom: env(safe-area-inset-bottom, 0);
}

.carassist247-tech-actions__item {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	padding: 0.6em 0.4em;
	font-family: var(--ca-font-family);
	font-size: 0.875rem;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	color: var(--ca-color-primary);
	border-inline-end: 1px solid var(--ca-color-border);
}

.carassist247-tech-actions__item:last-child { border-inline-end: none; }

.carassist247-tech-actions__item--whatsapp { color: var(--ca-color-whatsapp); }

.carassist247-tech-actions__item[aria-disabled="true"] {
	color: var(--ca-color-text-muted);
	opacity: 0.55;
	cursor: not-allowed;
}

@media (min-width: 1024px) {
	.carassist247-tech-actions { display: none; }
}

body.carassist247-has-tech-bar {
	padding-bottom: 64px;
}

@media (min-width: 1024px) {
	body.carassist247-has-tech-bar { padding-bottom: 0; }
}

/* ---------- Motion: homepage hero entrance + scroll reveal ---------- */
/*
 * Entirely wrapped in prefers-reduced-motion: no-preference, so a
 * reduced-motion visitor gets none of this - content is simply visible
 * immediately, with no hidden starting state and no JS dependency.
 *
 * Selectors deliberately avoid Elementor's auto-generated element IDs
 * and don't require any change to Elementor content: the hero targets
 * use Elementor's own stable semantic widget classes plus the
 * WordPress-guaranteed body.home class; scroll-reveal targets use the
 * existing card-grid/steps/section-heading/CTA classes already present
 * on every page.
 */
@media (prefers-reduced-motion: no-preference) {

	@keyframes carassist247-rise-in {
		from { opacity: 0; transform: translateY(var(--carassist247-rise, 16px)); }
		to   { opacity: 1; transform: translateY(0); }
	}

	@keyframes carassist247-scale-in {
		from { opacity: 0; transform: scale(0.98); }
		to   { opacity: 1; transform: scale(1); }
	}

	/* Hero entrance - homepage only, first section only (the hero's own
	   h1 makes "first section" unambiguous even without body.home, but
	   both are used together for safety). Uses --ca-transition-slow, not
	   -base: this used to share -base with card hover/FAQ, but a hero
	   entrance and a hover state need very different speeds, so it's
	   anchored to the slower token instead (the same one scroll reveal
	   uses, just below) - movement distances (--carassist247-rise, the
	   scale-in amount) are unchanged, only the duration/stagger. */
	body.home .carassist247-section:first-of-type h1 {
		--carassist247-rise: 16px;
		animation: carassist247-rise-in var(--ca-transition-slow) both;
	}

	body.home .carassist247-section:first-of-type .elementor-widget-heading + .elementor-widget-text-editor {
		--carassist247-rise: 12px;
		animation: carassist247-rise-in var(--ca-transition-slow) both;
		animation-delay: 140ms;
	}

	body.home .carassist247-section:first-of-type .carassist247-cta__actions {
		--carassist247-rise: 10px;
		animation: carassist247-rise-in var(--ca-transition-slow) both;
		animation-delay: 220ms;
	}

	body.home .carassist247-section:first-of-type img {
		animation: carassist247-scale-in var(--ca-transition-slow) both;
		animation-delay: 100ms;
	}

	/* Scroll reveal - gated behind html.js-motion (set by a tiny inline
	   script in functions.php) so content is never hidden if JavaScript
	   doesn't run; motion.js adds carassist247-is-visible via
	   IntersectionObserver, once per element, on every public page it's
	   loaded on (never on /technician/ - it isn't enqueued there). */
	html.js-motion .carassist247-section:not(:first-of-type) .carassist247-container > h2,
	html.js-motion .carassist247-cta,
	html.js-motion .carassist247-card-grid > *,
	html.js-motion .carassist247-steps > * {
		opacity: 0;
		transform: translateY(16px);
		transition: opacity var(--ca-transition-slow), transform var(--ca-transition-slow);
	}

	html.js-motion .carassist247-section:not(:first-of-type) .carassist247-container > h2.carassist247-is-visible,
	html.js-motion .carassist247-cta.carassist247-is-visible,
	html.js-motion .carassist247-card-grid.carassist247-is-visible > *,
	html.js-motion .carassist247-steps.carassist247-is-visible > * {
		opacity: 1;
		transform: translateY(0);
	}

	/* Stagger for grid children (section 8): 0/80/160/240ms (was
	   0/60/120/180ms - widened slightly to match the slower reveal
	   transition above, so cards don't bunch up relative to it), then a
	   catch-all so longer grids don't make anyone wait past 240ms. */
	html.js-motion .carassist247-card-grid > *:nth-child(2),
	html.js-motion .carassist247-steps > *:nth-child(2) { transition-delay: 80ms; }

	html.js-motion .carassist247-card-grid > *:nth-child(3),
	html.js-motion .carassist247-steps > *:nth-child(3) { transition-delay: 160ms; }

	html.js-motion .carassist247-card-grid > *:nth-child(4),
	html.js-motion .carassist247-steps > *:nth-child(4) { transition-delay: 240ms; }

	html.js-motion .carassist247-card-grid > *:nth-child(n+5),
	html.js-motion .carassist247-steps > *:nth-child(n+5) { transition-delay: 240ms; }
}

/* ==========================================================================
   UI test fixes (2026-10-16)
   ========================================================================== */

/* 1. FAQ: long questions wrap instead of pushing the arrow off-screen */
.carassist247-faq-item__question {
	white-space: normal;
}
.carassist247-faq-item__question > span {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}

/* 2. WhatsApp on the dark navy CTA card: solid button with white text */
.carassist247-cta .carassist247-btn--whatsapp {
	background-color: var(--ca-color-whatsapp);
	border-color: var(--ca-color-whatsapp);
	color: var(--ca-color-text-on-dark);
}
.carassist247-cta .carassist247-btn--whatsapp:hover {
	background-color: var(--ca-color-whatsapp-hover);
	border-color: var(--ca-color-whatsapp-hover);
	color: var(--ca-color-text-on-dark);
}

/* 4. Hero/intro CTA buttons line up with the text above them; only the
      dark CTA card keeps them centred */
.carassist247-cta__actions {
	justify-content: flex-start;
}
.carassist247-cta .carassist247-cta__actions {
	justify-content: center;
}

/* 11. Split (two-column) sections line up with every other section:
       remove the extra Elementor column padding */
.carassist247-split > .e-con.carassist247-split__col {
	--padding-left: 0px;
	--padding-right: 0px;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.carassist247-split.e-con {
	--padding-left: 0px;
	--padding-right: 0px;
}

/* Elementor's default 10px side padding on each page section pushed headings
   10px right of the header logo between 768px and ~1220px. Phones are left
   as-is: the mobile header/footer padding (26px) already includes that 10px. */
@media (min-width: 768px) {
	.carassist247-section.e-con {
		--padding-left: 0px;
		--padding-right: 0px;
	}
}

/* 9. Area / brand names are information, not buttons: show them as tags */
span.carassist247-chip-card {
	background-color: var(--ca-color-surface);
	border-color: transparent;
	border-radius: var(--ca-radius-pill);
	padding: 0.55em 1em;
	font-weight: 500;
	cursor: default;
}
span.carassist247-chip-card:hover {
	border-color: transparent;
}

/* 7. Request form polish */
.carassist247-form-step legend:focus,
.carassist247-form-step legend:focus-visible,
.carassist247-form-step legend[tabindex]:focus-visible {
	outline: none;
	box-shadow: none;
}
.carassist247-select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 2.5em;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%23101828'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75em center;
	background-size: 16px 16px;
}
@media (max-width: 430px) {
	.carassist247-form-progress__step em {
		display: block;
		font-size: 0.625rem;
		line-height: 1.2;
	}
}

/* 8. Missing required field is clearly highlighted */
.carassist247-input--error,
.carassist247-select--error,
.carassist247-textarea--error {
	border-color: var(--ca-color-error);
	box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

/* 3. 404 page */
.carassist247-404 {
	padding-block: var(--ca-space-2xl);
	min-height: 50vh;
}
.carassist247-404__code {
	display: inline-block;
	margin-bottom: var(--ca-space-sm);
	padding: 0.3em 0.8em;
	border-radius: var(--ca-radius-pill);
	background-color: var(--ca-color-surface-alt);
	color: var(--ca-color-primary);
	font-size: var(--ca-font-size-small);
	font-weight: 700;
}
.carassist247-404 h1 {
	margin: 0 0 var(--ca-space-sm);
}
.carassist247-404 p {
	max-width: 36em;
	margin: 0 0 var(--ca-space-md);
	color: var(--ca-color-text-muted);
}
.carassist247-404__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ca-space-xs) var(--ca-space-md);
	margin-top: var(--ca-space-lg);
	padding: 0;
	list-style: none;
}
.carassist247-404__links a {
	color: var(--ca-color-primary);
	font-weight: 600;
}

/* Keep the red error state visible while the field has focus */
.carassist247-input--error:focus-visible,
.carassist247-select--error:focus-visible,
.carassist247-textarea--error:focus-visible,
.carassist247-input--error:focus,
.carassist247-select--error:focus,
.carassist247-textarea--error:focus {
	border-color: var(--ca-color-error);
	box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2);
}

/* 404: align with the header and footer at every width */
.carassist247-section.carassist247-404 {
	padding-inline: 0;
}
.carassist247-404 > .carassist247-container {
	box-sizing: border-box;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: var(--ca-gutter);
}
@media (max-width: 767px) {
	.carassist247-404 > .carassist247-container {
		padding-inline: 26px;
	}
}
body.error404 .site-main {
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
}