.wc-category-navigator {
border: 1px solid #ddd;
padding: 20px;
margin-bottom: 30px;
background-color: #f9f9f9;
position: relative;
overflow: hidden; transition: all 0.3s ease-in-out;
}
.wc-category-navigator .back-button {
background-color: #007cba;
color: #ffffff;
border: none;
padding: 10px 15px;
cursor: pointer;
font-size: 14px;
border-radius: 4px;
transition: background-color 0.3s ease;
margin-bottom: 15px; }
.wc-category-navigator .back-button:hover {
background-color: #005a9e;
}
.wc-category-navigator .current-category {
font-size: 24px;
margin: 15px 0;
color: #333333;
}
.wc-category-navigator .subcategory-list {
list-style-type: none;
padding: 0;
}
.wc-category-navigator .subcategory-list li {
margin-bottom: 10px;
}
.wc-category-navigator .subcategory-list li a {
text-decoration: none;
color: #007cba;
font-size: 18px;
transition: color 0.3s ease;
}
.wc-category-navigator .subcategory-list li a:hover {
color: #005a9e;
} .loader {
border: 4px solid #f3f3f3;
border-top: 4px solid #007cba;
border-radius: 50%;
width: 24px;
height: 24px;
animation: spin 1s linear infinite;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1000;
}
@keyframes spin {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg); }
} .error-message {
color: red;
margin-top: 15px;
text-align: center;
} @media (max-width: 768px) {
.wc-category-navigator {
padding: 15px;
}
.wc-category-navigator .current-category {
font-size: 20px;
}
.wc-category-navigator .subcategory-list li a {
font-size: 16px;
}
.wc-category-navigator .back-button {
padding: 8px 12px;
font-size: 12px;
}
}