/* ╔══════════════════════════════════════════════════════╗
   ║   immunizations.css – Универсален имунизационен     ║
   ║   календар                                          ║
   ╚══════════════════════════════════════════════════════╝ */

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

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

.imm-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 32px;
  border-radius: 2px;
}

.imm-intro {
  font-size:   17px;
  color:       var(--text-muted);
  max-width:   720px;
  margin:      0 auto 36px;
  line-height: 1.7;
}

/* ════════════════════════════════
   ЛЕГЕНДА
════════════════════════════════ */
.imm-legend {
  display:         flex;
  justify-content: center;
  flex-wrap:       wrap;
  gap:             20px;
  margin-bottom:   32px;
}

.imm-legend-item {
  display:     flex;
  align-items: center;
  gap:         8px;
  font-size:   14px;
  color:       var(--brand-dark);
  font-weight: 500;
}

.imm-dot {
  width:         14px;
  height:        14px;
  border-radius: 50%;
  flex-shrink:   0;
}

/* ════════════════════════════════
   НАВИГАЦИЯ ПО ПЕРИОДИ (sticky)
════════════════════════════════ */
.imm-period-nav {
  display:         flex;
  justify-content: center;
  flex-wrap:       wrap;
  gap:             8px;
  margin-bottom:   44px;
  position:        sticky;
  top:             calc(var(--nav-height) + 8px);
  z-index:         50;
  background:      rgba(247, 252, 252, 0.9);
  backdrop-filter: blur(10px);
  padding:         10px 16px;
  border-radius:   12px;
  border:          1px solid var(--edge);
}

.imm-period-nav a {
  text-decoration: none;
  font-size:       13px;
  font-weight:     700;
  color:           var(--brand-dark);
  padding:         6px 14px;
  border-radius:   20px;
  border:          1.5px solid var(--edge-strong);
  transition:      background 0.2s, border-color 0.2s, color 0.2s;
  white-space:     nowrap;
}

.imm-period-nav a:hover {
  background:   var(--edge-soft);
  border-color: var(--brand-teal);
  color:        var(--brand-teal);
}

/* ════════════════════════════════
   TIMELINE
════════════════════════════════ */
.imm-timeline {
  display:        flex;
  flex-direction: column;
  gap:            40px;
  text-align:     left;
}

/* ════════════════════════════════
   ПЕРИОД
════════════════════════════════ */
.imm-period {
  background:      rgba(255,255,255,0.82);
  backdrop-filter: blur(8px);
  border:          1px solid var(--edge);
  border-radius:   20px;
  padding:         28px 32px 24px;
  box-shadow:      0 4px 20px var(--ink-hair);
  scroll-margin-top: calc(var(--nav-height) + 80px);
}

.imm-period-header {
  display:      flex;
  align-items:  center;
  gap:          16px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--edge);
}

.imm-period-icon {
  width:           52px;
  height:          52px;
  border-radius:   50%;
  border:          1.5px solid var(--edge-mid);
  background:      var(--edge-soft);
  color:           var(--brand-teal);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  transition:      box-shadow 0.2s;
}

/* Индивидуални цветове по период */
.imm-icon--birth    { background: #dff0fb; border-color: #aed6f1; color: var(--info-mid); }
.imm-icon--infant   { background: var(--success-bg); border-color: var(--success-edge); color: var(--success-deep); }
.imm-icon--preschool{ background: var(--warning-bg); border-color: var(--warning-edge); color: var(--warning-deep); }
.imm-icon--school   { background: var(--purple-bg); border-color: var(--purple-edge); color: var(--purple-deep); }
.imm-icon--adult    { background: var(--info-bg); border-color: var(--info-edge); color: var(--info-deep); }
.imm-icon--senior   { background: #fdebd0; border-color: #f0b27a; color: #ca6f1e; }

.imm-period-title {
  font-size:      24px;
  font-weight:    700;
  color:          var(--brand-dark);
  margin:         0 0 4px;
  letter-spacing: 0.5px;
}

.imm-period-age {
  font-size:   13px;
  color:       var(--brand-teal);
  font-weight: 600;
  letter-spacing: 0.5px;
  margin:      0;
}

/* ════════════════════════════════
   КАРТИ
════════════════════════════════ */
.imm-cards {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap:                   14px;
}

/* Компактен ред за бустерите */
.imm-cards-row {
  grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));
}

.imm-card {
  display:       flex;
  gap:           14px;
  align-items:   flex-start;
  background:    rgba(247, 252, 252, 0.7);
  border:        1px solid var(--edge);
  border-radius: 12px;
  padding:       16px 16px 14px;
  transition:    transform 0.2s, box-shadow 0.2s;
}

.imm-card:hover {
  transform:  translateY(-2px);
  box-shadow: 0 6px 20px var(--ink-hair);
}

.imm-card-dot {
  width:         12px;
  height:        12px;
  border-radius: 50%;
  background:    var(--dot);
  flex-shrink:   0;
  margin-top:    5px;
}

/* min-width: 0 — без него flex елементът не може да стане по-тесен от
   най-дългата си дума и изтласква картата навън. На 320px „Дифтерия-тетанус“
   точно това правеше: тялото ставаше 125px в карта от 114px. */
.imm-card-body {
  flex:      1;
  min-width: 0;
}

.imm-card-body h3 {
  font-size:      17px;
  font-weight:    700;
  color:          var(--brand-dark);
  margin:         0 0 6px;
  line-height:    1.3;
  overflow-wrap:  anywhere;   /* дълго име на ваксина се пренася, не стърчи */
}

.imm-card-compact .imm-card-body h3 {
  font-size: 15px;
  margin-bottom: 8px;
}

.imm-card-body p {
  font-size:   14px;
  color:       var(--text-muted);
  line-height: 1.55;
  margin:      0 0 10px;
}

/* ════════════════════════════════
   ДОЗИ ТАЙМЛАЙН
════════════════════════════════ */
.imm-doses {
  display:   flex;
  flex-wrap: wrap;
  gap:       6px;
  margin-bottom: 10px;
}

.imm-doses span {
  background:    var(--edge);
  border:        1px solid var(--edge-active);
  border-radius: 20px;
  padding:       2px 10px;
  font-size:     12px;
  font-weight:   700;
  color:         var(--brand-dark);
}

/* ════════════════════════════════
   ТАГОВЕ
════════════════════════════════ */
.imm-tag {
  display:        inline-block;
  border-radius:  20px;
  padding:        3px 10px;
  font-size:      11px;
  font-weight:    700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.imm-tag.mandatory {
  background: rgba(142, 68, 173, 0.1);
  border:     1px solid rgba(142, 68, 173, 0.3);
  color:      var(--purple-ink);
}

.imm-tag.adult {
  background: rgba(41, 128, 185, 0.1);
  border:     1px solid rgba(41, 128, 185, 0.3);
  color:      var(--info-deep);
}

.imm-tag.recommended {
  background: rgba(230, 126, 34, 0.1);
  border:     1px solid rgba(230, 126, 34, 0.3);
  color:      #935116;
}

/* ════════════════════════════════
   HIGHLIGHT BOX
════════════════════════════════ */
.imm-highlight-box {
  display:       flex;
  gap:           12px;
  align-items:   flex-start;
  background:    rgba(41, 128, 185, 0.06);
  border:        1px solid rgba(41, 128, 185, 0.25);
  border-left:   4px solid var(--info);
  border-radius: 10px;
  padding:       14px 18px;
  margin-bottom: 16px;
}

.imm-highlight-icon {
  font-size:       11px;
  font-weight:     900;
  font-style:      italic;
  width:           20px;
  height:          20px;
  border-radius:   50%;
  background:      var(--info);
  color:           #fff;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  margin-top:      2px;
}

.imm-highlight-box p {
  font-size:   14px;
  color:       #1a3a5c;
  line-height: 1.6;
  margin:      0;
}

/* ════════════════════════════════
   CTA КУТИЯ
════════════════════════════════ */
.imm-cta-box {
  display:       flex;
  align-items:   center;
  gap:           24px;
  flex-wrap:     wrap;
  background:    var(--ink-hair);
  border:        1.5px solid var(--edge-strong);
  border-radius: 18px;
  padding:       28px 32px;
  margin-top:    44px;
  text-align:    left;
}

.imm-cta-icon {
  font-size:  44px;
  flex-shrink: 0;
}

.imm-cta-text { flex: 1; min-width: 220px; }

.imm-cta-text h3 {
  font-size:   22px;
  font-weight: 700;
  color:       var(--brand-dark);
  margin:      0 0 6px;
}

.imm-cta-text p {
  font-size:   15px;
  color:       var(--text-muted);
  line-height: 1.6;
  margin:      0;
}

.imm-cta-btns {
  display:   flex;
  gap:       10px;
  flex-wrap: wrap;
}

.imm-cta-btn {
  display:       inline-flex;
  align-items:   center;
  padding:       12px 26px;
  border-radius: 12px;
  font-size:     15px;
  font-family:   inherit;
  font-weight:   700;
  cursor:        pointer;
  text-decoration: none;
  transition:    background 0.2s, transform 0.2s;
  border:        2px solid var(--brand-dark);
  white-space:   nowrap;
}

.imm-cta-primary {
  background: var(--brand-dark);
  color:      #fff;
}

.imm-cta-primary:hover {
  background: var(--brand-teal);
  border-color: var(--brand-teal);
  color:        var(--brand-dark);
}

.imm-cta-secondary {
  background:  transparent;
  color:       var(--brand-dark);
}

.imm-cta-secondary:hover {
  background: var(--edge-soft);
}

/* ════════════════════════════════
   DISCLAIMER
════════════════════════════════ */
.imm-disclaimer {
  display:       flex;
  gap:           14px;
  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;
}

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

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

/* ════════════════════════════════
   ЛИЧЕН ВАКСИНАЦИОНЕН ПЛАН
════════════════════════════════ */
.imm-personal-section {
  margin-top:    48px;
  text-align:    left;
}

.imm-personal-header {
  display:     flex;
  align-items: center;
  gap:         16px;
  margin-bottom: 24px;
}

.imm-personal-icon {
  font-size:       28px;
  width:           52px;
  height:          52px;
  background:      var(--edge);
  border-radius:   14px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}

.imm-personal-title {
  font-size:   24px;
  font-weight: 700;
  color:       var(--brand-dark);
  margin-bottom: 3px;
}

.imm-personal-sub {
  font-size: 14px;
  color:     rgba(11, 42, 47, 0.55);
}

/* Generate Card */
.imm-gen-card {
  background:    rgba(255, 255, 255, 0.70);
  backdrop-filter: blur(20px) saturate(180%);
  border:        1.5px solid var(--edge-active);
  border-radius: 18px;
  padding:       24px 28px;
  margin-bottom: 28px;
}

.imm-gen-title {
  font-size:   17px;
  font-weight: 700;
  color:       var(--brand-dark);
  margin-bottom: 6px;
}

.imm-gen-desc {
  font-size:     13px;
  color:         rgba(11, 42, 47, 0.60);
  line-height:   1.55;
  margin-bottom: 18px;
}

.imm-gen-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

.imm-gen-field {
  display:        flex;
  flex-direction: column;
  gap:            5px;
}

.imm-gen-field label {
  font-size:   13px;
  font-weight: 600;
  color:       rgba(11, 42, 47, 0.70);
}

.imm-gen-field input,
.imm-gen-field select {
  padding:       10px 14px;
  border:        1.5px solid var(--edge-active);
  border-radius: 10px;
  font-size:     14px;
  font-family:   inherit;
  color:         var(--brand-dark);
  background:    rgba(255, 255, 255, 0.80);
  outline:       none;
  transition:    border-color 0.2s, box-shadow 0.2s;
}

.imm-gen-field input:focus,
.imm-gen-field select:focus {
  border-color: var(--brand-teal);
  box-shadow:   0 0 0 3px var(--edge);
}

.imm-gen-result {
  padding:       10px 14px;
  border-radius: 10px;
  font-size:     14px;
  margin-bottom: 12px;
}

.imm-gen-success {
  background: rgba(39, 174, 96, 0.12);
  border:     1px solid rgba(39, 174, 96, 0.30);
  color:      #1a6b47;
}

.imm-gen-error {
  background: rgba(231, 76, 60, 0.10);
  border:     1px solid rgba(231, 76, 60, 0.25);
  color:      var(--danger-deep);
}

.imm-gen-btns {
  display: flex;
  gap:     10px;
  flex-wrap: wrap;
}

.imm-gen-btn {
  padding:       10px 22px;
  border-radius: 10px;
  font-size:     14px;
  font-family:   inherit;
  font-weight:   600;
  cursor:        pointer;
  border:        none;
  transition:    background 0.2s, transform 0.15s, opacity 0.2s;
}

.imm-gen-btn:disabled { opacity: .55; cursor: not-allowed; }
.imm-gen-btn:not(:disabled):hover { transform: translateY(-1px); }

.imm-gen-btn-primary  { background: var(--brand-teal); color: var(--brand-dark); }
.imm-gen-btn-primary:not(:disabled):hover  { background: #5dadb2; }
.imm-gen-btn-secondary { background: var(--edge); color: var(--brand-dark); border: 1.5px solid var(--edge-active); }
.imm-gen-btn-secondary:not(:disabled):hover { background: var(--edge-strong); }

/* Upcoming list */
.imm-upcoming-wrap {
  background:    rgba(255, 255, 255, 0.60);
  backdrop-filter: blur(20px) saturate(160%);
  border:        1.5px solid var(--edge-strong);
  border-radius: 18px;
  padding:       24px 28px;
}

.imm-upcoming-title {
  font-size:   15px;
  font-weight: 700;
  color:       var(--brand-dark);
  margin-bottom: 16px;
}

.imm-upcoming-empty {
  font-size:   14px;
  color:       rgba(11, 42, 47, 0.45);
  text-align:  center;
  padding:     20px 0;
}

.imm-upcoming-item {
  display:       flex;
  align-items:   flex-start;
  gap:           14px;
  padding:       12px 0;
  border-bottom: 1px solid var(--edge);
}

.imm-upcoming-item:last-of-type { border-bottom: none; }

.imm-upcoming-item.imm-upcoming-urgent {
  background:    rgba(231, 76, 60, 0.05);
  border-radius: 10px;
  padding:       12px 10px;
  margin:        0 -10px;
}

.imm-upcoming-dot {
  width:        10px;
  height:       10px;
  border-radius: 50%;
  margin-top:   5px;
  flex-shrink:  0;
}

.imm-upcoming-info { flex: 1; min-width: 0; }

.imm-upcoming-name {
  font-size:   14px;
  font-weight: 600;
  color:       var(--brand-dark);
  margin-bottom: 2px;
}

.imm-upcoming-date {
  font-size: 13px;
  color:     rgba(11, 42, 47, 0.55);
}

.imm-upcoming-note {
  font-size:  12px;
  color:      rgba(11, 42, 47, 0.45);
  margin-top: 2px;
  white-space: nowrap;
  overflow:   hidden;
  text-overflow: ellipsis;
}

.imm-upcoming-badge {
  font-size:     12px;
  font-weight:   600;
  padding:       3px 10px;
  border-radius: 20px;
  background:    var(--edge);
  color:         var(--brand-dark);
  white-space:   nowrap;
  flex-shrink:   0;
}

.imm-badge-urgent {
  background: rgba(231, 76, 60, 0.15);
  color:      var(--danger);
}

.imm-upcoming-calendar-link {
  display:    block;
  margin-top: 16px;
  font-size:  13px;
  font-weight: 600;
  color:      var(--brand-teal);
  text-decoration: none;
  text-align: center;
}

.imm-upcoming-calendar-link:hover { text-decoration: underline; }

/* Guest CTA */
.imm-guest-cta {
  margin-top:      32px;
  padding:         28px 32px;
  background:      rgba(255, 255, 255, 0.55);
  border:          1.5px dashed var(--edge-solid);
  border-radius:   18px;
  display:         flex;
  align-items:     center;
  gap:             16px;
  flex-wrap:       wrap;
  justify-content: center;
}

.imm-guest-icon { font-size: 28px; flex-shrink: 0; }

.imm-guest-cta p {
  font-size:  14px;
  color:      rgba(11, 42, 47, 0.65);
  flex:       1;
  min-width:  200px;
  margin:     0;
  line-height: 1.5;
}

/* ════════════════════════════════
   RESPONSIVENESS
════════════════════════════════ */
@media (max-width: 860px) {
  .imm-cards { grid-template-columns: 1fr; }
  .imm-cards-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .imm-page         { padding: 40px 20px 80px; }
  .imm-page h1      { font-size: 34px; }
  .imm-period       { padding: 20px 18px 18px; }
  .imm-period-nav   { top: calc(var(--nav-height) + 4px); gap: 6px; }
  .imm-period-nav a { font-size: 12px; padding: 5px 10px; }
  .imm-cta-box      { padding: 20px 18px; }
  .imm-cards-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .imm-gen-fields   { grid-template-columns: 1fr; }
  .imm-gen-card, .imm-upcoming-wrap { padding: 18px 16px; }
  .imm-gen-btns     { flex-direction: column; }
  .imm-gen-btn      { width: 100%; }
}
/* ════════════════════════════════
   МНОГО ТЕСНИ ЕКРАНИ (≤400px)
   Дълги български думи като „ИМУНИЗАЦИОНЕН“ не се събират на 34px.
   Заглавието слиза една стъпка и разреждането намалява.
════════════════════════════════ */
@media (max-width: 400px) {
  .imm-page h1 {
    font-size:      28px;
    letter-spacing: 0.5px;
  }
  /* Две колони при 320px дават карти от 114px — текстът в тях се реди
     буква по буква. По-добре една колона на цялата ширина. */
  .imm-cards-row { grid-template-columns: 1fr; }
}