/**
 * Car detail page (elements/car-detail.php, elements/partials/turnkey-calculator.php, assets/js/car-detail.js)
 *
 * «Import dossier»: photos first, beside them a price panel that reads like an import invoice (one big
 * turnkey total and a ledger of where every rouble goes), then the evidence — specs, body condition,
 * insurance history, options — as calm, typeset sections.
 *
 * Everything is scoped under .cz-car (the element) or the dialogs the script moves to <body>, so nothing
 * leaks into the site's Bricks header and footer. Brand red is the only accent; green/amber/red are status
 * colours only. The price panel scrolls with the page: never sticky (owner's rule), skeleton included.
 * Rubik is used at 400/600 only: the site's @font-face maps Rubik 500 to the italic file.
 * The --cz-* tokens (colours, fonts, radii, gutter) come from assets/css/cz-site.css, not from this file.
 */

/* ==========================================================================
   Base
   ========================================================================== */

.cz-car {
    box-sizing: border-box;
    width: 100%;
    max-width: 1200px; /* the site's Bricks container: aligns with the header logo and menu */
    margin-inline: auto;
    padding-inline: var(--cz-gutter);
    color: var(--cz-text);
    font-family: var(--cz-font);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.55;
    text-align: left;
    -webkit-font-smoothing: antialiased;
}

/* under v6 one width everywhere: the container width (the side padding follows --cz-gutter, set to the v6 padding) */
[data-cz-ui="6"] .cz-car {
    max-width: var(--cz-container);
}

.cz-car *,
.cz-car *::before,
.cz-car *::after,
.hp-calculator-modal *,
.option-modal *,
.car-fullscreen-modal * {
    box-sizing: border-box;
}

/* `hidden` must beat every component's display rule */
.cz-car [hidden],
.hp-calculator-modal[hidden],
.hp-calculator-modal [hidden],
.option-modal[hidden],
.option-modal [hidden],
.car-fullscreen-modal[hidden],
.car-fullscreen-modal [hidden] {
    display: none !important;
}

.cz-car h1,
.cz-car h2,
.cz-car h3,
.cz-car p,
.cz-car dl,
.cz-car dd,
.cz-car ul,
.cz-car ol {
    margin: 0;
}

.cz-car button,
.hp-calculator-modal button,
.option-modal button,
.car-fullscreen-modal button {
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}

.cz-car :focus-visible,
.hp-calculator-modal :focus-visible,
.option-modal :focus-visible,
.car-fullscreen-modal :focus-visible,
.customs-tooltip-popup :focus-visible {
    outline: 2px solid var(--cz-red);
    outline-offset: 2px;
}

.cz-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.cz-mono {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

/* ---- Buttons ---- */

.cz-car .cz-btn,
.hp-calculator-modal .cz-btn,
.option-modal .cz-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: var(--cz-r-md);
    font-family: var(--cz-font);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.cz-car .cz-btn--primary,
.hp-calculator-modal .cz-btn--primary {
    background: var(--cz-red);
    color: var(--cz-on-red, #fff);
}

.cz-car .cz-btn--primary:hover,
.hp-calculator-modal .cz-btn--primary:hover {
    background: var(--cz-red-hover);
    color: var(--cz-on-red, #fff);
}

.cz-car .cz-btn--ghost,
.hp-calculator-modal .cz-btn--ghost,
.option-modal .cz-btn--ghost {
    background: transparent;
    border-color: var(--cz-line-strong);
    color: var(--cz-text);
}

.cz-car .cz-btn--ghost:hover,
.hp-calculator-modal .cz-btn--ghost:hover,
.option-modal .cz-btn--ghost:hover {
    background: var(--cz-raised);
    border-color: var(--cz-text-3);
}

.cz-car .cz-btn:disabled,
.hp-calculator-modal .cz-btn:disabled {
    cursor: default;
    opacity: 0.55;
}

.cz-car .calc-link-btn {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--cz-text);
    font-size: 14px;
    font-weight: 400;
    text-decoration: underline;
    text-decoration-color: var(--cz-line-strong);
    text-underline-offset: 3px;
    cursor: pointer;
}

.cz-car .calc-link-btn:hover {
    text-decoration-color: var(--cz-red);
}

/* ---- Chips (status, badges) ---- */

.cz-car .cz-chip,
.cz-car .customs-badge,
.cz-car .calc-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--cz-chip-fill, rgba(255, 255, 255, 0.07));
    color: var(--cz-text-2);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    white-space: nowrap;
}

.cz-car .cz-chip::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.cz-car .cz-chip--ok,
.cz-car .customs-badge-low,
.cz-car .calc-badge--ok {
    background: var(--cz-ok-bg);
    color: var(--cz-ok);
}

.cz-car .cz-chip--caution,
.cz-car .customs-badge-soon,
.cz-car .customs-badge-high,
.cz-car .calc-badge--approx {
    background: var(--cz-caution-bg);
    color: var(--cz-caution);
}

.cz-car .cz-chip--danger {
    background: var(--cz-danger-bg);
    color: var(--cz-danger-text);
}

.cz-car .customs-badge-neutral {
    background: var(--cz-chip-fill, rgba(255, 255, 255, 0.07));
    color: var(--cz-text);
}

/* assets/css/car-catalog.css is loaded on every page and styles .customs-badge for the catalog cards
   (absolutely positioned, with an «ⓘ» after it): none of that belongs on the car page. */
.cz-car .customs-badge {
    position: static;
    top: auto;
    right: auto;
    z-index: auto;
    border: 0;
    cursor: default;
    transition: none;
}

.cz-car .customs-badge::after {
    content: none;
}

.cz-car .customs-badge .badge-icon {
    flex: none;
    width: 14px;
    height: 14px;
}

.cz-car .customs-badge[role="button"] {
    cursor: pointer;
}

/* ==========================================================================
   Loading skeleton, error / removed listing
   ========================================================================== */

.cz-car .cz-skel {
    border-radius: var(--cz-r-md);
    background: var(--cz-skel-1, #26262a);
    animation: cz-pulse 1.6s ease-in-out infinite;
}

@keyframes cz-pulse {
    50% {
        opacity: 0.55;
    }
}

.cz-car .cz-skeleton__slow {
    margin-bottom: 16px;
    color: var(--cz-text-2);
}

.cz-car .cz-skel--title {
    width: min(560px, 80%);
    height: 40px;
}

.cz-car .cz-skel-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 40px;
    margin: 18px 0 28px;
}

.cz-car .cz-skel--fact {
    width: 96px;
    height: 40px;
}

.cz-car .cz-skel-layout {
    display: grid;
    gap: 24px;
}

.cz-car .cz-skel--media {
    aspect-ratio: 16 / 9;
    border-radius: var(--cz-r-lg);
}

.cz-car .cz-skel--panel {
    height: 420px;
    border-radius: var(--cz-r-lg);
}

@media (min-width: 1100px) {
    .cz-car .cz-skel-layout {
        grid-template-columns: minmax(0, 1fr) 380px;
        gap: 40px;
        align-items: start;
    }
}

.cz-car .cz-state {
    max-width: 640px;
    margin: 0 auto;
    padding: 48px 0;
    text-align: center;
}

.cz-car .cz-state__title {
    margin-bottom: 12px;
    color: var(--cz-text);
    font-family: var(--cz-display);
    font-size: clamp(26px, 3vw, 34px);
    font-weight: var(--cz-display-weight, 600);
    line-height: 1.2;
    text-transform: var(--cz-display-case, none);
    letter-spacing: var(--cz-display-track, 0);
}

.cz-car .cz-state__text {
    margin-bottom: 24px;
    color: var(--cz-text-2);
}

.cz-car .cz-state__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

/* ==========================================================================
   Head: title and key facts
   ========================================================================== */

.cz-car .cz-head {
    margin-bottom: 24px;
}

.cz-car .cz-title {
    margin: 0 0 18px;
    color: var(--cz-text);
    font-family: var(--cz-display);
    font-size: clamp(28px, 3.2vw, 40px);
    font-weight: var(--cz-display-weight, 600);
    line-height: 1.15;
    letter-spacing: var(--cz-display-track, 0.005em);
    text-transform: var(--cz-display-case, none);
    overflow-wrap: anywhere;
}

.cz-car .cz-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 20px;
}

@media (min-width: 768px) {
    .cz-car .cz-facts {
        display: flex;
        flex-wrap: wrap;
        gap: 16px 40px;
    }
}

.cz-car .cz-fact {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    gap: 2px;
    min-width: 0;
}

.cz-car .cz-fact dt {
    color: var(--cz-text-2);
    font-size: 13px;
    line-height: 1.4;
}

.cz-car .cz-fact dd {
    color: var(--cz-text);
    font-size: 17px;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
}

.cz-car .cz-fact--customs {
    grid-column: 1 / -1;
}

.cz-car .cz-fact--customs dd {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
}

.cz-car .customs-status-explanation:empty,
.cz-car .customs-status-tip:empty {
    display: none;
}

.cz-car .customs-status-explanation {
    color: var(--cz-caution-text);
    font-size: 13px;
    line-height: 1.4;
}

/* ==========================================================================
   Layout
   ========================================================================== */

.cz-car .cz-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "media"
        "price"
        "sections";
    gap: 32px;
}

.cz-car .cz-media {
    grid-area: media;
    min-width: 0;
}

.cz-car .cz-price {
    grid-area: price;
    min-width: 0;
    position: static; /* never sticky */
}

.cz-car .cz-sections {
    grid-area: sections;
    min-width: 0;
}

.cz-car .cz-layout--no-price {
    grid-template-areas:
        "media"
        "sections";
}

@media (min-width: 1100px) {
    .cz-car .cz-layout {
        grid-template-columns: minmax(0, 1fr) 380px;
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "media price"
            "sections price";
        column-gap: 40px;
        row-gap: 48px;
        align-items: start;
    }

    .cz-car .cz-layout--no-price {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "media"
            "sections";
    }
}

/* ==========================================================================
   Gallery (native scroll-snap)
   ========================================================================== */

.cz-car .cz-gallery__stage {
    position: relative;
    aspect-ratio: 16 / 9; /* Encar photos are 2200 × 1238: no bars, no crop */
    overflow: hidden;
    background: var(--cz-photo-bg, #121214);
}

@media (max-width: 767px) {
    .cz-car .cz-media {
        margin-inline: calc(var(--cz-gutter) * -1);
    }
}

@media (min-width: 768px) {
    .cz-car .cz-gallery__stage {
        border-radius: var(--cz-r-lg);
    }
}

.cz-car .cz-gallery__track {
    display: flex;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    outline-offset: -4px;
}

.cz-car .cz-gallery__track::-webkit-scrollbar {
    display: none;
}

.cz-car .cz-gallery__slide {
    flex: 0 0 100%;
    height: 100%;
    margin: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.cz-car .cz-gallery__slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: zoom-in;
    user-select: none;
    -webkit-user-drag: none;
}

.cz-car .cz-gallery__nav,
.cz-car .cz-gallery__zoom {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(18, 18, 20, 0.72);
    color: #fff; /* on-photo */
    cursor: pointer;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

.cz-car .cz-gallery__nav:hover,
.cz-car .cz-gallery__zoom:hover {
    background: rgba(18, 18, 20, 0.92);
}

.cz-car .cz-gallery__nav:disabled {
    opacity: 0.35;
    cursor: default;
}

.cz-car .cz-gallery__nav {
    top: 50%;
    transform: translateY(-50%);
}

.cz-car .cz-gallery__nav--prev {
    left: 12px;
}

.cz-car .cz-gallery__nav--next {
    right: 12px;
}

.cz-car .cz-gallery__zoom {
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
}

@media (hover: none) {
    /* Touch screens swipe; the arrows would only cover the photo */
    .cz-car .cz-gallery__nav {
        display: none;
    }
}

.cz-car .cz-gallery__counter {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 2;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(18, 18, 20, 0.72);
    color: #fff; /* on-photo */
    font-size: 13px;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

.cz-car .cz-gallery__empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--cz-text-2);
}

.cz-car .cz-gallery__thumbs {
    --cz-thumbs: 5;
    position: relative; /* offsetParent for the active-thumb scroll */
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--cz-thumbs) - 1) * 8px) / var(--cz-thumbs));
    gap: 8px;
    margin-top: 10px;
    padding: 0 0 6px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--cz-line-strong) transparent;
}

@media (min-width: 768px) {
    .cz-car .cz-gallery__thumbs {
        --cz-thumbs: 6;
    }
}

@media (min-width: 1100px) {
    .cz-car .cz-gallery__thumbs {
        --cz-thumbs: 7;
    }
}

.cz-car .cz-gallery__thumbs:empty {
    display: none;
}

@media (max-width: 767px) {
    .cz-car .cz-gallery__thumbs {
        margin-inline: var(--cz-gutter);
    }
}

.cz-car .cz-gallery__thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    padding: 0;
    border: 0;
    border-radius: var(--cz-r-sm);
    overflow: hidden;
    background: var(--cz-photo-bg, #121214);
    opacity: 0.55;
    cursor: pointer;
    scroll-snap-align: start;
    transition: opacity 0.15s ease;
}

.cz-car .cz-gallery__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cz-car .cz-gallery__thumb:hover {
    opacity: 0.85;
}

.cz-car .cz-gallery__thumb[aria-current="true"] {
    opacity: 1;
}

.cz-car .cz-gallery__thumb:focus-visible {
    outline-offset: -2px;
    opacity: 1;
}

.cz-car .cz-gallery__thumb[aria-current="true"]::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid var(--cz-red);
    border-radius: inherit;
}

/* ---- Fullscreen viewer (in <body>) ---- */

.car-fullscreen-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--cz-font);
    color: #fff; /* on-photo */
}

.car-fullscreen-modal .fullscreen-overlay {
    position: absolute;
    inset: 0;
    background: rgba(8, 8, 9, 0.94);
}

.car-fullscreen-modal .fullscreen-content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 64px 16px;
}

@media (min-width: 768px) {
    .car-fullscreen-modal .fullscreen-content {
        padding: 56px 88px;
    }
}

.car-fullscreen-modal .fullscreen-image {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--cz-r-sm);
    user-select: none;
    touch-action: pan-y;
}

.car-fullscreen-modal .fullscreen-close,
.car-fullscreen-modal .fullscreen-prev,
.car-fullscreen-modal .fullscreen-next {
    position: absolute;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fff; /* on-photo */
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.car-fullscreen-modal .fullscreen-close:hover,
.car-fullscreen-modal .fullscreen-prev:hover,
.car-fullscreen-modal .fullscreen-next:hover {
    background: rgba(255, 255, 255, 0.2);
}

.car-fullscreen-modal .fullscreen-close {
    top: 12px;
    right: 12px;
}

.car-fullscreen-modal .fullscreen-prev,
.car-fullscreen-modal .fullscreen-next {
    top: 50%;
    transform: translateY(-50%);
}

.car-fullscreen-modal .fullscreen-prev {
    left: 16px;
}

.car-fullscreen-modal .fullscreen-next {
    right: 16px;
}

@media (max-width: 767px) {
    .car-fullscreen-modal .fullscreen-prev,
    .car-fullscreen-modal .fullscreen-next {
        top: auto;
        bottom: 12px;
        transform: none;
    }
}

.car-fullscreen-modal .fullscreen-counter {
    position: absolute;
    left: 50%;
    bottom: 20px;
    margin: 0;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.car-fullscreen-modal .fullscreen-loading {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
}

/* ---- Spinner (loading only) ---- */

.cz-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(255, 255, 255, 0.18);
    border-top-color: var(--cz-red, #e51515);
    border-radius: 50%;
    animation: cz-spin 0.8s linear infinite;
}

@keyframes cz-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ==========================================================================
   Price panel
   ========================================================================== */

.cz-car .car-detail-calculator-inline {
    position: relative;
    padding: 24px 20px 20px;
    border-radius: var(--cz-r-lg);
    background: var(--cz-surface);
    box-shadow: inset 0 3px 0 var(--cz-red), 0 16px 40px rgba(0, 0, 0, 0.28);
}

@media (min-width: 768px) {
    .cz-car .car-detail-calculator-inline {
        padding: 28px 24px 24px;
    }
}

.cz-car .cz-price__title {
    margin: 0 0 6px;
    color: var(--cz-text-2);
    font-family: var(--cz-font);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    text-transform: none;
    letter-spacing: 0;
}

.cz-car .cz-price__title:focus {
    outline: none;
}

.cz-car .cz-price__title:focus-visible {
    outline: 2px solid var(--cz-red);
    outline-offset: 2px;
}

/* ---- States (data-state on .car-detail-calculator-inline) ---- */

.cz-car .car-detail-calculator-inline .calc-loading,
.cz-car .car-detail-calculator-inline .calc-error,
.cz-car .car-detail-calculator-inline .calc-on-request,
.cz-car .car-detail-calculator-inline .calculation-results {
    display: none;
}

.cz-car .car-detail-calculator-inline[data-state="loading"] .calc-loading,
.cz-car .car-detail-calculator-inline[data-state="error"] .calc-error,
.cz-car .car-detail-calculator-inline[data-state="on-request"] .calc-on-request,
.cz-car .car-detail-calculator-inline[data-state="ready"] .calculation-results,
.cz-car .car-detail-calculator-inline[data-state="needs-power"] .calculation-results {
    display: block;
}

/* needs-power: the customs lines wait for the power, the partial total says so */
.cz-car .car-detail-calculator-inline[data-state="needs-power"] [data-customs-row],
.cz-car .car-detail-calculator-inline[data-state="needs-power"] .calc-power,
.cz-car .car-detail-calculator-inline[data-state="needs-power"] .calc-disclaimer {
    display: none !important;
}

.cz-car .car-detail-calculator-inline[data-state="needs-power"] .calc-customs-total {
    visibility: hidden;
}

.cz-car .calc-customs-pending,
.cz-car .calc-total-note {
    display: none;
}

.cz-car .car-detail-calculator-inline[data-state="needs-power"] .calc-customs-pending,
.cz-car .car-detail-calculator-inline[data-state="needs-power"] .calc-total-note {
    display: block;
}

/* «Подробный расчёт»: ready keeps the breakdown collapsed until opened; needs-power shows it, no toggle */
.cz-car .cz-price__toggle {
    display: none;
}

.cz-car .car-detail-calculator-inline[data-state="ready"] .cz-price__toggle {
    display: flex;
}

.cz-car .car-detail-calculator-inline[data-state="ready"] .cz-price__details:not(.is-open) .cz-price__breakdown {
    display: none;
}

.cz-car .car-detail-calculator-inline[data-state="ready"] .cz-price__breakdown {
    margin-top: 16px;
}

/* ---- Loading / error / on request ---- */

.cz-car .car-detail-calculator-inline .cz-skel {
    background: var(--cz-skel-2, #303035);
}

.cz-car .calc-loading .cz-skel--total {
    width: 72%;
    height: 48px;
    margin: 6px 0 12px;
}

.cz-car .calc-loading-text {
    color: var(--cz-text-2);
    font-size: 14px;
}

.cz-car .calc-error-message {
    margin: 4px 0 14px;
    color: var(--cz-text);
}

.cz-car .calc-error-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cz-car .calc-on-request-title {
    margin: 2px 0 6px;
    color: var(--cz-text);
    font-family: var(--cz-display);
    font-size: 26px;
    font-weight: var(--cz-display-weight, 600);
    line-height: 1.2;
}

.cz-car .calc-on-request-text {
    color: var(--cz-text-2);
}

/* ---- The total ---- */

.cz-car .calc-total-value {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 12px;
    margin: 0;
    color: var(--cz-text);
    font-family: var(--cz-display);
    font-size: clamp(36px, 4vw, 48px);
    font-weight: var(--cz-display-weight, 600);
    line-height: 1.1;
    font-variant-numeric: tabular-nums lining-nums;
    letter-spacing: var(--cz-display-track, 0.005em);
}

.cz-car .calc-total-price {
    white-space: nowrap;
}

.cz-car .calc-amount-old {
    color: var(--cz-text-3);
    font-size: 0.5em;
    font-weight: 500;
    text-decoration-thickness: 1px;
    white-space: nowrap;
}

.cz-car .calc-total-note {
    margin: 8px 0 0;
    color: var(--cz-caution-text);
    font-size: 14px;
    line-height: 1.45;
}

.cz-car .calc-total-approx {
    margin-top: 10px;
}

.cz-car .calc-disclaimer {
    margin: 8px 0 0;
    color: var(--cz-text-2);
    font-size: 13px;
    line-height: 1.45;
}

.cz-car .calc-compare {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: var(--cz-r-md);
    background: var(--cz-raised);
}

.cz-car .calc-compare-diff {
    color: var(--cz-text);
    font-weight: 600;
}

.cz-car .calc-compare[data-direction="cheaper"] .calc-compare-diff {
    color: var(--cz-ok);
}

.cz-car .calc-compare[data-direction="dearer"] .calc-compare-diff {
    color: var(--cz-caution-text);
}

.cz-car .calc-compare-date {
    margin: 2px 0 6px;
    color: var(--cz-text-2);
    font-size: 13px;
}

/* ---- Contact (the site's Bricks popup trigger) ---- */

.cz-car .calc-contact-wrapper {
    margin-top: 20px;
}

.cz-car .calc-contact-wrapper .calc-contact-button,
.cz-car .calc-contact-wrapper .calc-contact-button.bricks-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    margin: 0;
    padding: 12px 20px;
    border: 0;
    border-radius: var(--cz-r-md);
    background: var(--cz-red);
    box-shadow: none;
    color: var(--cz-on-red, #fff);
    font-family: var(--cz-font);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    text-align: center;
    text-transform: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.cz-car .calc-contact-wrapper .calc-contact-button:hover {
    background: var(--cz-red-hover);
    color: var(--cz-on-red, #fff);
}

.cz-car .calc-contact-wrapper .calc-contact-button:focus-visible {
    outline: 2px solid var(--cz-red);
    outline-offset: 3px;
}

/* ---- Details: проходная, warnings, the «Подробный расчёт» toggle, power ---- */

.cz-car .cz-price__details {
    margin-top: 20px;
}

.cz-car .cz-price__toggle {
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 12px 16px;
    border: 1px solid var(--cz-line-strong);
    border-radius: var(--cz-r-md);
    background: transparent;
    box-shadow: none;
    color: var(--cz-text);
    font-family: var(--cz-font);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.cz-car .cz-price__toggle::after {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    margin: -4px 2px 0 0;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.15s ease;
}

.cz-car .cz-price__toggle[aria-expanded="true"]::after {
    margin-top: 4px;
    transform: rotate(-135deg);
}

.cz-car .cz-price__toggle:hover {
    background: var(--cz-raised);
    border-color: var(--cz-text-3);
}

.cz-car .cz-price__toggle:focus-visible {
    outline: 2px solid var(--cz-red);
    outline-offset: 2px;
}

.cz-car .customs-recalc-button {
    margin-bottom: 16px;
}

.cz-car .customs-recalc-button .cz-btn {
    width: 100%;
}

.cz-car .customs-recalc-hint {
    margin-top: 6px;
    color: var(--cz-text-2);
    font-size: 13px;
    line-height: 1.45;
}

.cz-car .calc-warnings {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cz-car .calc-warnings--warn {
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: var(--cz-r-md);
    background: var(--cz-caution-bg);
    color: var(--cz-caution-text);
    font-size: 14px;
    line-height: 1.5;
}

.cz-car .calc-warnings--warn li + li {
    margin-top: 6px;
}

.cz-car .calc-power {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
    padding: 12px 14px;
    border-radius: var(--cz-r-md);
    background: var(--cz-raised);
}

.cz-car .calc-power-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    grid-column: 1;
    color: var(--cz-text-2);
    font-size: 13px;
}

.cz-car .calc-power-head .calc-badge {
    padding: 1px 8px;
    font-size: 12px;
}

.cz-car .calc-power-value {
    grid-column: 1;
    margin-top: 2px;
    color: var(--cz-text);
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

.cz-car .calc-power-source,
.cz-car .calc-power-peak {
    grid-column: 1;
    color: var(--cz-text-2);
    font-size: 13px;
}

.cz-car .calc-power-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    grid-column: 2;
    grid-row: 1 / span 4;
    gap: 2px;
}

/* ---- Ledger ---- */

.cz-car .cz-ledger {
    margin-top: 16px;
}

.cz-car .cz-ledger__group {
    padding: 12px 0;
    border-bottom: 1px solid var(--cz-line);
}

.cz-car .cz-ledger__group:first-child {
    padding-top: 4px;
}

.cz-car .cz-ledger__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 4px;
    color: var(--cz-text);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}

.cz-car .cz-ledger__sum,
.cz-car .calc-amount,
.cz-car .calc-ledger-total {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cz-car .cz-ledger__sum .calc-amount-old {
    margin-right: 6px;
    font-size: 13px;
    font-weight: 400;
}

.cz-car .calc-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 3px 0;
    color: var(--cz-text-2);
    font-size: 14px;
    line-height: 1.45;
}

.cz-car .calc-row-label {
    min-width: 0;
}

.cz-car .calc-row-hint {
    display: block;
    color: var(--cz-text-3);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}

.cz-car .calc-row .calc-badge {
    margin-left: 4px;
    padding: 0 8px;
    font-size: 12px;
    vertical-align: 1px;
}

.cz-car .calc-amount {
    color: var(--cz-text);
}

.cz-car .calc-customs-pending {
    padding: 4px 0 2px;
}

.cz-car .calc-customs-pending p {
    margin-bottom: 10px;
    color: var(--cz-text-2);
    font-size: 14px;
}

.cz-car .calc-customs-pending .cz-btn {
    width: 100%;
}

.cz-car .cz-ledger__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding-top: 12px;
    color: var(--cz-text);
    font-size: 16px;
    font-weight: 600;
}

/* ---- Notes ---- */

.cz-car .calc-notes {
    margin-top: 16px;
    color: var(--cz-text-3);
    font-size: 12.5px;
    line-height: 1.5;
}

.cz-car .calc-rates-line {
    font-variant-numeric: tabular-nums;
}

.cz-car .calc-notes-more {
    margin-top: 10px;
}

.cz-car .calc-notes-more summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    color: var(--cz-text-2);
    font-size: 13px;
    cursor: pointer;
    list-style: none;
}

.cz-car .calc-notes-more summary::-webkit-details-marker {
    display: none;
}

.cz-car .calc-notes-more summary::after {
    content: "";
    width: 7px;
    height: 7px;
    margin-top: -3px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.15s ease;
}

.cz-car .calc-notes-more[open] summary::after {
    margin-top: 3px;
    transform: rotate(-135deg);
}

.cz-car .calc-warnings--info {
    margin-top: 4px;
    padding-left: 0;
    color: var(--cz-text-2);
    font-size: 13px;
}

.cz-car .calc-warnings--info li {
    position: relative;
    padding-left: 14px;
}

.cz-car .calc-warnings--info li + li {
    margin-top: 6px;
}

.cz-car .calc-warnings--info li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.62em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--cz-text-3);
}

/* ==========================================================================
   Sections: specs, condition, insurance, options
   ========================================================================== */

.cz-car .cz-sections {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.cz-car .cz-section {
    padding-top: 28px;
    border-top: 1px solid var(--cz-line);
}

.cz-car .cz-section__title {
    margin: 0 0 18px;
    color: var(--cz-text);
    font-family: var(--cz-display);
    font-size: 22px;
    font-weight: var(--cz-display-weight, 500);
    line-height: 1.25;
    letter-spacing: var(--cz-display-track, 0.005em);
    text-transform: var(--cz-display-case, none);
}

.cz-car .cz-section__count {
    margin-left: 6px;
    color: var(--cz-text-3);
    font-family: var(--cz-font);
    font-size: 15px;
    font-weight: 400;
}

.cz-car .cz-section__lead {
    margin: -10px 0 16px;
    color: var(--cz-text-2);
    font-size: 14px;
}

/* ---- Specs ---- */

.cz-car .cz-specs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 24px;
}

@media (min-width: 1100px) {
    .cz-car .cz-specs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.cz-car .cz-spec {
    min-width: 0;
}

.cz-car .cz-spec dt {
    margin-bottom: 2px;
    color: var(--cz-text-2);
    font-size: 13px;
    line-height: 1.4;
}

.cz-car .cz-spec dd {
    color: var(--cz-text);
    font-size: 15px;
    line-height: 1.45;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

@media (max-width: 1099px) {
    .cz-car .cz-spec--wide {
        grid-column: 1 / -1;
    }
}

.cz-car .cz-spec--customs {
    grid-column: 1 / -1;
}

.cz-car .cz-spec--customs dd {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
}

.cz-car .customs-status-tip {
    color: var(--cz-text-2);
    font-size: 14px;
}

/* ---- Condition (inspection) ---- */

.cz-car .cz-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}

.cz-car .cz-chips:empty {
    display: none;
}

.cz-car .cz-chips .cz-chip {
    white-space: normal;
}

.cz-car .cz-inspection-summary {
    margin: 0 0 20px;
    color: var(--cz-text);
}

.cz-car .cz-inspection-summary:empty {
    display: none;
}

.cz-car .cz-inspection-none {
    color: var(--cz-text-2);
}

.cz-car .diagram-container {
    padding: 16px;
    border-radius: var(--cz-r-lg);
    background: var(--cz-surface);
}

@media (min-width: 768px) {
    .cz-car .diagram-container {
        padding: 24px;
    }
}

.cz-car .car-views {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 24px;
}

.cz-car .car-view {
    flex: 1 1 260px;
    max-width: 380px;
    margin: 0;
}

/* «Кузовные панели · без отметок» / «Силовые элементы · отметок: 3» under each drawing */
.cz-car .car-view__caption {
    margin: 8px 0 0;
    color: var(--cz-text-2);
    font-size: 13px;
    line-height: 1.4;
    text-align: center;
}

/* Panels marked on the act that the drawings have no spot for */
.cz-car .cz-inspection-unplaced {
    margin: 16px 0 0;
    color: var(--cz-text-2);
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
}

.cz-car .car-diagram-wrapper {
    position: relative;
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
}

.cz-car .car-diagram-image {
    display: block;
    width: 100%;
    height: auto;
    /* The drawing is black lines on white: shown as light lines on the dark surface */
    filter: invert(1);
    mix-blend-mode: lighten;
    opacity: 0.7;
}

.cz-car .damage-markers-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.cz-car .damage-marker {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    transform: translate(-50%, -50%);
    cursor: pointer;
    pointer-events: auto;
}

/* 22 px like the legend: Encar's coordinates are drawn for small badges, and neighbouring parts (an apron and its
   rail) sit about 25 px apart on a 380 px drawing */
.cz-car .damage-marker .marker-text {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 2px solid var(--cz-surface);
    border-radius: 50%;
    background: var(--marker, var(--cz-danger));
    color: #fff; /* on-photo */
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

.cz-car .damage-marker.active,
.cz-car .damage-marker:hover {
    z-index: 5;
}

.cz-car .damage-marker.active .marker-text,
.cz-car .damage-marker:hover .marker-text {
    box-shadow: 0 0 0 2px #fff; /* on-photo */
}

.cz-car .damage-type-x,
.cz-car .legend-icon.damage-x {
    --marker: #e5484d;
}

.cz-car .damage-type-w,
.cz-car .legend-icon.damage-w {
    --marker: #3e7bfa;
}

.cz-car .damage-type-wc,
.cz-car .legend-icon.damage-wc {
    --marker: #6e56cf;
}

.cz-car .damage-type-c,
.cz-car .legend-icon.damage-c {
    --marker: #e8792b;
}

.cz-car .damage-type-a,
.cz-car .legend-icon.damage-a {
    --marker: #7d808a;
}

.cz-car .damage-type-u,
.cz-car .legend-icon.damage-u {
    --marker: #2a9d97;
}

.cz-car .damage-type-t,
.cz-car .legend-icon.damage-t {
    --marker: #a26b35;
}

.cz-car .damage-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    z-index: 10;
    min-width: 140px;
    max-width: 220px;
    padding: 8px 12px;
    border-radius: var(--cz-r-sm);
    background: var(--cz-tooltip-bg, #0f0f11);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    color: var(--cz-text);
    text-align: center;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%);
    transition: opacity 0.12s ease, visibility 0.12s ease;
}

.cz-car .damage-tooltip.show {
    opacity: 1;
    visibility: visible;
}

.cz-car .damage-tooltip.tooltip-below {
    top: calc(100% + 8px);
    bottom: auto;
}

.cz-car .damage-tooltip.tooltip-right {
    left: 0;
    transform: none;
}

.cz-car .damage-tooltip.tooltip-left {
    left: auto;
    right: 0;
    transform: none;
}

.cz-car .damage-tooltip .tooltip-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}

.cz-car .damage-tooltip .tooltip-type {
    margin-top: 2px;
    color: var(--cz-text-2);
    font-size: 12px;
}

.cz-car .damage-tooltip .tooltip-arrow {
    display: none;
}

.cz-car .diagram-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 20px;
    margin: 20px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid var(--cz-line);
    list-style: none;
}

.cz-car .legend-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--cz-text-2);
    font-size: 13px;
}

.cz-car .legend-icon {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--marker);
    color: #fff; /* on-photo */
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

/* ---- Insurance history ---- */

.cz-car .cz-insurance-loading {
    color: var(--cz-text-2);
}

.cz-car .cz-insurance-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-bottom: 16px;
}

.cz-car .cz-insurance-status p {
    color: var(--cz-text);
}

.cz-car .cz-rows {
    border-top: 1px solid var(--cz-line);
}

.cz-car .cz-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--cz-line);
}

.cz-car .cz-row dt {
    color: var(--cz-text-2);
    font-size: 14px;
}

.cz-car .cz-row dd {
    color: var(--cz-text);
    font-size: 15px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.cz-car .cz-disclosure {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--cz-text);
    font-size: 15px;
    cursor: pointer;
}

.cz-car .cz-disclosure:hover .cz-disclosure__label {
    text-decoration: underline;
    text-decoration-color: var(--cz-red);
    text-underline-offset: 3px;
}

.cz-car .cz-chevron {
    flex: none;
    transition: transform 0.15s ease;
}

.cz-car .cz-disclosure[aria-expanded="true"] .cz-chevron {
    transform: rotate(180deg);
}

.cz-car .cz-cases {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

.cz-car .cz-case {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2px 20px;
    padding: 14px 0;
    border-top: 1px solid var(--cz-line);
}

@media (min-width: 640px) {
    .cz-car .cz-case {
        grid-template-columns: 104px minmax(0, 1fr) auto;
    }
}

.cz-car .cz-case__date {
    color: var(--cz-text-2);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.cz-car .cz-case__title {
    color: var(--cz-text);
}

.cz-car .cz-case__parts {
    color: var(--cz-text-2);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.cz-car .cz-case__sum {
    color: var(--cz-text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media (min-width: 640px) {
    .cz-car .cz-case__sum {
        text-align: right;
    }
}

/* ---- Options ---- */

.cz-car .options-categories {
    display: grid;
    gap: 24px;
}

.cz-car .option-category .category-title {
    margin: 0 0 10px;
    color: var(--cz-text-2);
    font-family: var(--cz-font);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    text-transform: none;
    letter-spacing: 0;
}

.cz-car .option-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
    gap: 0 24px;
}

.cz-car .option-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 6px 0;
    border: 0;
    border-bottom: 1px solid var(--cz-line);
    border-radius: 0;
    background: none;
    color: var(--cz-text);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;
    text-align: left;
    text-transform: none;
    cursor: pointer;
}

.cz-car .option-badge:hover .option-name {
    text-decoration: underline;
    text-decoration-color: var(--cz-red);
    text-underline-offset: 3px;
}

.cz-car .options-more {
    margin-top: 4px;
}

.cz-car .option-icon {
    flex: none;
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: grayscale(1) brightness(1.7);
    opacity: 0.75;
}

.cz-car .option-bullet {
    flex: none;
    width: 22px;
    height: 22px;
    position: relative;
}

.cz-car .option-bullet::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    margin: -2.5px 0 0 -2.5px;
    border-radius: 50%;
    background: var(--cz-text-3);
}

/* ==========================================================================
   Dialogs in <body>: option description, power modal, tooltip, notification
   ========================================================================== */

.option-modal,
.hp-calculator-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    font-family: var(--cz-font);
    font-size: 15px;
    line-height: 1.55;
    color: var(--cz-text);
    text-align: left;
}

.option-modal-overlay,
.hp-calculator-overlay {
    position: absolute;
    inset: 0;
    background: rgba(8, 8, 9, 0.72);
}

.option-modal-content,
.hp-calculator-content {
    position: relative;
    width: 100%;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    padding: 28px 24px 24px;
    border-radius: var(--cz-r-lg);
    background: var(--cz-surface);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}

.option-modal-content {
    max-width: 440px;
}

.hp-calculator-content {
    max-width: 480px;
}

.option-modal-close,
.hp-calculator-close {
    position: absolute;
    top: 10px;
    right: 10px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--cz-text-2);
    cursor: pointer;
}

.option-modal-close:hover,
.hp-calculator-close:hover {
    background: var(--cz-raised);
    color: var(--cz-text);
}

.option-modal-title,
.hp-calculator-modal .hp-modal-title {
    margin: 0 40px 10px 0;
    color: var(--cz-text);
    font-family: var(--cz-display);
    font-size: 22px;
    font-weight: var(--cz-display-weight, 500);
    line-height: 1.25;
    text-transform: var(--cz-display-case, none);
    letter-spacing: var(--cz-display-track, 0);
}

.option-modal-title::first-letter {
    text-transform: uppercase;
}

.option-modal-description {
    margin: 0 0 20px;
    color: var(--cz-text-2);
}

body.modal-open {
    overflow: hidden;
}

/* ---- Power modal ---- */

.hp-calculator-modal .hp-calculator-notice {
    margin: 0 0 20px;
    color: var(--cz-text-2);
    font-size: 14px;
}

.hp-calculator-modal .hp-calculator-form {
    margin: 0;
}

.hp-calculator-modal .hp-input-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hp-calculator-modal .hp-input-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.hp-calculator-modal .hp-input-label {
    color: var(--cz-text);
    font-size: 14px;
}

.hp-calculator-modal .hp-unit-toggle {
    display: inline-flex;
    margin: 0;
    padding: 3px;
    border: 0;
    border-radius: var(--cz-r-sm);
    background: var(--cz-raised);
}

.hp-calculator-modal .hp-unit-option {
    position: relative;
    display: inline-flex;
    cursor: pointer;
}

.hp-calculator-modal .hp-unit-option input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.hp-calculator-modal .hp-unit-option span {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 6px;
    color: var(--cz-text-2);
    font-size: 14px;
}

.hp-calculator-modal .hp-unit-option input:checked + span {
    background: var(--cz-line-strong);
    color: var(--cz-text);
}

.hp-calculator-modal .hp-unit-option input:focus-visible + span {
    outline: 2px solid var(--cz-red);
    outline-offset: 1px;
}

.hp-calculator-modal #hp-input {
    width: 100%;
    height: 52px;
    padding: 0 14px;
    border: 1px solid var(--cz-line-strong);
    border-radius: var(--cz-r-md);
    background: var(--cz-page);
    color: var(--cz-text);
    font-family: var(--cz-font);
    font-size: 20px;
    font-variant-numeric: tabular-nums;
    box-shadow: none;
}

.hp-calculator-modal #hp-input:focus {
    outline: none;
    border-color: var(--cz-red);
    box-shadow: 0 0 0 1px var(--cz-red);
}

.hp-calculator-modal #hp-input.invalid {
    border-color: var(--cz-danger);
}

.hp-calculator-modal .hp-input-hint,
.hp-calculator-modal .hp-input-convert {
    color: var(--cz-text-2);
    font-size: 13px;
}

.hp-calculator-modal .hp-input-error {
    color: var(--cz-danger-text);
    font-size: 13px;
}

.hp-calculator-modal .hp-car-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
    margin: 20px 0;
    padding: 14px;
    border-radius: var(--cz-r-md);
    background: var(--cz-raised);
}

.hp-calculator-modal .hp-car-summary dt {
    color: var(--cz-text-2);
    font-size: 12.5px;
}

.hp-calculator-modal .hp-car-summary dd {
    margin: 0;
    color: var(--cz-text);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.hp-calculator-modal .hp-calculator-error {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 10px;
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: var(--cz-r-md);
    background: var(--cz-danger-bg);
    color: var(--cz-danger-text);
    font-size: 14px;
}

.hp-calculator-modal .hp-calculator-error svg {
    flex: none;
    margin-top: 1px;
}

.hp-calculator-modal .hp-calculator-error .error-message {
    flex: 1 1 0;
    min-width: 0;
}

.hp-calculator-modal .hp-reload-btn {
    flex-basis: 100%;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid currentColor;
    border-radius: var(--cz-r-sm);
    background: transparent;
    color: inherit;
    font-size: 14px;
    cursor: pointer;
}

.hp-calculator-modal .hp-form-actions .cz-btn {
    width: 100%;
    min-height: 52px;
    font-size: 16px;
}

.hp-calculator-modal .hp-calculator-loading {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    color: var(--cz-text-2);
}

.hp-calculator-modal .hp-loading-text {
    margin: 0;
}

/* ---- Customs badge tooltip (tap on the key-facts chip) ---- */

.customs-tooltip-popup {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 100000;
    width: min(360px, calc(100vw - 32px));
    opacity: 0;
    transform: translateX(-50%);
    transition: opacity 0.15s ease;
    font-family: var(--cz-font);
}

.customs-tooltip-popup.show {
    opacity: 1;
}

.customs-tooltip-popup .customs-tooltip-content {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 12px 14px 16px;
    border-radius: var(--cz-r-md);
    background: var(--cz-raised);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    color: var(--cz-text);
    font-size: 14px;
    line-height: 1.5;
}

.customs-tooltip-popup p {
    flex: 1 1 0;
    margin: 0;
}

.customs-tooltip-popup .customs-tooltip-close {
    flex: none;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--cz-text-2);
    font-size: 14px;
    cursor: pointer;
}

/* ---- Notification toast ---- */

.car-detail-notification {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 100000;
    display: none;
    width: max-content;
    max-width: calc(100vw - 32px);
    padding: 12px 16px;
    border-radius: var(--cz-r-md);
    background: var(--cz-raised);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    color: var(--cz-text);
    font-family: var(--cz-font);
    font-size: 14px;
    line-height: 1.5;
    transform: translateX(-50%);
}

.car-detail-notification.error {
    color: var(--cz-danger-text);
}

/* ==========================================================================
   Touch targets, reduced motion
   ========================================================================== */

@media (pointer: coarse) {
    .cz-car .calc-link-btn {
        min-height: 44px;
    }

    .cz-car .damage-marker {
        width: 40px;
        height: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cz-car *,
    .cz-car *::before,
    .cz-car *::after,
    .hp-calculator-modal *,
    .option-modal *,
    .car-fullscreen-modal *,
    .customs-tooltip-popup,
    .car-detail-notification {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* UI v6 type (R5): live from R8 (CARZAKAZ_UI_V6) */

/* A hidden damage tooltip (opacity 0, 140 px minimum) still counts as scrollable overflow: at 320 px the centred one of a
   marker near the right edge pushed the page 2 px wider. Hidden ones leave the layout; the shown one is unchanged. */
[data-cz-ui="6"] .cz-car .damage-tooltip:not(.show) {
    display: none;
}