/* Иконки площадок и услуг в selectpicker / формах заказа Sphere */

.select--icon .glyphicon,
.bootstrap-select .glyphicon[class*="ico-"] {
  width: 28px;
  height: 28px;
  min-width: 28px;
  line-height: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  font-size: 0 !important;
  color: transparent !important;
  box-shadow: none;
  background-color: transparent !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 28px 28px !important;
  vertical-align: middle;
}

.select--icon .glyphicon::before,
.bootstrap-select .glyphicon[class*="ico-"]::before {
  display: none !important;
  content: none !important;
}

.select--icon .filter-option .glyphicon,
.bootstrap-select > .dropdown-toggle .glyphicon[class*="ico-"] {
  margin-right: 10px;
}

/* В выпадающем списке — без серого квадрата из legacy style.min.css */
.bootstrap-select .dropdown-menu li a .glyphicon[class*="ico-"],
.select--icon .dropdown-menu li a .glyphicon {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  background-color: transparent !important;
  background-size: 28px 28px !important;
  margin-right: 12px;
  border-radius: 0;
  box-shadow: none;
}

/* Создание заказа в ЛК: без серых точек/квадратов, площадки чуть меньше */
.sphere-acc-create .glyphicon[class*="ico-"],
.sphere-acc-create .bootstrap-select .glyphicon[class*="ico-"],
.sphere-acc-create .bootstrap-select .dropdown-menu li a .glyphicon[class*="ico-"] {
  background-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.sphere-acc-create .bootstrap-select.platform-select .glyphicon[class*="ico-"],
.sphere-acc-create .bootstrap-select.platform-select .dropdown-menu li a .glyphicon[class*="ico-"] {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  background-size: 24px 24px !important;
}

.sphere-acc-create .bootstrap-select.platform-select > .dropdown-toggle .glyphicon[class*="ico-"] {
  margin-right: 10px !important;
}

/* Иконки через <img> — без серых точек от legacy glyphicon + #F5F5FA */
.sphere-select-ico {
  display: inline-block;
  width: 24px;
  height: 24px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 10px;
  flex: 0 0 auto;
}

.sphere-select-ico--platform {
  width: 22px;
  height: 22px;
}

.sphere-select-ico-txt {
  vertical-align: middle;
}

.sphere-acc-create .select--icon .dropdown-menu li a {
  display: grid !important;
  grid-template-columns: 29px 0 1fr !important;
  gap: 9px !important;
  align-items: center !important;
}

.sphere-acc-create .select--icon .dropdown-menu li a .glyphicon[class*="ico-"] {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  margin-right: 0 !important;
  background-color: transparent !important;
  background-size: 24px 24px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.sphere-acc-create .select--icon .dropdown-menu li {
  list-style: none !important;
  margin-bottom: 0 !important;
}

/* --- Площадки --- */
.ico-instagram,
.ico-Instagram { background-image: url(/assets/img/platform-ico/instagram.svg); background-color: transparent !important; }
.ico-telegram,
.ico-Telegram { background-image: url(/assets/img/platform-ico/telegram.svg); background-color: transparent !important; }
.ico-vkontakte,
.ico-Vkontakte,
.ico-vk,
.ico-Vk { background-image: url(/assets/img/platform-ico/vk.svg); background-color: transparent !important; }
.ico-tiktok,
.ico-TikTok,
.ico-tikTok { background-image: url(/assets/img/platform-ico/tiktok.svg); background-color: transparent !important; }
.ico-youtube,
.ico-YouTube,
.ico-youTube { background-image: url(/assets/img/platform-ico/youtube.svg); background-color: transparent !important; }
.ico-discord,
.ico-Discord { background-image: url(/assets/img/platform-ico/discord.svg); background-color: transparent !important; }
.ico-twitch,
.ico-Twitch { background-image: url(/assets/img/platform-ico/twitch.svg); background-color: transparent !important; }
.ico-twitter,
.ico-Twitter,
.ico-x,
.ico-X { background-image: url(/assets/img/platform-ico/twitter.svg); background-color: transparent !important; }
.ico-likee,
.ico-Likee { background-image: url(/assets/img/platform-ico/likee.svg); background-color: transparent !important; }
.ico-rutube,
.ico-RuTube { background-image: url(/assets/img/platform-ico/rutube.svg); background-color: transparent !important; }
.ico-max,
.ico-Max { background-image: url(/assets/img/platform-ico/max.svg); background-color: transparent !important; }
.ico-threads,
.ico-Threads { background-image: url(/assets/img/platform-ico/threads.svg); background-color: transparent !important; }
.ico-pinterest,
.ico-Pinterest { background-image: url(/assets/img/platform-ico/pinterest.svg); background-color: transparent !important; }
.ico-facebook,
.ico-Facebook { background-image: url(/assets/img/platform-ico/facebook.svg); background-color: transparent !important; }
.ico-ok,
.ico-Ok { background-image: url(/assets/img/platform-ico/ok.svg); background-color: transparent !important; }
.ico-trafic,
.ico-Trafic,
.ico-traffic,
.ico-Traffic { background-image: url(/assets/img/platform-ico/trafic.svg); background-color: transparent !important; }
.ico-app,
.ico-App,
.ico-apps,
.ico-Apps { background-image: url(/assets/img/platform-ico/apps.svg); background-color: transparent !important; }
.ico-snapchat,
.ico-Snapchat { background-image: url(/assets/img/platform-ico/snapchat.svg); background-color: transparent !important; }
.ico-tumblr,
.ico-Tumblr { background-image: url(/assets/img/platform-ico/tumblr.svg); background-color: transparent !important; }

/* --- Типы услуг --- */
.ico-users,
.ico-Users { background-image: url(/static/design/img/ico/service/blue/users.svg?v=sphere-purple1); }
.ico-heart,
.ico-Heart { background-image: url(/static/design/img/ico/service/blue/heart.svg?v=sphere-purple1); }
.ico-eye,
.ico-Eye { background-image: url(/static/design/img/ico/service/blue/eye.svg?v=sphere-purple1); }
.ico-chat,
.ico-Chat { background-image: url(/static/design/img/ico/service/blue/chat.svg?v=sphere-purple1); }
.ico-video,
.ico-Video { background-image: url(/static/design/img/ico/service/blue/video.svg?v=sphere-purple1); }
.ico-radio,
.ico-Radio { background-image: url(/static/design/img/ico/service/blue/radio.svg?v=sphere-purple1); }
.ico-bookmark,
.ico-Bookmark { background-image: url(/static/design/img/ico/service/blue/bookmark.svg?v=sphere-purple1); }
.ico-profile,
.ico-Profile { background-image: url(/static/design/img/ico/service/blue/profile.svg?v=sphere-purple1); }
.ico-category,
.ico-Category { background-image: url(/static/design/img/ico/service/blue/category.svg?v=sphere-purple1); }
.ico-tablet,
.ico-Tablet { background-image: url(/static/design/img/ico/service/blue/tablet.svg?v=sphere-purple1); }
.ico-repost,
.ico-Repost { background-image: url(/static/design/img/ico/service/blue/repost.svg?v=sphere-purple1); }
.ico-share,
.ico-Share { background-image: url(/static/design/img/ico/service/blue/share.svg?v=sphere-purple1); }
.ico-friends,
.ico-Friends { background-image: url(/static/design/img/ico/service/blue/friends.svg?v=sphere-purple1); }
.ico-react,
.ico-React { background-image: url(/static/design/img/ico/service/blue/react.svg?v=sphere-purple1); }
.ico-boost,
.ico-Boost { background-image: url(/static/design/img/ico/service/blue/boost.svg?v=sphere-purple1); }
.ico-autoview,
.ico-Autoview { background-image: url(/static/design/img/ico/service/blue/autoview.svg?v=sphere-purple1); }
.ico-bot,
.ico-Bot { background-image: url(/static/design/img/ico/service/blue/bot.svg?v=sphere-purple1); }
.ico-star,
.ico-Star { background-image: url(/static/design/img/ico/service/blue/star.svg?v=sphere-purple1); }
.ico-lightning,
.ico-Lightning { background-image: url(/static/design/img/ico/service/blue/lightning.svg?v=sphere-purple1); }
.ico-service-ico { background-image: url(/static/design/img/ico/service/blue/users.svg?v=sphere-purple1); }
.ico-service-heart { background-image: url(/static/design/img/ico/service/blue/heart.svg?v=sphere-purple1); }
.ico-service-video { background-image: url(/static/design/img/ico/service/blue/video.svg?v=sphere-purple1); }
.ico-service-eye2 { background-image: url(/static/design/img/ico/service/blue/eye.svg?v=sphere-purple1); }
.ico-service-dashboard { background-image: url(/static/design/img/ico/service/blue/category.svg?v=sphere-purple1); }

/* Кнопка «Создать заказ» — всегда в одну строку */
.form-btn,
.sphere-acc-create .form-btn,
.sphere-svc-page .form-btn,
.sphere-qo-form .form-btn,
#svc-submit,
#acc-submit {
  white-space: nowrap !important;
}

/* Ссылка + количество в одну строку */
.sphere-link-qty {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px;
  gap: 10px 12px;
  align-items: end;
  margin-bottom: 16px;
}

.sphere-link-qty--multi {
  grid-template-columns: minmax(0, 1fr) 120px 40px;
}

.sphere-link-qty__url {
  grid-column: 1;
}

.sphere-link-qty__count {
  grid-column: 2;
}

.sphere-link-qty__limits {
  grid-column: 1 / -1;
  margin: 0;
}

/* Подсказки «Ссылок: N из 20» и «от … до …» — под последней строкой */
.sphere-urls-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px;
  gap: 2px 12px;
  margin: 2px 0 10px;
  align-items: start;
}

.sphere-urls-meta.is-multi {
  grid-template-columns: minmax(0, 1fr) 120px 40px;
}

.sphere-urls-meta__spacer {
  display: none;
}

.sphere-urls-meta.is-multi .sphere-urls-meta__spacer {
  display: block;
}

.sphere-urls-hint {
  grid-column: 1;
  margin: 0;
  padding: 0 0 0 10px;
  color: #8181a5;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
}

.sphere-urls-hint[hidden] {
  display: none !important;
}

.sphere-qty-limits {
  display: block !important;
  grid-column: 2;
  margin: 0 !important;
  padding: 0 0 0 10px;
  background: none;
  border: 0;
}

.sphere-qty-limits .limits_title,
.sphere-qty-limits.limits {
  color: #8181a5;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
}

.sphere-qty-limits .limits__img {
  display: none !important;
}

.sphere-acc-extra-urls:empty,
.sphere-svc-extra-urls:empty,
.sphere-qo-extra-urls:empty,
.sphere-extra-urls:empty {
  display: none;
  margin: 0;
}

.sphere-link-qty__remove {
  grid-column: 3;
  height: 50px;
  min-height: 50px;
  align-self: end;
}

.sphere-link-qty__remove[hidden] {
  display: none !important;
}

.sphere-link-qty .form-group {
  margin-bottom: 0 !important;
}

.sphere-acc-create .price_total,
.sphere-svc-page .price_total,
#acc-total,
#svc-total {
  font-weight: 700 !important;
  font-size: 16px !important;
}

@media (max-width: 576px) {
  .sphere-link-qty {
    grid-template-columns: 1fr;
  }
  .sphere-link-qty--multi {
    grid-template-columns: minmax(0, 1fr) 40px;
    grid-template-areas:
      "url remove"
      "count remove";
  }
  .sphere-link-qty--multi .sphere-link-qty__url { grid-area: url; }
  .sphere-link-qty--multi .sphere-link-qty__count { grid-area: count; }
  .sphere-link-qty--multi .sphere-link-qty__remove {
    grid-area: remove;
    align-self: stretch;
    height: auto;
    min-height: 50px;
  }
  .sphere-link-qty__url,
  .sphere-link-qty__count,
  .sphere-link-qty__limits {
    grid-column: 1;
  }

  .sphere-urls-meta,
  .sphere-urls-meta.is-multi {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .sphere-urls-hint,
  .sphere-qty-limits {
    grid-column: 1;
    padding-left: 10px;
  }

  .sphere-urls-meta__spacer {
    display: none !important;
  }
}

/* Доп. ссылки «+ ещё ссылка» — как основные outline-поля */
.sphere-acc-extra-urls,
.sphere-svc-extra-urls,
.sphere-extra-urls {
  display: grid;
  gap: 14px;
  margin: 4px 0 10px;
}

.sphere-extra-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px 40px;
  gap: 10px;
  align-items: end;
}

.sphere-extra-row__url,
.sphere-extra-row__count {
  margin-bottom: 0 !important;
}

.sphere-extra-row .form-control {
  width: 100%;
}

.sphere-extra-remove {
  border: 1px solid #ececf2;
  background: #f5f5fa;
  border-radius: 10px;
  height: 50px;
  width: 40px;
  cursor: pointer;
  color: #8181a5;
  font-size: 22px;
  line-height: 1;
  padding: 0;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.sphere-extra-remove:hover {
  color: #e76666;
  border-color: #f0c4c4;
  background: #fff5f5;
}

.sphere-order-add,
.sphere-acc-add,
.sphere-svc-add,
.sphere-qo-add {
  margin: 0 0 16px;
  background: none;
  border: 0;
  color: #7874fe;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  font-size: 14px;
}

.sphere-order-add[hidden],
.sphere-acc-add[hidden],
.sphere-svc-add[hidden],
.sphere-qo-add[hidden] {
  display: none !important;
}

@media (max-width: 576px) {
  .sphere-extra-row {
    grid-template-columns: minmax(0, 1fr) 40px;
    grid-template-areas:
      "url remove"
      "count remove";
  }
  .sphere-extra-row__url { grid-area: url; }
  .sphere-extra-row__count { grid-area: count; }
  .sphere-extra-remove {
    grid-area: remove;
    align-self: stretch;
    height: auto;
    min-height: 50px;
  }
}

/* Быстрый заказ (ПК): без иконок типов услуг, на мобилке оставляем */
@media (min-width: 901px) {
  .sphere-qo-form #step2_services .radio label .img {
    display: none !important;
  }
}