@font-face {
    font-family: "JosefinSans-Regular";
    src: url("../fonts/JosefinSans-Regular/fonts/JosefinSans-Regular.eot"); /* IE9 Compat Modes */
    src: url("../fonts/JosefinSans-Regular/fonts/JosefinSans-Regular.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../fonts/JosefinSans-Regular/fonts/JosefinSans-Regular.otf") format("opentype"), /* Open Type Font */
    url("../fonts/JosefinSans-Regular/fonts/JosefinSans-Regular.svg") format("svg"), /* Legacy iOS */
    url("../fonts/JosefinSans-Regular/fonts/JosefinSans-Regular.ttf") format("truetype"), /* Safari, Android, iOS */
    url("../fonts/JosefinSans-Regular/fonts/JosefinSans-Regular.woff") format("woff"), /* Modern Browsers */
    url("../fonts/JosefinSans-Regular/fonts/JosefinSans-Regular.woff2") format("woff2"); /* Modern Browsers */
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "JosefinSans-Bold";
    src: url("../fonts/JosefinSans-Bold/fonts/JosefinSans-Bold.eot"); /* IE9 Compat Modes */
    src: url("../fonts/JosefinSans-Bold/fonts/JosefinSans-Bold.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../fonts/JosefinSans-Bold/fonts/JosefinSans-Bold.otf") format("opentype"), /* Open Type Font */
    url("../fonts/JosefinSans-Bold/fonts/JosefinSans-Bold.svg") format("svg"), /* Legacy iOS */
    url("../fonts/JosefinSans-Bold/fonts/JosefinSans-Bold.ttf") format("truetype"), /* Safari, Android, iOS */
    url("../fonts/JosefinSans-Bold/fonts/JosefinSans-Bold.woff") format("woff"), /* Modern Browsers */
    url("../fonts/JosefinSans-Bold/fonts/JosefinSans-Bold.woff2") format("woff2"); /* Modern Browsers */
    font-weight: normal;
    font-style: normal;
}

:root {
    /* Plate-number sizing (set per project by monitor.js; these are safe fallbacks). */
    --psm-number-size: 80vh;
    --psm-number-maxwidth: 100vw;
    /* Reserved-state accent colour (overridable via config.accentColor). */
    --psm-accent: #81a800;
}

body, html {
    height: 100%;
    background-color: #777777;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    /* background-image is set at runtime by monitor.js per project. */
}
* {
    font-family: 'JosefinSans-Regular',-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

.container {
    width: 100%;
    max-width: 100%;
}
.jumbotron {
    margin-bottom: 0;
    padding: 2rem 8rem 2rem 2rem;
}

/*
 * Three-layer stacking so the big plate number sits BETWEEN the info pill
 * background and its text:  oval background (z1) < number (z2) < text (z3).
 * .pInfo must NOT establish its own stacking context (no z-index/transform/opacity),
 * so its ::before and text children interleave with the sibling .pNumber in the root context.
 */
.pInfo {
    position: relative;
    background: transparent;
    border-radius: 250px;
}
.pInfo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 250px;
    z-index: 1;
}
.pInfo > h1,
.pInfo > h2,
.pInfo > p,
.pInfo > .pFields {
    position: relative;
    z-index: 3;
}

/* Booking fields (e.g. license plate) — only visible while reserved. */
.pFields {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 1.4rem;
    margin-top: 1.4rem;
}
.isreserved .pFields {
    display: flex;
}
.pField {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
}
.pField__label {
    font-size: 1.6rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #7a7a7a;
}
.pField__value {
    font-size: 2.6rem;
    font-weight: 700;
    color: #333333;
}
.pField--highlight .pField__label {
    font-size: 1.9rem;
    margin-bottom: 0.5rem;
}
.pField--highlight .pField__value {
    font-family: 'JosefinSans-Bold',-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-size: 5rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: #111111;
    background: #ffffff;
    border: 6px solid #111111;
    border-radius: 14px;
    padding: 0.4rem 2.4rem;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28);
}

.pHint {
    background-color: rgba(255,255,255,0.8);
    border-radius: 100px 100px 0 0;
    padding: 2rem 2rem 1rem 2rem;
}
h3.hint {
    display: block;
}
h1.forbidden {
    text-transform: uppercase;
    font-size: 4rem !important;
    font-family: 'JosefinSans-Bold',-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-weight: 700 !important;
    color: #e20d14;
}

h1.reserved {
    display: none;
    text-transform: uppercase;
    font-size: 4rem !important;
    font-family: 'JosefinSans-Bold',-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-weight: 700 !important;
    color: var(--psm-accent);
}

.pInfo h2 {
    display: none;
    font-size: 3rem !important;
    font-family: 'JosefinSans-Bold',-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-weight: 700 !important;
    color: var(--psm-accent);
}
.pInfo h2 .topInfo {
    text-transform: uppercase;
}
.pInfo p {
    color: #5a5a5a;
    font-size: 2.5rem !important;
    padding: 0 20%;
}

/* Big plate number — left column, right-aligned; size configurable, capped by width. */
.pNumber {
    position: absolute;
    text-shadow: 0 0 50px #000000;
    top: 0;
    left: 0;
    font-size: min(var(--psm-number-size), var(--psm-number-maxwidth));
    line-height: min(var(--psm-number-size), var(--psm-number-maxwidth));
    font-weight: bold;
    color: #ffffff;
    width: 90vw;
    text-align: right;
    z-index: 2;
    pointer-events: none;
}
.pNumber .numVal {
    padding-top: 13vh;
}

.pSign {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    padding: 0 15px;
    z-index: 3;
}
.pSign .svgIcon {
    height: 100%;
}
.pSign .svgIcon svg {
    height: 100%;
}
.pSign .svgIcon svg #ParkingSign {
    fill: #e20d14;
}

.isreserved h1.reserved,
.isreserved h2 {
    display: block;
}
.isreserved h1.forbidden,
.isreserved .pSign {
    display: none;
}

.isreserved .pInfo {
    padding-left: 19rem;
}

.isreserved h1 {
    font-size: 4rem !important;
}
.isreserved .topInfo {
    font-size: 5rem !important;
}

.isreserved .lead {
    font-size: 4rem !important;
    margin-bottom: 0;
}