/*==================================================
    VELOX MODALS
==================================================*/

:root{

    --modal-width:450px;

    --modal-radius:16px;

    --modal-shadow:0 18px 50px rgba(0,0,0,.18);

    --modal-padding:20px;

    --modal-border:#ececec;

}

/*=====================================
Backdrop
=====================================*/

.modal-backdrop{

    background:rgba(0,0,0,.55);

    z-index:5000 !important;

    opacity:1 !important;

}

/*=====================================
Modal
=====================================*/

.modal{

    z-index:5010 !important;

}

.modal-dialog{

    max-width:var(--modal-width);

    margin:28px auto;

}

/*=====================================
Content
=====================================*/

.modal-content{

    border:none;

    border-radius:var(--modal-radius);

    box-shadow:var(--modal-shadow);

    overflow:hidden;

}

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

.modal-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:18px var(--modal-padding);

    border-bottom:1px solid var(--modal-border);

}

.modal-title{

    font-size:22px;

    font-weight:700;

    color:#222;

    margin:0;

    line-height:1.2;

}

/*=====================================
Close Button
=====================================*/

.btn-close{

    width:34px;

    height:34px;

    border-radius:50%;

    box-shadow:none !important;

    opacity:.7;

    transition:.2s;

}

.btn-close:hover{

    opacity:1;

    background:#f5f5f5;

}

/*=====================================
Body
=====================================*/

.modal-body{

    padding:20px;

    max-height:75vh;

    overflow-y:auto;

}

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

.modal-footer{

    padding:16px 20px;

    border-top:1px solid var(--modal-border);

}

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

.modal-search{

    position:relative;

    margin-bottom:18px;

}

.modal-search i{

    position:absolute;

    left:18px;

    top:50%;

    transform:translateY(-50%);

    font-size:20px;

    color:#666;

}

.modal-search input{

    width:100%;

    height:48px;

    border:none;

    border-radius:24px;

    background:#f5f5f7;

    padding:0 20px 0 54px;

    font-size:15px;

    outline:none;

    transition:.2s;

}

.modal-search input:focus{

    background:#fff;

    box-shadow:0 0 0 2px #E53935;

}

/*=====================================
Section Titles
=====================================*/

.modal-section{

    margin-top:18px;

}

.modal-section-title{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:14px;

}

.modal-section-title h4{

    margin:0;

    font-size:18px;

    font-weight:700;

}

/*=====================================
Address Items
=====================================*/

.address-item{

    display:flex;

    align-items:center;

    gap:14px;

    padding:14px 4px;

    border-radius:12px;

    cursor:pointer;

    transition:.2s;

}

.address-item:hover{

    background:#f8f8f8;

}

.address-icon{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    color:#333;

    flex-shrink:0;

}

.address-info{

    flex:1;

}

.address-title{

    font-size:17px;

    font-weight:600;

    color:#222;

    margin-bottom:2px;

}

.address-subtitle{

    font-size:14px;

    color:#777;

}

.address-action{

    color:#999;

    font-size:18px;

}

/*=====================================
Buttons
=====================================*/

.velox-btn-sm{

    border:none;

    background:#E53935;

    color:#fff;

    border-radius:10px;

    padding:8px 16px;

    font-size:14px;

    font-weight:600;

    transition:.2s;

}

.velox-btn-sm:hover{

    background:#cf2f2b;

}

/*=====================================
Divider
=====================================*/

.modal-divider{

    margin:18px 0;

    border-top:1px solid var(--modal-border);

}

/*=====================================
Scrollbar
=====================================*/

.modal-body::-webkit-scrollbar{

    width:6px;

}

.modal-body::-webkit-scrollbar-thumb{

    background:#d5d5d5;

    border-radius:20px;

}

.modal-body::-webkit-scrollbar-track{

    background:transparent;

}

/*=====================================
Responsive
=====================================*/

@media(max-width:768px){

    .modal-dialog{

        margin:0;

        max-width:100%;

        height:100vh;

    }

    .modal-content{

        height:100vh;

        border-radius:0;

    }

    .modal-body{

        max-height:none;

    }

}