/* ============================================================
   B2B Ortak Bilesenler
   Rehber: docs/B2B_UI_GUIDE.md §3, §5, §8, §10, §11
   Tipografi olcegi, kanonik buton sistemi, mesgul durumu,
   grid filtre bari, grid kart gorunumu, secilebilir kart.
   ============================================================ */

/* ------------------------------------------------------------
   1) Tipografi (Rehber §3)
   ------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6,
.page-title, .section-title, .card-title {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    color: var(--text-main);
}

h1, .page-title {
    font-size: var(--font-size-2xl);
}

h2, .section-title {
    font-size: var(--font-size-xl);
}

h3, .card-title {
    font-size: var(--font-size-lg);
}

h4 {
    font-size: var(--font-size-md);
}

h5, h6 {
    font-size: var(--font-size-base);
}

.text-muted-sm {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.form-label {
    font-family: var(--font-family-base);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
}

    .form-label .required-mark {
        color: var(--danger);
        margin-left: 2px;
    }

/* ------------------------------------------------------------
   2) Kanonik buton sistemi (Rehber §5)
   Renkler style.css'teki .btn-* token override'larindan gelir;
   burada yalnizca ortak geometri, durum ve mesgul davranisi tanimlanir.
   ------------------------------------------------------------ */
.btn {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-md);
    padding: 0.5rem 1.125rem;
    line-height: 1.4;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.btn-sm {
    font-size: var(--font-size-sm);
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-sm);
}

.btn-lg {
    font-size: var(--font-size-md);
    padding: 0.75rem 1.5rem;
}

.btn:active {
    transform: translateY(0.5px);
}

.btn:disabled,
.btn.disabled {
    cursor: not-allowed;
    transform: none;
    opacity: 1; /* renk zaten --gray-400; ek saydamlik istemiyoruz */
}

/* Yalnizca ikon iceren kare buton */
.btn-icon {
    padding: 0;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
}

    .btn-icon.btn-sm {
        width: 1.75rem;
        height: 1.75rem;
    }

    .btn-icon.btn-lg {
        width: 2.5rem;
        height: 2.5rem;
    }

/* Grid satir eylemleri — birden fazla ikon butonu yan yana */
.btn-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* Bağlantı gorunumlu buton */
.btn-link {
    color: var(--primary-color);
    text-decoration: none;
    padding-left: 0;
    padding-right: 0;
}

    .btn-link:hover {
        color: var(--primary-color-hover);
        text-decoration: underline;
    }

/* Devre disi birakilmis <a> (Rehber §8.4) */
a.disabled,
a[aria-disabled="true"] {
    pointer-events: none;
    opacity: 0.6;
    cursor: not-allowed;
}

/* ------------------------------------------------------------
   3) Mesgul durumu — UiCore.busy (Rehber §8.1)
   ------------------------------------------------------------ */
.is-busy {
    position: relative;
    pointer-events: none;
    cursor: progress;
}

    .is-busy > .btn-busy-spinner {
        display: inline-block;
        width: 0.875em;
        height: 0.875em;
        border: 2px solid currentColor;
        border-right-color: transparent;
        border-radius: 50%;
        animation: b2b-spin 0.6s linear infinite;
        vertical-align: -0.125em;
    }

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

/* Blok seviyesinde yukleniyor ortusu */
.is-loading-overlay {
    position: relative;
}

    .is-loading-overlay::after {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(255, 255, 255, 0.6);
        z-index: 2;
    }

/* ------------------------------------------------------------
   4) Secilebilir kart (Rehber §5.5)
   ------------------------------------------------------------ */
.selectable-card {
    border: 1px solid var(--border-color-medium);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    padding: 1rem;
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

    .selectable-card:hover {
        border-color: var(--primary-color);
        box-shadow: var(--shadow-sm);
    }

    .selectable-card.is-selected {
        border-color: var(--primary-color);
        background: var(--primary-color-light);
    }

    .selectable-card:focus-visible {
        box-shadow: var(--focus-ring);
        outline: none;
    }

/* ------------------------------------------------------------
   5) Ortak grid filtre bari (Rehber §10.3)
   Views/Shared/_GridFilterToolbar.cshtml ile birlikte kullanilir.
   ------------------------------------------------------------ */
.b2b-filter-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    padding: 1rem;
    margin-bottom: 1rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

    .b2b-filter-toolbar .filter-field {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        min-width: 160px;
    }

        .b2b-filter-toolbar .filter-field--search {
            flex: 1 1 260px;
            min-width: 220px;
        }

        .b2b-filter-toolbar .filter-field--date {
            flex: 0 0 auto;
            min-width: 230px;
        }

    .b2b-filter-toolbar .filter-label {
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-medium);
        color: var(--text-muted);
        text-transform: none;
    }

    .b2b-filter-toolbar .filter-actions {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-left: auto;
    }

    .b2b-filter-toolbar .input-group-text {
        background: var(--bg-secondary);
        border-color: var(--border-color-medium);
        color: var(--text-muted);
    }

    .b2b-filter-toolbar .form-control,
    .b2b-filter-toolbar .form-select {
        font-size: var(--font-size-sm);
        border-color: var(--border-color-medium);
    }

/* Aktif filtre sayaci */
.filter-active-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--radius-full);
    background: var(--primary-color);
    color: var(--white);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
}

@media (max-width: 767.98px) {
    .b2b-filter-toolbar {
        padding: 0.75rem;
        gap: 0.5rem;
    }

        .b2b-filter-toolbar .filter-field,
        .b2b-filter-toolbar .filter-field--search,
        .b2b-filter-toolbar .filter-field--date {
            flex: 1 1 100%;
            min-width: 0;
        }

        .b2b-filter-toolbar .filter-actions {
            width: 100%;
            margin-left: 0;
        }

            .b2b-filter-toolbar .filter-actions .btn {
                flex: 1 1 0;
            }
}

/* ------------------------------------------------------------
   5b) Aksiyon hucresi (Rehber §10.2)
   ------------------------------------------------------------
   Sinifi B2BGrid.enhance calisma aninda ekler: icinde buton/link barindiran
   her hucre aksiyon hucresidir. `nowrap` iki isi birden yapar —
   butonlar alt satira kaymaz VE hucrenin scrollWidth'i gercek genisligi
   bildirir, boylece kolon icerige gore olculebilir.
   ------------------------------------------------------------ */
.b2b-action-cell {
    white-space: nowrap;
    /* DevExtreme veri hucresi `overflow:hidden` + `text-overflow:ellipsis` tasir;
       aksiyon hucresinde bu, ucuncu butonu gizleyip yerine "..." basiyordu.
       Butonlar metin degildir — kirpilmak yerine kolon genisletilir (JS olcer). */
    overflow: visible;
    text-overflow: clip;
}

/* DevExtreme hucre kurallari daha ozgul oldugundan kirpma iki yerde birden kapatilir. */
.dx-datagrid .dx-datagrid-content .dx-datagrid-table .dx-row > td.b2b-action-cell {
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
}

    .b2b-action-cell > .btn,
    .b2b-action-cell > .dx-button,
    .b2b-action-cell > a.btn {
        margin-right: 0.25rem;
        vertical-align: middle;
    }

        .b2b-action-cell > .btn:last-child,
        .b2b-action-cell > .dx-button:last-child,
        .b2b-action-cell > a.btn:last-child {
            margin-right: 0;
        }

/* ------------------------------------------------------------
   6) Grid kart gorunumu — <768px (Rehber §10.4)
   ------------------------------------------------------------ */
.b2b-grid-cards {
    display: none;
    flex-direction: column;
    gap: 0.75rem;
}

.b2b-grid-cards--active {
    display: flex;
}

.b2b-grid--hidden {
    display: none !important;
}

.b2b-grid-card {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    padding: 0.875rem 1rem;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

    .b2b-grid-card:hover {
        border-color: var(--primary-color);
        box-shadow: var(--shadow-md);
    }

    .b2b-grid-card:focus-visible {
        box-shadow: var(--focus-ring);
        outline: none;
    }

.b2b-grid-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.b2b-grid-card__primary {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--text-main);
}

.b2b-grid-card__secondary {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.b2b-grid-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.b2b-grid-card__amount {
    font-weight: var(--font-weight-semibold);
    color: var(--text-main);
}

.b2b-grid-card__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.b2b-grid-cards__empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

.b2b-grid-cards__more {
    display: flex;
    justify-content: center;
    padding-top: 0.25rem;
}

/* Tablet: yatay kaydirma isareti */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .b2b-grid-scroll-hint {
        display: block;
        font-size: var(--font-size-xs);
        color: var(--text-muted);
        margin-bottom: 0.375rem;
    }
}

.b2b-grid-scroll-hint {
    display: none;
}

/* ------------------------------------------------------------
   7) Sayfa basligi bloklari — My sayfalarinda ortak
   ------------------------------------------------------------ */
.b2b-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

    /* _shared/style.css'teki .page-title kurali (padding:10px; text-align:center) burada gecersizdir. */
    .b2b-page-head .page-title {
        margin: 0;
        padding: 0;
        text-align: left;
    }

    .b2b-page-head .page-subtitle {
        width: 100%;
        font-size: var(--font-size-sm);
        color: var(--text-muted);
        margin: 0;
    }

.b2b-page-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

@media (max-width: 575.98px) {
    .b2b-page-actions {
        width: 100%;
    }

        .b2b-page-actions .btn {
            flex: 1 1 0;
        }
}

/* ------------------------------------------------------------
   8) Hesap yan menusu (_CustomerAccountTab)
   Ikon boyutlari ve aktif durum artik satir ici style ile degil
   burada yonetilir (Rehber §12.2, §13).
   ------------------------------------------------------------ */
.menu-container .menu-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    color: var(--text-main);
    text-decoration: none;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

    .menu-container .menu-item > i {
        width: 1.25rem;
        flex: 0 0 auto;
        text-align: center;
        font-size: var(--font-size-md);
        color: var(--text-muted);
    }

    .menu-container .menu-item:hover {
        background: var(--primary-color-light);
        color: var(--primary-color);
    }

        .menu-container .menu-item:hover > i {
            color: var(--primary-color);
        }

    .menu-container .menu-item:focus-visible {
        box-shadow: var(--focus-ring);
        outline: none;
    }

    .menu-container .menu-item.is-active {
        background: var(--primary-color-light);
        color: var(--primary-color);
        font-weight: var(--font-weight-semibold);
        box-shadow: inset 3px 0 0 var(--primary-color);
    }

        .menu-container .menu-item.is-active > i {
            color: var(--primary-color);
        }

    .menu-container .menu-item--danger {
        color: var(--danger);
    }

        .menu-container .menu-item--danger > i {
            color: var(--danger);
        }

        .menu-container .menu-item--danger:hover {
            background: var(--danger-light);
            color: var(--danger);
        }

            .menu-container .menu-item--danger:hover > i {
                color: var(--danger);
            }

.menu-container .section-header h3 {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

/* Tablet ve altinda yan menu sayfanin ustune yatay olarak yerlesir */
@media (max-width: 991.98px) {
    .menu-container {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem 1.25rem;
        margin-bottom: 1rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid var(--border-color);
    }

        .menu-container .menu-section {
            flex: 1 1 220px;
            min-width: 0;
        }

        .menu-container .section-items {
            display: flex;
            flex-direction: column;
        }
}

/* ------------------------------------------------------------
   9) Durum rozetleri — grid ve kart gorunumunde ortak
   ------------------------------------------------------------ */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.55rem;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
    white-space: nowrap;
}

.status-badge--success {
    background: var(--success-light);
    color: var(--success);
}

.status-badge--warning {
    background: var(--warning-light);
    color: var(--warning-hover);
}

.status-badge--danger {
    background: var(--danger-light);
    color: var(--danger);
}

.status-badge--info {
    background: var(--info-light);
    color: var(--info-hover);
}

.status-badge--neutral {
    background: var(--gray-150);
    color: var(--text-secondary);
}

/* ------------------------------------------------------------
   10) Urun izgarasi — anasayfa ve Urunler sayfasi ORTAK
   ------------------------------------------------------------
   Iki sayfa da ayni dxDataGrid'i (HomeProductDto) gosterir; hucre
   sablonlari ve kart gorunumu js/b2b/product-grid-view.js icinde tek
   kaynaktir, gorunumu de burada tek yerden gelir. Sayfaya ozel olan
   YALNIZCA kart izgarasinin sutun sayisidir: `--card-cols`.
   ------------------------------------------------------------ */

/* ── Arac cubugu (baslik + gorunum secici + arama + sirala + filtrele) ──
   Iki sayfada da AYNI gorunur; sayfa CSS'ine kopyalanmaz. Renkler anasayfanin
   yerlesik gorunumunun token karsiliklaridir (#F1F1F1→gray-150, #E9E9E9→gray-200,
   #212121→gray-800). */
.datagrid-custom-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.toolbar-title h2,
.toolbar-title .page-title {
    margin: 0;
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--text-main);
}

/* min-width:0 + flex-basis: dar ekranda kutular kirilir, satir genisligi asilmaz. */
.toolbar-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
}

    .toolbar-actions .btn i {
        margin-right: 5px;
    }

.custom-search-container {
    flex: 1 1 320px;
    min-width: 0;
    max-width: 550px;
}

.form-search {
    background-color: var(--gray-150);
    border-top-left-radius: 5px !important;
    border-bottom-left-radius: 5px !important;
}

    .form-search::placeholder {
        font-size: 11px;
        font-style: italic;
    }

.button-search {
    background-color: var(--gray-200);
    min-width: 110px;
    border-top-right-radius: 5px !important;
    border-bottom-right-radius: 5px !important;
    border: none !important;
    color: var(--text-main);
}

    .button-search:hover {
        background-color: var(--gray-300);
        color: var(--text-main);
    }

    .button-search:active {
        background-color: var(--gray-400);
    }

    .button-search:focus-visible {
        box-shadow: var(--focus-ring);
    }

/* Sirala (acik gri) ve Filtrele (koyu notr) — anasayfanin ESKI gorunumu,
   token karsiliklariyla (#F1F1F1→gray-150, #212121→gray-800).
   `!important` gerekcesi (§14.3, ucuncu parti override): yalnizca --bs-btn-*
   custom property yazmak yetmiyor — `.btn-light` ayni ozgullukte kendi
   degerlerini tasidigi ve tema CSS'lerinde gec yuklenen buton kurallari
   zemini ezebildigi icin renkler kayboluyordu; eski surumdeki gibi dogrudan
   `background-color !important` ile sabitlenir. */
.button-sort {
    background-color: var(--gray-150) !important;
    color: var(--gray-800) !important;
    border: none;
    border-radius: 6px;
    min-width: 130px;
}

    .button-sort:hover,
    .button-sort:focus,
    .button-sort.show {
        background-color: var(--gray-200) !important;
        color: var(--gray-800) !important;
    }

    .button-sort:active {
        background-color: var(--gray-300) !important;
    }

.button-filter {
    background-color: var(--gray-800) !important;
    color: var(--white) !important;
    border: none;
    border-radius: 6px;
    min-width: 130px;
}

    .button-filter:hover,
    .button-filter:focus,
    .button-filter.show {
        background-color: var(--gray-900) !important;
        color: var(--white) !important;
    }

    .button-filter:active {
        background-color: var(--gray-900) !important;
    }

#filterDropdownButton.dropdown-toggle::after,
#sortDropdownButton.dropdown-toggle::after {
    display: none;
}

/* Liste / kart gorunum secici — dokunma hedefi 40px. */
.view-toggle-container {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

    .view-toggle-container .view-toggle-btn.btn-icon {
        width: 40px;
        height: 40px;
    }

        .view-toggle-container .view-toggle-btn.btn-icon i {
            margin-right: 0;
        }

/* <992px: baslik ustte, arama tam satir; sirala + filtrele ESIT genislikte
   yarisar satir (flex-basis 0 → icerikten bagimsiz esit bolusum). */
@media (max-width: 991.98px) {
    .datagrid-custom-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .toolbar-title h2,
    .toolbar-title .page-title {
        font-size: var(--font-size-xl);
    }

    .toolbar-actions {
        justify-content: stretch;
    }

        .toolbar-actions .custom-search-container {
            flex: 1 1 100%;
            max-width: none;
            order: -1;
        }

        .toolbar-actions .dropdown,
        .toolbar-actions > .btn:not(.view-toggle-btn) {
            flex: 1 1 0;
            min-width: 0;
        }

            .toolbar-actions .dropdown > .btn {
                width: 100%;
            }

    .button-filter,
    .button-sort {
        min-width: 0;
    }

    .button-search {
        min-width: 0;
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* <768px: gorunum secici gizlenir — kart gorunumu zorunludur (rehber §10.4). */
@media (max-width: 767.98px) {
    .view-toggle-container {
        display: none;
    }

    .toolbar-actions {
        gap: 8px;
    }
}

/* ── Filtre paneli bolumleri + mobil cekmece ──
   Iki sayfa ayni panel iskeletini kullanir:
     Urunler: <aside class="shop-filters filter-drawer"> — >=992px kenar cubugu.
     Anasayfa: <div class="dropdown-menu filter-dropdown-menu filter-drawer"> —
               >=992px Bootstrap dropdown.
   <992px'te IKISI DE sagdan giren cekmecedir (.filter-drawer). Acilis/kapanis
   JS'i ortak: product-grid-view.js → createFilterDrawer. Sinif adlari
   hamburger cekmecesiyle (mobile-nav.css `.b2b-drawer*`) CAKISMAMALIDIR. */
.filter-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.filter-panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-family: var(--font-family-heading);
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--text-main);
}

    .filter-panel-title i {
        color: var(--primary-color);
    }

.filter-panel-close {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    border-radius: var(--radius-md);
    color: var(--text-main);
    font-size: var(--font-size-lg);
}

    .filter-panel-close:hover {
        background: var(--primary-color-light);
        color: var(--primary-color);
    }

    .filter-panel-close:focus-visible {
        box-shadow: var(--focus-ring);
        outline: none;
    }

.filter-panel-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.filter-panel-foot {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    padding: 12px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
}

    .filter-panel-foot .btn {
        flex: 1 1 auto;
        min-height: 40px;
    }

/* Kategori/marka/olcu listeleri kendi iclerinde kayar; panelin tamami kaymaz.
   (Cekmece modunda sinir kalkar — cekmece bir butun olarak kayar.) */
.filter-scroll-area {
    max-height: 320px;
    overflow-y: auto;
}

/* Cekmece disi kirilimlarda ortu hic gorunmez. */
.filter-drawer-overlay {
    display: none;
}

@media (max-width: 991.98px) {
    .filter-drawer {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        z-index: var(--z-drawer);
        width: min(88vw, 360px);
        min-width: 0;
        max-width: none;
        height: auto;
        max-height: none;
        margin: 0;
        padding: 0;
        background: var(--white);
        border: none;
        border-radius: 0;
        box-shadow: var(--shadow-xl);
        transform: translateX(100%);
        /* `visibility` ile birlikte: kapali cekmece erisilebilirlik agacindan
           da duser; JS'in `aria-hidden` yazmasi gerekmez. */
        visibility: hidden;
        transition: transform 0.25s ease, visibility 0.25s ease;
    }

        .filter-drawer.is-open {
            transform: none;
            visibility: visible;
        }

        /* Cekmece bir butun olarak kayar; ic ice iki kaydirma alani kalmaz. */
        .filter-drawer .filter-scroll-area {
            max-height: none;
        }

        /* Dokunma hedefleri 44px'in altina dusmez. */
        .filter-drawer .accordion-button {
            min-height: 44px;
        }

        .filter-drawer .form-check {
            display: flex;
            align-items: center;
            gap: 6px;
            min-height: 36px;
            margin-bottom: 0;
        }

        .filter-drawer .filter-panel-foot .btn {
            min-height: 44px;
        }

    .filter-drawer-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: var(--z-drawer-overlay);
        background: rgba(0, 0, 0, 0.45);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s ease, visibility 0.25s ease;
    }

        .filter-drawer-overlay.is-visible {
            opacity: 1;
            visibility: visible;
        }

    body.filter-drawer-open {
        overflow: hidden;
    }
}

/* Hareket azaltma tercihi olan kullanicida cekmece aninda acilir. */
@media (prefers-reduced-motion: reduce) {
    .filter-drawer,
    .filter-drawer-overlay {
        transition: none;
    }
}

/* Set (bundle) rozeti — liste hucresi ve filtre etiketi. */
.badge.badge-set {
    background: var(--primary-color);
    color: var(--white);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    vertical-align: middle;
}

/* Bos hucre isareti — bkz. product-grid-view.js `onGridCellPrepared_Align`. */
.grid-empty-cell {
    color: var(--text-light);
}

/* Marka logosu hucresi: logo hangi olculerde yuklenirse yuklensin kolona
   oranini bozmadan ve kirpilmadan sigar. `object-fit: contain` + iki eksende
   `max-*` sinir; sabit genislik verilmez. */
.brand-logo-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 48px;
}

    .brand-logo-cell img {
        display: block;
        max-width: 100%;
        max-height: 48px;
        width: auto;
        height: auto;
        object-fit: contain;
    }

/* Gorsel hucresi: set satirinda SET rozeti + bilesen gorselleri seridi. */
.product-image-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.product-image-cell--set {
    flex-direction: column;
    gap: 2px;
}

.product-image-cell-badge {
    background: var(--primary-color);
    color: var(--white);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 1px 6px;
    border-radius: var(--radius-sm);
}

.product-image-cell img {
    max-height: 50px;
    max-width: 100%;
    width: auto;
    height: auto;
    display: block;
    border-radius: var(--radius-sm);
}

    .product-image-cell img.clickable-image {
        cursor: zoom-in;
    }

.product-image-cell-strip {
    display: flex;
    gap: 2px;
    justify-content: center;
    flex-wrap: nowrap;
}

    .product-image-cell-strip img {
        width: 18px;
        height: 18px;
        object-fit: cover;
        border-radius: 3px;
        border: 1px solid var(--border-color);
        cursor: zoom-in;
    }

.product-image-cell-more {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    align-self: center;
}

/* Stok / set icerigi hucresi. */
.stock-cell {
    font-size: var(--font-size-xs);
    line-height: 1.6;
}

    .stock-cell .stock-cell-title {
        font-weight: 600;
        color: var(--primary-color);
    }

    .stock-cell .badge {
        font-size: 10px;
    }

.action-cell-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

/* ── Kart gorunumu (dxDataGrid dataRowTemplate) ──
   Satir sablonu <tr> icine tek bir .product-card basar. `.dx-row { display: contents }`
   sayesinde kart, grid'e cevrilen <table>'in dogrudan bir grid ogesi olur. */
.card-view-grid .dx-datagrid-headers {
    display: none;
}

/* Kart gorunumunde grid'in kendi kaydiricisi tamamen kapatilir. DevExtreme
   rowsview'a ve dx-scrollable zincirine satir ici yukseklik yazdigi icin
   ucunun de ezilmesi gerekir; aksi halde birkac piksellik ic kaydirma kalir. */
.card-view-grid .dx-datagrid-rowsview,
.card-view-grid .dx-scrollable-wrapper,
.card-view-grid .dx-scrollable-container,
.card-view-grid .dx-scrollable-content {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

.card-view-grid .dx-scrollable-scrollbar {
    display: none !important;
}

.card-view-grid .dx-datagrid-rowsview {
    border-top: 0;
}

/* Kart gorunumu sayfalama ile calisir (sonsuz kaydirma degil), grid sayfa
   akisina yayilir; pager izgaranin altinda ayri bir serit olur. */
.card-view-grid .dx-datagrid-pager {
    border-top: 1px solid var(--border-color-medium);
    padding: 0.75rem 0;
}

/* DevExtreme icerik ve tabloya kolon genisliklerinden hesapladigi satir ici
   width/min-width yazar; kart izgarasinin tasmamasi icin ezilmek zorunda. */
.card-view-grid .dx-datagrid-content {
    padding: 0;
    min-width: 0 !important;
}

/* Sutun sayisi sayfa boyutunu TAM BOLMELIDIR; aksi halde son satir yarim
   kalir. Bu yuzden `auto-fill` yerine sayfa CSS'inde kirilim basina sabit
   sutun verilir (`--card-cols`) ve ilgili JS modulundeki sayfa boyutuyla
   birlikte degistirilir. */
.card-view-grid .dx-datagrid-table {
    display: grid;
    grid-template-columns: repeat(var(--card-cols, 2), 1fr);
    gap: 1rem;
    padding: 1rem;
    width: 100% !important;
    min-width: 0 !important;
    table-layout: auto;
}

    .card-view-grid .dx-datagrid-table colgroup,
    .card-view-grid .dx-datagrid-table thead {
        display: none;
    }

    /* tbody gizlenmez, seffaflastirilir: DevExtreme satirlari bazi modlarda
       tbody icine sarar; gizlenirse kartlar da kaybolur. */
    .card-view-grid .dx-datagrid-table tbody {
        display: contents;
    }

.card-view-grid .dx-row {
    display: contents;
    background-color: transparent !important;
}

.card-view-grid .dx-freespace-row,
.card-view-grid .dx-virtual-row {
    display: none;
}

.product-card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--border-color-medium);
    border-radius: var(--radius-md);
    overflow: hidden;
    height: 100%;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .product-card:hover {
        border-color: var(--primary-color);
        box-shadow: var(--shadow-sm);
    }

.product-card-media {
    position: relative;
    isolation: isolate;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background: var(--white);
    overflow: hidden;
}

    .product-card-media img {
        position: relative;
        z-index: 1;
        max-height: 100%;
        max-width: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
        cursor: zoom-in;
        border-radius: var(--radius-sm);
    }

/* Gorselin uzerinde kalmali — z-index gorsele acikca verildigi icin rozet daha ustte. */
.product-card-badge {
    position: absolute;
    z-index: 2;
    top: 8px;
    left: 8px;
    background: var(--primary-color);
    color: var(--white);
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    pointer-events: none;
}

.product-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 12px;
    flex: 1 1 auto;
}

/* Iki satiri asan baslik ucnokta ile biter; tamami `title` ile gosterilir.
   `text-overflow` line-clamp ile birlikte acikca yazilir, `overflow-wrap`
   bosluksuz uzun kodlarin kutudan tasmasini engeller. */
.product-card-title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-base);
    font-weight: 600;
    line-height: 1.35;
    color: var(--text-main);
    margin: 0;
    min-height: 2.7em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: anywhere;
}

.product-card a.product-detail-link {
    text-decoration: none;
}

    .product-card a.product-detail-link:hover .product-card-title {
        color: var(--primary-color);
    }

/* Marka ve urun kodu ayri satirlarda; ikisi de kendi satirinin tamamini
   kullanir. Yan yanayken uzun kod markanin uzerine biniyordu. */
.product-card-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
    min-height: 46px;
}

.product-card-brand {
    display: flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    min-height: 22px;
}

    .product-card-meta img {
        max-height: 22px;
        max-width: 100%;
        width: auto;
        object-fit: contain;
    }

/* Tasan metin ucnokta ile biter; tamami `title` ozniteliginden okunur. */
.product-card-brand-name,
.product-card-sku {
    display: block;
    max-width: 100%;
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-card-stock {
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    padding: 8px;
    font-size: var(--font-size-xs);
    line-height: 1.6;
    max-height: 96px;
    overflow-y: auto;
}

    .product-card-stock .stock-line {
        display: flex;
        justify-content: space-between;
        gap: 0.5rem;
    }

    .product-card-stock .stock-label {
        color: var(--text-secondary);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .product-card-stock .stock-title {
        font-weight: 600;
        color: var(--primary-color);
        margin-bottom: 2px;
    }

.product-card-footer {
    margin-top: auto;
    padding-top: 0.25rem;
}

    .product-card-footer .btn {
        width: 100%;
    }

@media (max-width: 767.98px) {
    .card-view-grid .dx-datagrid-table {
        gap: 0.75rem;
        padding: 0.75rem;
    }

    .product-card-media {
        height: 140px;
    }

    .product-card-body {
        padding: 10px;
        gap: 0.375rem;
    }

    .product-card-title {
        font-size: var(--font-size-sm);
    }

    .product-card-stock {
        max-height: 72px;
    }
}

/* ------------------------------------------------------------
   11) Kategori filtre agaci + mobil drilldown
   ------------------------------------------------------------
   Masaustu: girintili agac, sol chevron ile ac/kapa.
   Girinti CSS degiskeninden gelir (satir ici `padding-left` yazilirsa mobil
   drilldown modu onu ezemez).
   ------------------------------------------------------------ */
.category-tree-row {
    display: flex;
    align-items: center;
    padding-left: calc(var(--cat-depth, 0) * 14px);
}

/* Chevron ile yer tutucu AYNI genislikte olmak zorunda: aksi halde ayni
   seviyedeki "alt kategorisi olan" ve "olmayan" satirlarin checkbox'lari
   birbirine gore kayiyor. */
.category-tree-toggle,
.category-tree-toggle-placeholder {
    flex: 0 0 18px;
    width: 18px;
    text-align: center;
}

.category-tree-toggle {
    color: var(--text-secondary);
    text-decoration: none;
}

    .category-tree-toggle:hover {
        color: var(--primary-color);
    }

.category-tree-toggle-placeholder {
    display: inline-block;
}

/* ── Mobil drilldown (<768px, JS `.is-drilldown` sinifini yazar) ──
   Ayni DOM tek seviye gosterecek sekilde maskelenir; hicbir dugum silinmez,
   secim checkbox'larda kalir. Sinif anlamlari icin:
   js/b2b/product-grid-view.js → `createDrilldown`. */

/* Kap kaydirilabilir oldugu icin geri butonu yapisir; aksi halde uzun bir
   seviyede yukari kaydirmadan ust kategoriye donulemiyor. */
.category-dd-bar {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin-bottom: 4px;
    background: var(--white);
    border-bottom: 1px solid var(--border-color);
}

    .category-dd-bar[hidden] {
        display: none;
    }

.category-dd-back {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    border-radius: var(--radius-md);
    color: var(--text-main);
}

    .category-dd-back:hover {
        background: var(--primary-color-light);
        color: var(--primary-color);
    }

    .category-dd-back:focus-visible {
        box-shadow: var(--focus-ring);
        outline: none;
    }

.category-dd-crumb {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.category-tree.is-drilldown .category-tree-node {
    display: none;
}

    .category-tree.is-drilldown .category-tree-node.is-dd-path,
    .category-tree.is-drilldown .category-tree-node.is-dd-current {
        display: block;
    }

    /* Yol uzerindeki ust dugumler YALNIZCA kap gorevi gorur: kendi satirlari
       listeye dusmez (girilen kategori tekrar tiklanabilir gorunuyordu), cocuk
       kaplari Bootstrap `.collapse` durumundan bagimsiz acilir. */
    .category-tree.is-drilldown .category-tree-node.is-dd-path > .category-tree-row {
        display: none;
    }

    .category-tree.is-drilldown .category-tree-node.is-dd-path > .category-tree-children {
        display: block;
        height: auto;
    }

    .category-tree.is-drilldown .category-tree-node.is-dd-current > .category-tree-children {
        display: none;
    }

.category-tree.is-drilldown .category-tree-row {
    padding-left: 8px;
    padding-right: 4px;
    min-height: 44px;
    gap: 4px;
    border-bottom: 1px solid var(--border-color-light);
}

.category-tree.is-drilldown .category-tree-node:last-child > .category-tree-row {
    border-bottom: none;
}

/* Chevron satirin sagina gecer ve 44px dokunma hedefi olur; girintili agactaki
   minik sol chevron dokunmatikte isabet ettirilemiyordu. */
.category-tree.is-drilldown .category-tree-toggle {
    order: 2;
    flex: 0 0 44px;
    margin-left: auto;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-md);
}

.category-tree.is-drilldown .category-tree-toggle-placeholder {
    display: none;
}

.category-tree.is-drilldown .form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin-bottom: 0;
    padding-left: 0;
}

.category-tree.is-drilldown .form-check-input {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 0;
}

.category-tree.is-drilldown .form-check-label {
    font-size: var(--font-size-base);
    line-height: 1.3;
}

/* ------------------------------------------------------------
   12) Aktif filtre cubugu
   ------------------------------------------------------------
   Hangi filtrelerin acik oldugu paneli/dropdown'i acmadan gorunur olmalidir.
   ------------------------------------------------------------ */
.active-filters-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 1rem;
    margin-bottom: 0.25rem;
}

    .active-filters-bar:empty {
        display: none;
    }

.active-filters-label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .active-filters-label i {
        color: var(--primary-color);
    }

.active-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 4px 6px 4px 10px;
    border: 1px solid var(--primary-color);
    background: var(--primary-color-light);
    color: var(--primary-color);
    border-radius: var(--radius-full, 999px);
    font-size: var(--font-size-xs);
    font-weight: 500;
    line-height: 1.4;
}

    .active-filter-chip .chip-kind {
        color: var(--text-secondary);
        font-weight: 400;
    }

    .active-filter-chip .chip-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 180px;
    }

.active-filter-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    border: 0;
    padding: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--primary-color);
    font-size: 11px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

    .active-filter-chip-remove:hover {
        background: var(--primary-color);
        color: var(--white);
    }

    .active-filter-chip-remove:focus-visible {
        box-shadow: var(--focus-ring);
        outline: none;
    }

.active-filters-clear {
    font-size: var(--font-size-xs);
}

@media (max-width: 767.98px) {
    .active-filters-bar {
        gap: 5px;
        margin-top: 0.875rem;
        margin-bottom: 0;
        padding-top: 0.75rem;
        border-top: 1px solid var(--border-color-light);
    }

    /* Etiket metni yer kaplamasin — ikon baglami zaten veriyor. */
    .active-filters-label {
        font-size: 0;
        gap: 0;
    }

        .active-filters-label i {
            font-size: var(--font-size-sm);
        }

    .active-filter-chip {
        font-size: 11px;
        line-height: 1.3;
        padding: 3px 3px 3px 8px;
        gap: 4px;
    }

        .active-filter-chip .chip-kind {
            display: none;
        }

        .active-filter-chip .chip-text {
            max-width: 110px;
        }

    .active-filter-chip-remove {
        width: 18px;
        height: 18px;
        font-size: 10px;
    }

    .active-filters-clear {
        font-size: 11px;
        padding: 0 4px;
    }
}

/* ------------------------------------------------------------
   13) Gorsel buyutec katmani (js/b2b/image-modal.js)
   ------------------------------------------------------------ */
.image-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    cursor: zoom-out;
}

.image-modal-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(800px, 92vw);
    height: min(600px, 80vh);
    background-color: var(--white);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    cursor: default;
}

.image-modal-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 20px;
    box-sizing: border-box;
    background-color: var(--bg-secondary);
}

.image-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.85);
    color: var(--text-main);
    font-size: var(--font-size-lg);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

    .image-modal-close:hover {
        background-color: var(--primary-color);
        color: var(--white);
    }

    .image-modal-close:focus-visible {
        box-shadow: var(--focus-ring);
        outline: none;
    }

.image-modal-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: var(--text-main);
    font-size: var(--font-size-sm);
    text-align: center;
    padding: 10px 20px;
    background-color: rgba(255, 255, 255, 0.95);
    border-top: 1px solid var(--border-color);
}

.image-modal-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--text-secondary);
    font-size: var(--font-size-md);
    z-index: 1;
}

body.modal-open {
    overflow: hidden;
}

/* ------------------------------------------------------------
   14) Modal mobil davranisi — .b2b-sheet / .b2b-modal-full
       (Rehber §11.2 madde 6-7)

   Bootstrap'in `modal-fullscreen-*` sinifi KULLANILMAZ:
     (a) dialog genisligini `100vw` verir; `100vw` dikey kaydirma cubugunu
         da kapsadigi icin modal kabindan birkac piksel genis kalir ve
         sayfa yatayda kayar,
     (b) yuksekligi `%100`'e zorladigi icin kisa icerikte govdenin altinda
         genis bir bosluk birakir.

   Bunun yerine iki kanonik sinif vardir. Genislik her zaman `100%`
   (kaba baglidir), asla `100vw`.

     .b2b-sheet       VARSAYILAN. <768px'te modal alt sayfaya (bottom sheet)
                      doner: tam genislik, alta yasli, ust koseler yuvarlak.
                      Yukseklik ICERIKTEN gelir; tavan 92vh, sonrasi
                      .modal-body icinde kayar.

     .b2b-modal-full  ISTISNA. Icerigi ekrani zaten dolduran, kendi icinde
                      sekmeli/kaydirilan CALISMA YUZEYI modallari icin
                      (siparis detay modali gibi). <768px'te tam ekran ama
                      `width: 100%`; [sabit baslik][kaydirilan govde] yapisi
                      korunur.

   Not: `.modal-dialog.b2b-*` (0,2,1) secicisi Bootstrap'in
   `.modal-dialog-scrollable .modal-content` (0,1,1) kuralini yenmek icin
   bilerek iki siniflidir; aksi halde `max-height: 100%` 92vh tavanini eziyor.
   ------------------------------------------------------------ */
@media (max-width: 767.98px) {
    /* ── Ortak: genislik kaba baglanir, kenar bosluklari sifirlanir ── */
    .modal-dialog.b2b-sheet,
    .modal-dialog.b2b-modal-full {
        width: 100%;
        max-width: 100%;
        margin: 0;
        height: 100%;
        min-height: 100%;
    }

    /* ── Alt sayfa (bottom sheet) ── */
    .modal-dialog.b2b-sheet {
        /* `modal-dialog-centered` ortalar; alt sayfa alta yaslanir. */
        display: flex;
        align-items: flex-end;
    }

    .modal-dialog.b2b-sheet .modal-content {
        width: 100%;
        /* Yukseklik icerikten gelir; tavan 92vh. */
        height: auto;
        max-height: 92vh;
        border-radius: var(--radius-lg, 14px) var(--radius-lg, 14px) 0 0;
        border-bottom: 0;
    }

    .modal-dialog.b2b-sheet .modal-body {
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* ── Tam ekran calisma yuzeyi ── */
    .modal-dialog.b2b-modal-full .modal-content {
        width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        border: 0;
    }

    .modal-dialog.b2b-modal-full .modal-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* ── Sabit genislikli kutu birakilmaz; esneyen satir/kolon `min-width: 0`
          almazsa uzun tutar/ad dar ekranda yatay tasma uretir (Rehber §11.2/7). ── */
    .modal-dialog.b2b-sheet .modal-body .row > *,
    .modal-dialog.b2b-sheet .modal-body .d-flex > *,
    .modal-dialog.b2b-modal-full .modal-body .row > *,
    .modal-dialog.b2b-modal-full .modal-body .d-flex > * {
        min-width: 0;
    }

    /* Modal ust/alt seridi dar ekranda tasmasin. */
    .modal-dialog.b2b-sheet .modal-footer,
    .modal-dialog.b2b-modal-full .modal-footer {
        flex-wrap: wrap;
    }
}