/*#region CLIKACÍ MAPA V O FIRMĚ */
.clickmap-presentace-firmy {
    & {
        overflow: hidden;
        margin-top: 153px;
    }

    .point {
        width: clamp(30px, calc(42 / 1920 * 100vw), 42px);
        height: clamp(30px, calc(42 / 1920 * 100vw), 42px);
        border-radius: 50%;
        background-color: white;
        position: absolute;
        z-index: 100;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: clamp(16px, calc(20 / 1920 * 100vw), 20px);
        font-weight: bold;
        color: var(--g-color-2);
    }

    .point:hover {
        background-color: var(--g-color-2);
        color: white;
    }

    .header {
        color: white;
        width: 1000px;
        height: 30%;
        top: 0;
        left: calc(67% - 500px);
        padding-top: calc(50 / 1920 * 100vw);
        pointer-events: none;
        display: flex;
        justify-content: center;
        gap: 6vw;
    }

    @media (min-width: 768px) {
        .header {
            padding-top: calc(50 / 1920 * 100vw);
            gap: 6vw;
        }
    }
    @media (min-width: 1920px) {
        .header {
            padding-top: 23px;
            gap: 10%;
        }
    }

    .header-extra {
        color: white;
        height: 30%;
        top: 0;
        left: 0;
        padding-top: calc(50 / 1920 * 100vw);
        pointer-events: none;
        justify-content: start;
    }

    @media (min-width: 768px) {
        .header-extra {
            padding-top: calc(50 / 1920 * 100vw);
        }
    }
    @media (min-width: 1300px) {
        .header-extra {
            left: clamp(15px, calc(56 / 1920 * 100vw), 56px);
        }
    }
    @media (min-width: 1920px) {
        .header-extra {
            padding-top: 0;
        }
    }


    .header-extra .ico-bg {
        padding: clamp(0px, calc(4 / 1920 * 100vw), 4px);
        background: white;
        border-radius: 50%;
        top: 2px;
    }

    .header-extra .ico-bg img {
        width: clamp(10px, calc(26 / 1920 * 100vw), 26px);
        height: clamp(10px, calc(26 / 1920 * 100vw), 26px);
    }

    .areal {
        position: relative;
        text-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
        display: flex;
    }

    .areal .title {
        font-size: clamp(19px, calc(20 / 1920 * 100vw), 20px);
    }

    .areal .subtitle {
        font-size: clamp(15px, calc(20 / 1920 * 100vw), 20px);
    }

    .areal.areal-left {
        flex: 1 0 50%;
        align-items: flex-end;
    }

    .areal.areal-right {
        flex: 1 0 50%;
        align-items: flex-start;
    }


    .click-map-nav {
        background: var(--g-color-2);
        color: white;
        display: flex;
        align-items: flex-start;
        flex-direction: column;
    }

    @media (min-width: 992px) {
        .click-map-nav {
            flex-direction: row;
        }
    }

    .areal-section {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }

    .areal-1.areal-section {
        flex: 1 1 100%;
        max-width: 100%;
        padding-left: 45px;
        width: 100%;
    }

    .areal-2.areal-section {
        flex: 1 1 100%;
        padding-left: 45px;
        background: var(--g-color-1);
        width: 100%;
    }

    @media (min-width: 992px) {
        .areal-section {
            padding-top: 2.6rem;
            padding-bottom: 3.9rem;
        }

        .areal-1.areal-section {
            flex: 0 0 67.05%;
            max-width: 67.05%;
            padding-left: 45px;
            width: unset;
        }

        .areal-2.areal-section {
            flex: 1;
            padding-left: clamp(30px, calc(47 / 1920 * 100vw), 47px);
            width: unset;
            padding-right: 45px;
        }
    }

    @media (min-width: 1300px) {
        .areal-1.areal-section {
            padding-left: clamp(50px, calc(226 / 1920 * 100vw), 226px);

        }

    }
    .areal-section {
        display: flex;
        gap: 0.5rem;
        flex-direction: column;
    }

    @media (min-width: 1700px) {
        .areal-section {
            flex-direction: row;
        }
    }

    .areal-header {
        font-size: 20px;
        font-weight: 600;
        min-width: 106px;
    }

    .areal-legend {
        display: grid;
        flex-wrap: wrap;
        gap: 0.5rem;
        font-size: 16px;
        flex-direction: column;
    }


    @media (min-width: 1300px) {
        .areal-legend {
            font-size: clamp(18px, calc(20 / 1920 * 100vw), 20px);
        }
    }

    @media (min-width: 992px) {
        .areal-1 .areal-legend {
            gap: 1.05rem clamp(15px, calc(42 / 1920 * 100vw), 42px);
        }

        .areal-1 .areal-legend {
            grid-template-columns: repeat(2, auto);
            grid-template-rows: repeat(3, auto);
            grid-auto-flow: row;
            padding-right: clamp(100px, calc(300 / 1920 * 100vw), 300px);
        }
    }
    @media (min-width: 1700px) {
        .areal-1 .areal-legend {
            padding-right: 0;
        }
    }
    .areal-2 .areal-legend {
        grid-template-columns: repeat(1, 100%);
        gap: 0.5rem 0;
    }

    @media (min-width: 1300px) {
        .areal-2 .areal-legend {
            gap: 0.65rem 0;
        }
    }

    .areal-legend > div {
        display: flex;
    }

    .areal-legend .area-label {
        padding-right: 5px;
        text-decoration: none;
        font-weight: bold;
    }


    .areal-1 .areal-legend .area-label {
        color: var(--g-color-1);
    }

    .areal-2 .areal-legend .area-label {
        color: black;
    }

    .areal-legend .area-title .link_virtual_tour {
        text-decoration: underline;
        color: white;
        font-weight: 600;
        transition: color 0.3s ease-in-out;
    }

    .areal-1 .areal-legend .area-title .link_virtual_tour:hover {
        color: var(--g-color-ligh-blue);
    }
    .areal-2 .areal-legend .area-title .link_virtual_tour:hover {
        color: var(--g-color-2);
    }


    .area-container:after {
        content: "";
        height: 2px;
        background: white;
        position: absolute;
        bottom: -15px;
        width: calc(100% + 60px);
    }


    .areal-right .area-container:after {
        left: -60px;
    }
}

.with_virtual_tour {
    display: flex;
    align-items: center;
}

.with_virtual_tour::after {
    content: url('/_data/styly/zakoturcin/img/ico-virtualni-prohlidkai.png');
    display: inline-block;
    width: 30px;
    height: 30px;
    margin-left: 8px;
    vertical-align: middle;
}

.popover {
    border-color: rgba(var(--g-color-2-rgb), 0.4);
}

.popover-header {
    background-color: #a1e6fa;
}


#btn-clickm-map-virtualni-prohlidka {
    & {
        display: flex;
        gap: 32px;
        padding: 5px 45px;
        width: 540px;
        align-items: center;
        margin-left: 0;
    }

    @media (min-width: 1300px) {
        & {
            margin-left: clamp(45px, calc(160 / 1920 * 100vw), 160px);
            padding: 5px 55px;

        }
    }

    .img-wrapper {
        width: clamp(12px, calc(102 / 1920 * 100vw), 102px);
    }

    .content {
        .service_name {
            font-size: clamp(16px, calc(24 / 1920 * 100vw), 24px);
            font-weight: 600;
            color: white;
            padding-left: 3px;
        }

        .title {
            font-size: clamp(21px, calc(29 / 1920 * 100vw), 29px);
            font-weight: 800;
            color: var(--g-color-ligh-blue);
            line-height: 1.2;

        }
    }
}

@media (max-width: 991.98px) {
    .clickmap-presentace-firmy.mobil-version {
        margin-top: 0;
        overflow: visible;
    }

    .clickmap-presentace-firmy.mobil-version .mobile-map-image {
        overflow: hidden;
    }

    .clickmap-presentace-firmy.mobil-version .mobile-map-image > div:first-child {
        position: relative;
    }

    .clickmap-presentace-firmy.mobil-version .mobile-map-image img {
        display: block;
    }

    .clickmap-presentace-firmy.mobil-version .point {
        width: clamp(28px, 8vw, 30px);
        height: clamp(28px, 8vw, 30px);
        font-size: clamp(14px, 4vw, 18px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
        transform: translate(-50%, -50%);
    }

    .clickmap-presentace-firmy.mobil-version .click-map-nav {
        padding: 0;
    }

    .clickmap-presentace-firmy.mobil-version .mobile-areal-section {
        gap: 1rem;
        padding: 1.5rem 45px 1.75rem;
    }

    .clickmap-presentace-firmy.mobil-version .areal-header {
        font-size: 1.3rem;
        line-height: 1.35;
        min-width: 0;
        margin-bottom: 8px;
    }

    .clickmap-presentace-firmy.mobil-version .areal-header > div:first-child {
        font-weight: 400;
    }

    .clickmap-presentace-firmy.mobil-version .areal-legend {
        gap: 0.75rem;
        font-size: 1rem;
        grid-template-columns: 1fr;
    }

    .clickmap-presentace-firmy.mobil-version .areal-legend > div {
        align-items: flex-start;
    }

    .clickmap-presentace-firmy.mobil-version .area-label {
        min-width: 1.5rem;
    }

    .clickmap-presentace-firmy.mobil-version .area-title {
        line-height: 1.35;
    }

    .clickmap-presentace-firmy.mobil-version.mobil-version-area-1 .click-map-nav {
        background: var(--g-color-2);
    }

    .clickmap-presentace-firmy.mobil-version.mobil-version-area-2 .click-map-nav {
        background: var(--g-color-1);
    }

    .clickmap-presentace-firmy.mobil-version.mobil-version-area-2 .area-label {
        color: black;
    }

    .clickmap-presentace-firmy.mobil-version.mobil-version-area-2 .areal-legend .link_virtual_tour {
        color: white;
    }
}


/*#endregion*/