/* ==========================================================
   Поиск по курсу
   ========================================================== */

#course-search{

    position:fixed;

    left:24px;
    bottom:24px;

    z-index:99998;

    font-family:var(--font-body,"Segoe UI",sans-serif);

}

/* ========================================================== */

#search-open{

    width:58px;
    height:58px;

    border:none;
    border-radius:50%;

    cursor:pointer;

    font-size:24px;

    color:#fff;

    background:var(--accent,#2b5d8a);

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

    transition:.2s;

}

#search-open:hover{

    transform:translateY(-2px);

}

/* ========================================================== */

#search-panel{

    position:absolute;

    left:0;
    bottom:72px;

    width:460px;

    max-width:92vw;

    height:70vh;

    display:none;

    flex-direction:column;

    background:var(--paper,#faf8f2);

    border:1px solid var(--rule,#d6d6d6);

    border-radius:10px;

    overflow:hidden;

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

}

#search-panel.open{

    display:flex;

}

/* ========================================================== */

.search-header{

    display:flex;

    gap:10px;

    padding:12px;

    border-bottom:1px solid var(--rule,#ddd);

    background:var(--paper,#faf8f2);

}

/* ========================================================== */

#search-input{

    flex:1;

    padding:10px 14px;

    font-size:16px;

    border:1px solid #bbb;

    border-radius:6px;

    outline:none;

    background:white;

}

#search-input:focus{

    border-color:var(--accent,#2b5d8a);

}

/* ========================================================== */

#search-close{

    width:42px;

    border:none;

    border-radius:6px;

    cursor:pointer;

    font-size:18px;

    background:#e7e7e7;

}

#search-close:hover{

    background:#dcdcdc;

}

/* ========================================================== */

#search-results{

    flex:1;

    overflow-y:auto;

    padding:12px;

}

/* ========================================================== */

.search-result{

    display:block;

    text-decoration:none;

    color:inherit;

    margin-bottom:12px;

    padding:12px;

    border:1px solid #ddd;

    border-radius:8px;

    background:white;

    transition:.15s;

}

.search-result:hover{

    border-color:var(--accent,#2b5d8a);

    transform:translateY(-1px);

    box-shadow:
        0 6px 18px rgba(0,0,0,.12);

}

/* ========================================================== */

.search-title{

    font-size:17px;

    font-weight:700;

    color:var(--accent,#2b5d8a);

}

/* ========================================================== */

.search-page{

    margin-top:3px;

    margin-bottom:8px;

    font-size:13px;

    color:#777;

}

/* ========================================================== */

.search-text{

    font-size:14px;

    line-height:1.45;

    color:#333;

}

/* ========================================================== */

.nothing{

    padding:20px;

    text-align:center;

    color:#888;

}

/* ========================================================== */

#search-results::-webkit-scrollbar{

    width:10px;

}

#search-results::-webkit-scrollbar-thumb{

    background:#c4c4c4;

    border-radius:20px;

}

#search-results::-webkit-scrollbar-track{

    background:transparent;

}

/* ========================================================== */

@media (max-width:700px){

    #course-search{

        left:14px;
        bottom:14px;

    }

    #search-panel{

        width:94vw;

        height:75vh;

    }

}