.search{
  display:flex;
  background:#fff;
  border-radius:999px;
  padding:10px 14px;
  margin-top:8px;
}

.search input{
  border:none;
  outline:none;
  font-size: 18px;
  width:100%;
}

.pills{
  margin-top:10px;
  display:flex;
  gap:8px;
  overflow:auto;
}

.pill{
  padding:8px 12px;
  border-radius:999px;
  background:#fff;
  font-size:13px;
  font-weight:600;
  white-space:nowrap;
}

.pill.active{
  background:linear-gradient(135deg,var(--yellow2),var(--yellow));
}

/* =========================
   CATEGORY BADGE
========================= */

.badge.category{
  position:absolute;
  bottom:12px;
  left:12px;

  background:#f4f4f4;
  color:#333;

  font-size:12px;
  font-weight:600;

  padding:6px 10px;

  border-radius:14px;

  backdrop-filter:blur(6px);

  box-shadow:0 3px 8px rgba(0,0,0,.18);
}

/* Cards */

.card{
  background:#fff;
  border-radius:var(--radius-lg);
  padding:16px;
  display:flex;
  transition:transform .15s ease,
  box-shadow .15s ease;
  box-shadow:var(--shadow-soft);
  flex-direction:column;
  gap:14px;
}

.card:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(0,0,0,.08);
}

/* Avatar Dropdown */

.header-user{
  position:relative;
  z-index:1100;
}

.avatar-btn{
  background:none;
  border:none;
  font-size:20px;
  cursor:pointer;
}

.user-dropdown{
  position:absolute;
  right:0;
  top:38px;
  background:#fff;
  border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.15);
  min-width:140px;
  display:none;
  flex-direction:column;
  overflow:hidden;
  z-index:1200;
}

.user-dropdown a,
.user-dropdown button{
  padding:10px 14px;
  font-size:14px;
  text-align:left;
  background:none;
  border:none;
  cursor:pointer;
  text-decoration:none;
  color:#000;
}

.user-dropdown a:hover,
.user-dropdown button:hover{
  background:#f5f5f5;
}

/* Card Image */

.card-image{
  height:160px;
  border-radius:16px;
  overflow:hidden;
  background:#eee;
  position:relative;
}

.card-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.location a{
  color:#1d4ed8;
  text-decoration:none;
  font-weight:500;
}

.location a:active{
  text-decoration:underline;
}


/* Move Leaflet zoom controls below header stack */
.leaflet-top.leaflet-left {
  top: 70px;
}

.leaflet-popup-content .map-btn{
  display:inline-block;
  margin-top:6px;
  padding:6px 10px;
  background:#EFB428;
  color:#000;
  font-size:12px;
  border-radius:6px;
  text-decoration:none;
  font-weight:600;
}

.map-btn:hover{
  background:#089090;
}

.perk-dot{
  width:14px;
  height:14px;
  background:#EFB428;
  border-radius:50%;
  box-shadow:0 0 0 3px rgba(239,180,40,.35);
}