/* Pagination Styling */
#hpPagination { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    gap: 5px; 
    margin-top: 20px; 
    flex-wrap: wrap; 
}

.hp-page {
    border: 1px solid #ddd;
    background: #fff;
    color: #333;
    padding: 8px 14px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
    font-weight: 500;
}

.hp-page:hover:not([disabled]) {
    background: #f0f0f0;
    border-color: #bbb;
}

.hp-page.active {
    background: #25d366;
    color: white;
    border-color: #25d366;
}

.hp-page[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.hp-dots {
    color: #999;
    padding: 0 5px;
}

.hp-table-container { 
    width:100%; 
    margin:20px 0; 
    overflow-x:auto; 
    font-family: sans-serif; 
}

/* Filter Styling */
.hp-filter-wrapper { 
    display:flex; 
    gap:10px; 
    margin-bottom:15px; 
}

#hpSearch, #hpMinPrice, #hpMaxPrice { 
    flex:1; 
    padding:12px; 
    border:1px solid #ccc; 
    border-radius:6px; 
    outline: none; 
    transition: all 0.3s ease; 
    font-size: 14px;
}

#hpSearch:focus, #hpMinPrice:focus, #hpMaxPrice:focus { 
    border-color: #25d366; 
    box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.1); 
}

/* Table Styling */
#hpTable { 
    width:100%; 
    border-collapse:collapse; 
    background:#fff; 
    border: 1px solid #ddd; 
}

#hpTable th { 
    background:#f4f4f4; 
    padding:12px; 
    border:1px solid #ddd; 
    text-align:left; 
    font-size:14px; 
}

#hpTable td { 
    padding:10px; 
    border:1px solid #ddd; 
    vertical-align:middle; 
}

.hp-nama { 
    font-weight:600; 
    font-size:16px; 
    color:#222; 
}

.hp-harga { 
    color:#27ae60; 
    font-weight:bold; 
    font-size:15px; 
}

.btn-wa {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:none;
    border:none;
    cursor:pointer;
    transition: transform 0.2s;
}

.btn-wa img {
    width:33px;
    height:33px;
}

.btn-wa:hover { 
    transform: scale(1.2); 
}

@media (max-width:600px) { 
    .hp-filter-wrapper { flex-direction:column; } 
    .hp-nama { font-size: 14px; }
    #hpTable th, #hpTable td { padding: 8px; }
}