.elementor-10570 .elementor-element.elementor-element-63ac378{--display:flex;}/* Start custom CSS for html, class: .elementor-element-869dc00 *//*==================================================
    GOOGLE FONT
==================================================*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/*==================================================
    RESET
==================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Inter',sans-serif;
    background:#ffffff;
    color:#222;
}

/*==================================================
    VARIABLES
==================================================*/

:root{

    --primary:#0F172A;
    --primary-light:#1E293B;

    --accent:#2563EB;

    --success:#16A34A;

    --text:#111827;

    --text-light:#6B7280;

    --border:#E5E7EB;

    --bg:#ffffff;

    --card:#ffffff;

    --shadow:
    0 20px 50px rgba(0,0,0,.10);

    --radius:20px;

}

/*==================================================
    HEADER LOCATION
==================================================*/

.delivery-location{

    display:flex;
    align-items:center;
    gap:14px;

    cursor:pointer;

    padding:12px 18px;

    border-radius:14px;

    transition:.30s;

    user-select:none;

}

.delivery-location:hover{

    background:#F8FAFC;

}

.location-icon{

    width:46px;
    height:46px;

    border-radius:50%;

    background:linear-gradient(135deg,#2563EB,#60A5FA);

    color:#fff;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:20px;

    flex-shrink:0;

    box-shadow:

    0 10px 25px rgba(37,99,235,.25);

}

.location-content{

    display:flex;
    flex-direction:column;

}

.delivery-title{

    font-size:12px;

    color:#64748B;

    margin-bottom:2px;

}

.delivery-address{

    font-size:15px;

    font-weight:600;

    color:#111827;

}

.location-arrow{

    margin-left:auto;

    color:#64748B;

    transition:.3s;

}

.delivery-location:hover .location-arrow{

    transform:rotate(180deg);

}

/*==================================================
    POPUP
==================================================*/

.location-popup{

    position:fixed;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    visibility:hidden;

    opacity:0;

    transition:.35s ease;

    z-index:999999;

}

.location-popup.active{

    opacity:1;

    visibility:visible;

}

/*==================================================
    BACKDROP
==================================================*/

.popup-overlay{

    position:absolute;

    inset:0;

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

    backdrop-filter:blur(10px);

}

/*==================================================
    POPUP CONTAINER
==================================================*/

.popup-container{

    position:relative;

    width:470px;

    max-width:95%;

    background:#fff;

    border-radius:24px;

    overflow:hidden;

    box-shadow:0 30px 80px rgba(0,0,0,.18);

    transform:translateY(30px) scale(.95);

    transition:.35s cubic-bezier(.22,.61,.36,1);

    z-index:2;

}

.location-popup.active .popup-container{

    transform:translateY(0) scale(1);

}

/*==================================================
    HEADER
==================================================*/

.popup-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    padding:28px;

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

}

.popup-header h2{

    font-size:24px;

    font-weight:700;

    color:var(--text);

    margin-bottom:6px;

}

.popup-header p{

    color:var(--text-light);

    font-size:14px;

    line-height:1.6;

}

#closePopup{

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:#F3F4F6;

    cursor:pointer;

    transition:.30s;

    font-size:18px;

}

#closePopup:hover{

    background:#111827;

    color:#fff;

    transform:rotate(90deg);

}

/*==================================================
    BODY
==================================================*/

.popup-body{

    padding:28px;

}
/*==================================================
    RECENT LOCATIONS
==================================================*/

.recent-section{

    margin-top:32px;

}

.recent-title{

    font-size:14px;

    font-weight:600;

    color:var(--text);

    margin-bottom:14px;

}

.recent-list{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}

.recent-list button{

    padding:10px 18px;

    border:1px solid #E5E7EB;

    background:#fff;

    border-radius:50px;

    cursor:pointer;

    font-size:14px;

    font-weight:500;

    transition:.3s ease;

}

.recent-list button:hover{

    background:#2563EB;

    border-color:#2563EB;

    color:#fff;

    transform:translateY(-2px);

}

/*==================================================
    FOOTER
==================================================*/

.popup-footer{

    margin-top:30px;

    padding-top:22px;

    border-top:1px solid #E5E7EB;

}

.popup-footer p{

    font-size:13px;

    color:#64748B;

    line-height:1.7;

}

/*==================================================
    TOAST
==================================================*/

.toast{

    position:fixed;

    bottom:30px;

    left:50%;

    transform:translateX(-50%) translateY(100px);

    display:flex;

    align-items:center;

    gap:12px;

    background:#111827;

    color:#fff;

    padding:16px 22px;

    border-radius:50px;

    box-shadow:0 20px 50px rgba(0,0,0,.25);

    opacity:0;

    visibility:hidden;

    transition:.4s cubic-bezier(.22,.61,.36,1);

    z-index:999999;

}

.toast.active{

    opacity:1;

    visibility:visible;

    transform:translateX(-50%) translateY(0);

}

.toast i{

    color:#22C55E;

    font-size:18px;

}

.toast span{

    font-size:14px;

    font-weight:500;

}

/*==================================================
    SCROLLBAR
==================================================*/

.popup-body::-webkit-scrollbar{

    width:8px;

}

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

    background:#F3F4F6;

}

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

    background:#CBD5E1;

    border-radius:50px;

}

.popup-body::-webkit-scrollbar-thumb:hover{

    background:#94A3B8;

}

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

@media(max-width:768px){

.popup-container{

    width:100%;

    max-width:100%;

    margin:16px;

    border-radius:24px;

    max-height:90vh;

    overflow:hidden;

}

.popup-body{

    max-height:calc(90vh - 100px);

    overflow:auto;

}

.popup-header{

    padding:22px;

}

.popup-header h2{

    font-size:22px;

}

.input-group{

    flex-direction:column;

}

.input-group button{

    width:100%;

    height:54px;

}

.location-card{

    padding:16px;

}

.card-icon{

    width:50px;

    height:50px;

    font-size:20px;

}

.delivery-location{

    padding:10px;

}

.delivery-address{

    font-size:14px;

}

}

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

@media(max-width:480px){

.popup-container{

    margin:10px;

    border-radius:20px;

}

.popup-header{

    padding:18px;

}

.popup-body{

    padding:18px;

}

.popup-header h2{

    font-size:20px;

}

.card-left{

    gap:12px;

}

.card-left h4{

    font-size:15px;

}

.card-left p{

    font-size:13px;

}

.location-icon{

    width:42px;

    height:42px;

    font-size:18px;

}

.toast{

    width:calc(100% - 24px);

    justify-content:center;

    border-radius:14px;

}

}

/*==================================================
    BODY LOCK
==================================================*/

body.popup-open{

    overflow:hidden;

}

/*==================================================
    FADE ANIMATIONS
==================================================*/

.fade-in{

    animation:fadeIn .35s ease forwards;

}

@keyframes fadeIn{

from{

    opacity:0;

    transform:translateY(12px);

}

to{

    opacity:1;

    transform:translateY(0);

}

}

.zoom-in{

    animation:zoomIn .35s ease;

}

@keyframes zoomIn{

from{

    transform:scale(.95);

    opacity:0;

}

to{

    transform:scale(1);

    opacity:1;

}

}

/*==================================================
    PULSE ANIMATION
==================================================*/

.pulse{

    animation:pulse 1.5s infinite;

}

@keyframes pulse{

0%{

    box-shadow:0 0 0 0 rgba(37,99,235,.35);

}

70%{

    box-shadow:0 0 0 15px rgba(37,99,235,0);

}

100%{

    box-shadow:0 0 0 0 rgba(37,99,235,0);

}

}

/*==================================================
    HOVER EFFECTS
==================================================*/

button{

    transition:all .3s ease;

}

button:hover{

    transform:translateY(-2px);

}

input{

    transition:all .3s ease;

}

input:hover{

    border-color:#CBD5E1;

}

.location-card:hover .card-icon{

    transform:rotate(-8deg) scale(1.08);

}

.card-icon{

    transition:.35s ease;

}

.location-icon{

    transition:.35s ease;

}

.delivery-location:hover .location-icon{

    transform:scale(1.08);

}

/*==================================================
    END
==================================================*/
/*==================================================
    CURRENT LOCATION CARD
==================================================*/

.location-card{

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:18px 20px;

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

    border-radius:18px;

    background:#fff;

    cursor:pointer;

    transition:.35s ease;

    position:relative;

    overflow:hidden;

}

.location-card:hover{

    border-color:#2563EB;

    transform:translateY(-2px);

    box-shadow:0 18px 40px rgba(37,99,235,.12);

}

.location-card::before{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:120%;
    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.6),
        transparent
    );

    transition:.8s;

}

.location-card:hover::before{

    left:120%;

}

.card-left{

    display:flex;
    align-items:center;
    gap:16px;

}

.card-icon{

    width:54px;
    height:54px;

    border-radius:16px;

    background:linear-gradient(135deg,#2563EB,#60A5FA);

    color:#fff;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:22px;

    box-shadow:0 12px 25px rgba(37,99,235,.25);

}

.card-left h4{

    font-size:17px;

    color:var(--text);

    margin-bottom:4px;

}

.card-left p{

    color:var(--text-light);

    font-size:14px;

}

.location-card .fa-angle-right{

    font-size:18px;

    color:#94A3B8;

    transition:.3s;

}

.location-card:hover .fa-angle-right{

    transform:translateX(6px);

    color:#2563EB;

}

/*==================================================
    DIVIDER
==================================================*/

.divider{

    display:flex;
    align-items:center;

    margin:28px 0;

}

.divider::before,
.divider::after{

    content:"";

    flex:1;

    height:1px;

    background:#E5E7EB;

}

.divider span{

    margin:0 18px;

    color:#94A3B8;

    font-size:13px;

    font-weight:600;

    letter-spacing:1px;

}

/*==================================================
    INPUT
==================================================*/

.manual-location label{

    display:block;

    font-size:14px;

    font-weight:600;

    margin-bottom:12px;

    color:#111827;

}

.input-group{

    display:flex;

    gap:12px;

}

.input-group input{

    flex:1;

    height:54px;

    padding:0 18px;

    border:2px solid #E5E7EB;

    border-radius:14px;

    outline:none;

    font-size:15px;

    transition:.30s;

}

.input-group input::placeholder{

    color:#9CA3AF;

}

.input-group input:focus{

    border-color:#2563EB;

    box-shadow:

    0 0 0 4px rgba(37,99,235,.10);

}

/*==================================================
    BUTTON
==================================================*/

.input-group button{

    min-width:130px;

    border:none;

    border-radius:14px;

    cursor:pointer;

    font-size:15px;

    font-weight:600;

    color:#fff;

    background:linear-gradient(
        135deg,
        #2563EB,
        #1D4ED8
    );

    transition:.30s;

    position:relative;

    overflow:hidden;

}

.input-group button:hover{

    transform:translateY(-2px);

    box-shadow:0 18px 35px rgba(37,99,235,.30);

}

.input-group button:active{

    transform:scale(.97);

}

/*==================================================
    RIPPLE EFFECT
==================================================*/

.input-group button::after{

    content:"";

    position:absolute;

    width:0;
    height:0;

    left:50%;
    top:50%;

    background:rgba(255,255,255,.30);

    border-radius:100%;

    transform:translate(-50%,-50%);

    transition:.55s;

}

.input-group button:hover::after{

    width:260px;

    height:260px;

}

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

.location-result{

    display:none;

    align-items:center;

    gap:16px;

    margin-top:25px;

    padding:18px;

    background:#ECFDF5;

    border:1px solid #BBF7D0;

    border-radius:16px;

}

.location-result.active{

    display:flex;

}

.result-icon{

    width:50px;
    height:50px;

    border-radius:50%;

    background:#16A34A;

    color:#fff;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:22px;

}

.location-result h4{

    font-size:16px;

    color:#065F46;

    margin-bottom:3px;

}

.location-result p{

    color:#047857;

    font-size:14px;

}

/*==================================================
    LOADING
==================================================*/

.loading-box{

    display:none;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    padding:40px 20px;

}

.loading-box.active{

    display:flex;

}

.loader{

    width:48px;

    height:48px;

    border:4px solid #E5E7EB;

    border-top-color:#2563EB;

    border-radius:50%;

    animation:spin .8s linear infinite;

    margin-bottom:18px;

}

.loading-box p{

    color:#64748B;

    font-size:14px;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}/* End custom CSS */