/* ============================================================
   StayBook - Material 3 Expressive Design System
   Public Guest Frontend Styles
   Fully Responsive: Mobile, Tablet, Desktop
   ============================================================ */

/* Font is now preloaded in header.php for better FCP/LCP */

/* ── CSS Tokens ── */
:root {
  /* Primary: Deep Teal */
  --primary: #006a6a;
  --on-primary: #ffffff;
  --primary-container: #6ff7f6;
  --on-primary-cont: #002020;
  /* Secondary */
  --secondary: #4a6363;
  --secondary-cont: #cce8e7;
  /* Tertiary */
  --tertiary: #4b607c;
  --tertiary-cont: #d3e4ff;
  /* Error */
  --error: #ba1a1a;
  --error-cont: #ffdad6;
  /* Surface */
  --surface: #f4f7f6;
  --surface-cont: #ffffff;
  --surface-variant: #dbe4e3;
  --on-surface: #161d1d;
  --on-surface-var: #3f4948;
  --outline: #6f7979;
  --outline-variant: #bec8c7;
  /* Elevation */
  --elev-1: 0 1px 3px 1px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .2);
  --elev-2: 0 2px 6px 2px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .2);
  --elev-3: 0 4px 8px 3px rgba(0, 0, 0, .12), 0 1px 3px rgba(0, 0, 0, .2);
  /* Shape */
  --r-s: 8px;
  --r-m: 12px;
  --r-l: 16px;
  --r-xl: 28px;
  --r-f: 999px;
  /* Timing */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
}

/* ── Reset ── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: var(--surface);
  color: var(--on-surface);
  min-height: 100vh;
  padding-bottom: 80px;
  /* bottom nav space */
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
}

/* ── Responsive Breakpoints ──
   Mobile:  < 600px (default styles)
   Tablet:  600px - 899px
   Desktop: >= 900px
   Large:   >= 1200px
   ─── */

/* ── Desktop Layout ─── */
@media (min-width: 900px) {
  body {
    padding-bottom: 0;
    padding-left: 0;
  }
}

/* ── Container ─── */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

@media (min-width: 1200px) {
  .container {
    max-width: 1280px;
  }
}

main.container {
  min-height: calc(100vh - 120px);
}

/* ── Typography - Responsive Scales ── */
.display-large {
  font-size: 36px;
  line-height: 44px;
  font-weight: 800;
  letter-spacing: -.5px;
}

.headline-large {
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
}

.headline-medium {
  font-size: 22px;
  line-height: 28px;
  font-weight: 600;
}

.headline-small {
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
}

.title-large {
  font-size: 18px;
  line-height: 26px;
  font-weight: 700;
}

.title-medium {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
}

.body-large {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}

.body-medium {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}

.label-large {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}

.label-small {
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
}

/* Tablet Typography */
@media (min-width: 600px) {
  .display-large {
    font-size: 45px;
    line-height: 52px;
  }

  .headline-large {
    font-size: 28px;
    line-height: 36px;
  }

  .headline-medium {
    font-size: 24px;
    line-height: 32px;
  }

  .headline-small {
    font-size: 20px;
    line-height: 26px;
  }
}

/* Desktop Typography */
@media (min-width: 900px) {
  .display-large {
    font-size: 57px;
    line-height: 64px;
  }

  .headline-large {
    font-size: 32px;
    line-height: 40px;
  }

  .headline-medium {
    font-size: 28px;
    line-height: 36px;
  }

  .headline-small {
    font-size: 22px;
    line-height: 28px;
  }

  .title-large {
    font-size: 20px;
    line-height: 28px;
  }
}

/* ── Colors ─── */
.text-primary {
  color: var(--primary);
}

.text-on-surface {
  color: var(--on-surface);
}

.text-muted {
  color: var(--on-surface-var);
}

.text-error {
  color: var(--error);
}

.bg-primary {
  background: var(--primary);
  color: var(--on-primary);
}

.bg-surface {
  background: var(--surface-cont);
}

/* ── Rail Navigation (Desktop) ── */
.m3-rail {
  position: fixed;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  width: 72px;
  height: auto;
  background: var(--surface-cont);
  display: none;
  flex-direction: column;
  align-items: center;
  padding: var(--space-md) 0;
  z-index: 200;
  border-radius: 36px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.03);
}

@media (min-width: 900px) {
  .m3-rail {
    display: flex;
  }
}

.rail-logo {
  width: 48px;
  height: 48px;
  border-radius: var(--r-m);
  background: var(--primary);
  color: var(--on-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
  margin-bottom: var(--space-lg);
}

.rail-item {
  width: 64px;
  padding: var(--space-sm) 0;
  border-radius: var(--r-m);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  transition: background .2s var(--ease);
  color: var(--on-surface-var);
  font-size: 11px;
  font-weight: 600;
  margin-bottom: var(--space-xs);
}

.rail-item:hover {
  background: var(--surface-variant);
}

.rail-item.active {
  color: var(--primary);
}

.rail-item.active .rail-icon-wrap {
  background: var(--primary-container);
}

.rail-icon-wrap {
  width: 56px;
  height: 32px;
  border-radius: var(--r-f);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s var(--ease);
}

.rail-icon-wrap i {
  font-size: 22px;
}

/* ── Bottom Navigation (Mobile/Tablet) ─── */
.m3-nav-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--surface-cont);
  border-top: 1px solid var(--outline-variant);
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 72px;
  z-index: 200;
  padding-bottom: env(safe-area-inset-bottom);
}

@media (min-width: 900px) {
  .m3-nav-bar {
    display: none;
  }
}

.m3-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) 0;
  color: var(--on-surface-var);
  font-size: 11px;
  font-weight: 600;
  transition: color .2s var(--ease);
}

.m3-nav-item.active {
  color: var(--primary);
}

.m3-nav-icon-container {
  width: 56px;
  height: 32px;
  border-radius: var(--r-f);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s var(--ease);
}

.m3-nav-item.active .m3-nav-icon-container {
  background: var(--primary-container);
}

.m3-nav-item i {
  font-size: 22px;
}

/* ── Top Header ── */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-lg) 0 var(--space-md);
  flex-wrap: wrap;
  gap: var(--space-md);
}

.header-greeting .greet-text {
  font-size: 13px;
  color: var(--on-surface-var);
  font-weight: 500;
}

.header-greeting .greet-name {
  font-size: 20px;
  font-weight: 800;
}

.header-actions {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  flex-wrap: wrap;
}

.btn-list-prop {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 var(--space-md);
  height: 40px;
  border-radius: var(--r-f);
  background: var(--secondary-cont);
  color: var(--secondary);
  font-size: 13px;
  font-weight: 700;
  transition: all .2s var(--ease);
}

.btn-list-prop:hover {
  background: var(--secondary);
  color: white;
}

/* Show list button on tablet and desktop */
@media (min-width: 600px) {
  .btn-list-prop {
    display: flex;
  }
}

@media (min-width: 900px) {
  .header-greeting .greet-name {
    font-size: 22px;
  }
}

/* Avatar + Popup */
.avatar-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary-container);
  color: var(--on-primary-cont);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}

.profile-popup {
  position: absolute;
  top: calc(100% + var(--space-sm));
  right: 0;
  background: var(--surface-cont);
  border: 1px solid var(--outline-variant);
  border-radius: var(--r-l);
  min-width: 220px;
  box-shadow: var(--elev-3);
  opacity: 0;
  transform: translateY(-var(--space-sm)) scale(.96);
  pointer-events: none;
  transition: all .2s var(--ease);
  z-index: 300;
}

.profile-popup.show {
  opacity: 1;
  transform: none;
  pointer-events: all;
}

.popup-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  font-size: 14px;
  font-weight: 500;
  transition: background .15s;
  cursor: pointer;
}

.popup-item:hover {
  background: var(--surface-variant);
}

.popup-item:first-child {
  border-radius: var(--r-l) var(--r-l) 0 0;
}

.popup-item:last-child {
  border-radius: 0 0 var(--r-l) var(--r-l);
}

.popup-divider {
  height: 1px;
  background: var(--outline-variant);
  margin: var(--space-xs) 0;
}

.popup-meta {
  padding: var(--space-sm) var(--space-md);
}

.popup-meta .name {
  font-weight: 700;
  font-size: 14px;
}

.popup-meta .email {
  font-size: 12px;
  color: var(--on-surface-var);
}

/* ── Search Bar ── */
.m3-search-bar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--surface-cont);
  border-radius: var(--r-f);
  height: 52px;
  padding: 0 var(--space-sm) 0 var(--space-md);
  box-shadow: var(--elev-3);
  transition: box-shadow .2s var(--ease), transform .2s var(--ease);
  margin-bottom: var(--space-md);
}

.m3-search-bar:focus-within {
  box-shadow: 0 0 0 3px rgba(0, 106, 106, .25);
}

.search-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 15px;
  color: var(--on-surface);
  min-width: 0;
}

.search-input::placeholder {
  color: var(--on-surface-var);
}

.search-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  transition: background .2s, transform .15s;
}

.search-btn:hover {
  background: #004d4d;
}

.search-btn:active {
  transform: scale(.93);
}

.search-icon {
  font-size: 22px;
  color: var(--on-surface-var);
}

/* Tablet Search */
@media (min-width: 600px) {
  .m3-search-bar {
    height: 56px;
    padding: 0 var(--space-sm) 0 var(--space-lg);
  }

  .search-input {
    font-size: 16px;
  }
}

/* ── Filter Chips ── */
.chip-row {
  display: flex;
  gap: var(--space-sm);
  overflow-x: auto;
  padding: var(--space-xs) 0 var(--space-md);
  margin: 0 calc(var(--space-md) * -1);
  padding-left: var(--space-md);
  padding-right: var(--space-md);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.chip-row::-webkit-scrollbar {
  display: none;
}

.m3-chip {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  height: 36px;
  padding: 0 var(--space-md);
  border-radius: var(--r-s);
  border: 1.5px solid var(--outline);
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  color: var(--on-surface-var);
  background: transparent;
  transition: all .2s var(--ease);
  flex-shrink: 0;
}

.m3-chip:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.m3-chip.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}

.m3-chip i {
  font-size: 16px;
}

/* ── Advanced Filters Panel ─── */
.filter-panel {
  background: var(--surface-cont);
  border-radius: var(--r-l);
  border: 1px solid var(--outline-variant);
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
  display: none;
}

.filter-panel.open {
  display: block;
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: flex-end;
}

.filter-group {
  flex: 1;
  min-width: 140px;
}

.filter-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 6px;
  display: block;
}

.filter-select,
.filter-input {
  width: 100%;
  padding: 10px var(--space-sm);
  border-radius: var(--r-s);
  border: 1.5px solid var(--outline);
  font-family: inherit;
  font-size: 14px;
  background: var(--surface);
  color: var(--on-surface);
  transition: border-color .2s;
}

.filter-select:focus,
.filter-input:focus {
  outline: none;
  border-color: var(--primary);
}

.filter-btn {
  padding: 10px var(--space-md);
  border-radius: var(--r-s);
  font-size: 14px;
  font-weight: 600;
}

.btn-primary {
  background: var(--primary);
  color: white;
  transition: background .2s;
}

.btn-primary:hover {
  background: #004d4d;
}

.btn-ghost {
  background: transparent;
  border: 1.5px solid var(--outline);
  color: var(--on-surface-var);
}

.btn-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0 var(--space-md);
  height: 36px;
  border-radius: var(--r-s);
  border: 1.5px solid var(--outline);
  font-size: 13px;
  font-weight: 600;
  color: var(--on-surface-var);
  background: transparent;
  transition: all .2s;
  margin-bottom: var(--space-md);
}

.btn-filter-toggle:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* Tablet Filter Panel */
@media (min-width: 600px) {
  .filter-panel {
    padding: var(--space-lg);
  }

  .filter-group {
    min-width: 160px;
  }
}

/* ── Hotel Grid - Fully Responsive ── */
.hotel-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

/* Small phones (landscape) - 2 columns */
@media (min-width: 400px) {
  .hotel-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Tablet - 2-3 columns */
@media (min-width: 600px) {
  .hotel-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }
}

/* Desktop - 3 columns */
@media (min-width: 900px) {
  .hotel-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Large Desktop - 3-4 columns */
@media (min-width: 1200px) {
  .hotel-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}

/* ── Hotel Card - Responsive ─── */
.m3-card {
  background: var(--surface-cont);
  border-radius: var(--r-xl);
  box-shadow: var(--elev-1);
  overflow: hidden;
  cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}

.m3-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--elev-3);
}

@media (min-width: 900px) {
  .m3-card:hover {
    transform: translateY(-6px);
  }
}

.card-img-wrap {
  position: relative;
  height: 180px;
  overflow: hidden;
  background: var(--surface-variant);
}

/* Tablet card images */
@media (min-width: 600px) {
  .card-img-wrap {
    height: 200px;
  }
}

/* Desktop card images */
@media (min-width: 900px) {
  .card-img-wrap {
    height: 220px;
  }
}

.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s var(--ease);
}

.m3-card:hover .card-img {
  transform: scale(1.04);
}

.card-badge {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  background: var(--primary);
  color: white;
  padding: var(--space-xs) 10px;
  border-radius: var(--r-f);
  font-size: 11px;
  font-weight: 700;
}

.card-type-badge {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  background: rgba(0, 0, 0, .5);
  color: white;
  padding: var(--space-xs) 10px;
  border-radius: var(--r-f);
  font-size: 11px;
  font-weight: 600;
  backdrop-filter: blur(6px);
}

.fav-btn {
  position: absolute;
  bottom: var(--space-sm);
  right: var(--space-sm);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--on-surface);
  box-shadow: var(--elev-2);
  transition: transform .2s var(--ease-spring), background .2s;
  cursor: pointer;
  z-index: 10;
}

.fav-btn:hover {
  transform: scale(1.15);
}

.fav-btn.loved {
  color: #e53935;
}

.fav-btn.loved i::before {
  content: "\ea6c";
}

/* ri-heart-fill */

.card-content {
  padding: var(--space-md);
}

.card-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: var(--space-xs);
}

.card-loc {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 12px;
  color: var(--on-surface-var);
  margin-bottom: var(--space-sm);
}

.card-divider {
  height: 1px;
  background: var(--outline-variant);
  margin: var(--space-sm) 0;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.card-price-label {
  font-size: 11px;
  color: var(--on-surface-var);
  margin-bottom: 2px;
}

.card-price {
  font-size: 20px;
  font-weight: 800;
  color: var(--primary);
}

.card-price span {
  font-size: 12px;
  font-weight: 400;
  color: var(--on-surface-var);
}

.card-rating {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 12px;
  font-weight: 700;
}

.card-distance {
  font-size: 11px;
  color: var(--secondary);
  font-weight: 600;
}

/* Tablet Card Content */
@media (min-width: 600px) {
  .card-content {
    padding: var(--space-md) var(--space-lg);
  }

  .card-title {
    font-size: 17px;
  }

  .card-loc {
    font-size: 13px;
  }

  .card-price {
    font-size: 22px;
  }
}

/* Desktop Card Content */
@media (min-width: 900px) {
  .card-title {
    font-size: 18px;
  }

  .card-loc {
    font-size: 13px;
    margin-bottom: var(--space-md);
  }

  .card-price {
    font-size: 22px;
  }

  .card-rating {
    font-size: 13px;
  }
}

/* ── Skeleton Shimmer ── */
.skeleton {
  background: var(--surface-variant);
  position: relative;
  overflow: hidden;
  border-radius: var(--r-m);
}

.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}

.skeleton-card {
  background: var(--surface-cont);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--elev-1);
}

.skeleton-img {
  height: 180px;
}

.skeleton-body {
  padding: var(--space-md);
}

.skeleton-line {
  height: 16px;
  margin-bottom: 10px;
}

.skeleton-line.short {
  width: 60%;
}

.skeleton-line.xshort {
  width: 40%;
}

@media (min-width: 600px) {
  .skeleton-img {
    height: 200px;
  }
}

@media (min-width: 900px) {
  .skeleton-img {
    height: 220px;
  }

  .skeleton-body {
    padding: var(--space-md) var(--space-lg);
  }
}

/* ── Lazy Load Image ── */
img.lazy {
  opacity: 0;
  transition: opacity .4s ease;
}

img.lazy.loaded {
  opacity: 1;
}

/* ── Empty State ── */
.empty-state {
  grid-column: 1/-1;
  text-align: center;
  padding: var(--space-xxl) var(--space-md);
}

.empty-state i {
  font-size: 48px;
  color: var(--outline);
  margin-bottom: var(--space-md);
}

.empty-state h2,
.empty-state h3 {
  font-size: 18px;
  margin-bottom: var(--space-sm);
}

.empty-state p {
  color: var(--on-surface-var);
  margin-bottom: var(--space-md);
  font-size: 14px;
}

.empty-state .btn {
  display: inline-flex;
}

@media (min-width: 600px) {
  .empty-state {
    padding: 60px var(--space-lg);
  }

  .empty-state i {
    font-size: 56px;
  }

  .empty-state h2,
  .empty-state h3 {
    font-size: 20px;
  }

  .empty-state p {
    font-size: 15px;
  }
}

/* ── Property Detail Page - Responsive ── */
.gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  height: 280px;
  border-radius: var(--r-xl);
  overflow: hidden;
  margin-bottom: var(--space-lg);
  position: relative;
}

/* Tablet Gallery */
@media (min-width: 600px) {
  .gallery-grid {
    grid-template-columns: 2fr 1fr;
    height: 360px;
    gap: var(--space-sm);
  }

  .gallery-side {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: var(--space-sm);
  }
}

/* Desktop Gallery */
@media (min-width: 900px) {
  .gallery-grid {
    height: 420px;
    gap: var(--space-sm);
  }
}

/* Hide side gallery on mobile */
@media (max-width: 599px) {
  .gallery-side {
    display: none;
  }
}

.gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  transition: filter .25s;
}

.gallery-img:hover {
  filter: brightness(.85);
}

.gallery-main {
  position: relative;
}

.btn-back {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  box-shadow: var(--elev-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  z-index: 10;
  transition: transform .2s var(--ease-spring);
}

.btn-back:hover {
  transform: scale(1.1);
}

.btn-all-photos {
  position: absolute;
  bottom: var(--space-md);
  right: var(--space-md);
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(8px);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--r-f);
  font-size: 13px;
  font-weight: 700;
  box-shadow: var(--elev-2);
  transition: background .2s;
}

.btn-all-photos:hover {
  background: white;
}

/* Hotel detail info - Responsive */
.prop-info {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  align-items: start;
  margin-bottom: var(--space-lg);
}

@media (min-width: 600px) {
  .prop-info {
    grid-template-columns: 1fr auto;
    gap: var(--space-lg);
  }
}

.prop-name {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 6px;
}

.prop-loc {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--on-surface-var);
  font-size: 13px;
  margin-bottom: var(--space-sm);
  flex-wrap: wrap;
}

.prop-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--r-f);
  background: var(--primary-container);
  color: var(--on-primary-cont);
  font-size: 11px;
  font-weight: 700;
}

.prop-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-sm) var(--space-md);
  background: var(--primary-container);
  border-radius: var(--r-l);
  text-align: center;
  width: fit-content;
}

.rating-val {
  font-size: 28px;
  font-weight: 800;
  color: var(--primary);
}

.rating-sub {
  font-size: 11px;
  color: var(--on-surface-var);
}

/* Desktop Property Info */
@media (min-width: 900px) {
  .prop-name {
    font-size: 28px;
  }

  .prop-loc {
    font-size: 14px;
    margin-bottom: var(--space-md);
  }

  .prop-type-badge {
    font-size: 12px;
  }

  .rating-val {
    font-size: 32px;
  }

  .rating-sub {
    font-size: 12px;
  }
}

/* Amenity chips - Responsive */
.amenity-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.amenity-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px var(--space-sm);
  border-radius: var(--r-f);
  background: var(--surface-variant);
  font-size: 12px;
  font-weight: 600;
}

@media (min-width: 600px) {
  .amenity-chip {
    font-size: 13px;
    padding: 6px 14px;
  }
}

/* Section title */
.section-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1.5px solid var(--outline-variant);
}

@media (min-width: 600px) {
  .section-title {
    font-size: 20px;
  }
}

/* ── Date Bar - Responsive ── */
.date-bar {
  background: var(--surface-cont);
  padding: var(--space-md);
  border-radius: var(--r-l);
  border: 1.5px solid var(--outline-variant);
  display: flex;
  gap: var(--space-md);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
}

.date-group {
  flex: 1;
  min-width: 140px;
}

.date-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 6px;
  display: block;
}

.date-input {
  width: 100%;
  padding: 10px var(--space-sm);
  border-radius: var(--r-s);
  border: 1.5px solid var(--outline);
  font-family: inherit;
  font-size: 14px;
  background: var(--surface);
  transition: border-color .2s;
}

.date-input:focus {
  outline: none;
  border-color: var(--primary);
}

@media (min-width: 600px) {
  .date-bar {
    padding: var(--space-lg);
  }

  .date-group {
    min-width: 160px;
  }
}

/* ── Room Card - Responsive ── */
.room-card {
  border: 1.5px solid var(--outline-variant);
  border-radius: var(--r-l);
  padding: var(--space-md);
  transition: all .25s var(--ease);
  cursor: pointer;
  background: var(--surface-cont);
  margin-bottom: var(--space-sm);
}

.room-card:hover {
  border-color: var(--primary);
  box-shadow: var(--elev-2);
}

.room-card.selected {
  border-color: var(--primary);
  background: rgba(0, 106, 106, .04);
}

.room-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-sm);
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.room-type-name {
  font-size: 16px;
  font-weight: 700;
}

.room-price-wrap {
  text-align: right;
}

.room-price {
  font-size: 20px;
  font-weight: 800;
  color: var(--primary);
}

.room-price-sub {
  font-size: 11px;
  color: var(--on-surface-var);
}

.room-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.room-chip {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--r-f);
  background: var(--surface-variant);
  font-size: 11px;
  font-weight: 600;
}

.room-chip.ac {
  background: var(--tertiary-cont);
  color: var(--tertiary);
}

.room-chip.beds {
  background: var(--secondary-cont);
  color: var(--secondary);
}

.room-availability {
  font-size: 11px;
  font-weight: 700;
  margin-top: var(--space-sm);
}

.avail-ok {
  color: #2e7d32;
}

.avail-low {
  color: #e65100;
}

.avail-none {
  color: var(--error);
}

.btn-book-room {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  width: 100%;
  height: 44px;
  border-radius: var(--r-l);
  background: var(--primary);
  color: white;
  font-size: 14px;
  font-weight: 700;
  margin-top: var(--space-md);
  transition: background .2s, transform .15s;
}

.btn-book-room:hover {
  background: #004d4d;
}

.btn-book-room:active {
  transform: scale(.98);
}

/* Tablet Room Card */
@media (min-width: 600px) {
  .room-card {
    padding: var(--space-lg);
  }

  .room-type-name {
    font-size: 17px;
  }

  .room-price {
    font-size: 22px;
  }

  .room-price-sub {
    font-size: 12px;
  }

  .room-chip {
    font-size: 12px;
  }

  .room-availability {
    font-size: 12px;
  }

  .btn-book-room {
    height: 48px;
    font-size: 15px;
  }
}

/* ── Booking Modal - Responsive ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  z-index: 500;
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  padding: var(--space-md);
}

.modal-overlay.active {
  display: flex;
}

.booking-modal {
  background: white;
  width: 100%;
  max-width: 460px;
  border-radius: var(--r-xl);
  padding: var(--space-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
  animation: popUp .3s var(--ease-spring);
  max-height: 90vh;
  overflow-y: auto;
}

/* Mobile: Full width modal */
@media (max-width: 599px) {
  .booking-modal {
    max-width: 100%;
    border-radius: var(--r-l);
    padding: var(--space-lg) var(--space-md);
  }
}

@keyframes popUp {
  from {
    transform: scale(.88) translateY(20px);
    opacity: 0;
  }

  to {
    transform: none;
    opacity: 1;
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-lg);
}

.modal-title {
  font-size: 18px;
  font-weight: 800;
}

.modal-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-variant);
  font-size: 20px;
  transition: background .2s;
}

.modal-close:hover {
  background: var(--outline-variant);
}

.modal-step {
  display: none;
}

.modal-step.active {
  display: block;
}

.form-group {
  margin-bottom: var(--space-md);
}

.form-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 6px;
  display: block;
}

.form-input {
  width: 100%;
  padding: var(--space-sm) var(--space-sm);
  border-radius: var(--r-s);
  border: 1.5px solid var(--outline);
  font-family: inherit;
  font-size: 15px;
  transition: border-color .2s;
  background: var(--surface);
}

.form-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 106, 106, .15);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}

/* Tablet form row */
@media (min-width: 400px) {
  .form-row {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
  }
}

.btn-full {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  width: 100%;
  height: 48px;
  border-radius: var(--r-l);
  background: var(--primary);
  color: white;
  font-size: 15px;
  font-weight: 700;
  margin-top: var(--space-sm);
  transition: background .2s, transform .15s;
}

.btn-full:hover {
  background: #004d4d;
}

.btn-full:active {
  transform: scale(.98);
}

.btn-secondary-full {
  background: transparent;
  color: var(--primary);
  border: 1.5px solid var(--primary);
}

.btn-secondary-full:hover {
  background: rgba(0, 106, 106, .06);
}

@media (min-width: 600px) {
  .booking-modal {
    padding: var(--space-xl);
  }

  .modal-title {
    font-size: 20px;
  }

  .btn-full {
    height: 52px;
    font-size: 16px;
  }
}

/* Payment Mock UI */
.payment-screen {
  text-align: center;
  padding: var(--space-md) 0;
}

.payment-amount {
  font-size: 36px;
  font-weight: 800;
  color: var(--primary);
  margin: var(--space-md) 0;
}

.payment-note {
  font-size: 13px;
  color: var(--on-surface-var);
  margin-bottom: var(--space-lg);
}

.upi-box {
  background: var(--surface);
  border: 1.5px solid var(--outline-variant);
  border-radius: var(--r-l);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

.upi-id {
  font-size: 16px;
  font-weight: 700;
  color: var(--primary);
  word-break: break-all;
}

@media (min-width: 600px) {
  .payment-amount {
    font-size: 48px;
  }

  .payment-note {
    font-size: 14px;
  }

  .upi-box {
    padding: var(--space-lg);
  }

  .upi-id {
    font-size: 18px;
  }
}

/* OTP Success UI */
.otp-success {
  text-align: center;
  padding: var(--space-sm) 0;
}

.otp-box {
  background: var(--primary-container);
  border: 2px dashed var(--primary);
  border-radius: var(--r-l);
  padding: var(--space-lg);
  margin: var(--space-lg) 0;
}

.otp-code {
  font-size: 36px;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: 8px;
}

.otp-hint {
  font-size: 12px;
  color: var(--on-surface-var);
  margin-top: var(--space-sm);
}

.success-icon {
  font-size: 48px;
  color: var(--primary);
  margin-bottom: var(--space-sm);
}

.booking-summary-row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--outline-variant);
  font-size: 13px;
}

.booking-summary-row:last-child {
  border-bottom: none;
  font-weight: 700;
}

@media (min-width: 600px) {
  .otp-code {
    font-size: 52px;
    letter-spacing: 12px;
  }

  .success-icon {
    font-size: 56px;
  }

  .booking-summary-row {
    font-size: 14px;
  }
}

/* ── Saved Page - Responsive ─── */
.saved-empty {
  text-align: center;
  padding: 60px var(--space-md);
}

.saved-empty i {
  font-size: 56px;
  color: var(--outline);
}

@media (min-width: 600px) {
  .saved-empty {
    padding: 80px var(--space-lg);
  }

  .saved-empty i {
    font-size: 64px;
  }
}

/* ── Lightbox - Responsive ── */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .9);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
}

.lightbox.open {
  display: flex;
}

.lightbox img {
  max-width: 95vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: var(--r-m);
}

.lightbox-close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;
}

/* ── Footer - Responsive ── */
.site-footer {
  background: var(--on-surface);
  color: rgba(255, 255, 255, .7);
  padding: var(--space-xxl) 0 var(--space-lg);
  margin-top: var(--space-xxl);
  position: relative;
  overflow: hidden;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
}

/* Tablet Footer */
@media (min-width: 600px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop Footer */
@media (min-width: 900px) {
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr;
  }
}

.footer-brand h3 {
  color: white;
  font-size: 24px;
  font-weight: 800;
  margin-bottom: var(--space-sm);
  letter-spacing: -0.5px;
}

.footer-brand p {
  font-size: 14px;
  opacity: 0.8;
  line-height: 1.6;
  max-width: 300px;
  margin-bottom: var(--space-md);
}

/* Social Icons */
.social-icons {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.social-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 18px;
  transition: all 0.3s ease;
  text-decoration: none;
}

.social-icons a:hover {
  background: var(--primary);
  transform: translateY(-3px);
}

.footer-links h4 {
  color: white;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.footer-links a {
  display: block;
  font-size: 14px;
  margin-bottom: 12px;
  opacity: .8;
  transition: all .2s ease;
  text-decoration: none;
}

.footer-links a:hover {
  opacity: 1;
  transform: translateX(5px);
  color: var(--primary-container);
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.footer-copy,
.footer-made-with {
  font-size: 13px;
  opacity: .8;
}

@media (min-width: 600px) {
  .footer-bottom {
    flex-direction: row;
    justify-content: center;
  }
}

/* ── Privacy, Terms, Refund Pages - Responsive ─── */
/* Hero sections */
.privacy-hero,
.refund-hero,
.terms-hero {
  padding: var(--space-xxl) var(--space-md);
  text-align: center;
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  margin-bottom: var(--space-xl);
}

@media (min-width: 600px) {

  .privacy-hero,
  .refund-hero,
  .terms-hero {
    padding: 60px var(--space-lg);
    border-radius: 0 0 32px 32px;
    margin-bottom: 40px;
  }
}

/* Policy Grid */
.policy-grid,
.legal-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

@media (min-width: 900px) {

  .policy-grid,
  .legal-grid {
    grid-template-columns: 280px 1fr;
  }

  .sidebar-sticky,
  .toc-sidebar {
    position: sticky;
    top: 100px;
    height: fit-content;
    padding-right: 20px;
    border-right: 1px solid var(--md-sys-color-outline-variant);
  }
}

/* Navigation links */
.nav-link,
.toc-link {
  display: block;
  padding: 10px var(--space-md);
  border-radius: var(--r-s);
  color: var(--md-sys-color-on-surface-variant);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: var(--space-xs);
  transition: background 0.2s;
}

.nav-link:hover,
.toc-link:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--md-sys-color-primary);
}

.nav-link.active,
.toc-link.active {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  font-weight: 700;
}

/* Policy Content */
.policy-content h2,
.legal-content h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--md-sys-color-on-surface);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-md);
  scroll-margin-top: 100px;
}

.policy-content h2:first-child,
.legal-content h2:first-child {
  margin-top: 0;
}

.policy-content p,
.legal-content p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--md-sys-color-on-surface-variant);
  margin-bottom: var(--space-md);
}

.policy-content ul,
.legal-content ul {
  padding-left: 20px;
  margin-bottom: var(--space-md);
  color: var(--md-sys-color-on-surface-variant);
}

.policy-content li,
.legal-content li {
  margin-bottom: var(--space-sm);
  font-size: 15px;
  line-height: 1.7;
}

@media (min-width: 600px) {

  .policy-content h2,
  .legal-content h2 {
    font-size: 22px;
  }

  .policy-content p,
  .legal-content p,
  .policy-content li,
  .legal-content li {
    font-size: 16px;
  }
}

/* Refund Policy Cards */
.policy-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-xxl);
}

@media (min-width: 600px) {
  .policy-cards {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-lg);
  }
}

.policy-card {
  background: var(--md-sys-color-surface-container);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--r-xl);
  padding: var(--space-lg);
  position: relative;
  overflow: hidden;
  transition: transform 0.2s;
}

.policy-card:hover {
  transform: translateY(-4px);
}

@media (min-width: 600px) {
  .policy-card {
    padding: var(--space-xl);
  }
}

/* Info Boxes */
.contact-box,
.info-box {
  background: var(--md-sys-color-surface-variant);
  padding: var(--space-lg);
  border-radius: var(--r-l);
  margin-top: var(--space-xl);
}

@media (min-width: 600px) {

  .contact-box,
  .info-box {
    padding: var(--space-xl);
  }
}

/* Hide on mobile */
@media (max-width: 899px) {
  .md-hidden-down {
    display: none !important;
  }
}

/* ── Utilities ─── */
.flex-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.spin {
  animation: spin 1s linear infinite;
  display: inline-block;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--r-f);
  font-size: 12px;
  font-weight: 600;
}

.tag-teal {
  background: var(--primary-container);
  color: var(--on-primary-cont);
}

.tag-orange {
  background: #fff3e0;
  color: #e65100;
}

.tag-green {
  background: #e8f5e9;
  color: #2e7d32;
}

.tag-red {
  background: var(--error-cont);
  color: var(--error);
}

.d-none {
  display: none !important;
}

.mt-4 {
  margin-top: var(--space-xs);
}

.mt-8 {
  margin-top: var(--space-sm);
}

.mt-16 {
  margin-top: var(--space-md);
}

.mt-24 {
  margin-top: var(--space-lg);
}

/* Touch-friendly buttons for mobile */
@media (max-width: 599px) {

  .m3-chip,
  .btn-filter-toggle,
  .filter-btn {
    min-height: 44px;
  }
}

/* Improve tap targets on mobile */
@media (max-width: 599px) {
  .m3-nav-item {
    min-height: 56px;
  }

  .rail-item {
    min-height: 56px;
  }
}

/* Smooth scrolling on iOS */
@supports (-webkit-overflow-scrolling: touch) {

  .chip-row,
  .modal-overlay,
  .booking-modal {
    -webkit-overflow-scrolling: touch;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --outline: #000000;
    --outline-variant: #333333;
  }

  .m3-chip,
  .filter-select,
  .filter-input,
  .date-input,
  .form-input {
    border-width: 2px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Print styles */
@media print {

  .m3-rail,
  .m3-nav-bar,
  .m3-search-bar,
  .chip-row,
  .filter-panel,
  .btn-filter-toggle,
  .modal-overlay,
  .lightbox {
    display: none !important;
  }

  body {
    padding: 0;
    background: white;
  }

  .m3-card {
    box-shadow: none;
    border: 1px solid #ccc;
    page-break-inside: avoid;
  }
}

/* ── Additional Responsive Utilities ── */

/* Filter actions on mobile */
.filter-actions {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  margin-top: var(--space-sm);
}

@media (max-width: 599px) {
  .filter-actions {
    flex-direction: column;
  }

  .filter-actions .filter-btn {
    width: 100%;
    justify-content: center;
  }

  /* Hide button text on very small screens */
  .btn-text {
    display: inline;
  }
}

/* Touch-friendly filter buttons */
@media (max-width: 599px) {
  .filter-btn {
    min-height: 44px;
    padding: 12px 20px;
  }
}

/* Responsive text truncation */
@media (max-width: 399px) {
  .card-title {
    font-size: 15px;
  }

  .card-price {
    font-size: 18px;
  }
}

/* Improve scrollbar on filtered chips */
.chip-row {
  scroll-snap-type: x mandatory;
}

.m3-chip {
  scroll-snap-align: start;
}

/* Mobile-optimized skeletons */
@media (max-width: 399px) {
  .skeleton-img {
    height: 160px;
  }
}

/* Better modal positioning on landscape mobile */
@media (max-height: 500px) and (orientation: landscape) {
  .booking-modal {
    max-height: 95vh;
    padding: var(--space-md);
  }

  .modal-header {
    margin-bottom: var(--space-md);
  }

  .btn-full {
    height: 44px;
  }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
  .m3-card:hover {
    transform: none;
  }

  .policy-card:hover {
    transform: none;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .m3-chip.active {
    border: 2px solid var(--on-primary);
  }

  .filter-btn.btn-primary {
    border: 2px solid var(--on-primary);
  }
}

/* Focus visible for keyboard navigation */
.m3-chip:focus-visible,
.filter-btn:focus-visible,
.btn-filter-toggle:focus-visible,
.nav-link:focus-visible,
.toc-link:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

/* Ensure images don't overflow */
img {
  max-width: 100%;
  height: auto;
}

/* Better text wrapping */
.card-title,
.prop-name,
.room-type-name {
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

/* Safe area insets for modern devices */
@supports (padding: max(0px)) {
  body {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }

  .m3-nav-bar {
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }

  @media (min-width: 900px) {
    body {
      padding-left: max(0px, env(safe-area-inset-left));
    }
  }
}