html{
    scroll-behavior:smooth;
}

section{
    scroll-margin-top:80px;
}

.card-header{
    background:#f8f9fa;
}

.card{
    border-radius:12px;
}

.card-header h5{
    font-weight:600;
}

.knowledge-content{

    line-height:1.8;

    color:#495057;
}
.card .fs-3{

    font-weight:700;

}

.card i{

    opacity:.9;

}

.disease-hero{

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

}

.disease-hero h1{

    font-weight:700;

}

.disease-hero .badge{

    font-size:.85rem;

}

/* ==========================================================
   Related Diseases
========================================================== */

.related-disease-card {
    border: 0;
    border-radius: 1rem;
    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.related-disease-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.12);
}

.related-disease-card .card-title {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.35;
}

.related-disease-card .badge.bg-success {
    font-size: .80rem;
    min-width: 58px;
}

.related-disease-card .badge.bg-primary-subtle {
    font-size: .75rem;
    font-weight: 500;
    border-radius: 999px;
    padding: .45rem .70rem;
}

.related-disease-card .btn {
    margin-top: auto;
}

#related-diseases h3 {
    font-weight: 700;
}

#related-diseases .text-muted {
    font-size: .92rem;
}
.related-disease-card .small.fw-semibold {
    letter-spacing: .02em;
}
/* ==========================================================
   Disease Comparison
========================================================== */

.comparison-vs {

    width: 72px;

    height: 72px;

    margin: auto;

    border-radius: 50%;

    background: var(--bs-primary);

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 700;

    font-size: 1.3rem;

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

}

.comparison-summary-card {

    transition: transform .2s ease;

}

.comparison-summary-card:hover {

    transform: translateY(-3px);

}

.comparison-section {

    scroll-margin-top: 90px;

}

.comparison-content {

    line-height: 1.8;

}

.comparison-stat-value {

    font-size: 1.4rem;

    font-weight: 700;

}

.comparison-stat-label {

    font-size: .85rem;

    color: #6c757d;

}

@media (max-width: 991px) {

    .comparison-vs {

        width: 54px;

        height: 54px;

        font-size: 1rem;

    }

}

.disease-nav
{
    position: sticky;

    top: 0px;

    z-index: 100;

    background: #fff;

    border-radius: .75rem;

    box-shadow: 0 .125rem .35rem rgba(0,0,0,.06);

    margin-bottom: 1.5rem;
}

.disease-nav .card-body
{
    padding: 1rem;
}

.disease-nav .btn
{
    transition: all .2s ease;
}

.disease-nav .btn:hover
{
    transform: translateY(-1px);
}

section[id]
{
    scroll-margin-top: 120px;
}

.disease-nav .btn
{
    min-width: 110px;

    margin-bottom: .5rem;
}

.kobi-section
{
    background: #fff;

    border: 1px solid #e9ecef;

    border-radius: 14px;

    overflow: hidden;

    margin-bottom: 2rem;

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

    transition: all .2s ease;
}

.kobi-section:hover
{
    box-shadow: 0 .35rem 1rem rgba(0,0,0,.08);
}

.kobi-section-header
{
    display: flex;

    align-items: center;

    gap: .75rem;

    padding: 1rem 1.5rem;

    border-bottom: 1px solid #eef2f7;

    background: linear-gradient(
        to right,
        #ffffff,
        #f8fbff
    );
}

.kobi-section-title
{
    margin: 0;

    font-size: 1.45rem;

    font-weight: 700;

    color: #1f2937;
}

.kobi-section-body
{
    padding: 1.5rem;
}

.kobi-section-icon
{
    font-size: 1.35rem;

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

.kobi-section-subtitle
{
    color: #6c757d;

    font-size: .875rem;

    margin-top: .15rem;
}

.kobi-section-header i
{
    margin-right: .75rem;
}

#treatmentAccordion .accordion-button
{
    align-items: flex-start;

    padding: 1rem 1.25rem;
}

#treatmentAccordion .accordion-button:not(.collapsed)
{
    background: #f8fbff;
}

#treatmentAccordion .accordion-body
{
    line-height: 1.8;

    color: #495057;
}

#treatmentAccordion .accordion-item
{
    overflow: hidden;
}

.treatment-card-allopathy
{
    border-left: 5px solid #0d6efd;
}

.treatment-card-ayurveda
{
    border-left: 5px solid #198754;
}

.treatment-card-homeopathy
{
    border-left: 5px solid #6f42c1;
}

.treatment-card-acupressure
{
    border-left: 5px solid #fd7e14;
}

.treatment-card-yoga
{
    border-left: 5px solid #20c997;
}

.accordion-button:not(.collapsed)
{
    background:#f8fbff;

    color:#0d6efd;
}

.treatment-content
{
    line-height:1.9;

    color:#495057;

    font-size:1rem;
}

.treatment-card-allopathy .accordion-button
{
    background:#eef5ff;
}

.treatment-card-ayurveda .accordion-button
{
    background:#edf8f0;
}

.treatment-card-homeopathy .accordion-button
{
    background:#f5efff;
}

.treatment-card-acupressure .accordion-button
{
    background:#fff5e9;
}

.treatment-card-yoga .accordion-button
{
    background:#eefbf7;
}

#treatmentAccordion .accordion-item
{
    transition: all .25s ease;

    border-radius: .75rem;

    overflow: hidden;
}

#treatmentAccordion .accordion-item:hover
{
    transform: translateY(-2px);

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

#treatmentAccordion .accordion-button::after
{
    transition: transform .25s ease;
}

/* ==========================================
   FAQ CENTER
========================================== */

.faq-item
{
    border-radius: .75rem;

    overflow: hidden;

    transition: all .25s ease;
}

.faq-item:hover
{
    transform: translateY(-2px);

    box-shadow: 0 .4rem .8rem rgba(0,0,0,.08);
}

.faq-item .accordion-button
{
    font-weight: 600;

    background: #fff;
}

.faq-item .accordion-button:not(.collapsed)
{
    background: #eef6ff;

    color: #0d6efd;
}

.faq-item .accordion-body
{
    line-height: 1.9;

    color: #495057;
}

.faq-item
{
    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.faq-item:hover
{
    transform: translateY(-2px);

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

.faq-answer
{
    line-height: 1.9;

    color: #495057;

    font-size: 1rem;
}

.diet-item
{
    padding-bottom: .75rem;

    border-bottom: 1px solid #f1f3f5;
}

.diet-item:last-child
{
    border-bottom: none;

    padding-bottom: 0;
}

.diet-item .fw-semibold
{
    font-size: 1rem;
}

.stat-card
{
    transition: .25s ease;
}

.stat-card:hover
{
    transform: translateY(-5px);

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

.search-dropdown
{
    position: absolute;

    top: calc(100% + 4px);

    left: 0;

    right: 0;

    z-index: 1050;

    max-height: 320px;

    overflow-y: auto;

    border-radius: .75rem;

    box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

.search-dropdown .list-group-item
{
    padding: .85rem 1rem;

    border: 0;

    border-bottom: 1px solid #f1f3f5;
}

.search-dropdown .list-group-item:last-child
{
    border-bottom: none;
}

.search-dropdown .list-group-item:hover
{
    background: #f8fbff;

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

.search-dropdown
{
    border-radius: 12px;
}

.search-dropdown a.active
{
    background:#eaf3ff;

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

.body-system-card
{
    transition:.25s;
}

.body-system-card:hover
{
    transform:translateY(-6px);

    box-shadow:
        0 1rem 2rem rgba(0,0,0,.08);
}

.body-system-card
{
    border: none;
    border-radius: 1rem;
    transition: all .25s ease;
}

.body-system-card:hover
{
    transform: translateY(-6px);

    box-shadow: 0 1rem 2rem rgba(0,0,0,.10);
}

.body-system-icon
{
    width: 70px;
    height: 70px;

    margin: auto;

    border-radius: 50%;

    background: rgba(var(--bs-primary-rgb), .1);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 2rem;

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

.body-filter-bar .btn{

    border-radius:50rem;

    transition:all .2s ease;

}

.body-filter-bar .btn:hover{

    transform:translateY(-2px);

}

.table-catalog thead th{

    position:sticky;

    top:0;

    z-index:2;

    background:#212529;

}

.table-catalog tbody tr{

    transition:.15s;

}

.table-catalog tbody tr:hover{

    background:#f8f9fa;

}

.symptom-tag {

    cursor: pointer;

    transition: .2s;

}

.symptom-tag:hover {

    background: var(--bs-primary);

    color: #fff;

}

.catalog-toolbar
{
    position: sticky;

    top: 0;

    z-index: 1000;

    background: #fff;

    padding: 12px 0;

    border-bottom: 1px solid #dee2e6;
}

.card
{
    margin-bottom: 1rem;
}

.card-body
{
    padding: 1rem;
}

#diseaseTable thead th{

    padding:16px 18px;

    vertical-align:middle;

}

#diseaseTable tbody td{

    padding:14px 18px;

    vertical-align:middle;

}

.compare-btn{

    border-radius:12px;

}