*{
  box-sizing:border-box;
}


/* =========================
   OVERLAY
========================= */

.pin-overlay{

  position:fixed;

  top:0;
  left:0;
  right:0;
  bottom:0;

  width:100%;
  min-height:100vh;

  background:
  rgba(2,6,23,.82);

  backdrop-filter:blur(10px);

  display:flex;
  justify-content:center;
  align-items:center;

  padding:18px;

  z-index:999999999;

  isolation:isolate;

}

/* =========================
   BOX
========================= */

.pin-box{

  width:100%;
  max-width:380px;

  margin:auto;

  transform:translateY(-50px);

  background:
  linear-gradient(
    180deg,
    rgba(17,24,39,.98),
    rgba(15,23,42,.98)
  );

  border:
  1px solid rgba(255,255,255,.06);

  border-radius:30px;

  padding:26px 22px;

  color:white;

  position:relative;

  box-shadow:
  0 20px 70px rgba(0,0,0,.45);

  animation:popup .25s ease;

}


/* =========================
   ICON
========================= */

.pin-transaction-icon{

  width:74px;
  height:74px;

  margin:0 auto 18px;

  border-radius:22px;

  display:flex;
  justify-content:center;
  align-items:center;

  font-size:34px;

  background:
  linear-gradient(
    135deg,
    #036b4a,
    #14705c
  );

  box-shadow:
  0 10px 35px rgba(0,212,146,.28);

}


/* =========================
   TITLE
========================= */

.pin-box h2{

  margin:0;

  text-align:center;

  font-size:24px;
  font-weight:800;

}


.pin-subtitle{

  text-align:center;

  font-size:18px;
  color:#ffffff;

  opacity:.72;

  margin-top:8px;
  margin-bottom:24px;

  line-height:1.5;

}


/* =========================
   CARD
========================= */

.pin-transaction-card{

  background:
  rgba(255,255,255,.04);

  border:
  1px solid rgba(255,255,255,.05);

  border-radius:22px;

  padding:16px;

  margin-bottom:22px;

  display:flex;
  flex-direction:column;
  gap:10px;

}


/* =========================
   ROW
========================= */

.pin-row{

  display:flex;
  justify-content:space-between;
  align-items:center;

  gap:10px;

}


.pin-row span{

  font-size:13px;

  opacity:.65;

}


.pin-row strong{

  font-size:14px;

  font-weight:700;

  text-align:right;

  word-break:break-word;

}


/* =========================
   INPUT
========================= */

#pinInput{

  width:100%;

  height:50px;

  border:none;
  outline:none;

  border-radius:20px;

  background:
  rgba(255,255,255,.05);

  border:
  1px solid rgba(255,255,255,.07);

  color:white;

  text-align:center;

  font-size:24px;
  font-weight:700;

  letter-spacing:12px;

  transition:.2s ease;

  caret-color:#00D492;

}


#pinInput:focus{

  border:
  1px solid #00D492;

  box-shadow:
  0 0 0 4px rgba(0,212,146,.12);

}


#pinInput::placeholder{

  color:
  rgba(255,255,255,.35);

  letter-spacing:normal;

  font-size:22px;

}


/* =========================
   BUTTONS
========================= */

.pin-actions{

  display:flex;

  gap:12px;

  margin-top:24px;

}


.pin-actions button{

  flex:1;

  height:50px;

  border:none;

  border-radius:18px;

  font-size:15px;
  font-weight:700;

  cursor:pointer;

  transition:.2s ease;

  color:white;

}


/* CANCEL */

#cancelPinBtn{

  background:#374151;

}


/* CONFIRM */

#confirmPinBtn{

  background:
  linear-gradient(
    135deg,
    #04533a,
    #034b3b
  );

  box-shadow:
  0 10px 25px rgba(0,212,146,.22);

}


.pin-actions button:active{

  transform:scale(.97);

}


/* =========================
   ANIMATION
========================= */

@keyframes popup{

  from{

    transform:
    translateY(18px)
    scale(.96);

    opacity:0;

  }

  to{

    transform:
    translateY(0)
    scale(1);

    opacity:1;

  }

}


/* =========================
   SMALL DEVICES
========================= */

@media(max-width:420px){

  .pin-box{

    padding:22px 18px;

    border-radius:26px;

  }

  #pinInput{

    font-size:24px;

    letter-spacing:10px;

  }

}





/* =========================
   REMOVE SAVED PASSWORD DETECTION
========================= */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{

  transition:
  background-color 999999s ease-in-out 0s;

  -webkit-text-fill-color:#fff;

  caret-color:#fff;

}