body {
    font-family: sans-serif;
}
.bottom-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #f3f4f6; /* gray-100 */
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
    z-index: 1000;
    will-change: height;
    transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

#showcase-container {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
    padding-top: 24px;
    box-sizing: border-box;
    transition: opacity 0.2s ease;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

/* --- Sheet Toggle Button --- */
.sheet-toggle-btn {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 48px;
    background-color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1001;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    border: 1px solid #e5e7eb; /* gray-200 */
}
.sheet-toggle-btn svg {
    transition: transform 0.3s ease;
    transform: rotate(180deg);
}
.bottom-sheet.collapsed .sheet-toggle-btn svg {
    transform: rotate(0deg);
}
.bottom-sheet.collapsed #showcase-container {
    opacity: 0;
    pointer-events: none;
}

/* --- Control Buttons --- */
.control-btn {
    background-color: white;
    padding: 10px;
    border-radius: 9999px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    color: #374151; /* gray-700 */
}
.control-btn.active {
    background-color: #dcfce7; /* green-100 */
    color: #166534; /* green-800 */
}
#favorites-btn-map.active {
    background-color: #fee2e2; /* red-100 */
    color: #991b1b; /* red-800 */
}


.map-control-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
    color: #374151; /* gray-700 */
}

.map-control-btn:hover {
    background-color: #f3f4f6; /* gray-100 */
}


/* ... (Toggle Switch, Filters Modal, and some Map Pin styles are unchanged) ... */
.toggle-switch { width: 40px; height: 24px; background-color: #e5e7eb; border-radius: 9999px; padding: 2px; transition: background-color 0.3s ease; cursor: pointer; }
.toggle-knob { width: 20px; height: 20px; background-color: white; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.1); transition: transform 0.3s ease; }
.toggle-switch.active { background-color: #a3e635; }
.toggle-switch.active .toggle-knob { transform: translateX(16px); }

.filters-modal {
    position: fixed;
    inset: 0;
    z-index: 6000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-out;
}
.filters-modal.filters-modal-visible {
    opacity: 1;
    pointer-events: auto;
}
.filters-modal-overlay { 
    position: absolute; 
    inset: 0; 
    background-color: rgba(0, 0, 0, 0.5); 
}
.filters-modal-content { 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background-color: white; 
    padding: 1.5rem 1.5rem 2.5rem 1.5rem; 
    border-top-left-radius: 1.5rem; 
    border-top-right-radius: 1.5rem; 
    z-index: 6001; 
    transform: translateY(100%); 
    transition: transform 0.3s ease-out; 
}
.filters-modal.filters-modal-visible .filters-modal-content { 
    transform: translateY(0); 
}

.filter-chip { padding: 8px 16px; border-radius: 9999px; background-color: #f3f4f6; font-medium: text-gray-700; cursor: pointer; transition: all 0.2s; }
.filter-chip:hover:not(:disabled) { background-color: #e5e7eb; }
.filter-chip.active { background-color: #1f2937; color: white; }
.filter-chip:disabled { opacity: 0.5; cursor: not-allowed; }

.leaflet-div-icon-custom { background: transparent; border: none; }

.map-pin { 
    width: 40px; 
    height: 40px; 
    position: relative; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
}
.map-pin::after { 
    content: ''; 
    position: absolute; 
    bottom: -6px; 
    left: 50%; 
    transform: translateX(-50%); 
    width: 0; 
    height: 0; 
    border-left: 8px solid transparent; 
    border-right: 8px solid transparent; 
    border-top: 12px solid; 
    z-index: -1; 
}
.map-pin-logo-container { 
    width: 36px; 
    height: 36px; 
    border-radius: 50%; 
    background-color: white; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    overflow: hidden; 
    position: relative; 
    z-index: 1; 
    border: 2px solid; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); 
}
.map-pin.active { color: #3b82f6; } /* blue-500 */
.map-pin-logo { width: 100%; height: 100%; object-fit: cover; }
.map-pin-logo-container span { 
    font-size: 18px; 
    font-weight: bold; 
    color: #333; 
}

.showcase-card-v2 {
    position: relative;
    width: 100%;
    height: 170px;
    border-radius: 0.75rem;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    transition: transform 0.2s ease-in-out;
}
.showcase-card-v2:hover {
    transform: translateY(-4px);
}

.card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.1) 100%);
    z-index: 1;
}

.showcase-card-v2 > * {
    position: relative;
    z-index: 2;
}

.surprise-q-mark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 6rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.2);
    z-index: 2;
}


/* --- Menu Animation --- */
#menu-container.menu-open .menu-item {
    transform: translateY(0);
    opacity: 1;
}
.menu-item {
    transform: translateY(20px);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease;
}

/* НОВЫЕ СТИЛИ для маркера пользователя */
.user-location-marker .dot {
    width: 20px;
    height: 20px;
    background-color: #007aff; /* iOS blue */
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.user-location-marker .pulse {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #007aff;
    position: absolute;
    top: 0;
    left: 0;
    animation: pulse-animation 2s infinite;
    opacity: 0;
}

@keyframes pulse-animation {
    0% {
        transform: scale(1);
        opacity: 0.7;
    }
    100% {
        transform: scale(3);
        opacity: 0;
    }
}