:root{
  --hb-red:#d6111e;
  --hb-red-dark:#9e0d16;
  --hb-red-glow:rgba(214,17,30,0.35);

  --hb-gold:#ddc76d;

  --hb-white:#ffffff;
  --hb-black:#000000;

  --hb-bg:#0b0b0b;
  --hb-bg-soft:#111111;

  --hb-border:rgba(255,255,255,0.12);
  --hb-border-soft:rgba(255,255,255,0.06);

  --hb-shadow:0 20px 50px rgba(0,0,0,0.45);

  --hb-radius:18px;
  --hb-radius-sm:12px;

  --hb-transition:all .25s ease;
}

/* CONTAINER */

.hb-hae{
  position:relative;

  background:
    radial-gradient(circle at top, rgba(214,17,30,0.08), transparent 60%),
    linear-gradient(180deg,var(--hb-bg),#050505);

  color:var(--hb-white);

  border:1px solid var(--hb-border);
  border-radius:var(--hb-radius);

  padding:clamp(16px,3vw,26px);

  box-shadow:var(--hb-shadow);

  backdrop-filter:blur(6px);

  transition:var(--hb-transition);
}

/* HEADER */

.hb-hae__header{
  display:grid;
  gap:12px;
  margin-bottom:14px;
}

/* SEARCH */

.hb-hae__search{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:center;
}

/* MOBILE */

@media (max-width:600px){

  .hb-hae__search{
    grid-template-columns:1fr;
  }

  .hb-hae__btn{
    width:100%;
  }

}

/* INPUT */

.hb-hae__input{
  width:100%;

  background:rgba(255,255,255,0.05);

  border:1px solid var(--hb-border-soft);
  border-radius:14px;

  padding:12px 14px;

  color:var(--hb-white);

  outline:none;

  transition:var(--hb-transition);
}

.hb-hae__input::placeholder{
  color:rgba(255,255,255,0.65);
}

.hb-hae__input:hover{
  background:rgba(255,255,255,0.08);
}

.hb-hae__input:focus{
  border-color:rgba(214,17,30,0.8);
  box-shadow:0 0 0 4px rgba(214,17,30,0.2);
}

/* BUTTON */

.hb-hae__btn{

  background:linear-gradient(
    135deg,
    var(--hb-red),
    var(--hb-red-dark)
  );

  color:var(--hb-white);

  border:0;
  border-radius:14px;

  padding:12px 18px;

  font-weight:900;
  letter-spacing:.3px;

  cursor:pointer;

  transition:var(--hb-transition);

  box-shadow:0 10px 22px var(--hb-red-glow);
}

.hb-hae__btn:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px var(--hb-red-glow);
}

.hb-hae__btn:active{
  transform:scale(.97);
}

/* META */

.hb-hae__meta{
  font-size:.92rem;
  color:rgba(255,255,255,0.75);
}

/* LIST */

.hb-hae__list{
  list-style:none;

  padding:0;
  margin:16px 0 0 0;

  display:grid;
  gap:10px;
}

/* ITEM */

.hb-hae__item{

  border:1px solid rgba(255,255,255,0.07);

  border-radius:var(--hb-radius-sm);

  background:linear-gradient(
    180deg,
    rgba(255,255,255,0.03),
    rgba(0,0,0,0.2)
  );

  transition:var(--hb-transition);

  animation:hbFade .35s ease;
}

.hb-hae__item:hover{

  border-color:rgba(221,199,109,0.4);

  transform:translateY(-2px);

  box-shadow:
    0 6px 18px rgba(0,0,0,0.35),
    0 0 0 1px rgba(221,199,109,0.25);
}

/* LINK */

.hb-hae__link{

  display:flex;

  gap:12px;

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

  padding:12px 14px;

  text-decoration:none;

  color:var(--hb-white);
}

/* TITLE */

.hb-hae__title{
  font-weight:800;
  font-size:clamp(.95rem,1vw,1.05rem);
}

/* BADGE */

.hb-hae__badge{

  font-size:.8rem;
  font-weight:900;

  color:var(--hb-gold);

  border:1px solid rgba(221,199,109,0.55);

  background:linear-gradient(
    135deg,
    rgba(221,199,109,0.15),
    rgba(221,199,109,0.05)
  );

  padding:4px 10px;

  border-radius:999px;

  white-space:nowrap;

  letter-spacing:.4px;
}

/* FOOTER */

.hb-hae__footer{

  margin-top:16px;

  display:flex;
  gap:10px;

  flex-wrap:wrap;
}

/* MORE BUTTON */

.hb-hae__more{

  border-radius:999px;

  padding:10px 16px;

  cursor:pointer;

  font-weight:900;

  background:transparent;

  color:var(--hb-white);

  border:1px solid rgba(221,199,109,0.45);

  transition:var(--hb-transition);
}

.hb-hae__more:hover{

  background:rgba(221,199,109,0.08);

  border-color:var(--hb-gold);

}

.hb-hae__more:disabled{

  opacity:.55;

  cursor:not-allowed;

}

/* STATUS */

.hb-hae__status{

  margin-top:10px;

  font-size:.92rem;

  color:rgba(255,255,255,0.7);
}

/* BUSY */

.hb-hae.is-busy{

  opacity:.9;

  pointer-events:none;

}

/* ACCESSIBILITY FOCUS */

.hb-hae__btn:focus,
.hb-hae__more:focus,
.hb-hae__link:focus{

  outline:none;

  box-shadow:0 0 0 4px rgba(214,17,30,0.2);

}

/* ANIMATION */

@keyframes hbFade{

  from{
    opacity:0;
    transform:translateY(6px);
  }

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

}