/* KARMA_PREFERENCES_V1_0_2 */

.karma-pref{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  width:100%;
  max-width:520px;
  box-sizing:border-box;
  margin:8px 0 20px;
  padding:13px 15px;
  border:1px solid rgba(20,20,20,.07);
  border-radius:17px;
  background:#f8f8f6;
  transition:
    border-color .18s ease,
    background .18s ease,
    transform .18s ease
}

.karma-pref:hover{
  border-color:rgba(20,20,20,.11);
  background:#fafaf8
}

.karma-pref__copy{
  min-width:0
}

.karma-pref__label{
  display:block;
  color:#222;
  font-size:12px;
  font-weight:650;
  letter-spacing:-.01em
}

.karma-pref__meta{
  display:block;
  margin-top:3px;
  color:#989894;
  font-size:10px;
  line-height:1.25
}

.karma-pref__stars{
  display:flex;
  flex:0 0 auto;
  align-items:center;
  gap:3px
}

.karma-pref__star{
  display:grid;
  width:31px;
  height:31px;
  padding:0;
  place-items:center;
  appearance:none;
  border:0;
  border-radius:9px;
  background:transparent;
  color:#cfcec8;
  cursor:pointer;
  font-family:inherit;
  font-size:20px;
  line-height:1;
  transition:
    color .14s ease,
    background .14s ease,
    transform .14s ease
}

.karma-pref__star:hover,
.karma-pref__star:focus-visible{
  outline:0;
  background:#f2ecdd;
  color:#c69633;
  transform:translateY(-1px)
}

.karma-pref__star.is-active{
  color:#c99733
}

.karma-pref__star.is-mine{
  background:#f5eddb
}

.karma-pref.is-sending{
  pointer-events:none;
  opacity:.65
}

.karma-pref.is-thanks{
  border-color:#dfe9df;
  background:#f7faf7
}

@media(max-width:640px){

  .karma-pref{
    gap:10px;
    margin:5px 0 16px;
    padding:11px 12px;
    border-radius:15px
  }

  .karma-pref__label{
    font-size:11px
  }

  .karma-pref__meta{
    max-width:120px;
    font-size:9px
  }

  .karma-pref__stars{
    gap:1px
  }

  .karma-pref__star{
    width:29px;
    height:29px;
    border-radius:8px;
    font-size:19px
  }

}

@media(max-width:380px){

  .karma-pref{
    display:block
  }

  .karma-pref__stars{
    margin-top:8px
  }

}


/* KARMA_PREFERENCES_V1_0_2_ZERO_STATE */

.karma-pref.is-empty .karma-pref__star{
  color:#d7a948;
}

.karma-pref.is-empty .karma-pref__meta{
  color:#756443;
  font-weight:600;
}

.karma-pref.is-empty .karma-pref__star:nth-child(1){
  animation:karma-pref-invite 3s ease-in-out infinite;
}

.karma-pref.is-empty .karma-pref__star:nth-child(2){
  animation:karma-pref-invite 3s .07s ease-in-out infinite;
}

.karma-pref.is-empty .karma-pref__star:nth-child(3){
  animation:karma-pref-invite 3s .14s ease-in-out infinite;
}

.karma-pref.is-empty .karma-pref__star:nth-child(4){
  animation:karma-pref-invite 3s .21s ease-in-out infinite;
}

.karma-pref.is-empty .karma-pref__star:nth-child(5){
  animation:karma-pref-invite 3s .28s ease-in-out infinite;
}

@keyframes karma-pref-invite{
  0%,74%,100%{
    transform:translateY(0);
  }

  80%{
    transform:translateY(-2px);
  }

  86%{
    transform:translateY(0);
  }
}

@media(prefers-reduced-motion:reduce){
  .karma-pref.is-empty .karma-pref__star{
    animation:none!important;
  }
}

/* KARMA_PREFERENCES_UX_FIX_V1_1_1 */

.karma-pref__copy{
  cursor:pointer;
  border-radius:10px;
  outline:none;
}

.karma-pref__copy:focus-visible{
  box-shadow:
    0 0 0 3px rgba(201,151,51,.16);
}

.karma-pref.is-picker-active{
  border-color:rgba(201,151,51,.34);
  background:#fffaf0;
}

.karma-pref.is-picker-active .karma-pref__meta{
  color:#7b6538;
  font-weight:650;
}

.karma-pref__star.is-invited{
  color:#c99733;
  background:#f8f0dd;
}

.karma-pref.is-picker-active .karma-pref__star{
  transform:scale(1.04);
}

@media(max-width:640px){

  .karma-pref__copy{
    min-width:0;
  }

  .karma-pref.is-picker-active{
    box-shadow:
      0 6px 24px rgba(0,0,0,.04);
  }
}