@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,700;0,900;1,700&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    --up-green: oklch(0.6 0.19 152);
    --up-green-dark: oklch(0.48 0.17 152);
    --up-navy: oklch(0.32 0.09 255);
    --up-cream: oklch(0.98 0.008 90);
    --up-ink: oklch(0.22 0.02 90);
    /* A vivid, recognizably "orange" orange (not the muddier #c05300/#c2410c
       this used to be) — reaches only ~3.6:1 with white text, which fails
       WCAG's 4.5:1 minimum for *normal-size* text. .up-btn-orange (below)
       compensates by rendering bold at 19px+, which legally counts as
       "large-scale text" under WCAG 1.4.3 and only needs 3:1 — see the
       comment there. Don't reuse this variable for small/normal-weight text
       against white without re-checking contrast. */
    --up-orange: #ea580c;
    --up-orange-dark: #bb460a;
    --up-green-light: oklch(0.92 0.05 152);
    --up-font-heading: "Merriweather", Georgia, "Times New Roman", serif;
    --up-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Reusable brand lockup (logo badge + wordmark), shared between the marketing
   homepage and the app shell so the brand looks the same everywhere. */
.up-brand-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}

.up-brand-icon {
    /* uppsamlingsplats.png already has the green square + pictogram baked in,
       so it just needs to fill the rounded badge — no extra background here. */
    height: 100%;
    width: 100%;
    object-fit: cover;
    display: block;
}

.up-brand-word {
    font-family: var(--up-font-heading);
    font-weight: 900;
    color: var(--up-ink);
}

.up-brand-accent {
    color: var(--up-green);
    font-weight: 700;
}

.up-brand-on-green .up-brand-word {
    color: white;
}

.up-brand-on-green .up-brand-accent {
    color: rgba(255, 255, 255, 0.85);
}

html, body {
    font-family: var(--up-font-body);
    color: var(--up-ink);
    background: var(--up-cream);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--up-font-heading);
    font-weight: 800;
}

a, .btn-link {
    color: var(--up-green-dark);
}

/* Brand color overrides — Bootstrap's compiled .btn-primary/.btn-success
   classes bake their colors in at build time, so CSS variables alone won't
   retroactively repaint them; override the classes directly instead. */
.btn-primary,
.btn-success {
    color: #fff;
    background-color: var(--up-green);
    border-color: var(--up-green);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-success:hover,
.btn-success:focus {
    background-color: var(--up-green-dark);
    border-color: var(--up-green-dark);
}

.btn-outline-primary,
.btn-outline-success {
    color: var(--up-green-dark);
    border-color: var(--up-green);
}

.btn-outline-primary:hover,
.btn-outline-success:hover {
    color: #fff;
    background-color: var(--up-green);
    border-color: var(--up-green);
}

.btn {
    border-radius: 10px;
    font-weight: 600;
}

.text-primary,
.text-success {
    color: var(--up-green-dark) !important;
}

.bg-primary,
.bg-success {
    background-color: var(--up-green) !important;
}

.border-primary,
.border-success {
    border-color: var(--up-green) !important;
}

.form-check-input:checked {
    background-color: var(--up-green);
    border-color: var(--up-green);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--up-green);
    box-shadow: 0 0 0 0.2rem oklch(0.6 0.19 152 / 20%);
}

.card {
    border-radius: 14px;
}

/* Pill-style tabs matching the homepage's search-card tabs, instead of
   Bootstrap's default underlined nav-tabs. */
.nav-tabs {
    border-bottom: none;
    gap: 8px;
    flex-wrap: wrap;
}

.nav-tabs .nav-link {
    border: 1px solid oklch(0.85 0.05 152);
    border-radius: 999px;
    color: var(--up-green-dark);
    background: white;
    font-weight: 600;
    padding: 7px 16px;
}

.nav-tabs .nav-link:hover {
    border-color: var(--up-green);
    isolation: isolate;
}

.nav-tabs .nav-link.active {
    background: var(--up-green);
    color: white;
    border-color: var(--up-green);
}

/* Soft rounded card that the app shell's main content sits in, so pages built
   from plain Blazorise components (accordions, list groups, tabs) read as one
   cohesive surface instead of bare white-on-white. */
.up-app-card {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

@media (max-width: 576px) {
    .up-app-card {
        padding: 16px;
        border-radius: 12px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--up-green);
}

.content {
    padding-top: 1.1rem;
}

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;
}

/* ---------------------------------------------------------------------
   Shared public-site chrome (header, nav, footer, buttons, hero/section
   primitives) — used by the marketing homepage and other public pages
   (e.g. /om) via the PublicHeader / PublicFooter layout components, so
   the surrounding chrome stays visually consistent across pages.
   ------------------------------------------------------------------- */
/* No underline on any link in this chrome, buttons included — this part
   applies to every <a>, unlike the color rule below. */
.up-page a {
    text-decoration: none;
}

/* :not(.up-btn) here (but deliberately NOT on the text-decoration rule
   above) is the fix for the "Öppna appen" black-text bug — without it,
   this rule's specificity (class + element) beats every single .up-btn-*
   variant's own color rule (class only), so every button-styled link just
   inherited whatever text color its surrounding section happened to have.
   The hero's orange button "worked" only by accident, because .up-hero
   itself sets color:white on its ancestor chain; the header's identical
   button had no such lucky ancestor and rendered near-black (var(--up-ink),
   inherited all the way from html/body). Buttons must always win with
   their own explicit color, regardless of where they sit. (An earlier fix
   merged this into the text-decoration rule above via one shared
   :not(.up-btn) selector — that inadvertently also stripped text-decoration
   from buttons, which is what caused underlined "Öppna appen"/"Se hur det
   fungerar" text. Splitting them like this is why that's fixed too.) */
.up-page a:not(.up-btn) {
    color: inherit;
}

.up-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}

.up-center {
    text-align: center;
}

.up-muted {
    color: oklch(0.5 0.02 90);
}

.up-small {
    font-size: 0.85rem;
}

/* Header */
.up-header {
    background: var(--up-cream);
    border-bottom: 1px solid oklch(0.9 0.01 90);
    position: sticky;
    top: 0;
    z-index: 10;
}

.up-header-inner {
    width: 100%;
    margin: 0;
    padding: 14px 36px;
    display: flex;
    align-items: center;
    gap: 28px;
    box-sizing: border-box;
}

.up-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.15rem;
    white-space: nowrap;
}

.up-nav {
    flex: 1;
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    font-weight: 500;
}

.up-nav a[aria-current="page"] {
    color: var(--up-green-dark);
    font-weight: 700;
}

.up-nav-accent {
    color: #2563eb;
    font-weight: 600;
}

/* Mobile nav toggle (hamburger) — hidden entirely above the header's
   ~720px breakpoint, where .up-nav is always shown inline and this checkbox
   has no effect either way. See PublicHeader.razor for why this is a plain
   checkbox/label pair instead of a click handler. */
.up-nav-toggle-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.up-nav-toggle {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
}

.up-nav-toggle-bar {
    display: block;
    width: 21px;
    height: 2px;
    background: var(--up-ink);
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.up-nav-toggle-input:focus-visible + .up-nav-toggle {
    outline: 3px solid var(--up-green-dark);
    outline-offset: 2px;
}

/* Turns the three bars into an "X" while the panel is open — purely
   cosmetic, .up-nav's own :checked rule (in the media query below) is what
   actually shows/hides the panel. */
.up-nav-toggle-input:checked ~ .up-nav-toggle .up-nav-toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.up-nav-toggle-input:checked ~ .up-nav-toggle .up-nav-toggle-bar:nth-child(2) {
    opacity: 0;
}

.up-nav-toggle-input:checked ~ .up-nav-toggle .up-nav-toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Buttons */
.up-btn {
    border: none;
    border-radius: 999px;
    padding: 11px 22px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.up-btn-primary {
    background: var(--up-green);
    color: white;
}

.up-btn-primary:hover {
    background: var(--up-green-dark);
}

/* Secondary hero CTA on the solid-green hero background. Deliberately a
   transparent/ghost button (white border + white text, no fill) instead of
   a solid white pill — a solid pill needs its text color to correctly
   resolve against a light background every time, and any mixup there makes
   the label unreadable. White-on-transparent can't have that problem: the
   only background it's ever shown against is the green hero section. */
.up-btn-onlight {
    background: transparent;
    color: white;
    border: 1.5px solid rgba(255, 255, 255, 0.7);
}

.up-btn-onlight:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: white;
}

.up-btn-outline {
    background: transparent;
    color: var(--up-green-dark);
    border: 1.5px solid var(--up-green);
}

.up-btn-outline:hover {
    background: var(--up-green-light);
}

/* Rendered noticeably bolder/larger than other .up-btn variants on purpose,
   not just for visual weight as the primary CTA — at this size+weight it
   clears the 18.66px("14pt")-bold threshold WCAG counts as "large-scale
   text", which only needs 3:1 contrast (this reaches ~3.6:1) instead of the
   4.5:1 normal text needs. Don't shrink/unbold this without picking a
   darker --up-orange to match. */
.up-btn-orange {
    background: var(--up-orange);
    color: white;
    font-weight: 700;
    font-size: 1.2rem;
}

.up-btn-orange:hover {
    background: var(--up-orange-dark);
}

/* Hero */
.up-hero {
    background: var(--up-green);
    color: white;
    padding: clamp(40px, 6vw, 72px) clamp(16px, 4vw, 44px);
    text-align: center;
}

.up-hero-inner {
    max-width: 780px;
    margin: 0 auto;
}

.up-hero h1 {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 900;
    margin: 18px 0;
    line-height: 1.25;
}

.up-hero-lead {
    opacity: 0.92;
    line-height: 1.5;
    margin-bottom: 26px;
}

.up-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 14px;
}

/* Solid up-green-dark instead of a translucent white overlay: the previous
   rgba(255,255,255,0.18) on top of the (fairly light) --up-green hero
   background only lightened it slightly, leaving white pill text at ~2.8:1
   contrast — under WCAG's 4.5:1 minimum. Solid up-green-dark reaches ~5.8:1
   while still reading as "a darker chip on the green hero." */
.up-pill-on-green {
    background: var(--up-green-dark);
}

.up-pill-on-navy {
    background: var(--up-green);
    color: white;
}

.up-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: white;
    display: inline-block;
}

/* Sections */
.up-section {
    padding: 56px 0;
}

.up-section-alt {
    background: oklch(0.965 0.012 80);
}

.up-section h2 {
    font-size: 1.7rem;
    color: var(--up-green-dark);
    margin-bottom: 6px;
}

.up-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: oklch(0.5 0.02 90);
    margin-bottom: 4px;
}

/* Footer */
.up-footer {
    background: oklch(0.16 0.01 90);
    color: oklch(0.85 0.01 90);
    padding: 32px 24px 20px;
}

.up-footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.up-brand-footer .up-brand-word {
    color: white;
}

.up-brand-footer .up-brand-accent {
    color: var(--up-green);
}

.up-footer-nav {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.up-footer-bottom {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid oklch(0.3 0.01 90);
    font-size: 0.82rem;
    color: oklch(0.6 0.01 90);
}

.up-footer-dev a:hover {
    text-decoration: underline;
}

/* Same "[app icon] Starta återsamling" badge in PublicHeader's button and
   Home.razor's hero button — one shared class so both stay visually and
   texturally identical instead of drifting apart again. Sized for the
   1.2rem/bold text .up-btn-orange already uses everywhere (see there). */
.up-app-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    overflow: hidden;
    background: white;
    flex-shrink: 0;
}

@media (max-width: 720px) {
    .up-header-inner {
        flex-wrap: wrap;
        row-gap: 12px;
        padding: 12px 20px;
        gap: 12px;
    }

    .up-brand {
        order: 1;
    }

    .up-nav-toggle {
        order: 2;
        display: inline-flex;
        margin-left: auto;
    }

    /* The CTA no longer shares the top row with the hamburger — it's the
       primary action on this page, so it gets its own full-width row
       instead of shrinking to fit next to the brand + toggle. .up-btn's own
       inline-flex + this button's centered content is enough; the "App"
       icon-only fallback this used to have was a workaround for cramming it
       into the same row and isn't needed anymore. */
    .up-header-actions {
        order: 3;
        flex-basis: 100%;
        width: 100%;
    }

    .up-login-pending {
        display: none;
    }

    .up-header-cta {
        width: 100%;
        justify-content: center;
    }

    /* Collapsed by default; only .up-nav-toggle-input:checked ~ .up-nav
       (below) shows it. */
    .up-nav {
        order: 4;
        flex-basis: 100%;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        margin-top: 4px;
        padding-top: 12px;
        border-top: 1px solid oklch(0.9 0.01 90);
    }

    .up-nav-toggle-input:checked ~ .up-nav {
        display: flex;
    }

    .up-nav a {
        padding: 10px 4px;
        border-radius: 6px;
    }

    .up-nav a:hover,
    .up-nav a:focus-visible {
        background: var(--up-green-light);
    }
}

@media (prefers-reduced-motion: reduce) {
    .up-page *,
    .up-page *::before,
    .up-page *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* ---------------------------------------------------------------------
   Homepage content primitives — feature cards, info cards, alternating
   section backgrounds, FAQ accordion, header login/app-link affordances.
   Shared here (rather than duplicated per-page) since /om already uses the
   same feature-card/info-card look in its own page-scoped <style> block;
   identical class names here just give the homepage the same look without
   needing to touch that file.
   ------------------------------------------------------------------- */
.up-section-green {
    background: var(--up-green-light);
}

.up-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 18px;
    margin-top: 30px;
}

.up-feature-card {
    background: white;
    border-radius: 14px;
    padding: 22px;
    border: 1px solid oklch(0.92 0.01 90);
}

.up-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--up-green-light);
    color: var(--up-green-dark);
    margin-bottom: 14px;
}

.up-feature-icon svg {
    width: 20px;
    height: 20px;
}

.up-feature-card h3 {
    font-size: 1.05rem;
    margin: 0 0 8px;
}

.up-feature-card p {
    margin: 0;
    font-size: 0.92rem;
    color: oklch(0.4 0.02 90);
}

.up-section-green .up-feature-card {
    border-color: oklch(0.85 0.05 152);
}

/* Info card (avgränsning / svensk drift) — calm left-accent card, not a
   dominant red warning box. */
.up-info-card {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    background: white;
    border: 1px solid oklch(0.9 0.01 90);
    border-left: 4px solid var(--up-navy);
    border-radius: 14px;
    padding: 26px;
}

.up-info-card-green {
    border-left-color: var(--up-green);
}

.up-info-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: oklch(0.94 0.02 255);
    color: var(--up-navy);
    flex-shrink: 0;
}

.up-info-card-green .up-info-card-icon {
    background: var(--up-green-light);
    color: var(--up-green-dark);
}

.up-info-card-icon svg {
    width: 22px;
    height: 22px;
}

.up-info-card h2 {
    margin-bottom: 10px;
}

.up-info-card p {
    line-height: 1.6;
    margin: 0 0 14px;
    max-width: 68ch;
}

.up-info-card p:last-child {
    margin-bottom: 0;
}

/* FAQ accordion — native <details>/<summary>, no JS needed. */
.up-faq-item {
    background: white;
    border: 1px solid oklch(0.9 0.01 90);
    border-radius: 12px;
    padding: 4px 20px;
    margin-bottom: 10px;
}

.up-faq-question {
    padding: 14px 0;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.up-faq-question::-webkit-details-marker {
    display: none;
}

.up-faq-question::after {
    content: "+";
    float: right;
    color: var(--up-green-dark);
    font-weight: 700;
}

.up-faq-item[open] .up-faq-question::after {
    content: "−";
}

.up-faq-answer {
    margin: 0 0 16px;
    color: oklch(0.4 0.02 90);
    line-height: 1.6;
}

/* Header "Logga in" placeholder + "Starta återsamling" CTA. */
.up-header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.up-login-pending {
    color: oklch(0.6 0.02 90);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: default;
}

/* Still used by ProcurementSummary.razor (Pricing page) — not by the
   "Starta återsamling" buttons anymore, those use .up-app-icon-badge below. */
.up-icon-external {
    width: 15px;
    height: 15px;
}

.up-app-icon-badge img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---------------------------------------------------------------------
   Keyboard accessibility — visible focus states for the custom .up-*
   buttons/links/nav (the earlier .btn:focus rules above only cover
   Bootstrap's .btn class, not these), plus a skip-to-content link.
   ------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
.up-btn:focus-visible,
summary:focus-visible,
.up-faq-question:focus-visible {
    outline: 3px solid var(--up-green-dark);
    outline-offset: 2px;
    border-radius: 4px;
}

.up-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--up-green-dark);
    color: white !important;
    padding: 12px 18px;
    border-radius: 0 0 8px 0;
    font-weight: 600;
}

.up-skip-link:focus {
    left: 0;
}