/* ===== Shared Search Character panel ===== */
.cp-sp--search{
  --cp-line:rgba(159,92,246,.34);
  --cp-text:#efe8f7;
  --cp-muted:#c9bfd4;
  position:relative;
  margin:0 0 18px;
  padding:24px;
  overflow:hidden;
  border:1px solid var(--cp-line);
  border-radius:7px;
  background:
    linear-gradient(180deg, rgba(7,5,13,.78), rgba(5,4,9,.90)),
    url("../images/redesign/ui/online-search-v1.svg") center/100% 100% no-repeat;
  box-shadow:inset 0 0 30px rgba(137,70,220,.12), 0 18px 34px rgba(0,0,0,.28);
  color:var(--cp-text);
  text-align:center;
}

.cp-sp--search::before,
.cp-sp--search::after{
  content:"";
  position:absolute;
  top:-6px;
  width:18px;
  height:18px;
  border:1px solid rgba(184,126,255,.50);
  transform:rotate(45deg);
  pointer-events:none;
}

.cp-sp--search::before{ left:-6px; }
.cp-sp--search::after{ right:-6px; }

.cp-sp--search h2{
  margin:0;
  color:#f8efff;
  font-family:var(--font-title, Georgia, serif);
  font-size:1.38rem;
  font-weight:800;
  letter-spacing:.08em;
  line-height:1.15;
  text-transform:uppercase;
  text-shadow:0 2px 3px rgba(0,0,0,.78), 0 0 14px rgba(157,85,255,.22);
}

.cp-sp--search p{
  margin:10px 0 16px;
  color:var(--cp-muted);
}

.cp-sp--search .cp-sp__form{
  display:grid;
  grid-template-columns:minmax(0,1fr) 130px;
  gap:12px;
  max-width:640px;
  margin:0 auto;
}

.cp-sp--search .cp-input{
  min-width:0;
  min-height:46px;
  border:1px solid rgba(159,92,246,.30);
  border-radius:5px;
  background:rgba(5,4,10,.86);
  color:#fff;
  padding:0 14px;
  outline:none;
  box-shadow:none;
}

.cp-sp--search .cp-input::placeholder{
  color:#91869e;
}

.cp-sp--search .cp-input:focus{
  border-color:rgba(194,138,255,.70);
  box-shadow:0 0 0 3px rgba(157,85,255,.16);
}

.cp-sp--search .cp-btn{
  min-height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(159,92,246,.34);
  border-radius:5px;
  background:
    linear-gradient(180deg, rgba(124,55,198,.96), rgba(57,24,94,.96)),
    url("../images/redesign/ui/button-purple.png") center/100% 100% no-repeat;
  color:#fff;
  cursor:pointer;
  font:inherit;
  font-weight:900;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 0 16px rgba(127,67,215,.22);
}

.cp-sp--search .cp-btn:hover{
  filter:brightness(1.10);
}

.cp-sp--search .cp-btn:active{
  transform:translateY(1px);
}

@media (max-width:720px){
  .cp-sp--search{
    padding:22px 16px;
  }

  .cp-sp--search .cp-sp__form{
    grid-template-columns:1fr;
  }
}