.header-1 {color:#fff; position: fixed; left:0; top:0; bottom: 0; overflow: auto; z-index: 10; width: 64px; font-size: 0; padding: .5rem 0; transition: .3s;
    background: url(/assets/bg.jpeg) no-repeat;}
.header-1:hover {width: 330px; font-size: 1rem;}
.header-1:hover .d-md-block {display: block !important;}
.header-1:hover .d-md-flex {display: flex !important;}
.header-1:hover .d-md-none {display: none !important;}
body.site > .module:not(.header-1) {margin-left: 64px;}
@media (min-width: 768px) {
    .header-1 {width: 230px; font-size: 1rem;}
    body.site > .module:not(.header-1) {margin-left: 230px;}
}
@media (min-width: 992px) {
    .header-1 {width: 330px;}
    body.site > .module:not(.header-1) {margin-left: 330px;}
}


.header-1 a {color:#fff;}

header #logo {text-align:center;}
.header-1 .nav-tabs {flex-wrap:nowrap; border-bottom:none; justify-content: space-between; width: 100%;}
.header-1 .nav-tabs > li {display: block; margin: 0; padding: 0; width: 33.33%; text-align: center;}
.header-1 .nav-tabs > li .nav-link {display: block; margin: 0; padding: .5rem; width: 100%; overflow: hidden; text-overflow: ellipsis;}
.header-1 .nav-tabs.nav-justified > li {width: 50%;}
/* больше трёх вкладок (кабинеты ролей) — один ряд иконок, название в title */
.header-1 .nav-tab-icon {display: none;}
.header-1 .nav-tabs.nav-tabs-icons {flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin;}
.header-1 .nav-tabs.nav-tabs-icons > li {width: auto; flex: 1 0 auto; min-width: 3rem;}
.header-1 .nav-tabs.nav-tabs-icons .nav-tab-icon {display: inline-block; font-size: 1.1rem;}
.header-1 .nav-tabs.nav-tabs-icons .nav-tab-text {display: none;}
/* активная вкладка на белом фоне — белый текст на ховере делал её нечитаемой */
.header-1 .nav-tabs > li .nav-link:not(.active):hover {color:#fff;}

.header-1 .bootstrap-select {max-width: 320px;}
.header-1 .bootstrap-select a {color:#333;}

header .sidebar-glass {padding: 1rem; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 1rem; }
header .sidebar-glass +.sidebar-glass,
header .sidebar-glass:has( + .sidebar-glass) { margin-bottom: 1rem; }
header .sidebar-glass .photo {width: 3rem; height: 3rem; background:#fff; border-radius:50%; object-fit: contain; object-fit: contain; object-position: bottom; max-width: fit-content;}
header .sidebar-glass .user-title {white-space: nowrap; margin:0 .5rem;}

header .menu .sidebar-glass ul {margin:0; padding:0; position:relative;}
/* position:relative — точка отсчёта для бейджа непрочитанных в свёрнутом меню.
   Иконке пункта (абсолютный a::before) это не мешает: li той же ширины, что ul,
   от которого она считалась раньше. */
header .menu .sidebar-glass ul li {margin:0; padding:0; display:block; position:relative;}
header .menu .sidebar-glass ul li a {display:flex; justify-content:space-between; align-items:center; color:#fff; padding:1.5rem .5rem;  border-radius:.5rem;}
header .menu .sidebar-glass ul li a.logout-modal div {padding-right:10px;}
header .menu .sidebar-glass ul li.active a,
header .menu .sidebar-glass ul li:hover a {background:#fff; color: var(--color-black);}
header .menu .sidebar-glass ul li.selected a img,
header .menu .sidebar-glass ul li:hover a img {filter: grayscale(1) invert(1);}
@media screen and (max-width: 576px) {
    body header.hide.hover {display: flex!important; flex-direction: column;}
    body header.hide.hover #nav-tabContent {flex: 1 1 auto; display: flex!important; flex-direction: column;}
    body header.hide.hover #left_menu {flex: 1 1 auto; display: flex; flex-direction: column;}
    body header.hide.hover .tab-pane { flex: 1 1 auto; }
    body header.hide.hover .tab-pane:last-child {flex: 0 1 auto; background-color:#2B64F6; position: sticky; padding-bottom: 0px; bottom:9px; margin-top: 20px;}
    body header.hide.hover .tab-pane:last-child::before { content: ''; display: block; width: 100%; background: linear-gradient(to bottom, rgba(255,0,0,0), #0D5BBC); height: 20px; margin-top: -20px; }
    body header.hide.hover .tab-pane:last-child::after { content: ''; display: block; width: 100%; background: #0D5BBC; height: 9px; margin-bottom: -9px; }
    header #left_menu ul.bottom-tab {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; background: #0D5BBC;}
    header #left_menu ul.bottom-tab li {display: none;}
    header #left_menu ul.bottom-tab li.minimize {order:1; display: inline-block;}
    header #left_menu ul.bottom-tab li.minimize.hideSidebar {order:2;}
}

header #left_menu.shadow ul {-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));}
header #left_menu ul li.hideSidebar a>div:first-child {padding-right: 10px;}
header #left_menu ul li.hideSidebar .arrow {width: 10px; height: 10px; border: 1px solid rgba(255, 255, 255, 0.75); border-right: none; border-bottom: none; transform: translateX(-12px) rotate(-45deg); transition: .3s; margin-right: -10px; margin-left: 10px;}
header #left_menu ul li.hideSidebar:hover .arrow {border-color:var(--color-black);}
header .shadow {-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));}

@media (hover: none) {
    header #left_menu ul li.hideSidebar:hover a {background: transparent; color: inherit;}
    header #left_menu ul li.hideSidebar:hover .arrow {border-color: rgba(255, 255, 255, 0.75);}
}

.sidebar-light header {background: url(/upload/bg.jpeg) no-repeat; position:fixed; top:0; left:0; bottom:0; width:64px; z-index:100; transition:.3s;}

/* .sidebar-light header {transition: 0s;} */
/* .sidebar-light header #logo.sidebar-glass {padding: 0;} */
.sidebar-light header #logo+.sidebar-glass.bottom_menu { padding: 5px;}
.sidebar-light header #logo+.sidebar-glass .photo { --photo-size: 44px; width: var(--photo-size); height: var(--photo-size);}

/* .sidebar-light header:hover, */
.sidebar-light header.hover {width:300px;}
.sidebar-light .container-fluid > .row > .col-10 {width:100%; margin-left:64px;}
.sidebar-light header nav {display:none;}
.sidebar-light header .sidebar-glass .user-title + a,
.sidebar-light header .sidebar-glass .user-title,
.sidebar-light header .balance {display: none!important;}
.sidebar-light header #left_menu li div {display:none;}
.sidebar-light header #left_menu li div.arrow {display:block; transform: translateX(2px) rotate(135deg); margin-right: 7px; margin-left: 0px;}

.sidebar-light header.hover #left_menu li div {display:block;}
.sidebar-light header.hover nav {display:block;}
.sidebar-light header.hover .sidebar-glass .user-title + a,
.sidebar-light header.hover .sidebar-glass .user-title {display: block!important;}
.sidebar-light header.hover .balance {display: flex!important;}
.sidebar-light header .sidebar-glass .photo {width:1.5rem; height:1.5rem;}
.sidebar-light header.hover .sidebar-glass .photo {width:3rem; height:3rem;}
.sidebar-light header .registration {display:none}
.sidebar-light header.hover .registration {display:block}
.sidebar-light header.hover nav,
.sidebar-light header.hover nav {display: block;}

.bootstrap-select .dropdown-menu {width: calc(100% + 5rem);}





header #menu-client ul li a::before {content:none; position: absolute; right: 50%; transform: translateX(50%);}
header:hover #menu-client ul li a::before {right: .5rem; transform: none;}
header #menu-client ul li a::before {content:url('/assets/icons/menu-icon/003.svg');}
header #menu-client ul li:nth-child(2) a::before {content:url('/assets/icons/menu-icon/004.svg');}
header #menu-client ul li:nth-child(3) a::before {content:url('/assets/icons/menu-icon/027.svg');}
header #menu-client ul li:nth-child(4) a::before {content:url('/assets/icons/menu-icon/021.svg');}
header #menu-client ul li:nth-child(5) a::before {content:url('/assets/icons/menu-icon/006.svg');}
header #menu-client ul li:nth-child(6) a::before {content:url('/assets/icons/menu-icon/020.svg');}
header #menu-client ul li:nth-child(7) a::before {content:url('/assets/icons/menu-icon/011.svg');}
header #menu-client ul li:nth-child(8) a::before {content:url('/assets/icons/menu-icon/026.svg');}
header #menu-client ul li:nth-child(9) a::before {content:url('/assets/icons/menu-icon/028.svg');}
header #menu-client ul li.active a::before {filter: invert(1);}
header #menu-client ul li a:hover::before {filter: invert(1);}

/* Бейдж непрочитанных сообщений и иконка пункта дерутся за правый край:
   иконка это абсолютный a::before, прижатый вправо, а бейдж — последний
   flex-элемент ссылки. Уводим бейдж левее иконки. В меню поставщика иконок
   нет, поэтому отступ только здесь. */
header #menu-client ul li a .js-menu-unread {margin-right: 2rem;}

/* Свёрнутое меню (64px): текста пункта не видно, и бейдж с числом уезжает
   вместе с ним. Оставляем от него точку в углу иконки — число в 8 пикселей
   всё равно не прочитать, а факт непрочитанного виден. */
.sidebar-light header:not(.hover) .menu .sidebar-glass ul li a .js-menu-unread {
	position: absolute;
	top: 50%;
	right: .3rem;
	margin: -.85rem 0 0 0;
	width: .5rem;
	height: .5rem;
	min-width: 0;
	padding: 0;
	font-size: 0;
	line-height: 0;
	border-radius: 50%;
}

@media (min-width: 768px) {
    header #menu-client ul li a::before {right: .5rem;transform: none;}
}

header .min-logo {background: #fff; padding: .5rem; border-radius: .5rem;}
header .min-logo img {height: 30px;}
.unslctbl {white-space: nowrap; overflow: auto;}
/* ── Блок пользователя (bottom_menu): FA-иконки + адаптация ── */
header .sidebar-glass.bottom_menu .user-title { min-width: 0; }
header .sidebar-glass.bottom_menu .user-name {
    text-overflow: ellipsis; white-space: nowrap; font-weight: 600;
}
header .sidebar-glass.bottom_menu .user-company .bootstrap-select { max-width: 100%; width: 100%; }

/* иконка настроек */
header .sidebar-glass.bottom_menu .settings-link {
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; opacity: .8; transition: opacity .15s;
}
header .sidebar-glass.bottom_menu .settings-link:hover { opacity: 1; }
header .sidebar-glass.bottom_menu .settings-link i { font-size: 1.2rem; }

/* кнопка пополнения баланса */
header .sidebar-glass.bottom_menu .addBalance {
    width: 1.75rem; height: 1.75rem; border-radius: 50%;
    background: var(--color-base, #365edc); color: #fff; flex: 0 0 auto;
}
header .sidebar-glass.bottom_menu .addBalance i { font-size: .8rem; color: #fff; }
header .sidebar-glass.bottom_menu .balance a { min-width: 0; }


/* ============================================================
   Мобилка (макет Figma): бокового меню нет, основные пункты —
   в нижнем меню (.bottom-nav), «Аккаунт» раскрывает шапку
   целиком (body.account-open). Десктоп не меняется.
   ============================================================ */
:root {--bottomnav-h: 64px;}

.bottom-nav {position: fixed; left: 0; right: 0; bottom: 0; z-index: 1035; height: calc(var(--bottomnav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); display: flex; background: #fff; border-top: 1px solid #E6ECF5; box-shadow: 0 -4px 16px rgba(16, 22, 38, .06); font-size: 1rem;}
body.site .bottom-nav .bottom-nav-item {flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; border: 0; background: none; padding: 0; color: var(--color-small); font-size: .7rem; line-height: 1.1; text-decoration: none;}
body.site .bottom-nav .bottom-nav-item i {font-size: 1.15rem;}
body.site .bottom-nav .bottom-nav-item span {max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
body.site .bottom-nav .bottom-nav-item.active,
body.site .bottom-nav .bottom-nav-item:hover,
body.site.account-open .bottom-nav .js-account-toggle {color: var(--color-primary);}
/* «Аккаунт» открыт — подсвечиваем только его */
body.site.account-open .bottom-nav .bottom-nav-item.active {color: var(--color-small);}
/* только мобилка. Не через .d-md-none: на тач-экране header ловит :hover,
   и правило .header-1:hover .d-md-none прятало меню посреди нажатия */
@media (min-width: 768px) {
    body.site .bottom-nav {display: none;}
}

@media (max-width: 767.98px) {
    /* нижнее меню живёт внутри header, поэтому прячем не header, а его содержимое
       (и гасим раскрытие сайдбара по :hover — на тач-экране оно залипало) */
    body.site > header.header-1,
    body.site > header.header-1:hover {position: static; width: 0; height: 0; padding: 0; overflow: visible; background: none; transition: none;}
    body.site > header.header-1 > .container {padding: 0;}
    body.site:not(.account-open) > header.header-1 > .container > :not(.bottom-nav) {display: none !important;}
    /* на мобилке все страницы во всю ширину, без рамки-обёртки со скруглением;
       выше мобилки — обычная обёртка (отступ .5rem, скругление 1rem из custom.css) */
    body.site > .module:not(.header-1) {margin: 0 0 calc(var(--bottomnav-h) + env(safe-area-inset-bottom)); height: calc(100vh - var(--bottomnav-h)); height: calc(100dvh - var(--bottomnav-h) - env(safe-area-inset-bottom));}
    body.site > .module:not(.header-1) > * {border-radius: 0;}

    /* плашка cookie — над нижним меню, а не поверх него */
    body.site > div.cookie:not(.module) {bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom) + .3rem); right: .3rem; left: .3rem; width: auto;}

    body.site.account-open > header.header-1 {position: fixed; top: 0; left: 0; right: 0; bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom)); width: 100%; height: auto; font-size: 1rem; padding: 1rem .5rem; overflow: auto; z-index: 1034; background: url(/assets/bg.jpeg) no-repeat; background-size: cover;}
    body.site.account-open > header.header-1 > .container {padding: 0 .5rem;}
    body.site.account-open > header.header-1 .d-md-block {display: block !important;}
    body.site.account-open > header.header-1 .d-md-flex {display: flex !important;}
    body.site.account-open > header.header-1 .d-md-none {display: none !important;}
    body.site.account-open > header.header-1 #menu-client ul li a::before {right: .5rem; transform: none;}
    body.site.account-open > header.header-1 .menu .sidebar-glass ul li a {padding: 1rem .5rem;}
}


[data-color="#000000FF"] {color:#000000FF}

.create textarea {text-align: center; overflow: hidden;}

.main-page .wrap-sort {background: #F8FAFB; border-radius: 1rem; padding: 1rem 16px; margin: -1rem -1rem 0 -1rem; position: sticky; top: -1rem; z-index: 10; margin-bottom: 0rem;}


/* Оверлей (затемнение) */
.popup-overlay {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0); z-index: 15; visibility: hidden;}
.popup-overlay.active {background: rgba(0, 0, 0, 0.5); visibility: visible;}
.side-popup {position: fixed; top: 0; right: -400px; width: 400px; height: 100vh; background: white; box-shadow: -2px 0 10px rgba(0,0,0,0.1); z-index: 15; transition: right 0.3s ease;}
.side-popup.active {right: 0;}
.popup-content {padding: 20px; height: 100%; overflow-y: auto; position: relative;}
.close-btn {position: absolute; top: 10px; right: 15px; background: none; border: none; font-size: 28px; cursor: pointer; color: #666; transition: color 0.2s; z-index: 15;}
.close-btn:hover {color: #000;}


/* ── Итоговый расчёт заказа ── */
.order-summary {border:1px dashed #C9D8F5; border-radius:16px; overflow:hidden; background:#fff; box-shadow:0 6px 20px rgba(2,76,169,.06);}
.order-summary .os-head {background:#F3F7FF; color:var(--color-black); padding:18px 20px; border-bottom:1px dashed #d6deea;}
.order-summary .os-head-sum {color:var(--color-primary);}
.order-summary .os-head-label {font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--color-small);}
.order-summary .os-head-sum {font-size:1.9rem; font-weight:700; line-height:1.15; margin-top:2px;}
.order-summary .os-head-math {font-size:.76rem; color:var(--color-small); margin-top:8px; word-break:break-word;}
.order-summary .os-meta {padding:16px 20px; display:flex; flex-direction:column; gap:12px;}
.order-summary .os-meta-row {display:flex; align-items:flex-start; gap:12px;}
.order-summary .os-meta-icon {color:#2B64F6; width:18px; flex:0 0 18px; text-align:center; margin-top:3px;}
.order-summary .os-meta-body {display:flex; flex-direction:column; line-height:1.3; min-width:0;}
.order-summary .os-meta-label {font-size:.7rem; color:#93a0b5; text-transform:uppercase; letter-spacing:.03em;}
.order-summary .os-meta-body > span:last-child {font-size:.9rem; color:#1f2733; word-break:break-word;}
.order-summary .os-items {padding:4px 20px 8px; border-top:1px dashed #d6deea;}
.order-summary .os-items-head {font-size:.7rem; color:#93a0b5; text-transform:uppercase; letter-spacing:.03em; margin:14px 0 6px;}
.order-summary .os-item {display:flex; justify-content:space-between; align-items:flex-start; gap:14px; padding:11px 0; border-bottom:1px solid #f0f3f8;}
.order-summary .os-item:last-child {border-bottom:0;}
.order-summary .os-item-title {font-weight:600; font-size:.9rem; color:#1f2733;}
.order-summary .os-item-desc {font-size:.76rem; color:#93a0b5; margin-top:2px;}
.order-summary .os-item-price {text-align:right; flex:0 0 auto;}
.order-summary .os-item-total {font-weight:700; font-size:.95rem; color:#1f2733; white-space:nowrap;}
.order-summary .os-item-calc {font-size:.74rem; color:#93a0b5; margin-top:2px;}
.order-summary .os-total {display:flex; justify-content:space-between; align-items:center; padding:15px 20px; background:#f6f9fe; font-weight:700; color:#1f2733;}
.order-summary .os-total-sum {font-size:1.2rem; color:#024CA9;}

/* ── Приложенные файлы ── */
.order-attachments {display:flex; flex-direction:column; gap:8px; margin-top:10px;}
.order-attachments:empty {display:none;}
.attach-chip {display:flex; align-items:center; gap:10px; border:1px solid #e3e8ef; border-radius:10px; padding:8px 10px; background:#f8fafc;}
.attach-chip .attach-icon {width:34px; height:34px; flex:0 0 34px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:#fff; background:#2B64F6; overflow:hidden;}
.attach-chip .attach-icon img {width:100%; height:100%; object-fit:cover;}
.attach-chip.is-doc .attach-icon {background:#6c7a91;}
.attach-chip .attach-body {min-width:0; flex:1;}
.attach-chip .attach-name {font-size:.85rem; color:#1f2733; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.attach-chip .attach-size {font-size:.72rem; color:#93a0b5;}
.attach-chip .attach-remove {border:0; background:none; color:#c0392b; font-size:1rem; line-height:1; padding:4px 6px; cursor:pointer;}
.attach-chip.is-uploading {opacity:.6;}

/* Подсветка автоподставленной даты окончания */
.create input[name="date_end"].date-autofill,
#new-order input[name="date_end"].date-autofill {animation: date-autofill-flash 1.4s ease-out;}
@keyframes date-autofill-flash {
    0%   {background-color: #fff3cd; box-shadow: 0 0 0 .2rem rgba(255, 193, 7, .45);}
    100% {background-color: transparent; box-shadow: 0 0 0 .2rem rgba(255, 193, 7, 0);}
}

.b-car {width: 17px; height: 30px; background: url('/assets/images/car.png'); background-repeat: no-repeat; background-size: cover; transform: translate(-50%, -50%); filter: drop-shadow(0 2px 4px rgba(0,0,0,0.7));}
.b-car-direction-n   { transform: translate(-50%, -50%) rotate(0deg); }

.b-car-direction-nne { transform: translate(-50%, -50%) rotate(22.5deg); }
.b-car-direction-ne  { transform: translate(-50%, -50%) rotate(45deg); }
.b-car-direction-nee { transform: translate(-50%, -50%) rotate(67.5deg); }

.b-car-direction-e   { transform: translate(-50%, -50%) rotate(90deg); }

.b-car-direction-see { transform: translate(-50%, -50%) rotate(112.5deg); }
.b-car-direction-se  { transform: translate(-50%, -50%) rotate(135deg); }
.b-car-direction-sse { transform: translate(-50%, -50%) rotate(157.5deg); }

.b-car-direction-s   { transform: translate(-50%, -50%) rotate(180deg); }

.b-car-direction-ssw { transform: translate(-50%, -50%) rotate(202.5deg); }
.b-car-direction-sw  { transform: translate(-50%, -50%) rotate(225deg); }
.b-car-direction-sww { transform: translate(-50%, -50%) rotate(247.5deg); }

.b-car-direction-w   { transform: translate(-50%, -50%) rotate(270deg); }

.b-car-direction-nww { transform: translate(-50%, -50%) rotate(292.5deg);}
.b-car-direction-nw  { transform: translate(-50%, -50%) rotate(315deg);}
.b-car-direction-nnw { transform: translate(-50%, -50%) rotate(337.5deg);}


:root {--create-line: #D6E3FF;}

/* Мобилка во всю ширину, выше — обёртка со скруглением: общее правило в header-1.css */

/* ── Раскладка страницы ── */
@media (min-width: 992px) {
    .create .main-page > .col-lg-7 {display: flex; flex-direction: column; height: 100%; min-height: 0;}
    /* padding-top — запас под подъём карточки на ховере (translateY), иначе скролл-контейнер срезает верхний border */
    .create .overflow_auto {flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-top: 4px; padding-right: .5rem; margin-right: -.5rem;}
    /* карта встык к правому краю обёртки — скругляем её правые углы */
    .create #createMap {height: calc(100% + 2rem); margin: -1rem -1rem -1rem 0; overflow: hidden; border-radius: 0 1rem 1rem 0;}
}
@media (min-width: 768px) and (max-width: 991.98px) {
    /* планшет: карта сверху встык к краям обёртки — скругляем верхние углы */
    .create #createMap {border-radius: 1rem 1rem 0 0;}
}
@media (max-width: 991.98px) {
    /* фикс «расползания»: колонки во всю ширину и не растягиваются содержимым */
    .main-page > [class*="col-"] {flex: 0 0 100%; max-width: 100%; min-width: 0;}
    .create #createMap {height: 45vh; margin: -1rem -1rem 0; overflow: hidden;}
    /* поиск сразу под картой: без вертикального отступа сетки, серая подложка шапки встык к карте */
    .create .main-page {--bs-gutter-y: 0; align-content: flex-start;}
    .create .main-page .page-header {margin-top: 1rem;}
    .col-sm-slider-filter {flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; min-width: 0;}
    .col-sm-slider-filter::-webkit-scrollbar {display: none;}
    .col-sm-slider-filter > .btn {flex: 0 0 auto; white-space: nowrap;}
}

/* ── Поиск ── */
.create .page-header .search {position: relative;}
.create .page-header .search input {padding-right: 2.5rem; border-radius: 12px; border-color: var(--create-line); height: 44px;}
.create .page-header .search input:focus {border-color: var(--color-primary); box-shadow: 0 0 0 .2rem rgba(43, 100, 246, .15);}
.create .page-header .search > i {position: absolute; right: .95rem; top: 50%; transform: translateY(-50%); color: var(--color-black); pointer-events: none;}

/* ── Чипы категорий ── */
.create .col-sm-slider-filter .btn {border-radius: 999px; padding: .3rem .9rem; font-size: .85rem; background: #fff; border: 1px solid var(--create-line); color: var(--color-black);}
.create .col-sm-slider-filter .btn:hover {border-color: var(--color-primary); color: var(--color-primary); background: #fff;}
.create .col-sm-slider-filter .btn.btn-primary {background: #EAF1FF; border-color: var(--color-primary); color: var(--color-primary);}

/* ── Карточки техники: компактнее, название и цена сверху, фото снизу ── */
.create .machine-card {cursor: pointer; display: flex; flex-direction: column; gap: .35rem; padding: .6rem .6rem .5rem; border: 1px solid var(--create-line); border-radius: 12px; background: #fff; box-shadow: 0 2px 6px rgba(2, 76, 169, .06); transition: border-color .2s, box-shadow .2s, transform .2s;}
.create .machine-card:hover {border-color: var(--color-primary); box-shadow: 0 6px 16px rgba(43, 100, 246, .18); transform: translateY(-1px);}
.create .machine-card .text {min-width: 0; line-height: 1.2;}
.create .machine-card-title {font-weight: 600; font-size: .9rem; color: var(--color-black);}
.create .machine-card-price {display: block; font-size: .75rem; color: var(--color-small); margin-top: .15rem;}
.create .machine-card img {height: 72px; width: 100%; object-fit: contain; margin-top: auto;}

/* мобилка: карточки — горизонтальная лента, как в макете */
@media (max-width: 767.98px) {
    .create .overflow_auto > .row {--bs-gutter-x: 0; --bs-gutter-y: 0; flex-wrap: nowrap; overflow-x: auto; gap: .5rem; margin: 0; padding: .25rem 0 .5rem; scroll-snap-type: x mandatory; scrollbar-width: none;}
    .create .overflow_auto > .row::-webkit-scrollbar {display: none;}
    .create .overflow_auto > .row > [class*="col-"] {flex: 0 0 44%; max-width: 44%; padding: 0; scroll-snap-align: start;}
    .create .overflow_auto > .row > .machines-empty-search {flex-basis: 100%; max-width: 100%;}
    .create .machine-card img {height: 90px;}
}

/* ── Карточка заказа (попап) по макету ── */
#popup_right #new-order h5 {font-size: 1.1rem; font-weight: 600; color: var(--color-black); margin-bottom: .75rem;}
/* шапка попапа: фото + раздел + уточнения + цена/доставка/время */
#popup_right .modal-title:has(.create-head) {min-width: 0;}
#popup_right .create-head {display: flex; align-items: center; gap: .75rem; min-width: 0; font-size: 1rem; font-weight: 400;}
#popup_right .create-head-img {flex: 0 0 56px; width: 56px; height: 56px; object-fit: contain; border-radius: 12px; background: #F5F8FC; padding: .25rem;}
#popup_right .create-head-main {flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .15rem;}
#popup_right .create-head-title {font-size: 1.1rem; font-weight: 600; line-height: 1.2; color: var(--color-black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
/* уточнения и плашки — в одну строку, лишнее листается вбок */
#popup_right .create-head-sub,
#popup_right .create-head-meta {white-space: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch;}
#popup_right .create-head-sub::-webkit-scrollbar,
#popup_right .create-head-meta::-webkit-scrollbar {display: none;}
#popup_right .create-head-sub {font-size: .8rem; line-height: 1.3; color: var(--color-small);}
#popup_right .create-head-meta {display: flex; flex-wrap: nowrap; gap: .3rem; margin-top: .25rem;}
#popup_right .create-head-meta span {flex: 0 0 auto; padding: .15rem .55rem; border-radius: 999px; background: #F1F5FF; color: var(--color-primary); font-size: .75rem; font-weight: 500; white-space: nowrap;}
#popup_right #new-order .filter-title {font-weight: 600; color: var(--color-black); margin-bottom: .6rem !important;}
#popup_right #new-order .filters .btn,
#popup_right #new-order .work-type-switch .btn {border-radius: 999px; padding: .35rem .95rem;}
#popup_right #new-order .filters .btn-outline-primary {border-color: var(--create-line, #D6E3FF); color: var(--color-black);}
#popup_right #new-order .filters .btn-outline-primary:hover {border-color: var(--color-primary); color: var(--color-primary); background: #fff;}
#popup_right #new-order .work-type-switch .btn {flex: 1 1 0; font-size: .9rem; line-height: 1.2;}
#popup_right #new-order .work-type-switch .btn-secondary {background: #F1F3F6; border-color: #F1F3F6; color: #9AA5B4;}
/* строка доп. оборудования/услуги: чекбокс | название | −кол-во+ | цена */
#popup_right #new-order .order-item-row {display: flex; align-items: center; gap: .75rem; padding: .65rem 0; border-bottom: 1px solid #EEF2F8;}
#popup_right #new-order .order-item-row:last-child {border-bottom: 0;}
#popup_right #new-order .order-item-row .form-check-input {flex: 0 0 auto; width: 1.3rem; height: 1.3rem; border-radius: .35rem; margin: 0; cursor: pointer;}
#popup_right #new-order .order-item-name {flex: 1 1 auto; min-width: 0; margin: 0; cursor: pointer; line-height: 1.25; overflow-wrap: anywhere;}
#popup_right #new-order .order-item-name small {display: block; margin-top: .15rem; font-size: .8rem;}
#popup_right #new-order .order-item-price {flex: 0 0 auto; white-space: nowrap; text-align: right; color: var(--color-primary); font-weight: 600;}
#popup_right #new-order .order-item-qty {flex: 0 0 auto; display: flex; align-items: center; height: 34px; border: 1px solid var(--create-line, #D6E3FF); border-radius: 999px; overflow: hidden;}
#popup_right #new-order .order-item-qty-btn {width: 30px; height: 100%; padding: 0; border: 0; background: transparent; color: var(--color-primary); font-size: .75rem;}
#popup_right #new-order .order-item-qty-btn:hover {background: #F1F5FF;}
#popup_right #new-order .order-item-qty-input {width: 2.6rem; height: 100%; padding: 0; border: 0; text-align: center; font-weight: 500; background: transparent; -moz-appearance: textfield; appearance: textfield;}
#popup_right #new-order .order-item-qty-input:focus {outline: none;}
#popup_right #new-order .order-item-qty-input::-webkit-outer-spin-button,
#popup_right #new-order .order-item-qty-input::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
#popup_right #new-order input[type="file"]::file-selector-button {background: var(--color-primary); color: #fff; border: 0; border-radius: 999px; padding: .3rem .9rem; margin-right: .75rem;}
/* галерея по макету: во всю ширину с заходом за правый край, фото на светлой
   подложке, индикатор-«пилюля» под фото (глобальные точки owl — поверх фото) */
#popup_right .imageGallery {--gallery-h: 210px; margin-right: calc(-1 * var(--bs-modal-padding, 1rem));}
#popup_right .imageGallery.is-single {margin-right: 0;}
#popup_right .imageGallery .item a {display: flex !important; align-items: center; justify-content: center; height: var(--gallery-h); background: #F5F8FC; border-radius: 16px; overflow: hidden;}
#popup_right .imageGallery .owl-carousel .owl-item img {width: 100%; height: 100%; object-fit: contain; padding: .75rem;}
#popup_right .imageGallery .owl-carousel .owl-dots {position: static; transform: none; -webkit-transform: none; display: flex; justify-content: center; gap: 6px; margin: .75rem calc(var(--bs-modal-padding, 1rem)) 0 0;}
#popup_right .imageGallery .owl-carousel .owl-dot {width: 6px; height: 6px; margin: 0; border-radius: 999px; background: #D3DCEA !important; transition: width .2s, background .2s;}
#popup_right .imageGallery .owl-carousel .owl-dot.active {width: 22px; background: var(--color-primary) !important;}
/* стрелки по центру фото; справа отступ на заход галереи за край попапа */
#popup_right .imageGallery .owl-carousel .owl-nav {top: calc(var(--gallery-h) / 2); left: .5rem; right: calc(var(--bs-modal-padding, 1rem) + .5rem); width: auto; max-width: none; transform: none; -webkit-transform: none; font-size: 1rem; pointer-events: none;}
#popup_right .imageGallery .owl-carousel .owl-nav button.owl-prev,
#popup_right .imageGallery .owl-carousel .owl-nav button.owl-next {pointer-events: auto; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--color-primary); box-shadow: 0 2px 8px rgba(2, 76, 169, .18); transition: opacity .2s;}
#popup_right .imageGallery .owl-carousel .owl-nav button.disabled {opacity: 0; pointer-events: none;}
@media (max-width: 575.98px) {
    #popup_right .imageGallery {--gallery-h: 190px;}
}
@media (min-width: 992px) {
    #popup_right .imageGallery {--gallery-h: 260px;}
}
#popup_right .modal-footer .btn {padding: .7rem 1rem; border-radius: 12px; font-weight: 500;}

/* шаг 3: заказ создан (+ счёт, если не хватило баланса) */
#popup_right .order-done-wrap {display: flex; flex-direction: column; gap: 1.25rem; padding: .5rem 0 1rem;}
#popup_right .order-done {display: flex; flex-direction: column; align-items: center; text-align: center; gap: .4rem; padding: 1rem 0 .5rem;}
#popup_right .order-done-icon {width: 72px; height: 72px; margin-bottom: .5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #EAF1FF; color: var(--color-primary); font-size: 2rem; box-shadow: 0 0 0 10px #F5F8FF;}
#popup_right .order-done-title {font-size: 1.35rem; font-weight: 600; color: var(--color-black);}
#popup_right .order-done-num {font-weight: 500; color: var(--color-primary);}
#popup_right .order-done-text {max-width: 320px; font-size: .9rem; color: var(--color-small);}
#popup_right .order-invoice {display: flex; flex-direction: column; gap: 1rem; padding: 1rem; border: 1px solid var(--create-line, #D6E3FF); border-radius: 16px; background: #fff; box-shadow: 0 6px 20px rgba(2, 76, 169, .06);}
#popup_right .order-invoice-head {display: flex; gap: .75rem; align-items: flex-start;}
#popup_right .order-invoice-icon {flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #FFF4E5; color: #F59E0B; font-size: 1.1rem;}
#popup_right .order-invoice-title {font-weight: 600; color: var(--color-black);}
#popup_right .order-invoice-sub {font-size: .85rem; line-height: 1.3; color: var(--color-small); margin-top: .15rem;}
#popup_right .order-invoice-rows {display: flex; flex-direction: column; gap: .5rem; padding: .75rem; border-radius: 12px; background: #F5F8FC; font-size: .9rem;}
#popup_right .order-invoice-rows > div {display: flex; justify-content: space-between; gap: 1rem;}
#popup_right .order-invoice-rows span {color: var(--color-small);}
#popup_right .order-invoice-rows b {font-weight: 600; white-space: nowrap; color: var(--color-black);}
#popup_right .order-invoice-rows b.text-danger {color: var(--bs-danger) !important;}
#popup_right .order-invoice-rows .is-total {padding-top: .5rem; border-top: 1px dashed #D3DCEA;}
#popup_right .order-invoice-rows .is-total b {font-size: 1.05rem; color: var(--color-primary);}


.login {display: none;}
.nav.nav-tabs {justify-content: center;}

/* Вход через MAX */
.btn-max,
.btn-max:link,
.btn-max:visited {
	background: #7c4dff;
	border-color: #7c4dff;
	color: #fff !important;
}
.btn-max:hover,
.btn-max:focus,
.btn-max:active,
a.btn-max:hover,
a.btn-max:focus,
a.btn-max:active {
	background: #6a3df0;
	border-color: #6a3df0;
	color: #fff !important;
}
.btn-max:disabled { opacity: .65; }
.max-qr {
	width: 190px;
	max-width: 70%;
	height: auto;
	border: 1px solid #eee;
	border-radius: 8px;
	padding: 6px;
	background: #fff;
}