@charset "utf-8";

/* --------------------------------------------------------------------------
   Organizations map
-------------------------------------------------------------------------- */

    #organizations-map {

        width: 100%;
        height: calc(100svh - var(--public-header-height));

        .ymaps3--map-container {

            z-index: 1;

            .ymaps3--controls:has(.ymaps3--open-maps-button), .ymaps3--map-copyrights__logo {
                display: none;
            }

        }

        .marker {

            width: var(--space-16);
            height: var(--space-16);
            position: relative;
            cursor: pointer;
            transform: translate(-50%, -50%);

            &::before {
                width: var(--space-12);
                height: var(--space-12);
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                background: var(--color-brand-primary);
                border-radius: 50%;
                box-shadow:
                        0 0 0 var(--space-2) var(--color-neutral-content-inverse-high),
                        0 var(--space-2) var(--space-6) rgb(0 0 0 / var(--opacity-16));
                transform: translate(-50%, -50%);
                transition: background var(--transition-default);
            }

            &:hover::before {
                background: var(--color-brand-primary-hover);
            }

        }

        .cluster {

            width: 2.5625rem;
            height: 2.25rem;
            position: relative;
            color: var(--color-brand-surface-high);
            cursor: pointer;
            transform: translate(-50%, -50%);
            filter: drop-shadow(0 var(--space-2) var(--space-4) rgb(0 0 0 / var(--opacity-16)));

            svg {
                width: 100%;
                height: 100%;
                display: block;
                --cluster-background: var(--color-brand-surface-high);
                --cluster-border: var(--color-neutral-content-inverse-high);
            }

            span {
                width: 100%;
                height: var(--space-32);
                display: flex;
                align-items: center;
                justify-content: center;
                position: absolute;
                top: 0;
                left: 0;
                color: var(--color-brand-primary);
                font-size: var(--font-size-body-m);
                line-height: 1;
                font-weight: var(--font-weight-medium);
                pointer-events: none;
            }

            &:hover {

                svg {
                    --cluster-background: var(--color-brand-primary);
                }

                span {
                    color: var(--color-neutral-content-inverse-high);
                }

            }

        }

    }


/* --------------------------------------------------------------------------
    Organizations List
-------------------------------------------------------------------------- */

    #organizations-list {

        width: 30rem;
        display: flex;
        flex-direction: column;
        position: fixed;
        z-index: 10;
        top: calc(var(--public-header-height) + var(--space-28));
        bottom: var(--space-28);
        left: var(--space-56);
        box-sizing: border-box;
        background: var(--color-neutral-white);
        border-radius: var(--radius-600);
        overflow: hidden;
        box-shadow: var(--shadow-default);

        .search {

            height: var(--space-48);
            margin: var(--space-16) var(--space-16) var(--space-12);
            padding: 0 var(--space-16);
            display: flex;
            align-items: center;
            gap: var(--space-10);
            flex: none;
            box-sizing: border-box;
            background: var(--color-neutral-surface-low);
            border-radius: var(--radius-500);

            svg {
                width: var(--space-24);
                height: var(--space-24);
                flex: none;
                color: var(--color-neutral-content-low);
                fill: none;
                stroke: currentColor;
            }

            input {
                width: 100%;
                min-width: 0;
                padding: 0;
                border: 0;
                outline: 0;
                background: transparent;
                color: var(--color-neutral-content-high);
                font-family: var(--font-family-primary);
                font-size: var(--font-size-body-m);
                font-weight: var(--font-weight-regular);
                line-height: var(--line-height-body-m);

                &::placeholder {
                    color: var(--color-neutral-content-low);
                }
            }

        }

        .filters {

            margin: 0 var(--space-16);
            padding-bottom: var(--space-12);
            display: flex;
            gap: var(--space-8);
            flex: none;
            overflow-x: auto;
            scrollbar-width: none;

            &::-webkit-scrollbar {
                display: none;
            }

            .filter {

                height: var(--space-40);
                padding: 0 var(--space-12);
                flex: none;
                box-sizing: border-box;
                background: var(--color-neutral-white);
                border: var(--border-width) solid var(--color-neutral-border-low);
                border-radius: var(--radius-300);
                color: var(--color-neutral-content-low);
                font-family: var(--font-family-primary);
                font-size: var(--font-size-body-s);
                font-weight: var(--font-weight-regular);
                line-height: var(--line-height-body-s);
                white-space: nowrap;
                cursor: pointer;
                transition: color var(--transition-default), background var(--transition-default), border-color var(--transition-default);

                &:hover {
                    background: var(--color-brand-surface-lowest);
                }

                &.selected {
                    color: var(--color-brand-primary);
                    background: var(--color-brand-surface-low);
                    border-color: transparent;
                }

            }

        }

        .list {

            min-height: 0;
            flex: 1;
            overflow-y: auto;

            .organization {

                width: 100%;
                padding: var(--space-8) var(--space-16);
                display: flex;
                align-items: center;
                gap: var(--space-12);
                box-sizing: border-box;
                background: var(--color-neutral-white);
                cursor: pointer;
                transition: background var(--transition-default);

                &[hidden] {
                    display: none;
                }

                &:hover {
                    background: var(--color-brand-surface-lowest);
                }

                &.selected {
                    background: var(--color-brand-surface-medium);
                }

                .info {

                    min-width: 0;
                    flex: 1;

                    strong {
                        display: block;
                        overflow: hidden;
                        color: var(--color-neutral-content-high);
                        font-size: var(--font-size-body-s);
                        font-weight: var(--font-weight-semibold);
                        line-height: var(--line-height-body-s);
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }

                    .meta {

                        display: flex;
                        align-items: center;
                        gap: var(--space-4);
                        min-width: 0;
                        overflow: hidden;
                        color: var(--color-neutral-content-low);
                        font-size: var(--font-size-body-s);
                        font-weight: var(--font-weight-regular);
                        line-height: var(--line-height-body-s);
                        white-space: nowrap;

                        > span {
                            flex: none;
                        }

                        > span:last-child {
                            min-width: 0;
                            flex: 1;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }

                        .status {

                            color: var(--color-neutral-content-medium-low);

                            &.open, &.closingSoon, &.aroundClock {
                                color: var(--color-positive-primary);
                            }

                            &.closed {
                                color: var(--color-negative-primary);
                            }

                        }

                    }

                    address {
                        overflow: hidden;
                        color: var(--color-neutral-content-low);
                        font-size: var(--font-size-body-s);
                        font-weight: var(--font-weight-regular);
                        font-style: normal;
                        line-height: var(--line-height-body-s);
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }

                }

                .logo {

                    width: var(--space-32);
                    height: var(--space-32);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-shrink: 0;
                    overflow: hidden;
                    background: var(--color-brand-surface-low);
                    border-radius: var(--radius-700);

                    img {
                        width: 100%;
                        height: 100%;
                        display: block;
                        object-fit: cover;
                    }

                    svg {
                        width: var(--space-20);
                        height: var(--space-20);
                        color: var(--color-brand-secondary-primary);
                        fill: none;
                        stroke: currentColor;
                    }

                }

            }

            .empty {

                height: 100%;
                padding: var(--space-32);
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                box-sizing: border-box;
                text-align: center;

                &[hidden] {
                    display: none;
                }

                svg {
                    width: var(--space-48);
                    height: var(--space-48);
                    margin-bottom: var(--space-16);
                    color: var(--color-neutral-content-low);
                    fill: none;
                    stroke: currentColor;
                }

                strong {
                    color: var(--color-neutral-content-high);
                    font-size: var(--font-size-body-l);
                    font-weight: var(--font-weight-medium);
                    line-height: var(--line-height-body-l);
                }

                span {
                    margin-top: var(--space-4);
                    color: var(--color-neutral-content-low);
                    font-size: var(--font-size-body-m);
                    font-weight: var(--font-weight-regular);
                    line-height: var(--line-height-body-m);
                }

            }

        }

    }


/* --------------------------------------------------------------------------
   Office Details
-------------------------------------------------------------------------- */

    #office-details {

        width: 30rem;
        position: fixed;
        z-index: 11;
        top: calc(var(--public-header-height) + var(--space-28));
        bottom: var(--space-28);
        left: calc(var(--space-56) + 30rem + var(--space-28));

        button {
            font-family: var(--font-family-primary);
        }

        [data-action="close"] {

            width: var(--space-40);
            height: var(--space-40);
            display: flex;
            position: absolute;
            z-index: 2;
            top: 0;
            right: calc(-1 * var(--space-48));
            align-items: center;
            justify-content: center;
            padding: 0;
            color: var(--color-neutral-content-high);
            background: var(--color-neutral-white);
            border: 0;
            border-radius: var(--radius-300);
            cursor: pointer;
            box-shadow: var(--shadow-default);
            transition: var(--transition-default);

            &:hover svg {
                stroke: var(--color-brand-primary);
                scale: 1.1;
            }

            svg {
                width: var(--space-24);
                height: var(--space-24);
                fill: none;
                stroke: currentColor;
            }

            &:active {
                transform: scale(.96);
            }

        }

        .details-scroll {

            height: 100%;
            display: flex;
            flex-direction: column;
            gap: var(--space-8);
            overflow-y: auto;
            scrollbar-width: none;
            filter: drop-shadow(var(--shadow-default));
            border-radius: var(--radius-600);

            &::-webkit-scrollbar {
                display: none;
            }


            .office-card, .details-card {
                flex: none;
                box-sizing: border-box;
                background: var(--color-neutral-white);
                border-radius: var(--radius-600);
                overflow: hidden;
            }

            .office-card {

                .gallery {

                    width: 100%;
                    position: relative;
                    display: block;
                    padding: var(--space-8);
                    box-sizing: border-box;
                    background: transparent;
                    border: 0;
                    cursor: pointer;

                    > img {
                        width: 100%;
                        aspect-ratio: 16 / 9;
                        display: block;
                        object-fit: cover;
                        border-radius: var(--radius-400);
                    }

                    .gallery-indicators {

                        display: flex;
                        position: absolute;
                        right: var(--space-16);
                        bottom: var(--space-16);
                        left: var(--space-16);
                        justify-content: center;
                        gap: var(--space-4);

                        i {
                            width: var(--space-24);
                            height: var(--space-4);
                            background: var(--color-neutral-white);
                            border-radius: var(--radius-700);
                            opacity: .36;

                            &.selected {
                                opacity: 1;
                            }
                        }

                    }

                }

                .office-content {

                    padding: var(--space-12) var(--space-16) var(--space-16);

                    .office-header {

                        display: flex;
                        align-items: center;
                        gap: var(--space-12);
                        margin-bottom: var(--space-16);

                        .logo {

                            width: var(--space-40);
                            height: var(--space-40);
                            display: flex;
                            flex: none;
                            align-items: center;
                            justify-content: center;
                            box-sizing: border-box;
                            overflow: hidden;
                            background: var(--color-brand-surface-low);
                            border: var(--border-width) solid var(--color-neutral-border-low);
                            border-radius: var(--radius-700);

                            img {
                                width: 100%;
                                height: 100%;
                                display: block;
                                object-fit: cover;
                            }

                            svg {
                                width: var(--space-24);
                                height: var(--space-24);
                                color: var(--color-brand-secondary-primary);
                                fill: none;
                                stroke: currentColor;
                            }

                        }

                        > div:last-child {

                            min-width: 0;
                            flex: 1;

                            strong, span {
                                display: block;
                            }

                            strong {
                                overflow: hidden;
                                color: var(--color-neutral-content-high);
                                font-size: var(--font-size-body-m);
                                font-weight: var(--font-weight-medium);
                                line-height: var(--line-height-body-m);
                                text-overflow: ellipsis;
                                white-space: nowrap;
                            }

                            span {
                                margin-top: var(--space-2);
                                color: var(--color-neutral-content-low);
                                font-size: var(--font-size-body-s);
                                line-height: var(--line-height-body-s);
                            }

                        }

                    }

                    .office-row {

                        margin: 0 calc(-1 * var(--space-8));
                        padding: var(--space-8);
                        display: grid;
                        grid-template-columns: var(--space-24) minmax(0, 1fr) var(--space-24);
                        align-items: start;
                        gap: var(--space-12);
                        box-sizing: border-box;
                        border-radius: var(--radius-300);
                        transition: background var(--transition-default);

                        &[data-toggle], &.phone {

                            cursor: pointer;

                            &:hover {
                                background: var(--color-neutral-surface-low);
                            }

                        }

                        &[aria-expanded="true"] {
                            background: var(--color-neutral-surface-low);
                        }

                        > svg:first-child {
                            width: var(--space-24);
                            height: var(--space-24);
                            color: var(--color-neutral-content-low);
                            fill: none;
                            stroke: currentColor;
                        }

                        > div {

                            min-width: 0;
                            min-height: var(--space-24);
                            display: flex;
                            flex-direction: column;
                            justify-content: center;

                            strong, span {
                                display: block;
                            }

                            strong {
                                overflow: hidden;
                                color: var(--color-neutral-content-high);
                                font-size: var(--font-size-body-s);
                                font-weight: var(--font-weight-medium);
                                line-height: var(--line-height-body-s);
                                text-overflow: ellipsis;
                                white-space: nowrap;
                            }

                            > span {
                                margin-top: var(--space-4);
                                color: var(--color-neutral-content-low);
                                font-size: var(--font-size-body-s);
                                line-height: var(--line-height-body-s);
                            }

                            address {
                                overflow: hidden;
                                color: var(--color-neutral-content-high);
                                font-size: var(--font-size-body-s);
                                font-weight: var(--font-weight-medium);
                                font-style: normal;
                                line-height: var(--line-height-body-s);
                                text-overflow: ellipsis;
                                white-space: nowrap;
                            }

                        }

                        .status {

                            &.open, &.closingSoon, &.aroundClock {
                                color: var(--color-positive-primary);
                            }

                            &.closed, &.openingSoon {
                                color: var(--color-negative-primary);
                            }

                        }

                        > svg.chevron {

                            width: var(--space-20);
                            height: var(--space-20);
                            margin-top: var(--space-2);
                            align-self: start;
                            justify-self: center;
                            color: var(--color-neutral-content-low);
                            fill: none;
                            stroke: currentColor;
                            transform: rotate(270deg);
                            transition: transform var(--transition-default);

                        }

                        &[aria-expanded="true"] {

                            > svg.chevron {
                                transform: rotate(180deg);
                            }

                        }

                        &.phone {

                            margin-top: var(--space-8);

                            .phone-primary {

                                display: flex;
                                flex-direction: row;
                                align-items: baseline;
                                gap: var(--space-6);

                                strong, span {
                                    margin: 0;
                                }

                                .show-phone {
                                    color: var(--color-neutral-content-low);
                                    white-space: nowrap;
                                    font-size: var(--font-size-body-s);
                                }

                            }

                            &.loaded {
                                cursor: default;
                            }

                        }

                    }

                    .office-expand {

                        margin: 0 0 var(--space-12) calc(var(--space-24) + var(--space-12));
                        padding: 0;
                        list-style: none;

                        &[hidden] {
                            display: none;
                        }

                        &.schedule {

                            li {

                                display: flex;
                                justify-content: space-between;
                                gap: var(--space-16);
                                padding: var(--space-4) 0;
                                color: var(--color-neutral-content-low);
                                font-size: var(--font-size-body-s);
                                line-height: var(--line-height-body-s);

                                strong {
                                    color: var(--color-neutral-content-high);
                                    font-weight: var(--font-weight-medium);
                                    text-transform: lowercase;
                                }

                            }

                        }

                        &.addresses {

                            li {

                                padding: var(--space-6) 0;
                                color: var(--color-neutral-content-high);
                                font-size: var(--font-size-body-s);
                                line-height: var(--line-height-body-s);

                                &.current {
                                    font-weight: var(--font-weight-medium);
                                }

                                span {

                                    color: var(--color-brand-primary);
                                    cursor: pointer;

                                    &:hover {
                                        color: var(--color-brand-primary-hover);
                                    }

                                }

                            }

                        }

                    }

                    [data-contacts] {

                        a {
                            display: block;
                            color: var(--color-neutral-content-high);
                            text-decoration: none;

                            &:hover {
                                color: var(--color-brand-primary);
                            }
                        }

                        span a {
                            margin-top: var(--space-6);
                        }

                    }

                }

            }

            .details-card {

                padding: var(--space-12);

                .tabs {

                    display: flex;
                    gap: var(--space-4);
                    margin-bottom: var(--space-20);

                    button {

                        min-height: var(--space-32);
                        padding: 0 var(--space-12);
                        color: var(--color-neutral-content-low);
                        background: transparent;
                        border: 0;
                        border-radius: var(--radius-300);
                        font-size: var(--font-size-body-s);
                        cursor: pointer;
                        transition: color var(--transition-default), background var(--transition-default);

                        &:hover, &.selected {
                            color: var(--color-brand-primary);
                            background: var(--color-brand-surface-low);
                        }

                    }

                }

                [data-section] {

                    color: var(--color-neutral-content-high);
                    font-size: var(--font-size-body-s);
                    line-height: var(--line-height-body-m);
                    scroll-margin-top: var(--space-16);

                    + [data-section] {
                        margin-top: var(--space-32);
                    }

                    p {
                        margin: 0;
                    }

                    h1, h2, h3, h4, h5 {
                        margin-top: 0;
                    }

                    h3 {
                        margin-bottom: var(--space-12);
                        font-size: var(--font-size-body-s);
                        font-weight: var(--font-weight-medium);
                    }

                    .services {

                        display: flex;
                        flex-wrap: wrap;
                        gap: var(--space-8);
                        margin: 0;
                        padding: 0;
                        list-style: none;

                        li {
                            padding: var(--space-8) var(--space-10);
                            color: var(--color-neutral-content-high);
                            background: var(--color-neutral-surface-low);
                            border-radius: var(--radius-300);
                            font-size: var(--font-size-body-s);
                            line-height: var(--line-height-body-s);
                        }

                    }

                    .statistics {

                        display: grid;
                        grid-template-columns: repeat(4, minmax(0, 1fr));
                        gap: var(--space-8);
                        margin: 0;

                        div {
                            min-width: 0;
                            min-height: var(--space-64);
                            padding: var(--space-12) var(--space-8);
                            box-sizing: border-box;
                            background: var(--color-neutral-surface-low);
                            border-radius: var(--radius-300);
                        }

                        dt, dd {
                            margin: 0;
                        }

                        dd {
                            color: var(--color-neutral-content-high);
                            font-size: var(--font-size-body-s);
                            font-weight: var(--font-weight-medium);
                            line-height: var(--line-height-body-s);
                        }

                        dt {
                            margin-top: var(--space-8);
                            overflow: hidden;
                            color: var(--color-neutral-content-low);
                            font-size: var(--font-size-body-s);
                            line-height: var(--line-height-body-s);
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }

                    }

                }

            }

        }

    }


/* --------------------------------------------------------------------------
    Footer
-------------------------------------------------------------------------- */

    footer {
        display: none;
    }