/* MODAL */

.custom-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);

  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:.3s;
  z-index:9999;
}

.custom-modal.active{
  opacity:1;
  pointer-events:auto;
}
/* MODAL CONTENT */

.custom-modal-content{
  width:95%;
  max-width:520px;

  background:
  linear-gradient(
    145deg,
    rgb(5, 42, 81),
    rgb(3, 25, 48)
  );

  padding:34px;
  border-radius:28px;
  position:relative;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:
  0 30px 80px rgba(0,0,0,.45);
  animation:modalPop .35s ease;
}

/* OPEN ANIMATION */

@keyframes modalPop{

  from{
    opacity:0;
    transform:
    scale(.92)
    translateY(20px);
  }

  to{
    opacity:1;
    transform:
    scale(1)
    translateY(0);
  }

}

/* TITLE */

.custom-modal-content h2{
  color:#fff;
  font-size:2rem;
  font-weight:700;
  margin-bottom:24px;
  text-align:center;
}

/* FORM */

.custom-modal-content form{
  display:flex;
  flex-direction:column;
  gap:16px;
}

/* INPUTS */

.custom-modal-content input,
.custom-modal-content textarea{
  width:100%;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  padding:15px 18px;
  resize:none;
  outline:none;
  background:rgba(255,255,255,.05);
  color:#fff;
  font-size:.96rem;
  transition:
  border .25s ease,
  transform .25s ease,
  box-shadow .25s ease,
  background .25s ease;
}

/* PLACEHOLDER */

.custom-modal-content input::placeholder,
.custom-modal-content textarea::placeholder{
  color:rgba(255,255,255,.55);
}

/* HOVER */

.custom-modal-content input:hover,
.custom-modal-content textarea:hover{
  border-color:
  rgba(255,255,255,.22);
  background:
  rgba(255,255,255,.07);
}

/* FOCUS */

.custom-modal-content input:focus,
.custom-modal-content textarea:focus{
  border-color:#3b82f6;
  background:rgba(255,255,255,.08);
  transform:translateY(-2px);
  box-shadow:
  0 0 0 4px rgba(59,130,246,.15),
  0 10px 30px rgba(0,0,0,.25);
}

/* TEXTAREA */

.custom-modal-content textarea{
  min-height:140px;
}

/* CLOSE BUTTON */

.close-custom-modal{
  position:absolute;
  top:16px;
  right:16px;
  width:42px;
  height:42px;
  border:none;
  border-radius:50%;
  background:
  rgba(255,255,255,.08);
  color:#fff;
  font-size:18px;
  cursor:pointer;
  transition:
  transform .25s ease,
  background .25s ease;
}

.close-custom-modal:hover{
  background:rgba(239,68,68,.18);
  transform:rotate(90deg);
}

/* BUTTON */

.custom-btn{
  margin-top:8px;
  height:56px;
  border:none;
  border-radius:18px;
  cursor:pointer;
  font-size:1rem;
  font-weight:600;
  color:#fff;
  background:
  linear-gradient(
    135deg,
    #2563eb,
    #7c3aed,
    #d4af37
  );
  background-size:200% 200%;
  transition:
  transform .25s ease,
  box-shadow .25s ease,
  background-position .4s ease;
  box-shadow:
  0 15px 35px rgba(0,0,0,.25);
}

/* BUTTON HOVER */

.custom-btn:hover{
  transform:translateY(-3px);
  background-position:right center;
  box-shadow:0 20px 40px rgba(0,0,0,.35);
}

/* BUTTON CLICK */

.custom-btn:active{
  transform:scale(.98);
}


.close-custom-modal{
  position:absolute;
  top:14px;
  right:14px;
  color: #ef4444;
  background:none;
  border:none;

  font-size:22px;
  cursor:pointer;
}

/* ALERT */

.custom-alert{
  position:fixed;
  top:30px;
  right:30px;
  background:#16a34a;
  color:#fff;
  padding:14px 18px;
  border-radius:14px;
  display:flex;
  align-items:center;
  gap:10px;
  transform:translateX(140%);
  transition:.4s;
  z-index:99999;
}

.custom-alert.active{
  transform:translateX(0);
}

.hidden{
  display:none !important;
}

/* ALERT */

.custom-alert{
  position:fixed;

  top:30px;
  right:30px;

  min-width:320px;
  max-width:420px;

  padding:16px 20px;

  border-radius:18px;

  display:flex;
  align-items:center;
  gap:12px;

  color:#fff;

  transform:translateX(150%);
  transition:.4s ease;

  z-index:999999;

  box-shadow:
  0 20px 40px rgba(0,0,0,.18);
}

/* SUCCESS */

.custom-alert.success{
  background:
  linear-gradient(
    135deg,
    #16a34a,
    #22c55e
  );
}

/* ERROR */

.custom-alert.error{
  background:
  linear-gradient(
    135deg,
    #dc2626,
    #ef4444
  );
  color: white;
}

.custom-alert.active{
  transform:translateX(0);
}

.custom-alert i{
  font-size:22px;
}