:root {
  --eu-blue: #00309a;
  --be-red: #a20f24;
  --plate-yellow: #f7d417;
}

body {
  max-width: 50%;
  margin: 0 auto;
  font-family: Arial, Helvetica, sans-serif;
}

.app-shell {
  margin-top: 1em;
}


.info-bar {
  margin-bottom: 18px;
}

.info-page {
  max-width: 70%;
  margin: 1em auto 0;
}

.info-page h1 {
  margin: 24px 0 18px;
}

.info-page p + p {
  margin-top: 14px;
}

.toolbar {
  margin-bottom: 24px;
}

.last-updated {
  margin-top: 8px;
  color: #777;
  font-size: 0.9rem;
  font-style: italic;
}

.search-field {
  display: grid;
  gap: 8px;
}

.search-field input {
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid #bbb;
  font: inherit;
  font-size: 1rem;
}

.plate-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.plate-card {
  display: flex;
  justify-content: center;
  padding: 14px 0;
}

.plate-card[hidden] {
  display: none;
}

.plate-frame {
  container-type: inline-size;
  width: min(100%, 330px);
}

.license-plate {
  display: grid;
  grid-template-columns: 8.8cqw minmax(0, 1fr);
  width: 100%;
  aspect-ratio: 520 / 110;
  overflow: hidden;
  border: max(2px, 0.55cqw) solid var(--be-red);
  border-radius: 1.4cqw;
  background: #fff;
}

.license-plate:not([data-country="BE"]) {
  border-color: #171713;
}

.license-plate[data-country="LU"],
.license-plate[data-country="NL"] {
  background: var(--plate-yellow);
}

.license-plate:not([data-country="BE"]) .plate-number {
  color: #171713;
  text-shadow: none;
}

.country-band {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35cqw;
  padding: 1.75cqw 0.45cqw 1cqw;
  color: #fff;
  background: var(--eu-blue);
}

.eu-flag {
  width: 9cqw;
  height: 9cqw;
  object-fit: contain;
}

.country-code {
  font-weight: 510;
  line-height: 1;
}

.country-code--single {
  font-size: 9.2cqw;
  line-height: 0.9;
}

.country-code--double {
  font-size: 4.45cqw;
}

.plate-number {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2cqw;
  min-width: 0;
  padding: 1.4cqw 4.25cqw 1.5cqw;
  color: var(--be-red);
  font-size: 15.85cqw;
  font-weight: 650;
  line-height: 1;
  text-shadow: 0.12cqw 0 currentColor;
  white-space: nowrap;
}

.plate-segment,
.plate-separator {
  display: inline-block;
}