/*
==========================================================
WhoISThis
IP Intelligence
styles.css
==========================================================
*/


:root{

    --bg:#060a11;

    --panel:#101827;

    --border:rgba(255,255,255,.08);

    --text:#ffffff;

    --muted:#95a3b8;

    --accent:#4da3ff;

    --accent2:#00d4ff;

    --danger:#ff647c;

    --success:#4dff9c;

    --radius:22px;

    --shadow:
        0 25px 70px rgba(0,0,0,.5);

}



*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}



body{

    min-height:100vh;

    background:var(--bg);

    color:var(--text);

    font-family:
        Inter,
        Arial,
        sans-serif;

    overflow-x:hidden;

}



/* ======================================================
   Background Effects
====================================================== */


.bg{

    position:fixed;

    inset:0;

    z-index:-1;

    overflow:hidden;

}



.blur{

    position:absolute;

    width:600px;

    height:600px;

    border-radius:50%;

    filter:blur(160px);

    opacity:.22;

}



.blur1{

    background:#0077ff;

    top:-180px;

    left:-150px;

}



.blur2{

    background:#00d4ff;

    right:-180px;

    bottom:-200px;

}






/* ======================================================
   Header
====================================================== */


header{

    width:min(1200px,92%);

    margin:auto;

    padding:32px 0;

}



.logo{

    display:flex;

    align-items:center;

    gap:16px;

}



.logo-icon{

    width:60px;

    height:60px;

    display:grid;

    place-items:center;

    font-size:30px;

    border-radius:20px;


    background:
        linear-gradient(
            135deg,
            var(--accent),
            var(--accent2)
        );


    box-shadow:
        0 0 45px
        rgba(0,212,255,.35);

}



.logo h1{

    font-size:30px;

    font-weight:800;

}



.logo p{

    color:var(--muted);

    margin-top:5px;

}






/* ======================================================
   Hero
====================================================== */


.hero{

    width:min(900px,92%);

    margin:80px auto 50px;

    text-align:center;

}



.hero h2{

    font-size:
        clamp(42px,6vw,70px);

    line-height:1;

    font-weight:800;

    margin-bottom:22px;

}



.hero p{

    color:var(--muted);

    font-size:18px;

    line-height:1.7;

}







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


.search{

    display:flex;

    gap:15px;

    margin-top:45px;

}



.search input{

    flex:1;

    height:65px;


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


    border:

        1px solid var(--border);


    border-radius:20px;


    color:white;


    padding:0 25px;


    font-size:18px;


    outline:none;


    transition:.25s;

}



.search input::placeholder{

    color:#6f7d91;

}



.search input:focus{


    border-color:
        var(--accent);


    box-shadow:

        0 0 0 5px
        rgba(77,163,255,.15);

}



.search button{

    width:170px;


    border:none;


    border-radius:20px;


    cursor:pointer;


    color:white;


    font-weight:700;


    font-size:17px;


    background:

        linear-gradient(
            135deg,
            var(--accent),
            var(--accent2)
        );


    transition:.25s;

}



.search button:hover{

    transform:
        translateY(-3px);


    box-shadow:

        0 20px 40px
        rgba(0,212,255,.3);

}







/* ======================================================
   Examples
====================================================== */


.examples{

    margin-top:25px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    flex-wrap:wrap;

}



.examples span{

    color:var(--muted);

}



.example{

    padding:

        10px 18px;


    border-radius:999px;


    cursor:pointer;


    color:white;


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


    border:

        1px solid var(--border);


    transition:.25s;

}



.example:hover{

    border-color:
        var(--accent);


    background:
        rgba(77,163,255,.12);

}







/* ======================================================
   Results
====================================================== */


.hidden{

    display:none;

}



#results{

    width:min(1200px,94%);

    margin:

        70px auto;

}



.grid{

    display:grid;


    grid-template-columns:

        repeat(
            auto-fit,
            minmax(320px,1fr)
        );


    gap:25px;

}






.card{

    background:

        linear-gradient(
            180deg,
            rgba(255,255,255,.07),
            rgba(255,255,255,.03)
        );


    border:

        1px solid var(--border);


    border-radius:
        var(--radius);


    padding:28px;


    backdrop-filter:
        blur(18px);


    box-shadow:
        var(--shadow);


    transition:.25s;

}



.card:hover{

    transform:
        translateY(-5px);


    border-color:
        rgba(0,212,255,.35);

}



.card h3{

    margin-bottom:22px;

    font-size:20px;

}







/* ======================================================
   Data Rows
====================================================== */


.rows{

    display:flex;

    flex-direction:column;

    gap:14px;

}



.row{

    display:flex;


    justify-content:space-between;


    gap:20px;


    padding-bottom:12px;


    border-bottom:

        1px solid
        rgba(255,255,255,.06);

}



.row:last-child{

    border:none;

}



.row span{

    color:var(--muted);

}



.row strong{

    text-align:right;

    word-break:break-word;

}





.summary{

    margin-top:18px;

    list-style:none;

    color:#d8e5ff;

    line-height:1.8;

}







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


footer{

    width:min(1200px,92%);

    margin:

        80px auto 30px;


    text-align:center;


    color:var(--muted);


    font-size:14px;

}







/* ======================================================
   Mobile
====================================================== */


@media(max-width:700px){


    .search{

        flex-direction:column;

    }



    .search button{

        width:100%;

        height:60px;

    }



    .hero{

        margin-top:40px;

    }


}