:root{
    --bg: #f5f6f7;
    --card: #ffffff;
    --muted: #8b9096;
    --accent: #2f3640;
    --soft-shadow: 0 6px 18px rgba(20,20,20,0.06);
    --online: #38b000;
    --offline: #d6336c;
    --surface-2: #f1f3f5;
    --link-blue: #2874ea;
    --primary: #1f6feb;
    --success-soft: rgba(56,176,0,0.12);
    --fail-soft: rgba(214,51,108,0.08);
}

.glass-card {
    background: rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(17px) !important;
    -webkit-backdrop-filter: blur(7px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -1px 0 rgba(255, 255, 255, 0.1),
        inset 0 0 30px 15px rgba(255, 255, 255, 1.5) !important;
    position: relative;
    overflow: hidden;
}

.glass-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.8),
        transparent
    );
}

.glass-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.8),
        transparent,
        rgba(255, 255, 255, 0.3)
    );
}


.device *{box-sizing:border-box}
.device {
    margin:0;
    font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    border-top-left-radius: 18px;
    border-bottom-left-radius: 18px;
    width:340px !important;
    background:var(--card);
    box-shadow:var(--soft-shadow);
    padding:18px;overflow:scroll;
    display:flex;
    flex-direction:column;
    gap:12px
}
.device header{
    display:flex;
    gap:2px;
    align-items:flex-start;
    justify-content:space-between
}
.title-wrap{
    display:flex;
    flex-direction:column;
}
.device h1{
    margin: 0;
    line-height: 1.15;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size:18px !important;
    font-weight:700;
    color:var(--accent)
}
.sub{
    font-size: 13px;
    margin-top: 6px;
    color: var(--muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight:500
}

.status{align-self: center; display:inline-flex;gap:8px;align-items:center;padding:8px 12px;border-radius:999px;font-weight:600;font-size:13px;background:var(--surface-2)}
.status .dot{width:10px;height:10px;border-radius:50%}
.status.online .dot{background:var(--online)} .status.offline .dot{background:var(--offline)}

.address{background:linear-gradient(180deg,var(--card),#fbfbfb);padding:12px;border-radius:12px;box-shadow:0 4px 12px rgba(20,20,20,0.04);color:var(--muted);font-size:14px;line-height:1.4}
.links{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap; justify-content: space-around}
.link-item{
    display:inline-flex;
    gap:8px;
    align-items:center;
    font-weight:600;
    color:var(--link-blue);
    text-decoration:none;
    font-size:13px;
    padding:6px 0;
    border-radius:8px
}
.link-item .fa{width:16px;text-align:center}
.rating{background:#eef3ff;padding:6px 8px;border-radius:8px;font-weight:700;color:#16335b;font-size:13px}
.revcount{font-size:12px;color:var(--muted);margin-left:2px}

/* Restore subtle shadow for connector cards and keep compact spacing */
.connectors{margin-top:6px;display:flex;flex-direction:column;gap:8px}
.connectors .connector{
    cursor: pointer;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:8px;border-radius:12px;
    background:var(--surface-2);
    box-shadow:0 2px 8px rgba(20,20,20,0.02)
}
.conn-left{display:flex;gap:10px;align-items:center;min-width:0}
.conn-left .fa{font-size:16px;width:36px;height:36px;border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 6px rgba(20,20,20,0.04)}
.conn-name{font-weight:700;font-size:14px;color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.conn-sub{font-size:12px;color:var(--muted)}
.conn-right{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.power{font-weight:700; color: #202121}
.price{font-weight:600;color:var(--muted);font-size:13px}

/* comments */
.comments-wrap{margin-top:8px}
.comments-title{font-weight:700;color:var(--accent);margin-bottom:8px}
.comments-list{display:flex;flex-direction:column;gap:8px;max-height:140px;overflow:scroll;transition:max-height .26s ease; margin-top: 12px}
.comments-list.expanded{max-height:420px}
.comment{display:flex;gap:10px;align-items:flex-start;padding:8px;border-radius:10px;background:#fff;border:1px solid rgba(20,20,20,0.02);box-shadow:0 2px 6px rgba(20,20,20,0.03)}
.comment .status-dot{width:10px;height:10px;border-radius:50%;margin-top:6px;flex-shrink:0;opacity:0.95}
.comment.success .status-dot{background:var(--online);box-shadow:0 0 0 6px var(--success-soft) inset}
.comment.fail .status-dot{background:var(--offline);box-shadow:0 0 0 6px var(--fail-soft) inset}
.comment .body{display:flex;flex-direction:column;min-width:0}
.comment .meta{font-size:12px;color:var(--muted);margin-bottom:4px}
.comment .text{font-size:13px;color:var(--accent);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}
.comment .check-in {
    margin-top: 2px;
    margin-bottom: 2px;
}
.more-toggle{margin-top:8px;background:transparent;border:none;color:var(--link-blue);font-weight:700;cursor:pointer;padding:6px}

/* photos: horizontal grid with up to 10 thumbs */
.photos-wrap{margin-top:8px}
.photos-scroll{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch}
.thumb{flex:0 0 auto;width:86px;height:86px;border-radius:8px;background:linear-gradient(135deg,#f6f7f8,#fff);display:flex;align-items:center;justify-content:center;color:var(--muted);font-weight:700;border:1px solid rgba(20,20,20,0.02);box-shadow:0 3px 8px rgba(20,20,20,0.04);position:relative}
.thumb .ix{position:absolute;left:8px;top:6px;background:rgba(0,0,0,0.06);padding:2px 6px;border-radius:6px;font-size:11px}
.thumb img{width:100%;height:100%;object-fit:cover;border-radius:8px}

/* lightbox */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,0.65);display:none;align-items:center;justify-content:center;padding:20px}
.lightbox.open{display:flex}
.lightbox img{max-width:96%;max-height:90%;border-radius:8px;box-shadow:0 10px 40px rgba(0,0,0,0.6)}

/* amenities: kept below */
.amenities-wrap{margin-top:8px}
.amenities-scroll{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px; -webkit-overflow-scrolling:touch}
.amenity-pill{flex:0 0 auto;min-width:130px;max-width:200px;background:transparent;border-radius:10px;padding:8px 10px;display:flex;align-items:center;gap:10px}
.amenity-icon{width:36px;height:36px;border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 8px rgba(20,20,20,0.04)}
.amenity-meta{display:flex;flex-direction:column;min-width:0}
.amenity-type{display:-webkit-box;-webkit-line-clamp:1; -webkit-box-orient: vertical; overflow: hidden;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:0.6px}
.amenity-name{font-weight:700;font-size:13px;color:var(--accent);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}
.amenity-sub{font-size:12px;color:var(--muted)}
.amenity-rating{margin-left:auto;background:#f3f5f7;padding:6px 8px;border-radius:8px;font-weight:700;font-size:13px;color:var(--accent)}

.actions{display:flex;gap:10px;margin-top:8px}
.action-btn{width:44px;height:44px;border-radius:10px;background:var(--card);display:inline-grid;place-items:center;box-shadow:0 6px 12px rgba(20,20,20,0.04);cursor:pointer}

footer{margin-top:auto;color:var(--muted);font-size:12px;display:flex;align-items:center;justify-content:space-between}

@media (max-width:420px){.device{width:92vw;height:92vh}}

.map-label {
    cursor: pointer;
    background:#fff;
    padding:6px 10px;
    width: 150px;
    border-radius:6px;
    box-shadow:0 2px 6px rgba(0,0,0,0.2)
}
.map-label img {
    width: 100%;
}
.map-label a {
    text-decoration:none;
    color:#000;
}

.s-bnt i {
    background-color: #fcfcfc;
    border-radius: 5px;
    padding: 10px;
    cursor: pointer;
    margin: 6px;
    box-shadow: 0 5px 10px rgba(200, 200, 200, 0.35) !important;
}

.s-bnt i:hover {
    background-color: #f7f7f7 !important;
}

.s-bnt i:active {
    box-shadow: inset 0 3px 3px rgba(150, 150, 150, 0.3) !important;
}

.popup {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: #222;
    color: #fff;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    z-index: 9999;
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.3s, transform 0.3s;
}
.fade-enter {
    opacity: 0;
    transform: translateY(20px);
}
.fade-leave-to {
    opacity: 0;
    transform: translateY(20px);
}

.fc-btn {
    background-color: #FCFCFC;
    width: 30px;
    text-align: center;
    padding: 4px;
    cursor: pointer;
    box-shadow: 0 5px 5px rgba(100, 100, 100, 0.3);
    color: #917f7f;
    border: 0;
    border-radius: 6px;
    font-weight: bold;
}


.fc-btn:active {
    box-shadow: inset 0 3px 3px rgba(150, 150, 150, 0.3) !important;
}


.map-filter-btn {
    background-color: #3b3a3a;
    width: 40px;
    text-align: center;
    padding: 10px 4px;
    cursor: pointer;
    box-shadow: 0 8px 10px rgba(0, 0, 0, 0.3);
    position: absolute;
    bottom: 15px;
    right: 15px;
    color: #CFCFCF;
    border-radius: 6px;
    font-weight: bold;
}
.map-filter-btn {
    top: 15px !important;
    bottom: auto;
}


#filter-indicator {
    width: 10px;
    height: 10px;
    background: yellow;
    border-radius: 50%;
    position: absolute;
    top: 9px;
    margin-left: -3px;
}


.plug-tags {
    display: flex;
    flex-wrap: wrap;
    margin-top: 6px;
}
.plug-tags button {
    margin: 4px;
    padding: 6px 10px;
    border: 1px solid #ccc;
    background: #f9f9f9;
    cursor: pointer;
    border-radius: 4px;
    font-size: 13px;
}
.plug-tags button.active {
    background: #ffc107; /* yellow */
    border-color: #ffb300;
    color: #000;
}

.slider-labels {
    display: flex;
    justify-content: space-between;
    width: calc(100% + 30px);
    margin: 5px;
    margin-left: -15px;
}

.vue-slider-process {
    transform: translate(0%, -40%);
    background-color: #ffd333 !important;
    border-radius: 0;
    height: 15px !important;
}

.p-label {
    text-align: center;
    width: 30px;
    font-size: 13px;
}

.map-container { position: relative; }
#map { width: 100%; height: 500px; }

/* Cluster bubble */
.cluster-bubble {
    min-width: 35px;
    min-height: 35px;
    padding: 8px;
    border-radius: 999px;
    background: #79a0c2;
    color: #fff;
    font-weight: 700;
    text-align: center;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,.3);
    user-select: none;
}

/* PNG pin + label container */
.pin-wrap {
    position: relative;
    transform: translate(-50%, -100%); /* tip on location */
    will-change: transform;
}

/* PNG image (retina-safe sizing; adjust as needed) */
.pin-img {
    width: 36px;
    height: 36px;
    display: block;
}

/* Label pill */
.pin-label {
    position: absolute;
    left: 50%;
    top: -8px;              /* sit above the pin head */
    transform: translate(-50%, -100%);
    background: rgba(0,0,0,.75);
    color: #fff;
    font-size: 11px;
    line-height: 1;
    padding: 4px 6px;
    border-radius: 6px;
    white-space: nowrap;
    backdrop-filter: saturate(140%) blur(2px);
}

.pin-off {
    /*background: rgb(154, 154, 154);*/
    background: rgba(56, 56, 56, 0.35);
}

.pin-wrap:hover {
    z-index: 9999999;
}

/* Offcanvas */
.offcanvas {
    position: absolute; right: 0; top: 0; width: 350px; height: 100%;
    background: #fff; border-left: 1px solid #e5e7eb; padding: 1rem;
    box-shadow: -2px 0 8px rgba(0,0,0,.05);
}
.offcanvas-2 {
    width: 280px;
}
.offcanvas-ft {
    position: absolute; left: 0; top: 0; width: 350px; max-width: 100%; height: 100%;
    background: #fff; border-left: 1px solid #e5e7eb; padding: 1rem;
    box-shadow: -2px 0 8px rgba(0,0,0,.05);
}

.slide-enter-active, .slide-leave-active { transition: transform .25s ease; }
.slide-enter { transform: translateX(100%); }
.slide-leave-to { transform: translateX(100%); }

.slide2-enter-active, .slide2-leave-active { transition: transform .25s ease; }
.slide2-enter {
    transform: translateX(-100%); /* enter from right */
}
.slide2-leave-to {
    transform: translateX(-100%); /* leave to left */
}

.text-description {
    text-align: justify;
}
h1 {
    font-size: 23px !important;
}
.offers a {
    color: slategray;
}