/**
 * Floor Shapes Block - Frontend Styles
 */

:root {
    --fsb-bg-color: #ffffff;
    --fsb-text-color: black;
    --fsb-border-color: #e5e7eb;
}

@media (prefers-color-scheme: dark) {
    :root {
        --fsb-bg-color: #0a0a0a;
        --fsb-text-color: white;
        --fsb-border-color: #262626;
    }
}

.floor-shapes-block {
    width: 100%;
    position: relative;
    overflow: hidden;
}

#scheme__v2 {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    font-family: var(--wp--preset--font-family--avenir-demi);
}

#scheme__v2__canvas {
    width: 100%;
    height: 100%;
    position: relative;
}

#scheme__v2__canvas canvas {
    display: block;
}

/* Controls */
.scheme__v2__controls {
    user-select: none;
    position: absolute;
    top: 20px;
    right: 20px;
    border-radius: 2px;
    z-index: 10;
    display: flex;
    gap: 10px 30px;
    flex-direction: column;
    font-family: var(--wp--preset--font-family--avenir-demi);
}

@media (max-width: 767px) {
    .scheme__v2__controls {
        top: unset;
        bottom: 10px;
        left: 10px;
        right: 10px;
        width: calc(100% - 20px);
        flex-direction: column-reverse;
    }
}

.scheme__v2__control {
    display: flex;
    flex-direction: column;
}

@media (max-width: 767px) {
    .scheme__v2__control {
        flex-direction: row;
    }
}

.scheme__v2__control button {
    display: block;
    position: relative;
    appearance: none;
    background: #2d3748;
    color: white;
    cursor: pointer;
    transition: all 0.3s;
    border-radius: 0px;
    border: none;
    aspect-ratio: 1/1;
    width: 100%;
    height: 100%;
    flex: 1;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    padding: 0px;
}

.scheme__v2__control button:hover {
    filter: brightness(1.1);
}

@media (min-width: 768px) {
    .scheme__v2__control button {
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
        max-width: 50px;
        max-height: 50px;
        min-width: 50px;
        min-height: 50px;
    }
    
    .scheme__v2__control button:first-child {
        border-top-right-radius: 15px;
        border-top-left-radius: 15px;
    }
    
    .scheme__v2__control button:last-child {
        border-bottom-right-radius: 15px;
        border-bottom-left-radius: 15px;
        border-bottom: none;
    }
}

@media (max-width: 767px) {
    .scheme__v2__control button {
        border-right: 1px solid rgba(255, 255, 255, 0.3);
        max-width: 40px;
        max-height: 40px;
        min-width: 40px;
        min-height: 40px;
    }
    
    .scheme__v2__control button:first-child {
        border-bottom-left-radius: 6px;
        border-top-left-radius: 6px;
    }
    
    .scheme__v2__control button:last-child {
        border-bottom-right-radius: 6px;
        border-top-right-radius: 6px;
        border-right: none;
    }
}

/* Zoom buttons */
#scheme__v2__control__zoomin {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.0001 6.34315L12.0001 17.6569' stroke='%23FFFFFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.34315 12.0001L17.6569 12.0001' stroke='%23FFFFFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center center;
    text-indent: -999px;
    overflow: hidden;
}

#scheme__v2__control__zoomout {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.34315 12.0001L17.6569 12.0001' stroke='%23FFFFFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center center;
    text-indent: -999px;
    overflow: hidden;
}

#scheme__v2__control__rotate {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17' fill='none'%3E%3Cpath d='M15.5816 8.49979C15.5871 10.1477 15.0191 11.7464 13.9747 13.0222C12.9303 14.2981 11.4744 15.1718 9.85619 15.4939C8.23796 15.816 6.55795 15.5664 5.10361 14.7879C3.64927 14.0095 2.51099 12.7504 1.88355 11.2263C1.2561 9.70213 1.17848 8.00757 1.66397 6.43257C2.14946 4.85756 3.16788 3.49999 4.54498 2.59215C5.92207 1.68431 7.57225 1.28262 9.21317 1.45581C10.8541 1.629 12.3837 2.36631 13.5404 3.54158H10.617V4.95821H14.2645C14.6137 4.95784 14.9485 4.81914 15.1954 4.57254C15.4423 4.32595 15.5812 3.9916 15.5816 3.64287V0H14.1631V2.1802C12.7116 0.885007 10.8589 0.126613 8.91472 0.0317638C6.97056 -0.0630855 5.05269 0.511356 3.48166 1.65908C1.91062 2.80681 0.781595 4.45829 0.283276 6.33751C-0.215044 8.21673 -0.0524686 10.2098 0.743832 11.9837C1.54013 13.7576 2.92191 15.2048 4.65824 16.0834C6.39457 16.9621 8.38024 17.2189 10.2834 16.811C12.1866 16.4032 13.8919 15.3553 15.1144 13.8425C16.3369 12.3298 17.0025 10.4438 17 8.49979H15.5816Z' fill='white'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center center;
    text-indent: -999px;
    overflow: hidden;
}

/* Theme button */
#scheme__v2__control__theme {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 20px 20px;
    text-indent: -999px;
    overflow: hidden;
}

#scheme__v2__control__theme.light {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='24' viewBox='0 0 21 24' fill='none'%3E%3Cpath d='M12.0017 24.0003C8.82016 23.9969 5.76991 22.7315 3.52022 20.4818C1.27053 18.2321 0.00514473 15.1818 0.00170365 12.0003C-0.151296 3.0443 10.0327 -2.9847 17.7927 1.5093L19.3457 2.3713L17.8027 3.2513C11.1027 6.9393 11.5927 17.1213 18.6027 20.1573L20.2237 20.8883L18.7567 21.8943C16.7701 23.2638 14.4146 23.9981 12.0017 24.0003V24.0003ZM12.0017 2.0003C9.35043 2.00321 6.80859 3.05772 4.93385 4.93245C3.05912 6.80718 2.00462 9.34903 2.0017 12.0003C1.8467 19.1173 9.7647 24.2003 16.1567 21.0823C14.6602 20.078 13.4197 18.7373 12.5344 17.1675C11.6491 15.5977 11.1437 13.8424 11.0585 12.0422C10.9734 10.242 11.3109 8.44687 12.0441 6.80052C12.7773 5.15417 13.8857 3.70235 15.2807 2.5613C14.2279 2.18775 13.1188 1.99798 12.0017 2.0003V2.0003Z' fill='white'/%3E%3C/svg%3E");
}

#scheme__v2__control__theme.dark {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M24 13V11H18.928C18.8483 10.4439 18.7012 9.89957 18.49 9.379L22.882 6.822L21.876 5.094L17.482 7.652C17.146 7.2297 16.7629 6.84722 16.34 6.512L18.89 2.127L17.162 1.121L14.612 5.506C14.0942 5.29672 13.5529 5.15099 13 5.072V0H11V5.072C10.4514 5.14998 9.91424 5.29368 9.4 5.5L6.854 1.121L5.126 2.127L7.671 6.5C7.24584 6.83659 6.86096 7.22114 6.524 7.646L2.14 5.094L1.134 6.822L5.513 9.371C5.2999 9.89391 5.15179 10.441 5.072 11H0V13H5.072C5.15185 13.5564 5.29893 14.101 5.51 14.622L1.141 17.165L2.147 18.894L6.519 16.348C6.85142 16.7668 7.23054 17.1462 7.649 17.479L5.1 21.865L6.829 22.871L9.377 18.489C9.89812 18.7008 10.4432 18.8483 11 18.928V24H13V18.928C13.5622 18.8475 14.1123 18.698 14.638 18.483L17.19 22.871L18.918 21.865L16.362 17.47C16.7784 17.1376 17.1558 16.7592 17.487 16.342L21.87 18.894L22.87 17.165L18.488 14.614C18.6993 14.0957 18.8471 13.5538 18.928 13H24ZM17 12C16.79 18.608 7.209 18.606 7 12C7.21 5.392 16.791 5.394 17 12Z' fill='white'/%3E%3C/svg%3E");
}

#scheme__v2__control__theme.auto {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='25' viewBox='0 0 26 25' fill='none'%3E%3Cpath d='M13 7.15294C10.2671 6.63818 7.11938 8.25769 7 12.0143C7.11904 15.7698 10.2669 17.3893 13 16.8746V24.0143H11V18.942C10.4432 18.8623 9.898 18.7153 9.37695 18.5035L6.8291 22.8854L5.09961 21.8795L7.64941 17.4928C7.23104 17.1601 6.85093 16.7806 6.51855 16.3619L2.14746 18.9078L1.14062 17.1793L5.50977 14.6363C5.29875 14.1155 5.15213 13.5705 5.07227 13.0143H0V11.0143H5.07227C5.15203 10.4555 5.29972 9.90809 5.5127 9.38536L1.13379 6.83653L2.13965 5.10802L6.52441 7.66075C6.86131 7.23597 7.24584 6.85081 7.6709 6.51427L5.12598 2.14122L6.85352 1.13536L9.40039 5.51427C9.9145 5.30803 10.4516 5.1645 11 5.08653V0.0142651H13V7.15294ZM15 0.195906C17.5658 -0.27635 20.303 0.0821843 22.791 1.52305L24.3438 2.38536L22.8008 3.26524C16.101 6.95328 16.5908 17.1354 23.6006 20.1715L25.2217 20.902L23.7549 21.9078C21.7683 23.2773 19.4129 24.0121 17 24.0143C16.3251 24.0135 15.6567 23.9521 15 23.8404V21.8024C17.005 22.2439 19.155 22.072 21.1553 21.0963C19.6588 20.092 18.4175 18.751 17.5322 17.1813C16.6471 15.6116 16.1418 13.8563 16.0566 12.0563C15.9715 10.2561 16.3088 8.46041 17.042 6.81407C17.7752 5.1678 18.8844 3.71582 20.2793 2.57481C19.2265 2.20126 18.1171 2.01195 17 2.01427C16.3231 2.01501 15.6533 2.08439 15 2.21837V0.195906Z' fill='%23ffffff'/%3E%3C/svg%3E");
}

/* Floor buttons */
.scheme__v2__floor label {
    display: block;
    text-align: center;
    font-size: 10px;
    margin-bottom: 4px;
    color: #4a5568;
    font-weight: 500;
}

@media (max-width: 768px) {
    .scheme__v2__floor label {
        display: none;
    }
}

.scheme__v2__floor__buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px;
    width: 100%;
}

@media (max-width: 768px) {
    .scheme__v2__floor__buttons {
        flex-direction: row-reverse;
        justify-content: flex-end;
    }
}

.scheme__v2__floor__button {
    display: block;
    position: relative;
    appearance: none;
    background: #4299e1;
    color: white;
    cursor: pointer;
    transition: all 0.3s;
    border-radius: 0px;
    border: none;
    aspect-ratio: 1/1;
    width: 100%;
    height: 100%;
    flex: 1;
    font-family: inherit;
    font-size: 18px;
    font-weight: 500;
    padding: 0px;
}

.scheme__v2__floor__button:hover {
    filter: brightness(1.1);
}

@media (min-width: 768px) {
    .scheme__v2__floor__button {
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
        max-width: 50px;
        max-height: 50px;
        min-width: 50px;
        min-height: 50px;
    }
    
    .scheme__v2__floor__button:first-child {
        border-top-right-radius: 15px;
        border-top-left-radius: 15px;
    }
    
    .scheme__v2__floor__button:last-child {
        border-bottom-right-radius: 15px;
        border-bottom-left-radius: 15px;
        border-bottom: none;
    }
}

@media (max-width: 767px) {
    .scheme__v2__floor__button {
        border-right: 1px solid rgba(255, 255, 255, 0.3);
        max-width: 40px;
        max-height: 40px;
        min-width: 40px;
        min-height: 40px;
    }
    
    .scheme__v2__floor__button:first-child {
        border-bottom-right-radius: 6px;
        border-top-right-radius: 6px;
        border-bottom-left-radius: 0px;
        border-top-left-radius: 0px;
    }
    
    .scheme__v2__floor__button:last-child {
        border-bottom-left-radius: 6px;
        border-top-left-radius: 6px;
        border-bottom-right-radius: 0px;
        border-top-right-radius: 0px;
        border-right: none;
    }
}

.scheme__v2__floor__button:after {
    content: '';
    position: absolute;
    left: 4.5px;
    top: calc(50% - 4.5px);
    width: 9px;
    height: 9px;
    z-index: -1;
    background: #f00 !important;
    transform: rotate(45deg);
    transition: all 0.6s;
    opacity: 0;
}

.scheme__v2__floor__button.active {
    background: #f00 !important;
    color: white;
    position: relative;
    z-index: 1;
}

.scheme__v2__floor__button.active:after {
    left: -4.5px;
    opacity: 1;
}

@media (max-width: 768px) {
    .scheme__v2__floor__button:after {
        top: 4.5px;
        left: calc(50% - 4.5px);
    }
    
    .scheme__v2__floor__button.active:after {
        top: -4.5px;
        left: calc(50% - 4.5px);
    }
}

/* Labels */
#scheme__labels {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

.html-label {
    background-color: #fff;
    color: #000;
    border-radius: 2px;
    pointer-events: auto;
    user-select: none;
    min-width: 30px;
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    position: absolute;
    transform: translate(calc(-50% + 7px), calc(-100% - 20px));
    box-shadow: 5px 0px 20px rgba(0, 0, 0, 0.1);
}

@media (max-width: 767px) {
    .html-label {
        min-width: 20px;
        min-height: 20px;
        gap: 0px;
    }
}

.html-label:after {
    content: '';
    display: block;
    background-color: #fff;
    width: 7px;
    height: 7px;
    transform: rotate(45deg);
    position: absolute;
    bottom: -2px;
    z-index: -1;
    left: calc(50% - 3.5px);
}

@media (max-width: 767px) {
    .html-label:after {
        width: 3px;
        height: 3px;
        left: calc(50% - 1.5px);
        bottom: -1px;
    }
}

.html-label img {
    max-width: 200px;
    max-height: 200px;
}

.html-label .icon {
    display: block;
    height: 24px;
    width: 24px;
    line-height: 0px;
}

@media (max-width: 767px) {
    .html-label .icon {
        width: 24px;
        height: 24px;
    }
}

.html-label .icon img {
    width: 100%;
    height: 100%;
    object-position: center center;
}

.html-label .text {
    text-align: center;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 2px 10px;
    padding-left: 0px;
    transition: all 0.6s;
    display: none;
}

@media (max-width: 767px) {
    .html-label .text {
        font-size: 8px;
        padding: 5px;
        padding-left: 0px;
    }
}

.html-label.show_label .text {
    display: block !important;
}

.html-label:hover,
.html-label.hover {
    z-index: 9999 !important;
    box-shadow: 10px 0px 20px rgba(0, 0, 0, 0.1);
}

.html-label:hover .text,
.html-label.hover .text {
    display: block;
}

.html-label:hover .icon,
.html-label.hover .icon {
    display: block;
    
    padding-left: 5px;
}

.html-label:hover.label-only:after,
.html-label.hover.label-only:after {
    background-color: #000;
}

.html-label:hover.label-only .icon,
.html-label.hover.label-only .icon {
    display: block;
    padding-left: 5px;
}

@media (max-width: 767px) {
    .html-label:hover.label-only .icon,
    .html-label.hover.label-only .icon {
        width: 30px;
        height: 30px;
    }
}

.html-label:hover.label-only .text,
.html-label.hover.label-only .text {
    padding: 2px 10px 2px 0px;
}

.html-label.label-only {
    background-color: #000;
    color: #fff;
}

.html-label.label-only:after {
    background-color: #000;
}

.html-label.icon-clickable {
    background-color: #fff;
    color: #000;
    cursor: pointer;
}

.html-label.icon-clickable:after {
    background-color: #fff;
}

.html-label.icon-clickable:hover,
.html-label.icon-clickable.hover {
    background-color: #fff;
}

.html-label.icon-clickable:hover:after,
.html-label.icon-clickable.hover:after {
    background-color: #fff;
}

.html-label.logo-label {
    display: flex;
    align-items: center;
    box-shadow: 10px 0px 20px rgba(0, 0, 0, 0.05);
    pointer-events: auto;
    cursor: pointer;
    white-space: nowrap;
    position: absolute;
}

.html-label.logo-label:hover .text,
.html-label.logo-label.hover .text {
    display: none;
}

.html-label.logo-label:hover,
.html-label.logo-label.hover {
    background-color: #fff;
}

.html-label.logo-label:hover:after,
.html-label.logo-label.hover:after {
    background-color: #fff;
}