/*
====================================================
ULEZ MAP PRO
Version : 1.7.0

File:
style.css

Purpose:
- Main layout
- Search panel
- Map styling
- Result card
- Legend
- Location button
- Mobile responsive design
====================================================
*/





/*
Main App Container
*/

.ulez-app {


    width:100%;

    max-width:1200px;

    margin:auto;

    padding:20px;


}









/*
Header
*/


.ulez-header {


    text-align:center;

    margin-bottom:25px;


}




.ulez-header h1 {


    font-size:32px;

    margin-bottom:10px;


}





.ulez-header p {


    font-size:17px;

    color:#555;


}









/*
Search Panel
*/


.ulez-search-panel {


    background:#ffffff;

    padding:20px;

    border-radius:12px;

    margin-bottom:20px;

    box-shadow:

    0 3px 12px rgba(0,0,0,0.10);


}








.ulez-search-box {


    display:flex;

    gap:10px;

    flex-wrap:wrap;


}







#ulez-search-input {


    flex:1;

    min-width:250px;

    padding:12px 15px;

    border:1px solid #ccc;

    border-radius:8px;

    font-size:16px;


}








.ulez-primary-btn {


    background:#0066ff;

    color:white;

    border:none;

    padding:12px 25px;

    border-radius:8px;

    cursor:pointer;

    font-size:16px;


}





.ulez-primary-btn:hover {


    opacity:0.85;


}









/*
Map Container
*/


.ulez-map-wrapper {


    margin-bottom:20px;


}




#ulez-map {


    width:100%;

    height:600px;

    border-radius:12px;

    overflow:hidden;


}









/*
Result Card
*/


.ulez-result-card {


    background:#ffffff;

    border-radius:12px;

    padding:20px;

    margin-top:20px;

    box-shadow:

    0 4px 15px rgba(0,0,0,0.12);

    border-left:6px solid #0066ff;


}






.ulez-result-card h3 {


    margin-top:0;

    font-size:22px;


}





.ulez-result-card p {


    font-size:16px;

    line-height:1.6;


}









/*
ULEZ Status
*/


.ulez-status {


    padding:15px;

    border-radius:8px;

    font-size:18px;

    font-weight:bold;

    margin:15px 0;


}






.ulez-status.inside {


    background:#e8f7e8;

    color:#167c16;


}





.ulez-status.outside {


    background:#ffeaea;

    color:#c40000;


}









/*
Location Button on Leaflet
*/


.ulez-location-button {


    background:#ffffff;

    border:none;

    padding:10px 15px;

    border-radius:8px;

    cursor:pointer;

    font-size:14px;

    font-weight:bold;


    box-shadow:

    0 2px 8px rgba(0,0,0,0.25);


}





.ulez-location-button:hover {


    transform:scale(1.05);


}









/*
History
*/


.ulez-history {


    background:white;

    margin-top:20px;

    padding:20px;

    border-radius:12px;

    box-shadow:

    0 3px 12px rgba(0,0,0,0.10);


}





.ulez-history h3 {


    margin-top:0;


}









/*
Popup
*/


.leaflet-popup-content {


    font-size:15px;


}









/*
Legend
*/


.ulez-legend {


    background:white;

    padding:15px;

    border-radius:10px;

    box-shadow:

    0 3px 12px rgba(0,0,0,0.25);

    line-height:1.8;

    font-size:14px;


}







.ulez-legend-item {


    display:flex;

    align-items:center;

    gap:8px;


}







.ulez-color-box {


    width:16px;

    height:16px;

    border-radius:3px;


}







.ulez-blue {


    background:#3388ff;


}






.ulez-green {


    background:green;


}






.ulez-red {


    background:red;


}









/*
Mobile
*/


@media(max-width:768px){



    .ulez-app {


        padding:10px;


    }





    .ulez-header h1 {


        font-size:24px;


    }





    .ulez-search-box {


        flex-direction:column;


    }





    #ulez-search-input {


        width:100%;


    }





    .ulez-primary-btn {


        width:100%;


    }





    .ulez-location-btn {


        width:100%;


    }





    #ulez-map {


        height:450px;


    }





    .ulez-result-card {


        padding:15px;


    }



}









/*
Leaflet Font Fix
*/


.leaflet-container {


    font-family:

    Arial,

    sans-serif;


}






/*
====================================================
ULEZ MAP PRO
Version : 1.5.0

Vehicle Checker Styling

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



/*
Vehicle Checker Container
*/


.ulez-vehicle-box {


    background:#ffffff;

    padding:25px;

    margin-top:20px;

    border-radius:12px;


    box-shadow:

    0 4px 15px rgba(0,0,0,0.12);


    border-left:6px solid #0066ff;


}





.ulez-vehicle-box h3 {


    margin-top:0;

    font-size:22px;


}








/*
Vehicle Input

*/


#ulez-vehicle-number {


    width:100%;


    padding:14px;


    font-size:16px;


    border-radius:8px;


    border:1px solid #ccc;


    box-sizing:border-box;


    margin-top:10px;


}





#ulez-vehicle-number:focus {


    outline:none;


    border-color:#0066ff;


}








/*
Vehicle Button

*/


.ulez-vehicle-button {


    margin-top:15px;


    padding:13px 25px;


    background:#0066ff;


    color:white;


    border:none;


    border-radius:8px;


    cursor:pointer;


    font-size:16px;


    font-weight:bold;


}





.ulez-vehicle-button:hover {


    background:#004ecc;


}









/*
Vehicle Result

*/


.ulez-vehicle-result {


    background:#ffffff;


    padding:20px;


    margin-top:20px;


    border-radius:12px;


    box-shadow:

    0 3px 12px rgba(0,0,0,0.12);


    font-size:16px;


}





.ulez-vehicle-result p {


    line-height:1.6;


}









/*
Mobile Vehicle Page

*/


@media(max-width:768px){



    .ulez-vehicle-box {


        padding:15px;


    }




    .ulez-vehicle-button {


        width:100%;


    }



}

/*====================================================
Camera Page
====================================================*/

.ulez-camera-page{

    max-width:1400px;

    margin:40px auto;

    padding:20px;

}



.ulez-header{

    text-align:center;

    margin-bottom:30px;

}



.ulez-header h1{

    margin-bottom:10px;

    font-size:36px;

}



.ulez-header p{

    color:#666;

}



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

.ulez-search-panel{

    margin-bottom:25px;

}



.ulez-search-box{

    display:flex;

    gap:10px;

    flex-wrap:wrap;

}



#camera-search-input{

    flex:1;

    min-width:250px;

    padding:12px 15px;

    border:1px solid #ddd;

    border-radius:6px;

    font-size:16px;

}



#camera-search-btn{

    padding:12px 30px;

    border:none;

    background:#0073aa;

    color:#fff;

    border-radius:6px;

    cursor:pointer;

}

#camera-search-btn:hover{

    background:#005d8f;

}



/*====================================================
Map
====================================================*/

.ulez-map-wrapper{

    margin-bottom:30px;

}



#camera-map{

    width:100%;

    height:600px;

    border-radius:10px;

    overflow:hidden;

    border:1px solid #ddd;

}



/*====================================================
Table
====================================================*/

.camera-table-wrapper{

    overflow-x:auto;

}



.camera-table{

    width:100%;

    border-collapse:collapse;

    background:#fff;

    box-shadow:0 2px 10px rgba(0,0,0,.08);

}



.camera-table thead{

    background:#0073aa;

    color:#fff;

}



.camera-table th{

    padding:14px;

    text-align:left;

}



.camera-table td{

    padding:12px;

    border-bottom:1px solid #eee;

    vertical-align:top;

}



.camera-table tr:nth-child(even){

    background:#fafafa;

}



.camera-table tr:hover{

    background:#f0f8ff;

}



.camera-table a{

    color:#0073aa;

    text-decoration:none;

    font-weight:600;

}



.camera-table a:hover{

    text-decoration:underline;

}



/*====================================================
Pagination
====================================================*/

.camera-pagination{

    margin-top:25px;

    text-align:center;

}



.ulez-page-btn{

    margin:4px;

    padding:8px 14px;

    border:1px solid #ddd;

    background:#fff;

    cursor:pointer;

    border-radius:5px;

}



.ulez-page-btn:hover{

    background:#0073aa;

    color:#fff;

}



.ulez-page-btn.active{

    background:#0073aa;

    color:#fff;

}



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

@media(max-width:768px){

.camera-table{

    font-size:13px;

}

.camera-table th,

.camera-table td{

    padding:8px;

}

#camera-map{

    height:420px;

}

}