/* =========================
   Global Reset
========================= */

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

html{
    font-size:16px;
}

/* =========================
   Body
========================= */

body{
    min-height:100vh;
    background: linear-gradient(135deg,#0f2027,#203a43,#2c5364);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:1rem;
}

/* =========================
   Card (Glass UI)
========================= */

.card{
    width:100%;
    max-width:26rem; /* ~416px */
    background:rgba(255,255,255,0.15);
    backdrop-filter:blur(18px);
    border-radius:1.5rem;
    padding:clamp(1.5rem, 4vw, 2.2rem);
    color:#fff;
    box-shadow:0 1rem 2.5rem rgba(0,0,0,0.4);
    animation:fadeIn 0.8s ease;
    transition:transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover{
    transform:translateY(-6px);
    box-shadow:0 1.2rem 3rem rgba(0,0,0,0.55);
}

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

/* =========================
   Search Bar
========================= */

.search{
    display:flex;
    gap:0.75rem;
}

.search input{
    flex:1;
    height:3.2rem;
    border:none;
    outline:none;
    padding:0 1.3rem;
    border-radius:2rem;
    font-size:1rem;
    background:rgba(255,255,255,0.95);
}

.search input:focus{
    outline:2px solid #00feba;
}

.search button{
    width:3.2rem;
    height:3.2rem;
    border:none;
    border-radius:50%;
    background:#00feba;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:0.3s;
}

.search button:hover{
    transform:scale(1.1);
    background:#5bffa4;
}

.search button img{
    width:1.1rem;
}

/* =========================
   Weather Section
========================= */

.wheather{
    display:none;
    margin-top:1.6rem;
    text-align:center;
}

.wheather-icon{
    width:clamp(6.5rem, 35vw, 9rem);
    animation:float 3s infinite ease-in-out;
}

@keyframes float{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-10px);}
}

.wheather h1{
    font-size:clamp(2.8rem, 10vw, 4rem);
    font-weight:600;
}

.wheather h2{
    font-size:clamp(1.5rem, 6vw, 2rem);
    font-weight:400;
}

.city-container{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.6rem;
}

/* =========================
   Details
========================= */

.details{
    display:flex;
    justify-content:space-between;
    margin-top:2rem;
    padding:1.1rem;
    background:rgba(255,255,255,0.1);
    border-radius:1rem;
    gap:1rem;
}

.col{
    display:flex;
    align-items:center;
    gap:0.7rem;
}

.col img{
    width:2.1rem;
}

.humidity,.wind{
    font-size:1.3rem;
}

/* =========================
   Flag
========================= */

.flag{
    width:2.2rem;
}

/* =========================
   Error
========================= */

.error{
    display:none;
    color:#ffb3b3;
    margin-top:0.6rem;
    font-size:0.9rem;
    text-align:left;
}

/* =========================
   Footer
========================= */

.footer{
    margin-top:1.6rem;
    font-size:0.8rem;
    opacity:0.75;
    text-align:center;
}

/* =========================
   Tablet
========================= */

@media (min-width:600px){
    .card{
        max-width:28rem;
    }
}

/* =========================
   Desktop
========================= */

@media (min-width:1024px){
    .card{
        max-width:30rem;
    }
}