/* Altcha widget in the style of the form checkboxes (custom-control), colors from the Bootstrap variables of each theme */
altcha-widget {
    display: block;
    --altcha-color-base: transparent;
    --altcha-color-base-content: inherit;
    --altcha-color-neutral: var(--secondary, #002d56);
    --altcha-color-neutral-content: var(--secondary, #002d56);
    --altcha-color-primary: var(--secondary, #002d56);
    --altcha-color-success: var(--secondary, #002d56);
    --altcha-color-success-content: #fff;
    --altcha-color-error: var(--danger, #940000);
    --altcha-border-width: 0;
    --altcha-padding: 0;
    --altcha-max-width: 100%;
    --altcha-checkbox-size: 1.5rem;
    --altcha-checkbox-border-width: 3px;
    --altcha-checkbox-border-radius: 4px;
    --altcha-checkbox-border-color: var(--secondary, #002d56);
    --altcha-checkbox-outline-color: var(--secondary, #002d56);
    --altcha-input-border-radius: 4px;
    --altcha-spinner-color: var(--secondary, #002d56);
    --altcha-shadow: none;
}

/* filled box, same height as the input fields (padding + their 3px border); light on white sections, white on light ones */
altcha-widget .altcha-main {
    display: inline-flex;
    min-width: 18rem;
    max-width: 100%;
    padding: calc(.9375rem + 3px) calc(1rem + 3px);
    background-color: var(--light, #f2f2f2);
    border: 0;
    border-radius: .75rem;
    position: relative;
}

/* whole box is clickable: the label (for= checkbox) gets stretched over it */
altcha-widget .altcha-checkbox-wrap label {
    cursor: pointer;
}

/* clicking the box must not select the label text */
altcha-widget .altcha-main {
    -webkit-user-select: none;
    user-select: none;
}

altcha-widget .altcha-checkbox-wrap label::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.bg-light altcha-widget .altcha-main {
    background-color: var(--white, #fff);
}

.bg-light .bg-white altcha-widget .altcha-main {
    background-color: var(--light, #f2f2f2);
}

altcha-widget .altcha-checkbox-wrap {
    gap: 1.25rem;
}

altcha-widget .altcha-error {
    color: var(--danger, #940000);
}

/* popover (error messages, code challenge) */
altcha-widget .altcha-popover {
    --altcha-color-base: #fff;
    --altcha-border-width: 1px;
    --altcha-padding: .75rem;
    --altcha-border-radius: 4px;
    --altcha-shadow: drop-shadow(0 2px 6px rgba(0, 0, 0, .15));
    top: calc(100% + .5rem);
    left: 0;
}