/* Shared agent license plate graphic (FL default; CA / CO via modifiers).
   Canvas 1024×520.
   FL: green serial split around oranges; motto band for owner.
   CA: dark-blue serial centered under red script.
   CO: forest-green serial over mountain field; COLORADO wordmark. */

@font-face {
    font-family: 'Penitentiary Gothic Fill';
    src: url('../fonts/PenitentiaryGothicFill.woff') format('woff'),
         url('../fonts/PenitentiaryGothicFill.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

.agent-license-plate {
    --plate-ink: #016a27;
    --plate-focus: rgba(3, 192, 60, 0.65);
    display: block;
    position: relative;
    box-sizing: border-box;
    width: 112px;
    max-width: 100%;
    aspect-ratio: 1024 / 520;
    margin: 0;
    border-radius: 6px;
    background: #fff url('../images/florida-plate-blank.png') center / 100% 100% no-repeat;
    color: var(--plate-ink);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
    line-height: 1;
    user-select: all;
    overflow: hidden;
    container-type: size;
    font: inherit;
    text-align: left;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    border: none;
}

.agent-license-plate.plate-lg { width: 168px; }
.agent-license-plate.plate-md { width: 112px; }
.agent-license-plate.plate-sm { width: 84px; }
.agent-license-plate.plate-xs { width: 64px; }

button.agent-license-plate {
    cursor: pointer;
}

button.agent-license-plate:focus-visible {
    outline: 2px solid var(--plate-focus);
    outline-offset: 2px;
}

/* Florida (default) — split serial around oranges */
.agent-license-plate-num {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    display: block;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Penitentiary Gothic Fill', Impact, 'Arial Black', sans-serif;
    font-size: 50cqh;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 0.75;
    color: var(--plate-ink);
    text-shadow:
        -1px -1px 0 rgba(255, 255, 255, 0.55),
        1px 1px 0 rgba(80, 80, 80, 0.45),
        2px 2px 0 rgba(60, 60, 60, 0.28),
        3px 3px 1px rgba(0, 0, 0, 0.12);
}

.agent-license-plate-type,
.agent-license-plate-body {
    position: absolute;
    top: 34%;
    height: 40%;
    width: 38%;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.04em;
    box-sizing: border-box;
    transform: translateY(0.12em);
}

.agent-license-plate-type { left: 3%; }
.agent-license-plate-body { right: 8%; left: auto; }

.agent-license-plate-owner {
    position: absolute;
    left: 18%;
    right: 18%;
    top: 81%;
    height: 13%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Penitentiary Gothic Fill', Impact, 'Arial Black', sans-serif;
    font-size: 17cqh;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 0.85;
    color: var(--plate-ink);
    text-shadow:
        -0.5px -0.5px 0 rgba(255, 255, 255, 0.75),
        1px 1px 0 rgba(0, 50, 25, 0.4),
        1px 2px 1px rgba(0, 0, 0, 0.18);
    pointer-events: none;
    transform: translateY(0.08em);
}

/* Explicit FL class (same as default) */
.agent-license-plate.plate-fl {
    --plate-ink: #016a27;
    --plate-focus: rgba(3, 192, 60, 0.65);
    background-image: url('../images/florida-plate-blank.png');
}

/* California — centered serial under red script */
.agent-license-plate.plate-ca {
    --plate-ink: #1a2f72;
    --plate-focus: rgba(26, 47, 114, 0.55);
    background-image: url('../images/california-plate-blank.png');
}

.agent-license-plate.plate-ca .agent-license-plate-num {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.22em;
    padding: 22% 6% 14%;
    font-size: 46cqh;
}

.agent-license-plate.plate-ca .agent-license-plate-type,
.agent-license-plate.plate-ca .agent-license-plate-body {
    position: static;
    width: auto;
    height: auto;
    top: auto;
    left: auto;
    right: auto;
    transform: translateY(0.06em);
}

.agent-license-plate.plate-ca .agent-license-plate-owner {
    top: 78%;
    height: 14%;
    font-size: 13cqh;
    text-shadow:
        -0.5px -0.5px 0 rgba(255, 255, 255, 0.75),
        1px 1px 0 rgba(20, 30, 80, 0.35),
        1px 2px 1px rgba(0, 0, 0, 0.18);
}

/* Colorado — centered serial in light field below mountains */
.agent-license-plate.plate-co {
    --plate-ink: #0f3821;
    --plate-focus: rgba(15, 56, 33, 0.55);
    background-image: url('../images/colorado-plate-blank.png');
}

.agent-license-plate.plate-co .agent-license-plate-num {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.22em;
    padding: 30% 6% 18%;
    font-size: 44cqh;
    text-shadow:
        -1px -1px 0 rgba(255, 255, 255, 0.65),
        1px 1px 0 rgba(20, 40, 25, 0.35),
        2px 2px 0 rgba(10, 30, 18, 0.22);
}

.agent-license-plate.plate-co .agent-license-plate-type,
.agent-license-plate.plate-co .agent-license-plate-body {
    position: static;
    width: auto;
    height: auto;
    top: auto;
    left: auto;
    right: auto;
    transform: translateY(0.06em);
}

.agent-license-plate.plate-co .agent-license-plate-owner {
    top: 68%;
    height: 12%;
    font-size: 12cqh;
    letter-spacing: 0.14em;
    text-shadow:
        -0.5px -0.5px 0 rgba(255, 255, 255, 0.8),
        1px 1px 0 rgba(10, 40, 20, 0.35);
}

.agent-license-plate.plate-pending {
    background: transparent;
    box-shadow: none;
    border: 1.5px dashed rgba(255, 255, 255, 0.28);
    color: rgba(255, 255, 255, 0.45);
    --plate-ink: rgba(255, 255, 255, 0.45);
}

.agent-license-plate.plate-pending .agent-license-plate-num,
.agent-license-plate.plate-pending .agent-license-plate-owner {
    text-shadow: none;
}

@media (max-width: 420px) {
    .agent-card .agent-license-plate { width: 100%; }
    /* EU plates are ~2.4x wider at matched height — full width would overflow
       or distort the band, so cap at the container and re-derive height. */
    .agent-card .agent-license-plate.plate-eu-style { width: 100%; height: auto; }
}

/* ---------------------------------------------------------------------------
   EU-style venues — GB / IE / EU.
   Real European plates are 520 mm x 110 mm (4.727:1) — far longer and thinner
   than a US plate — with a blue euroband on the left carrying the 12-star
   circle and the national identifier (GB, IRL, D, F, NL, A...). White field
   with black characters is the standard; the exceptions are yellow (NL, LUX,
   and the UK *rear* plate, which is the recognisable British one).
   Drawn in CSS + one generated SVG band, so a new European venue costs a
   class, not artwork.
   --------------------------------------------------------------------------- */
.agent-license-plate.plate-eu-style {
    --plate-ink: #111;
    --plate-focus: rgba(0, 51, 153, 0.55);
    --plate-band: 10%;          /* ~50mm euroband on a 520mm plate */
    aspect-ratio: 520 / 110;
    background: #fff;
    background-image: none;
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    /* Same height as the US plate at each size (US width x 520/1024);
       the EU aspect ratio then sets the width — heights match, width varies. */
    width: auto;
    height: 56.88px;
}

.agent-license-plate.plate-eu-style.plate-lg { width: auto; height: 85.31px; }
.agent-license-plate.plate-eu-style.plate-md { width: auto; height: 56.88px; }
.agent-license-plate.plate-eu-style.plate-sm { width: auto; height: 42.66px; }
.agent-license-plate.plate-eu-style.plate-xs { width: auto; height: 32.5px; }

/* Euroband: stars over the national identifier. */
.agent-license-plate.plate-eu-style::after {
    content: attr(data-venue-code);
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--plate-band);
    z-index: 3;
    background: #039 url('../images/eu-plate-band.svg') top center / 100% auto no-repeat;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 4%;
    box-sizing: border-box;
    color: #fff;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    font-size: 26cqh;
    letter-spacing: 0.01em;
    pointer-events: none;
}

/* Serial: centred in the field right of the band, in plate typeface. */
.agent-license-plate.plate-eu-style .agent-license-plate-num {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.14em;
    padding: 4% 3% 4% calc(var(--plate-band) + 3%);
    font-family: 'Penitentiary Gothic Fill', Impact, 'Arial Black', sans-serif;
    font-size: 62cqh;
    text-shadow: none;
}

.agent-license-plate.plate-eu-style .agent-license-plate-type,
.agent-license-plate.plate-eu-style .agent-license-plate-body {
    position: static;
    width: auto;
    height: auto;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
}

/* Owner rides at the right edge, the way national/regional marks do. */
.agent-license-plate.plate-eu-style .agent-license-plate-owner {
    /* Centered along the bottom of the character field (right of the
       euroband), sized to read at card scale. */
    left: var(--plate-band);
    right: 0;
    top: auto;
    bottom: 2%;
    height: auto;
    width: auto;
    justify-content: center;
    font-size: 22cqh;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #444;
    text-shadow: none;
}

/* UK rear plate is yellow — the recognisable British one. IE and the
   union-level EU venue take the standard white field. */
.agent-license-plate.plate-gb { background-color: #f5d900; }
.agent-license-plate.plate-ie,
.agent-license-plate.plate-eu { background-color: #fff; }

/* Ireland carries the county/city name in Irish across the top, above the
   registration — the locality is venue detail, never part of the identifier. */
.agent-license-plate.plate-ie[data-locality-name]::before {
    content: attr(data-locality-name);
    position: absolute;
    left: calc(var(--plate-band) + 3%);
    right: 3%;
    top: 4%;
    z-index: 3;
    text-align: center;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 14cqh;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: #111;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

.agent-license-plate.plate-ie[data-locality-name] .agent-license-plate-num {
    /* Base rule sets inset:0; shift the top edge down so the serial centres in
       the field *below* the county strip instead of overflowing the plate. */
    top: 24%;
    padding: 0 3% 4% calc(var(--plate-band) + 3%);
    font-size: 44cqh;
}