/* =====================================
   Research Condition
   (فایل اصلی خودت — بدون تغییر)
===================================== */

*{ box-sizing:border-box; }
body{ margin:0; background:var(--background); }

.container{ max-width:1200px; margin:auto; padding:0 24px; }

.research-condition{

    padding:var(--section-space) 0;
    direction:rtl;
}

.research-condition-header{
    text-align:center;
    max-width:768px;
    margin:auto;
}

.section-label{
    display:inline-block;
    padding:8px 20px;
    border-radius:var(--radius-round);
    background:rgba(var(--accent-rgb),.12);
    color:var(--primary);
    font-family:var(--font-body);
    font-size:var(--font-size-tag);
    font-weight:600;
}

.research-condition-header h2{
    font-family:var(--font-heading);
    font-weight:var(--heading-weight);
    margin:18px 0;
    color:var(--text);
    font-size:clamp(2rem,4vw,3rem);
}

.research-condition-header p{
    font-family:var(--font-body);
    font-weight:var(--body-weight);
    color:var(--text-muted);
    line-height:2;
}

/* Search */

.research-search{
    margin:50px auto;
    max-width:576px;
    height:64px;
    background:var(--background);
    border:1px solid var(--border);
    border-radius:var(--radius-round);
    display:flex;
    align-items:center;
    padding:0 25px;
    gap:15px;
}

.search-icon{ font-size:1.375rem; }

.research-search input{
    border:none;
    outline:none;
    width:100%;
    font-family:var(--font-body);
    font-size:1rem;
}

.condition-layout{
    display:grid;
    grid-template-columns:1fr 300px;
    gap:35px;
    align-items:start;
}

.condition-cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

.condition-card{
    background:var(--background);
    padding:30px;
    border-radius:var(--radius-lg);
    border:1px solid var(--border);
    transition:var(--transition);
}

.condition-card:hover{
    transform:translateY(-6px);
    box-shadow:0 15px 40px rgba(var(--primary-rgb),.12);
}

.condition-icon{
    width:55px;
    height:55px;
    border-radius:50%;
    background:rgba(var(--secondary-rgb),.1);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.75rem;
}

.condition-card h3{
    font-family:var(--font-heading);
    font-weight:var(--heading-weight);
    margin:20px 0 12px;
    color:var(--text);
    font-size:1.375rem;
}

.study-count{
    font-family:var(--font-body);
    font-size:.875rem;
    color:var(--text-muted);
}

.study-count strong{ color:var(--secondary); }

.condition-card p{
    font-family:var(--font-body);
    font-weight:var(--body-weight);
    color:var(--text-light);
    line-height:1.9;
    font-size:var(--font-size-p);
    min-height:80px;
}

.product{
    font-family:var(--font-body);
    margin:20px 0;
    color:var(--text-muted);
}

.product span{
    display:inline-block;
    margin-right:8px;
    background:var(--surface-alt);
    color:var(--primary);
    padding:5px 14px;
    border-radius:var(--radius-round);
    font-weight:600;
}

.condition-card a{
    font-family:var(--font-body);
    color:var(--primary);
    font-weight:600;
    text-decoration:none;
    transition:var(--transition);
}

.condition-card a:hover{ color:var(--secondary); }

/* Categories */

.condition-category{
    background:var(--background);
    border-radius:var(--radius-lg);
    padding:30px;
    border:1px solid var(--border);
}

.condition-category h3{
    font-family:var(--font-heading);
    font-weight:var(--heading-weight);
    color:var(--text);
    margin-bottom:25px;
}

.condition-category ul{
    list-style:none;
    padding:0;
    margin:0;
}

.condition-category li{
    font-family:var(--font-body);
    font-weight:var(--body-weight);
    padding:12px 0;
    border-bottom:1px solid var(--border);
    color:var(--text-light);
    cursor:pointer;
    transition:var(--transition);
}

.condition-category li:hover{
    color:var(--secondary);
    padding-right:8px;
}

/* Responsive */

@media(max-width:1200px){
    .condition-layout{ grid-template-columns:1fr; }
    .condition-category{ order:-1; }
    .condition-cards{ grid-template-columns:repeat(2,1fr); }
}

@media(max-width:768px){
    .condition-cards{ grid-template-columns:1fr; }
    .research-search{ height:58px; }
}

/* =====================================
   استایل‌های اضافی — فقط برای عناصر جدیدی که در
   فایل CSS اصلی‌ات وجود نداشتن (state جستجو + مودال).
   اگر می‌خوای، می‌تونی این بخش رو هم به همون فایل CSS
   اصلی منتقل کنی؛ چیزی از کلاس‌های قبلی رو override نمی‌کنه.
===================================== */

.search-clear{
    border:none;
    background:var(--surface-alt);
    color:var(--primary);
    width:28px;
    height:28px;
    border-radius:50%;
    cursor:pointer;
    font-size:.9rem;
    display:none;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}
.search-clear.show{ display:flex; }

.results-heading{
    display:none;
    align-items:center;
    justify-content:space-between;
    max-width:576px;
    margin:-20px auto 30px;
    font-family:var(--font-body);
    color:var(--text-light);
    font-size:.9375rem;
}
.results-heading.show{ display:flex; }
.results-heading strong{ color:var(--text); }

.reset-link{
    background:none;
    border:none;
    color:var(--primary);
    font-family:var(--font-body);
    font-weight:600;
    cursor:pointer;
    font-size:.875rem;
}

.no-results{
    display:none;
    text-align:center;
    padding:40px 20px;
    color:var(--text-muted);
    font-family:var(--font-body);
    grid-column:1/-1;
}
.no-results.show{ display:block; }

.condition-card.article-card{ cursor:pointer; }
.condition-card.article-card:focus-visible{
    outline:2px solid var(--primary);
    outline-offset:3px;
}

.condition-card .read-link{
    font-family:var(--font-body);
    color:var(--primary);
    font-weight:600;
    text-decoration:none;
    background:none;
    border:none;
    padding:0;
    cursor:pointer;
    font-size:1rem;
    text-align:right;
    transition:var(--transition);
}
.condition-card .read-link:hover{ color:var(--secondary); }

.condition-category li.active{
    color:var(--primary);
    font-weight:600;
    padding-right:8px;
}

/* Modal */

.article-modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(15,15,20,.55);
    backdrop-filter:blur(2px);
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
    z-index:999;
    opacity:0;
    transition:opacity .2s ease;
}
.article-modal-overlay.open{ display:flex; opacity:1; }

.article-modal{
    background:var(--background);
    border-radius:var(--radius-lg);
    max-width:576px;
    width:100%;
    max-height:85vh;
    overflow-y:auto;
    padding:36px;
    position:relative;
    direction:rtl;
    transform:translateY(16px);
    transition:transform .25s ease;
}
.article-modal-overlay.open .article-modal{ transform:translateY(0); }

.modal-close{
    position:absolute;
    top:20px;
    left:20px;
    width:36px;
    height:36px;
    border-radius:50%;
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--text-light);
    font-size:1.1rem;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:var(--transition);
}
.modal-close:hover{ background:var(--surface-alt); color:var(--primary); }

.modal-condition-tag{
    display:inline-block;
    font-family:var(--font-body);
    font-size:.8125rem;
    font-weight:600;
    color:var(--secondary);
    background:rgba(var(--secondary-rgb),.1);
    padding:5px 14px;
    border-radius:var(--radius-round);
    margin-bottom:16px;
}

.article-modal h2{
    font-family:var(--font-heading);
    font-weight:var(--heading-weight);
    color:var(--text);
    font-size:1.5rem;
    margin:0 0 14px;
    padding-left:40px;
}

.modal-meta{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    font-family:var(--font-body);
    font-size:.875rem;
    color:var(--text-muted);
    margin-bottom:22px;
}
.modal-meta span strong{ color:var(--text-light); }

.article-modal .modal-summary{
    font-family:var(--font-body);
    color:var(--text-light);
    line-height:2;
    font-size:1rem;
    margin-bottom:28px;
}

.modal-actions{ display:flex; gap:14px; flex-wrap:wrap; }

.modal-actions a{
    font-family:var(--font-body);
    font-weight:600;
    text-decoration:none;
    padding:12px 26px;
    border-radius:var(--radius-round);
    font-size:.9375rem;
    transition:var(--transition);
}
.modal-btn-primary{ background:var(--primary); color:#fff; }
.modal-btn-primary:hover{ background:var(--secondary); }

@media(max-width:768px){
    .article-modal{ padding:26px; max-height:90vh; }
    .article-modal h2{ font-size:1.25rem; }
}