/* Layout */
.map-layout{
  display: block;
  margin-top: 2rem;
  position: relative; 
}
#map{ height: 600px; border-radius: 12px; background: #eee; }

/* Filters */
.cat-filters{
  display:flex; gap:12px; justify-content:center; align-items:flex-start; margin:10px 0;
}
.cat-btn{
  border:1px solid #ddd; padding:6px 10px; border-radius:999px; cursor:pointer; background:#fff;
}
.cat-btn:hover {
    font-weight:400;
    border-color: #09b1c9;
    color: #09b1c9;
}
.cat-btn.active{
    font-weight:600;
    border-color: #09b1c9;
    color: #09b1c9;
}

/* Left list */
.asset-list { 
    max-height: 600px;
    overflow: auto;
    background: rgba(255, 255, 255, 0.75);
    border: none;
    border-radius: 3px;
    position: absolute;
    top: 67px;
    z-index: 10;
    height: auto;
    padding: 12px;
    left: 11px;
}
.asset-list .list{ list-style:none; margin:0; padding:0; }
.asset-row{ margin:2px 0; }
.asset-row.hidden{ display:none; }
.asset-row.active .asset-link {
    background:rgba(236, 119, 40, 0.1);
    color: #000;
    font-weight: 600;
}
.asset-row:hover .asset-link {
    color: #000;
    background: rgba(236, 119, 40, 0.1);;
}


.asset-link {
  width:100%; display:flex; align-items:center; gap:8px;
  border:0; background:transparent; padding:6px 8px; text-align:left; border-radius:8px; cursor:pointer;
}
.asset-link .badge {
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%;
  background:#ea722d; color:#fff; font:700 12px/1 system-ui;
  border: 1px solid #ff9800; box-shadow: 0 0 0 1px rgba(0,0,0,.2);
}
.asset-link .t {
    flex:1;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size: 14px;
}

/* Right details panel */
.asset-details {
    background: rgba(35,184,206,0.9);
    padding: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
    min-height: 120px;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 26%;
    height: 100%;
    border: 0;
    border-radius: 4px;
    color: #fff;
    height: 96%;
}
.asset-details .title{ font:700 18px/1.2 system-ui; margin-bottom:6px; }
.asset-details .images{ display:flex; gap:8px; flex-wrap:wrap; margin:.5rem 0; }
.asset-details .images img{ max-width:180px; height:auto; border-radius:8px; display:block; }

/* Marker (dot only, numbered) */
.aiken-marker{ display:flex; flex-direction:column; align-items:center; pointer-events:auto; transform:translateZ(0); }
.aiken-marker .dot {
  width: 32px; height: 32px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  font:700 17px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#fff;
  background:#ea722d;                /* fixed; JS also sets it */
  border:1px solid #ff9800;          /* fixed; JS also sets it */
  box-shadow:0 0 0 1px rgba(0,0,0,.25);
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.aiken-marker.is-highlighted .dot{
  background:#ffd600 !important;         /* highlight color */
  border-color:#cc7a00;
  transform: scale(1.15);
  box-shadow: 0 0 0 2px rgba(0,0,0,.2);
}
.aiken-marker.is-active .dot{
  background: #454545 !important;
  border-color:#b96900;
  transform: scale(1.15);
  box-shadow: 0 0 0 2px rgba(0,0,0,.25);
}
#asset-details a.link {
    color: #23b8ce;
    background-color: #fff;
    padding: 12px 21px;
    text-decoration: none;
    margin-top: 11px;
    display: inline-block;
    width: 60%;
    text-align: center;
}
#asset-details a.link:hover {
    color: #fff;
    background-color: #ea722d;
}
#asset-details a.email-link {
    color: #23b8ce;
    background-color: #fff;
    padding: 12px 21px;
    text-decoration: none;
    margin-top: 0;
    display: inline-block;
    width: 60%;
    text-align: center;
}
#asset-details a.email-link:hover {
    color: #fff;
    background-color: #ea722d;
}


/* Responsive */
@media screen AND (min-width: 1500px) {
    .asset-list {
        width: 22%;
    }
    .asset-details {
        width: 20%;
        padding: 32px;
    }
}
@media screen AND (max-width: 1499px) {
    .asset-list {
        width: 18%;
    }
    .asset-details {
        width: 20%;
    }
}
@media screen AND (max-width: 1199px) {
    .asset-list {
        width: 25%;
    }
    .asset-details {
        width: 20%;
    }
    
}
@media screen AND (max-width: 991px) {
    .asset-list {
        width: 100%;
        position: static;
    }
    .asset-details {
        width: 100%;
        position: static;
    }
    #asset-details a.link,
    #asset-details a.email-link {
        width: 100%;
    }
}
@media screen AND (max-width: 768px) {
    
}