/*
 * Webshop kiegészítő stílusok – NEM a Laravel Mix build része (a szerveren nincs npm), a layout külön tölti be.
 * 2026-09-13: mobil kosár a fejlécben (jelvénnyel), „kosárba került” visszajelzés, kosár-sorok mobilon függőlegesen.
 */

/* ---- Fejléc: kosár ikon + darabszám-jelvény (mobilon a hamburger bal oldalán, asztalon a jobb menüben) ---- */
.nav-cart-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;      /* érintőfelület */
    min-height: 44px;
    color: rgba(0, 0, 0, .6);
    font-size: 1.25rem;
    text-decoration: none;
}
.nav-cart-link:hover, .nav-cart-link:focus { color: rgba(0, 0, 0, .9); text-decoration: none; }
.navbar-nav .nav-link.nav-cart-link { padding: .25rem .5rem; }

.nav-cart-badge {
    position: absolute;
    top: 2px;
    right: 0;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: #106a9c;   /* $blue (_variables.scss) */
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
}
.nav-cart-badge.bump { animation: cart-bump .45s ease-out; }
@keyframes cart-bump {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.5); background: #38c172; }
    100% { transform: scale(1); }
}

/* ---- „Megveszem” gomb visszajelzése kosárba tétel után ---- */
.btn.is-added {
    background-color: #38c172 !important;   /* $green */
    border-color: #38c172 !important;
    color: #fff !important;
    transition: background-color .2s, border-color .2s, color .2s;
}

/* ---- Kosár-sorok: asztalon oszlopok (a régi fix szélességek), mobilon függőleges kártya ---- */
.bk-label { display: none; }                 /* a cellacímke csak mobilon látszik */
.bk-del-text { display: none; }
.bk-unit, .bk-sum { width: 80px; }
.bk-qty { width: 110px; }
.bk-del { width: 40px; }
.bk-qty-static { width: 70px; }

@media (max-width: 767.98px) {
    .bk-row {
        flex-wrap: wrap;
        padding: .75rem !important;
    }
    .bk-row .bk-name {
        flex: 1 1 100%;
        margin-bottom: .5rem;
        padding-bottom: .5rem;
        border-bottom: 1px dashed rgba(0, 0, 0, .1);
    }
    .bk-row .bk-unit, .bk-row .bk-qty, .bk-row .bk-sum, .bk-row .bk-del {
        flex: 1 1 100%;
        width: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: .25rem 0 !important;
        text-align: right;
    }
    .bk-row .bk-label {
        display: inline-block;
        color: #6c757d;
        font-size: .85rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .02em;
    }
    .bk-row .bk-value h6 { display: inline-block; margin-left: .5rem; }
    .bk-row .bk-value small { display: inline-block; }
    .bk-row .bk-qty-group { width: 150px; flex-wrap: nowrap; }
    .bk-row .bk-qty-group .btn { min-width: 44px; }   /* érintőbarát ± gombok */
    .bk-row .bk-qty-group .form-control { min-width: 50px; font-size: 1rem; }
    .bk-row .bk-del { justify-content: flex-end; margin-top: .25rem; }
    .bk-row .bk-del .btn { min-height: 38px; padding-left: .75rem; padding-right: .75rem; }
    .bk-row .bk-del-text { display: inline; }
    .bk-row .bk-qty-static .text-muted { font-size: 1rem; }
}