/* ╔══════════════════════════════════════════════════════╗
   ║   symptoms.css – Проверка на симптоми               ║
   ╚══════════════════════════════════════════════════════╝ */

/* ════════════════════════════════
   СТРАНИЦА
════════════════════════════════ */
.symptoms-section {
  text-align:  center;
  padding:     60px 48px 100px;
  max-width:   960px;
  margin:      0 auto;
  margin-top:  calc(var(--nav-height) + 20px);
}

/* ════════════════════════════════
   ЗАГЛАВИЕ
════════════════════════════════ */
.symptoms-section h1 {
  font-size:      48px;
  margin-bottom:  8px;
  color:          var(--brand-dark);
  letter-spacing: 2px;
}

.sym-subtitle {
  font-size:      11px;
  color:          rgba(11, 42, 47, 0.45);
  letter-spacing: 5px;
  text-transform: uppercase;
  margin-bottom:  30px;
}

.scan-line {
  width:         80px;
  height:        3px;
  background:    linear-gradient(90deg, var(--brand-teal), var(--edge));
  margin:        0 auto 44px;
  border-radius: 2px;
}

/* ════════════════════════════════
   ПОЛЕ ЗА ВЪВЕЖДАНЕ
════════════════════════════════ */
.sym-input-wrap {
  position:  relative;
  max-width: 620px;
  margin:    0 auto 8px;
  text-align: left;
}

.sym-search-box {
  display:       flex;
  align-items:   center;
  gap:           10px;
  background:    rgba(255,255,255,0.88);
  border:        1.5px solid var(--edge-active);
  border-radius: 14px;
  padding:       12px 18px;
  box-shadow:    0 3px 14px var(--ink-hair);
  transition:    border-color 0.2s, box-shadow 0.2s;
}

.sym-search-box:focus-within {
  border-color: var(--brand-teal);
  box-shadow:   0 0 0 3px var(--edge-mid), 0 3px 14px var(--ink-hair);
}

.sym-search-icon { display: none; }

.sym-input {
  flex:        1;
  border:      none;
  outline:     none;
  background:  transparent;
  font-family: inherit;
  font-size:   17px;
  color:       var(--brand-dark);
}

.sym-input::placeholder {
  color:   rgba(11, 42, 47, 0.4);
}

/* ════════════════════════════════
   DROPDOWN
════════════════════════════════ */
.sym-dropdown {
  display:       none;
  position:      absolute;
  top:           calc(100% + 6px);
  left:          0;
  right:         0;
  background:    #fff;
  border:        1.5px solid var(--edge-active);
  border-radius: 12px;
  box-shadow:    0 8px 28px var(--ink-soft);
  list-style:    none;
  padding:       6px 0;
  margin:        0;
  z-index:       200;
  max-height:    260px;
  overflow-y:    auto;
}

.sym-dropdown li {
  padding:     10px 18px;
  font-size:   15px;
  color:       var(--brand-dark);
  cursor:      pointer;
  transition:  background 0.15s;
  outline:     none;
}

.sym-dropdown li:hover,
.sym-dropdown li:focus {
  background: rgba(199, 222, 223, 0.45);
}

.sym-dropdown li mark {
  background:    transparent;
  color:         var(--brand-teal);
  font-weight:   700;
}

/* ════════════════════════════════
   CHIPS
════════════════════════════════ */
.sym-chips-area {
  max-width:   620px;
  margin:      0 auto 24px;
  text-align:  left;
  min-height:  36px;
}

.sym-chips-label {
  font-size:   12px;
  font-weight: 600;
  color:       rgba(11, 42, 47, 0.5);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  display:     block;
  margin-bottom: 8px;
}

.sym-chips {
  display:   flex;
  flex-wrap: wrap;
  gap:       8px;
}

.sym-chip {
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  background:    var(--edge);
  border:        1.5px solid var(--edge-solid);
  border-radius: 20px;
  padding:       5px 12px 5px 14px;
  font-size:     14px;
  font-weight:   600;
  color:         var(--brand-dark);
  animation:     chipIn 0.18s ease;
}

@keyframes chipIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

.sym-chip-x {
  background:      transparent;
  border:          none;
  cursor:          pointer;
  color:           rgba(11, 42, 47, 0.45);
  padding:         0;
  line-height:     1;
  transition:      color var(--transition), background var(--transition);
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           24px;
  height:          24px;
  flex-shrink:     0;
  border-radius:   50%;
  position:        relative;
}

.sym-chip-x:hover {
  color:      var(--danger-bright);
  background: rgba(231, 76, 60, 0.14);
}

/* Зона за докосване 40px, без да уголемяваме иконката */
.sym-chip-x::after {
  content:   '';
  position:  absolute;
  top:       50%;
  left:      50%;
  width:     40px;
  height:    40px;
  transform: translate(-50%, -50%);
}

.sym-clear-btn {
  margin-top:    10px;
  background:    transparent;
  border:        1px solid rgba(231, 76, 60, 0.35);
  border-radius: 20px;
  padding:       5px 14px;
  font-size:     12px;
  font-family:   inherit;
  font-weight:   600;
  color:         rgba(231, 76, 60, 0.75);
  cursor:        pointer;
  transition:    background 0.2s, border-color 0.2s, color 0.2s;
}

.sym-clear-btn:hover {
  background:   rgba(231, 76, 60, 0.08);
  border-color: var(--danger-bright);
  color:        var(--danger-bright);
}

/* ════════════════════════════════
   АНАЛИЗИРАЙ БУТОН
════════════════════════════════ */
.sym-analyze-btn {
  display:       inline-flex;
  align-items:   center;
  gap:           8px;
  background:    var(--brand-dark);
  color:         #fff;
  border:        none;
  border-radius: 12px;
  padding:       14px 40px;
  font-size:     17px;
  font-family:   inherit;
  font-weight:   700;
  letter-spacing: 0.5px;
  cursor:        pointer;
  transition:    background 0.2s, transform 0.2s, opacity 0.2s;
  margin-bottom: 40px;
}

.sym-analyze-btn:hover:not(:disabled) {
  background: var(--brand-teal);
  color:      var(--brand-dark);
  transform:  translateY(-2px);
}

.sym-analyze-btn:disabled {
  opacity: 0.4;
  cursor:  not-allowed;
}

/* ════════════════════════════════
   EMPTY STATE
════════════════════════════════ */
.sym-empty-state {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            16px;
  padding:        60px 20px;
  color:          rgba(11, 42, 47, 0.45);
}

.sym-empty-icon { display: none; }

.sym-empty-state p {
  font-size:   17px;
  max-width:   480px;
  line-height: 1.6;
  text-align:  center;
}

/* ════════════════════════════════
   РЕЗУЛТАТИ
════════════════════════════════ */
.sym-results-wrap {
  text-align: left;
  max-width:  860px;
  margin:     0 auto;
}

.sym-results-header {
  display:         flex;
  align-items:     baseline;
  gap:             14px;
  margin-bottom:   20px;
  border-bottom:   2px solid var(--edge-mid);
  padding-bottom:  12px;
}

.sym-results-header h2 {
  font-size:      26px;
  font-weight:    700;
  color:          var(--brand-dark);
  margin:         0;
  letter-spacing: 0.5px;
}

.sym-results-count {
  font-size:   14px;
  font-weight: 600;
  color:       var(--brand-teal);
  letter-spacing: 0.5px;
}

/* Карта с резултат */
.sym-result-card {
  background:      rgba(255, 255, 255, 0.88);
  border:          1px solid var(--edge-mid);
  border-left:     4px solid var(--brand-teal);
  border-radius:   14px;
  padding:         20px 24px;
  margin-bottom:   14px;
  box-shadow:      0 3px 14px var(--ink-hair);
  transition:      transform 0.2s, box-shadow 0.2s;
  animation:       cardIn 0.3s ease both;
}

@keyframes cardIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.sym-result-card:nth-child(2) { animation-delay: 0.05s; }
.sym-result-card:nth-child(3) { animation-delay: 0.10s; }
.sym-result-card:nth-child(4) { animation-delay: 0.15s; }
.sym-result-card:nth-child(5) { animation-delay: 0.20s; }

.sym-result-card:hover {
  transform:  translateY(-2px);
  box-shadow: 0 8px 24px var(--ink-hair);
}

.sym-result-top {
  border-left-color: var(--danger-bright);
  box-shadow:        0 4px 18px rgba(231, 76, 60, 0.1);
}

.sym-rc-header {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  gap:             12px;
  margin-bottom:   10px;
}

.sym-rc-title-wrap {
  display:        flex;
  flex-direction: column;
  gap:            4px;
}

.sym-top-badge {
  display:        inline-block;
  background:     rgba(231, 76, 60, 0.12);
  border:         1px solid rgba(231, 76, 60, 0.35);
  border-radius:  20px;
  padding:        2px 10px;
  font-size:      11px;
  font-weight:    700;
  color:          var(--danger);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  width:          fit-content;
  margin-bottom:  2px;
}

.sym-rc-title {
  font-size:   20px;
  font-weight: 700;
  color:       var(--brand-dark);
  margin:      0;
  line-height: 1.2;
}

.sym-rc-title-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid var(--brand-teal);
}

.sym-rc-title-link:hover {
  color: var(--brand-teal);
}

.sym-rc-cat {
  font-size:   12px;
  color:       var(--brand-teal);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.sym-article-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             5px;
  padding:         5px 12px;
  background:      rgba(41, 128, 185, 0.08);
  border:          1.5px solid rgba(41, 128, 185, 0.35);
  border-radius:   20px;
  color:           var(--info);
  font-size:       13px;
  font-weight:     700;
  text-decoration: none;
  transition:      background 0.2s, border-color 0.2s;
  width:           fit-content;
  margin-top:      4px;
}

.sym-article-btn:hover {
  background:   rgba(41, 128, 185, 0.16);
  border-color: var(--info);
}

.sym-rc-pct {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  flex-shrink:    0;
  gap:            2px;
}

.sym-rc-pct-num {
  font-size:   26px;
  font-weight: 700;
  line-height: 1;
}

.sym-rc-pct-label {
  font-size:  11px;
  color:      rgba(11, 42, 47, 0.45);
  white-space: nowrap;
}

/* Прогрес-бар */
.sym-rc-bar-wrap {
  height:        6px;
  background:    var(--edge-soft);
  border-radius: 3px;
  overflow:      hidden;
  margin-bottom: 12px;
}

.sym-rc-bar {
  height:        100%;
  border-radius: 3px;
  transition:    width 0.6s ease;
}

.sym-rc-desc {
  font-size:   15px;
  color:       var(--text-muted);
  line-height: 1.6;
  margin:      0 0 14px;
}

/* Тагове симптоми */
.sym-rc-symptoms { display: flex; flex-direction: column; gap: 10px; }

.sym-rc-sym-group { display: flex; flex-direction: column; gap: 6px; }

.sym-rc-sym-label {
  font-size:   12px;
  font-weight: 700;
  color:       rgba(11, 42, 47, 0.5);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.sym-rc-sym-match { color: var(--brand-teal); }

.sym-rc-tags {
  display:   flex;
  flex-wrap: wrap;
  gap:       6px;
}

.sym-match-tag {
  background:    var(--edge);
  border:        1px solid var(--edge-solid);
  border-radius: 20px;
  padding:       3px 10px;
  font-size:     13px;
  font-weight:   600;
  color:         var(--brand-dark);
}

.sym-unmatch-tag {
  background:    var(--ink-hair);
  border:        1px solid var(--ink-soft);
  border-radius: 20px;
  padding:       3px 10px;
  font-size:     13px;
  color:         rgba(11, 42, 47, 0.5);
}

/* Няма резултати */
.sym-no-results {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            12px;
  padding:        48px 20px;
  color:          rgba(11, 42, 47, 0.45);
  font-size:      17px;
  text-align:     center;
}

.sym-no-results span { display: none; }

/* ════════════════════════════════
   ПРАВНА БЕЛЕЖКА
════════════════════════════════ */
.sym-disclaimer {
  display:         flex;
  gap:             16px;
  align-items:     flex-start;
  margin-top:      32px;
  padding:         20px 24px;
  background:      rgba(255, 243, 205, 0.6);
  border:          1.5px solid rgba(230, 126, 34, 0.3);
  border-radius:   12px;
  text-align:      left;
}

.sym-disclaimer-icon {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           26px;
  height:          26px;
  border-radius:   50%;
  background:      var(--warning);
  color:           #fff;
  font-size:       15px;
  font-weight:     900;
  flex-shrink:     0;
  margin-top:      2px;
}

.sym-disclaimer p {
  font-size:   14px;
  color:       #5a4000;
  line-height: 1.65;
  margin:      0;
}

.sym-disclaimer strong {
  color: #3d2a00;
}

/* ── Линк "Сравни с друга болест" в картата ── */
.sym-compare-link {
  display:         inline-block;
  margin-top:      12px;
  font-size:       13px;
  font-weight:     600;
  color:           var(--brand-teal);
  text-decoration: none;
  border-bottom:   1.5px solid transparent;
  transition:      border-color 0.18s ease, color 0.18s ease;
}

.sym-compare-link:hover {
  border-color: var(--brand-teal);
  color:        var(--teal-mid);
}

/* ── Банер "Сравни две болести" след резултатите ── */
.sym-compare-banner {
  display:         flex;
  align-items:     center;
  gap:             16px;
  margin-top:      28px;
  padding:         20px 24px;
  background:      var(--edge-soft);
  border:          1.5px solid var(--edge-strong);
  border-radius:   14px;
  text-align:      left;
  flex-wrap:       wrap;
}

.sym-compare-banner-icon {
  font-size:  1.8rem;
  flex-shrink: 0;
}

.sym-compare-banner > div {
  flex: 1 1 200px;
}

.sym-compare-banner strong {
  display:       block;
  font-size:     15px;
  color:         var(--brand-dark);
  margin-bottom: 4px;
}

.sym-compare-banner p {
  font-size:   13px;
  color:       var(--grey-700);
  margin:      0;
  line-height: 1.5;
}

.sym-compare-banner-btn {
  display:          inline-block;
  padding:          10px 20px;
  background:       var(--brand-teal);
  color:            var(--white);
  border-radius:    20px;
  font-size:        13px;
  font-weight:      700;
  text-decoration:  none;
  white-space:      nowrap;
  transition:       background 0.18s ease, transform 0.15s ease;
  flex-shrink:      0;
}

.sym-compare-banner-btn:hover {
  background: var(--teal-mid);
  transform:  translateY(-1px);
}

/* ════════════════════════════════
   RESPONSIVENESS
════════════════════════════════ */
@media (max-width: 700px) {
  .symptoms-section     { padding: 40px 20px 80px; }
  .symptoms-section h1  { font-size: 34px; letter-spacing: 1px; }
  .sym-rc-header        { flex-direction: column-reverse; align-items: flex-start; }
  .sym-rc-pct           { flex-direction: row; gap: 6px; align-items: baseline; }
  .sym-rc-pct-num       { font-size: 20px; }
}
/* ════════════════════════════════
   МНОГО ТЕСНИ ЕКРАНИ (≤400px)
   Дълги български думи като „ИМУНИЗАЦИОНЕН“ не се събират на 34px.
   Заглавието слиза една стъпка и разреждането намалява.
════════════════════════════════ */
@media (max-width: 400px) {
  .symptoms-section h1 {
    font-size:      28px;
    letter-spacing: 0.5px;
  }
}