/**
 * Genplan Interactive Styles
 */

/* Genplan wrapper */
.gpi-genplan-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
}


.gpi-genplan-wrapper .gpi-bg-image {
    display: block;
    width: 100%;
    height: 100%;
    user-select: none;
    object-fit: contain;
}

.gpi-genplan-wrapper svg,
.gpi-genplan-wrapper .gpi-svg,
.gpi-genplan-wrapper .genplan-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: all;
}

/* Card */
.gpi-card {
    position: fixed;
    background: var(--neutral-trans-70);
    color: #fff;
    padding: var(--space-m);
    border-radius: var(--radius);
    min-width: 300px;
    max-width: 400px;
    z-index: 10000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    pointer-events: auto;
    backdrop-filter: blur(16px);
}

.gpi-card h3 {
    margin: 0 0 10px 0;
    font-size: var(--h4);
    font-weight: bold;
}

.gpi-card .gpi-meta {
    margin: 10px 0;
    font-size: var(--text-s);
    opacity: 0.9;
}

.gpi-card .gpi-rooms-list {
    margin: var(--text-s) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.gpi-card .gpi-room-item {
    padding: 10px 0;
}

.gpi-card .gpi-room-item:last-child {
    border-bottom: none;
}

.gpi-card .gpi-room-item a {
    color: #fff;
    text-decoration: none;
    display: block;
    width: 100%;
    transition: opacity 0.2s;
}

.gpi-card .gpi-room-item a:hover {
    opacity: 0.8;
}

.gpi-card .gpi-room-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.gpi-card .gpi-room-label {
    font-weight: 600;
    font-size: var(--h5);
}

.gpi-card .gpi-room-price {
    font-weight: 600;
    font-size: var(--h5);
}

.gpi-card .gpi-room-available {
    opacity: 0.7;
    font-size: var(--text-xs);
}

/* Custom message card */
.gpi-card .gpi-custom-message {
    padding: var(--space-m) 0;
    font-size: var(--text-m);
    line-height: 1.6;
    color: var(--white);
}

.gpi-custom-message p {
    margin: 0 0 10px 0;
}

.gpi-card .gpi-actions {
    margin-top: var(--space-xs);
    padding-top: var(--space-xs);
}

.gpi-card .gpi-button {
    display: flex;
    -webkit-box-pack: justify;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    flex-wrap: nowrap;
    font-size: var(--text-s);
    width: 100%;
    padding: .75em 1.5em;
    background: var(--white);
    color: var(--black);
    text-decoration: none;
    border-radius: var(--btn-radius);
    text-align: var(--btn-text-align, center);
    font-weight: 500;
    transition: background 0.2s;
    vertical-align: baseline;
    line-height: .8;
}

.gpi-card .gpi-button:hover {
    background: var(--white);
}

/* Mobile panel */
.gpi-mobile-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--white);
    color: var(--black);
    padding: var(--space-m);
    z-index: 9999;
    max-height: 80vh;
    overflow-y: scroll;
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
    border-radius: var(--radius-s) var(--radius-s) 0 0;
    box-shadow: 0 -.3rem .8rem rgb(from var(--shadow-default, #282829) r g b / 12%), 0 -.3rem 0.1rem rgb(from var(--shadow-default, #282829) r g b / 4%);
}

.gpi-mobile-panel .gpi-button {
    margin-top: var(--space-s);
    display: flex;
    -webkit-box-pack: justify;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    flex-wrap: nowrap;
    font-size: var(--text-m);
    width: 100%;
    padding: .75em 1.5em;
    background: var(--black);
    color: var(--white);
    text-decoration: none;
    border-radius: var(--btn-radius);
    text-align: var(--btn-text-align, center);
    font-weight: 500;
    transition: background 0.2s;
    vertical-align: baseline;
    line-height: .8;
}

.gpi-mobile-panel .gpi-room-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.gpi-mobile-panel .gpi-room-available {
    color: var(--neutral-semi-dark);
    font-size: var(--text-xs);
}

.gpi-mobile-panel .gpi-rooms-list {
    margin: var(--text-s) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.gpi-mobile-panel .gpi-custom-message {
    padding: var(--space-m) 0;
    font-size: var(--text-m);
    line-height: 1.6;
    color: var(--black);
}

/* Use small viewport height for mobile panel if available */
@supports (height: 80svh) {
    @media (max-width: 1025px) {
        .gpi-mobile-panel {
            max-height: 80svh;
        }
    }
}

.gpi-mobile-panel.active {
    transform: translateY(0);
}

.gpi-mobile-panel .gpi-close {
    position: absolute;
    top: var(--text-s);
    right: var(--text-s);
    background: none;
    border: none;
    color: var(--black);
    font-size: 24px;
    cursor: pointer;
    padding: 5px 10px;
    line-height: 1;
}

.gpi-mobile-panel h3 {
    font-size: var(--h3);
    padding-right: 40px;
}

/* Hover effects on bulk elements */
.bulk,
.gpi-bulk,
path[data-bulk] {
    cursor: pointer;
    transition: fill-opacity 0.2s;
}

.bulk:hover,
.gpi-bulk:hover,
path[data-bulk]:hover {
    fill-opacity: 0.4 !important;
}

/* Inactive sections (no data) */
.gpi-bulk-inactive {
    cursor: not-allowed !important;
    opacity: 0.3 !important;
    pointer-events: none;
}

.gpi-bulk-inactive:hover {
    fill-opacity: inherit !important;
}

/* Mobile and tablet adaptation (<= 1025px) */
@media (max-width: 1025px) {

    /* Show mobile panel on mobile devices */
    .gpi-mobile-panel {
        display: flex !important;
        flex-direction: column;
        align-content: flex-start;
        gap: var(--space-xs);
    }

    .gpi-genplan-wrapper {
        max-width: none;
        height: min(802px, 85vh);
        overflow: auto hidden;
        scrollbar-width: none;
        border-radius: var(--radius);
        /* Firefox */
        -ms-overflow-style: none;
        /* IE and Edge */
        -webkit-overflow-scrolling: touch;
        /* Для плавной прокрутки на iOS */
        scroll-snap-type: x mandatory;
        /* Останавливаем прокрутку на краях изображения */
    }

    /* Скрыть scrollbar в Chrome, Safari и Opera */
    .gpi-genplan-wrapper::-webkit-scrollbar {
        display: none;
    }

    /* Для устройств с проблемами прокрутки используем small viewport height */
    @supports (height: 80svh) {
        .gpi-genplan-wrapper {
            height: min(802px, 80svh);
        }
    }

    .gpi-genplan-wrapper .gpi-bg-image {
        width: auto;
        max-width: none;
        max-height: 85vh;
        height: 100%;
        object-fit: contain;
        scroll-snap-align: start end;
        /* Останавливаем прокрутку на левом и правом краях изображения */
    }

    @supports (height: 80svh) {
        .gpi-genplan-wrapper .gpi-bg-image {
            max-width: none;
            max-height: 80svh;
        }
    }

    .gpi-genplan-wrapper svg,
    .gpi-genplan-wrapper .gpi-svg,
    .gpi-genplan-wrapper .genplan-svg {
        height: 100%;
        width: 100%;
        scroll-snap-align: start end;
        /* Синхронизируем SVG с изображением для остановки прокрутки */
    }

    /* Скрываем карточку на мобильных */
    .gpi-card {
        display: none !important;
    }
}

/* Desktop only hover - hide mobile panel on desktop */
@media (hover: hover) and (pointer: fine) and (min-width: 1026px) {
    .gpi-mobile-panel {
        display: none !important;
    }
}

/* Mobile only (legacy support) */
@media (max-width: 768px) {
    .gpi-card {
        display: none !important;
    }
}