h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
/* Overpass-Turbo-style price markers (built as Leaflet divIcon in map.js).
   Reset Leaflet's default divIcon styling so only our blue ring + coloured disc shows. */
.leaflet-div-icon.pils-divicon {
    background: transparent;
    border: none;
}

/* Hide the white beer-mug glyph inside markers when the user has zoomed in far
   enough that OSM tile labels (street names, POI names) are readable. The
   '.pils-zoomed-in' class is toggled on the map container by map.js. */
.pils-zoomed-in .pils-divicon svg {
    display: none;
}

/* Make the popup close (X) button 50% larger than Leaflet's default 16px so it
   is easier to hit on both desktop and mobile. Applies to all popups since the
   selector targets Leaflet's own class, which is rendered in a body-level
   portal outside any scoped CSS boundary. */
.leaflet-popup-close-button {
    font-size: 24px !important;
    line-height: 21px !important;
    width: 27px !important;
    height: 27px !important;
    padding: 6px 6px 0 0 !important;
}

/* Shared layout for the static content pages (front page, privacy policy).
   Kept global instead of scoped so several pages can reuse the same frame. */
.privacy-page {
    max-width: 720px;
    margin: 0 auto;
    padding: 32px 16px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #f5f7fa;
    box-sizing: border-box;
    min-height: 100vh;
}

.language-switch {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-size: 14px;
}

.language-switch a,
.language-switch span {
    padding: 6px 10px;
    border-radius: 999px;
}

.language-switch a {
    color: #1976D2;
    text-decoration: none;
}

.language-switch a:hover,
.language-switch a:focus-visible {
    background: #E3F2FD;
    text-decoration: underline;
}

.language-switch span[aria-current="page"] {
    background: #1976D2;
    color: white;
    font-weight: 600;
}

/* Blue gradient banner — same look as the map/submission headers so the
   static pages keep the Pilskartet brand frame. */
.privacy-header {
    background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
    color: white;
    text-align: center;
    padding: 24px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.privacy-header h1 {
    margin: 0;
    color: white;
}

.privacy-header p {
    color: rgba(255, 255, 255, 0.92);
    margin: 8px 0 0;
}

.privacy-content {
    background: white;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    color: #263238;
    line-height: 1.6;
}

.privacy-updated {
    color: #607D8B;
    font-size: 14px;
    margin-top: 0;
}

.privacy-content h2 {
    font-size: 18px;
    color: #1976D2;
    margin: 28px 0 8px;
}

.privacy-content ul {
    padding-left: 20px;
    margin: 8px 0;
}

.privacy-content a {
    color: #2196F3;
    word-break: break-word;
}

.privacy-footer {
    text-align: center;
    margin-top: 24px;
    font-size: 14px;
}

.privacy-footer a {
    color: #2196F3;
    text-decoration: none;
}

.store-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 25px;
    margin: 16px 0;
}

.store-badge {
    height: 50px;
    width: 150px;
    object-fit: contain;
    object-position: left center;
    display: block;
}

/* The official Google Play PNG has ~29/250 transparent padding top and bottom.
   Scale it up and pull the padding back in so the visible badge artwork is the
   same height as the App Store badge. */
.store-badge-google {
    height: 65px;
    width: 168px;
    margin: -7.5px 0;
}

.store-badge-coming-soon {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    opacity: 0.6;
}

.store-badge-note {
    font-size: 12px;
    color: #666;
}