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;
}
/* ===== Bobilfiks brand (warm road-trip: fjord blue #1D5B79, sunset orange #F2994A, paper #FAF7F2) ===== */

:root {
    --bf-blue: #1D5B79;
    --bf-blue-dark: #14435A;
    --bf-orange: #F2994A;
    --bf-orange-dark: #D97F2E;
    --bf-teal: #468B97;
    --bf-paper: #FAF7F2;
    --bf-ink: #24333B;
}

body {
    background: var(--bf-paper);
    color: var(--bf-ink);
    font-family: "Inter", "Segoe UI", Helvetica, Arial, sans-serif;
    margin: 0;
}

.bf-page { display: flex; flex-direction: column; min-height: 100vh; }
.bf-main { flex: 1; }

/* Header */
.bf-header { background: #fff; border-bottom: 3px solid var(--bf-orange); position: sticky; top: 0; z-index: 100; }
.bf-header-inner { max-width: 1200px; margin: 0 auto; padding: .6rem 1rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.bf-logo { display: flex; align-items: center; gap: .4rem; text-decoration: none; font-size: 1.5rem; font-weight: 800; color: var(--bf-blue); }
.bf-logo-text span { color: var(--bf-orange); }
.bf-nav { margin-left: auto; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.bf-nav a { color: var(--bf-blue); text-decoration: none; font-weight: 600; }
.bf-nav a:hover { color: var(--bf-orange-dark); }
.bf-logout-form { display: inline; margin: 0; }

/* Buttons */
.bf-btn-solid, .bf-btn-outline {
    display: inline-block; padding: .45rem 1.1rem; border-radius: 999px; font-weight: 700;
    text-decoration: none; cursor: pointer; transition: transform .08s ease, box-shadow .08s ease;
    border: 2px solid var(--bf-orange); font-size: 1rem;
}
.bf-btn-solid { background: var(--bf-orange); color: #fff !important; }
.bf-btn-solid:hover { background: var(--bf-orange-dark); border-color: var(--bf-orange-dark); transform: translateY(-1px); }
.bf-btn-outline { background: transparent; color: var(--bf-blue) !important; border-color: var(--bf-blue); }
.bf-btn-outline:hover { background: var(--bf-blue); color: #fff !important; }
.bf-btn-lg { padding: .7rem 1.6rem; font-size: 1.1rem; }

/* Hero */
.bf-hero {
    max-width: 1200px; margin: 0 auto; padding: 2.5rem 1rem 1rem;
    display: grid; grid-template-columns: 1fr 1.1fr; gap: 2rem; align-items: center;
}
@media (max-width: 900px) { .bf-hero { grid-template-columns: 1fr; } }
.bf-hero-text h1 { font-size: 2.6rem; font-weight: 800; line-height: 1.15; color: var(--bf-blue); margin: 0 0 1rem; }
.bf-hero-text h1 em { color: var(--bf-orange-dark); font-style: normal; }
.bf-lead { font-size: 1.2rem; line-height: 1.55; }
.bf-hero-ctas { display: flex; gap: .8rem; flex-wrap: wrap; margin: 1.4rem 0 .6rem; }
.bf-hero-sub { color: #5c6b73; font-weight: 600; }

/* Sections & cards */
.bf-section { max-width: 1200px; margin: 0 auto; padding: 2.5rem 1rem; }
.bf-section-alt { background: #fff; max-width: none; }
.bf-section-alt > * { max-width: 1200px; margin-left: auto; margin-right: auto; }
.bf-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem; }
.bf-card {
    background: #fff; border-radius: 16px; padding: 1.4rem;
    box-shadow: 0 2px 10px rgba(29, 91, 121, .08); border-top: 4px solid var(--bf-teal);
}
.bf-card-icon { font-size: 2rem; margin-bottom: .4rem; }
.bf-card h3 { margin: .2rem 0 .5rem; color: var(--bf-blue); font-size: 1.15rem; }
.bf-card p { margin: 0; line-height: 1.5; }

/* How it works */
.bf-how { display: grid; grid-template-columns: auto 1fr; gap: 2.5rem; align-items: center; padding: 1rem; }
@media (max-width: 800px) { .bf-how { grid-template-columns: 1fr; text-align: center; } }
.bf-how-mascot { text-align: center; }
.bf-mascot-name { font-weight: 700; color: var(--bf-teal); margin-top: .4rem; }
.bf-how-steps h2 { color: var(--bf-blue); }
.bf-how-steps ol { padding-left: 1.2rem; line-height: 1.7; font-size: 1.05rem; }
.bf-how-steps li { margin-bottom: .6rem; }

/* Business banner */
.bf-biz-banner {
    background: linear-gradient(120deg, var(--bf-blue), var(--bf-teal));
    color: #fff; border-radius: 20px; padding: 2rem;
    display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; justify-content: space-between;
}
.bf-biz-banner h2 { margin: 0 0 .5rem; }
.bf-biz-banner p { margin: 0; opacity: .95; }

/* Footer */
.bf-footer { background: var(--bf-blue-dark); color: #cfe0e8; margin-top: 2rem; }
.bf-footer-inner {
    max-width: 1200px; margin: 0 auto; padding: 1.4rem 1rem;
    display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: center;
}
.bf-footer a { color: #fff; text-decoration: none; margin-left: 1.2rem; }
.bf-footer a:hover { color: var(--bf-orange); }
.bf-footer-attr { font-size: .85rem; opacity: .75; margin-top: .3rem; }

/* Legal pages */
.bf-legal { max-width: 800px; margin: 0 auto; padding: 2rem 1rem; line-height: 1.65; }
.bf-legal h1 { color: var(--bf-blue); }
.bf-legal h2 { color: var(--bf-blue); font-size: 1.25rem; margin-top: 1.8rem; }

/* Auth status pages */
.bf-auth-card {
    max-width: 520px; margin: 3rem auto; padding: 2.2rem;
    background: #fff; border-radius: 20px; text-align: center;
    box-shadow: 0 4px 18px rgba(29, 91, 121, .10); border-top: 5px solid var(--bf-orange);
}
.bf-auth-card h1 { color: var(--bf-blue); font-size: 1.7rem; font-weight: 800; margin: .8rem 0 .6rem; }
.bf-auth-card p { line-height: 1.55; margin: .4rem 0 1rem; }
.bf-auth-icon { font-size: 3rem; line-height: 1; }

/* Provider-pitch stat cards */
.bf-stat-card {
    background: #fff; border-radius: 14px; padding: 1rem; height: 100%;
    box-shadow: 0 2px 8px rgba(29, 91, 121, .08); border-top: 4px solid var(--bf-orange);
    text-align: center;
}
.bf-stat-number { font-size: 1.9rem; font-weight: 800; color: var(--bf-blue); line-height: 1.1; }
.bf-stat-label { font-size: .82rem; color: #5c6b73; margin-top: .3rem; line-height: 1.35; }

/* Narrow screens: uniform 16px breathing room on EVERY page. The gutter lives on
   .bf-main; inner containers get their own padding zeroed so it never doubles up. */
@media (max-width: 960px) {
    .bf-main { padding-left: 16px; padding-right: 16px; overflow-x: hidden; }
    .bf-main .mud-container,
    .bf-main .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .bf-hero, .bf-section { padding-left: 0; padding-right: 0; }
    /* Full-bleed bands escape the gutter, keep their content aligned to it */
    .bf-section-alt { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
}

/* Vehicle photo (garage cards + edit page) */
.bf-vehicle-photo {
    width: 110px; height: 82px; border-radius: 10px; overflow: hidden; flex-shrink: 0;
    background: var(--bf-paper); display: flex; align-items: center; justify-content: center;
    border: 1px solid #e4ddd2;
}
.bf-vehicle-photo img { width: 100%; height: 100%; object-fit: cover; }

/* Pro nav pill */
.bf-nav-pro {
    background: var(--bf-orange); color: #fff !important;
    padding: .1rem .6rem; border-radius: 999px; font-size: .9rem;
}
.bf-nav-pro:hover { background: var(--bf-orange-dark); color: #fff !important; }

/* Account form pages (login, register, reset, 2fa): branded left-aligned card.
   (Status pages keep the existing centered .bf-auth-card.) */
.bf-account-card {
    background: #fff; border-radius: 16px; padding: 2rem; width: 100%; max-width: 500px;
    margin: 2.5rem auto 3rem;
    box-shadow: 0 2px 10px rgba(29, 91, 121, .08); border-top: 4px solid var(--bf-orange);
}
.bf-account-card h1 { font-size: 1.55rem; font-weight: 800; color: var(--bf-blue); margin-bottom: .8rem; }
.bf-account-card h2 { font-size: 1.15rem; font-weight: 700; color: var(--bf-blue); }
.bf-account-card hr { margin: 1.2rem 0; }
.bf-account-card .btn-primary { background: var(--bf-orange); border-color: var(--bf-orange); font-weight: 600; }
.bf-account-card .btn-primary:hover { background: var(--bf-orange-dark); border-color: var(--bf-orange-dark); }
.bf-account-card a { color: var(--bf-blue); font-weight: 600; }
.bf-account-card a:hover { color: var(--bf-orange-dark); }

/* Account manage section: wider branded card + pill nav */
.bf-manage-card {
    background: #fff; border-radius: 16px; padding: 2rem; width: 100%; max-width: 980px; margin: 2.5rem auto 3rem;
    box-shadow: 0 2px 10px rgba(29, 91, 121, .08); border-top: 4px solid var(--bf-teal);
}
.bf-manage-card h1 { font-size: 1.55rem; font-weight: 800; color: var(--bf-blue); }
.bf-manage-card h3 { font-size: 1.2rem; font-weight: 700; color: var(--bf-blue); }
.bf-manage-card .btn-primary { background: var(--bf-orange); border-color: var(--bf-orange); font-weight: 600; }
.bf-manage-card .btn-primary:hover { background: var(--bf-orange-dark); border-color: var(--bf-orange-dark); }
.bf-manage-card .nav-pills .nav-link { color: var(--bf-blue); font-weight: 600; }
.bf-manage-card .nav-pills .nav-link.active { background: var(--bf-blue); color: #fff; }

/* Footer language picker */
.bf-lang { display: flex; align-items: center; gap: .4rem; }
.bf-lang-label { font-size: .85rem; opacity: .85; margin: 0; }
.bf-lang-select {
    background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 8px; padding: .15rem .4rem; font-size: .85rem;
}
.bf-lang-select option { color: var(--bf-ink); }

/* Mobile menu (Ken): hamburger + slide-down panel on narrow screens. CSS-checkbox
   pattern so it also works on statically rendered Account pages. */
.bf-menu-toggle { display: none; }
.bf-burger { display: none; }

@media (max-width: 960px) {
    .bf-header-inner { position: relative; flex-wrap: nowrap; }
    .bf-burger {
        display: flex; flex-direction: column; justify-content: center; gap: 5px;
        width: 44px; height: 44px; margin-left: auto; padding: 10px;
        cursor: pointer; border-radius: 10px;
    }
    .bf-burger span {
        display: block; height: 3px; border-radius: 2px; background: var(--bf-blue);
        transition: transform .18s ease, opacity .18s ease;
    }
    .bf-menu-toggle:checked ~ .bf-burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .bf-menu-toggle:checked ~ .bf-burger span:nth-child(2) { opacity: 0; }
    .bf-menu-toggle:checked ~ .bf-burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    .bf-nav {
        display: none; position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 0;
        background: #fff; border-bottom: 3px solid var(--bf-orange);
        box-shadow: 0 14px 28px rgba(29, 91, 121, .16);
        padding: .4rem 0 .8rem; margin: 0; z-index: 99;
    }
    .bf-menu-toggle:checked ~ .bf-nav { display: flex; }
    .bf-nav > a, .bf-nav .bf-logout-form {
        padding: .7rem 16px; font-size: 1.05rem; border-bottom: 1px solid #f0ebe3;
    }
    .bf-nav > a:last-of-type { border-bottom: none; }
    .bf-nav .bf-btn-outline, .bf-nav .bf-btn-solid {
        margin: .5rem 16px 0; text-align: center; border-radius: 999px;
    }
    .bf-nav a.bf-btn-outline, .bf-nav a.bf-btn-solid { border-bottom: none; padding: .55rem 1.1rem; }
    .bf-nav .bf-nav-pro { align-self: flex-start; margin: .5rem 16px 0; border-bottom: none; }
}

/* Empty states with the mascot */
.bf-empty-state { text-align: center; padding: 2rem 1rem; }
.bf-empty-state .mud-typography { max-width: 420px; margin-left: auto; margin-right: auto; }

/* Footer version line */
.bf-footer-version { font-size: .75rem; opacity: .55; margin-top: .2rem; }

/* Partner outreach landing page (/partner) */
.bf-partner-hero { background: linear-gradient(130deg, var(--bf-blue) 0%, var(--bf-teal) 100%); color: #fff; }
.bf-partner-hero-inner {
    max-width: 1100px; margin: 0 auto; padding: 3rem 16px;
    display: grid; grid-template-columns: 1.2fr 1fr; gap: 2.5rem; align-items: center;
}
@media (max-width: 860px) { .bf-partner-hero-inner { grid-template-columns: 1fr; padding: 2rem 16px; } }
.bf-partner-kicker {
    display: inline-block; background: rgba(255, 255, 255, .16); border-radius: 999px;
    padding: .25rem .9rem; font-size: .85rem; font-weight: 700; letter-spacing: .03em; margin-bottom: .9rem;
}
.bf-partner-hero h1 { font-size: 2.3rem; font-weight: 800; line-height: 1.2; margin: 0 0 .8rem; }
.bf-partner-hero h1 em { color: #FFD9A0; font-style: normal; }
.bf-partner-hero .bf-lead { opacity: .95; }
.bf-partner-offer {
    background: #fff; color: var(--bf-ink); border-radius: 20px; padding: 1.6rem 1.8rem;
    box-shadow: 0 18px 44px rgba(10, 40, 55, .35); border-top: 5px solid var(--bf-orange);
}
.bf-partner-offer-badge {
    display: inline-block; background: var(--bf-orange); color: #fff; border-radius: 999px;
    padding: .2rem .8rem; font-size: .8rem; font-weight: 700; margin-bottom: .6rem;
}
.bf-partner-offer-big { font-size: 2.6rem; font-weight: 800; color: var(--bf-blue); line-height: 1.1; }
.bf-partner-offer-until { font-size: 1.1rem; font-weight: 700; color: var(--bf-orange-dark); margin-bottom: .7rem; }
.bf-partner-offer ul { padding-left: 1.2rem; margin: 0 0 .8rem; line-height: 1.6; }
.bf-partner-deadline { font-size: .95rem; border-top: 1px solid #eee5d8; padding-top: .7rem; }
.bf-partner-deadline strong { color: var(--bf-orange-dark); }
.bf-partner-why { list-style: none; padding: 0; }
.bf-partner-why li { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: .7rem; line-height: 1.5; }
.bf-partner-why svg { flex-shrink: 0; margin-top: .15rem; }

/* Logo mark (SVG) alignment in the header */
.bf-logo .bf-logo-mark-svg { display: block; }
.bf-logo { gap: .55rem; }