/* Manrope як окремі статичні файли на кожну вагу, а не один змінний шрифт.
   Safari з увімкненим «Карантином» (Lockdown Mode) не читає змінні шрифти
   і показує їхню базову вагу 200, тобто все стає тонким.
   Ваги — рівно ті, що є в CSS; браузер завантажує лише ті, що на сторінці. */
@font-face {
    font-family: "Manrope";
    src: url("../fonts/manrope/Manrope-400.b92ae622d31d.woff2") format("woff2"), url("../fonts/manrope/Manrope-400.15abdf3c3683.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Manrope";
    src: url("../fonts/manrope/Manrope-500.00bb64435c9f.woff2") format("woff2"), url("../fonts/manrope/Manrope-500.5c30276fafa3.ttf") format("truetype");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: "Manrope";
    src: url("../fonts/manrope/Manrope-550.708d6628d83d.woff2") format("woff2"), url("../fonts/manrope/Manrope-550.bfd3ebc01e12.ttf") format("truetype");
    font-style: normal;
    font-weight: 550;
    font-display: swap;
}
@font-face {
    font-family: "Manrope";
    src: url("../fonts/manrope/Manrope-600.da285318771c.woff2") format("woff2"), url("../fonts/manrope/Manrope-600.0f57a9e075dd.ttf") format("truetype");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: "Manrope";
    src: url("../fonts/manrope/Manrope-650.9fc3ade4d302.woff2") format("woff2"), url("../fonts/manrope/Manrope-650.b3399dd99538.ttf") format("truetype");
    font-style: normal;
    font-weight: 650;
    font-display: swap;
}
@font-face {
    font-family: "Manrope";
    src: url("../fonts/manrope/Manrope-670.ef4135019ec5.woff2") format("woff2"), url("../fonts/manrope/Manrope-670.8a369cc067dc.ttf") format("truetype");
    font-style: normal;
    font-weight: 670;
    font-display: swap;
}
@font-face {
    font-family: "Manrope";
    src: url("../fonts/manrope/Manrope-680.ed6ade197239.woff2") format("woff2"), url("../fonts/manrope/Manrope-680.554f802b398f.ttf") format("truetype");
    font-style: normal;
    font-weight: 680;
    font-display: swap;
}
@font-face {
    font-family: "Manrope";
    src: url("../fonts/manrope/Manrope-690.bc7038073c74.woff2") format("woff2"), url("../fonts/manrope/Manrope-690.bd4d7f46d5cc.ttf") format("truetype");
    font-style: normal;
    font-weight: 690;
    font-display: swap;
}
@font-face {
    font-family: "Manrope";
    src: url("../fonts/manrope/Manrope-700.eb3a4530804d.woff2") format("woff2"), url("../fonts/manrope/Manrope-700.61358bc953ef.ttf") format("truetype");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: "Manrope";
    src: url("../fonts/manrope/Manrope-720.99f524ea63de.woff2") format("woff2"), url("../fonts/manrope/Manrope-720.ea9fc5c8b3f2.ttf") format("truetype");
    font-style: normal;
    font-weight: 720;
    font-display: swap;
}
@font-face {
    font-family: "Manrope";
    src: url("../fonts/manrope/Manrope-740.477dd01f3a17.woff2") format("woff2"), url("../fonts/manrope/Manrope-740.98ffcec13480.ttf") format("truetype");
    font-style: normal;
    font-weight: 740;
    font-display: swap;
}
@font-face {
    font-family: "Manrope";
    src: url("../fonts/manrope/Manrope-750.9b8762102dc9.woff2") format("woff2"), url("../fonts/manrope/Manrope-750.fb3b6eb98d2d.ttf") format("truetype");
    font-style: normal;
    font-weight: 750;
    font-display: swap;
}
@font-face {
    font-family: "Manrope";
    src: url("../fonts/manrope/Manrope-760.fe2d02d87710.woff2") format("woff2"), url("../fonts/manrope/Manrope-760.93e9ee41bf3f.ttf") format("truetype");
    font-style: normal;
    font-weight: 760;
    font-display: swap;
}
@font-face {
    font-family: "Manrope";
    src: url("../fonts/manrope/Manrope-780.4630ce397903.woff2") format("woff2"), url("../fonts/manrope/Manrope-780.22ff0128c461.ttf") format("truetype");
    font-style: normal;
    font-weight: 780;
    font-display: swap;
}
@font-face {
    font-family: "Manrope";
    src: url("../fonts/manrope/Manrope-800.18ac23d5d42f.woff2") format("woff2"), url("../fonts/manrope/Manrope-800.febca70c9ac9.ttf") format("truetype");
    font-style: normal;
    font-weight: 800;
    font-display: swap;
}

:root {
    --ink: #17242c;
    --ink-2: #3e4d56;
    --muted: #728089;
    --line: #e2e8e8;
    --line-strong: #d1dbdc;
    --canvas: #edf2f2;
    --paper: #fbfcfb;
    --surface: #ffffff;
    --surface-soft: #f2f6f5;
    --brand: #2f6074;
    --brand-dark: #234d60;
    --brand-soft: #e5f0f1;
    --gold: #dc9c35;
    --positive: #2d7860;
    --danger: #b74f4b;
    --ok: var(--positive);
    --ok-soft: #e5f2ec;
    --remark: #8a6114;
    --remark-soft: #f8f1df;
    --important: var(--danger);
    --important-soft: #f8eceb;
    --empty: var(--muted);
    --empty-soft: var(--surface-soft);
    /* схема кузова у звіті */
    --car-body: #e9eff0;
    --car-glass: #cfdde2;
    --car-wheel: #33434b;
    --radius-tag: 7px;
    --radius-sm: 11px;
    --radius-md: 13px;
    --radius-lg: 18px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-3xl: 32px;
    --shadow: 0 18px 55px rgba(29, 52, 61, .12);
    --shadow-card: 0 8px 28px rgba(29, 49, 57, .09);
    --shadow-button: 0 7px 18px rgba(47, 96, 116, .18);
    --focus: rgba(47, 96, 116, .24);
    /* лендінг: мокапи телефонів, переписки, темний фінальний блок */
    --device: #0f1a20;
    --shadow-phone: 0 30px 70px rgba(23, 50, 62, .22), 0 6px 18px rgba(23, 50, 62, .10);
    --chat-bg: #e2e9ea;
    --chat-mine: #d6e6ea;
    --photo-a: #b9c9cd;
    --photo-b: #9fb3b8;
    --lock-top: #cfdde2;
    --lock-bottom: #e9eff0;
    --ig-ring: #e1306c;
    --ig-link: #00376b;
    --ok-line: #cfe5da;
    --remark-line: #efdcae;
    --remark-tint: #fffcf4;
    --gold-hover: #e7ab49;
    --on-gold: #2b1d05;
    --on-dark: #ffffff;
    --on-dark-2: #c9dce2;
    --on-dark-ok: #9fe0c4;
    --on-dark-bad: #ffb4ae;
    --font: "Manrope", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color-scheme: light;

    --color-primary: var(--brand);
    --color-primary-dark: var(--brand-dark);
    --color-page: var(--canvas);
    --color-surface: var(--surface);
    --color-surface-soft: var(--surface-soft);
    --color-text: var(--ink);
    --color-muted: var(--muted);
    --color-border: var(--line);
    --shadow-panel: var(--shadow);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

html {
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--canvas);
    overflow-x: clip;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: clip;
    background: var(--canvas);
    color: var(--ink);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

body.page-cabinet {
    padding: 20px;
}

button,
input,
textarea,
select {
    font: inherit;
    color: inherit;
}

/* Збільшення сторінки дозволене (без maximum-scale), тож iPhone не має наближати екран
   при фокусі в полі: для цього шрифт полів на iOS не менший за 16px. */
@supports (-webkit-touch-callout: none) {
    input,
    textarea,
    select {
        font-size: max(16px, 1em) !important;
    }
}

button {
    margin: 0;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

a {
    color: var(--brand-dark);
}

img {
    display: block;
    max-width: 100%;
}

:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
}

.layout {
    display: flex;
    min-height: calc(100vh - 40px);
    min-height: calc(100dvh - 40px);
    gap: 20px;
    max-width: 1500px;
    margin: 0 auto;
}

.sidebar {
    width: 260px;
    flex: 0 0 260px;
    height: calc(100vh - 40px);
    height: calc(100dvh - 40px);
    align-self: flex-start;
    position: sticky;
    top: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 22px 18px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
}

.sidebar__logo {
    margin: 4px 0 28px;
}

.sidebar__logo .brand {
    font-size: 18px;
}

.sidebar__mobile-actions {
    display: none;
}

/* Головна дія кабінету на ПК; на телефоні її роль виконує вкладка «＋ Новий огляд» */
.sidebar__new {
    gap: 8px;
    width: 100%;
    margin-bottom: 18px;
}

.sidebar__new--active {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
}

.sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sidebar__nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 12px;
    color: var(--ink-2);
    font-weight: 650;
    text-decoration: none;
    border-radius: var(--radius-sm);
}

.sidebar__nav a:hover {
    background: var(--brand-soft);
    color: var(--brand-dark);
}

.sidebar__nav a.sidebar__nav-link--active {
    background: var(--brand-soft);
    color: var(--brand);
}

.sidebar__nav-icon {
    width: 20px;
    height: 20px;
}

.sidebar__bottom {
    margin-top: auto;
    padding-top: 28px;
}

.sidebar__user {
    margin-bottom: 12px;
    text-align: center;
    font-size: 13px;
    color: var(--muted);
    overflow-wrap: anywhere;
}

/* «Вийти» — тиха дія внизу меню, не головна кнопка */
.sidebar__logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    background: transparent;
    color: var(--ink-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    cursor: pointer;
    font: inherit;
    font-weight: 650;
    letter-spacing: -0.01em;
    text-align: center;
    text-decoration: none;
}

.sidebar__logout .icon {
    width: 18px;
    height: 18px;
}

.sidebar__login {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: center;
}

.sidebar__logout:hover {
    background: var(--surface-soft);
    color: var(--brand-dark);
}

.icon-button {
    display: inline-grid;
    width: 48px;
    height: 48px;
    padding: 0;
    place-items: center;
    color: var(--ink-2);
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    text-decoration: none;
}

.icon-button:hover {
    background: var(--surface-soft);
    color: var(--brand);
}

.cabinet-bar,
.tabbar {
    display: none;
}

.content {
    flex: 1;
    min-width: 0;
    padding: 32px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
}

.layout--public {
    flex-direction: column;
    gap: 0;
    max-width: none;
    min-height: 100dvh;
    margin: 0;
}

.page-public {
    padding: 0;
}

.public-header {
    position: sticky;
    z-index: 20;
    top: 0;
    display: flex;
    height: 54px;
    padding: 0 12px 0 20px;
    align-items: center;
    justify-content: space-between;
    background: rgba(251, 252, 251, .9);
    border-bottom: 1px solid rgba(226, 232, 232, .86);
    backdrop-filter: blur(14px);
}

/* Футер публічних сторінок: документи і реквізити ФОП */
.public-footer {
    display: grid;
    gap: 10px;
    width: min(1100px, calc(100% - 32px));
    margin: 0 auto;
    padding: 20px 0 calc(28px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.public-footer a {
    color: inherit;
}

.public-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    font-weight: 700;
}

.public-footer__links a {
    color: var(--ink-2);
    text-decoration: none;
}

.public-footer__links a:hover {
    color: var(--brand);
}

.public-footer__note {
    margin: 0;
    color: var(--ink-2);
}

.public-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 14px;
}

.page-public .content {
    width: min(1100px, calc(100% - 32px));
    margin: 16px auto 28px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 8px 0 24px;
}

@media (max-width: 768px) {
    :root {
        --tabs-h: 76.67px;
    }

    body.page-cabinet {
        padding: 0;
    }

    body.page-cabinet:has(.tabbar) {
        padding-bottom: calc(var(--tabs-h) + env(safe-area-inset-bottom, 0px));
    }

    .layout:not(.layout--public) {
        flex-direction: column;
        gap: 0;
        min-height: 100dvh;
        max-width: none;
    }

    .sidebar {
        display: none;
    }

    .cabinet-bar {
        position: sticky;
        z-index: 25;
        top: 0;
        display: flex;
        height: 54px;
        padding: 0 8px 0 16px;
        align-items: center;
        justify-content: space-between;
        background: rgba(251, 252, 251, .94);
        border-bottom: 1px solid var(--line);
        backdrop-filter: blur(14px);
    }

    .cabinet-bar form {
        margin: 0;
    }

    .page-cabinet .content {
        width: auto;
        margin: 12px;
        padding: 20px 16px;
    }

    /* Нижня панель кабінету: Головна · Огляди · ＋ Новий огляд · Профіль */
    .tabbar {
        --muted: #6b7a83;
        position: fixed;
        z-index: 30;
        right: 0;
        bottom: 0;
        left: 0;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        align-items: end;
        padding: 6px 6px calc(8px + env(safe-area-inset-bottom, 0px));
        background: rgba(251, 252, 251, .95);
        border-top: 1px solid var(--line);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    .tabbar__link {
        display: grid;
        min-width: 0;
        min-height: 54px;
        padding: 6px 2px 2px;
        justify-items: center;
        gap: 3px;
        color: var(--muted);
        font-size: 11.5px;
        font-weight: 680;
        text-align: center;
        text-decoration: none;
    }

    .tabbar__link .icon {
        width: 23px;
        height: 23px;
    }

    .tabbar__link--active {
        color: var(--brand);
    }

    .tabbar__link--new {
        color: var(--ink-2);
    }

    .tabbar__link--new .icon {
        width: 22px;
        height: 22px;
    }

    .tabbar__plus {
        display: grid;
        width: 46px;
        height: 34px;
        place-items: center;
        border-radius: 12px;
        background: var(--brand);
        color: #fff;
        box-shadow: 0 6px 14px rgba(47, 96, 116, .25);
    }

    .page-public .content {
        width: min(1100px, calc(100% - 24px));
        margin-inline: auto;
        padding-top: 4px;
    }
}

/* Смуга «Ви в акаунті …»: власник працює в кабінеті інспектора з бекофісу */
.impersonation-bar {
    position: sticky;
    z-index: 60;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 8px 8px 8px 16px;
    background: var(--ink);
    color: var(--surface);
    font-size: 14px;
    font-weight: 600;
}

.impersonation-bar b {
    font-weight: 760;
}

.impersonation-bar button {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: var(--gold);
    color: var(--ink);
    font: inherit;
    font-weight: 760;
    cursor: pointer;
}

/* Відгук, текст якого прибрав модератор: замість тексту позначка з причиною */
.review-hidden-text {
    color: var(--muted);
    font-style: italic;
}


/* Лоадер — знак Caroche: кільце стоїть, золота крапка обертається по зовнішньому колу.
   Показується лише тоді, коли перехід триває довше ~0,4 с (static/js/loader.js). */
.cl {
    width: 64px;
    height: 64px;
    overflow: visible;
    color: var(--brand);
    --cl-dot: var(--gold);
    --cl-bg: var(--canvas);
}

.cl .cl-spin {
    transform-origin: 28px 28px;
    animation: cl-orbit 1.15s cubic-bezier(.55, .1, .35, .95) infinite;
}

.cl .cl-core {
    transform-origin: 28px 28px;
    animation: cl-core 1.15s ease-in-out infinite;
}

@keyframes cl-orbit {
    from { transform: rotate(0); }
    to { transform: rotate(360deg); }
}

@keyframes cl-core {
    50% { transform: scale(.7); }
}

/* це індикатор стану, тож крутиться і з «Зменшити рух», лише рівно */
@media (prefers-reduced-motion: reduce) {
    .cl .cl-spin { animation: cl-orbit 1.6s linear infinite !important; }
    .cl .cl-core { animation: none !important; }
}

.page-loader {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    background: rgba(237, 242, 242, .7);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
}

.page-loader.is-on {
    opacity: 1;
    pointer-events: auto;
}