#hbform{
 background:#000;
 padding:25px;
 border-radius:14px;
 max-width:520px;
 margin:auto;
 box-shadow:0 20px 60px rgba(0,0,0,.6);
}

#hbform h2{
 color:#ff2a2a;
 text-align:center;
}

#hbform input,#hbform textarea{
 width:100%;
 margin:10px 0;
 padding:12px;
 background:#111;
 color:#fff;
 border:none;
 border-radius:8px;
 transition:.3s;
}

#hbform input:focus,#hbform textarea:focus{
 transform:scale(1.03);
 box-shadow:0 0 12px rgba(255,42,42,0.4);
}

.chk{
 display:flex;
 align-items:center;
 gap:10px;
 color:#fff;
 position:relative;
 cursor:pointer;
}

.chk input{
 position:absolute;
 opacity:0;
 width:100%;
 height:100%;
}

.box{
 width:20px;
 height:20px;
 border:2px solid #ff2a2a;
 border-radius:5px;
 position:relative;
 transition:.3s;
 overflow:hidden;
}

.box::before{
 content:"";
 position:absolute;
 width:100%;
 height:100%;
 background:rgba(255,42,42,0.2);
 transform:scale(0);
 border-radius:50%;
 transition:.4s;
}

.box::after{
 content:"";
 position:absolute;
 width:6px;
 height:10px;
 border:2px solid #fff;
 border-top:none;
 border-left:none;
 transform:scale(0) rotate(45deg);
 top:3px;
 left:6px;
 transition:.2s;
}

.chk:hover .box{
 box-shadow:0 0 12px rgba(255,42,42,0.9);
 transform:scale(1.1);
}

.chk input:checked + .box{
 background:#ff2a2a;
 transform:translateX(-6px) scale(1.05);
}

.chk input:checked + .box::before{
 transform:scale(2);
 opacity:0;
}

.chk input:checked + .box::after{
 transform:scale(1) rotate(45deg);
}

.chk input:checked ~ .txt{
 transform:translateX(-6px);
}

.txt{transition:.3s}

button{
 width:100%;
 padding:12px;
 background:linear-gradient(45deg,#ff2a2a,#ff6a00);
 border:none;
 color:#fff;
 border-radius:8px;
 transition:.3s;
}

button:hover{
 transform:translateY(-3px);
 box-shadow:0 10px 20px rgba(255,42,42,.4);
}


/* Submit loading state */
#hbform.is-loading{
  opacity: .6;
  pointer-events: none;
  transform: translateY(-2px);
  transition: .25s;
}
#hbform.is-loading button{
  position: relative;
}
#hbform.is-loading button::after{
  content:'';
  position:absolute;
  right:12px; top:50%;
  width:16px; height:16px;
  border:2px solid #fff;
  border-top-color: transparent;
  border-radius:50%;
  transform: translateY(-50%);
  animation: hbspin .8s linear infinite;
}
@keyframes hbspin{ to{ transform: translateY(-50%) rotate(360deg);} }

/* Toast */
.hb-toast{
  position: fixed;
  left:50%;
  bottom:24px;
  transform: translateX(-50%) translateY(20px);
  background:#111;
  color:#fff;
  padding:12px 16px;
  border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
  border:1px solid rgba(255,42,42,.5);
  opacity:0;
  transition:.3s;
  z-index:9999;
}
.hb-toast.show{
  opacity:1;
  transform: translateX(-50%) translateY(0);
}