:root {
  --ek-ui-pink: #ea5da8;
  --ek-ui-pink-2: #ff7abb;
  --ek-ui-ink: #0f1324;
  --ek-ui-stroke: rgba(255,255,255,.14);
  --ek-ui-label: rgba(246, 245, 255, .96);
  --ek-ui-soft: rgba(246, 245, 255, .72);
  --ek-ui-shadow: 0 14px 32px rgba(7, 8, 18, .28);
}

/* Global storefront checkbox polish */
body input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 1.2rem;
  height: 1.2rem;
  margin: 0;
  border-radius: .45rem;
  border: 1px solid rgba(255,255,255,.2);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 4px 12px rgba(0,0,0,.16);
  display: inline-grid;
  place-items: center;
  vertical-align: middle;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
  position: relative;
}

body input[type="checkbox"]::before {
  content: "";
  width: .32rem;
  height: .62rem;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg) scale(0);
  transform-origin: center;
  transition: transform .14s ease;
  margin-top: -1px;
}

body input[type="checkbox"]:checked {
  border-color: rgba(255,255,255,.14);
  background: linear-gradient(180deg, var(--ek-ui-pink-2), var(--ek-ui-pink));
  box-shadow: 0 0 0 4px rgba(234,93,168,.12), 0 12px 24px rgba(234,93,168,.22);
}

body input[type="checkbox"]:checked::before {
  transform: rotate(45deg) scale(1);
}

body input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(255,255,255,.08), 0 0 0 7px rgba(234,93,168,.24);
}

body label[for],
body .ui.checkbox label,
body .checkbox label {
  color: var(--ek-ui-label);
}

/* Auth page checkbox rows */
body .ek-checkbox-row,
body .ui.checkbox,
body .checkbox,
body .register form .field:has(input[type="checkbox"]),
body .login form .field:has(input[type="checkbox"]),
body form .field--checkbox {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
}

body .ek-checkbox-row,
body form .field--checkbox {
  margin: .8rem 0 1.15rem;
}

body input[type="checkbox"] + label,
body .ui.checkbox label,
body .checkbox label {
  display: inline-block;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.45;
  font-weight: 600;
  color: var(--ek-ui-label) !important;
}

body .register form .field:has(input[type="checkbox"]) label,
body .login form .field:has(input[type="checkbox"]) label {
  margin: 0 !important;
  padding: 0 !important;
}

body .register form .field:has(input[type="checkbox"]),
body .login form .field:has(input[type="checkbox"]) {
  padding: .95rem 1rem;
  border-radius: 1rem;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  border: 1px solid var(--ek-ui-stroke);
  box-shadow: var(--ek-ui-shadow);
}

body .register form .field:has(input[type="checkbox"]) .helper,
body .login form .field:has(input[type="checkbox"]) .helper,
body .register .form-text,
body .login .form-text {
  color: var(--ek-ui-soft);
}

/* Prevent duplicated accidental inline checkbox rows from stacking too tightly */
body .ui.form .field input[type="checkbox"] + label + input[type="checkbox"],
body .ui.form .field label + input[type="checkbox"] + label {
  margin-top: .55rem;
}

@media (max-width: 768px) {
  body .register form .field:has(input[type="checkbox"]),
  body .login form .field:has(input[type="checkbox"]) {
    padding: .8rem .9rem;
    gap: .7rem;
  }
}