.checkbox-container {
    display: flex;
    align-items: center;
}

.checkBox-centered {
    display: flex;
    align-items: center;
    justify-content: center;
}

.checkbox-label {
    display: inline-flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    user-select: none;
    color: var(--main-font-color); /* Matches other components (#000) */
    font-size: var(--main-font-size); /* Matches other components (14px) */
}

/* Text spacing with side-specific styles */
.checkbox-text.right-label {
    margin-left: 20px; /* Increased to match select/multiselect/input spacing */
}

.checkbox-text.left-label {
    margin-right: 20px; /* Increased to match select/multiselect/input spacing */
}

.checkbox-wrapper {
    display: inline-flex;
    position: relative;
}

.checkbox-input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkbox-custom {
    position: relative;
    height: 16px; /* Matches multiselect .option-checkbox size */
    width: 16px; /* Matches multiselect .option-checkbox size */
    background-color: var(--inputSelect-background-color); /* Matches select/multiselect/input */
    border: 1px solid var(--input-border-color); /* Matches other components */
    border-radius: var(--input-border-radius); /* Matches other components (3px) */
    transition: all 0.2s ease;
}

    /* Create the checkmark/indicator (hidden when not checked) */
    .checkbox-custom:after {
        content: "";
        position: absolute;
        display: none;
        left: 5px; /* Adjusted for smaller size */
        top: 1px; /* Adjusted for smaller size */
        width: 4px; /* Adjusted for smaller size */
        height: 9px; /* Adjusted for smaller size */
        border: solid var(--griditem-title-icon-color); /* Matches other components (#000) */
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }

/* Show the checkmark when checked */
.checkbox-input:checked ~ .checkbox-custom:after {
    display: block;
}

/* Style the checkmark/indicator when checked */
.checkbox-input:checked ~ .checkbox-custom {
    background-color: var(--inputSelect-background-color); /* Matches focus state of other components */
    border-color: var(--input-border-color); /* Matches focus state of other components */
}

/* On hover - Show red for both checked and unchecked */
.checkbox-label:hover .checkbox-input ~ .checkbox-custom {
    background-color: var(--input-background-color-hover); /* Matches other components */
    border-color: var(--input-border-color-hover); /* Matches other components */
}

/* On hover when checked - same red hover effect */
.checkbox-label:hover .checkbox-input:checked ~ .checkbox-custom {
    background-color: var(--input-background-color-hover); /* Matches other components */
    border-color: var(--input-border-color-hover); /* Matches other components */
}

    /* On hover, change the checkmark color to red */
    .checkbox-label:hover .checkbox-input:checked ~ .checkbox-custom:after {
        border-color: var(--griditem-title-icon-color); /* Matches accent color (#C8102E) */
    }

/* On focus */
.checkbox-input:focus ~ .checkbox-custom {
    box-shadow: 0 2px 4px var(--griditem-boxshadow-color); /* Matches other components */
    border-color: var(--input-border-color-hover); /* Matches other components */
}

/* On focus with hover */
.checkbox-input:focus:hover ~ .checkbox-custom {
    border-color: var(--input-border-color-hover); /* Matches other components */
}

/* On disabled */
.checkbox-input:disabled ~ .checkbox-custom {
    background-color: var(--button-disabled-background-color); /* Matches other components */
    border-color: var(--button-disabled-border-color); /* Matches other components */
    cursor: not-allowed;
    opacity: var(--button-disabled-opacity); /* Matches other components */
}

.checkbox-input:disabled ~ .checkbox-text {
    color: var(--button-disabled-font-color); /* Matches other components */
    cursor: not-allowed;
}

.checkbox-label:hover .checkbox-input:disabled ~ .checkbox-custom {
    background-color: var(--button-disabled-background-color); /* Matches disabled state */
    border-color: var(--button-disabled-border-color); /* Matches disabled state */
}