/*
====================================================
ULEZ POSTCODE CHECKER CSS

Version: 1.0.2

====================================================
*/


.ulez-checker-wrapper {

    max-width:900px;

    margin:40px auto;

    padding:20px;

}




.ulez-checker-box {


    background:#ffffff;

    border-radius:16px;

    padding:35px;

    box-shadow:
    0 10px 30px rgba(0,0,0,0.08);

    margin-bottom:40px;

}





.ulez-checker-box h1 {


    font-size:34px;

    line-height:1.3;

    margin-bottom:15px;

    color:#111827;


}





.ulez-intro {


    font-size:17px;

    line-height:1.7;

    color:#555;

    margin-bottom:25px;


}







.ulez-form label {


    display:block;

    font-weight:600;

    margin-bottom:8px;

    color:#222;


}







.ulez-input-group {


    display:flex;

    gap:15px;

    align-items:center;


}







#ulez-postcode-input {


    flex:1;

    height:52px;

    padding:0 18px;

    border:1px solid #ddd;

    border-radius:8px;

    font-size:16px;

}





#ulez-postcode-input:focus {


    outline:none;

    border-color:#0b7a3b;

}





#ulez-postcode-btn {


    height:52px;

    padding:0 30px;

    border:none;

    border-radius:8px;

    background:#0b7a3b;

    color:#ffffff;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:.2s;


}





#ulez-postcode-btn:hover {


    background:#075c2d;


}





#ulez-postcode-btn:disabled {


    opacity:.6;

    cursor:not-allowed;


}








.ulez-result {


    margin-top:25px;


}







/*
RESULT CARD
*/


.ulez-result-card {


    padding:25px;

    border-radius:12px;

}





.ulez-result-card h3 {


    margin-top:0;

    font-size:24px;


}





.ulez-result-card p {


    margin:15px 0;

    color:#444;

    line-height:1.6;


}







/*
INSIDE ULEZ
*/


.ulez-success {


    background:#f0fff6;

    border-left:5px solid #0b7a3b;


}





.ulez-success h3 {


    color:#0b7a3b;


}







/*
OUTSIDE ULEZ
*/


.ulez-outside {


    background:#fff7ed;

    border-left:5px solid #ea580c;


}





.ulez-outside h3 {


    color:#c2410c;


}







/*
LOADING
*/


.ulez-loading {


    background:#f8f8f8;

    padding:20px;

    border-radius:10px;

    text-align:center;

    color:#555;


}







/*
ERROR
*/


.ulez-error {


    background:#fff5f5;

    border-left:5px solid #dc2626;

    padding:20px;

    border-radius:10px;

    color:#991b1b;


}







/*
SEO CONTENT
*/


.ulez-content {


    font-size:17px;

    line-height:1.8;

    color:#333;


}





.ulez-content h2 {


    margin-top:45px;

    font-size:28px;

    color:#111827;


}





.ulez-content h3 {


    margin-top:30px;

    font-size:21px;

    color:#222;


}





.ulez-content li {


    margin-bottom:10px;


}







/*
MOBILE
*/


@media(max-width:700px){



    .ulez-checker-wrapper {


        padding:10px;


    }




    .ulez-checker-box {


        padding:22px;


    }




    .ulez-checker-box h1 {


        font-size:26px;


    }





    .ulez-input-group {


        flex-direction:column;


    }




    #ulez-postcode-input,

    #ulez-postcode-btn {


        width:100%;


    }



}

/*
====================================================
ULEZ INTERNAL LINK CARDS
====================================================
*/


.ulez-tools-section {

    margin-top:50px;

}



.ulez-tools-section h2 {

    margin-bottom:25px;

}





.ulez-card-grid {

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(230px,1fr));

    gap:20px;

    margin-top:25px;

}





.ulez-tool-card {

    background:#ffffff;

    border-radius:14px;

    padding:25px;

    text-decoration:none;

    color:#333;

    border:1px solid #e5e7eb;

    box-shadow:
    0 8px 25px rgba(0,0,0,0.06);

    transition:all .3s ease;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

}





.ulez-tool-card:hover {

    transform:translateY(-5px);

    box-shadow:
    0 15px 35px rgba(0,0,0,0.12);

}





.ulez-tool-card h3 {

    margin-top:0;

    margin-bottom:12px;

    font-size:21px;

    color:#0b7a3b;

}





.ulez-tool-card p {

    font-size:15px;

    line-height:1.6;

    color:#555;

    margin-bottom:15px;

}





.ulez-tool-card span {

    font-weight:600;

    color:#0b7a3b;

    margin-top:auto;

}





/*
====================================================
DISCLAIMER BOX
====================================================
*/


.ulez-disclaimer {

    margin-top:50px;

    padding:30px;

    background:#f8fafc;

    border-left:5px solid #64748b;

    border-radius:12px;

}





.ulez-disclaimer h2 {

    margin-top:0;

    color:#111827;

}





.ulez-disclaimer p {

    font-size:16px;

    line-height:1.7;

    color:#444;

}





/*
====================================================
RELATED CONTENT SPACING
====================================================
*/


.ulez-content section {

    margin-bottom:40px;

}





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


@media(max-width:700px){


    .ulez-card-grid {

        grid-template-columns:
        1fr;

    }



    .ulez-tool-card {

        padding:22px;

    }



    .ulez-disclaimer {

        padding:20px;

    }


}