/* Atkins Garage Suite — front-end styles. Built by jon.com.
   Neutral, professional base. Override the CSS variables in the theme to
   match Atkins' final brand colours. */

:root {
	--ags-ink: #1c2733;
	--ags-accent: #c8102e;   /* placeholder automotive red — set to Atkins' brand */
	--ags-line: #e2e6ea;
	--ags-bg: #ffffff;
	--ags-muted: #6b7785;
	--ags-radius: 10px;
}

.ags-card {
	background: var(--ags-bg);
	border: 1px solid var(--ags-line);
	border-radius: var(--ags-radius);
	padding: 1.5rem;
	max-width: 560px;
	font-family: inherit;
	color: var(--ags-ink);
}
.ags-card h3 { margin: 0 0 .75rem; font-size: 1.3rem; }
.ags-card h4 { margin: .75rem 0 .25rem; }

.ags-field { margin-bottom: 1rem; }
.ags-field label { display: block; font-weight: 600; margin-bottom: .35rem; font-size: .9rem; }
.ags-field input,
.ags-field select,
.ags-field textarea {
	width: 100%;
	padding: .65rem .75rem;
	border: 1px solid var(--ags-line);
	border-radius: 8px;
	font-size: 1rem;
	box-sizing: border-box;
}
.ags-field textarea { min-height: 80px; resize: vertical; }

.ags-card button {
	background: var(--ags-accent);
	color: #fff;
	border: 0;
	border-radius: 8px;
	padding: .8rem 1.4rem;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: opacity .15s;
}
.ags-card button:hover { opacity: .9; }
.ags-card button:disabled { opacity: .4; cursor: not-allowed; }

.ags-reg-field { display: flex; gap: .5rem; }
.ags-reg-field input {
	flex: 1; text-transform: uppercase; font-weight: 700; letter-spacing: 1px;
	padding: .65rem .75rem; border: 1px solid var(--ags-line); border-radius: 8px;
}

.ags-result { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--ags-line); }
.ags-total { font-size: 1.8rem; font-weight: 700; color: var(--ags-accent); margin: .25rem 0; }
.ags-hint { color: var(--ags-muted); font-size: .85rem; }
.ags-error { color: var(--ags-accent); font-weight: 600; }
.ags-success { color: #1a7a3c; font-weight: 600; }

.ags-breakdown { width: 100%; border-collapse: collapse; margin: .5rem 0; }
.ags-breakdown td { padding: .35rem 0; border-bottom: 1px solid var(--ags-line); font-size: .92rem; }
.ags-breakdown td:last-child { text-align: right; font-variant-numeric: tabular-nums; }

.ags-slots { display: flex; flex-wrap: wrap; gap: .5rem; }
.ags-slot {
	background: #fff !important; color: var(--ags-ink) !important;
	border: 1px solid var(--ags-line) !important; padding: .5rem .9rem !important;
	border-radius: 6px; font-weight: 600;
}
.ags-slot--active { background: var(--ags-accent) !important; color: #fff !important; }
.ags-slot--taken { opacity: .35; text-decoration: line-through; }

.ags-lead { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--ags-line); }
.ags-lead input, .ags-lead textarea {
	width: 100%; padding: .65rem .75rem; margin-bottom: .5rem;
	border: 1px solid var(--ags-line); border-radius: 8px; box-sizing: border-box;
}
.ags-optin { display: flex; gap: .5rem; margin: .5rem 0; }
.ags-cta { font-weight: 600; color: var(--ags-accent); }

/* Booking payment options */
.ags-payopts { display: flex; flex-direction: column; gap: .5rem; }
.ags-payopt {
	display: flex; align-items: flex-start; gap: .6rem;
	border: 1px solid var(--ags-line); border-radius: 8px; padding: .75rem;
	cursor: pointer; font-weight: 400;
}
.ags-payopt input { width: auto; margin-top: .2rem; }
.ags-payopt span { display: flex; flex-direction: column; }
.ags-payopt small { color: var(--ags-muted); }
.ags-slot[title="Last slot"]::after { content: " ·"; color: var(--ags-accent); }

/* ---- More colour & focus on inputs ---- */
.ags-field input,
.ags-field select,
.ags-field textarea,
.ags-lead input,
.ags-lead textarea {
	border: 1.5px solid #cbd5df;
	background: #fbfcfd;
	transition: border-color .15s, box-shadow .15s, background .15s;
}
.ags-field input:hover,
.ags-field select:hover,
.ags-field textarea:hover { border-color: #9fb0bf; }
.ags-field input:focus,
.ags-field select:focus,
.ags-field textarea:focus,
.ags-lead input:focus,
.ags-lead textarea:focus {
	outline: none;
	border-color: var(--ags-accent);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(200,16,46,.12);
}
.ags-field label { color: var(--ags-ink); }

/* ---- MOT expiry warning on the booking form ---- */
.ags-mot-warn {
	margin: 0 0 1rem;
	padding: .85rem 1rem;
	border-radius: 8px;
	background: #fdecee;
	border: 1.5px solid var(--ags-accent);
	color: #7a1020;
	font-size: .92rem;
	line-height: 1.5;
}
.ags-mot-warn.ags-mot-ok {
	background: #e9f7ee;
	border-color: #1a7a3c;
	color: #145c2d;
}

/* ---- Prominent MOT checker (number-plate style) ---- */
.ags-mot--prominent {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
	background: linear-gradient(180deg, #fff 0%, #f4f7f9 100%);
	border: 1.5px solid #d6dee5;
	box-shadow: 0 10px 30px rgba(17,24,31,.08);
}
.ags-mot--prominent h3 { font-size: 1.6rem; margin-bottom: .35rem; }
.ags-plate-wrap {
	display: flex;
	gap: .75rem;
	justify-content: center;
	align-items: stretch;
	flex-wrap: wrap;
	margin-top: 1rem;
}
.ags-plate {
	display: flex;
	align-items: stretch;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 6px rgba(0,0,0,.15);
	border: 2px solid #111;
}
.ags-plate-gb {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #1b3fae;
	color: #ffcf00;
	font-weight: 800;
	font-size: 1rem;
	padding: 0 .6rem;
	letter-spacing: 1px;
}
.ags-plate input {
	border: 0 !important;
	background: #ffd400 !important;
	color: #111;
	font-weight: 800;
	font-size: 1.8rem;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-align: center;
	width: 220px;
	padding: .5rem .75rem;
	font-family: "Arial Narrow", Arial, sans-serif;
}
.ags-plate input:focus { box-shadow: none !important; }
.ags-mot--prominent button {
	font-size: 1.1rem;
	padding: 0 1.6rem;
}
@media (max-width: 520px) {
	.ags-plate input { width: 160px; font-size: 1.4rem; }
}

/* ---- Contain Leaflet's stacking so map controls don't overlap a sticky header ---- */
#ags-map,
#ags-result-map,
.ags-recovery-calc .leaflet-container {
	isolation: isolate;   /* new stacking context: caps Leaflet's internal z-index */
	position: relative;
	z-index: 0;
}
.ags-recovery-calc .leaflet-top,
.ags-recovery-calc .leaflet-bottom { z-index: 2; }  /* keep controls inside the map only */

/* ---- MOT history & mileage graph ---- */
.ags-mot-summary h4 { margin: 0 0 .25rem; font-size: 1.25rem; }
.ags-mot-expiry {
	margin: .75rem 0; padding: .75rem 1rem; border-radius: 8px; font-size: 1.05rem;
	background: #e9f7ee; border: 1.5px solid #1a7a3c; color: #145c2d;
}
.ags-mot-expiry.overdue { background: #fdecee; border-color: var(--ags-accent); color: #7a1020; }

.ags-graph { margin: 1.25rem 0; }
.ags-graph h5, .ags-mot-history h5 { margin: 0 0 .5rem; font-size: .95rem; text-transform: uppercase; letter-spacing: .5px; color: var(--ags-muted); }
.ags-mileage-svg { width: 100%; height: auto; background: #fbfcfd; border: 1px solid var(--ags-line); border-radius: 8px; }
.ags-mileage-svg .ags-line { stroke: var(--ags-accent); stroke-width: 2.5; }
.ags-mileage-svg circle { fill: var(--ags-accent); }
.ags-mileage-svg .ags-grid { stroke: #e8edf1; stroke-width: 1; }
.ags-mileage-svg .ags-axis { fill: #8a97a3; font-size: 10px; font-family: inherit; }

.ags-mot-history { margin-top: 1rem; }
.ags-mot-test { border: 1px solid var(--ags-line); border-radius: 8px; padding: 0; margin-bottom: .6rem; overflow: hidden; }
.ags-mot-test--plain { padding: .75rem .9rem; }
details.ags-mot-test > summary { list-style: none; cursor: pointer; padding: .75rem .9rem; }
details.ags-mot-test > summary::-webkit-details-marker { display: none; }
.ags-mot-test-head { display: flex; align-items: center; gap: .75rem; }
.ags-mot-test-meta { color: var(--ags-muted); font-size: .9rem; }
.ags-mot-test-count { margin-left: auto; font-size: .82rem; font-weight: 600; color: var(--ags-accent); }
.ags-mot-test-clean { margin-left: auto; font-size: .82rem; color: #1a7a3c; }
.ags-mot-chev { transition: transform .2s; color: var(--ags-muted); font-size: .8rem; }
details.ags-mot-test[open] .ags-mot-chev { transform: rotate(180deg); }
.ags-mot-test-body { padding: 0 .9rem .85rem; }
.ags-mot-badge { font-size: .8rem; font-weight: 800; padding: .15rem .55rem; border-radius: 4px; letter-spacing: .5px; }
.ags-mot-badge.pass { background: #e9f7ee; color: #145c2d; }
.ags-mot-badge.fail { background: #fdecee; color: #7a1020; }
.ags-rfr { margin-top: .5rem; font-size: .88rem; }
.ags-rfr ul { margin: .25rem 0 0; padding-left: 1.2rem; }
.ags-rfr--fail strong { color: #7a1020; }
.ags-rfr--adv strong { color: #8a6d00; }

.ags-mot-cta { margin-top: 1.25rem; display: flex; flex-direction: column; gap: .75rem; align-items: flex-start; }
.ags-mot-cta .btn {
	display: inline-block; background: var(--ags-accent); color: #fff; text-decoration: none;
	padding: .7rem 1.4rem; border-radius: 8px; font-weight: 700;
}

/* ---- Multi-select services checklist ---- */
.ags-svc-list { display: flex; flex-direction: column; gap: .5rem; }
.ags-svc-check {
	display: flex; align-items: center; gap: .6rem;
	border: 1.5px solid #cbd5df; background: #fbfcfd; border-radius: 8px;
	padding: .65rem .8rem; cursor: pointer; font-weight: 400;
	transition: border-color .15s, background .15s;
}
.ags-svc-check:hover { border-color: #9fb0bf; }
.ags-svc-check input { width: auto; margin: 0; }
.ags-svc-check input:checked ~ .ags-svc-name { font-weight: 700; }
.ags-svc-check:has(input:checked) { border-color: var(--ags-accent); background: #fff; box-shadow: 0 0 0 2px rgba(200,16,46,.10); }
.ags-svc-name { flex: 1; }
.ags-svc-price { color: var(--ags-muted); font-variant-numeric: tabular-nums; font-weight: 600; }
.ags-svc-total { margin: .75rem 0 0; font-weight: 700; color: var(--ags-ink); }