/* Reusable utility classes to reduce inline styles */

/* Heights */
.h-450 {
  height: 450px !important;
}
.h-400 {
  height: 400px !important;
}

/* Images */
.img-cover-450 {
  height: 450px !important;
  width: 100% !important;
  object-fit: cover !important;
}
.img-thumb-80x60 {
  width: 80px !important;
  height: 60px !important;
  object-fit: cover !important;
}

/* Cursor */
.pointer {
  cursor: pointer !important;
}

/* Fixed widths */
.w-80px {
  width: 80px !important;
}

/* Icon sizing and color helpers */
.icon-sm {
  font-size: 1.1rem !important;
}
.icon-xs {
  font-size: 0.92rem !important;
}
.text-sky {
  color: #87CEEB !important;
}

/* Accent underline utility (used for price frequency text) */
.underline-accent-warning {
  border-bottom: 3px solid #ffc107 !important;
  display: inline-block !important;
  padding-bottom: 2px !important;
}

/* Map wrappers */
.map-box-400 {
  position: relative !important;
  overflow: hidden !important;
  height: 400px !important;
}
.map-fill-abs {
  position: absolute !important;
  inset: 0 !important; /* top:0; right:0; bottom:0; left:0 */
}

/* Category badge styling */
.badge-category {
  background-color: #e9ecef !important;
  color: #6c757d !important;
  animation: none !important;
}

/* --- Home/Hero helpers --- */
/* Width/Height helpers */
.wh-24rem {
  width: 24rem !important;
  height: 24rem !important;
}

/* Blur filter utility */
.blur-3rem {
  filter: blur(3rem) !important;
}

/* Typography size helpers not covered by Bootstrap */
.fs-3rem { font-size: 3rem !important; }
.fs-2rem { font-size: 2rem !important; }
.fs-0-5rem { font-size: 0.5rem !important; }

/* Specific heights for card images on homepage */
.h-137 { height: 137px !important; }
.h-176 { height: 176px !important; }
.h-180 { height: 180px !important; }

/* Border radius 12px utility */
.rounded-12 { border-radius: 12px !important; }

/* Width constraints */
.minw-120 { min-width: 120px !important; }
.mw-36rem { max-width: 36rem !important; }
.maxw-500px { max-width: 500px !important; }
.maxw-200px { max-width: 200px !important; }

/* Object fit helpers */
.object-fit-cover { object-fit: cover !important; }

/* Height constraints */
.minh-240 { min-height: 240px !important; }
.maxh-320 { max-height: 320px !important; }

/* Overflow helpers */
.oy-auto { overflow-y: auto !important; }

/* Additional font sizes */
.fs-2-5rem { font-size: 2.5rem !important; }

/* Smaller map box for previews */
.map-box-300 {
  position: relative !important;
  overflow: hidden !important;
  height: 300px !important;
}

/* Fixed square sizes */
.wh-48 { width: 48px !important; height: 48px !important; }
.wh-32 { width: 32px !important; height: 32px !important; }

/* Max-width percentage utilities */
.maxw-75p { max-width: 75% !important; }
.maxw-70p { max-width: 70% !important; }

/* Max-height rem utility */
.maxh-24rem { max-height: 24rem !important; }
.maxh-200 { max-height: 200px !important; }
.maxh-300 { max-height: 300px !important; }
.maxh-150 { max-height: 150px !important; }

/* Small fixed heights */
.h-40 { height: 40px !important; }
.h-8px { height: 8px !important; }
.h-250px { height: 250px !important; }

/* Width percentage helpers */
.w-20p { width: 20% !important; }
.w-40p { width: 40% !important; }
.w-60px { width: 60px !important; }
.w-200px { width: 200px !important; }
.w-40px { width: 40px !important; }

/* Additional fixed sizes */
.wh-64 { width: 64px !important; height: 64px !important; }
.h-24 { height: 24px !important; }
.w-160px { width: 160px !important; }
.h-120px { height: 120px !important; }

/* Additional max-heights */
.maxh-200 { max-height: 200px !important; }

/* Position offsets */
.top-17 { top: 17px !important; }

/* Viewport height calculations */
.h-vh-minus-150 { height: calc(100vh - 150px) !important; }

/* Hover effects */
.hover-shadow {
  transition: box-shadow 0.3s ease, transform 0.3s ease !important;
}
.hover-shadow:hover {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
  transform: translateY(-2px) !important;
}