/* =====================================
   Wrapper
===================================== */

.ql-wrapper {
    position:relative;
}



/* =====================================
   Dropdown
===================================== */

.ql-dropdown {

    position:absolute;

    top:calc(100% + 8px);
    right:0;

    width:580px;
    max-width:calc(100vw - 24px);

    padding:16px;

    background:var(--i-dropdown--ba-co);

    border-radius:var(--i-dropdown--bo-ra);

    box-shadow:var(--i-dropdown--bo-sh);

    display:none;

    z-index:100000;

}


.ql-wrapper.is-open .ql-dropdown {

    display:block;

}



/* =====================================
   Grid
===================================== */

.ql-description {

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:8px;

}



/* =====================================
   Title
===================================== */

.ql-description-title {

    grid-column:1/-1;

    font-size:16px;

    font-weight:700;

}



/* =====================================
   Item
===================================== */

.ql-description-item {

    display:flex;

    align-items:center;

    gap:12px;

    padding:10px;

    color:inherit;

    text-decoration:none;

    border-radius:10px;

}



.ql-description-item:hover {

    background:var(--i-background_4);

}



/* =====================================
   Icon
===================================== */

.ql-description-icon {

    width:42px;

    height:42px;

    flex:0 0 42px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--i-background_2);

    border-radius:10px;

    font-size:20px;

}



.ql-link-image {

    width:100%;

    height:100%;

    object-fit:cover;

    border-radius:10px;

}



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

.ql-description-content {

    min-width:0;

}


.ql-description-label {

    display:block;

    font-size:14px;

    font-weight:600;

}


.ql-description-text {

    display:block;

    font-size:12px;

    opacity:.7;

}



/* =====================================
   Mobile
===================================== */

@media(max-width:979px){


    .ql-dropdown {

        position:fixed;

        top:50%;
        left:50%;

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

        width:calc(100vw - 32px);

        max-width:420px;

        max-height:70vh;

        overflow-y:auto;

        padding:20px;

        border-radius:18px;



    }



    .ql-description {

        grid-template-columns:repeat(3,1fr);

        gap:20px 10px;

    }



    .ql-description-title {

        text-align:center;

        font-size:18px;

    }



    .ql-description-item {

        flex-direction:column;

        text-align:center;

        padding:4px;

    }



    .ql-description-icon {

        width:52px;

        height:52px;

        border-radius:50%;

        font-size:22px;
        flex:0 0 52px;

    }



    .ql-description-text {

        display:none;

    }



    .ql-description-label {

        font-size:12px;

        max-width:80px;

        white-space:nowrap;

        overflow:hidden;

        text-overflow:ellipsis;

    }


}



/* =====================================
   Overlay
===================================== */

.ql-overlay {
    display:none;
}


@media(max-width:979px){

    .ql-overlay.is-active {

        display:block;

        position:fixed;

        inset:0;

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

        backdrop-filter:blur(3px);

        /*z-index:9999;*/

    }

    .ql-dropdown {

        z-index:10000;

    }


}