.v-filter-wrap { display:flex; gap:24px; align-items:flex-start; }
.v-filter-sidebar { width:260px; min-width:260px; background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:20px; }
.v-filter-section { margin-bottom:24px; border-bottom:1px solid #f3f4f6; padding-bottom:20px; }
.v-filter-section:last-of-type { border-bottom:none; }
.v-filter-section h4 { font-size:14px; font-weight:700; color:#1f2937; margin-bottom:12px; text-transform:uppercase; letter-spacing:0.5px; }
.v-radio-label, .v-check-label { display:flex; align-items:center; gap:8px; font-size:14px; color:#374151; margin-bottom:8px; cursor:pointer; }
.v-radio-label input, .v-check-label input { accent-color:#6366f1; }
.price-inputs { display:flex; align-items:center; gap:8px; }
.price-inputs input { width:100%; border:1px solid #e5e7eb; border-radius:8px; padding:8px; font-size:13px; }
.price-inputs span { color:#9ca3af; }
.location-input { width:100%; border:1px solid #e5e7eb; border-radius:8px; padding:8px 12px; font-size:14px; box-sizing:border-box; }
.apply-btn { width:100%; background:#6366f1; color:#fff; border:none; border-radius:10px; padding:11px; font-size:14px; font-weight:600; cursor:pointer; margin-bottom:8px; transition:background 0.2s; }
.apply-btn:hover { background:#4f46e5; }
.clear-btn { display:block; text-align:center; font-size:13px; color:#ef4444; text-decoration:none; }
.clear-btn:hover { text-decoration:underline; }
.v-filter-results { flex:1; }
.grid-view { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:20px; }
.list-view { display:flex; flex-direction:column; gap:16px; }
.hostel-page-card { 
    background: #ffffff;
    border-radius: 16px;
    position: relative; 
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    width: 300px;
    max-width:100%;
    min-height: 360px;
    display: flex;
    flex-direction: column;
 }
.no-results { text-align:center; color:#9ca3af; font-size:15px; padding:40px; }

.hostel-pagination-wrap { grid-column: 1 / -1; display: flex; width: 100%; max-width: 900px; margin: 30px auto 0; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; background: #fff; border-radius: 50px; padding: 10px 20px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); box-sizing: border-box; }
.hostel-pagination { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.page-nav { font-size: 14px; font-weight: 500; color: #374151; text-decoration: none; padding: 8px 12px; border-radius: 8px; transition: background 0.2s; white-space: nowrap; }
.page-nav:hover { background: #f3f4f6; }
.page-num { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 14px; font-weight: 500; color: #374151; text-decoration: none; transition: 0.2s; flex-shrink: 0; }
.page-num:hover { background: #f3f4f6; }
.page-num.active { background: #6366f1; color: #fff; font-weight: 700; }
.page-dots { padding: 0 4px; color: #9ca3af; font-size: 14px; }
.pagination-results { font-size: 13px; color: #6b7280; white-space: nowrap; }

@media (max-width: 768px) {
    .v-filter-wrap { flex-direction: column; align-items: center; }
    .v-filter-sidebar { width: 100%; min-width: 100%; }
    .grid-view { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 20px; }
}

@media (max-width: 640px) {
    .hostel-pagination-wrap { flex-direction: column; border-radius: 20px; width: 100%; max-width: 100%; padding: 16px; }
    .hostel-pagination { justify-content: center; }
    .pagination-results { order: -1; }
}