<div id="of-delivery-bar" class="of-delivery-bar">
  <div class="of-delivery-bar__inner">
    <div class="of-delivery-bar__icon">🚚</div>

    <div class="of-delivery-bar__content">
      <div class="of-delivery-bar__track-wrap">
        <div class="of-delivery-bar__track">
          <div id="of-delivery-bar-fill" class="of-delivery-bar__fill"></div>
        </div>

        <div class="of-delivery-bar__marks">
          <div class="of-delivery-bar__mark of-delivery-bar__mark--left">5 000 ₽</div>
          <div class="of-delivery-bar__mark of-delivery-bar__mark--middle">399 ₽</div>
          <div class="of-delivery-bar__mark of-delivery-bar__mark--right">0 ₽</div>
        </div>
      </div>

      <div id="of-delivery-bar-text" class="of-delivery-bar__text">
        До минимального заказа осталось 5 000 ₽
      </div>
    </div>

    <button id="of-delivery-bar-close" class="of-delivery-bar__close" type="button" aria-label="Закрыть">
      ×
    </button>
  </div>
</div>


  #of-delivery-bar.of-delivery-bar {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 99999;
    font-family: Arial, sans-serif;
    pointer-events: none;
  }

  #of-delivery-bar .of-delivery-bar__inner {
    max-width: 980px;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10);
    padding: 14px 16px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    pointer-events: auto;
  }

  #of-delivery-bar .of-delivery-bar__icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 999px;
    background: #16b394;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
  }

  #of-delivery-bar .of-delivery-bar__content {
    flex: 1;
    min-width: 0;
  }

  #of-delivery-bar .of-delivery-bar__track-wrap {
    position: relative;
  }

  #of-delivery-bar .of-delivery-bar__track {
    height: 10px;
    background: #dff5ee;
    border-radius: 999px;
    overflow: hidden;
    position: relative;
  }

  #of-delivery-bar .of-delivery-bar__fill {
    width: 0%;
    height: 100%;
    background: #16b394;
    border-radius: 999px;
    transition: width 0.35s ease;
  }

  #of-delivery-bar .of-delivery-bar__marks {
    position: relative;
    height: 28px;
    margin-top: 8px;
  }

  #of-delivery-bar .of-delivery-bar__mark {
    position: absolute;
    top: 0;
    white-space: nowrap;
    color: #16b394;
    font-weight: 700;
    line-height: 1;
  }

  #of-delivery-bar .of-delivery-bar__mark--left {
    left: 0;
    font-size: 16px;
  }

  #of-delivery-bar .of-delivery-bar__mark--middle {
    left: 71.428%;
    transform: translateX(-50%);
    font-size: 14px;
    background: #ffffff;
    border: 2px dashed #9cd8ca;
    border-radius: 999px;
    padding: 4px 10px;
  }

  #of-delivery-bar .of-delivery-bar__mark--right {
    right: 0;
    font-size: 16px;
  }

  #of-delivery-bar .of-delivery-bar__text {
    margin-top: 8px;
    font-size: 16px;
    line-height: 1.35;
    color: #444444;
  }

  #of-delivery-bar .of-delivery-bar__close {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border: none;
    background: transparent;
    color: #8d8d8d;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
  }

  #of-delivery-bar .of-delivery-bar__close:hover {
    color: #333333;
  }

  body.of-delivery-bar-visible {
    padding-bottom: 110px;
  }

  @media (max-width: 640px) {
    #of-delivery-bar.of-delivery-bar {
      left: 10px;
      right: 10px;
      bottom: 10px;
    }

    #of-delivery-bar .of-delivery-bar__inner {
      padding: 12px 12px 10px;
      gap: 10px;
      border-radius: 16px;
    }

    #of-delivery-bar .of-delivery-bar__icon {
      width: 32px;
      height: 32px;
      min-width: 32px;
      font-size: 14px;
    }

    #of-delivery-bar .of-delivery-bar__mark--left,
    #of-delivery-bar .of-delivery-bar__mark--right {
      font-size: 13px;
    }

    #of-delivery-bar .of-delivery-bar__mark--middle {
      font-size: 12px;
      padding: 4px 8px;
    }

    #of-delivery-bar .of-delivery-bar__text {
      font-size: 14px;
    }

    body.of-delivery-bar-visible {
      padding-bottom: 120px;
    }
  }
</style>

