* {
    box-sizing: border-box;
}


body {
    margin: 0;

    padding: 0;

    font-family: Arial, sans-serif;

    background: #f4f6f8;

    color: #1f2937;
}


/* =========================================
   MAIN CONTAINER
========================================= */

.container {

    width: 92%;

    max-width: 800px;

    margin: 40px auto;

    background: white;

    padding: 30px;

    border-radius: 14px;

    box-shadow:
        0 5px 25px rgba(0, 0, 0, 0.08);
}


/* =========================================
   YOUR PUBLIC IP
========================================= */

.my-ip {

    text-align: center;

    padding: 25px 20px;

    margin-bottom: 30px;

    background: #f8fafc;

    border: 1px solid #e5e7eb;

    border-radius: 10px;
}


.my-ip-title {

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 1.5px;

    color: #6b7280;

    margin-bottom: 8px;
}


.my-ip-address {

    font-size: 32px;

    font-weight: 700;

    color: #2563eb;

    letter-spacing: 1px;
}


.my-ip-description {

    margin-top: 7px;

    font-size: 13px;

    color: #9ca3af;
}


/* =========================================
   IP FINDER
========================================= */

.finder {

    border-top: 1px solid #e5e7eb;

    padding-top: 25px;
}


h1 {

    text-align: center;

    margin: 0 0 8px 0;

    font-size: 30px;

    color: #374151;
}


.description {

    text-align: center;

    color: #6b7280;

    margin-bottom: 25px;

    font-size: 15px;
}


/* =========================================
   SEARCH FORM
========================================= */

form {

    display: flex;

    gap: 10px;
}


input {

    flex: 1;

    padding: 13px 15px;

    font-size: 16px;

    border: 1px solid #d1d5db;

    border-radius: 7px;

    outline: none;
}


input:focus {

    border-color: #2563eb;

    box-shadow:
        0 0 0 2px rgba(37, 99, 235, 0.1);
}


button {

    padding: 13px 24px;

    font-size: 16px;

    font-weight: 600;

    border: none;

    border-radius: 7px;

    cursor: pointer;

    background: #2563eb;

    color: white;
}


button:hover {

    background: #1d4ed8;
}


/* =========================================
   ERROR
========================================= */

.error {

    margin-top: 20px;

    padding: 12px 15px;

    background: #fee2e2;

    color: #991b1b;

    border-radius: 7px;

    font-size: 15px;
}


/* =========================================
   RESULT
========================================= */

.result {

    margin-top: 30px;

    border-top: 1px solid #e5e7eb;

    padding-top: 25px;
}


.result h2 {

    margin: 0 0 15px 0;

    font-size: 24px;

    color: #1f2937;
}


/* =========================================
   INFORMATION ROW
========================================= */

.info-row {

    display: grid;

    grid-template-columns: 180px 1fr;

    gap: 20px;

    padding: 14px 0;

    border-bottom: 1px solid #e5e7eb;

    font-size: 16px;
}


.info-row span {

    color: #6b7280;

    font-weight: 600;
}


.info-row strong {

    color: #111827;

    font-size: 17px;

    font-weight: 600;

    text-align: right;

    overflow-wrap: anywhere;
}


/* =========================================
   IP VALUE
========================================= */

.ip-value {

    color: #2563eb !important;

    font-size: 19px !important;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .container {

        width: 95%;

        margin: 20px auto;

        padding: 20px;
    }


    .my-ip-address {

        font-size: 26px;
    }


    h1 {

        font-size: 26px;
    }


    form {

        flex-direction: column;
    }


    button {

        width: 100%;
    }


    .info-row {

        grid-template-columns: 1fr;

        gap: 5px;
    }


    .info-row strong {

        text-align: left;
    }

}