/*
====================================================
ULEZ MAP PRO

File:
buttons.css

Purpose:
Enterprise Button System

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






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


.ulez-btn-primary{


    display:inline-flex;


    align-items:center;


    justify-content:center;


    gap:8px;


    padding:14px 30px;


    background:#0066ff;


    color:#ffffff !important;


    border-radius:12px;


    font-size:16px;


    font-weight:600;


    text-decoration:none !important;


    border:none;


    cursor:pointer;


    transition:


    all .3s ease;


    box-shadow:


    0 8px 20px rgba(0,102,255,0.25);


}





.ulez-btn-primary:hover{


    background:#004ecc;


    transform:translateY(-3px);


    box-shadow:


    0 12px 25px rgba(0,102,255,0.35);


}









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


.ulez-btn-secondary{


    display:inline-flex;


    align-items:center;


    justify-content:center;


    gap:8px;


    padding:14px 30px;


    background:#ffffff;


    color:#0066ff !important;


    border-radius:12px;


    font-size:16px;


    font-weight:600;


    text-decoration:none !important;


    border:2px solid #0066ff;


    transition:


    all .3s ease;


}





.ulez-btn-secondary:hover{


    background:#0066ff;


    color:#ffffff !important;


    transform:translateY(-3px);


}









/* ==============================
Large CTA Button
============================== */


.ulez-cta-button{


    padding:16px 40px;


    font-size:18px;


    border-radius:14px;


}









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


.ulez-btn-small{


    padding:10px 18px;


    font-size:14px;


    border-radius:8px;


}









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


.ulez-btn-outline{


    background:transparent;


    border:2px solid #ffffff;


    color:white !important;


}





.ulez-btn-outline:hover{


    background:white;


    color:#0066ff !important;


}









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


@media(max-width:768px){



    .ulez-btn-primary,

    .ulez-btn-secondary{


        width:100%;


        padding:14px 20px;


    }


}