/* Same card treatment as the checkout block (white bg, neutral border,
   orange accent stripe, Roboto) so this standalone page reads as part
   of the site rather than a generic default WordPress form. */
.motoservice-booking {
	max-width: 640px;
	margin: 0 auto;
	padding: 20px 24px;
	background: #fff;
	border: 1px solid #d5d8dc;
	border-left: 3px solid #ff4600;
	font-family: Roboto, sans-serif;
	color: #69727d;
	box-sizing: border-box;
}

.motoservice-booking h3 {
	margin-top: 0;
	color: #1c2448;
}

/*
 * Checkout integration: color/font tokens mirror the site's own
 * Elementor checkout widget (see
 * uploads/elementor/css/custom-pro-widget-woocommerce-checkout-page.min.css)
 * — field bg #f9fafa, border #d5d8dc, text #69727d, Roboto — plus the
 * site's global accent color #FF4600 (elementor-kit-6) as a highlight,
 * so this block reads as part of the checkout rather than a bolted-on
 * plugin widget.
 */
.motoservice-checkout-wrap {
	margin: 20px 0;
	padding: 18px 20px;
	background: #fff;
	border: 1px solid #d5d8dc;
	border-left: 3px solid #ff4600;
	font-family: Roboto, sans-serif;
	color: #69727d;
}

.motoservice-checkout-wrap .form-row {
	margin: 0;
}

.motoservice-checkout-wrap .form-row label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	font-weight: 600;
	color: #1c2448;
	cursor: pointer;
}

/* Visually hidden, not display:none — stays functional (clicking the
   label text still toggles it) and keyboard/focus accessible, it just
   isn't drawn as a visible checkbox square. */
.motoservice-checkout-wrap .form-row input[type="checkbox"] {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Two fields per row on desktop instead of one long stacked column;
   Leistung/Anmerkungen/slots span the full width. */
#motoservice-checkout-fields {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid #d5d8dc;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2px 16px;
}

/* The [hidden] attribute is how the checkbox toggle collapses this
   block; without this override, the ID-selector `display: grid` above
   (higher specificity than the UA's [hidden] rule) would always win
   and the fields would show even when collapsed. */
#motoservice-checkout-fields[hidden] {
	display: none;
}

@media (max-width: 900px) {
	#motoservice-checkout-fields {
		grid-template-columns: 1fr 1fr;
	}
}

#motoservice-checkout-fields .motoservice-field {
	margin: 0 0 12px;
}

#motoservice-checkout-fields .motoservice-field-wide,
#motoservice-checkout-fields .motoservice-slots {
	grid-column: 1 / -1;
}

#motoservice-checkout-fields .motoservice-field label {
	display: block;
	font-size: 13px;
	font-weight: 400;
	color: #69727d;
	margin-bottom: 4px;
}

#motoservice-checkout-fields .motoservice-field input,
#motoservice-checkout-fields .motoservice-field select,
#motoservice-checkout-fields .motoservice-field textarea {
	background-color: #f9fafa;
	border: 1px solid #d5d8dc;
	border-radius: 0;
	color: #69727d;
	font-family: Roboto, sans-serif;
	font-size: 14px;
	padding: 10px 12px;
	width: 100%;
	box-sizing: border-box;
}

#motoservice-checkout-fields .motoservice-field input:focus,
#motoservice-checkout-fields .motoservice-field select:focus,
#motoservice-checkout-fields .motoservice-field textarea:focus {
	outline: none;
	border-color: #ff4600;
}

@media (max-width: 640px) {
	#motoservice-checkout-fields {
		grid-template-columns: 1fr;
	}
}

/* Order-received / My account > View order: appointment summary.
   Full width of its container (not a fixed max-width) and a borderless
   label/value grid instead of a table, so it reads as one clean block
   rather than a boxed-in spreadsheet. */
.motoservice-thankyou-appointment {
	width: 100%;
	box-sizing: border-box;
	margin: 24px 0;
	padding: 18px 20px;
	background: #fff;
	border: 1px solid #d5d8dc;
	border-left: 3px solid #ff4600;
	font-family: Roboto, sans-serif;
}

.motoservice-thankyou-appointment h2 {
	margin-top: 0;
	margin-bottom: 14px;
	font-size: 16px;
	color: #1c2448;
}

/* auto-fit instead of a fixed column count: with 4-5 fields and a wide
   container this naturally lands in a single row, but still wraps
   cleanly on narrower screens without a separate breakpoint per count. */
.motoservice-thankyou-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 16px 24px;
}

.motoservice-thankyou-item {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.motoservice-thankyou-label {
	font-size: 12px;
	color: #69727d;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.motoservice-thankyou-value {
	font-size: 14px;
	color: #1c2448;
	font-weight: 600;
}

.motoservice-steps {
	display: flex;
	gap: 8px;
	margin-bottom: 20px;
	flex-wrap: wrap;
}

.motoservice-step-indicator {
	font-size: 13px;
	padding: 5px 12px;
	border-radius: 0;
	background: #f9fafa;
	border: 1px solid #d5d8dc;
	color: #69727d;
	font-family: Roboto, sans-serif;
}

.motoservice-step-indicator.is-active {
	background: #ff4600;
	border-color: #ff4600;
	color: #fff;
}

.motoservice-step {
	display: none;
}

.motoservice-step.is-active {
	display: block;
}

/* Two fields per row (Fahrzeugdaten, Kontaktdaten steps) instead of one
   long stacked column — same idea as the checkout fields grid, just 2
   columns since this card is narrower. */
.motoservice-field-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px 16px;
}

.motoservice-field-grid .motoservice-field-wide {
	grid-column: 1 / -1;
}

@media (max-width: 480px) {
	.motoservice-field-grid {
		grid-template-columns: 1fr;
	}
}

.motoservice-field {
	margin: 0 0 14px;
}

.motoservice-field label {
	display: block;
	font-size: 13px;
	font-weight: 400;
	color: #69727d;
	margin-bottom: 4px;
}

.motoservice-field input,
.motoservice-field select,
.motoservice-field textarea {
	background-color: #f9fafa;
	border: 1px solid #d5d8dc;
	border-radius: 0;
	color: #69727d;
	font-family: Roboto, sans-serif;
	font-size: 14px;
	padding: 10px 12px;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.motoservice-field input:focus,
.motoservice-field select:focus,
.motoservice-field textarea:focus {
	outline: none;
	border-color: #ff4600;
}

.motoservice-service-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 16px;
}

.motoservice-service-option {
	background: #f9fafa;
	border: 1px solid #d5d8dc;
	border-radius: 0;
	padding: 12px 14px;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: #1c2448;
}

.motoservice-service-option input[type="radio"] {
	accent-color: #ff4600;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* Progressive enhancement — no-op in browsers without :has() support,
   the native radio dot still shows selection either way. */
.motoservice-service-option:has(input:checked) {
	border-color: #ff4600;
}

.motoservice-slots {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0;
}

/* `button.` (not just `.motoservice-slot`) is required here: the Hello
   Elementor theme's reset.css targets `[type="button"], button` with an
   equal-specificity placeholder pink, and being later in the cascade it
   would otherwise win the tie. */
button.motoservice-slot {
	border: 1px solid #d5d8dc;
	background: #fff;
	color: #69727d;
	border-radius: 0;
	padding: 8px 14px;
	font-family: Roboto, sans-serif;
	font-size: 14px;
	cursor: pointer;
}

button.motoservice-slot.is-selected {
	background: #ff4600;
	border-color: #ff4600;
	color: #fff;
}

/* The theme's reset.css also has its own :hover rule for buttons (same
   placeholder pink) — needs its own explicit override too, the base
   state override above doesn't carry over to :hover. */
button.motoservice-slot:hover {
	border-color: #ff4600;
	color: #ff4600;
	background: #fff;
}

button.motoservice-slot.is-selected:hover {
	background: #ff4600;
	border-color: #ff4600;
	color: #fff;
}

.motoservice-hint {
	color: #666;
	font-size: 13px;
}

.motoservice-message {
	padding: 10px 14px;
	border-radius: 4px;
	margin-bottom: 16px;
}

.motoservice-message.is-error {
	background: #fbeaea;
	color: #b32d2e;
	border: 1px solid #e5b3b3;
}

.motoservice-message.is-success {
	background: #eafaf0;
	color: #1e7e34;
	border: 1px solid #b3e5c4;
}

.motoservice-booking .motoservice-prev {
	margin-right: 8px;
}

/* `button.` specificity again beats the theme's placeholder-pink
   [type="button"]/[type="submit"]/button reset (see the .motoservice-slot
   comment above) — same fix, applied to the wizard's own nav/submit buttons. */
button.motoservice-btn {
	border-radius: 0;
	padding: 10px 20px;
	font-family: Roboto, sans-serif;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

button.motoservice-btn-primary {
	background: #ff4600;
	border: 1px solid #ff4600;
	color: #fff;
}

button.motoservice-btn-primary:hover {
	background: #e03e00;
	border-color: #e03e00;
	color: #fff;
}

button.motoservice-btn-secondary {
	background: #fff;
	border: 1px solid #d5d8dc;
	color: #69727d;
}

button.motoservice-btn-secondary:hover {
	border-color: #ff4600;
	color: #ff4600;
	background: #fff;
}

.motoservice-field-note {
	display: block;
	color: #9aa1a8;
	font-size: 12px;
	margin-top: 4px;
}

.motoservice-field [data-role="type-approval-hint"] {
	display: block;
	margin-top: 4px;
}

.motoservice-type-approval-matches {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 14px;
}

.motoservice-type-approval-match {
	background: #f9fafa;
	border: 1px solid #d5d8dc;
	padding: 10px 12px;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: #1c2448;
	cursor: pointer;
}

.motoservice-type-approval-match input[type="radio"] {
	accent-color: #ff4600;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}