html, body { margin: 0; font-family: Roboto, Helvetica, Arial, sans-serif; }
.hero { min-height: 78vh; background-size: cover; background-position: center; color: #fff; }
.hero-overlay { background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.65)); width: 100%; min-height: 78vh; display: flex; align-items: center; }
.video-wrap { position: relative; padding-top: 56.25%; }
.video-wrap iframe, .video-wrap video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 8px; }
.room-card img { height: 220px; object-fit: cover; width: 100%; }
.gallery-img { width: 100%; height: 220px; object-fit: cover; border-radius: 8px; }
.room-tile { border-radius: 8px; padding: 10px; color: #fff; min-height: 72px; }
.pos-item { cursor: pointer; }
.pos-item:hover { box-shadow: 0 0 0 2px var(--mud-palette-primary); }


.df-input { flex: 1 1 150px; min-width: 150px; max-width: 200px; }
@media (max-width: 600px) { .df-input { max-width: none; flex: 1 1 45%; } }


.mud-table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mud-table-root { min-width: 620px; }