/* ╔══════════════════════════════════════════════════════╗
   ║   diseases.css – redesigned for readability         ║
   ╚══════════════════════════════════════════════════════╝ */

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

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

.ds-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;
}

/* ════════════════════════════════
   КАТЕГОРИЕН ГРИД  (3 колони)
════════════════════════════════ */
.diseases-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   20px;
  max-width:             var(--page-max);
  margin:                0 auto;
}

/* ════════════════════════════════
   КАТЕГОРИЕНА КАРТА
════════════════════════════════ */
.disease-card {
  position:        relative;
  border-radius:   16px;
  display:         flex;
  flex-direction:  column;
  align-items:     flex-start;
  justify-content: center;
  padding:         22px 22px 20px 26px;
  cursor:          pointer;
  background:      rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(8px);
  border:          1px solid var(--edge);
  border-left:     4px solid var(--brand-teal);
  box-shadow:      0 3px 14px var(--ink-hair);
  transition:      transform 0.28s ease, box-shadow 0.28s ease, background 0.25s ease, border-color 0.25s ease;
  overflow:        hidden;
  outline:         none;
  text-align:      left;
  gap:             6px;
  min-height:      120px;
}

.disease-card:hover,
.disease-card:focus {
  transform:         translateY(-4px);
  box-shadow:        0 10px 28px var(--ink-soft);
  background:        rgba(255, 255, 255, 0.92);
  border-color:      var(--edge-solid);
  border-left-color: #5dadb2;
}

.disease-card.active {
  background:        rgba(199, 222, 223, 0.88);
  border-left-color: var(--brand-dark);
  border-color:      var(--ink-line);
  box-shadow:        0 8px 24px var(--ink-soft);
  transform:         translateY(-2px);
}

.disease-card:focus {
  box-shadow:
    0 0 0 3px var(--edge-solid),
    0 6px 20px var(--ink-hair);
}

.dc-num {
  font-size:      12px;
  font-weight:    600;
  color:          var(--brand-teal);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-family:    monospace;
  margin-bottom:  3px;
}

.dc-title {
  font-size:      17px;
  font-weight:    700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color:          var(--brand-dark);
  line-height:    1.3;
}

.dc-desc {
  font-size:   14px;
  font-weight: 400;
  color:       var(--text-muted);
  line-height: 1.5;
}

/* ════════════════════════════════
   ПАНЕЛ С БОЛЕСТИ
════════════════════════════════ */
.disease-panel {
  display:         none;
  margin-top:      28px;
  text-align:      left;
  background:      rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius:   20px;
  border:          1px solid var(--edge-mid);
  box-shadow:      0 8px 32px var(--ink-hair);
  overflow:        hidden;
  animation:       panelIn 0.3s ease;
}

.disease-panel.open { display: block; }

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

/* Хедър на панела */
.panel-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         20px 32px 16px;
  border-bottom:   2px solid var(--edge);
  background:      linear-gradient(135deg, rgba(199, 222, 223, 0.4), rgba(255,255,255,0.2));
}

.panel-header h2 {
  font-size:      28px;
  font-weight:    700;
  color:          var(--brand-dark);
  letter-spacing: 0.5px;
}

.panel-close {
  background:     transparent;
  border:         1.5px solid var(--edge-solid);
  border-radius:  20px;
  padding:        8px 20px;
  font-size:      13px;
  font-family:    inherit;
  font-weight:    600;
  cursor:         pointer;
  color:          var(--brand-dark);
  letter-spacing: 0.3px;
  transition:     background var(--transition), border-color var(--transition);
}

.panel-close:hover {
  background:   var(--muted-bg);
  border-color: var(--brand-teal);
}

/* Списък */
.panel-list { padding: 6px 0 10px; }

/* ════════════════════════════════
   БОЛЕСТ – КАРТА (details)
════════════════════════════════ */
.panel-disease {
  margin:        3px 12px;
  border-radius: 8px;
  border:        1.5px solid var(--edge);
  background:    rgba(255, 255, 255, 0.8);
  box-shadow:    0 1px 5px var(--ink-hair);
  transition:    box-shadow 0.25s ease, border-color 0.25s ease;
  overflow:      hidden;
}

.panel-disease:hover {
  border-color: var(--edge-active);
  box-shadow:   0 4px 16px var(--ink-hair);
}

.panel-disease[open] {
  border-color: var(--edge-solid);
  box-shadow:   0 6px 20px var(--ink-soft);
  background:   #fff;
}

/* ── Summary (кликаем хедър) ── */
.pd-summary {
  display:         flex;
  align-items:     center;
  gap:             10px;
  padding:         8px 14px;
  cursor:          pointer;
  list-style:      none;
  position:        relative;
  transition:      background 0.2s ease;
  min-height:      44px;
}

.pd-summary::-webkit-details-marker { display: none; }

.pd-summary:hover {
  background: rgba(199, 222, 223, 0.25);
}

.panel-disease[open] .pd-summary {
  background:    rgba(199, 222, 223, 0.2);
  border-bottom: 1px solid var(--edge);
}

/* Expand arrow */
.pd-summary::after {
  content:        '›';
  position:       absolute;
  right:          18px;
  top:            50%;
  transform:      translateY(-50%) rotate(0deg);
  font-size:      22px;
  color:          var(--brand-teal);
  transition:     transform 0.25s ease;
  line-height:    1;
}

.panel-disease[open] .pd-summary::after {
  transform: translateY(-50%) rotate(90deg);
}

/* Текстова зона в summary */
.pd-summary-text {
  flex:        1;
  min-width:   0;
  padding-right: 32px; /* място за стрелката */
}

.pd-name {
  font-size:      15px;
  font-weight:    700;
  color:          var(--brand-dark);
  line-height:    1.3;
  margin-bottom:  1px;
}

.pd-name--link a {
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid var(--edge-solid);
  transition: color 0.2s, border-color 0.2s;
}

.pd-name--link a:hover {
  color: var(--brand-teal);
  border-bottom-color: var(--brand-teal);
}

.pd-short {
  font-size:    12px;
  color:        var(--text-muted);
  line-height:  1.35;
  white-space:  nowrap;
  overflow:     hidden;
  text-overflow: ellipsis;
  max-width:    100%;
}

/* When open, let the short description wrap normally */
.panel-disease[open] .pd-short {
  white-space:   normal;
  overflow:      visible;
  text-overflow: unset;
}

/* ── Action бутони (♥ + Статия) ── */
.pd-actions {
  display:     flex;
  gap:         8px;
  align-items: center;
  flex-shrink: 0;
}

.pd-article-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             4px;
  padding:         4px 10px;
  background:      rgba(41, 128, 185, 0.09);
  border:          1.5px solid rgba(41, 128, 185, 0.35);
  border-radius:   20px;
  color:           var(--info-mid);
  font-size:       12px;
  font-weight:     700;
  text-decoration: none;
  transition:      background 0.2s, border-color 0.2s, transform 0.15s;
  white-space:     nowrap;
}

.pd-article-btn:hover {
  background:   rgba(41, 128, 185, 0.18);
  border-color: var(--info);
  transform:    translateY(-1px);
}

.pd-bookmark {
  background:      transparent;
  border:          1.5px solid var(--edge-active);
  border-radius:   50%;
  width:           34px;
  height:          34px;
  flex-shrink:     0;
  line-height:     1;
  padding:         0;
  cursor:          pointer;
  color:           var(--brand-teal);
  transition:      background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.pd-bookmark svg { display: block; }

.pd-bookmark:hover {
  background:   var(--edge-soft);
  border-color: var(--brand-teal);
  transform:    scale(1.12);
}

.pd-bookmark--active {
  color:        var(--danger-bright);
  border-color: rgba(231, 76, 60, 0.45);
}

.pd-bookmark--active:hover {
  background:   rgba(231, 76, 60, 0.1);
  border-color: var(--danger-bright);
}

/* ── Тяло на болест (разгънато) ── */
.pd-body {
  padding: 8px 12px 12px;
}

/* Секции в тялото */
.pd-section {
  margin-bottom: 6px;
  padding:       7px 12px;
  background:    rgba(247, 252, 252, 0.7);
  border-radius: 7px;
  border-left:   3px solid var(--brand-teal);
}

.pd-section:last-child { margin-bottom: 0; }

.pd-section-header {
  display:       flex;
  align-items:   center;
  gap:           5px;
  margin-bottom: 4px;
}

.pd-section-icon {
  display:      none;
}

.pd-section-title {
  font-size:      13px;
  font-weight:    700;
  color:          var(--brand-dark);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

/* Симптоми – спец. цвят */
.pd-section--symptoms { border-left-color: var(--warning); }
.pd-section--symptoms .pd-section-title { color: #b9470b; }

/* Усложнения – червен */
.pd-section--complications { border-left-color: var(--danger-bright); }
.pd-section--complications .pd-section-title { color: var(--danger); }

/* Лечение – зелен */
.pd-section--treatment { border-left-color: var(--success); }
.pd-section--treatment .pd-section-title { color: var(--success-deep); }

/* Профилактика – лилав */
.pd-section--prevention { border-left-color: var(--purple); }
.pd-section--prevention .pd-section-title { color: var(--purple-deep); }

/* Определение – тъмен */
.pd-section--definition { border-left-color: var(--brand-dark); }

/* Причини – кехлибарен */
.pd-section--causes { border-left-color: var(--warning-gold); background: rgba(240, 165, 0, 0.06); }
.pd-section--causes .pd-section-title { color: #8a5800; }

.pd-section ul {
  list-style: none;
  padding:    0;
  margin:     0;
}

.pd-section ul li {
  font-size:   14px;
  color:       #1e3a3f;
  padding:     2px 0 2px 18px;
  position:    relative;
  line-height: 1.5;
}

.pd-section ul li::before {
  content:   '◆';
  position:  absolute;
  left:      2px;
  top:       7px;
  font-size: 7px;
  color:     var(--brand-teal);
  opacity:   0.8;
}

.pd-section p {
  font-size:   14px;
  color:       #1e3a3f;
  line-height: 1.55;
  margin:      0;
}

/* ════════════════════════════════
   СТЕНА ЗА ВХОД (незалогнат)
════════════════════════════════ */
.panel-lock {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  text-align:      center;
  padding:         60px 32px 56px;
  gap:             16px;
}

.panel-lock-icon {
  width:           52px;
  height:          52px;
  border-radius:   50%;
  background:      var(--edge-soft);
  border:          2px solid var(--edge-active);
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin-bottom:   8px;
  position:        relative;
  overflow:        hidden;
}

/* Simple padlock drawn in CSS */
.panel-lock-icon::before {
  content:       '';
  display:       block;
  width:         14px;
  height:        11px;
  border:        2.5px solid var(--brand-teal);
  border-radius: 3px 3px 2px 2px;
  position:      absolute;
  bottom:        12px;
}

.panel-lock-icon::after {
  content:       '';
  position:      absolute;
  bottom:        20px;
  width:         8px;
  height:        9px;
  border:        2.5px solid var(--brand-teal);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
}

.panel-lock h3 {
  font-size:   24px;
  font-weight: 700;
  color:       var(--brand-dark);
  margin:      0;
}

.panel-lock p {
  font-size:   17px;
  color:       var(--text-muted);
  max-width:   440px;
  line-height: 1.6;
  margin:      0;
}

.panel-lock-btns {
  display:         flex;
  gap:             12px;
  margin-top:      8px;
  flex-wrap:       wrap;
  justify-content: center;
}

.panel-lock-btns .auth-submit-btn {
  min-width:     140px;
  padding:       12px 28px;
  font-size:     15px;
  border-radius: 10px;
  cursor:        pointer;
  font-family:   inherit;
  font-weight:   700;
  border:        2px solid var(--brand-dark);
  transition:    background 0.2s, color 0.2s;
}

.panel-lock-btns .panel-lock-login {
  background: var(--brand-dark);
  color:      #fff;
}

.panel-lock-btns .panel-lock-login:hover {
  background:   var(--brand-teal);
  border-color: var(--brand-teal);
  color:        var(--brand-dark);
}

.panel-lock-btns .panel-lock-register {
  background: transparent;
  color:      var(--brand-dark);
}

.panel-lock-btns .panel-lock-register:hover {
  background: var(--muted-bg);
}

/* ════════════════════════════════
   LOAD MORE BUTTON
════════════════════════════════ */
.panel-load-more {
  display:       block;
  margin:        14px auto 8px;
  background:    transparent;
  border:        1.5px solid var(--edge-solid);
  border-radius: 20px;
  padding:       9px 28px;
  font-size:     14px;
  font-family:   inherit;
  font-weight:   600;
  color:         var(--brand-dark);
  cursor:        pointer;
  transition:    background var(--transition), border-color var(--transition);
}

.panel-load-more:hover {
  background:   var(--muted-bg);
  border-color: var(--brand-teal);
}

/* ════════════════════════════════
   RESPONSIVENESS
════════════════════════════════ */
@media (max-width: 1000px) {
  .diseases-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .pd-actions      { flex-wrap: wrap; }
  .panel-disease   { margin: 3px 8px; }
  .pd-summary      { padding: 7px 12px; min-height: 44px; }
  .pd-body         { padding: 8px 10px 10px; }
  .pd-name         { font-size: 14px; }
  .pd-short        { font-size: 12px; }
  .pd-section ul li,
  .pd-section p    { font-size: 13px; }
  .pd-article-btn  { font-size: 11px; padding: 3px 8px; }
}

@media (max-width: 620px) {
  .diseases-section    { padding: 40px 20px 80px; }
  .diseases-section h1 { font-size: 34px; letter-spacing: 1px; }
  .diseases-grid       { grid-template-columns: 1fr; gap: 12px; }
  .panel-header        { padding: 16px 18px 12px; }
  .panel-header h2     { font-size: 22px; }
  .dc-title            { font-size: 17px; }
  .dc-desc             { font-size: 13px; }
}
/* ════════════════════════════════
   МНОГО ТЕСНИ ЕКРАНИ (≤400px)
   Дълги български думи като „ИМУНИЗАЦИОНЕН“ не се събират на 34px.
   Заглавието слиза една стъпка и разреждането намалява.
════════════════════════════════ */
@media (max-width: 400px) {
  .diseases-section h1 {
    font-size:      28px;
    letter-spacing: 0.5px;
  }
}