/* =====================================================
   DROPDOWN ZONA - LGP
===================================================== */


/* =====================================================
   CONTENEDOR
===================================================== */

.lgp-dropdown{
    position:relative;
    width:260px;

    font-family:"Felbridge Std", serif;
}


/* =====================================================
   BOTÓN
===================================================== */

.lgp-dropdown-btn{
    width:100%;
    height:33px;

    padding:0 14px;

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

    background:#EB7637;
    color:#ffffff;

    border:0;
    cursor:pointer;

    font-size:15px;
    font-weight:500;

    transition:
        background-color .25s ease,
        color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}


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

.lgp-dropdown-btn:hover{
    background:#E56C2E;
}


/* =====================================================
   FLECHA
===================================================== */

.lgp-arrow{
    width:0;
    height:0;

    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-top:12px solid #51BCA3;

    transition:
        transform .3s ease,
        border-top-color .25s ease;
}


/* =====================================================
   MENÚ
===================================================== */

.lgp-dropdown-menu{
    position:absolute;

    top:100%;
    left:0;

    width:100%;

    display:none;

    background:rgba(235,118,55,.35);

    border:1px solid rgba(255,255,255,.9);
    border-top:0;

    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);

    z-index:999;
}


/* =====================================================
   OPCIONES
===================================================== */

.lgp-dropdown-menu a{
    display:flex;
    align-items:center;

    height:32px;

    padding:0 14px;

    color:#ffffff;
    text-decoration:none;

    font-size:13px;
    font-weight:400;

    border-bottom:1px solid rgba(255,255,255,.9);

    transition:
        background-color .25s ease,
        padding-left .25s ease;
}

.lgp-dropdown-menu a:last-child{
    border-bottom:none;
}

.lgp-dropdown-menu a:hover{
    background:rgba(255,255,255,.16);
    padding-left:18px;
}


/* =====================================================
   ESTADO ABIERTO
===================================================== */

.lgp-dropdown.active .lgp-dropdown-menu{
    display:block;
}


/* BOTÓN RESALTADO AL HACER CLIC */

.lgp-dropdown.active .lgp-dropdown-btn{
    background:#48579E;
    color:#ffffff;

    box-shadow:0 4px 12px rgba(0,0,0,.15);
}


/* FLECHA CUANDO ESTÁ ABIERTO */

.lgp-dropdown.active .lgp-arrow{
    transform:rotate(180deg);
    border-top-color:#F2E62C;
}


/* =====================================================
   FOCUS / ACCESIBILIDAD
===================================================== */

.lgp-dropdown-btn:focus-visible{
    outline:2px solid #F2E62C;
    outline-offset:2px;
}


/* =====================================================
   TABLET
===================================================== */

@media (min-width:768px) and (max-width:1024px){

    .lgp-dropdown{
        width:200px;
        margin:0;
    }

    .lgp-dropdown-btn{
        height:31px;

        padding:0 13px;

        font-size:14px;
    }

    .lgp-arrow{
        border-left:9px solid transparent;
        border-right:9px solid transparent;
        border-top:11px solid #51BCA3;
    }

    .lgp-dropdown.active .lgp-arrow{
        border-top-color:#F2E62C;
    }

    .lgp-dropdown-menu a{
        height:31px;

        padding:0 13px;

        font-size:13px;
    }

    .lgp-dropdown-menu a:hover{
        padding-left:17px;
    }

}


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

@media (max-width:767px){

    .lgp-dropdown{
        width:190px;
        margin:0;
    }

    .lgp-dropdown-btn{
        height:30px;

        padding:0 12px;

        font-size:13px;
    }

    .lgp-arrow{
        border-left:8px solid transparent;
        border-right:8px solid transparent;
        border-top:10px solid #51BCA3;
    }

    .lgp-dropdown.active .lgp-arrow{
        border-top-color:#F2E62C;
    }

    .lgp-dropdown-menu a{
        height:30px;

        padding:0 12px;

        font-size:12px;
    }

    .lgp-dropdown-menu a:hover{
        padding-left:15px;
    }

}