added styles for error with dont clicked checkbox in payments modal

luckydiamond/src/assets/css/ComponentsStyles/payments-modal.css

@@ -195,6 +195,32 @@ input[type="checkbox"]:checked::before {
     margin-left: 26px;
 }
 
+.error-checkbox {
+    position: absolute;
+}
+
+.error-checkbox h2 {
+    font-size: 13px;
+    font-weight: 400;
+    color: #c52f2f;
+}
+
+.checkbox-styles input:disabled:hover {
+    animation: shake 0.6s cubic-bezier(.36, .07, .19, .97);
+}
+
+@keyframes shake {
+    0%, 100% {
+        transform: translateX(0);
+    }
+    10%, 30%, 50%, 70%, 90% {
+        transform: translateX(-4px);
+    }
+    20%, 40%, 60%, 80% {
+        transform: translateX(4px);
+    }
+}
+
 .number-card {
     margin-top: 15px;
 }

luckydiamond/src/components/PaymentsModal.vue

@@ -67,8 +67,11 @@
         <h3>Введите номер карты</h3>
         <input class="with-input" v-model="card" type="text" />
       </div>
+      <div v-if="offAgree" class="error-checkbox">
+        <h2 v-show="errorAgree">Введите сначало карту</h2>
+      </div>
       <div class="withdraw-checkbox checkbox-styles">
-        <input :disabled="offAgree" @click="agreeUser = !agreeUser" type="checkbox"/>
+        <input :disabled="offAgree" @mouseover="errorAgree = true" @mouseleave="errorAgree = false" @click="agreeUser = !agreeUser" type="checkbox"/>
         <h3>Я согласен с пользовательским соглашением.</h3>
       </div>
       <captcha-component @captchatokendata="claimCaptchaToken" :showcaptcha="agreeUser" @captchadata="closeModal"></captcha-component>
@@ -105,6 +108,7 @@ export default {
       amountWithdraw: 1,
       amountSave: 1,
       card: '',
+      errorAgree: false,
       captchaToken: null,
       clickedBtn: "",
       url: "",