/* ========== Google Font ========== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

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

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

body{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
    color:white;
    background:#070B18;
}

/* ========== Animated Background ========== */

.background{
    position:fixed;
    inset:0;
    z-index:-2;
    background:
    radial-gradient(circle at top left,#00f7ff30,transparent 30%),
    radial-gradient(circle at bottom right,#7b2cff35,transparent 30%),
    linear-gradient(135deg,#050816,#0a1128,#050816);
}

/* Floating Glow */

.background::before,
.background::after{
    content:"";
    position:absolute;
    width:350px;
    height:350px;
    border-radius:50%;
    filter:blur(90px);
    animation:float 10s ease-in-out infinite;
}

.background::before{
    background:#00f7ff50;
    top:-80px;
    left:-80px;
}

.background::after{
    background:#8f3eff50;
    right:-100px;
    bottom:-100px;
    animation-delay:4s;
}

@keyframes float{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(40px);
    }
}

/* ========== Container ========== */

.container{

    width:min(470px,92vw);
    padding:35px;
    border-radius:28px;

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(18px);

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

    box-shadow:
    0 0 30px rgba(0,255,255,.15),
    0 0 60px rgba(128,0,255,.08);

}

/* ========== Heading ========== */

.logo{

    text-align:center;
    font-size:2.4rem;
    color:#00F7FF;

    text-shadow:
    0 0 8px #00F7FF,
    0 0 20px #00F7FF;

}

.subtitle{

    text-align:center;
    margin:12px 0 30px;
    color:#b9bfd8;
    font-size:.95rem;

}

/* ========== Search Form ========== */

.weatherForm{

    display:flex;
    gap:12px;

}

.cityInput{

    flex:1;

    padding:14px 18px;

    border:none;

    border-radius:14px;

    outline:none;

    color:white;

    background:#111827;

    font-size:1rem;

    transition:.3s;

}

.cityInput::placeholder{

    color:#8d94a8;

}

.cityInput:focus{

    box-shadow:
    0 0 10px cyan;

}

/* ========== Button ========== */

.weatherForm button{

    padding:14px 22px;

    border:none;

    border-radius:14px;

    cursor:pointer;

    font-size:.95rem;

    font-weight:600;

    color:white;

    background:linear-gradient(135deg,#00F7FF,#7B2CFF);

    transition:.35s;

}

.weatherForm button:hover{

    transform:translateY(-3px);

    box-shadow:
    0 0 18px cyan,
    0 0 30px #7B2CFF;

}

/* ========== Weather Card ========== */

.weatherCard{

    margin-top:28px;

    border-radius:22px;

    padding:25px;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    animation:fade .5s;

}

@keyframes fade{

    from{

        opacity:0;
        transform:translateY(20px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

.top{

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

}

.cityName{

    font-size:1.6rem;
    font-weight:600;

}

.date{

    color:#98a0b3;
    margin-top:5px;

}

.weatherIcon{

    width:90px;

    filter:drop-shadow(0 0 15px cyan);

}

/* ========== Temperature ========== */

.temperature{

    text-align:center;

    margin:20px 0 5px;

    font-size:5rem;

    font-weight:700;

    color:#00F7FF;

    text-shadow:
    0 0 12px cyan,
    0 0 30px cyan;

}

.description{

    text-align:center;

    color:#d7def1;

    font-size:1.15rem;

    margin-bottom:28px;

    text-transform:capitalize;

}

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

.details{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:15px;

}

.detail-box{

    display:flex;

    align-items:center;

    gap:15px;

    padding:16px;

    border-radius:15px;

    background:#0f162d;

    transition:.3s;

    min-width:0;
}

.detail-box:hover{

    transform:translateY(-5px);

    box-shadow:
    0 0 15px rgba(0,255,255,.25);

}

.detail-box span{

    font-size:1.7rem;

}

.detail-box h4{

    color:#9ca4bb;
    font-size:.8rem;
    font-weight:500;

}

.detail-box p{

    font-size:1rem;
    margin-top:4px;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.detail-box div{
    min-width:0;
}

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

.errorCard{

    margin-top:25px;

    padding:16px;

    border-radius:14px;

    text-align:center;

    background:#2c1010;

    color:#ff5b5b;

    border:1px solid #ff3f3f;

}

/* ========== Hidden ========== */

.hidden{

    display:none !important;

}
.dev-panel{
    position:fixed;
    top:20px;
    left:20px;
    display:flex;
    gap:10px;
    z-index:9999;
}
.dev-panel button{
    padding:8px 12px;
}
.credit {
    position: fixed;
    bottom: 12px;
    right: 16px;
    font-size: 12px;
    color: #ffffff55;
    letter-spacing: 0.5px;
}
.locationBtn{
    width:64px;
    height:58px;

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

    border:none;
    border-radius:14px;
    cursor:pointer;

    background:linear-gradient(135deg,#00F7FF,#7B2CFF);

    transition:.3s;
}

.locationBtn:hover{

    transform:translateY(-3px);

    box-shadow:
        0 0 18px cyan,
        0 0 28px #7B2CFF;

}
.locationBtn svg{
    width:28px;
    height:28px;
    stroke-width:2.5;
}

/* ========== Loading ========== */

.loading{

    margin-top:30px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:18px;

}

.spinner{

    width:65px;
    height:65px;

    border:6px solid rgba(255,255,255,.15);

    border-top:6px solid #00F7FF;

    border-radius:50%;

    animation:spin 1s linear infinite;

}

.loading p{

    color:#cfd6ea;

    font-size:.95rem;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}