:where([class^="ri-"])::before { 
font-family: "RemixIcon";
content: "\f3c2"; }
.hero-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.5s ease;
}

/* Badge base styling */
.badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #ffffff;
    z-index: 10;
  }
  
  /* Type-specific badge colors */
  .badge--Featured {
    background-color: #ef4444; /* red */
  }
  .badge--Reduced-Price {
    background-color: #3b82f6; /* blue */
  }
  .badge--New-Listing {
    background-color: #10b981; /* green */
  }
    

.hero-slide.active {
opacity: 1;
}
body {
font-family: 'Open Sans', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Poppins', sans-serif;
font-weight: 600;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
    -webkit-appearance: none; /* Chrome, Safari, Edge */
    -moz-appearance: textfield; /* Firefox: hide arrows */
    appearance: none;           /* standardized removal */
}
.custom-checkbox {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
margin-right: 8px;
}
.custom-checkbox input {
opacity: 0;
width: 0;
height: 0;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
background-color: white;
border: 2px solid #d1d5db;
border-radius: 4px;
}
.custom-checkbox input:checked ~ .checkmark {
background-color: #0054A4;
border-color: #0054A4;
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
.custom-checkbox input:checked ~ .checkmark:after {
display: block;
}
.custom-checkbox .checkmark:after {
left: 6px;
top: 2px;
width: 6px;
height: 12px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.custom-select {
position: relative;
display: inline-block;
width: 100%;
}
.custom-select select {
display: none;
}
.select-selected {
background-color: white;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 12px 16px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}
.select-items {
position: absolute;
background-color: white;
top: 100%;
left: 0;
right: 0;
z-index: 99;
border: 1px solid #e5e7eb;
border-radius: 8px;
margin-top: 4px;
max-height: 300px;
overflow-y: auto;
display: none;
}
.select-items div {
padding: 12px 16px;
cursor: pointer;
}
.select-items div:hover {
background-color: #f3f4f6;
}
.select-hide {
display: none;
}
.select-selected.select-arrow-active {
border-radius: 8px 8px 0 0;
}
.carousel {
position: relative;
overflow: hidden;
}
.carousel-inner {
display: flex;
transition: transform 0.5s ease;
}
.carousel-item {
flex: 0 0 100%;
}
.testimonial-carousel .carousel-item {
opacity: 0;
transition: opacity 0.5s ease;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.testimonial-carousel .carousel-item.active {
opacity: 1;
position: relative;
}
.custom-switch {
position: relative;
display: inline-block;
width: 50px;
height: 24px;
}
.custom-switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
border-radius: 24px;
}
.slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background-color: white;
transition: .4s;
border-radius: 50%;
}
input:checked + .slider {
background-color: #0054A4;
}
input:checked + .slider:before {
transform: translateX(26px);
}
.listing-carousel {
position: relative;
overflow: hidden;
}
.listing-carousel-inner {
display: flex;
transition: transform 0.5s ease;
}
.listing-carousel-item {
flex: 0 0 calc(33.333% - 16px);
margin-right: 16px;
}
@media (max-width: 1024px) {
.listing-carousel-item {
flex: 0 0 calc(50% - 16px);
}
}
@media (max-width: 640px) {
.listing-carousel-item {
flex: 0 0 100%;
margin-right: 0;
}
}
.mobile-menu {
position: fixed;
top: 0;
right: -300px;
width: 300px;
height: 100vh;
background-color: white;
z-index: 50;
transition: right 0.3s ease;
box-shadow: -2px 0 10px rgba(0,0,0,0.1);
overflow-y: auto;
}
.mobile-menu.open {
right: 0;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
z-index: 40;
display: none;
}
.overlay.open {
display: block;
}