/*****************************************************************
 *
 * KOBI Core v0.2.0
 * Symptom Checker
 *
 *****************************************************************/

/* ==========================================================
   Page
========================================================== */

#resultsSummary,
#matchResults {
    margin-top: 1.5rem;
}

/* ==========================================================
   Cards
========================================================== */

.card {
    border: 1px solid #e9ecef;
    border-radius: 12px;
    transition: all .25s ease;
}

.card:hover {
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.08);
}

/* ==========================================================
   Search Suggestions
========================================================== */

#searchResults {
    position: absolute;
    width: calc(100% - 2rem);
    z-index: 1050;
    max-height: 300px;
    overflow-y: auto;
    border-radius: .5rem;
}

#searchResults .list-group-item {
    cursor: pointer;
}

#searchResults .list-group-item:hover {
    background: #f8f9fa;
}

/* ==========================================================
   Popular Symptoms
========================================================== */

.symptom-chip {
    border-radius: 999px;
    transition: .2s;
}

.symptom-chip:hover {
    transform: translateY(-2px);
}

/* ==========================================================
   Selected Symptoms
========================================================== */

.selected-item {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: .75rem 1rem;

    margin-bottom: .75rem;

    border: 1px solid #dee2e6;

    border-radius: .5rem;

    background: #fff;
}

.remove-symptom {

    color: #dc3545;

    font-size: 1.2rem;

    cursor: pointer;

    font-weight: bold;

}

.remove-symptom:hover {

    color: #a71d2a;

}

/* ==========================================================
   Disease Card
========================================================== */

.disease-card h4 {

    font-weight: 700;

}

.disease-card .badge {

    font-size: .78rem;

}

/* ==========================================================
   Symptom Badges
========================================================== */

.badge {

    padding: .45rem .7rem;

    border-radius: 999px;

}

.badge.bg-success {

    font-weight: 500;

}

.badge.bg-light {

    border: 1px solid #ced4da;

}

/* ==========================================================
   Progress
========================================================== */

.progress {

    height: 10px;

    border-radius: 999px;

    background: #edf1f5;

}

.progress-bar{

    transition:
        width .8s ease-in-out;
}

/* ==========================================================
   Results Summary
========================================================== */

#resultsSummary .card {

    border-left: 5px solid #0d6efd;

}

/* ==========================================================
   Ranking
========================================================== */

.ranking-score {

    text-align: right;

}

.ranking-score small {

    display: block;

    color: #6c757d;

}

.ranking-score strong {

    font-size: 1.1rem;

}

/* ==========================================================
   Disease Action
========================================================== */

.disease-action {

    text-align: right;

}

/* ==========================================================
   Sticky Sidebar
========================================================== */

@media (min-width:992px){

    .sticky-top{

        top:90px;

    }

}

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

@media (max-width:991px){

    .sticky-top{

        position:static !important;

    }

    #searchResults{

        position:relative;

        width:100%;

    }

    .card{

        margin-bottom:1rem;

    }

}

/* ==========================================================
   Animations
========================================================== */

.fade-in{

    animation:fadeIn .3s ease;

}

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(10px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

.disease-card{
    border:0;
    border-radius:14px;
    transition:.2s;
}

.disease-card:hover{
    transform:translateY(-2px);
    box-shadow:0 .5rem 1rem rgba(0,0,0,.12);
}

.disease-card h4{
    font-weight:700;
}

.disease-card .badge{
    font-size:.8rem;
}

.disease-card .progress{
    height:8px;
}

.disease-card .card-body{
    padding:1.5rem;
}

.disease-card .overview-box{
    background:#f8f9fa;
    border:1px solid #e9ecef;
    border-radius:.75rem;
    padding:1rem;
}

.disease-card .overview-box p{
    margin-bottom:.75rem;
    line-height:1.6;
}

.confidence-box{

    background:#f8f9fa;

    border-left:5px solid var(--bs-success);

    padding:1rem;

    border-radius:.5rem;
}

.confidence-box{
    height:100%;
    background:#f8f9fa;
    border-radius:12px;
    padding:1rem;
    transition:all .2s ease;
}

.confidence-box:hover{
    box-shadow:0 .25rem .75rem rgba(0,0,0,.08);
}

.confidence-box h6{
    margin-bottom:.25rem;
}

.disease-card .badge{

    font-size:.78rem;

    font-weight:600;

    padding:.45rem .7rem;
}

.severity-box{

    background:#fff;

    border-radius:12px;

    padding:1rem;

    margin-top:1rem;
}
.quick-fact-card{

    border:1px solid #dee2e6;

    border-radius:12px;

    padding:1rem;

    background:#f8f9fa;

    transition:.2s;
}

.quick-fact-card:hover{

    box-shadow:0 .25rem .75rem rgba(0,0,0,.08);

    transform:translateY(-2px);
}

.quick-fact-card i{

    width:32px;

    font-size:1.4rem;

    margin-top:2px;
}

.quick-fact-card:hover{

    border-color:var(--bs-primary);

    transform:translateY(-3px);

    transition:.2s;
}

.quick-fact-card{

    height:100%;

    display:flex;

    align-items:flex-start;
}

.overview-box p{

    line-height:1.7;

    color:#495057;

}

.overview-box{

    position:relative;

    overflow:hidden;

}

.quick-fact-card{

    min-height:120px;

    display:flex;

    align-items:flex-start;

    transition:.2s;
}

.quick-fact-card:hover{

    border-color:var(--bs-primary);

    box-shadow:0 .25rem .75rem rgba(13,110,253,.08);
}

.disease-header-badges{

    display:flex;

    flex-wrap:wrap;

    gap:.5rem;
}

.disease-card .btn{

    border-radius:8px;
}

.badge{
    display: inline-flex;
}

.text-blue{
    color: blue;
}

.text-red{
    color: red;
}

.text-yellow{
    color: #e8e806;
}

.text-green{
    color: green;
}

.tag-input{

    position: relative;

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:.5rem;

    min-height:58px;

    padding:.5rem;

    border:1px solid #ced4da;

    border-radius:.75rem;

    background:#fff;
}

.tag-input:focus-within{

    border-color:#0d6efd;

    box-shadow:0 0 0 .2rem rgba(13,110,253,.15);

}

.tag-list{

    display:flex;

    flex-wrap:wrap;

    gap:.5rem;

}

.symptom-tag{

    display:flex;

    align-items:center;

    gap:.35rem;

    background:#0d6efd;

    color:#fff;

    border-radius:50rem;

    padding:.35rem .75rem;

    font-size:.9rem;

}

.symptom-tag button{

    border:none;

    background:transparent;

    color:#fff;

    font-size:1rem;

    line-height:1;

    cursor:pointer;

}

.tag-search{

    flex:1;

    min-width:180px;

    border:none;

    outline:none;

    padding:.35rem;

}

.search-wrapper{
    position: relative;
    z-index: 100;
}

.search-results{

    position:absolute;

    top:100%;

    left:0;

    width:100%;

    margin-top:-1px;

    background:#fff;

    border:1px solid #0d6efd;

    border-top:none;

    border-radius:0 0 .75rem .75rem;

    box-shadow:0 .5rem 1rem rgba(0,0,0,.15);

    max-height:260px;

    overflow-y:auto;

    overflow-x:hidden;

    z-index:1100;

}
.search-results .list-group-item{

    border:none;

    border-bottom:1px solid #f1f3f5;

    padding:.75rem 1rem;

    cursor:pointer;

    transition:.15s;
}

.search-results .list-group-item:last-child{

    border-bottom:none;

}

.search-results .list-group-item:hover{

    background:#f8f9fa;

}

.search-area{

    position:relative;

    margin-bottom:1rem;

}

.symptom-tag{

    background:#e7f1ff;

    color:#0d6efd;

    border:1px solid #b6d4fe;

}

.symptom-tag button{

    color:#0d6efd;

}

.search-results .list-group-item{

    transition:
        background .15s ease,
        color .15s ease,
        transform .15s ease;

}

.search-results .list-group-item.active{

    background:#0d6efd;

    color:#fff;

    transform:translateX(4px);

}

.search-results .list-group-item.active i{

    color:#fff !important;

}

.search-results .list-group-item.active:hover{

    background:#0b5ed7;

}