/*
 * WhenMOT — Components CSS
 * All UI components. BEM, .ms- prefix.
 */

/* ─── Skip link ──────────────────────────────────────────────────────────── */
.ms-skip-link {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}
.ms-skip-link:focus {
  position: fixed; top: var(--ms-sp-4); left: var(--ms-sp-4); width: auto; height: auto;
  padding: var(--ms-sp-3) var(--ms-sp-5);
  background: var(--ms-navy); color: #fff; border-radius: var(--ms-r-md);
  font-weight: 600; z-index: 9999;
}

.ms-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ─── Nav ────────────────────────────────────────────────────────────────── */
.ms-nav {
  background: var(--ms-bg);
  position: sticky; top: 0; z-index: 200;
  border-bottom: 1px solid rgba(1,33,105,.08);
}

.ms-nav__inner {
  max-width: calc(var(--ms-max) + 2 * var(--ms-gutter));
  margin: 0 auto;
  padding: 0 var(--ms-gutter);
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ms-sp-4);
}

/* Logo */
.ms-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  flex-shrink: 0;
}

.ms-logo__icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

.ms-logo__wordmark {
  font-size: 1.8rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ms-navy);
}

.ms-logo__wordmark .ms-logo__accent {
  font-weight: 900;
  color: var(--ms-red);
}

/* Nav links */
.ms-nav__links {
  display: flex;
  align-items: center;
  gap: var(--ms-sp-6);
  list-style: none;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
}
.ms-nav__links li {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
}

.ms-nav__links a {
  font-size: var(--ms-text-base);
  font-weight: 500;
  color: var(--ms-navy);
  text-decoration: none !important;
  transition: color var(--ms-t-fast);
}
.ms-nav__links a:hover { color: var(--ms-navy-light); text-decoration: none !important; }

/* Primary button in nav context — full height to match plate wrap */
.ms-nav .ms-btn--primary {
  align-self: stretch;
  box-shadow: none;
}

/* Nav inline search */
.ms-nav-search {
  display: none;
  align-items: center;
  gap: var(--ms-sp-2);
  flex: 1;
  max-width: 280px;
  margin: 0 var(--ms-sp-4);
}
@media (min-width: 640px) { .ms-nav-search { display: flex; } }

.ms-nav-search .ms-plate-wrap {
  flex: 1;
  border-width: 2px;
  box-shadow: none;
  border-radius: var(--ms-r-sm);
}
.ms-nav-search .ms-plate-input {
  font-size: 1.15rem;
  padding: 6px 10px;
  letter-spacing: 3px;
}
.ms-nav-search .ms-plate-badge {
  min-width: 36px;
  padding: var(--ms-sp-1) var(--ms-sp-2);
}
.ms-nav-search .ms-plate-badge__gb { font-size: 0.8rem; }
.ms-nav-search .ms-btn { padding: 0 16px; font-size: var(--ms-text-sm); border-radius: var(--ms-r-sm); }

/* ─── UK Number Plate ────────────────────────────────────────────────────── */
.ms-plate-wrap {
  display: flex;
  align-items: stretch;
  background: var(--ms-plate-bg);
  border: 3px solid #000;
  border-radius: var(--ms-r-md);
  overflow: hidden;
  box-shadow: var(--ms-shadow-md);
  width: 100%;
  max-width: 420px;
  transition: box-shadow var(--ms-t-fast);
}
.ms-plate-wrap:focus-within {
  box-shadow: 0 0 0 4px rgba(0,35,102,0.25), var(--ms-shadow-md);
}
.ms-plate-wrap--error {
  border-color: var(--ms-fail);
  box-shadow: 0 0 0 3px rgba(185,28,28,0.2);
}

.ms-plate-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--ms-navy-dark);
  padding: var(--ms-sp-2) 10px;
  gap: 2px;
  min-width: 46px;
}
.ms-plate-badge__stars {
  font-size: 4.5px;
  color: var(--ms-plate-bg);
  letter-spacing: 1.5px;
  line-height: 1;
}
.ms-plate-badge__gb {
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 1px;
  line-height: 1;
}

.ms-plate-input {
  flex: 1;
  background: var(--ms-plate-bg);
  border: none;
  outline: none;
  font-family: var(--ms-font-plate);
  font-size: 2.6rem;
  font-weight: 700;
  color: #000;
  letter-spacing: 5px;
  text-transform: uppercase;
  text-align: center;
  padding: var(--ms-sp-3) var(--ms-sp-4);
  caret-color: var(--ms-navy);
  width: 100%;
}
.ms-plate-input::placeholder { color: rgba(0,0,0,0.28); }
.ms-plate-input:focus { outline: none; }

.ms-plate-error-msg {
  font-size: var(--ms-text-sm);
  color: var(--ms-fail);
  font-weight: 500;
  text-align: center;
}

/* Inline plate display (on result page) */
.ms-plate-display {
  display: inline-flex;
  align-items: center;
  background: var(--ms-plate-bg);
  border: 3px solid #000;
  border-radius: var(--ms-r-md);
  overflow: hidden;
  font-family: var(--ms-font-plate);
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: 4px;
  color: #000;
  line-height: 1;
}
.ms-plate-display__badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--ms-navy-dark);
  padding: 5px 8px;
  gap: 2px;
  align-self: stretch;
}
.ms-plate-display__badge-stars { font-size: 4px; color: var(--ms-plate-bg); letter-spacing: 1.5px; }
.ms-plate-display__badge-gb    { font-size: 0.75rem; font-weight: 800; color: #fff; letter-spacing: 1px; }
.ms-plate-display__text        { padding: 6px 16px; }

/* ─── Buttons ────────────────────────────────────────────────────────────── */
.ms-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ms-sp-2);
  padding: 13px 28px;
  font-family: var(--ms-font); font-size: var(--ms-text-base); font-weight: 600;
  line-height: 1; border: 2px solid transparent; border-radius: var(--ms-r-md);
  cursor: pointer; white-space: nowrap; user-select: none; text-decoration: none;
  transition: background var(--ms-t-fast), border-color var(--ms-t-fast),
              box-shadow var(--ms-t-fast), transform var(--ms-t-fast), color var(--ms-t-fast);
}
.ms-btn:disabled { opacity: .5; pointer-events: none; }

.ms-btn--primary {
  background: var(--ms-red);
  color: #fff;
  border-color: var(--ms-red);
  box-shadow: 0 2px 8px rgba(200,16,46,.30);
}
.ms-btn--primary:hover {
  background: var(--ms-red-dark);
  border-color: var(--ms-red-dark);
  color: #fff;
  box-shadow: 0 4px 16px rgba(200,16,46,.35);
  transform: translateY(-1px);
}
.ms-btn--primary:active { transform: translateY(0); box-shadow: none; }

.ms-btn--ghost {
  background: transparent;
  color: rgba(255,255,255,0.85);
  border-color: rgba(255,255,255,0.3);
}
.ms-btn--ghost:hover { background: rgba(255,255,255,0.1); color: #fff; border-color: rgba(255,255,255,0.5); }

.ms-btn--lg { padding: 16px 36px; font-size: var(--ms-text-md); border-radius: var(--ms-r-lg); }

.ms-btn--loading { pointer-events: none; }
.ms-btn__spinner {
  display: none; width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
  border-radius: 50%; animation: ms-spin .65s linear infinite;
}
.ms-btn--loading .ms-btn__spinner { display: inline-block; }
.ms-btn--loading .ms-btn__text   { opacity: .6; }
@keyframes ms-spin { to { transform: rotate(360deg); } }

/* ─── Cards ──────────────────────────────────────────────────────────────── */
.ms-card {
  background: var(--ms-white);
  border-radius: var(--ms-r-lg);
  box-shadow: var(--ms-shadow-sm);
  overflow: hidden;
}

.ms-card__head {
  display: flex;
  align-items: center;
  gap: var(--ms-sp-3);
  padding: var(--ms-sp-5) var(--ms-sp-6);
  border-bottom: 1px solid var(--ms-grey-100);
}

.ms-card__icon {
  width: 36px; height: 36px; border-radius: var(--ms-r-md);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: var(--ms-grey-50);
  color: var(--ms-navy);
}

.ms-card__title {
  font-size: var(--ms-text-md); font-weight: 700; color: var(--ms-grey-900); margin: 0;
}
.ms-card__subtitle {
  font-size: var(--ms-text-xs); color: var(--ms-grey-400); margin: 2px 0 0; font-weight: 500;
  text-transform: uppercase; letter-spacing: .06em;
}

.ms-card__body { padding: var(--ms-sp-6); }

/* ─── Vehicle Hero ───────────────────────────────────────────────────────── */
.ms-vh {
  display: flex;
  flex-direction: column;
  gap: var(--ms-sp-5);
}

.ms-vh__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ms-sp-4);
}

.ms-vh__name {
  font-size: var(--ms-text-2xl);
  font-weight: 800;
  color: var(--ms-grey-900);
  line-height: 1.15;
}
.ms-vh__year {
  font-size: var(--ms-text-xl);
  font-weight: 400;
  color: var(--ms-grey-400);
}

/* Spec grid */
.ms-spec-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ms-sp-3);
}
@media (min-width: 480px) {
  .ms-spec-grid { grid-template-columns: repeat(3, 1fr); }
}

.ms-spec-item {
  background: var(--ms-grey-50);
  border-radius: var(--ms-r-md);
  padding: var(--ms-sp-3) var(--ms-sp-4);
}
.ms-spec-label {
  display: block;
  font-size: var(--ms-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ms-grey-400);
  margin-bottom: 4px;
}
.ms-spec-value {
  font-size: var(--ms-text-base);
  font-weight: 600;
  color: var(--ms-grey-900);
}
.ms-spec-sub {
  display: block;
  font-size: var(--ms-text-xs);
  font-weight: 400;
  color: var(--ms-grey-400);
  margin-top: 1px;
}

/* Date row */
.ms-date-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ms-sp-6);
  padding-top: var(--ms-sp-5);
  border-top: 1px solid var(--ms-grey-100);
}
.ms-date-item {}
.ms-date-label {
  display: block;
  font-size: var(--ms-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ms-grey-400);
  margin-bottom: 3px;
}
.ms-date-value {
  font-size: var(--ms-text-sm);
  font-weight: 600;
  color: var(--ms-grey-700, #374151);
}

/* ─── Status Grid ────────────────────────────────────────────────────────── */
.ms-status-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ms-sp-4);
}

.ms-status-item {
  border-radius: var(--ms-r-lg);
  padding: var(--ms-sp-5) var(--ms-sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--ms-sp-2);
  border: 1px solid transparent;
}
.ms-status-item--pass    { background: var(--ms-pass-bg);   border-color: var(--ms-pass-border); }
.ms-status-item--fail    { background: var(--ms-fail-bg);   border-color: var(--ms-fail-border); }
.ms-status-item--warn    { background: var(--ms-warn-bg);   border-color: var(--ms-warn-border); }
.ms-status-item--unknown { background: var(--ms-grey-50);   border-color: var(--ms-grey-200); }

.ms-status-label {
  font-size: var(--ms-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ms-grey-400);
}
.ms-status-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--ms-text-lg);
  font-weight: 700;
  line-height: 1.1;
}
.ms-status-item--pass  .ms-status-badge { color: var(--ms-pass); }
.ms-status-item--fail  .ms-status-badge { color: var(--ms-fail); }
.ms-status-item--warn  .ms-status-badge { color: var(--ms-warn); }
.ms-status-item--unknown .ms-status-badge { color: var(--ms-grey-400); }

.ms-status-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.ms-status-item--pass  .ms-status-dot { background: var(--ms-pass); }
.ms-status-item--fail  .ms-status-dot { background: var(--ms-fail); }
.ms-status-item--warn  .ms-status-dot { background: var(--ms-warn); }
.ms-status-item--unknown .ms-status-dot { background: var(--ms-grey-400); }

.ms-status-expiry {
  font-size: var(--ms-text-sm);
  color: var(--ms-grey-600);
  font-weight: 500;
}
.ms-status-hint {
  font-size: var(--ms-text-xs);
  color: var(--ms-grey-400);
}

/* ─── MOT History ────────────────────────────────────────────────────────── */
.ms-mot-list { display: flex; flex-direction: column; gap: var(--ms-sp-3); }

.ms-mot-test {
  border-radius: var(--ms-r-md);
  border: 1px solid var(--ms-grey-100);
  overflow: hidden;
}
.ms-mot-test--pass { border-left: 4px solid var(--ms-pass); }
.ms-mot-test--fail { border-left: 4px solid var(--ms-fail); }

.ms-mot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ms-sp-4);
  padding: var(--ms-sp-4) var(--ms-sp-5);
  cursor: pointer;
  user-select: none;
  background: var(--ms-white);
  transition: background var(--ms-t-fast);
}
.ms-mot-row:hover { background: var(--ms-grey-50); }

.ms-mot-meta { display: flex; flex-direction: column; gap: 2px; }
.ms-mot-date { font-size: var(--ms-text-base); font-weight: 600; color: var(--ms-grey-900); }
.ms-mot-miles{ font-size: var(--ms-text-sm); color: var(--ms-grey-400); font-weight: 500; }

.ms-mot-right { display: flex; align-items: center; gap: var(--ms-sp-3); }
.ms-mot-chevron {
  color: var(--ms-grey-400);
  transition: transform var(--ms-t-fast);
  flex-shrink: 0;
}
.ms-mot-row[aria-expanded="true"] .ms-mot-chevron { transform: rotate(180deg); }

.ms-mot-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: var(--ms-r-pill);
  font-size: var(--ms-text-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
}
.ms-mot-pill--pass { background: var(--ms-pass-bg); color: var(--ms-pass); }
.ms-mot-pill--fail { background: var(--ms-fail-bg); color: var(--ms-fail); }

.ms-mot-body {
  padding: var(--ms-sp-4) var(--ms-sp-5);
  border-top: 1px solid var(--ms-grey-100);
  background: var(--ms-grey-50);
}

.ms-mot-items { list-style: none; display: flex; flex-direction: column; gap: var(--ms-sp-3); }

.ms-mot-item { display: flex; gap: var(--ms-sp-3); align-items: flex-start; }
.ms-mot-item-type {
  flex-shrink: 0;
  font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: var(--ms-r-sm);
  text-transform: uppercase; letter-spacing: .05em;
  margin-top: 1px;
}
.ms-mot-item--major     .ms-mot-item-type,
.ms-mot-item--fail      .ms-mot-item-type { background: var(--ms-fail-bg); color: var(--ms-fail); }
.ms-mot-item--dangerous .ms-mot-item-type { background: var(--ms-fail-bg); color: var(--ms-fail); }
.ms-mot-item--minor     .ms-mot-item-type { background: #fff3e0; color: #e65100; }
.ms-mot-item--advisory  .ms-mot-item-type { background: var(--ms-warn-bg); color: var(--ms-warn); }
.ms-mot-item-text { font-size: var(--ms-text-sm); color: var(--ms-grey-600); line-height: 1.55; }
.ms-mot-item--dangerous .ms-mot-item-text::after {
  content: " — DANGEROUS";
  color: var(--ms-fail); font-weight: 700;
}

.ms-mot-cert-num {
  font-size: var(--ms-text-xs);
  color: var(--ms-grey-400);
  font-weight: 500;
  margin-top: var(--ms-sp-3);
  padding-top: var(--ms-sp-3);
  border-top: 1px solid var(--ms-grey-100);
  font-family: monospace;
  letter-spacing: .04em;
}

.ms-mot-clean {
  display: flex; align-items: center; gap: var(--ms-sp-2);
  font-size: var(--ms-text-sm); color: var(--ms-pass); font-weight: 500;
}

/* ─── Mileage Table ──────────────────────────────────────────────────────── */
.ms-table-wrap { overflow-x: auto; }
.ms-table { width: 100%; border-collapse: collapse; font-size: var(--ms-text-sm); }
.ms-table th {
  background: var(--ms-grey-50);
  padding: 10px 16px;
  text-align: left;
  font-size: var(--ms-text-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--ms-grey-400);
  border-bottom: 1px solid var(--ms-grey-100);
}
.ms-table td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--ms-grey-100);
  color: var(--ms-grey-600); font-weight: 500;
}
.ms-table tbody tr:last-child td { border-bottom: none; }
.ms-table tbody tr:hover td { background: var(--ms-grey-50); }

/* ─── Freshness ──────────────────────────────────────────────────────────── */
.ms-freshness {
  display: flex; align-items: center; gap: var(--ms-sp-2);
  font-size: var(--ms-text-xs); color: var(--ms-grey-400); font-weight: 500;
  padding: var(--ms-sp-3) var(--ms-sp-4);
  background: var(--ms-white);
  border-radius: var(--ms-r-md);
  border: 1px solid var(--ms-grey-100);
  align-self: flex-start;
}
.ms-freshness__dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ms-pass); flex-shrink: 0;
}

/* ─── FAQs ───────────────────────────────────────────────────────────────── */
.ms-faq {
  margin-top: var(--ms-sp-10);
  padding-top: var(--ms-sp-8);
  border-top: 1px solid var(--ms-grey-100);
}
.ms-faq__title {
  font-size: var(--ms-text-lg);
  font-weight: 700;
  color: var(--ms-navy);
  margin: 0 0 var(--ms-sp-4);
}
.ms-faq__item {
  border-bottom: 1px solid var(--ms-grey-100);
}
.ms-faq__item:first-of-type { border-top: 1px solid var(--ms-grey-100); }
.ms-faq__q {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ms-sp-4);
  padding: var(--ms-sp-4) 0;
  font-size: var(--ms-text-base);
  font-weight: 600;
  color: var(--ms-navy);
  cursor: pointer;
  user-select: none;
}
.ms-faq__q::-webkit-details-marker { display: none; }
.ms-faq__q::after {
  content: '+';
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--ms-grey-300);
  flex-shrink: 0;
  transition: transform .2s;
}
.ms-faq__item[open] .ms-faq__q::after {
  transform: rotate(45deg);
  color: var(--ms-navy);
}
.ms-faq__a {
  padding: 0 0 var(--ms-sp-5);
  font-size: var(--ms-text-sm);
  color: var(--ms-grey-600, #4b5563);
  line-height: 1.7;
}
.ms-faq__a p { margin: 0 0 var(--ms-sp-3); }
.ms-faq__a p:last-child { margin-bottom: 0; }
.ms-faq__a ul { margin: var(--ms-sp-2) 0 var(--ms-sp-3) var(--ms-sp-5); }
.ms-faq__a li { margin-bottom: var(--ms-sp-2); }
.ms-faq__a a { color: var(--ms-navy); text-decoration: underline; }
.ms-faq__a a:hover { color: var(--ms-navy-light); }

/* ─── Internal links ─────────────────────────────────────────────────────── */
.ms-internal-links {
  margin-top: var(--ms-sp-8);
  padding-top: var(--ms-sp-6);
  border-top: 1px solid var(--ms-grey-100);
}
.ms-internal-links__title {
  font-size: var(--ms-text-base);
  font-weight: 700;
  color: var(--ms-grey-400);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0 0 var(--ms-sp-4);
  font-size: 11px;
}
.ms-internal-links ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ms-sp-3);
}
.ms-internal-links a {
  display: flex;
  align-items: flex-start;
  gap: var(--ms-sp-3);
  padding: var(--ms-sp-4) var(--ms-sp-5);
  background: var(--ms-white);
  border: 1px solid var(--ms-grey-100);
  border-radius: var(--ms-r-lg);
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s;
}
.ms-internal-links a:hover {
  border-color: var(--ms-navy);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.ms-internal-links__icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ms-grey-50, #f8f9fa);
  border-radius: var(--ms-r-md);
  color: var(--ms-navy);
  margin-top: 1px;
}
.ms-internal-links a span:last-child {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ms-internal-links strong {
  font-size: var(--ms-text-sm);
  font-weight: 700;
  color: var(--ms-navy);
}
.ms-internal-links em {
  font-style: normal;
  font-size: var(--ms-text-xs);
  color: var(--ms-grey-400);
  line-height: 1.5;
}

/* ─── Error / Empty states ───────────────────────────────────────────────── */
.ms-state {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: var(--ms-sp-16) var(--ms-sp-8); gap: var(--ms-sp-4);
}
.ms-state__icon  { font-size: 3rem; }
.ms-state__title { font-size: var(--ms-text-xl); font-weight: 700; color: var(--ms-grey-900); }
.ms-state__body  { font-size: var(--ms-text-base); color: var(--ms-grey-400); max-width: 400px; }
.ms-state__actions { display: flex; gap: var(--ms-sp-3); flex-wrap: wrap; justify-content: center; margin-top: var(--ms-sp-2); }

/* ─── Footer ─────────────────────────────────────────────────────────────── */
.ms-footer {
  background: var(--ms-navy-dark);
}
.ms-footer__inner {
  max-width: calc(var(--ms-max) + 2 * var(--ms-gutter));
  margin: 0 auto;
  padding: 0 var(--ms-gutter);
}

/* Top section: brand left, link groups right */
.ms-footer__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--ms-sp-10);
  padding: var(--ms-sp-12) 0 var(--ms-sp-10);
  flex-wrap: wrap;
}

.ms-footer__brand-col { max-width: 260px; }

.ms-footer__logo {
  display: inline-block;
  font-size: 2.2rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #fff;
  text-decoration: none !important;
  margin-bottom: var(--ms-sp-3);
}
.ms-footer__logo .ms-logo__accent {
  font-weight: 900;
  color: var(--ms-red-light);
}

.ms-footer__tagline {
  font-size: var(--ms-text-sm);
  font-weight: 600;
  color: rgba(255,255,255,.65);
  line-height: 1.5;
  margin-bottom: var(--ms-sp-2);
}

.ms-footer__about {
  font-size: var(--ms-text-xs);
  color: rgba(255,255,255,.3);
  line-height: 1.6;
}

/* Link groups */
.ms-footer__links-wrap {
  display: flex;
  gap: var(--ms-sp-20);
  flex-shrink: 0;
}

.ms-footer__group-label {
  font-size: var(--ms-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,255,255,.3);
  margin-bottom: var(--ms-sp-4);
}

.ms-footer__link-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ms-sp-3);
}
.ms-footer__link-group li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ms-footer__link-group a {
  font-size: var(--ms-text-sm);
  color: rgba(255,255,255,.55);
  text-decoration: none !important;
  transition: color var(--ms-t-fast);
}
.ms-footer__link-group a:hover { color: #fff; }

/* Bottom strip */
.ms-footer__bottom {
  border-top: 1px solid rgba(255,255,255,.07);
  padding: var(--ms-sp-5) 0;
}
.ms-footer__copy {
  font-size: var(--ms-text-xs);
  color: rgba(255,255,255,.22);
}

/* ─── Trust bar ──────────────────────────────────────────────────────────── */
.ms-trust {
  background: var(--ms-white);
  border-bottom: 1px solid var(--ms-grey-100);
  padding: var(--ms-sp-4) var(--ms-gutter);
}
.ms-trust__inner {
  max-width: calc(var(--ms-max) + 2 * var(--ms-gutter));
  margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--ms-sp-6);
}
.ms-trust-item {
  display: flex; align-items: center; gap: var(--ms-sp-2);
  font-size: var(--ms-text-sm); font-weight: 500; color: var(--ms-grey-600);
}
.ms-trust-item svg { color: var(--ms-pass); }

/* ─── How it works ───────────────────────────────────────────────────────── */
.ms-steps {
  background: var(--ms-white);
  padding: var(--ms-sp-16) var(--ms-gutter);
}
.ms-steps__inner {
  max-width: calc(var(--ms-max) + 2 * var(--ms-gutter));
  margin: 0 auto;
}
.ms-steps__heading {
  text-align: center;
  font-size: var(--ms-text-2xl);
  font-weight: 800;
  color: var(--ms-grey-900);
  margin-bottom: var(--ms-sp-2);
}
.ms-steps__sub {
  text-align: center;
  font-size: var(--ms-text-base);
  color: var(--ms-grey-400);
  margin-bottom: var(--ms-sp-10);
}
.ms-steps__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ms-sp-6);
}
@media (min-width: 600px) {
  .ms-steps__grid { grid-template-columns: repeat(3, 1fr); }
}
.ms-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--ms-sp-4);
  padding: var(--ms-sp-4) var(--ms-sp-3);
}
.ms-step__num {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--ms-navy);
  color: #fff;
  font-size: var(--ms-text-xl);
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ms-step__title {
  font-size: var(--ms-text-md); font-weight: 700; color: var(--ms-grey-900);
}
.ms-step__body { font-size: var(--ms-text-sm); color: var(--ms-grey-400); line-height: 1.6; }

/* ─── Feature grid (homepage "Everything in one check") ─────────────────── */
@media (min-width: 640px) {
  .ms-feature-grid { grid-template-columns: repeat(3, 1fr) !important; max-width: 860px !important; }
}

/* ─── MOT expiry date on each test row ──────────────────────────────────── */
.ms-mot-meta__sub {
  display: flex;
  align-items: center;
  gap: var(--ms-sp-3);
  flex-wrap: wrap;
}
.ms-mot-expiry {
  font-size: var(--ms-text-xs);
  color: var(--ms-pass);
  font-weight: 500;
}

/* ─── Extra collapsible sections ─────────────────────────────────────────── */
.ms-extra-card__head {
  cursor: default;
}
.ms-extra-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-sp-2);
  padding: 5px 12px;
  font-size: var(--ms-text-xs);
  font-weight: 600;
  color: var(--ms-navy);
  background: var(--ms-grey-50);
  border: 1px solid var(--ms-grey-200);
  border-radius: var(--ms-r-pill);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--ms-t-fast), border-color var(--ms-t-fast);
}
.ms-extra-toggle:hover {
  background: var(--ms-grey-100);
  border-color: var(--ms-grey-300);
}
.ms-extra-toggle__icon {
  font-size: 1rem;
  line-height: 1;
  font-weight: 400;
}
.ms-extra-test-group {
  padding: var(--ms-sp-4) var(--ms-sp-6);
  border-bottom: 1px solid var(--ms-grey-100);
}
.ms-extra-test-group:last-child { border-bottom: none; }
.ms-extra-test-date {
  display: flex;
  align-items: center;
  gap: var(--ms-sp-3);
  font-size: var(--ms-text-sm);
  font-weight: 600;
  color: var(--ms-grey-700, #374151);
  margin-bottom: var(--ms-sp-3);
}

/* ─── Breadcrumb ─────────────────────────────────────────────────────────── */
.ms-breadcrumb {
  font-size: var(--ms-text-sm); color: var(--ms-grey-400);
  display: flex; align-items: center; gap: var(--ms-sp-2); font-weight: 500;
}
.ms-breadcrumb a { color: var(--ms-navy); }
.ms-breadcrumb a:hover { text-decoration: underline; }
.ms-breadcrumb__sep { color: var(--ms-grey-200); }

/* ─── Generic page (about/privacy/terms) ─────────────────────────────────── */
.ms-generic-page { padding: var(--ms-sp-12) var(--ms-gutter); }
.ms-generic-page .ms-container { max-width: 720px; }
.ms-generic-page h1 {
  color: var(--ms-navy); font-size: var(--ms-text-3xl);
  margin-bottom: var(--ms-sp-8);
  padding-bottom: var(--ms-sp-5);
  border-bottom: 3px solid var(--ms-red);
}
.ms-generic-page h2 {
  color: var(--ms-navy); margin-top: var(--ms-sp-8); margin-bottom: var(--ms-sp-3);
  font-size: var(--ms-text-xl);
}
.ms-generic-page p,
.ms-generic-page li { color: var(--ms-grey-600); line-height: 1.7; }
.ms-generic-page ul,
.ms-generic-page ol { padding-left: var(--ms-sp-6); margin-bottom: var(--ms-sp-4); }
.ms-generic-page li { margin-bottom: var(--ms-sp-2); }

/* ─── MOT Inspection Manual page ────────────────────────────────────────── */
.ms-manual-page {
  background: var(--ms-bg);
  min-height: 100vh;
  padding-bottom: var(--ms-sp-16);
}
.ms-manual-wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 var(--ms-gutter);
}

/* Header */
.ms-manual-header {
  padding: var(--ms-sp-12) 0 var(--ms-sp-8);
  border-bottom: 3px solid var(--ms-red);
  margin-bottom: var(--ms-sp-8);
}
.ms-manual-header__title {
  font-size: var(--ms-text-3xl);
  font-weight: 900;
  color: var(--ms-navy);
  margin-bottom: var(--ms-sp-2);
}
.ms-manual-header__sub {
  font-size: var(--ms-text-md);
  color: var(--ms-grey-400);
  margin-bottom: var(--ms-sp-3);
}
.ms-manual-header__meta {
  font-size: var(--ms-text-sm);
  color: var(--ms-grey-300);
}
.ms-manual-header__meta a { color: var(--ms-navy); }

/* Category badges */
.ms-manual-key {
  display: flex;
  gap: var(--ms-sp-3);
  flex-wrap: wrap;
  margin-top: var(--ms-sp-5);
}
.ms-cat {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ms-cat--dangerous { background: #fde8e8; color: #c62828; }
.ms-cat--major     { background: #fde8e8; color: #c62828; }
.ms-cat--minor     { background: #fff3e0; color: #e65100; }
.ms-cat--advisory  { background: var(--ms-warn-bg); color: var(--ms-warn); }

/* ── Tab bar ───────────────────────────────────────────────────────────────── */
.ms-manual-tabs {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;           /* Firefox */
  gap: 2px;
  background: var(--ms-grey-50, #f8f9fa);
  border: 1px solid var(--ms-grey-100);
  border-radius: var(--ms-r-lg);
  padding: 4px;
  margin-bottom: var(--ms-sp-6);
}
.ms-manual-tabs::-webkit-scrollbar { display: none; }

.ms-manual-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
  padding: 8px 14px;
  border: none;
  border-radius: calc(var(--ms-r-lg) - 4px);
  background: transparent;
  cursor: pointer;
  transition: background .15s, color .15s;
  text-align: center;
  white-space: nowrap;
}
.ms-manual-tab__num {
  font-size: 11px;
  font-weight: 700;
  color: var(--ms-grey-300);
  line-height: 1;
  letter-spacing: .04em;
}
.ms-manual-tab__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ms-grey-600, #4b5563);
  line-height: 1.2;
}
.ms-manual-tab:hover {
  background: var(--ms-white);
}
.ms-manual-tab--active {
  background: var(--ms-white);
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.ms-manual-tab--active .ms-manual-tab__num  { color: var(--ms-navy); }
.ms-manual-tab--active .ms-manual-tab__label { color: var(--ms-navy); }

/* ── Panel ─────────────────────────────────────────────────────────────────── */
.ms-manual-panel { animation: ms-fadein .18s ease; }
@keyframes ms-fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.ms-manual-panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ms-sp-4);
  flex-wrap: wrap;
  padding: var(--ms-sp-4) 0;
  border-bottom: 2px solid var(--ms-navy);
  margin-bottom: var(--ms-sp-6);
}
.ms-manual-panel__title {
  font-size: var(--ms-text-xl);
  font-weight: 800;
  color: var(--ms-navy);
  margin: 0;
}
.ms-manual-panel__govuk-foot {
  margin-top: var(--ms-sp-6);
  padding-top: var(--ms-sp-4);
  border-top: 1px solid var(--ms-grey-100);
  font-size: var(--ms-text-xs);
  color: var(--ms-grey-300);
}
.ms-manual-panel__govuk-foot a { color: var(--ms-navy); }
.ms-manual-govuk-link {
  font-size: var(--ms-text-xs);
  color: var(--ms-grey-400);
  text-decoration: none;
  white-space: nowrap;
}
.ms-manual-govuk-link:hover { color: var(--ms-navy); text-decoration: underline; }

/* Subsection */
.ms-manual-sub {
  margin-bottom: var(--ms-sp-8);
}
.ms-manual-sub__title {
  font-size: var(--ms-text-base);
  font-weight: 700;
  color: var(--ms-grey-700, #374151);
  margin-bottom: var(--ms-sp-4);
  padding-bottom: var(--ms-sp-2);
  border-bottom: 1px solid var(--ms-grey-100);
}

/* Item */
.ms-manual-item {
  background: var(--ms-white);
  border: 1px solid var(--ms-grey-100);
  border-radius: var(--ms-r-md);
  margin-bottom: var(--ms-sp-4);
  overflow: hidden;
  scroll-margin-top: 80px; /* offset for sticky nav */
}
.ms-manual-item__title {
  font-size: var(--ms-text-sm);
  font-weight: 600;
  color: var(--ms-grey-900, #111827);
  margin: 0;
  padding: var(--ms-sp-3) var(--ms-sp-4);
  background: var(--ms-grey-50, #f9fafb);
  border-bottom: 1px solid var(--ms-grey-100);
  display: flex;
  align-items: center;
  gap: var(--ms-sp-3);
}
.ms-manual-item__code {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  font-family: monospace;
  color: var(--ms-navy);
  background: #e8edf7;
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

/* Defects table */
.ms-manual-defects {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ms-text-xs);
}
.ms-manual-defects thead th {
  text-align: left;
  padding: var(--ms-sp-2) var(--ms-sp-4);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ms-grey-400);
  border-bottom: 1px solid var(--ms-grey-100);
  background: var(--ms-white);
}
.ms-manual-defects tbody tr:not(:last-child) td {
  border-bottom: 1px solid var(--ms-grey-50, #f9fafb);
}
.ms-manual-defects td {
  padding: var(--ms-sp-2) var(--ms-sp-4);
  vertical-align: middle;
  color: var(--ms-grey-600);
  line-height: 1.5;
}
.ms-manual-defects__ref {
  font-family: monospace;
  font-weight: 700;
  font-size: 11px;
  color: var(--ms-grey-500, #6b7280) !important;
  white-space: nowrap;
  width: 70px;
}
.ms-manual-defects__cat { width: 110px; }

/* Manual reference links in advisory text */
a.ms-manual-ref {
  display: inline-flex;
  align-items: center;
  font-size: inherit;
  color: var(--ms-navy);
  text-decoration: none;
  background: #e8edf7;
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 2px;
  white-space: nowrap;
  font-weight: 600;
  border-bottom: 1px solid rgba(0,44,120,.15);
  transition: background .15s;
}
a.ms-manual-ref:hover { background: #d0daf0; }
a.ms-manual-ref--legacy { opacity: .75; font-style: italic; }

/* Not-in-use subsections / items */
.ms-manual-sub--niu { opacity: .5; }
.ms-manual-sub__title--niu { font-weight: 400; }
.ms-manual-item--niu { opacity: .5; }
.ms-manual-niu-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  color: var(--ms-grey-300);
  background: var(--ms-grey-50, #f5f5f5);
  border: 1px solid var(--ms-grey-100);
  border-radius: 4px;
  padding: 1px 7px;
  margin-left: 6px;
  vertical-align: middle;
  letter-spacing: .02em;
  text-transform: uppercase;
}

/* Footer */
.ms-manual-footer {
  margin-top: var(--ms-sp-12);
  padding-top: var(--ms-sp-6);
  border-top: 1px solid var(--ms-grey-100);
  font-size: var(--ms-text-xs);
  color: var(--ms-grey-300);
  line-height: 1.6;
}
.ms-manual-footer a { color: var(--ms-navy); }

/* ─── Static pages (FAQ, About, etc.) ────────────────────────────────────── */
.ms-static-page {
  padding: var(--ms-sp-8) 0 var(--ms-sp-16);
}
.ms-container--narrow {
  max-width: 760px;
}
.ms-static-header {
  margin-bottom: var(--ms-sp-10);
  padding-bottom: var(--ms-sp-8);
  border-bottom: 1px solid var(--ms-grey-100);
}
.ms-static-header h1 {
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 800;
  color: var(--ms-navy);
  margin: 0 0 var(--ms-sp-3);
}
.ms-static-header__sub {
  font-size: var(--ms-text-base);
  color: var(--ms-grey-400);
  margin: 0;
  line-height: 1.6;
}
.ms-faq--standalone .ms-faq__title { display: none; } /* heading already in <header> */
.ms-faq__section-heading {
  font-size: var(--ms-text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ms-grey-300);
  margin: var(--ms-sp-8) 0 var(--ms-sp-1);
}
.ms-faq__section-heading:first-child { margin-top: 0; }
.ms-static-cta {
  margin-top: var(--ms-sp-12);
  padding-top: var(--ms-sp-8);
  border-top: 1px solid var(--ms-grey-100);
  display: flex;
  align-items: center;
  gap: var(--ms-sp-4);
  flex-wrap: wrap;
}
.ms-static-cta p {
  font-weight: 600;
  color: var(--ms-navy);
  margin: 0;
  flex: 1 1 100%;
}
.ms-btn--outline {
  background: transparent;
  color: var(--ms-navy);
  border: 2px solid var(--ms-navy);
}
.ms-btn--outline:hover {
  background: var(--ms-navy);
  color: #fff;
}