/* General styles for color boxes */
.colorgroup-list { flex-wrap: wrap; }
.colorgroup-list-wrapper { display: block; width: 100%; overflow: hidden; }
.color-item { display: flex; align-items: center; gap: 10px; padding-left: 3px; }
.color-item:first-child { padding-top: 3px; }
.color-box-link, .color-text-link { text-decoration: none; }
.color-box-container { display: inline-block; padding: 3px; border-radius: 6px; transition: box-shadow 0.15s ease-in-out; }
.color-box { display: block; width: 34px; height: 34px; border-radius: 3px; background-clip: border-box; }
.color-item:hover .color-box-container { box-shadow: var(--wvs-hover-item-box-shadow, 0 0 0 3px #ddd); }
.color-item:hover .color-text-link { text-decoration: underline; }

/* Modal styles */
.color-modal-wrapper { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: white; z-index: 1000; overflow-y: auto; padding: 20px; }
.color-modal-wrapper.active { display: block; }
.color-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 1px solid #ddd; padding-bottom: 10px; }
.color-modal-header h2 { margin: 0; font-size: 1.5em; }
.close-modal { background: none; border: none; font-size: 1.5em; cursor: pointer; }
.color-modal-content { display: flex; flex-direction: column; gap: 10px; }

/* Button styles */
.color-filter-button-wrapper { display: none; justify-content: center; align-items: center; margin-bottom: 15px; }
.color-filter-button { padding: 10px 20px; background-color: #007bff; color: white; border: none; border-radius: 5px; font-size: 1em; cursor: pointer; }

/* Responsive */
@media (max-width: 768px) { .colorgroup-list { display: none; } .color-filter-button-wrapper { display: flex; } }
@media (min-width: 769px) { .colorgroup-list { display: flex; } .color-filter-button-wrapper { display: none; } }