/* =========================
   CHARACTER SHORTCUT PAGE
========================= */


/* Search Box */

.shortcut-search-box {

    position:relative;

    width:100%;

}


.shortcut-search-input {

    width:100%;

    padding:12px 16px;

    border-radius:12px;

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

    background:var(--card-color);

    color:var(--text-color);

    font-size:15px;

}



/* Suggest Dropdown */

.shortcut-suggest {


    display:none;


    position:absolute;


    top:100%;


    left:0;


    width:100%;


    margin-top:4px;


    max-height:300px;


    overflow-y:auto;


    background:var(--card-color);


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


    border-radius:12px;


    z-index:9999;


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

}



.shortcut-suggest-item {


    display:flex;


    align-items:center;


    gap:12px;


    padding:8px 12px;


    cursor:pointer;


    color:var(--text-color);


}



.shortcut-suggest-item:hover {


    background:var(--hover-color);


}



.shortcut-suggest-item img {


    width:45px;


    height:45px;


    object-fit:contain;


}



/* Shortcut List */


.shortcut-list-image {


    width:50px;

    height:50px;

    object-fit:contain;

    border-radius:8px;

}



/* Button */

.shortcut-save-btn {


    background:#16a34a;

    color:white;

    border:none;

    border-radius:12px;

    padding:10px 25px;

    font-weight:700;

}



.shortcut-save-btn:hover {

    transform:translateY(-2px);

}

.shortcut-order-input.changed {

    border:2px solid #16a34a;

    background:#dcfce7;

}