/*==================================================
PRORIDE ACCOUNT BUTTON
Shortcode: [proride_account]
==================================================*/

.proride-account{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    direction:rtl;
    z-index:999999;
    isolation:isolate;
}

.proride-account *{
    box-sizing:border-box;
}

.proride-account-btn{
    width:54px;
    height:54px;
    border:0;
    border-radius:999px;
    background:#ed1d24;
    color:#fff !important;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    cursor:pointer;
    padding:0;
    text-decoration:none !important;
    box-shadow:0 16px 35px rgba(237,29,36,.32);
    transition:
        transform .3s ease,
        background .3s ease,
        box-shadow .3s ease,
        width .35s ease;
}

.proride-account-btn:hover{
    transform:translateY(-2px);
    background:#111;
    color:#fff;
    box-shadow:0 20px 45px rgba(0,0,0,.25);
}

.proride-account-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:26px;
    height:26px;
}

.proride-account-icon svg{
    width:25px;
    height:25px;
    fill:currentColor;
    display:block;
    overflow:visible;
}

.proride-account-spark{
    fill:#fff;
    transform-origin:center;
    animation:prorideAccountSpark 1.8s ease-in-out infinite;
}

.proride-account-btn:hover .proride-account-spark{
    fill:#ed1d24;
}

.proride-account-text{
    display:inline-flex;
    align-items:center;
    font-size:15px;
    font-weight:700;
    white-space:nowrap;
    line-height:1;
}

.proride-account:has(.proride-account-text) .proride-account-btn{
    width:auto;
    min-width:54px;
    padding:0 22px;
}

@keyframes prorideAccountSpark{
    0%,100%{
        opacity:.75;
        transform:scale(.9);
    }
    50%{
        opacity:1;
        transform:scale(1.18);
    }
}

/* Header/menu friendly */
.header-widget .proride-account,
.mkdf-page-header .proride-account,
.elementor-location-header .proride-account{
    vertical-align:middle;
}

/* Mobile */
@media (max-width:768px){

    .proride-account-btn{
        width:50px;
        height:50px;
    }

    .proride-account-icon{
        width:24px;
        height:24px;
    }

    .proride-account-icon svg{
        width:23px;
        height:23px;
    }

}