/* From Uiverse.io by ahmed_8975. User-provided reference retained in third_party/uiverse/. */
.gl-checkbox { position: relative; display: inline-flex; align-items: center; gap: .85rem; cursor: pointer; user-select: none; font-family: var(--sj-font-body); }
.gl-checkbox__input { position: absolute; inset-inline-start: 0; inline-size: 22px; block-size: 22px; margin: 0; opacity: 0; }
.gl-checkbox__box { inline-size: 22px; block-size: 22px; min-inline-size: 22px; border-radius: 7px; background: var(--sj-surface); backdrop-filter: blur(10px); border: 1px solid var(--sj-border); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; transition: background .3s ease, border-color .3s ease, box-shadow .3s ease, transform .35s cubic-bezier(.34,1.56,.64,1); }
.gl-checkbox__box::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at center, color-mix(in srgb,var(--sj-pink) 35%,transparent), transparent 70%); opacity: 0; transform: scale(0); transition: opacity .3s ease, transform .4s ease; }
.gl-checkbox:hover .gl-checkbox__box { border-color: var(--sj-primary); transform: scale(1.06); }
.gl-checkbox__input:checked ~ .gl-checkbox__box { background: linear-gradient(135deg,var(--sj-primary),var(--sj-pink)); border-color: transparent; box-shadow: 0 0 0 3px color-mix(in srgb,var(--sj-pink) 15%,transparent), 0 4px 14px color-mix(in srgb,var(--sj-pink) 30%,transparent); transform: scale(1.05); }
.gl-checkbox__input:checked ~ .gl-checkbox__box::before { opacity: 1; transform: scale(1.5); }
.gl-checkbox__check { inline-size: 13px; block-size: 13px; color: var(--sj-surface); stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .3s cubic-bezier(.34,1.56,.64,1) .05s; }
.gl-checkbox__input:checked ~ .gl-checkbox__box .gl-checkbox__check { stroke-dashoffset: 0; }
.gl-checkbox__label { font-size: .9rem; font-weight: 400; color: var(--sj-muted); transition: color .25s ease; }
.gl-checkbox:hover .gl-checkbox__label, .gl-checkbox__input:checked ~ .gl-checkbox__label { color: var(--sj-text); }
.gl-checkbox__input:focus-visible ~ .gl-checkbox__box { outline: 2px solid var(--sj-primary); outline-offset: 3px; }
.gl-checkbox__input[aria-invalid="true"] ~ .gl-checkbox__box { border-color: var(--sj-error); }
.gl-checkbox:has(:disabled) { opacity: .6; cursor: not-allowed; }
.shop .gl-checkbox.confirmation-label input { inline-size: 22px; block-size: 22px; }
@media (prefers-reduced-motion: reduce) { .gl-checkbox *, .gl-checkbox__box::before { transition: none; } .gl-checkbox:hover .gl-checkbox__box, .gl-checkbox__input:checked ~ .gl-checkbox__box { transform: none; } }