/* /listings/style.css */
.hotels-section { 
    position: relative; 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 
}

/* Фильтры и их состояния */
.filters-top { 
    margin: 12px 16px; 
    padding: 12px; 
    border: 1px solid #eaf7f9; 
    border-radius: 14px; 
    background: #fff; 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); 
    gap: 10px; 
    z-index: 999; 
}

.filters-top select, .filters-top button { 
    width: 100%; 
    border: 1px solid #d9eef2; 
    border-radius: 10px; 
    padding: 10px 12px; 
    font-size: 13px; 
    outline: none; 
    transition: 0.2s; 
    height: 44px; 
}

.filters-top select:focus { border-color: #33c3db; }

.btn-apply { background: #33c3db !important; color: #fff !important; border: 0 !important; font-weight: 700; cursor: pointer; }
.btn-apply:hover { background: #2bb0c7 !important; }

.btn-reset { background: #fff !important; color: #33c3db !important; border: 1px solid #33c3db !important; font-weight: 700; cursor: pointer; }

/* Sticky логика */
.filters-top.is-fixed { position: fixed; top: 90px; left: 16px; right: 16px; box-shadow: 0 6px 16px rgba(0,0,0,.12); }
.filters-top.is-bottom { position: absolute; left: 16px; right: 16px; bottom: 0; }
.filters-top-spacer { height: 0; }

/* Счетчик и Сетка */
.results-counter { margin: 0 16px 12px; font-size: 14px; color: #717171; font-weight: 500; }
.results-counter span { color: #33c3db; font-weight: 700; }

.premium-listing { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); 
    gap: 24px; 
    padding: 16px; 
    background: #fcfcfc; 
}

/* Карточка */
.premium-card { 
    background: #fff; border-radius: 18px; overflow: hidden; 
    border: 1px solid #f1f1f1; box-shadow: 0 4px 15px rgba(0,0,0,.05); 
    display: flex; flex-direction: column; transition: 0.25s; height: 100%; 
}
.premium-card:hover { transform: translateY(-6px); box-shadow: 0 12px 30px rgba(0,0,0,0.1); }

.premium-img-wrapper { position: relative; height: 200px; background: #f0f0f0; }
.premium-img { width: 100%; height: 100%; object-fit: cover; }

.stars-badge { 
    position: absolute; top: 12px; left: 12px; background: rgba(0,0,0,0.65); 
    color: #ffcc00; padding: 4px 10px; border-radius: 999px; font-size: 11px; backdrop-filter: blur(4px); 
}
.rating-badge { 
    position: absolute; top: 12px; right: 12px; background: #33c3db; 
    color: #fff; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; 
}

.premium-content { padding: 16px; flex-grow: 1; }
.type-label { font-size: 11px; text-transform: uppercase; color: #33c3db; font-weight: 700; margin-bottom: 4px; display: block; }
.premium-title { margin: 0 0 6px; font-size: 1rem; font-weight: 700; color: #1a1a1a; line-height: 1.3; }
.premium-location { color: #717171; font-size: 0.85rem; }

.premium-footer { padding: 12px 16px; border-top: 1px solid #f7f7f7; display: flex; justify-content: flex-end; }
.premium-btn { background: #33c3db; color: #fff; text-decoration: none; padding: 8px 18px; border-radius: 10px; font-weight: 600; font-size: 13px; }

/* Пагинация */
.la-more-wrap { text-align: center; padding: 30px 16px; }
.la-more-btn { background: #33c3db; color: #fff; border: 0; cursor: pointer; padding: 14px 28px; border-radius: 12px; font-weight: 700; display: none; }

.is-hidden { display: none !important; }

@media (max-width: 768px) {
    .filters-top { grid-template-columns: 1fr 1fr; }
    .filters-top.is-fixed { top: 70px; }
}

.boards-layout {
    position: absolute;
    bottom: 8px;
    left: 8px;
    display: flex;
    gap: 4px;
    z-index: 10;
}

.meal-circle {
    background: #33c3db;
    color: #fff;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    border: 1px solid #fff;
}