/* General Styles */
body {
  font-family: 'Roboto', sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}


.container {
  width: 90%;
  margin: 0 auto;
}

/* HEADER TOP */
.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 10px 0;
  background: transparent; /* transparent background */
}

.header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-left .logo img {
  height: 50px;
}

/* Hamburger icon styling for mobile */
.sidenav-trigger {
  font-size: 32px;
  color: black;
}

/* Navigation buttons: transparent background, reduced height */
.nav-buttons {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  background: transparent;
  box-shadow: none;
}

/* User button styling */
.user-button {
  max-width: 150px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: chartreuse;
}

.user-button .user-img {
  width: 30px;
  height: 30px;
  margin-right: 5px;
}



.searchPanel.nav-collapsed {
  /* Example: Collapse the panel's height */
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}


.search-form {
  display: flex;
  width: 100%;
  padding: 20px;
}




#paris-map {
  width: 100%;
  height: auto;
  display: flex;
  margin: 0;
  padding: 0;
  line-height: 0;
}



#paris-map-blog {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  padding: 0;
  line-height: 0;
}
/* Ensure no extra gap between the SVG container and button row */
.search-button-row {
  text-align: center;
  margin: 0;
  padding: 0;
  line-height: 0;
}




/* Mobile search panel container (inside sidenav) */
.mobile-search-panel {
  padding: 10px;
  width: 100%;
}

/* Fade in Up animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.animated {
  animation-duration: 0.8s;
  animation-fill-mode: both;
}
.fadeInUp {
  animation-name: fadeInUp;
}
/* Listings card hover */
.listing-card:hover {
  transform: translateY(-3px);
  transition: transform 0.3s ease;
}


.arrondissement {
  fill: #869eba;
  stroke: white;
  stroke-width: 2px;
  cursor: pointer;
}
.selected {
  fill: #DDA853 !important;
}

.arrondissementBlog {
  fill: #869eba;
  stroke: white;
  stroke-width: 2px;
  cursor: pointer;
}
.selectedBlogArea {
  fill: #9ACBD0;
}

/* ------------------- PARIS MAP --------------------- */

.arr75001 {
  fill: #b0d79b !important;
  stroke: white;
  stroke-width: 2px;
  cursor: pointer;
}


.arr75002 {
  fill: #b0d79b !important;
  stroke: white;
  stroke-width: 2px;
  cursor: pointer;
}

.arr75003 {
  fill: #b0d79b !important;
  stroke: white;
  stroke-width: 2px;
  cursor: pointer;
}

.arr75004 {
  fill: #b0d79b !important;
  stroke: white;
  stroke-width: 2px;
  cursor: pointer;
}

.arr75005 {
  fill: #578FCA !important;
  stroke: white;
  stroke-width: 2px;
  cursor: pointer;
}

.arr75006 {
  fill: #578FCA !important;
  stroke: white;
  stroke-width: 2px;
  cursor: pointer;
}

.arr75007 {
  fill: #578FCA !important;
  stroke: white;
  stroke-width: 2px;
  cursor: pointer;
}

.arr75008 {
  fill: #A1E3F9 !important;
  stroke: white;
  stroke-width: 2px;
  cursor: pointer;
}

.arr75009 {
  fill: #A1E3F9 !important;
  stroke: white;
  stroke-width: 2px;
  cursor: pointer;
}

.arr75010 {
  fill: #caa4e4 !important;
  stroke: white;
  stroke-width: 2px;
  cursor: pointer;
}

.arr75011 {
  fill: #caa4e4 !important;
  stroke: white;
  stroke-width: 2px;
  cursor: pointer;
}

.arr75012 {
  fill: #caa4e4 !important;
  stroke: white;
  stroke-width: 2px;
  cursor: pointer;
}

.arr75013 {
  fill: #9ACBD0 !important;
  stroke: white;
  stroke-width: 2px;
  cursor: pointer;
}

.arr75014 {
  fill: #48A6A7 !important;
  stroke: white;
  stroke-width: 2px;
  cursor: pointer;
}

.arr75015 {
  fill: #729ed1 !important;
  stroke: white;
  stroke-width: 2px;
  cursor: pointer;
}

.arr75016 {
  fill: #729ed1 !important;
  stroke: white;
  stroke-width: 2px;
  cursor: pointer;
}

.arr75017 {
  fill: #f78282bd !important;
  stroke: white;
  stroke-width: 2px;
  cursor: pointer;
}

.arr75018 {
  fill: #f78282bd !important;
  stroke: white;
  stroke-width: 2px;
  cursor: pointer;
}

.arr75019 {
  fill: #f78282bd !important;
  stroke: white;
  stroke-width: 2px;
  cursor: pointer;
}

.arr75020 {
  fill: #f78282bd !important;
  stroke: white;
  stroke-width: 2px;
  cursor: pointer;
}

.arrondissement {
  fill: #869eba;
  stroke: white;
  stroke-width: 2px;
  cursor: pointer;
}
.selected {
  fill: #DDA853 !important;
}
.number {
  font-size: 24px;
  font-weight: bold;
  fill: black;
  text-anchor: middle;
  /* pass pointer events so the path below can be clicked */
  pointer-events: none;
}

/* ------------------- SEARCH CHIPS ------------------------ */

 /* Chip styling for selected filters */
 .chip {
  display: inline-flex;
  align-items: center;
  padding: 0 5px;
  margin: 2px !important;
  height: 20px !important;
  font-size: 10px !important;
  line-height: 20px !important;
  border-radius: 24px !important;
  background-color: #c6b7b7 !important;
  color: #000;
  }
  
  .chip .close {
  margin-left: 5px;
  cursor: pointer;
  line-height: 20px !important;
  font-size: 14px;
  }
  

  /* ------ PRICE OVERLAY ----- */

  /* admin_styles.css */

/* Price overlay styling */
.price-overlay {
  position: absolute;
  top: 8px;
  left: 8px;
  background-color: #ff69b4; /* A vibrant pink */
  color: #fff;
  padding: 6px 12px;
  font-size: 1rem;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Optional: Adjust the listing card font sizes and spacing */
.card .card-content p,
.card .card-content h6 {
  font-size: 0.95rem;
}

/* Ensure images in card-image are not affected by other styling */
.card-image img {
  display: block;
  width: 100%;
  height: auto;
}