*{
  box-sizing:border-box;
  font-family:'Poppins',sans-serif;
}

body{
  margin:0;
  min-height:100vh;
  background:radial-gradient(circle at top,#0f2a52,#020b1d);
  color:#fff;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow-x:hidden;
}

body::before{
  content:"✨ ⭐ ✨ ⭐ ✨";
  position:fixed;
  inset:0;
  font-size:22px;
  opacity:.12;
  display:flex;
  justify-content:space-around;
  align-items:center;
  pointer-events:none;
}

.card{
  width:92%;
  max-width:1100px;
  min-height:550px;
  padding:28px;
  border-radius:20px;
  background:linear-gradient(180deg,#0c2d5c,#081c3c);
  box-shadow:0 25px 60px rgba(0,0,0,.55);
  position:relative;
  overflow:hidden;
  
}

.card::before{
  content:"🎥";
  position:absolute;
  left:24px;
  top:150px;
  font-size:90px;
  opacity:.15;
}

.card::after{
  content:"🍿";
  position:absolute;
  right:24px;
  top:140px;
  font-size:96px;
  opacity:.15;
}

header{
  display:flex;
  align-items:center;
  gap:16px;
}

.logo{
  width:54px;
  height:54px;
  border-radius:14px;
  background:linear-gradient(135deg,#7c3aed,#22d3ee);
  display:grid;
  place-items:center;
  font-weight:600;
}

h1{
  margin:0;
  font-size:1.7rem;
}

.lead{
  margin:4px 0 0;
  opacity:.75;
  font-size:.9rem;
}

/* === map search-panel to second design === */

.search-panel{
  margin-top:32px;
}

.search-panel .row{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.search-panel input,
.search-panel select{
  padding:15px 17px;
  border-radius:12px;
  border:none;
  outline:none;
  font-size:1rem;
  min-width:180px;
}

#query{
  flex:1;
}

.btn{
  padding:14px 26px;
  border-radius:14px;
  border:none;
  cursor:pointer;
  color:#fff;
  font-size:1rem;
  background:linear-gradient(135deg,#7c3aed,#22d3ee);
  box-shadow:0 0 18px rgba(124,58,237,.55);
  transition:.25s;
}

.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 0 30px rgba(34,211,238,.7);
}

.btn.secondary{
  background:rgba(255,255,255,.12);
  box-shadow:none;
}

.meta-row{
  margin-top:8px;
}

.muted{
  opacity:.7;
  font-size:.9rem;
}

/* results look (second site style) */

.results-grid{
  margin-top:28px;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
  gap:20px;
}

.card-item{
  background:rgba(255,255,255,.08);
  border-radius:16px;
  padding:12px;
  text-align:center;
  transition:.3s;
}

.card-item:hover{
  transform:translateY(-6px);
  background:rgba(255,255,255,.14);
}

.poster{
  width:100%;
  height:240px;
  object-fit:cover;
  border-radius:12px;
}

.title{
  margin:10px 0 4px;
  font-size:.95rem;
  font-weight:600;
}

.subtitle{
  opacity:.7;
  font-size:.85rem;
}

.pagination{
  margin-top:24px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
}

.small{
  font-size:.9rem;
  opacity:.7;
}

details{
  position:absolute;
  bottom:18px;
  left:28px;
  font-size:.9rem;
}

details summary{
  cursor:pointer;
}

.loading{
  display:flex;
  gap:8px;
  opacity:.7;
}

.err{
  color:#ffdede;
  background:rgba(255,20,20,.08);
  padding:10px;
  border-radius:12px;
}

/* ---------- Search bar colorful animation ---------- */

#query{
  transition: all .25s ease;
  background:
    linear-gradient(90deg,#c219d5,#2418ff,#fff);
  padding: 14px 16px;
  font-weight: 600;
  cursor: text;
}

#query{
  background-clip: padding-box;
}

/* inner white field look */
#query,#type,#year{
  background:
    linear-gradient(#9cebe1,#ffffff) padding-box,
    linear-gradient(90deg,#7c3aed,#22d3ee,#22c55e,#f59e0b) border-box;
  border:3px solid transparent;
}

#query:focus{
  animation: glow 1.5s linear infinite;
  transform: scale(1.02);
}
#type:focus{
  animation: glow 1.5s linear infinite;
  transform: scale(1.02);
}
#year:focus{
  animation: glow 1.5s linear infinite;
  transform: scale(1.02);
}

@keyframes glow{
  0%{filter: hue-rotate(0deg);}
  100%{filter: hue-rotate(360deg);}
}

/* ---------- error animation for empty search ---------- */

.input-error{
  animation: shake .35s;
  border-color:#ff4d4f !important;
}

@keyframes shake{
  0%{transform: translateX(0)}
  25%{transform: translateX(-5px)}
  50%{transform: translateX(5px)}
  75%{transform: translateX(-5px)}
  100%{transform: translateX(0)}
}

/* ---------- search button animation ---------- */

#searchBtn{
  position: relative;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}

#searchBtn:hover{
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 0 22px rgba(134, 86, 217, 0.6);
}

.click-anim{
  animation: clickPop .25s ease;
}

@keyframes clickPop{
  0%{transform: scale(1)}
  50%{transform: scale(.92)}
  100%{transform: scale(1)}
}

/* status text animation */

.status-anim{
  animation: fadeInUp .4s ease;
  color:#ffbaba;
}

@keyframes fadeInUp{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:translateY(0)}
}

#searchBtn{
  position: relative;
  z-index: 10;
  pointer-events: auto;
}

.search-panel,
.search-panel *{
  pointer-events: auto;
}

body{
  margin: 0;
  min-height: 100vh;

  background: url("MS.jpg") no-repeat center center fixed;
  background-size: cover;

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