/* ============================================================
   БАЗА — единый стиль для всех размеров
   ============================================================ */
.flag-bullet{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.flag-bullet__icon{
  flex: 0 0 auto;
  font-weight: 600;
  line-height: 1;
  font-size: 14px;              /* базовый размер */
}

.flag-bullet > .tn-atom{
  display: inline;
  margin: 0;
}

/* help-ico — круглый "!" */
.help-ico{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  width:16px !important;
  height:16px !important;
  border-radius:50% !important;
  border:1px solid currentColor !important;

  font-size:11px !important;
  font-weight:800 !important;
  line-height:1 !important;
  margin-left:8px !important;

  padding:0 !important;
  vertical-align:middle !important;
  box-sizing:border-box !important;
}

.help-ico::before{
  content:"!" !important;
}


/* ============================================================
   АДАПТИВ ПО ЭКРАНАМ
   — ты хотел точь-в-точь эти диапазоны
   ============================================================ */

/* ===== 0–382px ===== */
@media (max-width: 382px){
  .flag-bullet__icon{ font-size:12px; }          /* компактнее */
  .help-ico{
    width:14px !important;
    height:14px !important;
    font-size:10px !important;
  }
}

/* ===== 383–410px ===== */
@media (min-width: 383px) and (max-width: 410px){
  .flag-bullet__icon{ font-size:13px; }
  .help-ico{
    width:15px !important;
    height:15px !important;
    font-size:11px !important;
  }
}

/* ===== 411–766px — оставить стиль как есть ===== */
@media (min-width: 411px) and (max-width: 766px){
  .flag-bullet__icon{ font-size:14px; }          /* базовый */
  .help-ico{
    width:16px !important;
    height:16px !important;
    font-size:11px !important;
  }
}

/* ===== 767–980px ===== */
@media (min-width: 767px) and (max-width: 980px){
  .flag-bullet__icon{ font-size:15px; }
  .help-ico{
    width:17px !important;
    height:17px !important;
    font-size:12px !important;
  }
}

/* ===== 981–1278px ===== */
@media (min-width: 981px) and (max-width: 1278px){
  .flag-bullet__icon{ font-size:15px; }
  .help-ico{
    width:17px !important;
    height:17px !important;
    font-size:12px !important;
  }
}

/* ===== 1279–1332px ===== */
@media (min-width: 1279px) and (max-width: 1332px){
  .flag-bullet__icon{ font-size:15px; }
  .help-ico{
    width:17px !important;
    height:17px !important;
    font-size:12px !important;
  }
}

/* ===== 1333–1438px ===== */
@media (min-width: 1333px) and (max-width: 1438px){
  .flag-bullet__icon{ font-size:16px; }
  .help-ico{
    width:18px !important;
    height:18px !important;
    font-size:13px !important;
  }
}

/* ===== 1439–1678px ===== */
@media (min-width: 1439px) and (max-width: 1678px){
  .flag-bullet__icon{ font-size:16px; }
  .help-ico{
    width:18px !important;
    height:18px !important;
    font-size:13px !important;
  }
}

/* ===== 1679–1918px ===== */
@media (min-width: 1679px) and (max-width: 1918px){
  .flag-bullet__icon{ font-size:17px; }
  .help-ico{
    width:19px !important;
    height:19px !important;
    font-size:14px !important;
  }
}

/* ===== 1919+ px — оставить как есть ===== */
@media (min-width: 1919px){
  .flag-bullet__icon{ font-size:18px; }
  .help-ico{
    width:20px !important;
    height:20px !important;
    font-size:15px !important;
  }
}