﻿.catalogSection {
    padding: 32px 0;
    position: relative;
}

.catalogSection__main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
}

.categoryLinks__trigger:hover {
    cursor: pointer !important;
    color: var(--gray-700) !important;
}

@media (min-width: 992px) {
    .catalogNavigation__categoryList {
        margin: 0 -12px;
    }
}

.categoryLinks__item {
    transition: background-color .3s ease-in-out, border-color .3s ease-in-out;
    border-left: 3px solid transparent;
}

.categoryLinks__item button {
    min-height: 44px;
}

categoryLinks__item.isActive {
    color: var(--blue-sky-600);
}

.categoryLinks__item.isActive {
    background: var(--blue-sky-100, #E8F0FB);
    border-left-color: var(--blue-sky-600, #0058D2);
}



    .categoryLinks__item:hover {
        background: var( --gray-100);
        color: var(--black);
    }

    .categoryLinks__item.categoryLinks__trigger:hover.categoryLinks__icon,
    .categoryLinks__item.categoryLinks__trigger:hover.categoryLinks__item__title,
    .categoryLinks__trigger:hover .categoryLinks__icon,
    .categoryLinks__trigger:hover {
        color: var(--black);
    }


@media (min-width: 992px) {
    .catalogSection__main {
        grid-template-columns: minmax(340px, 1fr) minmax(0, 67%);
        /* Prevent the left navigation from shifting vertically when right accordions expand */
        align-items: start !important;
        align-content: start !important;
    }
}

@media (min-width: 992px) {
    .catalogSection__navigation {
        width: 340px;
        padding: 20px 12px;
        border-radius: 24px;
        border: 1px solid var(--gray-250, #d9d9d9);
        align-self: start;
        /* Navigation scrolls with content - not sticky */
        background-color: var(--white, #fff);
    }
}

@media (min-width: 1200px) {
    .catalogSection__main {
        gap: 56px;
    }
}

.catalogSection__navigation .tabsArea__body {
    position: static;
}

.catalogSection__navigation .tabsSwitchers {
    margin-bottom: 0;
    justify-content: flex-start;
}

.catalogSection__navigation .tabsSwitchers__container {
    background-color: var(--gray-200, #F1F1F1);
    width: 100%;
}

.catalogSection__navigation .tabsSwitchers__trigger {
    flex: 1;
}

.catalogNavigation {
    padding: 12px 0;
}


.catalogNavigation__mobTrigger {
    display: none;
}

@media (max-width: 991px) {
    .catalogNavigation__mobTrigger {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 48px 12px 16px;
        border-radius: var(--border-radius-full, 999px);
        background-color: var(--white, #fff);
        border: 1px solid var(--gray-250, #D9D9D9);
        width: 100%;
        position: relative;
    }

        .catalogNavigation__mobTrigger::after {
            content: '';
            width: 24px;
            height: 24px;
            background-image: url("data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.33555 9.33802C4.64753 9.02604 5.15335 9.02604 5.46533 9.33802L11.3112 15.1838C11.6925 15.5651 12.3107 15.5651 12.692 15.1838L18.5378 9.33802C18.8498 9.02604 19.3556 9.02604 19.6676 9.33802C19.9796 9.65 19.9796 10.1558 19.6676 10.4678L13.8218 16.3136C12.8165 17.3189 11.1866 17.3189 10.1814 16.3136L4.33555 10.4678C4.02357 10.1558 4.02357 9.65 4.33555 9.33802Z' fill='%23444444'/%3E%3C/svg%3E%0A");
            position: absolute;
            top: 50%;
            right: 16px;
            transform: translateY(-50%);
        }

    .catalogMobTrigger__icon {
        color: var(--blue-sky-600, #0058D2);
    }
}

.catalogNavigation__subtitle {
    font-weight: 500;
    font-size: 16px;
    line-height: 1.4;
    color: var(--gray-400, #757575);
    padding-left: 12px;
    padding-right: 12px;
}

@media (min-width: 992px) {
    .catalogNavigation__subtitle {
        font-size: 14px;
        padding-left: 0;
        padding-right: 0;
    }
}

.catalogNavigation__subtitle:not(:last-child) {
    margin-bottom: 12px;
    margin-top: 10px;
}

@media (min-width: 992px) {
    .catalogNavigation__subtitle:not(:last-child) {
        margin-bottom: 16px;
        padding-inline: var(--spacing-12);
        margin-bottom: var(--spacing-12);
    }
}

@media (max-width: 991px) {
    .catalogNavigation__content {
        height: calc(100vh - 106px);
    }
}

@media (max-width: 767px) {
    .catalogNavigation__content {
        height: calc(100vh - 100px);
    }
}

@media (max-width: 575px) {
    .catalogNavigation__content {
        height: calc(100vh - 66px);
    }
}

.catalogNavigation__mobBtnClose {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    margin-left: auto;
    margin-top: -8px;
}

@media (min-width: 992px) {
    .catalogNavigation__mobBtnClose {
        display: none;
    }
}

.categoryLinks__trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--gray-700, #383838);
    padding: 10px 12px;
    border-radius: 6px;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
    cursor: pointer;
}



@media (min-width: 992px) {
    .categoryLinks__trigger {
        padding: 10px 16px;
    }
}

.categoryLinks__trigger.isActive {
    background-color: var(--gray-100, #F5F5F5);
    color: var(--blue-sky-600);
    font-weight: 500;
}

    .categoryLinks__trigger.isActive.categoryLinks__item__title {
        color: var(--blue-sky-600) !important;
    }

    .categoryLinks__trigger.isActive {
        cursor: default;
    }

    .categoryLinks__trigger.isActive .categoryLinks__icon {
        color: var(--blue-sky-600, #0058D2);
    }

.categoryLinks__icon {
    width: 20px;
    height: 20px;
    color: var(--black, #121212);
}

.catalogSection__contentHeader:not(:last-child) {
    margin-bottom: 32px;
}

.catalogHeader__breadcrumbs {
    display: flex;
}

.catalogHeader__breadcrumbs:not(:last-child) {
    margin-bottom: 16px;
}

/* All breadcrumbs should use tertiary color (we don't display active level to avoid duplicating title) */
.catalogHeader__breadcrumbs .breadcrumbs__text {
    color: var(--gray-400, #757575);
}

/* On mobile, show breadcrumbs with previous level (different from desktop) */
@media (max-width: 991px) {
    /* Hide all breadcrumbs by default on mobile */
    .catalogHeader__breadcrumbs .breadcrumbs__item {
        display: none;
    }
    
    /* If only Home is present, show it with back arrow */
    .catalogHeader__breadcrumbs .breadcrumbs__item:only-child {
        display: inline-flex;
    }
    
    /* Show only the previous level on mobile (last item before current level) */
    /* If there are 2 items (Home > Category), show Category (last item) */
    .catalogHeader__breadcrumbs .breadcrumbs__item:last-child:not(:only-child) {
        display: inline-flex; /* Show last item if there are 2 items */
    }
    
    /* Hide Home (first item) on mobile when there are multiple items */
    .catalogHeader__breadcrumbs .breadcrumbs__item:first-child:not(:only-child) {
        display: none !important;
    }
    
    /* Add reversed arrow (pointing left) before visible breadcrumb on mobile */
    .catalogHeader__breadcrumbs .breadcrumbs__item:last-child:not(:only-child)::before,
    .catalogHeader__breadcrumbs .breadcrumbs__item:only-child::before {
        content: '';
        width: 16px;
        height: 16px;
        background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.0206 4.14233C10.3135 4.43522 10.3135 4.91 10.0206 5.20289L7.27649 7.94702C7.24394 7.97956 7.24394 8.03232 7.27649 8.06487L10.0206 10.8089C10.3135 11.1018 10.3135 11.5767 10.0206 11.8696C9.72767 12.1625 9.2528 12.1625 8.9599 11.8696L6.21583 9.12553C5.59754 8.5072 5.59754 7.50469 6.21583 6.88636L8.9599 4.14233C9.2528 3.84944 9.72767 3.84944 10.0206 4.14233Z' fill='%23757575'/%3E%3C/svg%3E%0A");
        display: block;
        flex: none;
        margin-right: 4px;
    }
}

@media (min-width: 992px) {
    /* All breadcrumbs visible on desktop */
    .catalogHeader__breadcrumbs .breadcrumbs__item {
        display: inline-flex;
    }
}

.catalogHeader__title {
    font-weight: 600;
    font-size: 28px;
    line-height: 1.2;
    color: var(--black, #121212);
    display: inline-block;
    transition: color 0.3s ease-in-out;
}

@media (min-width: 992px) {
    .catalogHeader__title {
        font-size: 40px;
    }
}

a.catalogHeader__title:hover {
    color: var(--blue-sky-600, #0058D2);
}

.catalogSection__accordions .accordionCustom__body {
    padding: 0;
}

.catalogSection__accordions .accordionCustom__item:first-child {
    border-top: 1px solid var(--gray-250);
}

/* Prevent accordion content from overlapping other accordions */
.catalogSection__accordions .accordionCustom__item {
    position: relative;
    overflow: visible;
}

.catalogSection__accordions .accordionCustom__item .collapse {
    position: relative;
    overflow: hidden;
}

/* Smooth collapse animation - ensure proper height transition */
.catalogSection__accordions .accordionCustom__item .collapse.collapsing {
    transition: height 0.35s ease;
    overflow: hidden;
}

/* Ensure collapsed state doesn't cause layout issues */
.catalogSection__accordions .accordionCustom__item .collapse:not(.show):not(.collapsing) {
    display: none;
}


.catalogHeader__title:not(:last-child) {
    margin-bottom: 12px;
}

@media (min-width: 992px) {
    .catalogHeader__title:not(:last-child) {
        margin-bottom: 24px;
    }
}

.catalogHeader__types .tabsSwitchers {
    justify-content: flex-start;
}

.infoItem {
    padding: 16px 16px 16px 32px;
    position: relative;
    transition: background-color 0.3s ease-in-out;
}

@media (min-width: 768px) {
    .infoItem {
        padding: 24px 24px 24px 60px;
    }
}

.infoItem:hover {
    background-color: var(--gray-100, #F5F5F5);
    border-radius: var(--border-radius-12, 12px);
}

.infoItem__heading {
    flex-wrap: nowrap;
    align-items: flex-start;
}

    .infoItem__heading .infoItem__title {
        font-weight: 500;
        font-size: 18px;
        line-height: 28px;
    }
    .infoItem__heading .infoItem__desc {
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
    }

.infoItem__icon {
    width: 19px;
    height: 22px;
    display: block;
    flex: none;
    position: absolute;
    top: 24px;
    left: 0px;
}

@media (min-width: 768px) {
    .infoItem__icon {
        top: 27px;
        left: 24px;
    }
}

.infoItem__tags:not(:last-child) {
    margin-bottom: 12px;
}

.infoItem__desc {
    font-size: 14px;
    line-height: 1.5;
    font-weight: 400;
}

.catalog-tab-trigger {
    height: 40px;
}

.tabsSwitchers__text {
    font-weight: 400;
    max-width: 15ch;
    overflow: hidden;
    display: -webkit-box; /* Required for -webkit-line-clamp */
    -webkit-line-clamp: 1; /* Limit to 1 line for a single-line effect */
    -webkit-box-orient: vertical;
    text-overflow: ellipsis; /* Adds ellipsis for overflow */
    white-space: nowrap; /* Prevents text from wrapping */
}

/* Catalog Accordion Header Styles */
.catalogAccordion__btn {
    padding: 24px 0;
    gap: 64px;
    align-items: center;
}

.catalogAccordion__content {
    flex: 1 0 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
}

.catalogAccordion__title {
    font-family: 'Onest', sans-serif;
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.24px;
    color: var(--blue-sky-600, #0058d2);
    margin: 0;
}

.catalogAccordion__btn.collapsed .catalogAccordion__title {
    color: inherit;
}

.catalogAccordion__subtitle {
    font-family: 'Onest', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--gray-400, #757575);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

.catalogAccordion__collapseBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    flex-shrink: 0;
    overflow: hidden;
}

.catalogAccordion__collapseIcon {
    width: 16px;
    height: 16px;
    color: var(--black, #121212);
    transition: transform 0.3s ease;
}

.accordionCustom__item:has(.show) .catalogAccordion__collapseIcon {
    transform: rotate(90deg);
}

/* Catalog Service Item Styles */
.catalogServiceItem {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 24px;
    background-color: var(--white, #ffffff);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.3s ease;
}

.catalogServiceItem:hover {
    background-color: var(--gray-100, #F5F5F5);
}

.catalogServiceItem__iconContainer {
    width: 20px;
    height: 26px;
    flex-shrink: 0;
    position: relative;
}

.catalogServiceItem__icon {
    width: 20px;
    height: auto;
    display: block;
}

.catalogServiceItem__content {
    flex: 1 0 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.catalogServiceItem__header {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
}

.catalogServiceItem__title {
    font-family: 'Onest', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: var(--black, #121212);
    margin: 0;
}

.catalogServiceItem__tag {
    align-self: flex-start;
}

.catalogServiceItem__tag .tag__icon {
    width: 16px;
    height: 16px;
}

.catalogServiceItem__desc {
    font-family: 'Onest', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--gray-400, #757575);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.catalogSection__accordions .accordionCustom__body {
    padding: 0 0 12px 0;
}

@media (max-width: 767px) {
    .catalogAccordion__btn {
        gap: 16px;
        padding: 16px 0;
    }

    .catalogAccordion__title {
        font-size: 20px;
        line-height: 28px;
    }

    .catalogServiceItem {
        padding: 16px;
        gap: 12px;
    }
}