/**
 * Frontend CSS for Color Category Display
 * Styles the categorized color swatches on product pages
 *
 * @package Riode_Swatch_Bridge
 */

/* Main container for categorized swatches */
.riode-categorized-swatches {
    margin: 10px 0;
}

/* Individual category wrapper */
.riode-color-category {
    margin-bottom: 10px;
}

.riode-color-category:last-child {
    margin-bottom: 0;
}

/* Category title styling */
.riode-color-category .category-title {
    font-size: calc(14px * var(--rio-typo-ratio, 1));
    color: #222;
    margin: 0 0 12px 0;
    padding: 0;
    line-height: 1.4;
    font-weight: 400;
}

/* Category swatches container - display swatches horizontally */
.riode-color-category .category-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* Ensure tooltip elements display inline */
.riode-color-category .category-swatches .tooltipplugify {
    display: inline-block;
    margin: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .riode-color-category {
        margin-bottom: 20px;
    }

    .riode-color-category .category-title {
        font-size: 14px;
        margin-bottom: 10px;
    }

    .riode-color-category .category-swatches {
        gap: 6px;
    }
}