/* Easy Hotel Manager - virtual tour: 360 viewer, photo walk and 3D building. Used on the booking site and inside the app. */

/* ---------- 360 viewer ---------- */
.t360 { position: relative; width: 100%; height: min(64vh, 540px); min-height: 280px; background: #0f1422; border-radius: 16px; overflow: hidden; touch-action: none; -webkit-user-select: none; user-select: none; cursor: grab; outline: none; color: #fff; }
.t360:focus-visible { box-shadow: 0 0 0 3px var(--ehm-accent); }
.t360.t360-drag { cursor: grabbing; }
.t360-canvas, .t360-flat { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.t360-flat { background-color: #0f1422; }
.t360-canvas[hidden], .t360-flat[hidden] { display: none; }
.t360::before, .t360::after { content: ""; position: absolute; left: 0; right: 0; height: 84px; pointer-events: none; z-index: 1; }
.t360::before { top: 0; height: 64px; background: linear-gradient(rgba(8, 12, 22, .42), rgba(8, 12, 22, 0)); }
.t360::after { bottom: 0; height: 92px; background: linear-gradient(rgba(8, 12, 22, 0), rgba(8, 12, 22, .5)); }
.t360-spots { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; }
.t360-spot { position: absolute; left: 0; top: 0; width: 52px; height: 52px; margin: -26px 0 0 -26px; padding: 0; border: 0; border-radius: 50%; background: rgba(22, 35, 63, .6); color: #fff; pointer-events: auto; display: flex; align-items: center; justify-content: center; font-size: 1.9rem; cursor: pointer; box-shadow: 0 0 0 3px rgba(255, 255, 255, .8); animation: t360-pulse 2s infinite; will-change: transform; }
.t360-spot span { position: absolute; top: 60px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: .8rem; font-weight: 600; background: rgba(22, 35, 63, .85); padding: 3px 10px; border-radius: 999px; }
.t360-spot:hover, .t360-spot:focus-visible { background: var(--ehm-accent); color: var(--ehm-ink); }
@keyframes t360-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(255, 255, 255, .8); } 50% { box-shadow: 0 0 0 10px rgba(255, 255, 255, .18); } }
@media (prefers-reduced-motion: reduce) { .t360-spot { animation: none; } }
.t360-top { position: absolute; left: 16px; top: 12px; z-index: 3; display: flex; flex-direction: column; pointer-events: none; text-shadow: 0 1px 4px rgba(0, 0, 0, .7); max-width: calc(100% - 80px); }
.t360-top strong { font-size: 1.1rem; }
.t360-top span { font-size: .8rem; opacity: .9; }
.t360-tools { position: absolute; right: 10px; top: 10px; z-index: 3; display: flex; flex-direction: column; gap: 6px; }
.t360-btn { width: 40px; height: 40px; border-radius: 10px; border: 0; background: rgba(22, 35, 63, .65); color: #fff; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.t360-btn:hover { background: rgba(22, 35, 63, .9); }
.t360-btn.on { background: var(--ehm-accent); color: var(--ehm-ink); }
.t360-strip { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; gap: 8px; padding: 10px 12px; overflow-x: auto; touch-action: pan-x; scrollbar-width: thin; }
.t360-strip[hidden] { display: none; }
.t360-thumb { flex: 0 0 auto; width: 104px; height: 64px; border-radius: 10px; border: 2px solid rgba(255, 255, 255, .55); background: #26324d center / cover no-repeat; color: #fff; padding: 0; position: relative; overflow: hidden; cursor: pointer; }
.t360-thumb span { position: absolute; left: 0; right: 0; bottom: 0; font-size: .68rem; font-weight: 600; padding: 12px 5px 3px; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .85)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t360-thumb.active { border-color: var(--ehm-accent); box-shadow: 0 0 0 2px var(--ehm-accent); }
.t360-hint { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; background: rgba(22, 35, 63, .78); padding: 8px 16px; border-radius: 999px; font-size: .9rem; pointer-events: none; transition: opacity .4s ease; text-align: center; max-width: 92%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t360-hint.gone { opacity: 0; }
.t360-load { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center; background: rgba(8, 12, 22, .35); pointer-events: none; }
.t360-load[hidden] { display: none; }
.t360-cross { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border: 2px solid var(--ehm-accent); border-radius: 50%; pointer-events: none; z-index: 3; box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); }
.t360-cross::before, .t360-cross::after { content: ""; position: absolute; background: var(--ehm-accent); }
.t360-cross::before { left: 50%; top: 8px; bottom: 8px; width: 2px; margin-left: -1px; }
.t360-cross::after { top: 50%; left: 8px; right: 8px; height: 2px; margin-top: -1px; }
.t360-cross[hidden] { display: none; }
.t360.t360-max { position: fixed; inset: 0; height: 100%; z-index: 2000; border-radius: 0; }
html.t360-lock, html.pw-lock { overflow: hidden; }
.t360-overlay { position: fixed; inset: 0; z-index: 2000; background: #0b1220; }
.t360-overlay > .t360 { height: 100%; border-radius: 0; }
.t360-overlay .t360-top { left: 66px; }
.t360-close { position: absolute; left: 12px; top: 10px; z-index: 5; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); color: var(--ehm-ink); font-size: 1.1rem; display: flex; align-items: center; justify-content: center; }
@media (max-width: 575.98px) { .t360 { height: min(58vh, 430px); } .t360-thumb { width: 88px; height: 56px; } }

/* poster shown before the visitor asks for the tour (the big photo is loaded only then) */
.tour-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px; }
.tour-bar .btn { display: inline-flex; align-items: center; gap: 6px; }
.tour-poster { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: min(44vh, 340px); min-height: 220px; border: 0; border-radius: 16px; overflow: hidden; background: #16233f center / cover no-repeat; color: #fff; padding: 0; cursor: pointer; }
.tour-poster::before { content: ""; position: absolute; inset: 0; background: rgba(12, 18, 32, .42); transition: background .2s ease; }
.tour-poster:hover::before { background: rgba(12, 18, 32, .28); }
.tour-poster-in { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-shadow: 0 1px 6px rgba(0, 0, 0, .7); }
.tour-poster-badge { width: 84px; height: 84px; border-radius: 50%; background: var(--ehm-accent); color: var(--ehm-ink); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.35rem; box-shadow: 0 0 0 8px rgba(255, 255, 255, .25); text-shadow: none; }
.tour-poster-in strong { font-size: 1.2rem; }
.tour-poster-in span { font-size: .88rem; }
.tour-frame { width: 100%; height: min(70vh, 560px); border: 0; border-radius: 16px; background: #0f1422; }
.tour-badge { position: absolute; left: 10px; top: 10px; background: var(--ehm-accent); color: var(--ehm-ink); font-size: .72rem; font-weight: 700; border-radius: 999px; padding: 3px 9px; display: inline-flex; align-items: center; gap: 4px; }

/* ---------- photo walk ---------- */
.pw { position: fixed; inset: 0; z-index: 2100; background: #05070c; color: #fff; outline: none; }
.pw-stage { position: absolute; inset: 0; overflow: hidden; touch-action: manipulation; cursor: pointer; }
.pw-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s ease; -webkit-user-drag: none; user-select: none; }
.pw-img.on { opacity: 1; }
.pw-img.move-0 { animation: pw-a 5.6s ease-out forwards; }
.pw-img.move-1 { animation: pw-b 5.6s ease-out forwards; }
.pw-img.move-2 { animation: pw-c 5.6s ease-out forwards; }
.pw-img.move-3 { animation: pw-d 5.6s ease-out forwards; }
@keyframes pw-a { from { transform: scale(1); object-position: 30% 50%; } to { transform: scale(1.1); object-position: 70% 50%; } }
@keyframes pw-b { from { transform: scale(1.12); object-position: 70% 50%; } to { transform: scale(1); object-position: 35% 50%; } }
@keyframes pw-c { from { transform: scale(1); object-position: 50% 38%; } to { transform: scale(1.12); object-position: 50% 62%; } }
@keyframes pw-d { from { transform: scale(1.1); object-position: 20% 50%; } to { transform: scale(1.02); object-position: 80% 50%; } }
.pw.paused .pw-img { animation-play-state: paused; }
.pw::before, .pw::after { content: ""; position: absolute; left: 0; right: 0; z-index: 2; pointer-events: none; }
.pw::before { top: 0; height: 120px; background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)); }
.pw::after { bottom: 0; height: 170px; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .75)); }
.pw-bars { position: absolute; top: calc(10px + env(safe-area-inset-top)); left: 10px; right: 10px; display: flex; gap: 4px; z-index: 3; }
.pw-bars span { flex: 1; height: 3px; background: rgba(255, 255, 255, .35); border-radius: 3px; overflow: hidden; }
.pw-bars i { display: block; height: 100%; width: 0; background: #fff; }
.pw-head { position: absolute; top: calc(24px + env(safe-area-inset-top)); left: 14px; right: 64px; z-index: 3; font-size: .95rem; text-shadow: 0 1px 4px rgba(0, 0, 0, .8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-close { position: absolute; top: calc(20px + env(safe-area-inset-top)); right: 10px; z-index: 6; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .18); color: #fff; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; }
.pw-cap { position: absolute; left: 18px; right: 18px; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 3; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; text-shadow: 0 1px 6px rgba(0, 0, 0, .85); pointer-events: none; }
.pw-cap strong { font-size: 1.4rem; line-height: 1.2; }
.pw-cap span { font-size: .8rem; opacity: .9; white-space: nowrap; margin-left: auto; }
.pw-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .18); color: #fff; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; }
.pw-nav:hover, .pw-close:hover { background: rgba(255, 255, 255, .34); }
.pw-prev { left: 12px; } .pw-next { right: 12px; }
@media (pointer: coarse) { .pw-nav { display: none; } }
.pw-end { position: absolute; inset: 0; z-index: 5; background: rgba(8, 12, 22, .84); display: flex; align-items: center; justify-content: center; }
.pw-end[hidden] { display: none; }
.pw-end-box { display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center; padding: 24px; }
.pw-end-box strong { font-size: 1.5rem; }
@media (prefers-reduced-motion: reduce) { .pw-img { transition: none; } }

/* ---------- 3D building ---------- */
.b3d-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.b3d-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.b3d-chip { border: 1px solid var(--ehm-line); background: #fff; border-radius: 999px; padding: 4px 11px; font-size: .8rem; color: var(--ehm-ink); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.b3d-chip span { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.b3d-chip.on { border-color: var(--ehm-ink); box-shadow: 0 0 0 2px var(--ehm-ink) inset; font-weight: 600; }
.b3d-stage { position: relative; background: linear-gradient(#f5f8fd, #e2e8f3); border: 1px solid var(--ehm-line); border-radius: 16px; overflow: hidden; }
.b3d-stage canvas { display: block; width: 100%; touch-action: pan-y; cursor: grab; }
.b3d-stage canvas.drag { cursor: grabbing; }
.b3d-tip { position: absolute; right: 12px; bottom: 8px; font-size: .76rem; color: var(--ehm-muted); pointer-events: none; }
.b3d-card { margin-top: 12px; border: 1px solid var(--ehm-line); border-radius: 14px; padding: 12px 16px; background: #fff; min-height: 58px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.b3d-card.on { border-color: var(--ehm-accent); box-shadow: 0 0 0 2px rgba(242, 162, 12, .25); }
.b3d-card-main { display: flex; flex-direction: column; min-width: 0; }
.b3d-card-main strong { font-size: 1.1rem; color: var(--ehm-ink); }
.b3d-card-main span { font-size: .86rem; color: #48526c; }
.b3d-card-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.b3d-list { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.b3d-list-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.b3d-list-row > span { font-size: .78rem; color: var(--ehm-muted); min-width: 92px; }
.b3d-room { min-width: 48px; height: 38px; border-radius: 10px; border: 2px solid var(--ehm-line); background: #fff; font-weight: 600; font-size: .86rem; color: var(--ehm-ink); cursor: pointer; padding: 0 8px; }
.b3d-room.on { background: var(--ehm-ink); color: #fff; border-color: var(--ehm-ink) !important; }
@media (max-width: 575.98px) { .b3d-legend { margin-left: 0; } .b3d-card-actions { width: 100%; } .b3d-card-actions .btn { flex: 1; } }