/* === ZAMEL MOBILE UI === */
/* Mobile-first design dla ProductBrandPage i ProductIndexPage */

/* === MEDIA QUERIES === */
@media (max-width: 768px) {

    /* === DUŻE PRZYCISKI FILTRUJ/SORTUJ === */
    .zamel-mobile-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        padding: 16px;
        background: white;
        border-bottom: 1px solid #e9ecef;
        margin-bottom: 16px;
    }

    .zamel-mobile-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        /*padding: 16px 14px;*/
        font-size: 13px;
        font-weight: 600;
        border: 2px solid;
        /*border-radius: 8px;*/
        cursor: pointer;
        transition: all 0.2s ease;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        background: none;
        min-height: 40px;
    }

    .zamel-mobile-btn--primary {
        background: #c82333;
        color: white;
        border-color: #c82333;
    }

    .zamel-mobile-btn--secondary {
        background: white;
        color: #c82333;
        border-color: #c82333;
    }

    .zamel-mobile-btn:active {
        transform: scale(0.98);
    }

    .zamel-mobile-btn--primary:active {
        background: #a01e2a;
        border-color: #a01e2a;
    }

    .zamel-mobile-btn--secondary:active {
        background: #f8f9fa;
    }

    /* Ukryj desktop filtry na mobile */
    .zamel-desktop-filters,
    .zamel-category-menu,
    .zamel-filters-sidebar,
    .zamel-mobile-toggler-off-hidden {
        display: none !important;
    }

    /* Ukryj cały pasek narzędzi na mobile */
    .zamel-flex.zamel-items-y-center.zamel-bgc-light-blue.zamel-gap-1em.zamel-p-1em {
        display: none !important;
    }

    /* Ukryj desktop sortowanie na mobile */
    .zamel-flex .zamel-gap-0_5em:has(select[name="sort"]),
    .zamel-flex.zamel-gap-0_5em:has(select[name="sort"]),
    .zamel-flex.zamel-gap-0_5em.zamel-items-y-center:has(select[name="sort"]),
    .zamel-flex.zamel-gap-0_5em.zamel-items-y-center.zamel-ml-auto:has(select[name="sort"]) {
        display: none !important;
    }

    /* === MODAL KATEGORII === */
    .zamel-category-modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9999;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }

    .zamel-category-modal.active {
        opacity: 1;
        visibility: visible;
    }

    .zamel-modal-content {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        border-radius: 16px 16px 0 0;
        max-height: 85vh;
        transform: translateY(100%);
        transition: transform 0.3s ease;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    }

    .zamel-category-modal.active .zamel-modal-content {
        transform: translateY(0);
    }

    /* === HEADER MODALA === */
    .zamel-modal-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 16px 16px;
        border-bottom: 1px solid #e9ecef;
        position: sticky;
        top: 0;
        background: white;
        z-index: 1;
        border-radius: 16px 16px 0 0;
    }

    .zamel-modal-title {
        font-size: 18px;
        font-weight: 600;
        color: #212529;
    }

    .zamel-modal-close {
        background: none;
        border: none;
        font-size: 24px;
        color: #6c757d;
        cursor: pointer;
        padding: 8px;
        line-height: 1;
        min-width: 40px;
        min-height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .zamel-modal-close:hover {
        background: #f8f9fa;
        border-radius: 50%;
    }

    /* === BREADCRUMB W MODALU === */
    .zamel-modal-breadcrumb {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 16px;
        background: #f8f9fa;
        border-bottom: 1px solid #e9ecef;
        font-size: 14px;
        color: #6c757d;
        flex-wrap: wrap;
    }

    .zamel-breadcrumb-item {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .zamel-breadcrumb-link {
        color: #c82333;
        text-decoration: none;
        font-weight: 500;
        padding: 4px 8px;
        border-radius: 4px;
        transition: background 0.2s ease;
    }

    .zamel-breadcrumb-link:hover {
        background: white;
    }

    .zamel-breadcrumb-back {
        color: #c82333;
        text-decoration: none;
        font-weight: 500;
        padding: 4px 8px;
        border-radius: 4px;
        transition: all 0.2s ease;
        cursor: pointer;
    }

    .zamel-breadcrumb-back:hover {
        background: white;
        color: #a01e2a;
    }

    .zamel-breadcrumb-back:active {
        background: #e9ecef;
    }

    .zamel-breadcrumb-brand-link {
        color: #c82333;
        text-decoration: none;
        font-weight: 600;
        padding: 4px 8px;
        border-radius: 4px;
        transition: all 0.2s ease;
        cursor: pointer;
    }

    .zamel-breadcrumb-brand-link:hover {
        background: white;
        color: #a01e2a;
        text-decoration: underline;
    }

    .zamel-breadcrumb-brand-link:active {
        background: #e9ecef;
    }

    .zamel-breadcrumb-current {
        color: #212529;
        font-weight: 600;
        padding: 4px 8px;
    }

    .zamel-breadcrumb-separator {
        color: #adb5bd;
        font-weight: normal;
    }

    /* === LISTA KATEGORII === */
    .zamel-category-list {
        max-height: calc(85vh - 120px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-left: 30px;
    }

    .zamel-category-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px;
        border-bottom: 1px solid #f1f3f5;
        cursor: pointer;
        transition: background 0.2s ease;
        min-height: 64px;
    }

    .zamel-category-item:hover {
        background: #f8f9fa;
    }

    .zamel-category-item:active {
        background: #e9ecef;
    }

    /* Podświetlenie aktywnej kategorii - stonowane kolory projektu */
    .zamel-category-item.active {
        background: #f8f9fa;
        border-left: 4px solid #c82333;
        padding-left: 12px;
        box-shadow: inset 0 0 0 1px #e9ecef;
    }

    .zamel-category-item.active .zamel-category-name {
        font-weight: 700;
        color: #212529;
    }

    .zamel-category-item.active .zamel-category-count {
        color: #6c757d;
        font-weight: 500;
    }

    .zamel-category-item:last-child {
        border-bottom: none;
    }

    .zamel-category-main {
        display: flex;
        align-items: center;
        gap: 12px;
        flex: 1;
    }

    /* Kiedy brak ikony, usuń gap */
    .zamel-category-main:not(:has(.zamel-category-svg-icon)) {
        gap: 0;
    }

    .zamel-category-icon {
        font-size: 24px;
        width: 32px;
        text-align: center;
        flex-shrink: 0;
    }

    .zamel-category-svg-icon {
        width: 32px;
        height: 32px;
        object-fit: contain;
        flex-shrink: 0;
        filter: brightness(1.1);
        transition: filter 0.2s ease;
    }

    .zamel-category-item:hover .zamel-category-svg-icon {
        filter: brightness(1.3);
    }

    .zamel-category-item:active .zamel-category-svg-icon {
        filter: brightness(0.9);
    }

    .zamel-category-info {
        flex: 1;
        min-width: 0;
    }

    .zamel-category-name {
        font-size: 16px;
        font-weight: 500;
        color: #212529;
        margin-bottom: 2px;
        word-break: break-word;
    }

    .zamel-category-count {
        font-size: 13px;
        color: #6c757d;
    }

    .zamel-category-arrow {
        color: #DE000E;
        font-size: 20px;
        margin-left: 8px;
        flex-shrink: 0;
        padding-right: 20px;
    }

    /* Ukryj strzałkę dla kategorii końcowych */
    .zamel-category-item.is-final .zamel-category-arrow {
        display: none;
    }

    /* === PRZYCISK "WSZYSTKIE PRODUKTY {BRAND}" === */
    .zamel-category-item.zamel-show-all-products {
        background: linear-gradient(135deg, #c82333 0%, #a01e2a 100%);
        border: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        color: white;
        font-weight: 600;
        margin-bottom: 8px;
        box-shadow: 0 2px 4px rgba(200, 35, 51, 0.2);
    }

    .zamel-category-item.zamel-show-all-products:hover {
        background: linear-gradient(135deg, #a01e2a 0%, #85182 100%);
        box-shadow: 0 4px 8px rgba(200, 35, 51, 0.3);
    }

    .zamel-category-item.zamel-show-all-products:active {
        background: linear-gradient(135deg, #85182 0%, #6b1321 100%);
        transform: scale(0.98);
    }

    .zamel-category-item.zamel-show-all-products .zamel-category-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    .zamel-category-item.zamel-show-all-products .zamel-category-info {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .zamel-category-item.zamel-show-all-products .zamel-category-icon {
        font-size: 24px;
        line-height: 1;
    }

    .zamel-category-item.zamel-show-all-products .zamel-category-name {
        color: white;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0.3px;
    }

    .zamel-category-item.zamel-show-all-products .zamel-category-arrow {
        color: white;
        font-size: 20px;
        opacity: 0.9;
    }

    /* === POZIOMY KATEGORII === */
    .category-level {
        display: none;
    }

    .category-level.active {
        display: block;
    }

    /* === ANIMATIONS === */
    @keyframes slideUp {
        from {
            transform: translateY(100%);
        }
        to {
            transform: translateY(0);
        }
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    .slide-transition {
        animation: slideUp 0.3s ease-out;
    }

    .fade-transition {
        animation: fadeIn 0.2s ease-out;
    }

    /* === LOADING STATE === */
    .zamel-category-loading {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40px 16px;
        color: #6c757d;
        font-size: 14px;
    }

    .zamel-loading-spinner {
        width: 20px;
        height: 20px;
        border: 2px solid #e9ecef;
        border-top: 2px solid #c82333;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin-right: 8px;
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }

    /* === EMPTY STATE === */
    .zamel-category-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 40px 16px;
        color: #6c757d;
        text-align: center;
    }

    .zamel-empty-icon {
        font-size: 48px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

    .zamel-empty-title {
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 4px;
    }

    .zamel-empty-text {
        font-size: 14px;
    }

    /* === SORT MODAL === */
    .zamel-sort-modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9998;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }

    .zamel-sort-modal.active {
        opacity: 1;
        visibility: visible;
    }

    .zamel-sort-content {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
        transition: transform 0.3s ease;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
        padding: 16px;
    }

    .zamel-sort-modal.active .zamel-sort-content {
        transform: translateY(0);
    }

    .zamel-sort-option {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px;
        border-bottom: 1px solid #f1f3f5;
        cursor: pointer;
        transition: background 0.2s ease;
        font-size: 16px;
    }

    .zamel-sort-option:hover {
        background: #f8f9fa;
    }

    .zamel-sort-option:last-child {
        border-bottom: none;
    }

    .zamel-sort-option.active {
        color: #c82333;
        font-weight: 500;
    }

    .zamel-sort-check {
        color: #c82333;
        font-size: 18px;
    }

    /* === ACCESSIBILITY === */
    .zamel-modal-content:focus,
    .zamel-category-item:focus,
    .zamel-mobile-btn:focus {
        outline: 2px solid #c82333;
        outline-offset: 2px;
    }

    /* === SAFE AREA === */
    .zamel-modal-content {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* === BOTTOM NAVIGATION === */
@media (max-width: 768px) {
    .zamel-bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        border-top: 1px solid #e9ecef;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        padding: 8px 0 max(8px, env(safe-area-inset-bottom));
        z-index: 1000;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    }

    .zamel-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 8px 4px;
        text-decoration: none;
        color: #6c757d;
        font-size: 11px;
        font-weight: 500;
        transition: color 0.2s ease;
        min-height: 48px;
        justify-content: center;
    }

    .zamel-nav-item.active {
        color: #c82333;
    }

    .zamel-nav-item:hover {
        color: #c82333;
    }

    .zamel-nav-icon {
        font-size: 20px;
    }

    /* Dodaj padding-bottom do body gdy jest bottom navigation */
    body.has-bottom-nav {
        padding-bottom: 80px;
    }
}

/* === DESKTOP FALLBACK === */
@media (min-width: 769px) {
    /* Hide mobile UI on desktop - mobile-first approach */
    .zamel-mobile-actions,
    .zamel-mobile-btn,
    .zamel-category-modal,
    .zamel-sort-modal,
    .zamel-bottom-nav {
        display: none !important;
    }
}