*{
box-sizing:border-box;
margin:0;
padding:0;
}

/* GLOBAL BACKGROUND */

html{
height:100%;
background:#0f1b2d;
}

body{
min-height:100%;
background:
linear-gradient(
135deg,
#0b1626 0%,
#122743 40%,
#1c3f6e 70%,
#274e86 100%
);

font-family:'Segoe UI',Arial,sans-serif;
color:white;
display:flex;
flex-direction:column;
overscroll-behavior:none;
}

/* TEXTURE */

body::before{
content:"";
position:fixed;
inset:0;
background-image:url("https://www.transparenttextures.com/patterns/asfalt-dark.png");
opacity:0.15;
pointer-events:none;
}

/* MAIN CONTAINER */

.page{
flex:1;
display:flex;
align-items:center;
justify-content:center;
padding:20px;
}

/* LOADING SPINNER */

.spinner{
width:20px;
height:20px;
border:3px solid rgba(255,255,255,0.2);
border-top:3px solid #ffc107;
border-radius:50%;
margin:6px auto;
animation:spin 0.8s linear infinite;
}

@keyframes spin{
to{transform:rotate(360deg);}
}

/* GRID */

.main-grid{
width:100%;
max-width:1200px;
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
align-items:start;
}

/* BOXES */

.grid-box-search,
.grid-box-list{
background:rgba(255,255,255,0.04);
padding:25px;
border-radius:14px;
backdrop-filter:blur(4px);
}

/* TITLES */

h1{
font-size:28px;
margin-bottom:20px;
text-align:center;
}

.grid-box-list h2{
text-align:center;
margin-bottom:20px;
}

/* BANNER */

.beta-banner {
  width: 100%;
  background: #e6f0ff;
  color: #1a3d7c;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;

  padding: 10px;
  font-size: 14px;
  font-weight: 500;

  border-bottom: 1px solid rgba(0,0,0,0.1);

  /* ✨ animación */
  transform: translateY(-100%);
  opacity: 0;
  animation: slideDown 0.4s ease forwards;
}

.beta-close {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: #1a3d7c;
}

.beta-close:hover {
  opacity: 0.7;
}

/* animación */
@keyframes slideDown {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* INPUT */

.input-container{
display:flex;
gap:10px;
margin-bottom:15px;
}

#badgeInput{
flex:1;
padding:12px;
border-radius:8px;
border:none;
font-size:16px;
outline:none;
}

.button{
padding:12px 20px;
background:#ff9800;
border:none;
border-radius:8px;
color:white;
font-weight:600;
cursor:pointer;
transition:.2s;
}

.button:hover{
background:#e68900;
transform:scale(1.03);
}

/* RESULT */

#result{
margin-top:15px;
text-align:center;
}

#result.with-background{
background:rgba(255,255,255,0.06);
padding:20px;
border-radius:12px;
}

#result img{
width:90px;
margin-bottom:10px;
}

#result h2{
margin-bottom:5px;
font-size:20px;
}

#result p{
color:#ffc107;
font-weight:bold;
}

/* BADGE GRID */

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
gap:15px;
}

.badge{
background:rgba(255,255,255,0.05);
padding:12px;
border-radius:10px;
text-align:center;
cursor:pointer;
transition:.2s;
}

.badge:hover{
background:rgba(255,255,255,0.15);
transform:translateY(-3px);
}

.badge img{
width:60px;
margin-bottom:6px;
}

.badge h3{
font-size:14px;
margin-bottom:4px;
}

.badge p{
font-size:13px;
color:#ffc107;
}

/* HOTEL SELECTOR */

.hotel-selector{
display:flex;
gap:8px;
justify-content:center;
margin-bottom:15px;
flex-wrap:wrap;
}

.hotel-selector img{
width:32px;
cursor:pointer;
opacity:0.6;
transition:0.2s;
border-radius:4px;
}

.hotel-selector img:hover{
transform:scale(1.1);
opacity:1;
}

.hotel-selector img.active{
opacity:1;
outline:2px solid #ffc107;
}

/* DESKTOP KEKO */

.keko{
position:fixed;
bottom:15px;
left:15px;
width:80px;
z-index:100;
}

/* FOOTER */

footer{
text-align:center;
padding:10px;
font-size:13px;
color:#aaa;
}

/* TABLET */

@media(max-width:900px){

.main-grid{
grid-template-columns:1fr;
gap:25px;
}

}

/* MOBILE */

@media(max-width:700px){

.page{
align-items:flex-start;
}

h1{
font-size:24px;
}

.input-container{
flex-direction:column;
}

.button{
width:100%;
}

#badgeInput{
width:100%;
}

.badge img{
width:50px;
}

#result img{
width:70px;
}

/* KEKO AT THE END */

.keko{
position:static;
display:block;
margin:20px auto 5px auto;
width:80px;
}

footer{
margin-top:5px;
}

}