/**
 * Kultiva — shared components: buttons, links, focus, forms, alerts, cards,
 * chips, dialogs. Every class is k-*, apart from the Bootstrap controls the
 * site still uses (forms, alerts, modal, offcanvas), which are restyled here.
 * Values from "Handoff — states".
 */

/* ============================================
   BUTTONS
   Primary: the one main action per view, 52 px. Secondary: outlined, 48 px.
   ============================================ */

.k-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 18px;
    border: 1.5px solid transparent;
    border-radius: var(--k-radius-button);
    background: transparent;
    color: var(--k-ink);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--k-fast) ease-out, border-color var(--k-fast) ease-out, color var(--k-fast) ease-out;
}

.k-btn .bi {
    font-size: 20px;
    line-height: 1;
}

.k-btn--primary {
    min-height: 52px;
    padding: 0 20px;
    border-color: var(--k-green);
    background: var(--k-green);
    color: var(--k-white);
    font-size: 16px;
    font-weight: 800;
}

.k-btn--primary:hover {
    border-color: var(--k-green-dark);
    background: var(--k-green-dark);
    color: var(--k-white);
}

.k-btn--primary:active {
    border-color: var(--k-green-press);
    background: var(--k-green-press);
    color: var(--k-white);
}

.k-btn--secondary {
    border-color: var(--k-ink);
    background: var(--k-white);
    color: var(--k-ink);
}

.k-btn--secondary:hover {
    background: var(--k-ground);
    color: var(--k-ink);
}

.k-btn--secondary:active {
    background: var(--k-stage);
    color: var(--k-night);
}

.k-btn:disabled,
.k-btn[aria-disabled="true"] {
    border-color: var(--k-line);
    background: var(--k-line);
    color: var(--k-muted);
    font-weight: 700;
    cursor: not-allowed;
}

.k-btn--secondary:disabled,
.k-btn--secondary[aria-disabled="true"] {
    border-style: dashed;
    border-color: var(--k-chip-line);
    background: var(--k-white);
    font-weight: 600;
}

/* Loading keeps the width and blocks a second press */
.k-btn[aria-busy="true"] {
    pointer-events: none;
}

/* "Get a quote" in the header row */
.k-btn--header {
    min-height: 44px;
    padding: 0 18px;
    border-radius: var(--k-radius-nav);
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
}

.k-btn--block {
    width: 100%;
}

.k-btn--lg {
    min-height: 54px;
    padding: 0 24px;
    font-size: 17px;
}

/* Ink: a strong action that isn't the page's one primary (the finder's submit) */
.k-btn--ink {
    border-color: var(--k-ink);
    background: var(--k-ink);
    color: var(--k-white);
}

.k-btn--ink:hover,
.k-btn--ink:active {
    border-color: var(--k-night);
    background: var(--k-night);
    color: var(--k-white);
}

/* Harvest: the one action on a Night band */
.k-btn--harvest {
    border-color: var(--k-harvest);
    background: var(--k-harvest);
    color: var(--k-night);
    font-weight: 800;
}

.k-btn--harvest:hover,
.k-btn--harvest:active {
    border-color: #E0B21E;
    background: #E0B21E;
    color: var(--k-night);
}

/* Outline on a light surface (WhatsApp beside a primary button) */
.k-btn--outline {
    border-width: 1px;
    border-color: var(--k-chip-line);
    background: var(--k-white);
    color: var(--k-ink);
}

.k-btn--outline:hover,
.k-btn--outline:active {
    background: var(--k-ground);
    color: var(--k-ink);
}

@media (min-width: 992px) {
    .k-btn--primary:not(.k-btn--header) {
        font-size: 17px;
    }
}

/* Text link that acts as a button ("Ask for a price") */
.k-link {
    color: var(--k-ink);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.k-link:hover {
    color: var(--k-green);
    text-decoration-thickness: 2px;
}

.k-link:active {
    color: var(--k-green-press);
}


/* ============================================
   FOCUS ON BOOTSTRAP CONTROLS
   Bootstrap swaps the outline for its own glow; put the site's one ring back.
   ============================================ */

.btn-close:focus-visible {
    outline: 3px solid var(--k-harvest);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--k-night);
}


/* ============================================
   FORMS
   ============================================ */

.form-control,
.form-select {
    border-color: var(--k-field);
    border-radius: var(--k-radius-control);
    color: var(--k-night);
}

.form-control::placeholder {
    color: var(--k-muted);
    opacity: 1;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--k-ink);
    outline: 3px solid var(--k-harvest);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--k-night), inset 0 0 0 1px var(--k-ink);
}

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--k-danger);
}


/* ============================================
   ALERTS (Django messages), on the status tokens
   ============================================ */

.alert {
    --bs-alert-padding-x: 16px;
    --bs-alert-padding-y: 14px;
    --bs-alert-border-radius: var(--k-radius-control);
    font-weight: 500;
}

.alert-success {
    --bs-alert-color: var(--k-success);
    --bs-alert-bg: var(--k-success-bg);
    --bs-alert-border-color: #C4DBBF;
    --bs-alert-link-color: var(--k-success);
}

.alert-warning {
    --bs-alert-color: var(--k-warning);
    --bs-alert-bg: var(--k-warning-bg);
    --bs-alert-border-color: #EBD98F;
    --bs-alert-link-color: var(--k-warning);
}

.alert-danger {
    --bs-alert-color: var(--k-danger);
    --bs-alert-bg: var(--k-danger-bg);
    --bs-alert-border-color: #F4C7C2;
    --bs-alert-link-color: var(--k-danger);
}

.alert-info {
    --bs-alert-color: var(--k-info);
    --bs-alert-bg: var(--k-info-bg);
    --bs-alert-border-color: #C9D1E2;
    --bs-alert-link-color: var(--k-info);
}


/* ============================================
   SECTION HEADINGS
   ============================================ */

/* Mono label above a heading */
.k-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 12px;
    font-family: var(--k-mono);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--k-green);
}

.k-eyebrow--rule::before {
    content: "";
    flex: 0 0 28px;
    height: 2px;
    background: currentColor;
}

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

:lang(hy) .k-eyebrow {
    font-size: 14px;
    letter-spacing: 0;
    text-transform: none;
}

/* Heading on the left, "see all" on the right */
.k-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px 24px;
    margin-bottom: 16px;
}

.k-section-head h2 {
    margin: 0;
}

.k-arrow-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    color: var(--k-ink);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
}

.k-arrow-link:hover {
    color: var(--k-green-dark);
}

@media (min-width: 768px) {
    .k-section-head {
        margin-bottom: 32px;
    }
}


/* ============================================
   FIELDS AND CHOICE CHIPS
   ============================================ */

.k-field {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.k-field__label {
    display: block;
    margin-bottom: 6px;
    padding: 0;
    font-family: var(--k-mono);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--k-muted);
}

:lang(hy) .k-field__label {
    font-size: 14px;
    letter-spacing: 0;
    text-transform: none;
}

.form-select.k-select {
    min-height: 52px;
    padding-left: 16px;
    color: var(--k-ink);
    font-size: 16px;
    font-weight: 600;
}

/* Radios that look like chips (Bootstrap's btn-check keeps them working without JavaScript) */
.k-choices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    gap: 8px;
}

.k-choice {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    margin: 0;
    border: 1px solid var(--k-chip-line);
    border-radius: var(--k-radius-control);
    background: var(--k-white);
    color: var(--k-ink);
    font-weight: 700;
    cursor: pointer;
    transition: background-color var(--k-fast) ease-out, color var(--k-fast) ease-out;
}

.k-choice:hover {
    background: var(--k-ground);
}

.btn-check:checked + .k-choice {
    border-color: var(--k-ink);
    background: var(--k-ink);
    color: var(--k-white);
}

.btn-check:disabled + .k-choice {
    border-style: dashed;
    background: var(--k-white);
    color: var(--k-muted);
    cursor: not-allowed;
}

.btn-check:focus-visible + .k-choice {
    outline: 3px solid var(--k-harvest);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--k-night);
}


/* ============================================
   STOCK PILL AND SPEC TAGS
   ============================================ */

.k-stock {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--k-white);
    color: var(--k-green-dark);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}

.k-stock::before {
    content: "";
    flex: 0 0 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--k-green);
}

.k-stock--order {
    color: var(--k-body);
}

.k-stock--order::before {
    background: var(--k-muted);
}

.k-stock--inline {
    position: static;
    background: var(--k-success-bg);
}

.k-stock--inline.k-stock--order {
    background: var(--k-ground);
}

.k-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.k-tag {
    padding: 4px 9px;
    border-radius: var(--k-radius-tag);
    background: #EEF0EA;
    color: var(--k-navy);
    font-family: var(--k-mono);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
}

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

    .k-tag {
        font-size: 12.5px;
    }
}


/* ============================================
   PRODUCT CARD (templates/includes/product_card.html)
   Photos sit on a Ground tile and multiply, so white backgrounds disappear.
   ============================================ */

.k-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--k-line);
    border-radius: 18px;
    background: var(--k-white);
    transition: box-shadow var(--k-base) var(--k-ease), border-color var(--k-base) var(--k-ease);
}

.k-card:hover {
    border-color: var(--k-chip-line);
    box-shadow: var(--k-shadow-hover);
}

.k-card__media {
    position: relative;
    padding: 12px;
    background: var(--k-ground);
    isolation: isolate;
}

.k-card__media > a {
    display: block;
}

.k-card__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.k-card__nophoto {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    color: var(--k-muted);
    font-size: 32px;
}

.k-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px 16px;
}

.k-card__brand {
    margin: 0 0 2px;
    font-family: var(--k-mono);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--k-muted);
}

:lang(hy) .k-card__brand {
    letter-spacing: 0;
}

.k-card__name {
    margin: 0;
    font-size: 19px;
    font-weight: 800;
    font-stretch: 88%;
    line-height: 1.15;
    /* Long Armenian words ("եղջերավորների") are wider than a phone card: break them rather than spill */
    overflow-wrap: anywhere;
}

.k-card__name a {
    color: var(--k-night);
    text-decoration: none;
}

.k-card__name a:hover {
    text-decoration: underline;
}

.k-card__price {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--k-line-soft);
}

.k-card__amount {
    font-size: 19px;
    font-weight: 800;
    font-stretch: 90%;
    font-variant-numeric: tabular-nums;
    color: var(--k-night);
}

.k-card__amount--ask {
    font-size: 18px;
}

.k-card__monthly,
.k-card__ask {
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--k-green);
}

.k-card__ask {
    font-weight: 700;
}

/* Phones fold power into the brand line ("John Deere · 50 HP") and drop the tags and stock pill */
.k-card__brand-power {
    display: none;
}

@media (max-width: 767.98px) {
    .k-card__brand-power {
        display: inline;
    }

    .k-card .k-tags,
    .k-card .k-stock {
        display: none;
    }

    .k-card__brand {
        font-family: var(--k-sans);
        font-weight: 600;
        letter-spacing: 0;
        text-transform: none;
    }
}

@media (min-width: 768px) {
    .k-card__media {
        padding: 16px;
    }

    .k-card__body {
        gap: 12px;
        padding: 16px 18px 18px;
    }

    .k-card__brand {
        font-size: 12px;
    }

    .k-card__name,
    .k-card__amount {
        font-size: 21px;
    }
}


/* ============================================
   DRAWN MAP (templates/includes/network_map.html)
   ============================================ */

.k-map {
    margin: 0;
    padding: 24px;
    border-radius: 22px;
    background: var(--k-ground);
}

.k-map__svg {
    display: block;
    width: 100%;
    height: auto;
}

.k-map__land {
    fill: var(--k-white);
    stroke: #B8C2AE;
    stroke-width: 1.5;
    stroke-linejoin: round;
}

.k-map__lake {
    fill: #D9E6EE;
    stroke: #B9CDD9;
    stroke-width: 1;
}

.k-map__lake-name {
    fill: #6A7F8C;
    font-family: var(--k-sans);
    font-size: 11px;
    font-style: italic;
}

.k-map__region {
    fill: #8A9484;
    font-family: var(--k-mono);
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

:lang(hy) .k-map__region {
    font-size: 11px;
    letter-spacing: 0;
    text-transform: none;
}

.k-map__links path {
    fill: none;
    stroke: var(--k-green);
    stroke-width: 1.5;
    stroke-dasharray: 3 4;
    opacity: 0.6;
}

.k-map__pin {
    fill: var(--k-green);
    stroke: var(--k-white);
    stroke-width: 2.5;
}

.k-map__head {
    fill: var(--k-ink);
    stroke: var(--k-white);
    stroke-width: 2.5;
}

.k-map__name {
    fill: var(--k-ink);
    font-family: var(--k-sans);
    font-size: 13px;
    font-weight: 700;
}

.k-map__sub {
    fill: var(--k-muted);
    font-family: var(--k-sans);
    font-size: 10.5px;
    font-weight: 500;
}

.k-map__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: 12px;
    font-size: 14px;
    color: var(--k-muted);
}

.k-map__legend > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.k-map__key {
    flex: 0 0 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--k-green);
}

.k-map__key--head {
    border-radius: 3px;
    background: var(--k-ink);
}


/* ============================================
   DIALOG: Bootstrap's modal, centred from 768 px, a bottom sheet below
   (share on the product page, directions on Locations)
   ============================================ */

.k-dialog .modal-content {
    border: 0;
    border-radius: var(--k-radius-dialog);
    box-shadow: var(--k-shadow-dialog);
}

.k-dialog .modal-header {
    gap: 12px;
    padding: 16px 12px 12px 24px;
    border-bottom: 1px solid var(--k-line);
}

.k-dialog .modal-title {
    margin: 0;
    color: var(--k-night);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.25;
}

.k-dialog .modal-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 24px;
}

.k-dialog .modal-footer {
    padding: 14px 24px 20px;
    border-top: 1px solid var(--k-line);
}

.k-dialog .modal-footer > * {
    margin: 0;
}

/* Below 768 px the dialog is a bottom sheet */
@media (max-width: 767.98px) {
    .k-dialog .modal-dialog {
        display: flex;
        align-items: flex-end;
        min-height: 100%;
        max-width: none;
        margin: 0;
    }

    .k-dialog.fade .modal-dialog {
        transform: translateY(32px);
    }

    .k-dialog.show .modal-dialog {
        transform: none;
    }

    .k-dialog .modal-content {
        border-radius: var(--k-radius-sheet) var(--k-radius-sheet) 0 0;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .k-dialog .modal-footer .k-btn {
        width: 100%;
    }
}


/* ============================================
   BREADCRUMB AND NO-JAVASCRIPT FALLBACKS
   ============================================ */

.k-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 16px 0 0;
    list-style: none;
    font-size: 14px;
    color: var(--k-muted);
}

.k-crumbs li + li::before {
    content: "/";
    margin-right: 8px;
}

.k-crumbs a {
    color: var(--k-body);
}

.k-crumbs [aria-current] {
    color: var(--k-night);
    font-weight: 600;
}

/* Under a WhatsApp button outside opening hours: when a reply comes (includes/whatsapp_reply.html) */
.k-reply {
    margin: 6px 0 0;
    color: var(--k-muted);
    font-size: 13.5px;
    text-align: center;
}

/* Buttons only a page without JavaScript needs (apply a sort, update an estimate) */
.js .k-nojs {
    display: none !important;
}