.floor-frame, .floor-frame * { box-sizing: border-box; }
.floor-frame { position: relative; width: 100%; min-height: 440px; height: min(760px, calc(100svh - 130px)); overflow: hidden; isolation: isolate; background: #f5f2ed; color: #071735; border: 1px solid #e7e0d5; border-radius: 12px; }
.floor-frame__art { display: block; width: 100%; height: 100%; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.floor-frame.is-zoomed .floor-frame__art { touch-action: none; cursor: grab; }
.floor-frame.is-dragging .floor-frame__art { cursor: grabbing; }
.floor-frame .floor-frame__unit { fill: transparent; stroke: transparent; stroke-width: 1.2; vector-effect: non-scaling-stroke; transition: fill .16s, stroke .16s; }
.floor-frame .floor-frame__unit.is-available { cursor: pointer; }
.floor-frame .floor-frame__unit.is-available:hover, .floor-frame .floor-frame__unit.is-available:focus { fill: rgb(217 170 110 / 70%); stroke: transparent; outline: none; }
.floor-frame.is-zoomed .floor-frame__unit { cursor: inherit; }
.floor-frame.is-dragging .floor-frame__unit.is-available:hover { fill: transparent; stroke: transparent; }
.floor-frame .floor-frame__unit.is-sold, .floor-frame .floor-frame__unit.is-unmapped { fill: #ffffffb3; pointer-events: none; }
.floor-frame .floor-frame__unit.is-reserved { fill: rgb(3 19 50 / 50%); pointer-events: none; }
.floor-frame__controls { position: absolute; top: 16px; right: 16px; z-index: 3; display: flex; gap: 6px; }
.floor-frame__controls button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid #ddd7cb; border-radius: 50%; background: #fffdf9; color: #071735; font: 400 23px/1 Arial, sans-serif; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.floor-frame__controls button:disabled { opacity: .4; cursor: default; }
.floor-frame__controls button:hover:not(:disabled), .floor-frame__controls button:focus-visible { border-color: #c79c60; outline-color: #c79c60; }
.floor-frame__tip { position: absolute; z-index: 4; pointer-events: none; min-width: 100px; background: #fff; color: #031332; padding: 3px 10px; border: 2px solid #d9aa6e; border-radius: 80px; white-space: nowrap; text-align: center; font-family: Noto Sans Georgian, sans-serif; font-size: 16px; font-weight: bold; user-select: none; -webkit-user-select: none; }
.floor-frame__tip p { margin: 0; }
.floor-frame__tip [data-area], .floor-frame__tip .m_2 { color: #d9aa6e; }
.floor-frame__tip [data-number] { font-weight: 300; text-transform: uppercase; }
.floor-frame__tip .ap { text-transform: uppercase; }
.floor-frame__markers { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; }
.floor-frame__reserved { position: absolute; display: grid; place-items: center; width: 39px; height: 39px; transform: translate(-50%, -50%); }
.floor-frame__message { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: #f5f2ed; padding: 24px; text-align: center; }
.floor-frame [hidden] { display: none !important; }
@media(max-width: 767px) { .floor-frame { height: 62svh; min-height: 360px; max-height: 620px; border-radius: 8px; } .floor-frame__controls { right: 12px; top: 12px; } }
@media(prefers-reduced-motion: reduce) { .floor-frame .floor-frame__unit { transition: none; } }