/*
 * KSAplate car-value block (.kv-*) — 2026-10-04
 * Layout follows mobile.de's "Weitere Services" card, re-skinned for KSAplate:
 * brand green instead of purple, NO gold (owner rule), unDraw art on white tiles
 * instead of line icons. Plain CSS on purpose: the Tailwind bundle is frozen.
 * Used by partials/car-value-widget (on /cars + car detail) and /car-value itself.
 * Logical properties throughout so /ar and /ur mirror without a second rule set.
 */
.kv {
    --kv-bg: #161918;
    --kv-line: rgba(255, 255, 255, .09);
    --kv-ink: #f4f4f5;
    --kv-mute: #a1a1aa;
    --kv-field: #202423;
    --kv-field-line: #4b5150;
    --kv-green: var(--ksa-green, #006C35);
    --kv-green-hover: #00843D;
    --kv-green-hi: #2fb36b;
    --kv-box: #0b2416;

    box-sizing: border-box;
    width: 100%;
    background: var(--kv-bg);
    border: 1px solid var(--kv-line);
    border-radius: 24px;
    padding: 2rem 1.25rem;
    color: var(--kv-ink);
    text-align: start;
    line-height: 1.5;
}
.kv *, .kv *::before, .kv *::after { box-sizing: border-box; }
@media (min-width: 768px) { .kv { padding: 2.5rem 2.25rem; } }

.kv-title { margin: 0 0 1.75rem; font-size: clamp(1.6rem, 3.6vw, 2.25rem); font-weight: 800; letter-spacing: -.01em; line-height: 1.15; color: #fff; }
.kv-h { margin: 0 0 .35rem; font-size: clamp(1.2rem, 2.4vw, 1.5rem); font-weight: 800; line-height: 1.3; color: #fff; }
.kv-sub { margin: 0 0 1.25rem; font-size: 1rem; color: #d4d4d8; }
.kv-rule { height: 1px; border: 0; background: var(--kv-line); margin: 2rem 0; }

/* --- Row: make | model | button --------------------------------------- */
.kv-row { display: grid; gap: .875rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .kv-row { grid-template-columns: 1fr 1fr 1fr; gap: 1.25rem; } }

.kv-select { position: relative; }
.kv-select select,
.kv-input {
    width: 100%;
    height: 56px;
    margin: 0;
    border: 1px solid var(--kv-field-line);
    border-radius: 12px;
    background: var(--kv-field);
    color: #fff;
    font: inherit;
    font-size: 1.05rem;
    padding-inline: 1.1rem;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.kv-select select {
    appearance: none;
    -webkit-appearance: none;
    padding-inline-end: 4.25rem;
    cursor: pointer;
}
/* mobile.de's split caret: a divider, then a solid triangle */
.kv-select::before {
    content: "";
    position: absolute;
    inset-block: 1px;
    inset-inline-end: 3.25rem;
    width: 1px;
    background: var(--kv-field-line);
    pointer-events: none;
}
.kv-select::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: 1.15rem;
    width: 0;
    height: 0;
    margin-block-start: -3px;
    border-inline: 7px solid transparent;
    border-block-start: 8px solid #e4e4e7;
    pointer-events: none;
}
.kv-select select:focus,
.kv-input:focus { border-color: var(--kv-green-hi); box-shadow: 0 0 0 3px rgba(47, 179, 107, .22); }
.kv-select select:disabled { opacity: .5; cursor: not-allowed; }
.kv-select select option { background: #202423; color: #fff; }
.kv-input::placeholder { color: #71717a; }

.kv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    height: 56px;
    padding-inline: 1.5rem;
    border: 0;
    border-radius: 12px;
    background: var(--kv-green);
    color: #fff !important;
    font: inherit;
    font-size: 1.05rem;
    font-weight: 800;
    text-decoration: none !important;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, transform .15s ease;
}
.kv-btn:hover { background: var(--kv-green-hover); }
.kv-btn:active { transform: translateY(1px); }
.kv-btn:disabled { opacity: .6; cursor: progress; }
.kv-btn--block { width: 100%; }
.kv-btn--ghost { background: transparent; border: 1px solid var(--kv-field-line); color: var(--kv-ink) !important; }
.kv-btn--ghost:hover { background: rgba(255, 255, 255, .05); }

/* --- The 3-step box (mobile.de's CHECK24 panel) ------------------------ */
.kv-box {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
    margin-top: 1.5rem;
    padding: 1.75rem 1.25rem;
    border-radius: 20px;
    background:
        radial-gradient(40rem 16rem at 100% 0, rgba(0, 108, 53, .35), transparent 70%),
        var(--kv-box);
}
@media (min-width: 900px) {
    .kv-box { grid-template-columns: minmax(0, 1fr) auto; gap: 0; padding: 2.5rem 2.5rem 2.5rem 2rem; }
}
.kv-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.75rem; }
.kv-step { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 1.25rem; align-items: center; }
.kv-step-art {
    width: 88px;
    height: 88px;
    border-radius: 22px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .55rem;
    box-shadow: 0 10px 24px -14px rgba(47, 179, 107, .8);
}
.kv-step-art img { width: 100%; height: 100%; object-fit: contain; display: block; }
.kv-step-h { margin: 0 0 .25rem; font-size: 1.15rem; font-weight: 800; color: #fff; line-height: 1.3; }
.kv-step-p { margin: 0; color: var(--kv-mute); font-size: .95rem; line-height: 1.6; }
.kv-step.is-active .kv-step-art { outline: 3px solid var(--kv-green-hi); outline-offset: 3px; }
.kv-step.is-done .kv-step-h::after { content: " ✓"; color: var(--kv-green-hi); }

.kv-aside {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 1.25rem;
    padding-block-start: 1.5rem;
    border-block-start: 1px solid rgba(255, 255, 255, .12);
}
@media (min-width: 900px) {
    .kv-aside {
        align-items: flex-end;
        min-width: 15rem;
        margin-inline-start: 2rem;
        padding-block-start: 0;
        padding-inline-start: 2.5rem;
        border-block-start: 0;
        border-inline-start: 1px solid rgba(255, 255, 255, .12);
        text-align: end;
    }
}
.kv-by { display: flex; flex-direction: column; align-items: inherit; line-height: 1.1; }
.kv-by small { color: var(--kv-mute); font-size: .9rem; margin-bottom: .2rem; }
.kv-mark { font-size: 1.75rem; font-weight: 900; font-style: italic; letter-spacing: -.02em; color: #fff; }
.kv-mark span { color: var(--kv-green-hi); font-weight: 700; }

/* --- /car-value: progress + forms ------------------------------------- */
.kv-progress { list-style: none; display: flex; gap: .5rem; margin: 0 0 1.5rem; padding: 0; counter-reset: kv; }
.kv-progress li {
    counter-increment: kv;
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 1;
    padding: .55rem .75rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, .04);
    color: var(--kv-mute);
    font-size: .85rem;
    font-weight: 700;
}
.kv-progress li::before {
    content: counter(kv);
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: .8rem;
}
.kv-progress li.is-active { background: rgba(0, 108, 53, .28); color: #fff; }
.kv-progress li.is-active::before,
.kv-progress li.is-done::before { background: var(--kv-green); }
.kv-progress li.is-done { color: #d4d4d8; }

.kv-grid2 { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .kv-grid2 { grid-template-columns: 1fr 1fr; } }
.kv-label { display: block; margin-bottom: .4rem; color: var(--kv-mute); font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.kv-err { margin-top: .35rem; color: #f87171; font-size: .82rem; font-weight: 600; }
.kv-consent { margin: .25rem 0 0; color: var(--kv-mute); font-size: .82rem; line-height: 1.6; }
.kv-consent a { color: var(--kv-green-hi); text-decoration: underline; text-underline-offset: 2px; }
.kv-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.kv-actions .kv-btn { flex: 1 1 14rem; }
.kv-hp { position: absolute !important; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; }
.kv-carline { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 1.25rem; padding: .75rem 1rem; border-radius: 12px; background: rgba(255, 255, 255, .04); color: #e4e4e7; font-weight: 700; }
.kv-carline i { color: var(--kv-green-hi); }
.kv-link { background: none; border: 0; padding: 0; color: var(--kv-green-hi); font: inherit; font-size: .9rem; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; margin-inline-start: auto; }

/* Light pages (/cars, car detail): the card keeps its dark face, but needs air. */
.kv-wrap { margin-block: 2.5rem; }