@charset "UTF-8";
/*
 * font-display: optional (не swap) — если шрифт не успел долиться за ~100мс
 * блок-период, страница один раз рисуется системным sans-serif и на этом
 * останавливается: никакого видимого "переключения" с жирного фолбэка на
 * тонкий Nunito после отрисовки. Шрифт подтянется к следующей навигации,
 * когда он уже в кэше браузера. В паре с <link rel="preload"> на Regular/
 * SemiBold/Bold в tpl/header.php и tpl/admin/header.php это покрывает и
 * самый первый заход (инкогнито/чистый кэш).
 */
@font-face {
  font-family: nunito;
  src: url(../fonts/NunitoSans_7pt-ExtraLight.woff2), url(../fonts/NunitoSans_7pt-ExtraLight.woff);
  font-weight: 200;
  font-display: optional;
  font-style: normal;
}
@font-face {
  font-family: nunito;
  src: url(../fonts/NunitoSans_7pt-Light.woff2), url(../fonts/NunitoSans_7pt-Light.woff);
  font-weight: 300;
  font-display: optional;
  font-style: normal;
}
@font-face {
  font-family: nunito;
  src: url(../fonts/NunitoSans_7pt-Regular.woff2), url(../fonts/NunitoSans_7pt-Regular.woff);
  font-weight: 400;
  font-display: optional;
  font-style: normal;
}
@font-face {
  font-family: nunito;
  src: url(../fonts/NunitoSans_7pt-SemiBold.woff2), url(../fonts/NunitoSans_7pt-SemiBold.woff);
  font-weight: 600;
  font-display: optional;
  font-style: normal;
}
@font-face {
  font-family: nunito;
  src: url(../fonts/NunitoSans_7pt-Bold.woff2), url(../fonts/NunitoSans_7pt-Bold.woff);
  font-weight: 700;
  font-display: optional;
  font-style: normal;
}
* {
  padding: 0;
  margin: 0;
  border: 0;
}

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/*
 * Декоративные картинки не таскаются и не выделяются (ghost-drag в
 * адресную строку / «синяя рамка» при клике). Это UX, не security:
 * URL /assets/images/* и так публичный, его видно в исходнике страницы.
 */
img, svg, picture, video {
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

:focus, :active {
  outline: none;
}

a:focus, a:active {
  outline: none;
}

nav, footer, header, aside {
  display: block;
}

html, body {
  height: 100%;
  width: 100%;
  font-size: 100%;
  line-height: 1;
  font-size: 14px;
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

input, button, textarea {
  font-family: inherit;
}

input::-ms-clear {
  display: none;
}

button {
  cursor: pointer;
}

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

a, a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

ul li {
  list-style: none;
}

img {
  vertical-align: top;
}

h1, h2, h3, h4, h5, h6 {
  font-style: inherit;
  font-weight: 400;
}

button {
  background-color: transparent;
  border: none;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

body {
  overflow-x: hidden;
  min-width: 320px;
  background: #F0F3F9;
  font-family: nunito, sans-serif;
  color: #000;
  line-height: normal;
  letter-spacing: 0px;
}

.wrapper {
  min-height: 100%;
  position: relative;
  display: grid;
  grid-template-columns: 285px calc(100vw - 285px - 15px);
  grid-template-columns: 285px calc(100% - 285px);
}
.wrapper:has(.reg-and-log) {
  display: block;
}
.wrapper:has(.reg-and-log) .sidebar {
  display: none;
}

.main {
  flex: 1 0 auto;
  padding: 40px 0;
  grid-column: 2/3;
}

.header {
  flex: 1 0 auto;
}

.footer {
  flex: 0 0 auto;
}

.container {
  max-width: 1050px;
  width: 100%;
  margin: 0 auto;
  padding: 0 15px;
  margin: 0 auto 0 0;
  padding: 0 15px 0 60px;
}
.container:has(.purchases__items-box) {
  padding-left: 60px;
}
.service__box-presets {
  margin-top: 25px;
}

.service__private-services {
  margin-top: 25px;
}
.service__divider {
  border: none;
  border-top: 1px solid #E4E4E7;
  margin: 0 0 25px;
}
.private-services-table th:nth-child(1),
.private-services-table td:nth-child(1) {
  min-width: 150px;
  width: 150px;
  max-width: 150px;
}
.private-services-table th:nth-child(11),
.private-services-table td:nth-child(11) {
  min-width: 110px;
  width: 110px;
  max-width: 110px;
}
.private-services-table td .private-service-users-btn {
  width: 100%;
}

.private-service-users {
  min-width: 340px;
}
.private-service-users__list {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid #E4E4E7;
  border-radius: 8px;
  padding: 6px;
}
.private-service-users__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  font-size: 13px;
  cursor: pointer;
  border-radius: 6px;
}
.private-service-users__item:hover {
  background: #F4F4F5;
}
.private-service-users__item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.white-hub-table th:nth-child(1),
.white-hub-table td:nth-child(1) {
  min-width: 140px;
  width: 140px;
  max-width: 140px;
}
.white-hub-table th:nth-child(5),
.white-hub-table td:nth-child(5),
.white-hub-table th:nth-child(6),
.white-hub-table td:nth-child(6) {
  min-width: 160px;
  width: 160px;
  max-width: 160px;
}
.white-hub-table th:nth-child(5) input,
.white-hub-table td:nth-child(5) input,
.white-hub-table th:nth-child(6) input,
.white-hub-table td:nth-child(6) input {
  max-width: 100%;
  width: 100%;
}
.white-hub-table th:nth-child(7),
.white-hub-table td:nth-child(7) {
  min-width: 200px;
  width: 200px;
}
.white-hub-table textarea.white-hub-config {
  min-height: 35px;
  width: 100%;
  resize: vertical;
  font-family: inherit;
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid #E7EBEE;
}

/*
 * Private-таблица: колонки User/Note стоят сразу после Priority (5-6),
 * чтобы были видны без горизонтального скролла; креды (API Key/Secret,
 * Config) — правее (7-9) и скроллятся. База .white-hub-table настраивает
 * позиции 5-7, поэтому для private переопределяем их явно.
 */
#white-hub-private-table th:nth-child(5),
#white-hub-private-table td:nth-child(5),
#white-hub-private-table th:nth-child(6),
#white-hub-private-table td:nth-child(6) {
  min-width: 170px;
  width: 170px;
  max-width: 170px;
}
#white-hub-private-table th:nth-child(6) input,
#white-hub-private-table td:nth-child(6) input {
  max-width: 100%;
  width: 100%;
}
#white-hub-private-table th:nth-child(7),
#white-hub-private-table td:nth-child(7),
#white-hub-private-table th:nth-child(8),
#white-hub-private-table td:nth-child(8) {
  min-width: 160px;
  width: 160px;
  max-width: 160px;
}
#white-hub-private-table th:nth-child(7) input,
#white-hub-private-table td:nth-child(7) input,
#white-hub-private-table th:nth-child(8) input,
#white-hub-private-table td:nth-child(8) input {
  max-width: 100%;
  width: 100%;
}
#white-hub-private-table th:nth-child(9),
#white-hub-private-table td:nth-child(9) {
  min-width: 200px;
  width: 200px;
}

.title-box {
  width: 100%;
  padding-bottom: 10px;
  border-bottom: 1px solid #B0B0B0;
  margin-bottom: 20px;
}
.title-box--line {
  padding-bottom: 0;
  margin-bottom: 14px;
}

.title {
  font-size: 20px;
  font-weight: 700;
}
h3.title {
  font-size: 16px;
}

.title--up {
  text-transform: uppercase;
}

a {
  font-family: nunito, sans-serif;
  color: #000;
  line-height: normal;
}

.logo {
  margin-bottom: 40px;
}
.logo__img {
  display: block;
  /*
   * Ширина/высота продублированы из width/height атрибутов <img> —
   * без них браузер не знает пропорции SVG до его загрузки и резервирует
   * нулевую высоту, из-за чего меню под логотипом "прыгает" вниз в момент
   * рендера. Фиксируем размер сразу, чтобы верстка не зависела от таймингов
   * загрузки картинки.
   */
  width: 49px;
  height: 86px;
}

.nav__list {
  display: flex;
  flex-direction: column;
  gap: 17px;
}
.nav__item-services {
  margin-top: 24px;
}
.nav__item-account {
  margin-top: 24px;
}
.nav__link {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 15px;
  font-size: 16px;
  font-weight: 600;
}
.nav__count {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #EB5757;
  color: #FFF;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
}

.btn ,
.button{
  width: fit-content;
  min-height: 35px;
  padding: 5px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  border-radius: 4px;
  background-color: #4D4AFD;
  color: #FFF;
  font-size: 16px;
  font-weight: 400;
}
.btn:active {
  background-color: #000;
}
.btn--green {
  background-color: #009A2B;
}
.btn--cancel {
  min-height: 35px;
  padding: 5px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  border: 1px solid #E7EBEE;
  color: #B0B0B0;
  font-size: 16px;
  font-weight: 400;
}
.btn--cancel:active {
  color: #000;
  background-color: #E7EBEE;
}
.btn--muted {
  min-height: 35px;
  padding: 5px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  border: 1px solid #E7EBEE;
  background-color: #E7EBEE;
  color: #000;
  font-size: 14px;
  font-weight: 400;
}
.btn__copy {
  width: 17px;
  height: 17px;
}
.btn.default {
    background: #696969;
}
.btn--search {
  max-width: 92px;
  width: 100%;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #4D4AFD;
}
.btn--action {
  min-width: 60px;
  min-height: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #000;
  font-size: 7px;
  font-weight: 400;
  text-transform: uppercase;
  border-radius: 4px;
  border: 1px solid #E7EBEE;
}

.socials__link {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 15px;
}
.socials__link img {
  display: block;
  width: 27px;
}
.socials__link span {
  font-size: 14px;
  font-weight: 600;
}

.copyright {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 8px;
}
.copyright a {
  color: #B0B0B0;
  font-size: 10px;
  font-weight: 300;
}

.icon-nav {
  width: 19px;
  height: 19px;
  fill: #231F20;
}
/*
 * "Не открывал ещё Services" — пульсирующая зелёная точка вместо
 * иконки в сайдбаре (см. tpl/sidebar.php, услуги usermeta
 * "services_menu_seen"). Обёртка 19x19 — тот же footprint, что и у
 * .icon-nav рядом, чтобы пункт меню не дёргался по ширине/высоте,
 * когда точка после первого захода на страницу сменится на иконку.
 */
.nav__services-badge {
  width: 19px;
  height: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nav__services-badge-dot {
  position: relative;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #009A2B;
}
.nav__services-badge-dot::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  animation: pulse-ring 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse-ring {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(2.8);
    opacity: 0;
  }
}
.icon-eye {
  width: 15px;
  height: 15px;
  stroke: #242424;
  fill: transparent;
}
.icon-exit {
  width: 15px;
  height: 15px;
  stroke: #242424;
  fill: transparent;
}
.icon-copy {
  width: 17px;
  height: 17px;
  pointer-events: none;
}
.icon-chevron {
  width: 19px;
  height: 19px;
  stroke: #B0B0B0;
  fill: transparent;
}
.icon-reset {
  width: 18px;
  height: 16px;
  fill: #B0B0B0;
}
.icon-info {
  width: 13px;
  height: 13px;
  fill: #B0B0B0;
  cursor: pointer;
}
.icon-arrow-tringle {
  width: 12px;
  height: 10px;
  fill: #D9D9D9;
}
.icon-arrow-green {
  width: 22px;
  height: 35px;
  stroke: #009A2B;
  fill: transparent;
}
.icon-search {
  width: 24px;
  height: 24px;
  stroke: #fff;
  fill: transparent;
}
.icon-dropdown-tringle {
  width: 13px;
  height: 12px;
  fill: #D9D9D9;
}
.icon-use {
  width: 23px;
  height: 20px;
  stroke: #242424;
  fill: transparent;
}
.icon-edit {
  width: 17px;
  height: 17px;
  stroke: transparent;
  fill: #231F20;
}
.icon-plus {
  width: 16px;
  height: 16px;
  fill: #231F20;
}

.text-color, .text--red {
  color: #FD6A4A;
}
.text--green {
  color: #009A2B;
}
.text--muted {
  color: #B0B0B0 !important;
}
.text--violet, .text--blue {
  color: #4D4AFD;
}
.text--black {
  color: #000;
}
.text--orange {
  color: #E08A00;
}

.input-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  margin: 0;
  padding: 0;
  border: none;
}

.rating {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  font-size: 15px;
  line-height: 0.833;
}
.rating__value {
  color: #000;
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
}
.rating__body {
  position: relative;
}
.rating__body::before {
  content: "★★★★★";
  display: block;
  color: rgba(77, 74, 253, 0.18);
}
.rating__active {
  position: absolute;
  width: 0%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
}
.rating__active::before {
  content: "★★★★★";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  color: #4D4AFD;
}
.rating__items {
  display: flex;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.rating__item {
  flex: 0 0 20%;
  height: 100%;
  opacity: 0;
}

hr {
  width: 100%;
  border: none;
  border-top: 2px dotted black;
}

.rate__circle-wrapper {
  rotate: 45deg;
  transform: scale(-1, 1);
}
.rate__circle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  overflow: hidden;
  background: #000;
  color: #000;
  width: 44px;
  height: 44px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
}
.rate__circle span {
  position: relative;
  display: flex;
  z-index: 2;
  rotate: 45deg;
  transform: scale(-1, 1);
  font-weight: 600;
}
.rate__circle span small {
  font-size: 1em;
  font-weight: inherit;
  align-self: center;
}
.rate__circle::after {
  content: "";
  position: absolute;
  inset: 4px;
  background: #fff;
  border-radius: inherit;
  z-index: 1;
}
.rate__circle::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: inherit;
  box-shadow: 0 0 0 1rem #D9D9D9;
  z-index: -1;
}

.table-wrapper {
  overflow-x: auto;
  width: calc(100% + 2px);
  padding-bottom: 100px;
  margin-bottom: -100px;
}
.table-wrapper table {
  border-collapse: collapse;
}
.table-wrapper th,
.table-wrapper td {
  padding: 8px 12px;
}
.table-wrapper th {
  height: 35px;
  border: 1px solid #E7EBEE;
  background: #F5FEFB;
  color: #000;
  font-size: 14px;
  font-weight: 700;
}
.table-wrapper td {
  min-height: 32px;
  border: 1px solid #E7EBEE;
  background: #FFF;
  font-size: 12px;
  font-weight: 400;
}

.table__btn--popup {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}

.search {
  height: 35px;
  display: flex;
  border-radius: 4px;
  border: 1px solid #E7EBEE;
  color: #000;
  font-size: 14px;
  font-weight: 400;
}
.search__input {
  width: 100%;
  height: 100%;
  padding: 5px 30px;
  border-radius: 4px 0px 0px 4px;
  background-color: #fff;
}
.search__input::placeholder {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}
.search__btn {
  width: 35px;
  height: 100%;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0px 4px 4px 0px;
  border-left: 1px solid #E7EBEE;
  background: #E7EBEE;
}
.search .icon-search {
  stroke: #242424;
}

.admin-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 25px;
}
.admin-footer__link {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 5px;
  color: #000;
  font-size: 10px;
  font-weight: 300;
}

.line--vertical {
  display: block;
  width: 1px;
  height: 1em;
  background-color: #B0B0B0;
}

.header__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.footer__inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form {
  font-family: nunito, sans-serif;
  color: #000;
  line-height: normal;
  letter-spacing: 0px;
}
.form__input-boxes {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.form__input-box {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid #E7EBEE;
  background: #FFF;
}
.form__input-box.disabled {
  background: #fafafa;
}
/*
 * Лёгкий красный контур для полей, которых не хватает перед покупкой
 * лейбла (см. app.js checkBuyGate()/updateBuyReadiness()). Старый общий
 * .error красил только текст (color:#f00) и был практически незаметен на
 * пустом инпуте — отсюда и жалобы, что непонятно, чего не хватает.
 */
.form__input-box.field-invalid,
.package-size__input-box.field-invalid {
  border-color: #FD6A4A;
  box-shadow: 0 0 0 1px #FD6A4A;
}
.form-group.field-invalid .dropdown__button {
  border-color: #FD6A4A;
  box-shadow: 0 0 0 1px #FD6A4A;
}
.form__input {
  width: 100%;
  height: 100%;
  padding: 23px 25px 8px;
  color: #000;
  font-size: 14px;
  font-weight: 400;
}
.form__label {
  position: absolute;
  top: 15.5px;
  left: 25px;
  pointer-events: none;
  transition: all 0.1s linear;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  white-space: nowrap;
  color: #B0B0B0;
  font-size: 14px;
  font-weight: 400;
}
.form__input:focus + .form__label, .form__input:focus-visible + .form__label, .form__input:not(:placeholder-shown) + .form__label {
  top: 8px;
  font-size: 10px;
}
.form__input-box--search {
  height: 35px;
  padding: 0;
  border-radius: 4px;
  overflow: hidden;
}
.form__input-box--search .form__input {
  padding: 5px 30px;
  border-right: 1px solid #E7EBEE;
}
.form__input-box--search .form__input::placeholder {
  color: #000;
  font-size: 14px;
  font-weight: 400;
}
.form__copy-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}

.data-picker__label {
  width: 100%;
  height: 25px;
  padding: 0 7.5px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  cursor: pointer;
  z-index: 3;
  background-image: url(../images/icons/calendar.svg);
  background-repeat: no-repeat;
  background-size: 13px 11px;
  background-position: calc(100% - 7.5px) center;
  border-radius: 3px;
  border: 1px solid #E7EBEE;
  background-color: #FFF;
}
.data-picker__input {
  cursor: pointer;
  background-color: transparent;
  color: #000;
  font-size: 10px;
  font-weight: 400;
}

/*
 * Единый виджет "от/до" вместо старой пары независимых календарей: один
 * инпут, внутри которого можно выбрать как один день, так и диапазон.
 * Скрытые date/date2 остаются как были — бэкенд их не заметил. Пресеты,
 * Reset и Submit теперь живут внутри самого попапа календаря (см.
 * assets/js/daterange.js), поэтому снаружи инпута — просто поле.
 */
.date-range-filter {
  width: 100%;
  position: relative;
}
.date-range-filter .data-picker__label {
  width: 100%;
}
.date-range-filter__input {
  width: 100%;
}

.add-file__box {
  width: 130px;
  height: 35px;
  flex-shrink: 0;
  position: relative;
  border-radius: 4px;
  border: 1px dashed #D9D9D9;
  font-size: 12px;
  font-weight: 400;
}
.add-file__input {
  width: 100%;
  height: 100%;
  opacity: 0;
  padding: 5px 20px;
  cursor: pointer;
}
.add-file__input::-webkit-file-upload-button {
  visibility: hidden;
}
.add-file__img {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: cover;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 21px;
  pointer-events: none;
}
.add-file__text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 50px;
  pointer-events: none;
}

.input,
.input-buffer {
  color: #000;
  font-family: nunito, sans-serif;
  font-size: 14px;
}

.input {
  width: 100px;
  min-width: 100px;
}

.input-buffer {
  position: absolute;
  top: -1000px;
  left: -1000px;
  visibility: hidden;
  white-space: nowrap;
}

.copy-box {
  display: flex;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 10px;
  flex-direction: row-reverse;
}
.copy-box.copied .icon-copy {
  stroke: #009A2B;
}
.copy-box.copied .copy-input {
  color: #009A2B;
}

.btn__copy.copied .icon-copy {
  stroke: #009A2B;
}
.btn__copy.copied ~ .copy-input {
  color: #009A2B;
}

.copy-btn.copied .icon-copy {
  stroke: #009A2B;
}
.copy-btn.copied ~ .input {
  color: #009A2B;
}

.api__copy .copy-box {
  padding: 8px 35px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 15px;
  border-radius: 4px;
  border: 1px solid #E7EBEE;
  background: #FFF;
}
.api__copy .input {
  width: 255px;
  min-width: 255px;
  font-size: 14px;
  font-weight: 700;
}

.modals__sender-receiver .copy-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}
.modals__sender-receiver .input {
  width: 135px;
  min-width: 135px;
  font-size: 16px;
  font-weight: 400;
  text-transform: uppercase;
}
.modals__sender-receiver--confirm .input {
  color: #B0B0B0;
}
.modals__sender-receiver--confirmed .input {
  width: 141px;
  min-width: 141px;
  color: #000;
}

.purchases__item .copy-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}
/*
 * Пока настоящий трек-номер не получен (async лейбл в работе, либо
 * отменён до колбэка), вместо внутреннего id_order провайдера клиент
 * видит надпись "tracking no", подчёркнутую пунктиром. Она заменяется
 * настоящим номером через waitingLabel в app.js, когда колбэк придёт.
 * Отдельный класс (а не .hide) - чтобы элемент оставался в сетке и
 * не перебивался более специфичным display:flex выше.
 */
.track-box--pending {
  cursor: default;
}
/*
 * Лейбл получен (настоящий трек пришёл), но ещё не скачан — трек подсвечен
 * фирменным цветом с лёгким свечением. Так среди нескольких одинаковых
 * заказов видно, какие треки новые. Класс рендерится СЕРВЕРОМ по
 * purchase.downloaded_at (tpl/purchases.php и tpl/admin/purchases.php),
 * для async-лейблов добавляется на клиенте (waitingLabel когда приходит
 * трек), снимается после скачивания (app.download / unhighlightTrack).
 * Клик по треку копирует его и подсветку не снимает.
 */
.track-box--new .copy-input {
  color: #4D4AFD;
  text-shadow: 0 0 8px rgba(77, 74, 253, 0.45);
}
.track-box--new .copy-btn .icon-copy,
.track-box--new .btn__copy .icon-copy {
  stroke: #4D4AFD;
}
/*
 * На время короткой зелёной отметки "copied" (app.copy, 500 мс) цвет всё же
 * меняется на зелёный, чтобы юзер видел, что трек скопирован, и возвращался
 * обратно к фирменному. Правило специфичнее базового .copy-box.copied (0,3,1).
 */
.track-box--new.copied .copy-input {
  color: #009A2B;
  text-shadow: none;
}
.track-box--new.copied .copy-btn .icon-copy {
  stroke: #009A2B;
}
.copy-input.track-placeholder {
  text-decoration: underline dashed;
  text-underline-offset: 2px;
  color: #B4BAC2;
  cursor: default;
  user-select: none;
}
.purchases__item .input {
  width: 123px;
  min-width: 123px;
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
}
.purchases__item .icon-copy {
  width: 15px;
  height: 15px;
}

.modals__new-user .input {
  font-size: 16px;
  font-weight: 400;
}
.modals__new-user .modal-content__item:nth-child(1) .copy-box .input {
  min-width: 91px;
  width: 91px;
}
.modals__new-user .modal-content__item:nth-child(2) .input {
  min-width: 155px;
  width: 155px;
}

.modals__new-user-support .input {
  min-width: 155px !important;
  width: 155px !important;
  font-size: 16px;
  font-weight: 400;
}

.checkbox-label {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 400;
}
.checkbox-circle {
  color: #4D4AFD;
  text-transform: capitalize;
}
.checkbox-circle .checkbox-cstm {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: transparent;
  border: 2px solid #4D4AFD;
}
.checkbox-circle .checkbox-input:checked + .checkbox-cstm {
  background-color: #4D4AFD;
}
.checkbox-switch .checkbox-cstm {
  width: 30px;
  height: 15px;
  border-radius: 11px;
  border: 1px solid var(--Unactive-Text, #B0B0B0);
  position: relative;
}
.checkbox-switch .checkbox-cstm::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background-color: #B0B0B0;
  transition: all 0.2s ease;
}
.checkbox-switch .checkbox-input:checked + .checkbox-cstm::before {
  left: 15px;
  background-color: rgba(0, 190, 53, 0.68);
}
.checkbox-angle {
  position: absolute;
  top: 10px;
  left: -24px;
}
.checkbox-angle .checkbox-cstm {
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  background: #FFF;
  position: relative;
}
.checkbox-angle .checkbox-cstm .icon-chevron {
  width: 14px;
  height: 14px;
  stroke: #242424;
}
.checkbox-angle .checkbox-input:checked + .checkbox-cstm {
  background: #4D4AFD;
}
.checkbox-angle .checkbox-input:checked + .checkbox-cstm .icon-chevron {
  stroke: #FFFFFF;
}

.modal-overlay {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(20, 20, 30, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
  z-index: 11;
}

.modal {
  display: flex;
  align-items: center;
  justify-content: center;
  display: none;
}

.modal-overlay--visible {
  opacity: 1;
  visibility: visible;
  transition: all 0.3s ease-in-out;
}

.modal--visible {
  display: block;
}

.modals__sender-receiver {
  max-width: 800px;
  padding: 40px 40px 30px;
  border-radius: 4px;
  background: #FFF;
}
.modals__sender-receiver .modal-content {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
}
.modals__sender-receiver .modal-content__top {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 50px;
}
.modals__sender-receiver .modal-content .icon-arrow-green {
  align-self: center;
}
/* .modals__sender-receiver .modal-content__top-item {
  display: flex;
  flex-direction: column;
} */
.modals__sender-receiver .modal-content__top-title {
  margin-bottom: 15px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
}
.modals__sender-receiver .modal-content__middle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  width: 100%;  
  position: relative;
}
.modals__sender-receiver .modal-content__middle-item {
  display: flex;
  align-items: center;
  gap: 15px;
  color: #000;
  font-size: 12px;
  font-weight: 200;
}
.modals__sender-receiver .modal-content__middle-item span {
  font-size: 16px;
  font-weight: 400;
}
.modals__sender-receiver .modal-content__middle-item .form {
  display: flex;
  align-items: center;
  gap: 10px;
}
.modals__sender-receiver .modal-content__middle-item .form__input {
  min-width: 135px;
  width: 140px;
  padding: 0;
  font-size: 16px;
  font-weight: 400;
  text-transform: uppercase;
}
.modals__sender-receiver .modal-content__bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
}
.modals__sender-receiver--confirm .form__input {
  width: 135px;
}
.modals__sender-receiver--confirm .icon-copy {
  stroke: #B0B0B0;
}
.modals__sender-receiver--confirm .form__input {
  color: #B0B0B0;
}
.modals__sender-receiver--confirmed .icon-arrow-green {
  fill: #009A2B;
}
.modals__sender-receiver--confirmed .btn--cancel {
  color: #000;
  background-color: #E7EBEE;
}

/* confirm-modal start */

.modal[data-target="modal-sender-receiver-confirm"].modals__sender-receiver {
  width: 900px;
  max-width: calc(100vw - 40px);
  padding: 20px 24px 22px;
}

.modals__sender-receiver--confirm,
.modals__sender-receiver--confirmed {
  width: 100%;
  position: relative;
}

.modals__sender-receiver--confirm .confirm-modal__close,
.modals__sender-receiver--confirmed .confirm-modal__close {
  display: flex !important;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: #8B8B93;
  font-size: 0;
  cursor: pointer;
  transition: background 0.15s ease;
}
.modals__sender-receiver--confirm .confirm-modal__close::before,
.modals__sender-receiver--confirm .confirm-modal__close::after,
.modals__sender-receiver--confirmed .confirm-modal__close::before,
.modals__sender-receiver--confirmed .confirm-modal__close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 1.5px;
  background: #8B8B93;
}
.modals__sender-receiver--confirm .confirm-modal__close::before,
.modals__sender-receiver--confirmed .confirm-modal__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.modals__sender-receiver--confirm .confirm-modal__close::after,
.modals__sender-receiver--confirmed .confirm-modal__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.modals__sender-receiver--confirm .confirm-modal__close:hover,
.modals__sender-receiver--confirmed .confirm-modal__close:hover {
  background: #F2F3F7;
}

.modals__sender-receiver .modal-content.confirm-modal {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  align-items: stretch;
}

.confirm-modal .buyLabelInfo:empty {
  display: none;
}

.confirm-modal__success {
  visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 18px;
  font-size: 14px;
  font-weight: 700;
  color: #009A2B;
}
.confirm-modal__success .icon-check-circle {
  width: 17px;
  height: 17px;
  stroke: #009A2B;
}
.modals__sender-receiver--confirmed .confirm-modal__success {
  visibility: visible;
}

.confirm-modal__main {
  display: flex;
  align-items: stretch;
  gap: 18px;
}
.confirm-modal__left {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.confirm-modal__parties {
  display: flex;
  align-items: stretch;
  gap: 16px;
}
.confirm-modal__party {
  flex: 1 1 0;
  min-width: 0;
  border: 1px solid #ECEDF2;
  border-radius: 8px;
  padding: 10px 14px;
}
.confirm-modal__party-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.confirm-modal__avatar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #EDEBFA;
}
.confirm-modal__avatar .icon-person {
  width: 16px;
  height: 16px;
  stroke: #5642D6;
}
.confirm-modal__party-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9B9BAE;
}
.confirm-modal__party-name {
  font-size: 14px;
  font-weight: 700;
  color: #000;
  line-height: 1.4;
}
.confirm-modal__party-address {
  font-size: 12.5px;
  font-weight: 400;
  color: #55555F;
  line-height: 1.45;
}
.confirm-modal__party-address:empty {
  display: none;
}
.confirm-modal__arrow {
  flex-shrink: 0;
  align-self: center;
  width: 16px;
  height: 24px;
  stroke: #009A2B;
  fill: transparent;
}

.confirm-modal__info {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  gap: 10px;
}
.confirm-modal__chip {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #ECEDF2;
  border-radius: 8px;
  padding: 8px 10px;
}
.confirm-modal__chip-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
}
.confirm-modal__chip-icon svg {
  width: 15px;
  height: 15px;
}
.confirm-modal__chip:nth-child(1) .confirm-modal__chip-icon {
  background: #E6F7EA;
}
.confirm-modal__chip:nth-child(1) .confirm-modal__chip-icon svg {
  stroke: #22A366;
}
.confirm-modal__chip:nth-child(2) .confirm-modal__chip-icon {
  background: #E5EEFF;
}
.confirm-modal__chip:nth-child(2) .confirm-modal__chip-icon svg {
  stroke: #3C7CF0;
}
.confirm-modal__chip:nth-child(3) .confirm-modal__chip-icon {
  background: #EDEBFA;
}
.confirm-modal__chip:nth-child(3) .confirm-modal__chip-icon svg {
  stroke: #5642D6;
}
.confirm-modal__chip-text {
  min-width: 0;
}
.confirm-modal__chip-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9B9BAE;
  margin-bottom: 2px;
}
.confirm-modal__chip-value {
  font-size: 12.5px;
  font-weight: 700;
  color: #000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.confirm-modal__box {
  flex-shrink: 0;
  position: relative;
  width: 300px;
  aspect-ratio: 890 / 440;
  align-self: flex-start;
}
.confirm-modal__box-img {
  display: block;
  width: 100%;
  height: 100%;
}
.confirm-modal__dim {
  position: absolute;
  white-space: nowrap;
}
.confirm-modal__dim-value {
  font-size: 13px;
  font-weight: 700;
  color: #0A0A0A;
}
.confirm-modal__dim--height {
  top: 26%;
  left: 84.0%;
}
.confirm-modal__dim--width {
  top: 80%;
  left: 18.0%;
}
.confirm-modal__dim--length {
  top: 80%;
  left: 68.7%;
}

.confirm-modal__track {
  position: relative;
  width: 100%;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed rgba(0, 190, 53, 0.4);
  background: rgba(0, 190, 53, 0.045);
  border-radius: 8px;
  padding: 6px 20px;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  box-sizing: border-box;
}
.confirm-modal__track-status {
  display: none;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: #55555F;
  text-align: center;
  max-width: 560px;
}
.confirm-modal__track--processing .confirm-modal__track-status:not(:empty) {
  display: block;
}
.confirm-modal__track-result {
  display: none;
  width: 100%;
  text-align: center;
}
.confirm-modal__track--done {
  border: 1.5px solid #ECEDF2;
  background: #FFF;
}
.confirm-modal__track--done .confirm-modal__track-result,
/* во время processing показываем ту же строку с текстом-заглушкой "Tracking Number" вместо номера асинхронного заказа — см. app.js buyLabel() */
.confirm-modal__track--processing .confirm-modal__track-result {
  display: block;
}
/*
 * Единый вид любой ошибки покупки лейбла (см. app.js buyLabel) — вместо
 * трек-номера показываем только "Oops! Something went wrong.", без
 * технических подробностей, независимо от службы и причины сбоя.
 */
.confirm-modal__track--error {
  border: 1.5px solid rgba(220, 53, 69, 0.35);
  background: rgba(220, 53, 69, 0.045);
}
.confirm-modal__track--error .confirm-modal__track-result {
  display: block;
}
.confirm-modal__track--error .confirm-modal__track-label {
  display: none;
}
.confirm-modal__track--error .copy-input {
  color: #DC3545;
  cursor: default;
  border-bottom: none;
  pointer-events: none;
}
.confirm-modal__track-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9B9BAE;
  margin-bottom: 4px;
}
/* Пока async-лейбл в обработке, значение — просто текст-заглушка "Tracking
 * Number" (см. app.js), поэтому подпись над ним скрываем, чтобы не дублировать
 * одну и ту же надпись дважды. */
.confirm-modal__track--processing .confirm-modal__track-label {
  display: none;
}
.confirm-modal__track .copy-box {
  justify-content: center !important;
  gap: 0;
}
.confirm-modal__track .copy-input {
  font-size: 18px;
  font-weight: 700;
  color: #000;
  cursor: pointer;
  border-bottom: 1.5px dotted #B0B0B0;
  padding-bottom: 2px;
  letter-spacing: 0.03em;
}
.confirm-modal__track .copy-box.copied .copy-input {
  border-bottom-color: #009A2B;
}

.modal-content__bottom.confirm-box .btn--cancel,
.modal-content__bottom.confirm-box .button {
  min-width: 190px;
  box-sizing: border-box;
}
.modal-content__bottom.confirm-box .btn--cancel:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.modal-content__bottom.confirm-box .button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.modal-content__bottom.confirm-box #confirm-buy-label {
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-content__bottom.confirm-box #confirm-buy-label.hide {
  display: none;
}
.modal-content__bottom.confirm-box #confirm-buy-label.button--loading .confirm-btn__label {
  display: none;
}
.modal-content__bottom.confirm-box #confirm-buy-label:not(.button--loading) .loader-dots--btn {
  display: none;
}
.modal-content__bottom.confirm-box .download-file {
  gap: 8px;
}
.modal-content__bottom.confirm-box .download-file .icon-download {
  width: 15px;
  height: 15px;
  stroke: #FFF;
}

@media (max-width: 767px) {
  .confirm-modal__main {
    flex-direction: column;
  }
  .confirm-modal__parties {
    flex-direction: column;
  }
  .confirm-modal__arrow {
    align-self: center;
    transform: rotate(90deg);
  }
  .confirm-modal__info {
    flex-direction: column;
  }
  .confirm-modal__box {
    width: 100%;
    max-width: 300px;
    align-self: center;
  }
}

/* confirm-modal end */
.modals__sender-receiver--rate {
  max-width: 550px;
  width: fit-content;
  height: auto;
  padding: 25px 25px 35px;
  border-radius: 4px;
  background: #FFF;
}
.modals__sender-receiver--rate .modal-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #000;
  font-size: 14px;
  font-weight: 400;
}
.modals__sender-receiver--rate .modal-content__title {
  font-size: 20px;
  font-weight: 700;
}
.modals__sender-receiver--rate .modal-content__date {
  color: #B0B0B0;
  font-size: 12px;
  font-weight: 400;
}
.modals__sender-receiver--rate .modal-content__readmore {
  color: #009A2B;
  font-size: 12px;
  font-weight: 700;
}
.modals__password {
  width: 300px;
  min-height: 260px;
  padding: 55px;
  border-radius: 4px;
  background: #FFF;
  box-shadow: -5px 5px 10px 0px rgba(0, 0, 0, 0.1);
}
.modals__password .modal-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #000;
  font-size: 12px;
  font-weight: 200;
}
.modals__password .modal-content__title {
  margin-bottom: 7px;
  font-size: 16px;
  font-weight: 600;
}
.modals__password .copy-box {
  margin-bottom: 20px;
}
.modals__password .copy-box .copy-input {
  font-size: 16px;
  font-weight: 400;
  /* text-transform: uppercase; */
  min-width: 155px;
  width: 185px;
  text-align: right;
}
.modals__password .modals__password-text {
  display: inline-block;
  margin-bottom: 30px;
}
.modals__password .btn {
  width: 100%;
}
.modals__password .btn:disabled {
  color: #B0B0B0;
  border-radius: 4px;
  border: 1px solid #E7EBEE;
  background-color: transparent;
  pointer-events: none;
}
.modals__new-user {
  max-width: 300px;
  width: 100%;
  min-height: 300px;
  padding: 70px 60px;
  border-radius: 4px;
  background: #FFF;
  box-shadow: -5px 5px 10px 0px rgba(0, 0, 0, 0.1);
}
.modals__new-user .modal-content {
  text-align: center;
}
.modals__new-user .modal-content__title {
  margin-bottom: 20px;
  color: #000;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
}
.modals__new-user .modal-content__item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.modals__new-user .modal-content__item:not(:last-child) {
  margin-bottom: 20px;
}
.modals__new-user .modal-content__item-title {
  color: #000;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
}
.modals__new-user .copy-box {
  justify-content: center !important;
}
.modals__price-show {
  max-width: 600px;
  width: 100%;
  height: 100vh;
  overflow-y: auto;
}
.modals__price-show::-webkit-scrollbar {
  display: none;
}
.modals__price-show .modal-content {
  padding: 60px 70px 50px;
  margin: 20px 15px;
  background-color: #F0F3F9;
}
.modals__price-show .modal-content__items {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.modals__price-show .modal-content__table {
  border-collapse: collapse;
}
.modals__price-show th:nth-child(1),
.modals__price-show td:nth-child(1) {
  min-width: 180px;
  width: 180px;
  max-width: 180px;
}
.modals__price-show th:nth-child(1) input,
.modals__price-show td:nth-child(1) input {
  max-width: 156px;
}
.modals__price-show th:nth-child(2),
.modals__price-show td:nth-child(2) {
  min-width: 100px;
  width: 100px;
  max-width: 100px;
}
.modals__price-show th:nth-child(2) input,
.modals__price-show td:nth-child(2) input {
  max-width: 76px;
}
.modals__price-show th:nth-child(3),
.modals__price-show td:nth-child(3) {
  min-width: 140px;
  width: 140px;
  max-width: 140px;
}
.modals__price-show th:nth-child(3) input,
.modals__price-show td:nth-child(3) input {
  max-width: 116px;
}
.modals__price-show .modal-content__btns {
  display: grid;
  grid-template-columns: minmax(auto, 230px) minmax(auto, 170px);
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.modals__price-show .modal-content__btns .btn--muted,
.modals__price-show .modal-content__btns .btn {
  width: 100%;
}
.modals__new-user-support {
  max-width: 300px;
  width: 100%;
  min-height: 180px;
  padding: 45px;
  border-radius: 4px;
  background: #FFF;
  box-shadow: -5px 5px 10px 0px rgba(0, 0, 0, 0.1);
}
/*
 * Таблица весовых диапазонов -> габаритов (6 колонок .service__table, см.
 * tpl/admin/footer.php) шире, чем 3-колоночная .modals__price-show — отсюда
 * max-width пошире и .table-wrapper с горизонтальным скроллом на случай
 * узких экранов, сама таблица/колонки не переопределяются, чтобы выглядело
 * ровно так же, как раньше на странице.
 */
.modals__box-presets {
  max-width: 920px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 4px;
  background: #FFF;
}
.modals__box-presets::-webkit-scrollbar {
  display: none;
}
.modals__box-presets .modal-content {
  padding: 50px 60px;
}
.modals__box-presets .table-wrapper {
  overflow-x: auto;
}
.modals__box-presets .service__item {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
}
.modals__templates {
  max-width: 560px;
  width: 100%;
  height: 100vh;
  overflow-y: auto;
}
.modals__templates::-webkit-scrollbar {
  display: none;
}
.modals__templates .modal-content {
  width: 100%;
  padding: 40px;
  margin: 20px 0px;
  border-radius: 4px;
  background: #FFF;
}
.modals__templates .form__input-box--cstm:nth-child(1) {
  width: calc(100% - 180px - 20px);
}
.modals__templates .form__input-box--cstm:nth-child(2) {
  width: 180px;
}
.modals__templates .sender-receiver__form .form__input-box--cstm:nth-child(2) .form__input {
  padding-right: 45px;
}
.modals__templates .sender-receiver__form .form__input-box--cstm:nth-child(2) .btn--reset {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 22px;
}
.modals__templates .cstm-bottom {
  width: 100%;
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
}
.modals__templates-delete {
  max-width: 200px;
  width: 100%;
  padding: 10px;
  border-radius: 4px;
  background: #FFF;
}
.modals__templates-delete-title {
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 20px;
}
.modals__templates-delete-btns {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.modals__delete-user {
  max-width: 320px;
}
.modals__templates-delete-text {
  font-size: 13px;
  line-height: 1.5;
  color: #8A8A8E;
  text-align: center;
  margin: -8px 0 20px;
}
.modals__delete-user .confirm-delete-user-btn {
  color: #E5484D;
  border-color: #E5484D;
}

.dropdown__list-item--delete {
  border-top: 1px solid #E7EBEE;
}
.modals__tickets-message {
  max-width: 540px;
  width: 100%;
  height: 100vh;
  overflow-y: auto;
}
.modals__tickets-message::-webkit-scrollbar {
  display: none;
}
.modals__tickets-message .modal-content {
  margin: 20px 0px;
}
.modals__tickets-message .tickets__form-input--box-track {
  display: none;
}
.modals__tickets-message .tickets__form-input--box-type:has(.dropdown__button .regarding-the-label) ~ .tickets__form-input--box-track {
  display: flex;
}
.modals__withdraw {
  max-width: 540px;
  width: 100%;
  padding: 30px 20px;
  border-radius: 4px;
  background: #FFF;
}
.modals__withdraw .modal-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.modals__withdraw-title {
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}
.modals__withdraw .balance__elem-input--box {
  max-width: 200px;
  margin: 0 auto;
}
.modals__withdraw-btns {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.modals__api {
  max-width: 200px;
  width: 100%;
  padding: 30px 20px;
  border-radius: 4px;
  background: #FFF;
}
.modals__api .modal-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.modals__api-title {
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}
.modals__api-btns {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.modals__invite {
  max-width: 300px;
  width: 100%;
  padding: 30px 20px;
  border-radius: 4px;
  background: #FFF;
}
.modals__invite .copy-box {
  justify-content: center !important;
}
.modals__change-contact {
  max-width: 365px;
  width: 100%;
  padding: 23px 35px 33px;
  background-color: #fff;
}
.modals__change-contact .modals__change-title {
  margin-bottom: 20px;
  color: #000;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
}
.modals__change-contact .modals__change-content {
  margin-bottom: 35px;
}
.modals__change-contact .modals__change-btns {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
}
.modals__change-contact .cstm-input {
  width: 100%;
  border-bottom: 1px solid #4D4AFD;
  padding-bottom: 5px;
  color: #000;
  font-size: 16px;
  font-weight: 600;
}
.modals__change-password {
  max-width: 365px;
  width: 100%;
  padding: 23px 35px 33px;
  background-color: #fff;
}
.modals__change-password .modals__change-title {
  margin-bottom: 20px;
  color: #000;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
}
.modals__change-password .modals__change-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 35px;
}
.modals__change-password .modals__change-btns {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
}
.modals__change-password .form__input-box--cstm .btn--reset {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 22px;
}
.modals__change-password .form__input-box--cstm .btn--reset .icon-reset {
  fill: #231F20;
}

input[type=number],
input[type=number]::placeholder {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

.input-price--box {
  position: relative;
}
.input-price--box .input-price--symbol {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  display: none;
  pointer-events: none;
}
.input-price--box:has(.input-price:not(:placeholder-shown)) .input-price {
  position: relative;
  left: 7px;
}
.input-price--box:has(.input-price:not(:placeholder-shown)) .input-price--symbol {
  display: inline-block;
}

.balance__elem-input--box .input-price {
  text-align: center;
  left: 0 !important;
}

.form-group {
  width: 100%;
}
.form-group.disabled {
  opacity: 0.5;
}
.form-group.select-flags.disabled {
  pointer-events: none;
  cursor: not-allowed;
}

.dropdown {
  position: relative;
}
.dropdown .cstm-dropdown-placeholder {
  position: absolute;
  top: 15.5px;
  left: 25px;
  transition: all 0.1s linear;
  pointer-events: none;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  color: #B0B0B0;
  font-size: 14px;
  font-weight: 400;
}
.dropdown.cstm-dropdown-active .cstm-dropdown-placeholder {
  top: 8px;
  font-size: 10px;
}
.dropdown.cstm-dropdown-active .cstm-dropdown-placeholder .icon-chevron {
  display: none;
}

.dropdown__button {
  position: relative;
  width: 100%;
  height: 50px;
  text-align: left;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  border-radius: 4px;
  border: 1px solid #E7EBEE;
  background: #FFF;
  padding: 8px 25px;
  color: #000;
  font-size: 14px;
  font-weight: 400;
  text-transform: capitalize;
  white-space: nowrap;
  cursor: pointer;
}
.dropdown__button span {
  pointer-events: none;
}

.dropdown__button:focus,
.dropdown__button--active {
  outline: none;
}
.dropdown__button:focus + .cstm-dropdown-placeholder,
.dropdown__button--active + .cstm-dropdown-placeholder {
  top: 8px;
  font-size: 10px;
}
.dropdown__button:focus + .cstm-dropdown-placeholder .icon-chevron,
.dropdown__button--active + .cstm-dropdown-placeholder .icon-chevron {
  display: none;
}

.dropdown__list {
  display: none;
  max-height: 225px;
  position: absolute;
  left: 0;
  top: 52px;
  margin: 0;
  padding: 0;
  list-style-type: none;
  border: 1px solid #E7EBEE;
  background: #FFFFFF;
  overflow: auto;
  border-radius: 4px;
  width: 100%;
  z-index: 3;
}

.dropdown__list--visible {
  display: block;
}

.dropdown__list-item {
  height: 50px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 0;
  padding: 0;
  padding: 8px 25px;
  cursor: pointer;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  color: #000;
  font-size: 14px;
  font-weight: 400;
  text-transform: capitalize;
}
.dropdown__list-item:not(:last-child) {
  border-bottom: 1px solid #E7EBEE;
}

.dropdown__list-item:hover {
  background: rgba(176, 198, 225, 0.26);
}

.dropdown__list-item-content {
  pointer-events: none;
}

/*
 * canada.png — растровая иконка флага небольшого нативного размера
 * (в отличие от векторных usa.svg). Фиксируем размер, чтобы она не
 * растягивала строку дропдауна на свою нативную высоту.
 */
img.dropdown__list-item-content[src$="canada.png"] {
  width: 20px;
  height: 15px;
  object-fit: contain;
  vertical-align: middle;
}

.dropdown__input-hidden {
  display: none;
}

.form-group.status .dropdown__button {
  width: 100%;
  height: 16px !important;
  border: none;
  padding: 0 !important;
  font-size: inherit;
  font-weight: inherit;
}
.form-group.status .icon-chevron {
  position: absolute;
  right: -5px;
  z-index: 1;
  stroke: #242424;
  pointer-events: none;
}
.form-group.status .dropdown__list {
  top: calc(100% + 0px);
  width: calc(100% + 24px);
  left: -12px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}
.form-group.status .dropdown__list-item {
  height: 25px;
  padding: 8px 12px;
  font-size: inherit;
  font-weight: inherit;
}

.sidebar {
  width: 285px;
  transition: transform 0.2s ease;
  position: relative;
  background: #FFF;
  position: fixed;
  top: 0;
  bottom: 0;
}
.sidebar__inner {
  height: 100vh;
  padding: 28px 60px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: auto;
}
.sidebar__btn-open {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 10px;
  right: -47px;
  border-radius: 4px;
  background-color: #4D4AFD;
  padding: 3px;
  display: none;
}
.sidebar__btn-line {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #fff;
  position: relative;
}
.sidebar__btn-line::before, .sidebar__btn-line::after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  background-color: #fff;
}
.sidebar__btn-line::before {
  top: -7px;
}
.sidebar__btn-line::after {
  top: 7px;
}
.sidebar.sidebar-open {
  transform: translateX(0%);
}
.sidebar.sidebar-open .sidebar__btn-line {
  transform: rotate(-45deg);
}
.sidebar.sidebar-open .sidebar__btn-line::before {
  top: 0;
  transform: rotate(90deg);
}
.sidebar.sidebar-open .sidebar__btn-line::after {
  top: 0;
  transform: rotate(45deg);
  opacity: 0;
}
.sidebar__nav {
  margin-bottom: 80px;
}
.sidebar__nav:has(.nav__item-account) {
  margin-bottom: 40px;
}
.sidebar.sidebar-admin .sidebar__nav {
  margin-bottom: 20px;
}

.page-api .nav__item-api .nav__link {
  color: #4D4AFD;
}
.page-api .nav__item-api .nav__link svg {
  fill: #4D4AFD;
}
.page-news .nav__item-news .nav__link {
  color: #4D4AFD;
}
.page-news .nav__item-news .nav__link svg {
  fill: #4D4AFD;
}
.page-wallet .nav__item-wallet .nav__link {
  color: #4D4AFD;
}
.page-wallet .nav__item-wallet .nav__link svg {
  fill: #4D4AFD;
}
.page-purchases .nav__item-purchases .nav__link {
  color: #4D4AFD;
}
.page-purchases .nav__item-purchases .nav__link svg {
  fill: #4D4AFD;
}
.page-bulkpurchases .nav__item-bulkpurchases .nav__link {
  color: #4D4AFD;
}
.page-bulkpurchases .nav__item-bulkpurchases .nav__link svg {
  fill: #4D4AFD;
}
.page-templates .nav__item-templates .nav__link {
  color: #4D4AFD;
}
.page-templates .nav__item-templates .nav__link svg {
  fill: #4D4AFD;
}
.page-support .nav__item-support .nav__link {
  color: #4D4AFD;
}
.page-support .nav__item-support .nav__link svg {
  fill: #4D4AFD;
}
.page-tickets .nav__item-support .nav__link {
  color: #4D4AFD;
}
.page-tickets .nav__item-support .nav__link svg {
  fill: #4D4AFD;
}
.page-account .nav__item-account .nav__link {
  color: #4D4AFD;
}
.page-account .nav__item-account .nav__link svg {
  fill: #4D4AFD;
}
.page-services .nav__item-services .nav__link {
  color: #4D4AFD;
}
.page-services .nav__item-services .nav__link svg {
  fill: #4D4AFD;
}
.page-admin-user .nav__item-overview .nav__link {
  color: #4D4AFD;
}
.page-admin-user .nav__item-overview .nav__link svg {
  fill: #4D4AFD;
}
.page-admin-service .nav__item-service .nav__link {
  color: #4D4AFD;
}
.page-admin-service .nav__item-service .nav__link svg {
  fill: #4D4AFD;
}
.page-admin-support .nav__item-support .nav__link {
  color: #4D4AFD;
}
.page-admin-support .nav__item-support .nav__link svg {
  fill: #4D4AFD;
}
.page-support-user .nav__item-overview .nav__link {
  color: #4D4AFD;
}
.page-support-user .nav__item-overview .nav__link svg {
  fill: #4D4AFD;
}
.page-admin-wallet .nav__item-wallet .nav__link {
  color: #4D4AFD;
}
.page-admin-wallet .nav__item-wallet .nav__link svg {
  fill: #4D4AFD;
}

.api__form {
  height: 35px;
  padding: 8px 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  border-radius: 4px;
  border: 1px solid #E7EBEE;
  background: #FFF;
}
.api__input {
  display: block;
  min-width: 255px;
  height: 19px;
  color: #000;
  font-family: nunito, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0px;
}
.api__copy {
  margin-bottom: 30px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  font-size: 14px;
  font-weight: 700;
}
.api__params {
  margin-bottom: 60px;
}
.api__item:not(:last-child) {
  margin-bottom: 60px;
}
.api__item-title {
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 300;
}
.api__item-wrapper {
  overflow-x: auto;
  max-width: 100%;
  width: calc(100vw - 285px - 30px);
  width: calc(100vw - 285px - 60px - 15px);
}
.api__table {
  width: 100%;
  border-collapse: collapse;
}
.api__table th,
.api__table td {
  min-height: 35px;
  padding: 8px 25px;
  border: 1px solid #E7EBEE;
  white-space: nowrap;
  font-size: 14px;
  vertical-align: top;
}
.api__table th {
  text-align-last: left;
  background: #f5f5f5;
  font-weight: 700;
}
.api__table td {
  background: #FFF;
  font-weight: 400;
}
.api__table tr th:nth-child(1), .api__table tr th:nth-child(4) {
  min-width: 150px;
  width: 15px;
}
.api__table tr th:nth-child(2), .api__table tr th:nth-child(3) {
  min-width: 130px;
  width: 130px;
}
.api__table tr th:last-child {
  width: auto;
}
.api__request-list {
  padding: 40px;
  border: 1px solid #E7EBEE;
  background: #FFF;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  font-weight: 400;
}

.api__request .tab-wrap {
  display: none;
}
.api__request .tab-wrap.active {
  display: block;
}

.news__inner {
  max-width: 886px;
}
.news__items {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.news__item {
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 25px;
  border-radius: 4px;
  background: #FFF;
}
.news__item:has(.checkbox-input:checked) {
  background: #E7EBEE;
}
.news__item:has(.checkbox-input:checked) .news__img {
  opacity: 0.5;
}
.news__item:nth-child(n+2) {
  display: none;
}
.news__items.history-show .news__item:nth-child(n+2) {
  display: flex;
}
.news__item-more-btn {
  width: fit-content;
  margin: 0 auto;
}
.news__img {
  display: block;
  width: 100%;
  height: 150px;
  border-radius: 4px;
  object-fit: cover;
}
.news__info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.news__title {
  font-size: 20px;
  font-weight: 700;
}
.news__date {
  color: #B0B0B0;
  font-size: 12px;
  font-weight: 400;
}
.news__descr {
  display: flex;
  flex-direction: column;
  gap: 1em;
  max-height: 171px;
  overflow: hidden;
  font-size: 14px;
  font-weight: 400;
}
.news__descr div {
  display: flex;
  flex-direction: column;
}
.news .news__info.news-more-active .news__descr {
  max-height: 600px;
  overflow: auto;
}
.news__read-off {
  display: none;
}
.news .checkbox-label {
  width: fit-content;
}
.news .checkbox-input:checked ~ .news__read-on {
  display: none;
}
.news .checkbox-input:checked ~ .news__read-off {
  display: inline-block;
}
.news__more {
  display: inline-block;
  text-align: center;
  color: #B0B0B0;
  font-size: 12px;
  font-weight: 600;
}
.news__item-more-btn.news-more-active .news__more-btn--more {
  display: none;
}
.news__item-more-btn.news-more-active .news__more-btn--less {
  display: block;
}
.news .news__more-btn--less {
  display: none;
}

.sender-receiver {
  margin-bottom: 30px;
}
.sender-receiver__inner {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 50px;
}
.sender-receiver__item {
  width: 100%;
  min-width: 0;
}
.sender-receiver__item .checkbox-label {
  margin-top: 20px;
}
.choose-template {
  display: flex;
  align-items: center;
  gap: 10px;
}
.choose-template .form-group {
  flex: 1 1 auto;
  min-width: 0;
}
.choose-template .dropdown {
  min-width: 0;
}
.choose-template .dropdown__button {
  overflow: hidden;
}
.choose-template .dropdown__button span {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.btn-save-tpl {
  flex-shrink: 0;
  min-width: 110px;
  text-align: center;
  height: 50px;
  padding: 0 18px;
  border-radius: 8px;
  border: 1.5px solid rgba(0, 168, 47, 0.35);
  background: #FFF;
  color: rgba(0, 130, 47, 0.6);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn-save-tpl:hover:not(:disabled) {
  border-color: rgba(0, 168, 47, 0.5);
  color: rgba(0, 130, 47, 0.85);
  background: rgba(0, 168, 47, 0.05);
}
.btn-save-tpl:disabled {
  opacity: 0.6;
  cursor: default;
}
.btn-save-tpl--success {
  border-color: #00A82F;
  background: #00A82F;
  color: #FFF;
}
.btn-save-tpl--error {
  border-color: #E63946;
  background: #FFF;
  color: #E63946;
}
.sender-receiver__form {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.sender-receiver .form__input-box--cstm:nth-child(1) {
  width: calc(100% - 180px - 20px);
}
.sender-receiver .form__input-box--cstm:nth-child(2) {
  width: 180px;
}
.sender-receiver .sender-receiver__form .form__input-box--cstm:nth-child(2) .form__input {
  padding-right: 45px;
}
.sender-receiver .sender-receiver__form .form__input-box--cstm:nth-child(2) .btn--reset {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 22px;
}
.sender-receiver .dropdown__button {
  padding: 23px 25px 8px;
}
.sender-receiver .autoComplete_wrapper .logo__img {
  margin-left: 20px;
}

.custom-line-item {
  margin-bottom: 80px;
  display: none;
}
.custom-line-item__items {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.custom-line-item__item {
  display: grid;
  grid-template-columns: auto 145px 220px 10px;
  align-items: center;
  gap: 20px;
}
.custom-line-item__item-add {
  width: fit-content;
  color: #009A2B;
  font-size: 12px;
  font-weight: 400;
}
.custom-line-item__item-btn {
  justify-self: end;
}
.custom-line-item__item-btn-img {
  display: block;
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.custom-line-item .title {
  text-transform: uppercase;
}
.custom-line-item .form__input--price {
  padding-left: 33.5px;
}
.custom-line-item .form__input--price:valid ~ .form__input--price-symbol {
  display: inline-block;
}
.custom-line-item .form__input--price-symbol {
  position: absolute;
  top: 22px;
  left: 25px;
  display: none;
  color: #000;
  font-size: 14px;
  font-weight: 400;
}
.custom-line-item .custom-line-item__item-box {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.custom-line-item .custom-line-item__item-box .custom-line-item__item-btn {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.custom-line-item .custom-line-item__item-box.active-line {
  display: flex !important;
}
.custom-line-item .custom-line-item__item-box.active-line.del-btn .custom-line-item__item-add {
  display: inline-block !important;
}
.custom-line-item .custom-line-item__item-box.del-btn .custom-line-item__item-btn {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}
.custom-line-item .custom-line-item__item-box .custom-line-item__item-add {
  display: none;
}
.custom-line-item .custom-line-item__item-box:first-child .custom-line-item__item-btn {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.custom-line-item .custom-line-item__item-box:not(:first-child) {
  display: none;
}

.details__content {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 40px;
  margin-bottom: 20px;
}
.details__options {
  max-width: 460px;
}
.details__options-title {
  margin-bottom: 15px;
  font-size: 14px;
  font-weight: 400;
}
.details__options-title span {
  font-size: 24px;
  font-weight: 700;
}
.ship-location {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  max-width: 100%;
}
.ship-location span.ship-location__prefix {
  font-size: 13px;
  font-weight: 400;
  color: #8B8B93;
  white-space: nowrap;
  flex-shrink: 0;
}
.ship-location span.ship-location__city {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  color: #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ship-location__arrow {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  stroke: #8B8B93;
  stroke-width: 1.6;
  fill: none;
}
.details__options-items {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.details__options-item-title {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 400;
}
.service-selector {
  display: flex;
  align-items: stretch;
  gap: 10px;
  width: 100%;
}
.service-selector .dropdown__list-item {
  flex: 1 1 0;
  min-width: 0;
  height: auto;
  min-height: 48px;
  margin: 0;
  padding: 8px 10px;
  border: 1.5px solid #E7EBEE;
  border-radius: 12px;
  background: #FFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
  white-space: normal;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  color: rgba(0, 0, 0, 0.55);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.service-selector__btn-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
}
.service-selector__btn-subtitle {
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.2;
  color: rgba(0, 0, 0, 0.4);
}
.service-selector .dropdown__list-item.active .service-selector__btn-subtitle,
.service-selector .dropdown__list-item.default_platform .service-selector__btn-subtitle {
  color: rgba(58, 55, 220, 0.5);
}
.service-selector .dropdown__list-item:hover {
  border-color: rgba(77, 74, 253, 0.3);
  background: rgba(176, 198, 225, 0.08);
}
.service-selector .dropdown__list-item.active,
.service-selector .dropdown__list-item.default_platform {
  border-color: rgba(77, 74, 253, 0.35);
  background: rgba(77, 74, 253, 0.05);
  color: rgba(58, 55, 220, 0.65);
}
.service-selector--single {
  justify-content: center;
}
.service-selector--single .dropdown__list-item {
  flex: 0 1 auto;
  min-width: 200px;
}
.service-selector .dropdown__list-item.hide {
  display: none;
}
.service-selector[disabled] {
  opacity: 0.5;
  pointer-events: none;
}
.package-size {
  background: #F6F6F8;
  border-radius: 16px;
  padding: 20px;
}
.package-size__steppers {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
}
.package-size__stepper-group {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
}
.package-size__stepper-group + .package-size__stepper-group::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 20px;
  bottom: 2px;
  width: 1px;
  background: #D6D6DC;
}
.package-size__label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #000;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.package-size .package-size__input-box {
  position: static;
  width: 100%;
  height: 42px;
  background: #FFF;
  border-radius: 10px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  gap: 4px;
}
.package-size .package-size__input-box .input-number__arrow {
  position: static;
  transform: none;
  width: 16px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  color: #000;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.package-size .package-size__input-box .form__input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: auto;
  border: none;
  padding: 0;
  margin: 0;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: #000;
  background: transparent;
}
.package-size .package-size__input-box input[type=number]::-webkit-outer-spin-button,
.package-size .package-size__input-box input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.package-size .package-size__input-box input[type=number] {
  -moz-appearance: textfield;
}
.details__options-rate-box {
  height: 35px;
  padding: 8px 25px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 15px;
  border-radius: 4px;
  border: 1px solid #E7EBEE;
  background: #FFF;
}
.details__options-ceckboxes {
  width: fit-content;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.details__img-white {
  display: none;
}
.details__img-ups {
  display: none;
}
.details__img-ups_inter {
  display: none;
}
.details__img-fedex {
  display: none;
}
.details__img-usps {
  display: none;
}
.details__img-uspsv1 {
  display: none;
}
.details__img-uspsv5 {
  display: none;
}
.details__img-fedex_express {
  display: none;
}
.details__img-canada_post {
  display: none;
}
.details .details__content:has(.dropdown__button .ups) .details__img-ups {
  display: block;
}
.details .details__content:has(.dropdown__button .ups_inter) .details__img-ups_inter {
  display: block;
}
.details .details__content:has(.dropdown__button .white) .details__img-white {
  display: block;
}
.details .details__content:has(.dropdown__button .fedex) .details__img-fedex {
  display: block;
}
.details .details__content:has(.dropdown__button .usps) .details__img-usps {
  display: block;
}
.details__img-box {
  width: 472px;
  max-width: 100%;
  aspect-ratio: 472/265;
  flex-shrink: 0;
}
.details__img {
  display: block;
  max-width: 472px;
  height: auto;
  aspect-ratio: 472/265;
}
.details__prices {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  max-width: 460px;
  width: 100%;
}
.details__prices-item {
  width: 100%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  /*
   * Уменьшено с 14 до 11px, чтобы освободить ~15px под увеличенную
   * .sr-badge--compact (100px -> 108px, см. sr-badge) без превышения
   * max-width строки (460px) — иначе разделитель внутри SR-плашки
   * снова начинал схлопываться из-за нехватки места.
   */
  gap: 11px;
  padding: 12px 16px;
  position: relative;
  border-radius: 12px;
  border: 1px solid #E7EBEE;
  background: #FFF;
}
.details__prices-item .btn {
  border-radius: 8px;
}
.details__prices-item.cheaper::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 20px;
  width: 82px;
  height: 44px;
  background-image: url(../images/price-cheaper.svg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.details__prices-item.best-choice::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 20px;
  width: 90.237px;
  height: 44px;
  background-image: url(../images/price-best-choice.svg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.details__prices-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: rgba(77, 74, 253, 0.12);
}
.icon-lightning {
  width: 18px;
  height: 18px;
  stroke: #4D4AFD;
  stroke-width: 1.3;
  fill: none;
}
/*
 * Единый компонент плашки Success Rate — раньше страница Services
 * (.services-page__sr*) и карточки Buy Now на Create Shipment
 * (.details__prices-sr*, ныне удалено) описывались двумя почти
 * одинаковыми, но независимыми наборами правил. На Create Shipment
 * плашке банально не хватало ширины: label+divider+value упирались
 * в 100px и flexbox сжимал "бесплатный" (без текста) divider первым —
 * из-за этого разделитель пропадал именно там, где на Services он
 * прекрасно виден. Теперь оба места используют один .sr-badge,
 * модификатор --compact только сужает внешние размеры под тесную
 * строку карточки, а сам divider всегда flex-shrink:0 и не может
 * схлопнуться ни в одном контексте.
 */
.sr-badge {
  flex-shrink: 0;
  width: 130px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  background: rgba(0, 190, 53, 0.1);
}
.sr-badge--compact {
  width: 108px;
  height: 40px;
  gap: 6px;
  padding: 0 10px;
}
.sr-badge__label {
  flex-shrink: 0;
  color: #00A82F;
  font-size: 13px;
  font-weight: 700;
}
.sr-badge__divider {
  flex-shrink: 0;
  width: 1px;
  height: 16px;
  background: rgba(0, 190, 53, 0.3);
}
.sr-badge__value {
  color: #000;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
.details__prices-divider {
  flex-shrink: 0;
  width: 1px;
  height: 28px;
  background: #E7EBEE;
}
.details__prices-info {
  /*
   * Раньше блок был flex-direction:column без align-items — заголовок
   * ("Ground"/"Priority"/…) и дни прилипали к левому краю (к divider1),
   * а свободное место оставалось только справа перед divider2. Из-за
   * этого разделители слева и справа от названия службы визуально были
   * не по центру относительно текста. center на кросс-оси (align-items)
   * + text-align центрируют содержимое равноудалённо от обоих divider.
   */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
.details__prices-title {
  margin: 0;
  color: #000;
  font-size: 15px;
  font-weight: 700;
  text-transform: none;
  text-align: center;
}
.details__prices-days {
  color: #8B8B8B;
  font-size: 12px;
  font-weight: 400;
  text-align: center;
}
.details__prices-price-wrap {
  /*
   * Раньше ширина зависела только от текста цены (min-width:36px,
   * text-align:right) — у USPS (цена без центов, 2-3 цифры) цифра
   * прижималась к divider2/Buy Now иначе, чем у служб с "$XX.XX"
   * (4-5 цифр). Фиксированная ширина + центрирование (тот же приём,
   * что и у .sr-badge) убирают эту зависимость: цена всегда
   * равноудалена и от divider2, и от кнопки Buy Now, независимо от
   * количества цифр.
   */
  flex-shrink: 0;
  position: relative;
  width: 64px;
  display: flex;
  justify-content: center;
}
.details__prices-price {
  min-width: 0;
  color: #000;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}
.details__prices-item .btn--buy {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
/*
 * Второй ("тусклый") уровень кнопки Buy Now — см. app.js updateBuyReadiness().
 * В отличие от .disabled (тариф ещё грузится, pointer-events:none), эта кнопка
 * остаётся кликабельной специально: клик по ней подсвечивает конкретные
 * незаполненные поля вместо того, чтобы просто ничего не делать.
 *
 * pointer-events:auto здесь обязателен и важнее .opacity: пока форма не
 * заполнена, кнопка почти всегда одновременно ещё и .disabled (цена
 * перезапрашивается после правки полей) — без явного auto клик по ней
 * блокировался бы через pointer-events:none от .disabled и красная
 * подсветка полей вообще не появлялась бы (баг: "кнопка тусклая, но клик
 * ничего не делает").
 */
.details__prices-item .btn--buy.btn--buy--incomplete {
  opacity: 0.45;
  pointer-events: auto;
}
.icon-arrow-right {
  width: 14px;
  height: 14px;
  stroke: #FFF;
  stroke-width: 1.6;
  fill: none;
}
.details .text-color--green {
  display: inline-block;
  color: rgba(0, 190, 53, 0.68);
  font-size: 10px;
  font-weight: 400;
}
.details .title-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}
.details .title {
  text-transform: uppercase;
}
.details .dropdown__button {
  height: 35px;
  padding-left: 47px;
}
.details .dropdown__button::after {
  content: "";
  position: absolute;
  left: 25px;
  width: 12px;
  height: 12px;
  background-image: url(../images/icons/add-circle.svg);
  background-repeat: no-repeat;
  background-size: 12px;
  background-position: center;
}
.details .dropdown__list {
  top: 37px;
}
.details .dropdown__list-item {
  height: 35px;
}
.details .dropdown__list-item span {
  pointer-events: none;
}
.details .rating__value {
  position: relative;
}
.details .rating__value::before {
  content: "SR: ";
}
.details .rating__value::after {
  content: "%";
}
.details .form__input {
  height: 40px;
  padding: 6px 15px;
  padding-left: 37px;
}

.input-number__arrow {
  position: absolute;
  left: 14px;
}
.input-number__arrow--minus {
  transform: translateY(6.5px);
}
.input-number__arrow--plus {
  transform: translateY(-6.5px);
}
.input-number__arrow--minus .icon-arrow-tringle {
  transform: scale(1, -1);
}

.purchases__inner {
  display: grid;
  grid-template-rows: auto auto auto auto;
  gap: 30px;
}
.purchases__filters {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  z-index: 1;
  grid-row: 1/2;
}
.purchases__filters .btn {
  width: 100%;
  min-height: 25px;
  padding: 0;
  font-size: 10px;
  font-weight: 400;
}
.purchases__filters .icon-dropdown-tringle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 7.5px;
  z-index: 2;
}
.purchases__filters .dropdown:has(.dropdown__list.dropdown__list--visible) .icon-dropdown-tringle {
  transform: translateY(-50%) scale(1, -1);
  fill: #000;
}
.purchases__filters .dropdown__button {
  height: 25px;
  padding: 4.5px 7.5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  font-weight: 400;
}
.purchases__filters .dropdown__list {
  top: 27px;
}
.purchases__filters .dropdown__list-item {
  height: 25px;
  padding: 4.5px 7.5px;
  font-size: 10px;
  font-weight: 400;
}
/* Дропдаун выбора юзера (Select User): шире кнопки, чтобы помещались
 * user_id + контакт @nick в одной строке. Список absolute, поэтому
 * min-width растягивает его поверх соседних колонок; left:0 — расширение
 * вправо от кнопки. */
.purchases__filters .dropdown--users .dropdown__list {
  min-width: 300px;
}
.purchases__filters .dropdown--users .dropdown__list-item {
  white-space: nowrap;
}
.purchases__filters .dropdown--users .dropdown__list-item-content {
  display: flex;
  align-items: center;
  gap: 6px;
}
.purchases__filters .dropdown--users .dropdown__list-item-contact {
  color: #8a94a6;
  font-weight: 400;
}
.purchases__items-wrapper {
  grid-row: 4/5;
}
.purchases__items-wrapper::-webkit-scrollbar {
  display: none;
}
.purchases__item.purchases__items-head {
  padding: 10px 30px;
  margin-bottom: 10px;
  border-radius: 4px;
  border: 1px solid #E7EBEE;
  background: #F5FEFB;
  color: #000;
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
}
.purchases__items {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.purchases__item-box {
  position: relative;
}
.purchases__item-box:has(.checkbox-circle .checkbox-input:checked) .purchases__item, .purchases__item-box:has(.checkbox-angle .checkbox-input:checked) .purchases__item {
  background: #E7EBEE;
  box-shadow: -5px 5px 10px rgba(0, 0, 0, 0.1);
}
.purchases__item-box:has(.checkbox-circle .checkbox-input:checked) .input, .purchases__item-box:has(.checkbox-angle .checkbox-input:checked) .input {
  background: #E7EBEE;
}
.purchases__item {
  padding: 20px 30px;
  display: grid;
  /*
   * Колонки адресов (отправитель/получатель) шире, чем колонка веса:
   * типичная строка "205 CLAREMONT ST APT A" / "DAYTONA BEACH FL 32117"
   * помещается на одной строке без переносов. Раньше все три средние
   * колонки были minmax(110px, 160px), и длинный город/штат/индекс
   * переносился по словам, разрывая адрес "не по смыслу".
   */
  grid-template-columns: minmax(150px, 195px) 1px minmax(100px, 130px) 1px minmax(150px, 195px) 1px minmax(55px, 70px) 1px minmax(150px, 195px);
  gap: 15px;
  justify-content: space-between;
  border-radius: 4px 4px 0px 0px;
  background: #FFF;
}
.purchases__item .input-copy {
  color: #000;
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
}
.purchases__item-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  color: #000;
  font-size: 12px;
  font-weight: 400;
}
.purchases__item-col .text {
  text-align: center;
}
.purchases__item-line {
  width: 1px;
  height: 100%;
  background: #B0B0B0;
}
.purchases__item-bottom {
  padding: 8px 16px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 80px;
}
.purchases__item-bottom:has(.checkbox-circle .checkbox-input:checked) .purchases__item-options {
  display: flex;
}
.purchases__item-options {
  justify-content: flex-start;
  align-items: center;
  gap: 30px;
  display: none;
}
.purchases__item-options a {
  color: #4D4AFD;
  font-size: 12px;
  font-weight: 700;
  text-transform: capitalize;
}
.purchases__item-options a.purchases__item-cancel {
  color: #E5484D;
}
.purchases__item-options a.purchases__item-compensate {
  color: #d56400;
}
/*
 * Вложенный дропдаун "More" в Options (Cancel / Compensate / Delete).
 * Намеренно НЕ используем общий .dropdown из main.js — общий обработчик
 * при клике на пункт подставляет его содержимое в кнопку, а здесь пункты
 * это действия, кнопка менять текст не должна. Открытие/закрытие через
 * класс .open (см. admin.js). Список absolute ниже кнопки — перекрывает
 * следующую карточку, т.к. обёртка списка не режет overflow.
 */
.purchases__item-actions {
  position: relative;
}
.purchases__item-actions-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: none;
  background: none;
  color: #4D4AFD;
  font-size: 12px;
  font-weight: 700;
  text-transform: capitalize;
  cursor: pointer;
}
.purchases__item-actions-btn .icon-dropdown-tringle {
  width: 8px;
  height: 8px;
  fill: #4D4AFD;
  transition: transform 0.1s linear;
}
.purchases__item-actions.open .purchases__item-actions-btn .icon-dropdown-tringle {
  transform: scale(1, -1);
}
.purchases__item-actions-list {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 140px;
  margin: 0;
  padding: 4px 0;
  list-style-type: none;
  border: 1px solid #E7EBEE;
  border-radius: 4px;
  background: #FFF;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  z-index: 5;
}
.purchases__item-actions.open .purchases__item-actions-list {
  display: block;
}
.purchases__item-actions-item {
  padding: 7px 14px;
  color: #000;
  font-size: 12px;
  font-weight: 500;
  text-transform: capitalize;
  cursor: pointer;
  white-space: nowrap;
}
.purchases__item-actions-item:hover {
  background: rgba(176, 198, 225, 0.26);
}
.purchases__item-actions-item.purchases__item-cancel {
  color: #E5484D;
}
.purchases__item-actions-item.purchases__item-compensate {
  color: #d56400;
}
/* Канал продажи (WEB/API/BULK) в строке с весом — только админка. */
.purchases__item-weight .label-api {
  display: inline-block;
  margin-left: 6px;
  padding: 0 4px;
  width: auto;
  font-size: 10px;
  line-height: 14px;
  vertical-align: middle;
}
/* Аккаунт (public user_id) в карточке покупки — ссылка на просмотр сайта
 * от лица юзера (view-as-user), как из списка юзеров в админке. Без цвета —
 * обычный текст, при наведении подчёркивание. */
.purchases__item-account .view-as-user {
  cursor: pointer;
}
.purchases__item-account .view-as-user:hover {
  text-decoration: underline;
}
.purchases .form__input-copy {
  color: #000;
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
}
.purchases .form__input-box--search {
  grid-row: 3/4;
}
.purchases #progress-score-1-full,
.purchases #progress-score-2-full,
.purchases #progress-score-3-full {
  display: none;
}
.purchases__bars.purchases__bars--circle {
  padding: 20px 30px 15px;
  border-radius: 4px;
  background: #FFF;
  font-size: 12px;
  font-weight: 400;
}
.purchases__bars--circle {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 90px;
}
.purchases__bars--circle .purchases__bars-title {
  max-width: 100px;
}
.purchases__bars--line {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.purchases__bars--line .purchases__bars-items {
  padding: 15px 30px;
  display: grid;
  grid-template-columns: repeat(3, minmax(auto, 220px));
  border-radius: 4px;
  background: #FFF;
  font-size: 12px;
  font-weight: 400;
}
.purchases__bars--line .purchases__bars-items .purchases__bars-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.purchases__bars--line .purchases__bars-items .purchases__bars-text {
  display: flex;
  flex-direction: column;
}
.purchases__bars-title {
  font-size: 16px;
  font-weight: 400;
}
.purchases__bars-items {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  width: 100%;
}
.purchases__bars-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 15px;
}
.purchases__bars-item:nth-child(1) .rate__circle,
.purchases__bars-item:nth-child(1) .purchases__bars-line {
  background-color: #000;
}
.purchases__bars-item:nth-child(2) .rate__circle,
.purchases__bars-item:nth-child(2) .purchases__bars-line {
  background-color: #4D4AFD;
}
.purchases__bars-item:nth-child(3) .rate__circle,
.purchases__bars-item:nth-child(3) .purchases__bars-line {
  background-color: #009A2B;
}
.purchases__bars-line--box {
  width: 100%;
  height: 13px;
  overflow: hidden;
  border-radius: 4px;
  background: #D9D9D9;
}
.purchases__bars-line {
  height: 100%;
  border-radius: 4px;
}

.purchases__items-head--selected {
  color: #fff;
  background-color: #4D4AFD;
  display: none;
}
.purchases__items-head--selected .purchases-bars__table-head-btn {
  cursor: pointer;
}
.purchases__items-head--selected .purchases-bars__table-head-btn.track-selected--busy {
  opacity: .55;
  cursor: wait;
}

.purchases__items-wrapper:has(.checkbox-angle .checkbox-input:checked) .purchases__items-head--default {
  display: none;
}
.purchases__items-wrapper:has(.checkbox-angle .checkbox-input:checked) .purchases__items-head--selected {
  color: #fff;
  display: grid;
  background-color: #4D4AFD;
}

.balance {
  margin-bottom: 80px;
}
.balance__inner {
  max-width: 800px;
}
.balance__content {
  display: flex;
  gap: 20px 40px;
}
.balance__content-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.balance__content-col:nth-child(2) {
  text-align: center;
  min-width: 250px;
}
.balance__content-col:nth-child(2) .balance__elem-box span {
  padding: 0;
}
.balance__content-col:nth-child(2):has(.payment-active) .balance__elem-box--btn .btn {
  color: #fff;
  border: none;
  background-color: #4D4AFD;
  pointer-events: all;
}
.balance .balance__elem-input--box:has(.form-group) {
  padding: 0;
  border: none;
}
.balance .balance__elem-input--box .dropdown__button {
  height: 35px;
  justify-content: center;
  font-size: 14px;
  font-weight: 400;
}
.balance .balance__elem-input--box .dropdown__list {
  top: calc(100% + 5px);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}
.balance .balance__elem-input--box .dropdown__list-item {
  font-size: 14px;
  font-weight: 400;
  height: 35px;
  justify-content: center;
}
.balance .balance__elem-input--box .icon-chevron {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: calc(50% - 45px);
  z-index: 1;
  pointer-events: none;
}
.balance .balance__elem-input--box .dropdown__list-item-content {
  position: relative;
}
.balance .balance__elem-input--box .dropdown__list-item-content::before {
  content: "$";
  /* position: absolute;
  left: -7px; */
}
.balance .balance__elem-input--box:has(.balance__elem-input--btn) {
  padding: 0;
}
.balance__elem-box--btn {
  flex: 1;
}
.balance__elem-box--btn .btn {
  color: #B0B0B0;
  border: 1px solid #E7EBEE;
  background-color: #FFF;
  /* pointer-events: none; */
}
.balance__elem-box {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.balance__elem-box span {
  padding-left: 25px;
  font-size: 12px;
  font-weight: 300;
}
.balance__elem-box .btn {
  width: 100%;
  margin-top: auto;
}
.balance__elem-input--box {
  width: 100%;
  height: 35px;
  padding: 8px 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 4px;
  border: 1px solid #E7EBEE;
  background: #FFF;
  font-size: 14px;
  font-weight: 400;
}
.balance__elem-input--box-btns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(auto, 120px));
  justify-content: center;
  align-items: center;
  gap: 10px;
  display: flex;
  flex-wrap: wrap;
}
.balance__elem-input {
  text-align: center;
}
.balance__elem-btn {
  width: 120px;
  height: 35px;
  padding: 8px 15px;
  display: flex;
  align-items: center;
  gap: 15px;
  flex-shrink: 0;
  border-radius: 4px;
  border: 1px solid #E7EBEE;
  background: #FFF;
}
.balance__elem-btn.payment-active {
  background-color: #4D4AFD;
  color: #FFF;
}
.balance__elem-btn img {
  display: block;
  width: auto;
  height: 18.5px;
  pointer-events: none;
}

.history__inner {
  max-width: 800px;
}
.history__search-box {
  display: grid;
  grid-template-columns: auto 195px 100px minmax(auto, 100px);
  gap: 20px;
  margin-bottom: 20px;
}
.history__search-box .data-picker__label {
    height: 35px;
    position: relative;
}
.history__search-box .data-picker__input {
    line-height: 35px;
}
.history__search-box .btn {
  width: 100%;
}
.history__table {
  border-collapse: collapse;
}
.history__table th,
.history__table td {
  min-height: 35px;
  padding: 8px 12px;
  border: 1px solid #E7EBEE;
  text-align: left;
  vertical-align: top;
}
.history__table th:nth-child(1),
.history__table td:nth-child(1) {
  min-width: 130px;
}
.history__table th:nth-child(2),
.history__table td:nth-child(2) {
  min-width: 110px;
}
.history__table th:nth-child(3),
.history__table td:nth-child(3) {
  min-width: 320px;
}
.history__table th:nth-child(4),
.history__table td:nth-child(4) {
  min-width: 100px;
}
.history__table th:nth-child(5),
.history__table td:nth-child(5) {
  min-width: 140px;
}
.history__table-head {
  background: #F5FEFB;
}
.history td {
  background: #FFF;
}

.templates__inner {
  max-width: 900px;
}
.templates__items {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 20px;
}
.templates__item {
  max-width: 390px;
  width: 100%;
  padding-left: 10px;
}
.templates__item-title {
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
}
.templates__list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.templates__list-item {
  width: 100%;
  height: 110px;
  padding: 10px 20px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-radius: 0px 4px 4px 0px;
  background: #FFF;
  position: relative;
}
.templates__list-item .shape {
  position: absolute;
  width: 10px;
  height: 90px;
  background: #B0B0B0;
  top: 10px;
  left: -10px;
}
.templates__list-item .shape::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  width: 10%;
  height: 10px;
  border-right: 10px solid #B0B0B0;
  border-top: 10px solid transparent;
}
.templates__list-item .shape::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 10%;
  height: 10px;
  border-right: 10px solid #B0B0B0;
  border-bottom: 10px solid transparent;
}
.templates__list-text--box {
  display: flex;
  flex-direction: column;
  font-size: 14px;
  font-weight: 400;
}
.templates__list-btns {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
  margin-left: auto;
}
.templates__list-btns img {
  display: block;
}

.tickets__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 40px;
}
.tickets__head-btn {
  width: 100%;
  min-height: 44px;
  padding: 10px 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  border: 1px solid #E7EBEE;
  background-color: #fff;
  color: #231F20;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.tickets__head-btn:hover {
  border-color: #4D4AFD;
  color: #4D4AFD;
}
.tickets__head-btn--close {
  color: #E5484D;
  border-color: #E5484D;
}
.tickets__head-btn--close:hover {
  background-color: #E5484D;
  border-color: #E5484D;
  color: #fff;
}
.tickets__content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 20px;
}
/*
 * Окно переписки просили сделать пошире — базовый .container (1050px)
 * этого не позволял вместить широкий чат рядом со списком тикетов.
 * Расширяем контейнер только на этой странице, остальной админки
 * не касается.
 */
.page-admin-support .container {
  max-width: 1300px;
}
.tickets__history {
  /*
   * Список тикетов остаётся компактным (см. .tickets__send ниже) — всю
   * дополнительную ширину страницы получает окно переписки.
   */
  max-width: 460px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding-left: 10px;
}
.tickets__history .btn {
  padding: 5px 40px;
}
.tickets__history-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 25px;
}
.tickets__history-list.tickets__history-list--more {
  margin: 0;
  display: none;
}
.tickets__history-list.tickets__history-list--more.tickets-more {
  display: flex;
}
.tickets__history-list-item {
  width: 100%;
  min-height: 40px;
  padding: 8px 20px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  border-radius: 0px 3px 3px 0px;
  border: 1px solid var(--Frame, #E7EBEE);
  background: #FFF;
  font-size: 12px;
  font-weight: 400;
  position: relative;
  /*
   * ВАЖНО: overflow-x/y на самой строке нельзя трогать — .dropdown__list
   * (статус) абсолютно позиционирован и всплывает НИЖЕ строки, а цветная
   * полоса ::before торчит левее (left: -10px). Любой overflow, отличный
   * от visible, на этом элементе обрезает и то, и другое (по спецификации
   * overflow-x != visible принудительно делает и overflow-y автоматическим).
   * Поэтому строка остаётся flex/nowrap (это и так поведение по умолчанию),
   * а скролл при нехватке места сделан точечно внутри .tickets__history-list-item-user.
   */
}
.tickets__history-list-item-user {
  white-space: nowrap;
  color: #8A8F98;
  font-size: 11px;
  overflow-x: auto;
  min-width: 0;
  max-width: 170px;
  scrollbar-width: none;
}
.tickets__history-list-item-user::-webkit-scrollbar {
  display: none;
}
.tickets__history-list-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: -10px;
  bottom: 0;
  width: 10px;
  height: 100%;
  border-radius: 8px 0px 0px 8px;
}
.tickets__history-list-item--not-resolved::before {
  background: rgba(176, 176, 176, 0.3);
}
.tickets__history-list-item--resolved::before {
  background: #A8E4BF;
}
.tickets__history-list-item--not-answered::before {
  background: #F4CBC5;
}
.tickets__history-list-item--answered::before {
  background: rgba(77, 74, 253, 0.3);
}
.tickets__history-list-item--more {
  text-align: center;
  color: #B0B0B0;
  font-size: 12px;
  font-weight: 600;
}
.tickets__send {
  /*
   * Базовое (клиентское) значение оставлено прежним: страница клиента
   * (.page-tickets) использует стандартный .container (1050px), и вместе
   * с .tickets__history (460px) более широкий чат туда не помещается —
   * .tickets__content (flex-wrap: wrap) роняет чат под список. Более
   * широкий чат — только для админки, см. .page-admin-support ниже.
   */
  max-width: 480px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: 12px;
  font-weight: 400;
}
.page-admin-support .tickets__send {
  max-width: 650px;
}
.tickets__send-head {
  display: flex;
  align-items: center;
  gap: 20px;
}
.tickets__send-head .tickets__send-ticket {
  height: 35px;
  padding: 8px 24px;
  border-radius: 12px;
  border: 1px solid #E7EBEE;
  background: #FFF;
  font-weight: 600;
}
.tickets__send-ticket {
  width: auto;
  flex: 1 1 100%;
  white-space: nowrap;
}
.tickets__send-priority {
  width: 160px;
  flex-shrink: 0;
}
.tickets__send-chat--box {
  padding: 20px 20px 25px;
  border-radius: 20px;
  border: 1px solid #ECECEC;
  background: #FFF;
  box-shadow: 0 4px 24px rgba(20, 20, 43, 0.05);
}
/*
 * Прокручиваемая область сообщений — раньше здесь не было ни max-height,
 * ни overflow, окно просто бесконечно растягивалось под всю переписку,
 * а app.scrollChat() (который выставляет .scrollTop) фактически ничего
 * не скроллил, потому что скроллить было нечему. Селектор через прямого
 * ребёнка .tickets__send-chat--box, потому что тем же классом
 * (massage_content) по разметке помечен ещё и вложенный #messages —
 * ограничиваем высотой именно внешнюю обёртку.
 */
.tickets__send-chat--box > .massage_content {
  max-height: 560px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #E7EBEE transparent;
  margin: 0 -8px 20px;
  padding: 0 8px;
}
.tickets__send-chat--box > .massage_content::-webkit-scrollbar {
  width: 5px;
}
.tickets__send-chat--box > .massage_content::-webkit-scrollbar-thumb {
  background: #E7EBEE;
  border-radius: 10px;
}
.tickets__send-chat {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/*
 * Современный чат: свои сообщения (from) — справа, тёмный пузырь;
 * входящие (to) — слева, светлый пузырь. Раньше оба типа "прилипали"
 * к левому краю и отличались только сдвигом padding-left — из-за
 * этого переписка читалась не как диалог, а как две колонки текста.
 */
.tickets__send-message-from,
.tickets__send-message-to {
  display: flex;
  flex-direction: column;
  max-width: 78%;
}
.tickets__send-message-from {
  align-self: flex-end;
  align-items: flex-end;
}
.tickets__send-message-to {
  align-self: flex-start;
  align-items: flex-start;
}
.tickets__send-message-from .tickets__send-message {
  background: #17181C;
  color: #fff;
  border-radius: 16px 16px 4px 16px;
}
.tickets__send-message-to .tickets__send-message {
  background: #F1F2F5;
  color: #17181C;
  border-radius: 16px 16px 16px 4px;
}
.tickets__send-message-avatar-img {
  display: none;
}
.tickets__send-message-name {
  padding: 0 4px 4px;
  color: #A6ABB5;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.tickets__send-message {
  min-height: unset;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 400;
  word-break: break-word;
}
.tickets__send-message p {
  margin: 0;
}

.tickets__send-message img{
	max-width: 100%;
	border-radius: 8px;
	margin-top: 6px;
}

.tickets__send-message-date {
  position: static;
  display: block;
  margin-top: 4px;
  padding: 0 4px;
  color: #B0B0B0;
  font-size: 10px;
  font-weight: 400;
}
.tickets__send-chat-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 4px 0;
  white-space: normal;
  text-align: center;
  overflow: hidden;
  color: #B0B0B0;
  font-size: 11px;
  font-weight: 400;
}
.tickets__send-chat-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.tickets__send-chat-bottom .btn {
  min-width: 130px;
}
/*
 * Поле ввода и нижняя панель — только внутри окна переписки тикета
 * (#ticket-chat), чтобы не задеть #send-message/.add-file__box в других
 * формах (создание тикета, форма на tpl/footer.php и т.д.), которые
 * используют те же общие классы.
 */
#ticket-chat #send-message {
  border: 1px solid #E7EBEE;
  border-radius: 14px;
  padding: 12px 16px;
  font-size: 13px;
  transition: border-color .15s ease;
}
#ticket-chat #send-message:focus {
  outline: none;
  border-color: #17181C;
}
#ticket-chat .tickets__send-chat-bottom .add-file__box {
  border-radius: 12px;
}
#ticket-chat .tickets__send-chat-bottom .button {
  border-radius: 12px;
  background-color: #17181C;
}
#ticket-chat .tickets__send-chat-bottom .button:hover {
  background-color: #33343A;
}
.tickets__send-bottom {
  display: flex;
  gap: 40px;
}
.tickets__send-bottom-btn {
  min-width: 180px;
  height: 35px;
  flex-shrink: 0;
  color: #000;
  border-radius: 12px;
  border: 1px solid #E7EBEE;
  background: #E7EBEE;
  color: #B0B0B0;
  background: #FFF;
  transition: background-color .15s ease, color .15s ease;
}
.tickets__send-bottom-btn:nth-child(2) {
  flex-grow: 1;
}
.tickets__send-bottom-btn:hover,
.tickets__send-bottom-btn:active {
  color: #000;
  border-radius: 12px;
  border: 1px solid #E7EBEE;
  background: #E7EBEE;
}
.tickets-page__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
/*
 * .tickets__content обычно flex с justify-content: space-between — это
 * работает, когда рядом два блока (список тикетов + чат). Здесь ребёнок
 * один (приветствие для тех, у кого ещё нет тикетов), и space-between
 * просто прижимает его к левому краю вместо центра страницы.
 */
.tickets-page__new-create {
  justify-content: center;
  width: 100%;
}
.tickets-page__box .btn {
  padding: 5px 40px;
}
.tickets-page__box-text {
  max-width: 450px;
  font-size: 16px;
  font-weight: 400;
}
.tickets-page__box-text p {
  margin-bottom: 1em;
}
.tickets-page__box-text--framed {
  text-align: center;
  padding: 30px 40px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  background: transparent;
}
.tickets-page__box-text--framed p {
  margin-bottom: 0;
}
.tickets-page__new-btn-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.tickets-page__telegram-link {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 35px;
  padding: 5px 16px;
  border-radius: 4px;
  /* было 1px #E7EBEE — почти не видно рядом с белым фоном, сделали контур заметнее */
  border: 1.5px solid #C4CAD3;
  color: #55555F;
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
  transition: border-color .15s ease, color .15s ease;
}
.tickets-page__telegram-link img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.tickets-page__telegram-link:hover {
  border-color: #4D4AFD;
  color: #4D4AFD;
}
.tickets__not {
  max-width: 330px;
  width: 100%;
  height: 40px;
  padding: 8px 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0px 3px 3px 0px;
  border: 1px solid #E7EBEE;
  background: #B0B0B0;
}
.tickets__form-box {
  max-width: 540px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.tickets__form {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 30px;
  border-radius: 4px;
  border: 1px solid #E7EBEE;
  background: #FFF;
}
.tickets__form-title {
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: 700;
}
.tickets__form-inputs {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 30px;
}
.tickets__form-input--box {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 24px;
  border-radius: 0px 3px 3px 0px;
  border: 1px solid #E7EBEE;
  background: #FFF;
}
.tickets__form-input--box:has(.form-group) {
  padding: 0;
  border: none;
}
.tickets__form-input--box .dropdown__button {
  height: 40px;
  padding-left: 62px;
  font-size: 12px;
  font-weight: 400;
}
.tickets__form-input--box .dropdown__list {
  top: calc(100% + 5px);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}
.tickets__form-input--box .dropdown__list-item {
  height: 40px;
  font-size: 12px;
  font-weight: 400;
}
.tickets__form-input--box .tickets__form-input-title {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 24px;
  z-index: 1;
  pointer-events: none;
  color: #000;
  font-size: 12px;
  font-weight: 700;
}
.tickets__form-input {
  width: 100%;
  min-height: 40px;
  padding: 8px 24px 8px 8px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 12px;
  font-weight: 400;
}
.tickets__form-input--textarea {
  min-height: 114px;
  padding: 15px 25px;
  margin-bottom: 30px;
  resize: none;
}
.tickets__form-input--textarea::placeholder {
  color: #000;
  font-family: inherit;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.tickets__form-input--placeholder {
  font-size: 12px;
  font-weight: 700;
}
.tickets__form-input--static {
  min-height: 40px;
  padding: 8px 24px 8px 38px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 12px;
  font-weight: 400;
}
.tickets__search {
  max-width: 390px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: flex-start;
}
.tickets__search .search {
  width: 100%;
}
.tickets__search .btn {
  padding: 5px 30px;
  margin-top: auto;
}
.tickets__search-list {
  max-width: 300px;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.tickets__search-list-item {
  padding: 8px 15px;
  border-radius: 4px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 14px;
}
.tickets__search-list-item:active {
  background-color: #000;
}
.tickets__search-list-item:active .tickets__search-list-text {
  color: #fff;
}
.tickets__search-list-text {
  font-size: 14px;
  font-weight: 400;
}
.tickets__search-list-circles {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}
.tickets__search-list-circles .tickets__head-circle {
  width: 20px;
  height: 20px;
  border: 1.5px solid #fff;
  font-size: 7px;
  font-weight: 400;
}
.tickets__search-list-circles .tickets__head-circle:nth-child(1) {
  border-color: #FD6A4A;
}
.tickets__search-list-circles .tickets__head-circle:nth-child(2) {
  border-color: #B0B0B0;
}
.tickets.page-tickets-page .tickets__content {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.tickets.page-tickets-request-2 .tickets__content {
  display: grid;
  grid-template-columns: minmax(auto, 390px) minmax(auto, 540px);
}

.tickets__history .btn {
  margin: 0 auto;
}

.tickets__history .form-group {
  width: fit-content;
}
.tickets__history .dropdown__button {
  width: fit-content;
  height: 100%;
  border: none;
  padding: 0;
  padding-right: 28px;
  color: #000;
  font-size: 12px;
  font-weight: 400;
}
.tickets__history .dropdown__list {
  width: calc(100% + 10px);
  margin-left: -10px;
  top: calc(1em + 10px);
}
.tickets__history .dropdown__list-item {
  height: fit-content;
  padding: 5px 10px;
  color: #000;
  font-size: 12px;
  font-weight: 400;
}
.tickets__history .icon-chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke: #242424;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  z-index: 2;
}
/*
 * Раньше цвет полосы определялся через :has(.dropdown__button .not-answered)
 * и т.п. — но класс на span'е статуса генерировался как strtolower($status)
 * БЕЗ замены пробела на дефис ("Not answered" -> класс "not answered", то
 * есть ДВА класса "not"+"answered"), поэтому .answered совпадал у Not
 * answered и Answered одновременно, и оба красились одинаково. Плюс эти
 * :has()-правила специфичнее и перебивали простые classes ниже
 * (.tickets__history-list-item--not-answered и т.д.), которые уже
 * корректно проставляются и на сервере, и через сокет в JS. Убрано,
 * цвет теперь только от этих простых классов.
 */

.tickets__send-priority {
  padding: 0;
  border-radius: 4px;
  border: none;
}
.tickets__send-priority .icon-chevron {
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  right: 13px;
  stroke: #242424;
  pointer-events: none;
}
.tickets__send-priority .dropdown__button {
  height: 35px;
  padding: 5px 13px;
  font-size: 14px;
  font-weight: 400;
}
.tickets__send-priority .dropdown__list {
  top: 40px;
}
.tickets__send-priority .dropdown__list-item {
  height: 35px;
  padding: 5px 13px;
}

.tickets__form-input--box-priority .dropdown__button {
  padding-left: 77px;
}

.tickets__form-input--box.choice-user .icon-chevron,
.choice-user .icon-chevron {
  stroke: #242424;
  pointer-events: none;
}
.tickets__form-input--box.choice-user .dropdown__button,
.choice-user .dropdown__button {
  padding-left: 105px;
  gap: 8px;
}
.tickets__form-input--box.choice-user .dropdown__list,
.choice-user .dropdown__list {
  top: calc(100% + 10px);
  height: 272px;
  max-height: unset;
}
.tickets__form-input--box.choice-user .dropdown__list-item--searchid,
.choice-user .dropdown__list-item--searchid {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  padding: 8px 25px;
}
.tickets__form-input--box.choice-user .dropdown__list-item--searchid span,
.choice-user .dropdown__list-item--searchid span {
  color: #000;
  font-family: inherit;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
  white-space: nowrap;
}
.tickets__form-input--box.choice-user .dropdown__list-item--searchid .icon-search,
.choice-user .dropdown__list-item--searchid .icon-search {
  stroke: #242424;
}
.tickets__form-input--box.choice-user .dropdown__list-item--searchid form,
.choice-user .dropdown__list-item--searchid form {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.tickets__form-input--box.choice-user .dropdown__list-item--searchid button,
.choice-user .dropdown__list-item--searchid button {
  width: 24px;
  height: 24px;
}
.tickets__form-input--box.choice-user .dropdown__list-item--searchid input,
.choice-user .dropdown__list-item--searchid input {
  width: 100%;
  height: 24px;
}
.tickets__form-input--box.choice-user .dropdown__list-item,
.choice-user .dropdown__list-item {
  height: fit-content;
  padding: 7.5px 25px;
  border: none;
}
.tickets__form-input--box.choice-user .dropdown__list-item:hover,
.choice-user .dropdown__list-item:hover {
  background-color: unset;
}

.reg-and-log {
  display: flex;
  align-items: center;
  min-height: calc(100vh - 80px);
}
.reg-and-log .container {
  margin: 0 auto;
}
.reg-and-log__inner {
  max-width: 300px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 60px;
  align-items: center;
}
.reg-and-log__title {
  text-align: center;
  color: #000;
  font-size: 20px;
  font-weight: 700;
}
.reg-and-log__content {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 30px;
}
.reg-and-log__captcha {
  width: 100%;
  height: auto;
}
.reg-and-log__captcha img {
  display: block;
  width: 100%;
}
.reg-and-log__btns {
  width: 100%;
  display: flex;
  justify-content: space-around;
}
.reg-and-log .logo {
  margin: 0;
}

.account__inner {
  max-width: 830px;
}
.account__content {
  display: flex;
  flex-direction: column;
  gap: 35px;
}
.account__top {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 40px;
}
.account__top .account__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 25px 30px 20px;
  background-color: #fff;
}
.account__item {
  width: 100%;
}
.account__text-box {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.account__text-placeholder {
  font-size: 14px;
  font-weight: 400;
}
.account__text {
  font-size: 20px;
  font-weight: 700;
}
.account__text .copy-box .input {
  font-size: inherit;
  font-weight: inherit;
}
.account__item-img {
  width: 30px;
  height: 30px;
  object-fit: cover;
}
/*
 * Только страница Account: цветные квадраты с иконками слева от текста,
 * как на референсе. Страница Bulk Purchase использует те же .account__item
 * /.account__top под старые img-иконки — трогать их нельзя, поэтому весь
 * новый вид навешен через .page-account, а не на общие классы.
 */
.page-account .account__top .account__item {
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  padding-left: 20px;
  padding-right: 16px;
}
.account__item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  min-width: 46px;
  border-radius: 13px;
}
.account__item-icon svg {
  width: 24px;
  height: 24px;
}
.page-account .account__top .account__text-placeholder {
  white-space: nowrap;
}
.account__item-icon--balance {
  background-color: #ECEBFF;
  color: #4D4AFD;
}
.account__item-icon--purchases {
  background-color: #E3F0FF;
  color: #2F86EB;
}
.account__item-icon--tickets {
  background-color: #E4F9EC;
  color: #22A366;
}
.account__bottom {
  padding: 25px 0 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 40px;
  background-color: #fff;
}
.account__bottom .account__item {
  padding: 0 30px 0;
}
.account__bottom .account__text-placeholder {
  white-space: nowrap;
}
.account__toggles {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 20px 40px;
}
.account__toggles .account__item {
  width: auto;
  flex: 1 1 0;
  min-width: 0;
}
.account__bottom .copy-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}
.account__user-input {
  min-width: 98px;
  width: 98px;
  max-width: 153px;
}
.account__contact-input {
  min-width: 124px;
  width: 124px;
  max-width: 153px;
}
.account__password-input {
  min-width: 118px;
  width: 118px;
  max-width: 153px;
  -webkit-text-security: circle;
}
.account .replacer {
  border: 1px #666 dotted;
  height: 20px;
  display: inline-block;
  color: #444;
  background: #eee;
}
.account .replacer.current {
  border-color: #ccc;
  color: #000;
  background: #fff;
}
.account__contact-box, .account__password-box {
  flex-direction: row !important;
  justify-content: flex-start !important;
}

.user__inner {
  max-width: 940px;
}
.user__filtered {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
  width: 100%;
  /* overflow-x: auto; */
  white-space: nowrap;
  font-size: 12px;
  font-weight: 400;
}
.user__filtered-text--color {
  color: #009A2B;
}
.user__filtered-label {
  font-weight: 600;
  color: rgba(0, 0, 0, 0.55);
}
.user__filtered-items {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}
.user .search {
  margin-bottom: 40px;
}
.user__btns {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px 20px;
  margin-bottom: 20px;
}
.user__btns .btn--muted {
  min-width: 170px;
  pointer-events: all;
}
.user__btns .btn {
  min-width: 170px;
  margin-left: auto;
}
.user__ceckboxes {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 35px;
}
.user__tab-btns {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 5px;
}

.users-tab,
.user__tab-btn {
  width: fit-content;
  height: 47px;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #B0B0B0;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
}

.users-tab.active,
.user__tab-btn.tab-active {
  color: #000;
  font-size: 20px;
  font-weight: 700;
}
.user__tab-item {
  display: none;
}
.user__tab-item.tab-active {
  display: block;
}
.user__table {
  border-collapse: collapse;
}
.user__table th,
.user__table td {
  min-width: 100px;
  width: 100px;
  max-width: 100px;
  padding: 8px 12px;
}
.user__table th input,
.user__table td input {
  max-width: 69px;
}
.user__table th:nth-child(1),
.user__table td:nth-child(1) {
  min-width: 170px;
  width: 170px;
  max-width: 170px;
}

.user__table th:nth-child(4),
.user__table td:nth-child(4) {
  min-width: 120px;
  width: 120px;
  max-width: 120px;
}
.user__table th:nth-child(4) input,
.user__table td:nth-child(4) input {
  max-width: 120px;
}
.user__table th:nth-child(5), .user__table th:nth-child(6),
.user__table td:nth-child(5),
.user__table td:nth-child(6) {
  min-width: 120px;
  width: 120px;
  max-width: 120px;
}
.user__table th:nth-child(5) input, .user__table th:nth-child(6) input,
.user__table td:nth-child(5) input,
.user__table td:nth-child(6) input {
  max-width: 100px;
}
.user__table th {
  height: 35px;
  border: 1px solid #E7EBEE;
  background: #F5FEFB;
  color: #000;
  font-size: 14px;
  font-weight: 700;
}
.user__table td {
  min-height: 32px;
  border: 1px solid #E7EBEE;
  background: #FFF;
  font-size: 12px;
  font-weight: 400;
}
.user__table td:has(.form-group) {
  padding: 0;
}
.user__table td:has(.form-group.status) {
  padding: 8px 12px;
}
.user__table th {
  position: relative;
}
.user__table th.sortable {
  cursor: pointer;
}
.user__table th.sortable::before {
  content: ' ';
  background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --><svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.0686 15H7.9313C7.32548 15 7.02257 15 6.88231 15.1198C6.76061 15.2238 6.69602 15.3797 6.70858 15.5393C6.72305 15.7232 6.93724 15.9374 7.36561 16.3657L11.4342 20.4344C11.6323 20.6324 11.7313 20.7314 11.8454 20.7685C11.9458 20.8011 12.054 20.8011 12.1544 20.7685C12.2686 20.7314 12.3676 20.6324 12.5656 20.4344L16.6342 16.3657C17.0626 15.9374 17.2768 15.7232 17.2913 15.5393C17.3038 15.3797 17.2392 15.2238 17.1175 15.1198C16.9773 15 16.6744 15 16.0686 15Z" stroke="%23000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M7.9313 9.00005H16.0686C16.6744 9.00005 16.9773 9.00005 17.1175 8.88025C17.2393 8.7763 17.3038 8.62038 17.2913 8.46082C17.2768 8.27693 17.0626 8.06274 16.6342 7.63436L12.5656 3.56573C12.3676 3.36772 12.2686 3.26872 12.1544 3.23163C12.054 3.199 11.9458 3.199 11.8454 3.23163C11.7313 3.26872 11.6323 3.36772 11.4342 3.56573L7.36561 7.63436C6.93724 8.06273 6.72305 8.27693 6.70858 8.46082C6.69602 8.62038 6.76061 8.7763 6.88231 8.88025C7.02257 9.00005 7.32548 9.00005 7.9313 9.00005Z" stroke="%23000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat: no-repeat;
  position: absolute;
  background-size: contain;
  height: 15px;
  width: 15px;
  right: 0px;
  top: 10px;
  opacity: .4;
}
.user__tab-item .table-wrapper thead {
  width: 100%;
  display: block;
}
.user__tab-item .table-wrapper tbody {
  overflow-y: scroll;
  height: 800px;
  display: block;
}

.service-health-alert {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #FFF6EC;
  border: 1px solid #FFD79A;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 32px;
}
.service-health-alert__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #B5610A;
}
.service-health-alert__title .text--muted {
  font-weight: 400;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.5);
}
.service-health-alert__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: #B5610A;
}
.service-health-alert__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #fff;
  border: 1px solid #FFE1BA;
  border-radius: 8px;
  padding: 10px 14px;
}
.service-health-alert__name {
  font-size: 14px;
  font-weight: 600;
  min-width: 140px;
  flex-shrink: 0;
}
.service-health-alert__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-grow: 1;
}
.service-health-alert__reason {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.65);
}
.service-health-alert__time {
  font-size: 11px;
  color: rgba(0, 0, 0, 0.45);
}
.service-health-reenable-btn {
  flex-shrink: 0;
}

.service__items {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.service__items .btn {
  min-width: 170px;
}
.service__selector-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.service__selector-title label {
  font-size: 13px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.7);
  white-space: nowrap;
}
.service__selector-title label .text--muted {
  font-weight: 400;
  font-size: 12px;
}
.service__selector-title input {
  max-width: 220px;
}
.service__table {
  border-collapse: collapse;
}
.service__table th,
.service__table td {
  min-width: 100px;
  width: 100px;
  max-width: 100px;
}
.service__table th input,
.service__table td input {
  max-width: 76px;
}
.service__table td input.input-service-label,
.service__table td input.input-service-days {
  max-width: 110px;
}
.service__table th:nth-child(1),
.service__table td:nth-child(1) {
  min-width: 180px;
  width: 180px;
  max-width: 180px;
}
.service__table th:nth-child(1) input,
.service__table td:nth-child(1) input {
  max-width: 156px;
}
.service__table th:nth-child(4),
.service__table td:nth-child(4) {
  min-width: 140px;
  width: 140px;
  max-width: 140px;
}
.service__table th:nth-child(4) input,
.service__table td:nth-child(4) input {
  max-width: 116px;
}
.service__table th:nth-child(5),
.service__table td:nth-child(5) {
  min-width: 110px;
  width: 110px;
  max-width: 110px;
}
.service__table th:nth-child(5) input,
.service__table td:nth-child(5) input {
  max-width: 86px;
}
.service__table th {
  text-align: left;
}
.service__table th:nth-child(6) {
  min-width: 180px;
  width: 180px;
  max-width: 180px;
}
.service__table th:nth-child(6) input {
  max-width: 156px;
}
.service__table td:nth-child(6), .service__table td:nth-child(7) {
  min-width: 90px;
  width: 90px;
  max-width: 90px;
}
.service__table td:nth-child(6) input, .service__table td:nth-child(7) input {
  max-width: 90px;
}
.service__table td:has(.form__input-box) {
  padding: 0;
}
.service__table td .form__input-box {
  height: 100%;
  border: none;
}
.service__table td .form__input {
  padding: 8px 12px 8px 31px;
  font-size: 12px;
  font-weight: 400;
}
.service__table td .input-number__arrow {
  left: 12px;
}
.service .form-group .dropdown__button {
  width: 100%;
  height: 100%;
  border: none;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
}
.service .form-group .icon-chevron {
  position: absolute;
  right: -5px;
  z-index: 1;
  stroke: #242424;
  pointer-events: none;
}
.service .form-group .dropdown__list {
  top: calc(100% + 0px);
  width: calc(100% + 24px);
  left: -12px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}
.service .form-group .dropdown__list-item {
  height: 25px;
  padding: 8px 12px;
  font-size: inherit;
  font-weight: inherit;
}

.admin-support .title-box {
  overflow-x: auto;
}
.admin-support__tab-btns {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  white-space: nowrap;
  width: fit-content;
}
.admin-support__tab-btn {
  color: #B0B0B0;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
}
.admin-support__tab-btn.tab-active {
  color: #000;
  font-size: 20px;
  font-weight: 700;
}
.admin-support__tab-item {
  display: none;
}
.admin-support__tab-item.tab-active {
  display: block;
}
.admin-support__compensations {
  display: grid;
  grid-template-columns: auto minmax(auto, 280px);
  justify-content: flex-start;
  align-items: flex-start;
  gap: 40px;
}
.admin-support__compensations .table__btn {
  width: 100%;
  height: 35px;
  padding: 8px 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 4px;
  border: 1px solid #E7EBEE;
  background: #FFF;
}
.admin-support__compensations .table__btn span {
  font-size: 14px;
  font-weight: 400;
  padding: 0;
}
.admin-support .compensations__amount-btn .balance__elem-input--box,
.admin-support .compensations__amount-btn .balance__elem-input {
  pointer-events: none;
}
.admin-support__compensations-col-1 {
  max-width: 200px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.admin-support__compensations-col-1 .balance__elem-box:has(.btn) span {
  opacity: 0;
}
.admin-support__compensations-col-2 {
  max-width: 280px;
  width: 100%;
  height: 100%;
}
.admin-support__compensations-col-2 .balance__elem-box {
  height: 100%;
}
.admin-support__compensations-trackers {
  height: 100%;
  padding: 25px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  border-radius: 4px;
  border: 1px solid #E7EBEE;
  background: #FFF;
}
.admin-support__compensations-trackers span {
  padding: 0;
  color: #000;
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
}
.admin-support .tech-support__create {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 40px;
}
.admin-support .tech-support__input {
  width: 280px;
  height: 35px;
  padding: 4.59px 30px;
  flex-shrink: 0;
}
.admin-support .tech-support__table th,
.admin-support .tech-support__table td {
  min-width: 150px;
  width: 150px;
}
.admin-support .tech-support .btn {
  min-width: 160px;
}

.admin-wallet__checkboxes-box {
  display: grid;
  grid-template-columns: 200px auto;
  gap: 40px;
  margin-top: 60px;
}
/*
 * У админа выше больше нет блока пополнения баланса (он ему не нужен —
 * это не его личный счёт), переключатели способов оплаты идут сразу
 * под заголовком секции, поэтому большой отступ, рассчитанный на блок
 * пополнения сверху, здесь не нужен.
 */
.admin-wallet__checkboxes-box--top {
  margin-top: 0;
}
/*
 * Остался единственный способ оплаты (Crypto) — заголовок и тумблер
 * теперь в одну строку, а не в grid из двух колонок под общий блок
 * пополнения, которого на этой странице больше нет.
 */
.admin-wallet__checkboxes-box--single {
  display: flex;
  align-items: center;
  gap: 20px;
}
.admin-wallet__checkboxes-box--single .admin-wallet__checkboxes-title {
  margin-bottom: 0;
}
.admin-wallet__checkboxes {
  padding: 0 15px;
}
.admin-wallet__checkboxes-title {
  margin-bottom: 20px;
  color: #000;
  font-size: 14px;
  font-weight: 400;
}
.admin-wallet__checkboxes-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: fit-content;
}
.admin-wallet .balance__elem-input--box:has(.form-group) {
  padding: 0;
  border: none;
}
.admin-wallet .balance__elem-input--box .dropdown__button {
  height: 35px;
  justify-content: center;
  font-size: 14px;
  font-weight: 400;
}
.admin-wallet .balance__elem-input--box .dropdown__list {
  top: calc(100% + 5px);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}
.admin-wallet .balance__elem-input--box .dropdown__list-item {
  font-size: 14px;
  font-weight: 400;
  height: 35px;
  justify-content: center;
}
.admin-wallet .balance__elem-input--box .icon-chevron {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: calc(50% - 45px);
  z-index: 1;
  pointer-events: none;
}
.admin-wallet .balance__elem-input--box .dropdown__list-item-content {
  position: relative;
}
.admin-wallet .balance__elem-input--box .dropdown__list-item-content::before {
  content: "$";
  position: absolute;
  left: -7px;
}
.admin-wallet .balance__elem-input--box:has(.balance__elem-input--btn) {
  padding: 0;
}

.balance__elem-input--btn {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.balance__elem-input--btn svg {
  pointer-events: none;
}

.page-support .tickets__history .form-group {
  width: fit-content;
}
.page-support .tickets__history .dropdown__button {
  width: fit-content;
  height: 100%;
  border: none;
  padding: 0;
  padding-right: 28px;
  color: #000;
  font-size: 12px;
  font-weight: 400;
}
.page-support .tickets__history .dropdown__list {
  width: calc(100% + 10px);
  margin-left: -10px;
  top: calc(1em + 10px);
}
.page-support .tickets__history .dropdown__list-item {
  height: fit-content;
  padding: 5px 10px;
  color: #000;
  font-size: 12px;
  font-weight: 400;
}
.page-support .tickets__history .icon-chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke: #242424;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  z-index: 2;
}
.page-support .tab-compensations .choice-user .dropdown__button {
  padding: 8px 25px;
  padding-left: 76px;
}
.page-support .tab-compensations .choice-user .icon-plus {
  width: 12px;
  height: 12px;
}
.page-support .tab-compensations .balance__elem-box .choice-user span {
  padding: 0;
  color: #000;
  font-size: 14px;
  font-weight: 400;
}
.page-support .tab-compensations .tickets__form-input-title {
  width: 12px;
  height: 12px;
  top: 50%;
  transform: translateY(-50%);
  left: 54px;
}
.page-support .tab-compensations .choice-user .dropdown__list {
  min-width: 290px;
}

.page-support .tab-compensations .choice-user .dropdown__button,
.page-admin-support .tab-compensations .choice-user .dropdown__button {
  padding: 8px 25px;
  padding-left: 76px;
  height: 35px;
}
.page-support .tab-compensations .choice-user .icon-plus,
.page-admin-support .tab-compensations .choice-user .icon-plus {
  width: 12px;
  height: 12px;
}
.page-support .tab-compensations .balance__elem-box .choice-user span,
.page-admin-support .tab-compensations .balance__elem-box .choice-user span {
  padding: 0;
  color: #000;
  font-size: 14px;
  font-weight: 400;
}
.page-support .tab-compensations .tickets__form-input-title,
.page-admin-support .tab-compensations .tickets__form-input-title {
  width: 12px;
  height: 12px;
  top: 50%;
  transform: translateY(-50%);
  left: 54px;
}
.page-support .tab-compensations .choice-user .dropdown__list,
.page-admin-support .tab-compensations .choice-user .dropdown__list {
  min-width: 290px;
}

.tickets__send-priority {
  padding: 0;
  border-radius: 4px;
  border: none;
}
.tickets__send-priority .icon-chevron {
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  right: 13px;
  stroke: #242424;
}
.tickets__send-priority .dropdown__button {
  height: 35px;
  padding: 5px 13px;
  font-size: 14px;
  font-weight: 400;
}
.tickets__send-priority .dropdown__list {
  top: 40px;
}
.tickets__send-priority .dropdown__list-item {
  height: 35px;
  padding: 5px 13px;
}

.page-support-user .support-user__dropdown {
  margin-bottom: 40px;
}
.page-support-user .support-user__dropdown .form-group {
  width: fit-content;
}
.page-support-user .support-user__dropdown .dropdown {
  width: fit-content;
}
.page-support-user .support-user__dropdown .dropdown__button {
  width: 200px;
  height: 35px;
  justify-content: center;
  padding: 8px 25px;
}
.page-support-user .support-user__dropdown .dropdown__button span {
  padding-right: 30px;
}
.page-support-user .support-user__dropdown .icon-chevron {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 50px;
  stroke: #242424;
  z-index: 2;
}
.page-support-user .support-user__dropdown .dropdown__list {
  width: 480px;
}
.page-support-user .purchases__items-box {
  overflow-x: auto;
  padding-left: 24px;
  margin-left: -24px;
}
.page-support-user .purchases__items-box::-webkit-scrollbar {
  display: none;
}
.page-support-user .purchases__item {
  width: fit-content;
  grid-template-columns: 160px 1px 130px 1px 160px 1px 80px 1px 160px 1px 100px;
}
.page-support-user .btn--action {
  width: fit-content;
  padding: 2.5px 8.5px;
  margin: 0 auto;
}

	
	/* admin */
		.user-disabled{
			display: none;
		}
	/* admin end */
	
	/* loader start */
		.loader-box.buy-label{
			left: 200px;
			position: relative;
		}
	
		.loader-wrap{
			z-index: 999;
			transform: translate(-50%, -50%);
		}

		.loader-dots{
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 4px;
		}

		.loader-dots span{
			width: 6px;
			height: 6px;
			border-radius: 50%;
			background: #4d4afd;
			animation: loader-dots-bounce 1.4s ease-in-out infinite both;
		}

		.loader-dots span:nth-child(1){ animation-delay: -0.32s; }
		.loader-dots span:nth-child(2){ animation-delay: -0.16s; }
		.loader-dots span:nth-child(3){ animation-delay: 0s; }
		.loader-dots span:nth-child(4){ animation-delay: 0.16s; }

		.loader-dots--inline{
			display: inline-flex;
			vertical-align: middle;
		}

		.loader-dots--inline span{
			width: 5px;
			height: 5px;
		}

		.loader-dots--btn span{
			background: #FFF;
		}

		.loader-prices{
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			display: none;
			position: absolute;
		}

		.details__prices-price.price-loading{
			opacity: 0;
		}

		@keyframes loader-dots-bounce{
			0%, 80%, 100% {
				transform: scale(0.6);
				opacity: 0.4;
			}
			40% {
				transform: scale(1);
				opacity: 1;
			}
		}
	
	/* loader end */

	.hide{
		display: none;
	}

	/*
	 * Баннер режима "просмотр как пользователь" (read-only impersonation
	 * из админки). Fixed, чтобы не трогать flex/grid разметку .wrapper —
	 * добавлять паддинг под него на всех клиентских страницах избыточно
	 * для внутреннего служебного индикатора.
	 */
	.impersonation-banner{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 9999;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 16px;
		height: 36px;
		background: #FFB020;
		color: #1a1a1a;
		font-size: 13px;
		font-weight: 500;
	}

	.impersonation-banner__exit{
		border: 1px solid #1a1a1a;
		background: transparent;
		color: #1a1a1a;
		border-radius: 6px;
		padding: 3px 12px;
		font-size: 12px;
		font-weight: 600;
		cursor: pointer;
	}

	.impersonation-banner__exit:hover{
		background: #1a1a1a;
		color: #FFB020;
	}
	
	.error{
		color: #f00;
		min-height: 15px;
	}
	input.error, select.error, textarea.error { 	
		border: 1px solid #f00;
	}

	.empty{
		box-shadow: 0px 0px 0px 1px #f00;
	}

	.center{
		text-align: center;
	}
	
	#send-message{
		width: 100%;
		border: solid 1px #ccc;
		margin: 20px 0px 20px 0px;
		border-radius: 4px;
		resize: none;
		padding: 7px;
	}
	
	.message-text-form-wrap{
		text-align: center;
	}
	
	#compensation textarea[name="tracks"]{
		width: 100%;
		height: 100%;
		resize: none;
	}
	
	.fs12{
		font-size: 12px;
		margin-bottom: 10px;
		display: inline-block;
	}
	
	#new-invite-form{
		max-width: 590px;
	}
	
	.item.ticket{
		cursor: pointer;
	}	
	
	.inline{
		display: inline-block;
	}
	
	.country img,
	.dropdown.cstm-dropdown-active img{
		width: 25px;
	}
	
	.user_id{
		position: relative;
	}
	
	.user_id .view-as-user{
		cursor: pointer;
	}
	
	.user_id .view-as-user:hover{
		text-decoration: underline;
	}
	
.user_id-contact{
	display: block;
	font-size: 11px;
	line-height: 1.3;
	color: #8B8B8B;
	font-weight: 400;
	overflow-wrap: break-word;
	word-break: break-word;
}
	
	#info-desc,
	.info-desc{
		display: none;
		position: absolute;
		background: #fff;
		border-radius: 5px 5px 5px 0px;
		padding: 20px;
		z-index: 999;
		box-shadow: 0px 0px 5px 1px #ccc;
	}
	.info-desc ul li {
	/*        list-style: disc;*/
	}
	.details__prices-item .icon-info{
		top: 10px;
		right: 15px;
		position: absolute;
	}
	
	.disabled{
		opacity: 0.6;
		pointer-events: none;
	}
	
	.change-pass .copy-btn{
		margin: -3px 45px 0px 0px;
	}
	
	.choice-user-filtered .dropdown__list{
		max-height: 237px;
		overflow-x: hidden;
	}
	
	.choice-user-filtered .search-select{
		padding: 10px 0px 10px 20px;
	}
	
	.choice-user-filtered .dropdown__button{
		width: 160px;
		border: none;
		background: none;
	}
	
	.account-more .details__options-box{
		width: 380px;
	}
	
	.delivery_cahnge{
		margin-top: 20px;
	}
	
	.account-more .delivery_service_platform {
		margin-right: 66px;
	}
	
	#alerts{
		right: 0;
		bottom: 10%;
		position: fixed;
		transition: 0.5s;
	}
	
	#alerts .alert:not(.visible){
		display: none;
	}
	
	#alerts .alert{
		padding: 20px;
		margin: 20px;
		background: #fff;
		border-radius: 3px;
		position: relative;
		transition: 0.5s;
		box-shadow: 0px 0px 2px 2px #ccc;
	}
	
	#alerts .alert .close:after{
		top: 0;
		right: 6px;
		content: '\2715';
		cursor: pointer;
		position: absolute;
	}

	/* тост "недостаточно баланса" перед покупкой лейбла — см. app.js checkBalanceBeforeBuy() */
	#alerts .alert--balance .alert-text{
		padding-right: 10px;
		line-height: 1.5;
	}

	#alerts .alert--balance .alert-text strong{
		display: block;
		color: #FD6A4A;
	}
	
	body .tickets__send-head .tickets__send-ticket {
		min-width: 540px;
		word-break: break-all;
		overflow: hidden;
		min-height: 35px;
		height: auto;
		white-space: break-spaces;
	}
	
	.error a,
	.tranzaction a{
		color: #4d4afd;
	}
	
	body .tickets__inner{
		position: relative;
	}
	
	body .tickets__content.tickets-page__new{
		position: absolute;
		width: 100%;
		top: 58px;
		left: 219px;
	}
	
	
	.modals__sender-receiver .modal-content__middle-item .label-track{
		width: 200px;
		display: inline-block;
	}
	
	.choose-template {
		margin: 0px 0px 20px 0px;
	}
	
	.pl0,
	button span.pl0{
		padding-left: 0px;
	}
	
	.account__contact-input.nick{
		width: auto;
	}
	
	.mt10{
		margin-top: 10px;
	}
	
	.margin-auto{
		margin: auto;
	}
	
	.fs14pt{
		font-size: 14pt !important;
	}
	
	/* templates */
		
		.templates__item{
			position: relative;
		}
		
		.create-tpl{
			right: 0px;
			position: absolute;
			border: solid 1px #cfd0d3;
			padding: 5px 9px;
			border-radius: 5px;
			background: #4d4afd;
			color: #fff;
		}
		
	/* templates end */
	
	/* attachment alider */
		
		.attachment{
			cursor: pointer;
		}
	
	/* attachment slider and */
	
	.tickets__history-list--more .ticket{
		margin: 0px 0px 15px 0px;
	}
	
	a{
		cursor: pointer;
	}
	
	.label-type,
	.label-weight{
		min-width: 50px;
	}
	
	.label-platform{
		min-width: 100px;
	}
	
	.info-alert-box{
		margin: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		gap: 4px 18px;
		text-align: center;
		border: solid 1px #B0B0B0;
		background: #fffddb;
		/* padding-top: 10px; */
		position: relative;
		top: -25px;
		width: 98%;
		border-radius: 3px;
		padding: 6px 14px;
		box-sizing: border-box;
	}
	.info-alert-box + .info-alert-box{
		margin-top: 8px;
	}
	.info-alert-text{
		flex: 1 1 auto;
	}
	.info-alert-text p{
		margin: 0;
	}
	.info-alert-dismiss,
	.info-alert-dismiss-onetime{
		flex-shrink: 0;
		cursor: pointer;
		font-size: 12px;
		font-weight: 600;
		color: #8a8a8a;
		text-decoration: underline;
		text-underline-offset: 2px;
		white-space: nowrap;
		transition: color .15s ease;
	}
	.info-alert-dismiss:hover,
	.info-alert-dismiss-onetime:hover{
		color: #17181C;
	}
	
	.purchases-filters .search-select{
		width: 100%;
		height: 30px;
		text-align: center;
	}
	
	.li-search{
		height: 50px;
		border-bottom: 1px solid #E7EBEE;
	}
	
	.li-search input{
		width: 100%;
		height: 100%;
		padding: 0 10px;
		text-align: center;
	}
	
	ul.choose-tpl{
		position: absolute;
		z-index: 1;
		background: #fff;
		width: 482px;
		box-shadow: 0 2px 6px rgba(0,0,0,.3);
	}
	
	ul.choose-tpl li{
		height: 31px;
		font-size: 13px;
		font-family: Arial,sans-serif;
	}
	
	ul.choose-tpl li:hover{
		cursor: default;
		background: #fafafa;
	}
	
	ul.choose-tpl li span:before{
		content: "";
		width: 15px;
		height: 20px;
		margin-right: 7px;
		margin-left: -20px;
		display: inline-block;
		vertical-align: top;
		background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/autocomplete-icons.png);
		background-position: 0px 120px;
		background-size: 34px;
	}
	
	#receiver-form .details__options-box.form__input-box--cstm .form__input-box.form__input-box--cstm{
		width: 100%;
	}
	
/* mod end */

.user__inner .user__ceckboxes{
	position: relative;
}

.user__ceckboxes.box-right{
	left: 200px;
	position: absolute;
}

.relative{
	position: relative;
}

.shipment-activity:after{
	content: "";
	top: 18px;
	left: -10px;
	width: 15px;
	height: 20px;
	position: absolute;
	background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/autocomplete-icons.png);
}

.black-font,
.ship-status-new,
.ship-status-not_yet_shipped{
	color: #000;
}

.black-blue,
.ship-status-transit{
	color: #4d4afd;
}

.black-green,
.ship-status-delivered{
	color: #009A2B;
}

.ship-status-refunded{
	color: #ccc;
}
.ship-status-processing {
  	color: #d56400;
}

/* Виртуальный статус "Shipment Exception" (админка): FedEx "Unable to
 * deliver", причина из activity.exception — красный, как и бейдж ниже. */
.ship-status-shipment-exception{
	color: #b3261e;
	font-weight: 600;
}

/* FedEx Shipment exception — бейдж причины ("Unable to deliver" и т.п.)
 * в ячейке статуса админской покупки (см. renderTrackStatusCell). */
.shipment-exception{
	margin-top: 4px;
	padding: 2px 8px;
	display: inline-block;
	font-size: 12px;
	line-height: 1.35;
	color: #b3261e;
	background: #fdecea;
	border: 1px solid #f5c6c2;
	border-radius: 4px;
}
/* signIn new Start */

.page-registration-and-login{
	height: 100%;
	background: url(../images/sign-bg.svg) no-repeat;
	background-size: cover;
	background-attachment: fixed;
}

.page-registration-and-login .logo{
	left: 60px;
	top: 30px;
	position: absolute;
}

.page-registration-and-login .reg-and-log__inner{
	left: 60px;
	top: 500px;
	z-index: 10;
	position: absolute;
}

.page-registration-and-login .site-title{
	top: 130px;
	left: 60px;
	position: absolute;
}

.main-auth{
	width: 1200px;
	height: 100%;
	margin: auto;
	position: relative;
}

.cheap-shipping{
	display: block;
}

.automated-service{
	margin-top: 20px;
}

.site-title-label{
	width: 274px;
	height: 44px;
	top: 324px;
	left: 60px;
	gap: 0px;
	font-size: 32px;
	text-align: left;
	font-weight: 400;
	line-height: 43.65px;
	margin: -30px 0px 0px 0px;
	font-family: nunito, sans-serif;
}

/*
 * Раньше здесь были два разных изображения (монитор + ноутбук),
 * позиционированные отдельными абсолютными блоками — из-за этого они
 * догружались и появлялись на экране не одновременно. Теперь это одна
 * склеенная картинка (см. dev-заметку в assets/images/), поэтому один
 * блок вместо двух.
 */
.site-monitors{
	z-index: 9;
	position: absolute;
	top: 92px;
	left: 250px;
	width: 1191px;
	height: 804px;
}
.site-monitors__img{
	display: block;
	width: 100%;
	height: 100%;
}

button[name="signIn"].active,
button[name="signUp"].active{
	background: rgba(0, 0, 0, 1);
}

#signIn{
	height: 150px;
}

.reg-and-log__btns{
	bottom: 0px;
	position: absolute;
}

/* signIn new End */

/*
 * Редизайн карточки логин/регистрация (tpl/auth.php). Используем отдельный
 * класс .auth-card поверх старых #signIn/.reg-and-log__btns, потому что те же
 * id/класс используются в tpl/signup.php (инвайт-флоу) — его не трогаем.
 */
#signIn.auth-card{
	width: 100%;
	max-width: 372px;
	height: auto;
	background: #FFF;
	border-radius: 20px;
	box-shadow: 0 14px 40px rgba(20, 20, 20, 0.08);
	padding: 28px 32px 30px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
}
/*
 * Тот же #signIn/.reg-and-log__inner используется и в tpl/signup.php
 * (инвайт-флоу с абсолютно другой вёрсткой) — поднимаем и центрируем
 * именно карточку auth.php через :has(), не трогая signup.php. Только
 * для desktop-ширин: на мобильном actions ниже (@media max-width:800px)
 * должны сохранять свои left/max-width/width без нашего вмешательства.
 */
@media all and (min-width: 801px){
	.page-registration-and-login .reg-and-log__inner:has(.auth-card){
		top: 300px;
		max-width: 372px;
	}
}
.auth-card__header{
	text-align: center;
}
.auth-card__title{
	margin: 0 0 4px;
	color: #000;
	font-size: 20px;
	font-weight: 800;
}
.auth-card__subtitle{
	margin: 0;
	color: #8A8F98;
	font-size: 12px;
	font-weight: 400;
}
.auth-card__divider{
	width: 100%;
	display: flex;
	align-items: center;
	gap: 9px;
}
.auth-card__divider-line{
	flex: 1 1 auto;
	height: 1px;
	background: #ECECEC;
}
.auth-card__divider-icon{
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 8px;
	background: #ECEBFF;
	color: #4D4AFD;
	display: flex;
	align-items: center;
	justify-content: center;
}
.auth-card__divider-icon svg{
	width: 12px;
	height: 12px;
}
.auth-card .auth-card__input-box{
	width: 100%;
	height: 42px;
	border-radius: 10px;
	border: 1px solid #E7EBEE;
	background: #FFF;
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 0 14px;
	position: relative;
	overflow: visible;
}
.auth-card__input-icon{
	flex: none;
	display: flex;
	color: #8A8F98;
}
.auth-card__input-icon svg{
	width: 12px;
	height: 12px;
}
.auth-card__input.form__input{
	flex: 1 1 auto;
	width: auto;
	height: 100%;
	padding: 11px 0 0;
	border: 0;
	background: transparent;
	font-size: 13px;
}
.auth-card__label.form__label{
	left: 34px;
}
.auth-card__eye-toggle{
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
	color: #B0B0B0;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}
.auth-card__eye-toggle svg{
	width: 11px;
	height: 11px;
}
.auth-card__eye-toggle.is-visible{
	color: #4D4AFD;
}
.auth-card .error{
	width: 100%;
	text-align: center;
}

/*
 * Ошибка входа — оранжевая плашка в ширину формы. Стоит на месте
 * пустого .error (не раздвигает карточку), клик по ней очищает
 * поле пароля и фокусирует его, чтобы попробовать ещё раз.
 */
.auth-card .auth-card__error-plate{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 34px;
	padding: 7px 12px;
	border-radius: 8px;
	background: #FFF3E0;
	border: 1px solid #FFCC80;
	color: #B75A00;
	font-size: 12px;
	font-weight: 600;
	text-align: center;
	line-height: 1.3;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}
.auth-card .auth-card__error-plate:hover{
	background: #FFE8C2;
	border-color: #FFB74D;
}
.auth-card__error-text{
	display: block;
	pointer-events: none;
}
.auth-card .reg-and-log__btns{
	position: static;
	width: 100%;
	display: flex;
	gap: 10px;
}
.auth-card .reg-and-log__btns .button{
	flex: 1 1 0;
	width: auto;
	min-height: 38px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 700;
}

/*
 * Редизайн модалки "Your Password" после регистрации (tpl/footer.php,
 * modal-password-2). Отдельный класс .modals__password--v2, чтобы не задеть
 * такой же .modals__password в tpl/admin/footer.php (общий style.css).
 */
.modals__password--v2{
	width: 100%;
	max-width: 440px;
	min-height: auto;
	padding: 40px 36px 36px;
	border-radius: 24px;
	box-shadow: 0 20px 60px rgba(20, 20, 20, 0.12);
}
.modals__password--v2 .modal-content{
	align-items: center;
	color: #000;
	font-size: 14px;
	font-weight: 400;
}
.auth-pass__icon{
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: #ECEBFF;
	color: #4D4AFD;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
}
.auth-pass__icon svg{
	width: 26px;
	height: 26px;
}
.auth-pass__title{
	margin: 0 0 6px;
	font-size: 22px;
	font-weight: 800;
}
.auth-pass__subtitle{
	margin: 0 0 24px;
	color: #8A8F98;
	font-size: 14px;
	font-weight: 400;
}
.modals__password--v2 .auth-pass__box.copy-box{
	width: 100%;
	gap: 12px;
	padding: 16px 20px;
	border-radius: 14px;
	border: 1px solid #ECECEC;
	background: #FAFAFB;
	margin-bottom: 20px;
}
.modals__password--v2 .auth-pass__value.copy-input{
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-align: left;
	width: auto;
	min-width: 0;
	word-break: break-all;
}
.auth-pass__copy-btn{
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	color: #4D4AFD;
}
.auth-pass__box.copied .auth-pass__copy-btn{
	color: #22A366;
}
.auth-pass__important{
	width: 100%;
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 16px 18px;
	border-radius: 14px;
	background: #F5F5FA;
	margin-bottom: 22px;
	text-align: left;
}
.auth-pass__important-icon{
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: #ECEBFF;
	color: #4D4AFD;
	display: flex;
	align-items: center;
	justify-content: center;
}
.auth-pass__important-icon svg{
	width: 17px;
	height: 17px;
}
.auth-pass__important-text{
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.auth-pass__important-text b{
	font-size: 14px;
	font-weight: 700;
}
.auth-pass__important-text span{
	color: #6B7280;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
}
.auth-pass__check{
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 22px;
	cursor: pointer;
	user-select: none;
}
.auth-pass__check input{
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}
.auth-pass__check-circle{
	flex: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 2px solid #D9D9D9;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color 0.15s ease;
}
.auth-pass__check-circle::after{
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #22A366;
	transform: scale(0);
	transition: transform 0.15s ease;
}
.auth-pass__check input:checked ~ .auth-pass__check-circle{
	border-color: #22A366;
}
.auth-pass__check input:checked ~ .auth-pass__check-circle::after{
	transform: scale(1);
}
.auth-pass__check-label{
	font-size: 14px;
	font-weight: 500;
}
.modals__password--v2 .auth-pass__ok{
	width: 100%;
	height: 54px;
	border-radius: 14px;
	background: #4D4AFD;
	color: #FFF;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	border: 0;
	cursor: pointer;
	transition: background 0.15s ease;
}
.modals__password--v2 .auth-pass__ok:hover:not(:disabled){
	background: #3F3CF0;
}
.modals__password--v2 .auth-pass__ok:disabled{
	background: #D8D7FE;
	color: #FFF;
	border: 0;
	cursor: not-allowed;
	pointer-events: none;
}

/*
 * "Последний шаг" регистрации — сбор Telegram-контакта (tpl/footer.php,
 * modal-telegram-step). Карточка скопирована по размерам/радиусам с
 * .modals__password--v2 выше, чтобы визуально быть тем же "следующим экраном"
 * той же регистрации. Кнопки без класса .btn намеренно — иначе их подхватит
 * общий делегат открытия модалок в main.js (ищет data-path, которого тут нет,
 * и падает на document.querySelector(null)), см. app.saveTelegramStep/
 * skipTelegramStep в app.js.
 */
.modals__telegram-step{
	width: 100%;
	max-width: 440px;
	min-height: auto;
	padding: 40px 36px 36px;
	border-radius: 24px;
	background: #FFF;
	box-shadow: 0 20px 60px rgba(20, 20, 20, 0.12);
}
.modals__telegram-step .modal-content{
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	color: #000;
}
.telegram-step__label{
	margin-bottom: 10px;
	color: #4D4AFD;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.telegram-step__title{
	margin: 0 0 24px;
	font-size: 26px;
	font-weight: 800;
}
.telegram-step__input-box{
	width: 100%;
	height: 54px;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 18px;
	margin-bottom: 20px;
	border: 1.5px solid #ECECEC;
	border-radius: 14px;
	background: #FFF;
	box-sizing: border-box;
	transition: border-color 0.15s ease;
}
.telegram-step__input-box:has(.telegram-step__input:focus){
	border-color: #4D4AFD;
}
.telegram-step__input-icon{
	flex: none;
	color: #B0B0B0;
	font-size: 16px;
	font-weight: 700;
}
.telegram-step__input{
	flex: 1 1 auto;
	width: 100%;
	height: 100%;
	border: 0;
	background: transparent;
	color: #000;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
}
.telegram-step__input::placeholder{
	color: #B0B0B0;
	font-weight: 400;
}
.telegram-step__info{
	width: 100%;
	padding: 16px 18px;
	margin-bottom: 22px;
	border-radius: 14px;
	background: #F5F5FA;
	box-sizing: border-box;
}
.telegram-step__info b{
	display: block;
	margin-bottom: 4px;
	font-size: 14px;
	font-weight: 700;
}
.telegram-step__info span{
	display: block;
	color: #6B7280;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
}
.telegram-step__continue{
	width: 100%;
	height: 54px;
	margin-bottom: 10px;
	border: 0;
	border-radius: 14px;
	background: #4D4AFD;
	color: #FFF;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s ease;
}
.telegram-step__continue:hover{
	background: #3F3CF0;
}
.telegram-step__skip{
	width: 100%;
	height: 54px;
	border: 0;
	border-radius: 14px;
	background: #F5F5FA;
	color: #8A8F98;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s ease;
}
.telegram-step__skip:hover{
	background: #ECECEC;
}

@media all and (max-width: 800px){
	#signIn.auth-card{
		max-width: 100%;
		padding: 32px 24px 28px;
	}
}

.tranzactions table{
	height: 400px;
	overflow-y: auto;
	display: block;
	overflow-x: hidden;
}

/* rules modal start */

	.rules-modal{
		width: 560px;
		max-width: 90vw;
		max-height: 85vh;
		background: #fff;
		border-radius: 16px;
		padding: 32px;
		position: relative;
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.rules-modal__close{
		position: absolute;
		top: 20px;
		right: 20px;
		width: 32px;
		height: 32px;
		border-radius: 50%;
		border: none;
		background: #F5F5F7;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		color: #55555F;
		padding: 0;
		z-index: 1;
	}
	.rules-modal__close:hover{
		background: #ECECF5;
	}
	.modal-rules.modal--locked .rules-modal__close{
		display: none;
	}

	.rules-modal__header{
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		padding-right: 36px;
	}
	.rules-modal__title{
		font-size: 22px;
		font-weight: 700;
		color: #17181C;
		margin: 0;
	}
	.rules-modal__lang{
		flex-shrink: 0;
		display: flex;
		gap: 4px;
		background: #F5F5F7;
		border-radius: 10px;
		padding: 3px;
	}
	.rules-modal__lang-btn{
		border: none;
		background: transparent;
		padding: 6px 14px;
		border-radius: 8px;
		font-size: 13px;
		font-weight: 700;
		color: #8A8A99;
		cursor: pointer;
		transition: background 0.15s ease, color 0.15s ease;
	}
	.rules-modal__lang-btn.active{
		background: #4D4AFD;
		color: #fff;
	}

	.rules-modal__body{
		overflow-y: auto;
		max-height: 50vh;
		padding-right: 6px;
	}
	.rules-modal__text{
		display: none;
		font-size: 14px;
		line-height: 1.6;
		color: #37373F;
	}
	.rules-modal__text.active{
		display: block;
	}
	.rules-modal__text p{
		margin: 0 0 14px;
	}
	.rules-modal__text p:last-child{
		margin-bottom: 0;
	}
	.rules-modal__text h1,
	.rules-modal__text h2,
	.rules-modal__text h3{
		font-size: 16px;
		margin: 18px 0 8px;
		color: #17181C;
	}
	.rules-modal__text h1:first-child,
	.rules-modal__text h2:first-child,
	.rules-modal__text h3:first-child{
		margin-top: 0;
	}
	.rules-modal__text ul{
		margin: 0 0 14px;
		padding-left: 20px;
		list-style: disc;
	}
	.rules-modal__text li{
		margin: 0 0 6px;
	}

	.rules-modal__footer{
		flex-shrink: 0;
		border-top: 1px solid #EEF0F3;
		padding-top: 18px;
	}
	.rules-modal__confirm-row{
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		flex-wrap: wrap;
	}
	.rules-modal__check{
		display: flex;
		align-items: center;
		gap: 10px;
		cursor: pointer;
		user-select: none;
	}
	.rules-modal__check input{
		position: absolute;
		width: 1px;
		height: 1px;
		opacity: 0;
		pointer-events: none;
	}
	.rules-modal__check-circle{
		flex: none;
		width: 20px;
		height: 20px;
		border-radius: 50%;
		border: 2px solid #D9D9D9;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.rules-modal__check-circle::after{
		content: "";
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background: #4D4AFD;
		transform: scale(0);
		transition: transform 0.15s ease;
	}
	.rules-modal__check input:checked ~ .rules-modal__check-circle{
		border-color: #4D4AFD;
	}
	.rules-modal__check input:checked ~ .rules-modal__check-circle::after{
		transform: scale(1);
	}
	.rules-modal__check-label{
		font-size: 14px;
		font-weight: 500;
		color: #17181C;
	}

	.rules-modal__confirm-btn{
		flex: none;
		height: 48px;
		padding: 0 28px;
		border-radius: 12px;
		background: #4D4AFD;
		color: #FFF;
		font-size: 14px;
		font-weight: 700;
		font-family: inherit;
		border: 0;
		cursor: pointer;
	}
	.rules-modal__confirm-btn:hover:not(:disabled){
		background: #3F3CF0;
	}
	.rules-modal__confirm-btn:disabled{
		background: #D8D7FE;
		cursor: not-allowed;
	}

	.rules-modal__agreed{
		font-size: 13px;
		font-weight: 600;
		color: #55555F;
		text-align: center;
	}

/* rules modal end */

.label-api {
    background: #eee;
    display: inline-block;
    width: 50px;
    text-align: center;
    border-radius: 5px;
    color: #555;
}
.my-balance {
    background: #eee;
    display: inline-block;
    text-align: center;
    border-radius: 5px;
    color: #555;
    padding: 3px;
    font-size: 12px;
}
.service__table.service.users th, .service__table.service.users td, .service__table.users th:nth-child(1), .service__table.users td:nth-child(1) {
    min-width: 100px;
    width: 100px;
    margin: 100px;
}
.ajax-loader {
	display: none;
	text-align: center;
}

ul.descr {
	margin: 10px;
}
ul.descr a {
	color: #4D4AFD;
	text-decoration: underline;
}
ul.descr a:hover {
	text-decoration: none;
}

.settings-menu {
	position: relative;
}
.settings-menu__btn {
	justify-content: center;
}
.settings-menu__btn svg {
	width: 18px;
	height: 18px;
}
.settings-menu__list {
	top: calc(100% + 4px);
	left: auto;
	right: 0;
	width: max-content;
	min-width: 180px;
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
	z-index: 2;
}
.settings-menu__list .dropdown__list-item {
	height: auto;
	padding: 10px 16px;
	white-space: nowrap;
}
.user__table th.td-user-balance, .user__table td.td-user-balance {
    max-width: 135px;
    width: 135px;
}
.user__table td.td-user-balance .input-price--box {
    float: left;
}

.modals__user-settings, .modals__user-stat {
    max-width: 800px;
    width: 100%;
    overflow-y: none;
}
.modals__user-settings .modal-content, .modals__user-stat .modal-content {
    padding: 20px;
    margin: 20px 15px;
    background-color: #F0F3F9;
}

.modals__user-stat .modal-content .container, .modals__user-settings .modal-content .container {
    max-width: 100%;
    margin: 0;
    padding: 0;
}
.modals__user-settings .modal-content__btns {
    display: flex;
    justify-content: space-between;
    align-items: start;
}
.modals__user-settings .input-number {
    margin: 10px 0;
    padding: 10px;
}


@media (min-width: 1700px) {
  .page-api .main {
    width: 100%;
  }
}
@media (min-width: 1440px) {
  .container {
    max-width: 1140px;
    padding: 0 60px;
  }
}
@media (max-width: 991px) {
  .wrapper {
    display: block;
  }
  .page-api .main {
    width: 100%;
  }
  .container {
    padding: 0 0 0 5%;
    max-width: 95%;
    margin: 0;
  }
  .container:has(.purchases__items-box) {
    padding-left: 15px;
  }
  .page-support-user .purchases__items-box {
    margin-left: 0;
  }
  .page-support-user .purchases__items-wrapper {
    padding: 0;
  }
  .sidebar {
    position: fixed;
    transform: translateX(-100%);
    border-right: 1px solid #E7EBEE;
    padding: 20px;
    z-index: 10;
  }
  .sidebar__btn-open {
    display: block;
  }
  .sidebar__inner {
    height: calc(100vh - 40px);
    padding: 0;
    margin: 0;
  }
  .sidebar__inner::-webkit-scrollbar {
    display: none;
  }
  .api__item-wrapper {
    width: calc(100vw - 30px);
  }
  .purchases__filters {
    grid-template-columns: repeat(4, 1fr);
  }
  .purchases__filters .btn {
    grid-column: 4/5;
    grid-row: 1/2;
  }
  .purchases__items-box {
    margin-left: 15px;
  }
  .purchases .form__input-box--search {
    width: calc(100% - 15px);
    margin-left: 15px;
  }
  .tranzactions table {
    overflow-y: scroll;
    overflow-x: scroll;
  }
}
@media (max-width: 768px) {
  .page-support-user .purchases__items-wrapper {
    padding-left: 15px;
  }
  .api__copy {
    flex-direction: column;
    align-items: flex-start;
  }
  .news__item {
    padding: 15px;
  }
  .sender-receiver__inner {
    flex-direction: column;
  }
  .custom-line-item__item {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .modals__sender-receiver,
  .modals__sender-receiver--rate {
    margin: 0 15px;
  }
  .modals__sender-receiver .modal-content__middle {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .purchases__items-wrapper {
    width: calc(100vw - 15px);
    padding: 0 15px;
    margin: 0 -15px;
    overflow-x: scroll;
  }
  .purchases__item.purchases__items-head,
  .purchases__item {
    width: fit-content;
  }
  .purchases .form__input-box--search {
    width: 100%;
    margin: 0;
  }
  .purchases__bars--circle {
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
  }
  .tickets.page-tickets-request-2 .tickets__content {
    display: flex;
    flex-direction: column;
  }
  .account__top {
    flex-direction: column;
    gap: 20px;
  }
  .account__bottom {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }
  .account__item--exit {
    order: 10;
  }
  .account__toggles {
    flex-direction: column;
    gap: 20px;
  }
  .user__btns {
    flex-wrap: wrap;
  }
  .user__btns .btn {
    margin: 0;
  }
  .user__filtered-items {
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-evenly;
  }
}
@media (max-width: 540px) {
  .modals__templates .form__input-box--cstm:nth-child(1),
  .modals__templates .form__input-box--cstm:nth-child(2),
  .sender-receiver .form__input-box--cstm:nth-child(1),
  .sender-receiver .form__input-box--cstm:nth-child(2) {
    width: 100%;
  }
  .modals__templates .form__input-boxes,
  .sender-receiver__item .form__input-boxes {
    flex-direction: column;
  }
  .details__img {
    max-width: 100%;
  }
  .modals__sender-receiver .modal-content__top {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }
  .modals__sender-receiver .modal-content .icon-arrow-green {
    rotate: 90deg;
  }
  .modals__sender-receiver,
  .modals__sender-receiver--rate {
    padding: 20px;
  }
  .purchases__filters {
    grid-template-columns: repeat(3, 1fr);
  }
  .purchases__filters .btn {
    grid-column: 1/4;
    grid-row: 3/4;
  }
  .purchases__bars-items {
    flex-direction: column;
  }
  .purchases__bars--line .purchases__bars-items {
    display: flex;
    flex-direction: column;
    padding: 15px;
  }
  .balance__content {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .balance__elem-box {
    text-align: center;
  }
  .balance__elem-box span {
    padding: 0;
  }
  .history__search-box {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .tickets__head {
    grid-template-columns: 1fr;
  }
  .tickets__send-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .tickets__history {
    max-width: 100%;
  }
  .tickets__send-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .tickets__send-bottom-btn {
    width: 100%;
  }
  .tickets__send-chat--box {
    padding: 15px;
  }
  .tickets__send-message {
    padding: 10px 20px 20px;
  }
  .tickets__form {
    padding: 15px;
  }
  .tickets__search {
    gap: 20px;
  }
  .account__top .account__item {
    padding: 20px;
  }
  .account__bottom {
    padding: 20px 0;
  }
  .account__bottom .account__item {
    padding: 0 20px;
  }
  .modals__price-show .modal-content {
    padding: 20px;
  }
  .admin-support__compensations {
    display: flex;
    flex-direction: column;
  }
  .admin-wallet__checkboxes-box {
    display: flex;
    gap: 0;
    margin-top: 30px;
  }
  .modals__templates .modal-content {
    padding: 20px;
  }
  .users-tab, .user__tab-btn {
    font-size: 12px;
  }

}
@media (max-width: 420px) {
  .tickets__form-title {
    font-size: 20px;
  }
  .sidebar {
    max-width: 260px;
  }
  .api__copy .input {
    max-width: 185px;
    width: 185px;
    min-width: 185px;
  }
  .package-size__steppers {
    flex-wrap: wrap;
  }
  .package-size__stepper-group {
    flex: 1 1 40%;
  }
  .service-selector {
    flex-wrap: wrap;
  }
  .service-selector .dropdown__list-item {
    flex: 1 1 45%;
  }
  .details__prices {
    justify-content: center;
  }
  .purchases__filters {
    grid-template-columns: repeat(2, 1fr);
  }
  .purchases__filters .btn {
    grid-column: 1/3;
    grid-row: 4/5;
  }
  .tickets__send-chat-bottom {
    flex-direction: column;
  }
  .add-file__box {
    width: 100%;
  }
  .tickets__send-chat-bottom .btn,
  .user__btns .btn--muted,
  .user__btns .btn,
  .admin-support .tech-support .btn {
    width: 100%;
  }
  .admin-support .tech-support__input {
    width: 100%;
  }
  .api__copy .copy-box {
    padding: 8px 15px;
    margin: 0 -15px;
  }
}

/* mod */

@media all and (max-width: 800px) {
  .page-registration-and-login .site-title {
    left: 5%;
    max-width: 600px;
  }
  .page-registration-and-login .site-title img {
    width: 90%;
  }
  .main-auth {
    width: 100%;
  }
  .automated-service {
    width: 70% !important;
  }
  .site-monitors {
    width: 100%;
    max-width: 480px;
    position: absolute;
    height: 400px;
    top: 200px;
    left: 0;
    margin: 0 auto;
  }
  .site-monitors__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }
  .page-registration-and-login .reg-and-log__inner {
    left: 5%;
    max-width: 90%;
    width: 85%;
  }
  .api__table th, .api__table td {
    white-space: normal;
  }
  .page-purchases .history__table th:nth-child(7), .page-purchases .history__table td:nth-child(7) {
    width: 140px;
    display: flex;
  }
  .page-purchases .history__table .btn, .page-purchases .history__table .button {
    margin: 0 5px;
  }
}
@media all and (min-width: 480px) and (max-width: 800px) {
  .site-monitors {
    margin: 0 0 0 -240px;
    left: 50%;
  }
}
a.wait {display: none}

/* ==========================================================================
   Services page
   ========================================================================== */
.services-page__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.services-page__row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 24px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}
.services-page__carrier {
  display: flex;
  align-items: center;
  gap: 14px;
  /*
   * flex: 1 1 auto — этот блок один тянется на весь остаток строки (у всех
   * остальных колонок, включая .services-page__direction, ширина фиксирована).
   * Так все колонки начинаются в одном и том же X независимо от длины
   * названия службы — маршрут строго под маршрутом, а не "гуляет" по строке
   * вслед за текстом (было так, когда центровали относительно видимого
   * текста названия — тогда колонка съезжала на каждой строке).
   */
  flex: 1 1 auto;
  min-width: 0;
}
.services-page__carrier-icon {
  flex-shrink: 0;
  width: 48px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px;
  border-radius: 10px;
  border: 1px solid #E7EBEE;
  background: #FFF;
}
.services-page__carrier-icon img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.services-page__carrier-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.services-page__carrier-title {
  font-size: 15px;
  font-weight: 700;
  color: #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.services-page__carrier-subtitle {
  font-size: 12px;
  font-weight: 400;
  color: #B0B0B0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/*
 * Шильдик направления (US-US / CA-CA) — какие страны отправитель/получатель
 * поддерживает конкретный тариф (см. *_direction в админке, tpl/admin/service.php).
 * Просто текст, без фона/рамки — намеренно ненавязчивый, чтобы не спорить с
 * .sr-badge визуально (тот и так самый "весомый" элемент строки).
 *
 * Отдельная колонка ФИКСИРОВАННОЙ ширины (как .services-page__days/price/
 * status), а не подгонка под видимый текст названия службы — иначе при
 * разной длине названий ("UPS White Label" vs "FedEx Ground") колонка
 * "гуляла" бы по горизонтали от строки к строке. flex-shrink:0 держит её
 * ровно на месте, text-align:center центрует текст внутри самой колонки.
 */
.services-page__direction {
  flex-shrink: 0;
  width: 76px;
  text-align: center;
  color: #8A8F98;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.services-page__days {
  flex-shrink: 0;
  width: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.services-page__days-value {
  font-size: 14px;
  font-weight: 600;
  color: #000;
}
.services-page__days-label {
  font-size: 12px;
  font-weight: 400;
  color: #B0B0B0;
}
.services-page__price {
  flex-shrink: 0;
  width: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.services-page__price-value {
  font-size: 16px;
  font-weight: 700;
  color: #000;
}
.services-page__price-value--dash {
  color: #B0B0B0;
}
.services-page__price-note {
  font-size: 11px;
  color: #B0B0B0;
  white-space: nowrap;
}
.services-page__status {
  flex-shrink: 0;
  width: 120px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.services-page__status-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #000;
}
.services-page__status-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #009A2B;
  flex-shrink: 0;
}
/*
 * Тот же "пульсирующий" эффект, что и у .nav__services-badge-dot в сайдбаре
 * (см. ниже) — общий keyframes pulse-ring, здесь просто наложен на уже
 * существующую точку статуса "Working", без новой разметки.
 */
.services-page__status-dot::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  animation: pulse-ring 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.services-page__status-creation {
  font-size: 12px;
  font-weight: 400;
  color: #B0B0B0;
  white-space: nowrap;
}
.services-page__empty {
  padding: 40px 0;
  text-align: center;
  color: #B0B0B0;
  font-size: 15px;
}
@media all and (max-width: 900px) {
  .services-page__row {
    flex-wrap: wrap;
    row-gap: 10px;
  }
  .services-page__carrier {
    flex: 1 1 100%;
  }
}

/* --- Admin: Logs -------------------------------------------------- */
.page-admin-logs .nav__item-logs .nav__link {
  color: #4D4AFD;
}
.page-admin-logs .nav__item-logs .nav__link svg {
  fill: #4D4AFD;
}
.admin-logs__subtitle {
  margin: 0 0 20px;
  max-width: 640px;
}
.admin-logs__empty {
  padding: 60px 0;
  text-align: center;
  color: #B0B0B0;
  font-size: 15px;
}
.admin-logs__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 30px;
}
.admin-logs__item {
  border: 1px solid #E7EBEE;
  border-left: 4px solid #B0B0B0;
  border-radius: 8px;
  padding: 14px 18px;
  background-color: #FFF;
}
.admin-logs__item--error {
  border-left-color: #EB5757;
}
.admin-logs__item--critical {
  border-left-color: #B3261E;
  background-color: #FDF3F2;
}
.admin-logs__item--warning {
  border-left-color: #F2994A;
}
.admin-logs__item--unread {
  box-shadow: 0 0 0 1px #4D4AFD inset;
}
.admin-logs__item-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 12px;
}
.admin-logs__severity {
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #FFF;
  background-color: #B0B0B0;
}
.admin-logs__severity--error {
  background-color: #EB5757;
}
.admin-logs__severity--critical {
  background-color: #B3261E;
}
.admin-logs__severity--warning {
  background-color: #F2994A;
}
.admin-logs__category {
  color: #6B6B6B;
  font-weight: 600;
}
.admin-logs__time {
  margin-left: auto;
  color: #B0B0B0;
}
.admin-logs__title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}
.admin-logs__detail {
  font-size: 14px;
  color: #4B4B4B;
  line-height: 1.5;
  margin-bottom: 8px;
}
.admin-logs__meta {
  display: flex;
  gap: 18px;
  font-size: 13px;
  color: #6B6B6B;
  margin-bottom: 6px;
}
.admin-logs__toggle-context {
  border: none;
  background: none;
  padding: 0;
  color: #4D4AFD;
  font-size: 13px;
  cursor: pointer;
}
.admin-logs__context {
  margin-top: 8px;
  padding: 12px;
  background-color: #F7F8FA;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 320px;
  overflow-y: auto;
}

/* --- Admin: Logs -> tabs (Issues / Commits) ------------------------ */
.admin-logs__tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid #E7EBEE;
  margin-bottom: 20px;
}
.admin-logs__tab {
  border: none;
  background: none;
  padding: 10px 18px;
  margin-bottom: -1px;
  font-size: 15px;
  font-weight: 600;
  color: #B0B0B0;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.admin-logs__tab.active {
  color: #4D4AFD;
  border-bottom-color: #4D4AFD;
}
.admin-logs__panel {
  display: none;
}
.admin-logs__panel.active {
  display: block;
}

/* --- Admin: Logs -> Commits tab ------------------------------------ */
.admin-commits__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 30px;
}
.admin-commits__item {
  border: 1px solid #E7EBEE;
  border-left: 4px solid #009A2B;
  border-radius: 8px;
  padding: 14px 18px;
  background-color: #FFF;
}
.admin-commits__item--failed {
  border-left-color: #EB5757;
  background-color: #FDF3F2;
}
.admin-commits__item-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 12px;
}
.admin-commits__hash {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-weight: 700;
  background-color: #F7F8FA;
  padding: 2px 8px;
  border-radius: 4px;
  color: #4B4B4B;
}
.admin-commits__status {
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #FFF;
  background-color: #009A2B;
}
.admin-commits__status--failed {
  background-color: #EB5757;
}
.admin-commits__time {
  margin-left: auto;
  color: #B0B0B0;
}
.admin-commits__subject {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
}
.admin-commits__meta {
  display: flex;
  gap: 18px;
  font-size: 13px;
  color: #6B6B6B;
  margin-bottom: 6px;
}

/* ============================================================
   Maintenance mode (страница-заглушка для клиентов)
   ============================================================ */
.page-maintenance .nav__link {
  pointer-events: none;
  opacity: 0.55;
}

.page-maintenance .main {
  display: flex;
  align-items: center;
  justify-content: center;
}

.maintenance {
  width: 100%;
  padding: 40px 24px 60px;
  display: flex;
  justify-content: center;
}

.maintenance__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 520px;
  width: 100%;
}

.maintenance__img-wrap {
  margin-bottom: 28px;
}

.maintenance__img {
  max-width: 100%;
  max-height: 280px;
  height: auto;
  object-fit: contain;
}

.maintenance__title {
  font-size: 42px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #231F20;
  margin: 0 0 12px;
}

.maintenance__text {
  font-size: 18px;
  color: #6B6B6B;
  margin: 0 0 36px;
}

.maintenance-clock {
  display: block;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.10));
}

.maintenance__countdown {
  margin-top: 32px;
}

.maintenance__countdown-value {
  font-size: 44px;
  font-weight: 700;
  letter-spacing: 4px;
  font-variant-numeric: tabular-nums;
  color: #231F20;
}

/* Модалка подтверждения maintenance */
.modals__maintenance {
  max-width: 340px;
}

.modals__maintenance-hours {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 20px;
}

.modals__maintenance-hours input {
  width: 110px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid #E7EBEE;
  border-radius: 4px;
  font-size: 15px;
  text-align: center;
}

.modals__maintenance-hours-label {
  font-size: 13px;
  color: #8A8A8E;
}
/* White UPS tier picker (.wut) — admin */
.wut-tier {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 16px;
  cursor: pointer;
}
.wut__preview {
  margin: 2px 0;
  font-size: 12px;
  line-height: 1.4;
}

/* ===================== Referral program (tpl/referral.php) ===================== */

.page-referral .container{ max-width: 800px; }

.referral__disabled{
  padding: 12px 16px; border-radius: 10px; margin-bottom: 20px;
  background: #FFF7E6; border: 1px solid #F0DDB4; color: #8A6D1F;
}

.referral__hero{
  background: #fff; border-radius: 18px; padding: 32px;
  box-shadow: 0 12px 40px rgba(20,20,20,.06); margin-bottom: 28px;
  display: flex; gap: 32px; align-items: flex-start; flex-wrap: wrap;
}
.referral__hero-left{ flex: 1 1 320px; }
.referral__hero-title{ font-size: 22px; font-weight: 700; margin: 0 0 10px; }
.referral__hero-text{ font-size: 14px; line-height: 1.55; color: #555B66; margin: 0 0 18px; }
.referral__accent{ color: #1FA84C; }

.referral__link-box{ display: flex; gap: 8px; }
.referral__link-input{
  flex: 1; min-width: 0; height: 46px; border: 1px solid #E3E5E8; border-radius: 10px;
  padding: 0 14px; font-size: 14px; color: #333; background: #FAFBFC;
}
.referral__copy{ white-space: nowrap; }

.referral__stats{ display: flex; flex-direction: column; gap: 10px; min-width: 200px; }
.referral__stat-card{
  border: 1px solid #ECECEC; border-radius: 12px; padding: 12px 16px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
}
.referral__stat-label{ font-size: 12px; color: #8A8F98; font-weight: 600; }
.referral__stat-value{ font-size: 17px; font-weight: 700; }

.referral__section{ margin-bottom: 34px; }
.referral__section .title-box{ display: flex; justify-content: space-between; align-items: center; }

.referral__withdraw{
  background: #fff; border-radius: 18px; padding: 24px 32px;
  box-shadow: 0 12px 40px rgba(20,20,20,.06);
}
.referral__withdraw-form{ display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.referral__field{ display: flex; flex-direction: column; gap: 6px; flex: 1 1 200px; }
.referral__field-label{ font-size: 12px; color: #8A8F98; font-weight: 600; }
.referral__field input{
  height: 44px; border: 1px solid #E3E5E8; border-radius: 10px; padding: 0 14px; font-size: 14px;
}
.referral__note{ font-size: 12.5px; color: #8A8F98; margin-top: 12px; line-height: 1.5; }

.referral__accent-cell{ color: #1FA84C; font-weight: 700; }
.referral tr.is-deleted td{ opacity: .45; }
.referral__invite-link{ font-size: 12.5px; color: #667085; }

/* Статусные бейджи выплат/инвайтов — в палитре статусов покупок */
.status-badge{
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
}
.status-badge--requested{ background: #FFF4E0; color: #A8690F; }   /* Active / Requested */
.status-badge--paid{ background: #E2F6E8; color: #157A38; }        /* Used / Paid */
.status-badge--rejected{ background: #FDECEC; color: #B33A3A; }    /* Deleted / Rejected */

/* Плашка-приглашение в Wallet */
.balance-hero__referral-banner{
  display: flex; align-items: center; gap: 12px; text-decoration: none;
  margin-top: 16px; padding: 14px 18px; border-radius: 14px;
  background: #EDFBF1; border: 1px solid #CBEED6; color: #14532D;
  transition: background .15s ease;
}
.balance-hero__referral-banner:hover{ background: #E0F7E8; }
.balance-hero__referral-icon{ font-size: 18px; }
.balance-hero__referral-text{ font-size: 13.5px; flex: 1; }
.balance-hero__referral-arrow{ font-weight: 700; }

@media (max-width: 640px){
  .referral__hero{ padding: 22px; }
  .referral__stats{ width: 100%; }
  .referral__withdraw{ padding: 18px; }
}