/* ─── Base ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

::-webkit-scrollbar          { width: 6px; height: 6px; }
::-webkit-scrollbar-track    { background: #f5f5f4; }
::-webkit-scrollbar-thumb    { background: #d6d3d1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #a8a29e; }

/* ─── Skeleton loader ───────────────────────────────────────── */
@keyframes skeleton-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position:  400px 0; }
}
.skeleton-card {
    background: linear-gradient(90deg, #f5f5f4 25%, #e7e5e4 50%, #f5f5f4 75%);
    background-size: 800px 100%;
    animation: skeleton-shimmer 1.4s infinite linear;
    border-radius: 0.75rem;
    height: 160px;
}

/* ─── Leaflet popup ─────────────────────────────────────────── */
.leaflet-popup-content-wrapper {
    border-radius: 14px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.18) !important;
    padding: 0 !important;
}
.leaflet-popup-content {
    margin: 14px 16px !important;
}
.leaflet-popup-tip-container { margin-top: -1px; }

/* ─── Cluster marker ────────────────────────────────────────── */
.custom-cluster { background: transparent; border: none; }
.cluster-icon {
    width: 36px; height: 36px;
    background: #f59e0b;
    border: 3px solid #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

/* ─── Star picker (store.php) ───────────────────────────────── */
.star-btn { cursor: pointer; line-height: 1; }
.star-btn:focus { outline: none; }

/* ─── Chain filter active ───────────────────────────────────── */
.chain-filter { transition: background .15s, color .15s; }

/* ─── Lightbox ──────────────────────────────────────────────── */
#lightbox { cursor: zoom-out; }
#lightbox-img { cursor: default; box-shadow: 0 24px 60px rgba(0,0,0,.5); }

/* ─── Smooth hover card lift ─────────────────────────────────── */
.store-card {
    transition: transform .15s ease, box-shadow .15s ease;
}
.store-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
}

/* ─── Mobile touch target for file input ────────────────────── */
input[type="file"] { max-width: 100%; }