/* Tsagariko Rooms: the 3D map (widget tsag-map3d and the column of the booking). A model of the ground on warm paper,
   the labels of the places follow it, the two views and the zoom sit on it, the address and the way there under it. */
.tsg-m3dsec { padding: clamp(56px, 8vw, 110px) 0; }
.tsg-m3dsec .tsg-head2 { margin-bottom: clamp(24px, 3vw, 40px); }
.tsg-m3d { position: relative; min-width: 0; }
.tsg-m3d__stage { position: relative; aspect-ratio: 16 / 10; border-radius: var(--tsg-r); overflow: hidden; isolation: isolate; border: 1px solid var(--tsg-line); box-shadow: var(--tsg-shadow);
	background: radial-gradient(130% 95% at 50% 28%, var(--tsg-bg) 0%, var(--tsg-sand) 62%, var(--tsg-sand-2) 100%); }
@media (max-width: 640px) { .tsg-m3d__stage { aspect-ratio: 4 / 5; border-radius: 20px; } }
.tsg .tsg-m3d__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .7s ease; }
.tsg-m3d__canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; opacity: 0; transition: opacity .8s ease; cursor: grab; }
.tsg-m3d__canvas:active { cursor: grabbing; }
.tsg-m3d.is-ready .tsg-m3d__canvas { opacity: 1; }
.tsg-m3d.is-ready .tsg-m3d__poster { opacity: 0; pointer-events: none; }

/* the labels: a dot on the place and a small card above it (or beside it) */
.tsg-m3d__tags { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.tsg-m3d:not(.is-ready) .tsg-m3d__tags { display: none; }
.tsg-m3d__tag { position: absolute; left: 0; top: 0; display: none; transition: opacity .45s ease; will-change: transform; }
.tsg-m3d__tag.is-on { display: block; }
.tsg-m3d[data-view="village"] .tsg-m3d__tag[data-preset="area"], .tsg-m3d[data-view="area"] .tsg-m3d__tag[data-preset="village"] { opacity: 0; }
.tsg-m3d__tag > i { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--tsg-ink); box-shadow: 0 0 0 3px rgba(255, 253, 249, .9); }
.tsg-m3d__tag > span { position: absolute; left: 0; bottom: 12px; transform: translateX(-50%); display: grid; gap: 1px; padding: 7px 12px 8px; border-radius: 12px; white-space: nowrap; text-align: center;
	background: rgba(255, 253, 249, .96); border: 1px solid var(--tsg-line); box-shadow: 0 8px 20px rgba(43, 36, 32, .14); color: var(--tsg-ink); }
.tsg-m3d__tag b { font: 700 14px/1.2 var(--tsg-sans); }
.tsg-m3d__tag small { font: 500 12px/1.2 var(--tsg-sans); color: var(--tsg-ink-3); }
/* the side is chosen by the script (the one in the class first, then the free one): above, left, right or below */
.tsg-m3d__tag[data-side="l"] > span { left: auto; right: 14px; bottom: -14px; transform: none; text-align: right; }
.tsg-m3d__tag[data-side="r"] > span { left: 14px; bottom: -14px; transform: none; text-align: left; }
.tsg-m3d__tag[data-side="b"] > span { bottom: auto; top: 12px; }
.tsg-m3d__tag--peak > i { left: -7px; top: -9px; width: 14px; height: 12px; border-radius: 0; background: var(--tsg-ink); clip-path: polygon(50% 0, 100% 100%, 0 100%); box-shadow: none; }
/* the house and the square stand on their 3D pins, so their cards carry no dot */
.tsg-m3d__tag--home > i, .tsg-m3d__tag--square > i { display: none; }
.tsg-m3d__tag--home > span { bottom: 4px; background: var(--tsg-leather); border-color: var(--tsg-leather-d); color: #fff; box-shadow: 0 10px 24px rgba(169, 87, 42, .32); }
.tsg-m3d__tag--home small { color: var(--tsg-leather-l); }
.tsg-m3d__tag--square > span { bottom: 4px; }
.tsg-m3d__tag--home > span::after, .tsg-m3d__tag--square > span::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; margin-left: -5px; transform: rotate(45deg); background: inherit; border-right: 1px solid; border-bottom: 1px solid; border-color: inherit; }
.tsg-m3d__tag[data-side="l"] > span::after, .tsg-m3d__tag[data-side="r"] > span::after { display: none; }

/* the two views and the zoom */
.tsg-m3d__views { position: absolute; left: 12px; top: 12px; z-index: 3; display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255, 253, 249, .92); box-shadow: 0 8px 20px rgba(43, 36, 32, .12); }
.tsg-m3d__view { min-height: 40px; padding: 0 15px; border: 0; border-radius: 999px; background: transparent; color: var(--tsg-ink-2); font: 700 14px/1 var(--tsg-sans); cursor: pointer; transition: background-color .25s, color .25s; }
.tsg-m3d__view:hover { color: var(--tsg-ink); }
.tsg-m3d__view[aria-pressed="true"] { background: var(--tsg-ink); color: #fff; }
.tsg-m3d__zoom { position: absolute; right: 12px; bottom: 12px; z-index: 3; display: grid; gap: 6px; }
.tsg-m3d__zoom button { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--tsg-line); border-radius: 50%; background: rgba(255, 253, 249, .94); color: var(--tsg-ink); cursor: pointer; box-shadow: 0 6px 16px rgba(43, 36, 32, .12); transition: background-color .2s, color .2s; }
.tsg-m3d__zoom button:hover { background: var(--tsg-ink); color: #fff; }
.tsg-m3d.is-static .tsg-m3d__zoom, .tsg-m3d:not(.is-ready) .tsg-m3d__zoom { display: none; }
.tsg-m3d__hint { position: absolute; left: 50%; top: 50%; z-index: 4; margin: 0; padding: 11px 18px; border-radius: 14px; transform: translate(-50%, -50%); background: rgba(43, 36, 32, .84); color: #fff; font: 600 15px/1.3 var(--tsg-sans); text-align: center; opacity: 0; pointer-events: none; transition: opacity .3s; max-width: calc(100% - 40px); }
.tsg-m3d__hint.is-on { opacity: 1; }
@media (max-width: 640px) { .tsg-m3d__view { min-height: 38px; padding: 0 13px; font-size: 13.5px; } .tsg-m3d__tag > span { padding: 5px 9px 6px; border-radius: 10px; } .tsg-m3d__tag b { font-size: 13px; } }

/* the address and the way there */
.tsg-m3d__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 18px; margin-top: 18px; }
.tsg-m3d__addr { display: flex; align-items: flex-start; gap: 10px; margin: 0; min-width: 0; }
.tsg-m3d__addr .tsg-ic { color: var(--tsg-leather); margin-top: 2px; }
.tsg-m3d__addr span { display: grid; gap: 2px; }
.tsg-m3d__addr b { font: 700 16.5px/1.3 var(--tsg-sans); color: var(--tsg-ink); }
.tsg-m3d__addr i { font: 400 14.5px/1.35 var(--tsg-sans); font-style: normal; color: var(--tsg-ink-3); }
.tsg-m3d__links { display: flex; flex-wrap: wrap; gap: 10px; }
.tsg-m3d__links .tsg-btn { min-height: 48px; padding: 0 20px; }
.tsg-m3d__note { flex: 1 0 100%; margin: 0; font: 400 12px/1.45 var(--tsg-sans); color: var(--tsg-ink-3); }
@media (max-width: 459px) { .tsg-m3d__links { width: 100%; } .tsg-m3d__links .tsg-btn { flex: 1; } }
@media (prefers-reduced-motion: reduce) { .tsg .tsg-m3d__poster, .tsg-m3d__canvas, .tsg-m3d__tag { transition: none; } }