/*
  =================================================================
  فایل استایل اختصاصی تحلیل‌گر تیروئید (TSH)
  نسخه: 1.1 - بهینه‌سازی A11y
  =================================================================
*/

/* --- Input with Unit --- */
.input-wrapper {
    position: relative;
}

.input-wrapper .input-unit {
    position: absolute;
    left: 15px; /* For RTL */
    top: 50%;
    transform: translateY(-50%);
    color: var(--light-text-color);
    font-size: 0.9rem; 
    font-weight: bold;
    pointer-events: none; /* Make unit non-interactive */
}

.input-wrapper input[type="number"] {
    padding-left: 75px; /* Space for the unit */
}

/* --- Result Card Color Coding --- */
.result-card.status-normal {
    background: linear-gradient(145deg, var(--cat-تغذیه-و-وزن), #26deaa); /* Green */
}
.result-card.status-high { /* کم‌کاری - TSH بالا */
    background: linear-gradient(145deg, var(--cat-کودک-و-نوزاد), #ffd43b); /* Yellow */
}
.result-card.status-low { /* پرکاری - TSH پایین */
    background: linear-gradient(145deg, var(--cat-تناسب-اندام), #ff9a4f); /* Orange */
}

/* Fix text color for yellow/orange backgrounds */
.result-card.status-high .result-header,
.result-card.status-high .result-interpretation,
.result-card.status-low .result-header,
.result-card.status-low .result-interpretation {
    color: var(--text-color);
}
.result-card.status-high .result-header h3,
.result-card.status-high .result-interpretation p,
.result-card.status-low .result-header h3,
.result-card.status-low .result-interpretation p {
    color: var(--text-color);
    opacity: 0.85; /* Slightly darker for better contrast */
}
.result-card.status-high .result-value, /* Result value is handled by base style */
.result-card.status-high .result-category,
.result-card.status-low .result-value, /* Result value is handled by base style */
.result-card.status-low .result-category {
    color: var(--text-color);
}
.result-card.status-high .cta-button.secondary-cta,
.result-card.status-low .cta-button.secondary-cta {
    background: var(--text-color);
    color: white;
}
.result-card.status-high .cta-button.secondary-cta:hover,
.result-card.status-low .cta-button.secondary-cta:hover {
    background: #495057; /* Slightly lighter shade for hover */
}


/* --- Symptoms Table/Grid --- */
.symptoms-table-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 20px 0;
}

.symptom-column {
    background-color: var(--bg-color);
    padding: 20px;
    border-radius: var(--border-radius-base);
}
.symptom-column h4 {
    margin-bottom: 15px;
    font-size: 1.2rem;
    text-align: center;
}
.symptom-column ul {
    list-style: none;
    padding: 0;
}
.symptom-column li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 0.95rem;
}
.symptom-column li i {
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
}

/* Specific icon colors */
.symptom-column:first-child li i { /* کم‌کاری */
    color: #3498db; /* Blue for cold/slow */
}
.symptom-column:last-child li i { /* پرکاری */
    color: #e74c3c; /* Red for hot/fast */
}

@media (max-width: 768px) {
    .symptoms-table-container {
        grid-template-columns: 1fr; /* Stack on mobile */
    }
}

/* === تغییر ۱: افزودن احترام به prefers-reduced-motion برای transition کارت نتیجه === */
/* (Base transition is in tool-base.css, applying here for specificity if needed) */
@media (prefers-reduced-motion: reduce) {
    .result-card {
        transition: none;
    }
}