/* *********** */
/* COMPONENT COLOUR SWATCH BUTTONS */
.ccs-component-colour-swatch button {
    padding: 1.2rem;
    margin-right: 1.2rem;
    border: solid 1px #999;
}

.ccs-component-colour-swatch .check_circle {
    margin: 0 auto;
}

    .ccs-component-colour-swatch .check_circle .umb-icon {
        color: black;
    }

.ccs-button-palette {
    margin-top: 1rem;
}

    .ccs-button-palette .btn-swatch {
        cursor: pointer;
        position: relative; /* for pseudo-element tick */
        transition: all 0.2s ease-in-out;
        border-radius: 0; 
        display: inline-block;
        width: 130px; 
        text-align: center;
        box-sizing: border-box;
    }

        /* Hover effect (optional) */
        .ccs-button-palette .btn-swatch:hover {
            transform: scale(1.05);
        }

        /* Highlight selected button with outline */
        /*.ccs-button-palette .btn-swatch.is-selected {
            outline: 3px solid #333;
            outline-offset: 2px;
        }*/

            .ccs-button-palette .btn-swatch.is-selected::after {
                content: "";
                position: absolute;
                top: 50%;
                right: 10px;
                transform: translateY(-50%);
                width: 22px;
                height: 22px;
                background-color: rgba(230, 230, 230, 0.75); /* light grey background */
                border-radius: 50%; /* circular background */
                background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23000" viewBox="0 0 512 512"><path d="M461.884 68.14c-132.601 81.297-228.817 183.87-272.048 235.345l-105.874-82.95-46.751 37.691 182.941 186.049c31.485-80.646 131.198-238.264 252.956-350.252L461.884 68.14z"/></svg>');
                background-repeat: no-repeat;
                background-position: center;
                background-size: 70%;
                pointer-events: none;
            }

    .ccs-button-palette .btn-swatch {
        padding: 0.6rem 2.5rem 0.6rem 1rem; /* extra space for tick */
        font-size: 1rem;
    }

.ccs-button-palette p {
    font-size: 0.85rem !important;
}