.cr-customer-signin{
    position:relative;
    display:flex;
    align-items:center;
    justify-content: center;
    height:100%;
    font-family:inherit;
    z-index:1000;
}

/* =========================
   TOGGLE
========================= */

.cr-account-toggle{
    display:flex;
    align-items:center;
    
    gap:8px;
    background:#fff3ea;
    border-radius:8px;
    padding:8px 16px;
    cursor:pointer;
    transition:all .25s ease;
    font-weight:600;
    color:#1f2a44;
}

.cr-account-toggle:hover{
    background:#ff6a00;
    color:#fff;
}

.cr-account-toggle:hover img{
    filter:brightness(0) invert(1);
}

.cr-customer-icon{
    display:flex;
    align-items:center;
    justify-content:center;
}

.cr-customer-icon img{
    width:32px;
    height:32px;
    transition:all .25s ease;
}

.cr-arrow{
    font-size:12px;
    transition:transform .25s ease;
}

.cr-customer-signin:hover .cr-arrow{
    transform:rotate(180deg);
}

/* =========================
   DROPDOWN
========================= */

.cr-dropdown{
    position:absolute;
    top:calc(100% + 12px);
    right:0;
    min-width:230px;
    background:#fff;
    border-radius:16px;
    box-shadow:0 10px 30px rgba(0,0,0,.12);
    padding:12px;
    opacity:0;
    visibility:hidden;
    transform:translateY(10px);
    transition:all .25s ease;
    z-index:999;
}

.cr-customer-signin:hover .cr-dropdown{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

/* MOBILE ACTIVE */

.cr-customer-signin.active .cr-dropdown{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

/* =========================
   LINKS
========================= */

.cr-dropdown a{
    display:flex;
    align-items:center;
    width:100%;
    padding:5px 0px;
    text-decoration:none;
    font-weight:600;
    transition:all .25s ease;
    box-sizing:border-box;
}

.cr-dropdown.signout a{
    justify-content:center;
    border-radius:30px;
}

.cr-dropdown.signin a{
   
    color:#444;
}
.cr-dropdown.signin a .material-symbols-outlined {
    color: #01b8f8;
}
.cr-dropdown a:hover .material-symbols-outlined  {
    color: #ff7b24;
}
.cr-dropdown.signin a:hover{
    background-color:#e1f3fd;
}

/* BOTONES */

.cr-dropdown .primary{
    background:#ff6a00;
    color:#fff;
    border:1px solid #ff6a00;
}

.cr-dropdown .secondary{
    background:#fff;
    color:#ff6a00;
    border:1px solid #ff6a00;
    margin-top:8px;
}

.cr-dropdown .secondary:hover{
    background:#ff6a00;
    color:#fff;
}

.cr-dropdown:has(.secondary:hover) .primary{
    background:#fff;
    color:#ff6a00;
}

.cr-dropdown:has(.primary:hover) .secondary{
    background:#fff;
    color:#ff6a00;
}

/* DIVIDER */

.divider{
    display:flex;
    align-items:center;
    gap:10px;
    margin:18px 0 14px;
    color:#777;
    font-size:14px;
    text-align:center;
}

.divider::before,
.divider::after{
    content:"";
    flex:1;
    height:1px;
    background:#e5e5e5;
}

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

@media(max-width:768px){

    .cr-account-toggle{
        background:transparent;
        padding:0;
        border-radius:0;
        gap:0;
    }

    .cr-account-toggle:hover{
        background:transparent;
        color:inherit;
    }

    .cr-account-toggle:hover img{
        filter:none;
    }

    /* SOLO ICONO */

    .cr-label,
    .cr-arrow{
        display:none;
    }

    .cr-customer-icon img{
        width:28px;
        height:28px;
    }

    /* PANEL MOBILE */

    .cr-dropdown{
        position:fixed;
        top:100px;
        right:12px;
        left:12px;
        width:auto;
        min-width:auto;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
        padding:14px;
        box-shadow:0 12px 40px rgba(0,0,0,.16);

        opacity:0;
        visibility:hidden;
        transform:translateY(15px);
    }

    .cr-dropdown a{
        font-size:15px;
    }

}