/**
 * Kultiva — leasing page. Boards: "Leasing" (desktop), "Tablet — Leasing",
 * "Mobile — Leasing" and its Armenian copy. From 992 px the calculator is a
 * white card on the Night band; below it, the steps follow the page head.
 */

/* ============================================
   PAGE HEAD AND KEY FIGURES
   ============================================ */

.k-ltop__inner {
    display: flex;
    flex-direction: column;
}

.k-lhead {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 calc(-1 * var(--k-gutter));
    padding: 0 var(--k-gutter) 20px;
    background: var(--k-ground);
}

.k-lhead .k-crumbs ol {
    padding-top: 16px;
}

/* Sizes, line heights and stretch come from the h1/h2 tokens in base.css */
.k-lhead h1 {
    margin: 0;
    color: var(--k-night);
}

.k-lhead__lead {
    margin: 0;
    color: var(--k-body);
    font-size: 15px;
    line-height: 1.5;
}

.k-lfacts {
    display: none;
}


/* ============================================
   CALCULATOR
   ============================================ */

.k-calc {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 20px 0 28px;
    scroll-margin-top: 72px;
}

.k-calc__head {
    display: none;
}

.k-step {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.k-step__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.k-step__title {
    float: none;
    width: auto;
    margin: 0 0 2px;
    padding: 0;
    color: var(--k-night);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.3;
}

.k-step__count {
    color: var(--k-muted);
    font-size: 14px;
}

.k-step__note {
    margin: 0;
    color: var(--k-muted);
    font-size: 14px;
    line-height: 1.45;
}

/* 1 · Your machines */
.k-machines {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--k-line);
    list-style: none;
}

.k-machine {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    grid-template-areas:
        "photo text remove"
        "photo price remove";
    align-items: center;
    column-gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--k-line);
}

.k-machine__photo {
    grid-area: photo;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    padding: 4px;
    border-radius: var(--k-radius-control);
    background: var(--k-ground);
    color: var(--k-muted);
    font-size: 22px;
    isolation: isolate;
}

.k-machine__photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.k-machine__text {
    grid-area: text;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.k-machine__name {
    color: var(--k-night);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
}

.k-machine__name:hover {
    color: var(--k-green);
    text-decoration: underline;
}

.k-machine__kind {
    color: var(--k-muted);
    font-size: 14px;
}

.k-machine__price {
    grid-area: price;
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.k-machine__remove-form {
    grid-area: remove;
    margin: 0;
}

.k-machine__remove {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--k-line);
    border-radius: var(--k-radius-control);
    background: var(--k-white);
    color: var(--k-body);
    font-size: 17px;
}

.k-machine__remove:hover {
    border-color: var(--k-danger);
    color: var(--k-danger);
}

.k-machines__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.k-machines__foot .k-btn {
    min-height: 44px;
}

.k-machines__total {
    margin-left: auto;
    font-size: 16px;
    font-weight: 700;
}

.k-machines__total strong {
    margin-left: 6px;
    color: var(--k-night);
    font-size: 20px;
    font-weight: 800;
    font-stretch: 88%;
    font-variant-numeric: tabular-nums;
}

/* Removed at once; Undo stays 6 seconds, longer while focused or hovered (Bootstrap toast) */
.k-undo.toast {
    display: none;
    width: 100%;
    max-width: none;
    border: 0;
    border-radius: var(--k-radius-button);
    background: var(--k-night);
    color: var(--k-white);
    box-shadow: none;
    font-size: 15px;
}

.k-undo.toast.show,
.k-undo.toast.showing {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    padding: 0 6px 0 16px;
}

.k-undo form {
    margin: 0;
}

.k-undo__button {
    min-height: 44px;
    padding: 0 14px;
    border: 0;
    border-radius: var(--k-radius-nav);
    background: transparent;
    color: var(--k-harvest);
    font-size: 15px;
    font-weight: 800;
}

.k-lempty {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 18px;
    border: 1.5px dashed #9FAA98;
    border-radius: var(--k-radius-card);
    background: var(--k-ground);
}

.k-lempty p {
    flex: 1 1 260px;
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
}

.k-lempty strong {
    display: block;
    color: var(--k-night);
    font-size: 18px;
}

.k-lempty form {
    margin: 0;
}

/* 2–4 · Down payment, term, rate */
.k-lform {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.k-lform__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 22px 18px;
}

.k-choices.k-lchips {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.k-lchips .k-choice {
    gap: 4px;
    min-height: 46px;
    font-variant-numeric: tabular-nums;
}

.k-lrate {
    display: inline-flex;
    flex-direction: column;
    align-self: flex-start;
    gap: 2px;
    margin: 0;
    padding: 8px 14px;
    border-radius: var(--k-radius-button);
    background: var(--k-ink);
    color: var(--k-white);
}

.k-lrate span {
    color: var(--k-on-night-2);
    font-size: 13px;
}

.k-lform .k-nojs {
    align-self: flex-start;
}

/* The result */
.k-result {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    border-radius: 16px;
    background: var(--k-ground);
}

.k-result__label {
    margin: 0;
    color: var(--k-muted);
    font-size: 14px;
}

.k-result__main {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    margin: 0;
}

.k-result__amount {
    color: var(--k-night);
    font-size: 40px;
    font-weight: 800;
    font-stretch: 85%;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.k-result__per {
    color: var(--k-muted);
    font-size: 15px;
}

.k-result__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding-top: 14px;
    border-top: 1px solid var(--k-line);
    font-size: 14px;
}

.k-result__grid dt {
    color: var(--k-muted);
    font-weight: 400;
}

.k-result__grid dd {
    margin: 0;
    color: var(--k-ink);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.k-result__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.k-result__actions > .k-btn,
.k-result__chat {
    flex: 1 1 240px;
}

.k-result__actions .k-btn {
    min-height: 54px;
}

.k-lpdf {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 8px;
    min-height: 44px;
    margin-top: -10px;
    color: var(--k-ink);
    font-weight: 700;
}

.k-lnotice {
    display: flex;
    gap: 12px;
    padding: 18px;
    border-radius: var(--k-radius-card);
    background: var(--k-warning-bg);
    color: var(--k-warning);
    font-size: 16px;
    line-height: 1.5;
}

.k-lnotice .bi {
    font-size: 20px;
    line-height: 1.3;
}

.k-lnotice p {
    margin: 0;
}

.k-lfine {
    margin: 0;
    color: var(--k-muted);
    font-size: 13px;
    line-height: 1.5;
}

.k-lfine a {
    color: var(--k-ink);
    font-weight: 700;
}


/* ============================================
   A SPECIALIST
   ============================================ */

.k-lhelp {
    padding: 28px 0 36px;
    background: var(--k-ground);
}

.k-lhelp__inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.k-lhelp h2 {
    margin: 0 0 6px;
    color: var(--k-night);
}

.k-lhelp__text p,
.k-lhelp__contact p {
    margin: 0;
    color: var(--k-body);
}

.k-lhelp__contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}


/* ============================================
   PHONE AND TABLET SUMMARY BAR
   Without JavaScript it stays; with it, it shows while the result card is off screen.
   ============================================ */

.k-lbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px max(10px, env(safe-area-inset-bottom)) 16px;
    background: var(--k-white);
    box-shadow: var(--k-shadow-bar);
    transition: transform var(--k-base) var(--k-ease), visibility 0s linear 0s;
}

.js .k-lbar:not(.is-shown) {
    transform: translateY(110%);
    visibility: hidden;
    transition: transform var(--k-base) var(--k-ease), visibility 0s linear var(--k-base);
}

.k-lbar__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    color: var(--k-body);
    font-size: 13.5px;
    line-height: 1.35;
}

.k-lbar__text strong {
    white-space: nowrap;
    color: var(--k-night);
    font-size: 17px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.k-lbar .k-btn {
    flex: 0 0 auto;
}

body:has(.k-lbar) {
    padding-bottom: 76px;
}

@media (prefers-reduced-motion: reduce) {
    .k-lbar,
    .js .k-lbar:not(.is-shown) {
        transition: none;
    }
}


/* ============================================
   768 PX AND UP
   ============================================ */

@media (min-width: 768px) {
    .k-lhead__lead {
        font-size: 17px;
    }

    .k-machine {
        grid-template-columns: 56px minmax(0, 1fr) auto auto;
        grid-template-areas: "photo text price remove";
        column-gap: 14px;
    }

    .k-machine__price {
        font-size: 16px;
    }

    .k-result {
        padding: 22px;
    }

    .k-result__amount {
        font-size: 52px;
    }


    .k-lhelp__inner {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 20px 48px;
    }

    .k-lhelp__text {
        flex: 1 1 420px;
    }
}


/* ============================================
   992 PX AND UP: THE CALCULATOR CARD ON THE NIGHT BAND
   ============================================ */

@media (min-width: 992px) {
    .k-ltop {
        position: relative;
        overflow: hidden;
        background: var(--k-night);
        color: var(--k-on-night);
    }

    .k-ltop::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: repeating-linear-gradient(100deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 22px);
        pointer-events: none;
    }

    .k-ltop__inner {
        position: relative;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 48px;
        padding-top: clamp(40px, 5vw, 80px);
        padding-bottom: clamp(40px, 5vw, 80px);
    }

    .k-lhead {
        flex: 1 1 440px;
        gap: 22px;
        min-width: 0;
        margin: 0;
        padding: 12px 0 0;
        background: none;
    }

    .k-lhead .k-crumbs ol {
        padding-top: 0;
        color: var(--k-on-night-muted);
    }

    .k-lhead .k-crumbs a {
        color: var(--k-on-night-2);
    }

    .k-lhead .k-crumbs [aria-current] {
        color: var(--k-on-night);
    }

    .k-lhead h1 {
        color: var(--k-on-night);
        overflow-wrap: break-word;
    }

    /* Armenian runs about a quarter longer, and "գյուղատնտեսական" is one word */
    html[lang="hy"] .k-lhead h1 {
        font-size: clamp(36px, 3.4vw, 54px);
        line-height: 1.04;
    }

    .k-lhead__lead {
        max-width: 540px;
        color: var(--k-on-night-2);
        font-size: 19px;
        line-height: 1.55;
    }

    .k-lfacts {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        margin: 8px 0 0;
    }

    .k-lfacts div {
        padding: 16px;
        border: 1px solid var(--k-on-night-edge);
        border-radius: var(--k-radius-card);
        background: rgba(255, 255, 255, 0.06);
    }

    .k-lfacts dt {
        color: var(--k-on-night-2);
        font-size: 13px;
        font-weight: 400;
    }

    .k-lfacts dd {
        margin: 4px 0 0;
        font-size: 30px;
        font-weight: 800;
        font-stretch: 85%;
    }

    .k-lfacts__gold {
        color: var(--k-harvest);
    }

    .k-calc {
        flex: 1 1 520px;
        min-width: 0;
        padding: 28px;
        border-radius: var(--k-radius-panel);
        background: var(--k-white);
        color: var(--k-ink);
        box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
    }

    .k-calc__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .k-calc__head h2 {
        margin: 0;
        color: var(--k-night);
        font-size: 24px;
        font-weight: 800;
        font-stretch: 88%;
    }

    .k-calc__tag {
        color: var(--k-muted);
        font-family: var(--k-mono);
        font-size: 12px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .k-step__title {
        color: var(--k-muted);
        font-family: var(--k-mono);
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .k-lhelp {
        padding: 72px 0;
    }

    .k-lbar {
        display: none;
    }

    body:has(.k-lbar) {
        padding-bottom: 0;
    }
}


/* Wide screens: four figures in a row, as on the board */
@media (min-width: 1400px) {
    .k-result__grid,
    .k-lfacts {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}