/* Garage MOT Manager — booking widget ("Civic" theme). */
.gmm-widget {
	--gmm-ink: #15201d;
	--gmm-paper: #f4f1ea;
	--gmm-card: #fffdf8;
	--gmm-primary: #0a6a6a;
	--gmm-primary-dark: #064f4f;
	--gmm-focus: #ffc400;
	--gmm-danger: #b3261e;
	--gmm-font: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
	font-family: var(--gmm-font);
	color: var(--gmm-ink);
	max-width: 660px;
	margin: 0 auto;
}
.gmm-widget *, .gmm-widget *::before, .gmm-widget *::after { box-sizing: border-box; }

.gmm-card {
	background: var(--gmm-paper);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 12px 40px rgba(21, 32, 29, 0.16);
}
.gmm-head {
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--gmm-ink);
	color: #fff;
	padding: 18px 24px;
	border-bottom: 4px solid var(--gmm-primary);
}
.gmm-head-logo svg { width: 40px; height: 40px; display: block; }
.gmm-title { margin: 0; font-size: 20px; font-weight: 800; color: #fff; letter-spacing: 0.01em; }
.gmm-sub { margin: 2px 0 0; font-size: 13px; color: rgba(255, 255, 255, 0.75); }

.gmm-step {
	border: 0;
	margin: 0;
	padding: 20px 24px 6px;
	border-bottom: 1px solid rgba(21, 32, 29, 0.08);
}
.gmm-step[disabled] { opacity: 0.45; pointer-events: none; }
.gmm-step legend {
	font-size: 16px;
	font-weight: 700;
	padding: 14px 0 2px;
	display: flex;
	align-items: center;
	gap: 9px;
}
.gmm-step-n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px; height: 24px;
	background: var(--gmm-primary);
	color: #fff;
	border-radius: 50%;
	font-size: 13px;
}

.gmm-services { display: grid; gap: 10px; margin: 12px 0; }
.gmm-service {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--gmm-card);
	border: 2px solid rgba(21, 32, 29, 0.14);
	border-radius: 9px;
	padding: 12px 14px;
	cursor: pointer;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.gmm-service:hover { border-color: var(--gmm-primary); }
.gmm-service:has(input:checked) {
	border-color: var(--gmm-primary);
	box-shadow: 0 3px 0 var(--gmm-focus);
}
.gmm-service input { width: 18px; height: 18px; accent-color: var(--gmm-primary); flex: none; }
.gmm-service-body { flex: 1; display: flex; flex-direction: column; }
.gmm-service-name { font-weight: 700; font-size: 15px; }
.gmm-service-desc { font-size: 13px; color: rgba(21, 32, 29, 0.65); }
.gmm-service-price { font-weight: 800; font-size: 15px; white-space: nowrap; }
.gmm-total { font-size: 16px; margin: 4px 0 14px; }

.gmm-row { margin: 12px 0; }
.gmm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0 16px; }
@media (max-width: 540px) { .gmm-grid { grid-template-columns: 1fr; } }

.gmm-label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 5px; }
.gmm-input {
	width: 100%;
	padding: 11px 13px;
	font-family: var(--gmm-font);
	font-size: 16px;
	color: var(--gmm-ink);
	background: var(--gmm-card);
	border: 2px solid var(--gmm-primary);
	border-radius: 7px;
	box-shadow: 0 4px 0 var(--gmm-focus);
}
.gmm-input:focus {
	outline: none;
	box-shadow: 0 4px 0 var(--gmm-focus), 0 0 0 4px rgba(255, 196, 0, 0.3);
}
.gmm-reg { text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; max-width: 220px; }

.gmm-slots { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 16px; }
.gmm-slot {
	font-family: var(--gmm-font);
	font-size: 15px;
	font-weight: 700;
	padding: 9px 14px;
	background: var(--gmm-card);
	color: var(--gmm-ink);
	border: 2px solid rgba(21, 32, 29, 0.2);
	border-radius: 7px;
	cursor: pointer;
}
.gmm-slot:hover { border-color: var(--gmm-primary); }
.gmm-slot.is-on {
	background: var(--gmm-primary);
	border-color: var(--gmm-primary);
	color: #fff;
	box-shadow: 0 3px 0 var(--gmm-focus);
}
.gmm-muted { color: rgba(21, 32, 29, 0.6); font-size: 14px; }

.gmm-paychoice { display: grid; gap: 9px; margin: 12px 0; }
.gmm-payopt {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	background: var(--gmm-card);
	border: 2px solid rgba(21, 32, 29, 0.14);
	border-radius: 9px;
	padding: 11px 13px;
	cursor: pointer;
}
.gmm-payopt:has(input:checked) { border-color: var(--gmm-primary); box-shadow: 0 3px 0 var(--gmm-focus); }
.gmm-payopt input { margin-top: 3px; accent-color: var(--gmm-primary); }
.gmm-payopt small { display: block; color: rgba(21, 32, 29, 0.65); font-size: 13px; }
.gmm-gateway-pick { grid-template-columns: 1fr 1fr; }

.gmm-card-el {
	background: var(--gmm-card);
	border: 2px solid var(--gmm-primary);
	border-radius: 7px;
	padding: 13px;
	box-shadow: 0 4px 0 var(--gmm-focus);
	margin: 6px 0 4px;
}
#gmm-paypal-buttons { margin: 14px 0 6px; }

.gmm-consent {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 14px;
	line-height: 1.45;
	margin: 16px 0;
	color: rgba(21, 32, 29, 0.85);
}
.gmm-consent input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--gmm-primary); flex: none; }
.gmm-consent a { color: var(--gmm-primary); }

.gmm-button {
	display: block;
	width: 100%;
	font-family: var(--gmm-font);
	font-size: 17px;
	font-weight: 800;
	padding: 14px;
	margin: 4px 0 20px;
	color: #fff;
	background: var(--gmm-primary);
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	box-shadow: 0 4px 0 var(--gmm-primary-dark);
}
.gmm-button:hover { background: #0b7676; }
.gmm-button:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--gmm-primary-dark); }
.gmm-button:disabled { opacity: 0.6; cursor: wait; }
.gmm-button:focus-visible { outline: 3px solid var(--gmm-focus); outline-offset: 2px; }

.gmm-error {
	background: #fdecea;
	border-left: 4px solid var(--gmm-danger);
	color: var(--gmm-danger);
	font-weight: 600;
	padding: 10px 14px;
	border-radius: 6px;
	margin: 0 0 20px;
	font-size: 14px;
}
.gmm-note { padding: 14px 24px; font-size: 15px; }
.gmm-note-warn { background: #fff7e0; border-left: 4px solid var(--gmm-focus); margin: 18px 24px; border-radius: 6px; }

.gmm-done { padding: 26px 24px 30px; }
.gmm-done h3 { margin: 0 0 10px; font-size: 22px; color: var(--gmm-primary); }

/* MOT status boxes (v1.1.0) */
.gmm-mot {
	margin: 0 0 16px;
	padding: 12px 14px;
	border-radius: 7px;
	font-size: 14px;
	line-height: 1.5;
}
.gmm-mot-info {
	background: #e7f2f1;
	border-left: 4px solid var(--gmm-primary);
}
.gmm-mot-danger {
	background: #fdecea;
	border-left: 4px solid var(--gmm-danger);
	color: #7a1410;
}