/* ============================================
   1. ПЕРЕМЕННЫЕ И БАЗОВЫЕ СТИЛИ
   ============================================ */
:root { --bg-card: #ffffff; --bg-body: #f3f4f6; --bg-payment: #f1f5f9; --bg-payment-hover: #dae0e5; --bg-plate: #ffffff; --text-main: #111827; --text-muted: #9ca3af; --text-accent: #2563eb; --text-success: #059669; --border-light: #e5e7eb; --border-plate: #d1d5db; --color-star: #fbbf24; --color-star-empty: #d1d5db; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 16px; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); --font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --primary: #4F46E5; --primary-hover: #4338CA; --success: #10B981; --success-bg: #e7fff3; --danger: #EF4444; --danger-bg: #FEE2E2; --bg-main: #F3F4F6; --card-bg: #FFFFFF; --border: #E5E7EB; --payment-bg: #ECFDF5; --star-active: #F59E0B; --star-inactive: #D1D5DB; --bg-blue-50: #eff6ff; --bg-gray-100: #f3f4f6; --text-blue: #2563eb; }

body.opened-modal { position: fixed; }
form { margin-block-end: 0; }
.wrap.hide-it { max-height: 0px; }
.blur { -webkit-filter: blur(2px); -moz-filter: blur(2px); -o-filter: blur(2px); -ms-filter: blur(2px); filter: blur(2px); }
.back-inh { background: inherit; }
.border-none { border: none; }
.hidden-data, .tarif-gazel-hide, .tarif-loader-hide { display: none; }
.flex-row { display: flex; flex-direction: row; }
.flex-col { display: flex; flex-direction: column; }
.flex-center { display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; }

/* ============================================
   2. ТАБЛИЦЫ, БЛОКИ МАРШРУТА И КЛИЕНТА
   ============================================ */


.tel-verified { position: absolute; right: 0px; top: 14px; width: 20px; height: 20px; background-image: url(../img/verified_green.svg?v2); background-size: cover; }
.tel-need-verify { position: absolute; right: 20px; top: 26px; height: 20px; background-size: cover; font-size: 12px; border: 1px solid #4b48ab; border-radius: 5px; color: #4b48ab; padding: 4px 4px; text-align: center; display: flex; align-items: center; cursor: pointer; }
.tel-verified.td-verified { top: 28px; right: 20px; }

.td-right.unclickable { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border-bottom: none; }
.td-options { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: baseline; }
.td-options > div { padding: 2px 6px; border: 1px solid grey; border-radius: 8px; font-size: 12px; margin: 4px; }
.td-from { position: relative; }
.td-from-zone { text-align: center; color: grey; display: inline-block; margin: 0 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; border-bottom-left-radius: 5px; }
.td-baner { margin: 20px 0px 0px 6px; padding: 10px; text-align: center; background: #cbf7d7; font-size: 14px; font-weight: 500; border-radius: 4px; width: 100%; }
.preload-streetfrom { text-align: center; font-size: 80%; color: grey; }
.annotation-str { color: #8e8c8c; font-size: 100%; }

.client-info { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: center; width: 100%; }
.client-info > div { margin-top: 10px; font-size: 90%; text-align: center; }
.client-info div a { text-decoration: none; color: green; }

.hints { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; align-items: baseline; font-size: 90%; min-height: 7px; }
.hints div { cursor: pointer; }
.zone-hints { color: grey; }
.zone { padding: 5px 6px; border-radius: 5px; }
.zone.on { box-shadow: inset 1px 1px 2px #c8c8c8, inset -1px -1px 2px #ffffff; background: gold; color: black; }

/* ============================================
   3. КНОПКИ, СЕЛЕКТЫ И ЭЛЕМЕНТЫ ВВОДА
   ============================================ */
.zakaztype.focus { box-shadow: 1px 0px 4px 0px #73b7f1; }
.main-but:hover { background: #f3ce65; }
.main-but.focus { background: #f3ce65; border: 1px solid #73b7f1; box-shadow: 2px 1px 4px 1px #73b7f1; }
.main-but.pressed { background: #f7f7f7; border: 1px solid gainsboro; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; color: grey; }
.dop-but { width: 220px; border-radius: 25px; background: white; font-weight: 200; font-size: 18px; cursor: pointer; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; }
.dop-but-text { margin-left: 10px; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; }
.but-box { position: absolute; top: 6px; right: 7px; }
.but.hide { display: none; }
.but { font-size: 13px; font-weight: 500; color: var(--text-muted); background: transparent; border: 1px solid var(--border); padding: 6px 12px; border-radius: 8px; cursor: pointer; transition: all 0.2s; }

.select-box { position: relative; width: 140px; }
.select-box.v-2 { height: 44px; width: 75px; border-radius: 5px; border: 1px solid grey; background: white; }
.pseudo-select { position: absolute; top: 0px; left: 0px; width: 140px; height: 80px; font-size: 50px; font-weight: 200; text-align: center; }
.pseudo-select .span { font-size: 40px; margin-left: 10px; }
.select-box.v-2 .pseudo-select { width: 100%; font-size: 30px; font-weight: 400; text-align: center; }
.select-box.v-2 .pseudo-select .span { font-size: 30px; margin-left: 6px; }

.dateinput { font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; width: 160px; margin-top: 8px; margin-left: 3px; -webkit-appearance: none; font-size: 16px; padding: 8px 10px; border: none; border: 1px solid black; border-radius: 5px; background: inherit; min-height: 38px; }
.timeinput { font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; width: 100px; margin-top: 8px; margin-left: 8px; -webkit-appearance: none; font-size: 16px; padding: 8px 10px; border: none; border: 1px solid black; border-radius: 5px; background: inherit; min-height: 38px; }
.weight-input { padding: 5px 10px; width: 90px; -webkit-appearance: none; font-size: 90%; border-radius: 5px; }
.from-city-select { text-align: center; -webkit-appearance: none; border-radius: 8px; background: inherit; outline: none; border: none; padding: 5px 10px; margin-left: 5px; background-color: white; border-radius: 6px; border: 1px solid gainsboro; }
.from-city-select option { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; font-size: 110%; text-align: left; }

.zbz-input-clearable { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QTQzOEVEQkZFMjRDMTFFM0JDMDVDMjFEMDk4MTc0QTMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QTQzOEVEQzBFMjRDMTFFM0JDMDVDMjFEMDk4MTc0QTMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBNDM4RURCREUyNEMxMUUzQkMwNUMyMUQwOTgxNzRBMyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBNDM4RURCRUUyNEMxMUUzQkMwNUMyMUQwOTgxNzRBMyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pqwf5ocAAACpSURBVHjaYvT09GRjYGAQAuIXDISBBBC/3rZt219cCpighq0GYjkChslB1YniU8QEdVk0EC/FY6gcVD6akE+YoPQjPIYiG/aIUJgwIbGxGUqSYegGohtqQ6phIMCCRQykuRKIDwOxLSmGYXMhzJvtUMPaiYh9vAYih9kRImIfr4HYIuARqYYyERGbJBnKBM1OhGIT2VAJQrH8DohDicjLj6DqXuNTBBBgAL/OL+VnHD9pAAAAAElFTkSuQmCC"); background-position: 150% 50%; background-repeat: no-repeat; transition: background 0.4s; padding-right: 27px; }
.zbz-input-clearable--x { background-position: 100% 50%; }
.zbz-input-clearable--x-over { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QkI2QjEyRDJFMjRDMTFFMzgyRUZCRkUwOTc4ODc4NzUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QkI2QjEyRDNFMjRDMTFFMzgyRUZCRkUwOTc4ODc4NzUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpCQjZCMTJEMEUyNEMxMUUzODJFRkJGRTA5Nzg4Nzg3NSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpCQjZCMTJEMUUyNEMxMUUzODJFRkJGRTA5Nzg4Nzg3NSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PiaX4hIAAACpSURBVHjaYvwVws7GwMAgBMQvGAgDCSB+zbr6x19cCpighq0GYjkChslB1YniU8QEdVk0EC/FY6gcVD6akE+YoPQjPIYiG/aIUJgwIbGxGUqSYegGohtqQ6phIMCCRQykuRKIDwOxLSmGYXMhzJvtUMPaiYh9vAYih9kRImIfr4HYIuARqYYyERGbJBnKBM1OhGIT2VAJQrH8DohDicjLj6DqXuNTBBBgANiWL+VbATXyAAAAAElFTkSuQmCC"); cursor: pointer; }
.zbz-input-clearable::-ms-clear { display: none; }

.chevron-btn { width: 32px; height: 32px; border-radius: 50%; background-color: var(--bg-gray-100); display: flex; align-items: center; justify-content: center; color: var(--text-muted); transition: all 0.2s ease; margin-left: 25px; }
.chevron-btn svg { width: 14px; height: 14px; fill: currentColor; }
.profile-link:hover .chevron-btn { background-color: var(--bg-blue-50); color: var(--text-blue); }

.arrow { border: solid cornflowerblue; border-width: 0 2px 2px 0; display: inline-block; padding: 3px; transition: all 0.3s ease; cursor: pointer; }
.right { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); }
.left { transform: rotate(135deg); -webkit-transform: rotate(135deg); }
.up { transform: rotate(-135deg); -webkit-transform: rotate(-135deg); }
.down { transform: rotate(45deg); -webkit-transform: rotate(45deg); }
.arrow.grey { border-color: grey; }

.number-selector-container { padding: 4px 6px !important; min-height: 54px; background-color: #f7f7f7; display: flex; align-items: center; }
.number-selector-wrap { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; }
.number-selector-item { font-size: 16px; font-weight: 600; color: #555; background-color: #fff; border: 1px solid #ddd; border-radius: 8px; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; margin: 4px; cursor: pointer; transition: all 0.2s ease; user-select: none; }
.number-selector-item:hover { background-color: #e9e9e9; border-color: #ccc; }
.number-selector-item.active { background-color: #ffd700; color: #000; border-color: #e6c200; transform: scale(1.05); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); }

/* ============================================
   4. БЛОКИ ЗАКАЗА (ZAKAZ)
   ============================================ */
.wrap.new-order .toper { display: none; }
.wrap.new-order .zakaz-container { max-height: 10000px; }
.wrap.new-order .td-right { background: #f7f7f7; cursor: pointer; }

.zakaz-container { max-height: 0px; overflow: hidden; transition: max-height 0.7s ease; width: 100%; }
.zakaz-container.open { max-height: 2500px; }
.opener-img { position: relative; top: -2px; width: 12px; transition: all 0.5s ease; }
.zakaz-box-info { padding: 0 10px; width: 100%; min-height: 120px; transition: all 0.3s ease; }

.zakazinfo-zakaz { position: relative; width: 100%; margin-top: 20px; min-height: 56px; transition: all 0.4s ease; border: 1px solid gainsboro; border-radius: 5px; background: whitesmoke; }
.zakazinfo-zakaz.payment { position: relative; width: 100%; margin-top: 10px; min-height: 0px; border: 1px solid transparent; }
.zakazinfo-zakaz.payment .stand-box { border-top: none; }
.zakazinfo-zakaz.payment.free { display: none; }

.zakaz-poz { color: grey; margin-top: 4px; font-size: 80%; }
.zakaz-gosnomer { color: grey; margin-top: 10px; color: black; text-transform: uppercase; font-size: 90%; background: whitesmoke; padding: 16px; border-radius: 8px; }
.zakaz-tel { margin-top: 12px; }
.zakaz-tel a { text-decoration: none; color: cornflowerblue; }
.zakaz-providetime { color: green; margin-top: 12px; }
.img-gazel { width: 25px; }
.img-loader { width: 14px; }

.zakaz-control-box { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: baseline; margin-top: 8px; }
.zakaz-control { margin-top: 3px; width: 30%; font-size: 70%; text-align: center; cursor: pointer; flex-grow: 1; border: 1px solid whitesmoke; border-bottom: 1px solid gainsboro; border-radius: 10px; padding: 4px; margin: 4px 3px; box-shadow: 1px 1px 1px 0px rgba(182, 185, 187, 0.2); }
.zakaz-control.used { box-shadow: inset 1px 1px 1px 0px rgba(182, 185, 187, 0.2); }

.zakaz-stats { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 4px; font-size: 13px; color: var(--text-muted); margin-bottom: 16px; }
.stat-item { display: flex; align-items: center; gap: 4px; }
.stat-dot { width: 4px; height: 4px; background-color: var(--border-plate); border-radius: 50%; }
.rating-text { font-weight: 600; color: var(--text-main); }
.night_time_str { color: #cb7b42; font-size: 13px; margin-top: 5px; text-align: center; }

/* ============================================
   5. КАРТОЧКА ИСПОЛНИТЕЛЯ
   ============================================ */
.executor-card { background: var(--card-bg); border-radius: 16px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); max-width: 480px; margin: 0 auto; overflow: hidden; border: 1px solid var(--border); }
.card-inner { padding: 20px; }
.zakaz-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.zakaz-status-badge { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 20px; background-color: var(--success-bg); color: #449981; display: inline-flex; align-items: center; gap: 6px; }
.zakaz-status-badge.searching { background-color: #FEF3C7; color: #B45309; }
.zakaz-status-badge.not-found { background-color: var(--danger-bg); color: var(--danger); }
.zakaz-status-badge.closed { background-color: whitesmoke; color: black; }
.zakaz-cancel:hover { border-color: var(--danger); color: var(--danger); background-color: var(--danger-bg); }

.profile-section { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }
.profile-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border); }
.zakaz-fio { font-size: 20px; font-weight: 700; margin-bottom: 4px; color: var(--text-main); line-height: 1.2; margin-top: 8px; display: flex; align-items: center; }
.rating-star-icon { color: var(--star-active); font-size: 14px; }
.logistics-box { background: #F9FAFB; border-radius: 12px; padding: 16px; margin-bottom: 20px; }
.car-info { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.car-model { font-weight: 600; font-size: 14px; }
.gosnomer { padding: 2px 4px; border: 1px solid grey; background: white; color: black; letter-spacing: 1px; border-radius: 3px; margin-left: 10px; text-transform: lowercase; position: relative; top: -4px; display: inline-flex; align-items: stretch; font-family: monospace; font-size: 14px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); }
.gosnomer-main { padding: 4px 6px; }
.gosnomer-region { padding: 4px 6px; border-left: 1px solid #000; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 12px; line-height: 1; background: #fdfdfd; }
a.phone-link { color: var(--primary); text-decoration: none; font-weight: 600; }
a.phone-link:hover { text-decoration: underline; }

/* ============================================
   6. ДИАЛОГИ И МОДАЛЬНЫЕ ОКНА (Dialog, Select, Answer)
   ============================================ */
.dialog { box-sizing: border-box; height: 100vh; width: 100%; background-color: #F2F2F6; overflow: auto; z-index: 999; position: relative; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: center; }
.dialog-content { width: 100%; max-width: 450px; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: center; }
.close-dialog-div { width: 100%; max-width: 450px; height: 40px; top: 10px; right: 10px; text-align: center; cursor: pointer; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; align-items: center; font-size: 22px; padding: 10px 20px; }
.dialog-input { border: none; outline: none; text-align: left; width: 100%; }
.control-input { border-radius: 3px; }
.close-dialog{ width: 100%; max-width: 450px; position: relative; }

.dialog-title { font-weight: 600; text-align: center; }
.dialog-set-title { color: grey; text-align: left; font-size: 90%; width: 85%; margin-bottom: 6px; }
.dialog-text { font-size: 15px; font-weight: 200; text-align: center; width: 100%; padding: 10px; }

.dialog-worktime-block { border: 1px solid grey; border-radius: 20px; }
.dialog-worktime-box { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: baseline; margin-top: 15px; }
.dialog-worktime { display: flex; flex-direction: column; }
.dialog-worktime-input { font-size: 40px; font-weight: 200; -webkit-appearance: none; border: none; outline: none; background: inherit; color: black; padding: 0; font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; opacity: 0; box-sizing: border-box; width: 100%; height: 80px; }
.mins-box { margin-left: 15px; }
.dialog-worktime.points { font-size: 40px; font-weight: 200; text-align: center; margin-left: 5px; position: relative; top: 20px; }
.dialog-info { width: 100%; display: flex; flex-direction: column; align-items: center; margin-top: 15px; }
.dialog-calc-result { text-align: center; font-size: 50px; font-weight: 350; color: green; }

.dogovor-id { margin: 4px; padding: 10px; background: white; border-radius: 5px; width: 95%; cursor: pointer; }
.dialog-street { margin: 4px; padding: 10px; background: white; border-radius: 5px; width: 95%; cursor: pointer; }
.dogovor-info { margin: 16px 6px 0 6px; padding: 10px; background: white; border-radius: 5px; border: 1px solid gainsboro; font-weight: 600; width: 95%; }
.dogovor-id:hover, .dogovor-id:active, .last-street:hover { background: lightskyblue; }
.dogovor-info.pink { background: pink; }
.dogovor-info.gold { background: #f7e99f; }
.dialog-street.on { background: lightskyblue; }
.dogovor-info-warning { margin-top: 10px; padding: 10px; border-radius: 5px; font-weight: 500; }
.dogovor-info-warning.gold { background: #f7e99f; color: #856404; border: 1px solid #ffeeba; }
.dogovor-info-warning.pink { background: pink; color: #721c24; border: 1px solid #f5c6cb; }
.dogovor-choice-buttons { flex-direction: column; align-items: stretch; }
.dogovor-choice-btn { width: auto; margin: 5px 0; text-align: center; }

.dialog-km-box { text-align: center; width: 100%; margin-top: 5px; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; }
.dialog-km-box-2 { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; align-items: stretch; border: 1px solid grey; border-radius: 5px; padding: 0 5px 0 0; background: white; }
.dialog-worktime-input-km { font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; font-size: 40px; font-weight: 100; text-align: center; -webkit-appearance: none; border: none; outline: none; background: inherit; color: black; box-sizing: border-box; width: 90%; }
.dialog-worktime-input-km.v-2 { width: 100px; text-align: right; }
.dialog-worktime-input-km-style { font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; font-size: 30px; font-weight: 400; -webkit-appearance: none; border: none; outline: none; background: inherit; color: black; box-sizing: border-box; width: 100px; text-align: right; }
.dialog-worktime-input.v-2 { font-size: 30px; font-weight: 400; -webkit-appearance: none; border: none; outline: none; background: inherit; color: black; padding: 0; font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; opacity: 0; box-sizing: border-box; width: 100%; height: 50px; }
.dialog-worktime-km-label { margin-left: 5px; width: 50px; font-size: 30px; font-weight: 400; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; }

.dialog-setting-box { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; width: 100%; margin-top: 10px; }
.dialog-setting { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; width: 98%; background-color: white; border-radius: 12px; border: 1px solid gainsboro; padding: 5px 0; }
.dialog-setting-str { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; width: 90%; max-width: 400px; padding: 8px 0px; border-bottom: 1px solid gainsboro; min-height: 48px; }
.mini .dialog-setting-str { padding: 4px 0px; min-height: 40px; }
.dialog-setting-str.bottom { border-bottom: none; }
.dialog-setting-str a { color: cornflowerblue; text-decoration: none; }
.dialog-setting-str-left { flex-grow: 1; }
.dialog-setting-str-right { width: 20%; max-width: 60px; }

.dialog-checkbox { width: 49px; min-width: 49px; height: 31px; background: gainsboro; border-radius: 30px; padding: 2px; margin: 0px 5px 0 10px; cursor: pointer; }
.dialog-checkbox-lever { width: 27px; height: 27px; margin-left: 1px; margin-bottom: 3px; border-radius: 15px; background: white; transition: all 0.3s ease; }
.dialog-checkbox.on { background: #35C759; }
.dialog-checkbox.on div { transform: translate(17px,0); }

.dialog-comment { width: 100%; font-size: 20px; font-weight: 400; border: none; border-radius: 5px; -webkit-appearance: none; outline: none; padding: 10px 0; }
.dialog-tel-box { position: relative; font-size: 22px; font-weight: 400; text-align: center; }
.dialog-tel { width: 80%; font-size: 22px; font-weight: 400; border: none; border-radius: 5px; -webkit-appearance: none; outline: none; padding: 10px 0; }
.dialog-sharptime { transition: all 0.2s ease; overflow: hidden; max-height: 200px; width: 100%; padding: 10px; }
.dialog-sharptime.close { transition: all 0.2s ease; overflow: hidden; max-height: 0px; padding: 0px; }

.dialog-poz, .dialog-ttc, .dialog-input-minimal { width: 60px; font-size: 14px; padding: 4px 6px; text-align: center; margin-right: 15px; min-height: 14px; border: 1px solid grey; }
.dialog-log { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; width: 100%; padding-bottom: 100px; }
.dialog-log-str { background: white; margin-top: 5px; padding: 10px; word-wrap: break-word; border-radius: 6px; width: 98%; }
.dialog-done-box { display: flex; align-items: center; justify-content: center; width: 180px; border-radius: 10px; border: 1px solid gold; height: 54px; background: #ffd70078; box-shadow: 4px 4px 8px 0px rgba(182, 185, 187, 0.2); cursor: pointer; position: fixed; bottom: 30px; z-index: 1001; }

.select { box-sizing: border-box; position: fixed; top: 0px; left: 0px; height: 100%; width: 100%; background: rgba(0, 0, 0, 0.4); overflow: auto; z-index: 999999; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center; display: none; opacity: 1; transition: all 0.1s ease; }
.select-open { display: flex; }
.select-container { width: 94%; max-width: 500px; max-height: 80%; overflow-y: auto; padding: 10px 15px; background-color: white; border-radius: 10px; position: relative; border-top: 7px solid green; box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.2); }
.select-close-div div { cursor: pointer; color: black; }
.select-content { width: 100%; background: inherit; color: black; font-size: 20px; display: flex; flex-wrap: nowrap; flex-direction: column; justify-content: center; align-items: stretch; align-content: start; }
.select-close-div { width: 40px; height: 40px; text-align: center; padding: 10px; font-size: 20px; font-weight: 300; position: absolute; top: 0px; right: 5px; }
.select-title { font-size: 24px; font-weight: 600; margin: 0 0 10px 0; padding-right: 40px; }
.select-buttons { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; align-items: center; font-size: 16px; margin-top: 20px; }
.select-but { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; min-width: 70px; min-height: 35px; padding: 5px 10px; border-radius: 5px; background: gainsboro; color: black; cursor: pointer; margin: 8px 3px; transition: all 0.2s ease; }
.select-accept { background: #9dfb96; }
.select-text { font-size: 90%; }

.answer { box-sizing: border-box; position: fixed; top: 0px; left: 0px; height: 100%; width: 100%; background: rgba(0, 0, 0, 0.4); overflow: auto; z-index: 999999; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center; display: none; opacity: 1; transition: all 0.1s ease; }
.answer-open { display: flex; }
.answer-container { width: 94%; max-width: 500px; max-height: 80%; overflow-y: auto; padding: 10px 15px; background-color: white; border-radius: 10px; position: relative; border-top: 7px solid green; box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.2); }
.answer-close-div div { cursor: pointer; color: black; }
.answer-content { width: 100%; background: inherit; color: black; font-size: 20px; display: flex; flex-wrap: nowrap; flex-direction: column; justify-content: center; align-items: stretch; align-content: start; }
.answer-close-div { width: 40px; height: 40px; text-align: center; padding: 10px; font-size: 20px; font-weight: 300; position: absolute; top: 0px; right: 5px; }
.answer-title { font-size: 24px; font-weight: 600; margin: 0 0 10px 0; padding-right: 40px; }
.answer-buttons { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; align-items: center; font-size: 16px; margin-top: 20px; }
.answer-but { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; min-width: 75px; min-height: 35px; padding: 5px 10px; border-radius: 5px; background: gainsboro; color: black; cursor: pointer; margin: 8px 3px; transition: all 0.2s ease; }
.answer-but-yes { background: #a9dfa2 !important; border: 1px solid #5cc95c; }
body.dark .answer-but { background: #aec1e5; }
.answer-take { background: cornflowerblue; border: 1px solid cornflowerblue; color: white; }
.answer-show { background: inherit; border: 1px solid cornflowerblue; color: cornflowerblue; }
.answer-hide { background: inherit; border: none; color: cornflowerblue; }
.answer-input { background: inherit; border-radius: 5px; border: 1px solid cornflowerblue; -webkit-appearance: none; min-height: 35px; padding: 5px 10px; font-size: 16px; min-width: 95px; }
.answer-clicker-input { width: 60px; text-align: center; }
body.dark .answer-input { background: inherit !important; color: black !important; border: 1px solid cornflowerblue !important; }
.answer-stars { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; width: 100%; padding: 4px; }
.answer-star { width: 25px; height: 25px; background-image: url(img/star.svg); background-size: cover; margin: 7px; }
.star-1m { margin-left: 0; }
.answer-star.on { background-image: url("img/superstar.svg"); }
.answer-block-closed { max-height: 0; overflow: hidden; transition: all 0.2s ease; }
.answer-block-closed.open { max-height: 300px; }

/* ============================================
   7. ВАЛИДАЦИЯ И ЗВОНКИ
   ============================================ */
.validation { width: 100%; max-width: 450px; position: fixed; transform: translate(0, 120vh); box-sizing: border-box; z-index: 9999; border-top-left-radius: 25px; border-top-right-radius: 25px; height: 120vh; background: white; padding: 10px 5px; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: center; }
.validation.open { transition: all 0.3s ease; box-shadow: 0px -5px 10px 2px rgba(170, 173, 176, 0.2); z-index: 99999; }
.validation-box { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: center; width: 100%; }
.validation-string { text-align: center; margin: 12px; font-size: 110%; border-bottom: 1px solid gainsboro; width: 100%; padding-bottom: 15px; }
.validation-box .headstring { font-size: 110%; font-weight: 500; position: relative; border-bottom: none; }
.validation-box-closer { position: absolute; width: 30px; height: 30px; right: 15px; top: -10px; cursor: pointer; }
.validation-call { width: 280px; border-radius: 30px; height: 60px; border: 1px solid palegreen; background: #ffffff; font-weight: 500; font-size: 110%; display: flex; justify-content: center; align-items: center; letter-spacing: 2px; margin-bottom: 20px; box-shadow: 2px 2px 5px #d9d9d9, -2px -2px 5px #ffffff; cursor: pointer; }
.validation-call a { text-decoration: none; color: inherit; }
.validation-call a img { width: 18px; position: relative; top: 4px; right: 10px; }
.validation-call.used { background: linear-gradient(145deg, #e6e6e6, #ffffff); box-shadow: 2px 2px 5px #d9d9d9, -2px -2px 5px #ffffff; }
.validation-call.pressed { box-shadow: inset 2px 2px 5px #d9d9d9, inset -2px -2px 5px #ffffff; }
.validation-close { width: 100%; text-align: center; padding: 15px 0 50px 0; font-size: 90%; font-weight: 600; border-bottom: none; }
.validation-callcode { border: 0 solid transparent; outline: none !important; font-size: 20px; text-align: center; letter-spacing: 5px; width: 100px; box-sizing: border-box; -webkit-appearance: none; }

.callee-box { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around; align-items: center; font-size: 65%; width: 100%; margin-bottom: 10px; }
.callee-box div { cursor: pointer; color: grey; padding: 4px 5px; }
.callee-box div.on { border: 1px solid grey; border-radius: 8px; }
.tel-call-phones { width: 100%; text-align: center; transition: all 0.3s ease-in; max-height: 0px; overflow: hidden; cursor: pointer; height: 30px; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around; align-items: center; }
.tel-call-phones.open { max-height: 70px; }
.tel-call-phones-div { color: cornflowerblue; }
.call-request-buttons { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; align-items: flex-start; margin-top: 20px; background: inherit; width: 100%; }
.call-request-buttons-but { margin: 5px 3px; font-size: 75%; max-width: 120px; border-radius: 4px; background: inherit; cursor: pointer; text-align: center; padding: 4px; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: space-around; align-items: center; }
.call-request-buttons-but:active { background: white; }
.call-request-buttons-but.on { box-shadow: inset 1px 1px 2px #c8c8c8, inset -1px -1px 2px #ffffff; }

/* ============================================
   8. КОММЕНТАРИИ, JSON И ИСТОРИЯ
   ============================================ */
.question { border: 1px solid gainsboro; border-radius: 15px; color: gainsboro; padding: 1px 7px; margin-left: 8px; cursor: pointer; }
.admin-comment-box { border-top: 1px solid gainsboro; padding: 10px; background: #f7e4ef; overflow: hidden; transition: max-height 0.2s ease; }
.admin-comment-input { width: 100%; padding: 8px; border: 1px solid gainsboro; -webkit-appearance: none; }
.pinky { color: #e75454; }

.order-json-box-opener { color: cornflowerblue; border-bottom: 1px dashed cornflowerblue; margin: 5px 0; display: inline-block; cursor: pointer; font-size: 90%; }
.order-json-text { height: auto; max-height: 0px; overflow: hidden; transition: max-height 0.5s; }
.order-json-text.open { max-height: 1000px; }

.comments-client { width: 100%; padding: 5px; margin-top: 20px; }
.comment-client { width: 100%; padding: 5px; border-radius: 5px; -webkit-appearance: none; border: 1px solid gainsboro; }
.comments-box { padding: 5px; transition: all 0.3s ease; max-height: 200px; }
.comments-box.hiden { display: none; }
.comments-client-opener { font-size: 75%; margin-left: 10px; color: cornflowerblue; width: 100%; text-align: center; cursor: pointer; }
.inline-comment-textarea { font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.4; padding: 8px 10px; min-height: 54px; border: none; resize: vertical; background-color: #f7f7f7; }
.inline-comment-textarea:focus { background-color: #fff; box-shadow: 1px 1px 4px 0px #73b7f1; }

.last-orders { display: flex; flex-direction: column; overflow-y: auto; width: 100%; padding: 10px 10px 90px 10px; background: white; border-radius: 3px; margin-top: 15px; }
.last-orders-button { text-align: center; }
.last-orders-opener { cursor: pointer; text-align: center; color: cornflowerblue; border-bottom: 1px dashed cornflowerblue; margin-top: 25px; display: inline-block; }
.last-orders-zakaz { display: flex; flex-direction: column; padding: 10px 15px; margin-top: 25px; border-radius: 5px; font-weight: 500; background: whitesmoke; cursor: pointer; }

/* ============================================
   9. РАСКРЫВАЮЩИЕСЯ БЛОКИ (Accordion)
   ============================================ */
.stand-box { max-height: 0px; overflow: hidden; transition: max-height 0.2s ease; font-weight: 400; border: none; cursor: pointer; }
.stand-box.open { max-height: 1000px; padding: 10px; }
.change-box { padding: 15px; min-height: 54px; }
.worktime-edit { font-size: 80%; color: grey; cursor: pointer; }
.zagorod-km-spoiler { transition: all 0.3s ease; overflow: hidden; max-height: 300px; margin-top: 5px; }
.zagorod-km-spoiler.hide { max-height: 0px; }

details { border-bottom: 1px solid #e5e7eb; }
details:last-of-type { border-bottom: none; }
details > summary { list-style: none; cursor: pointer; outline: none; display: flex; justify-content: space-between; align-items: center; user-select: none; }
details > summary::-webkit-details-marker { display: none; }
.summary-left { display: flex; flex-direction: column; gap: 4px; }
.tariff-name { font-weight: 500; display: flex; align-items: center; gap: 8px; }
.badge { font-size: 12px; font-weight: 500; padding: 2px 6px; border-radius: 4px; display: inline-block; width: fit-content; }
.badge-warning { background-color: #fef3c7; color: #d97706; }
.badge-success { background-color: #d1fae5; color: #059669; }
.summary-right { display: flex; align-items: center; gap: 12px; }
.summary-buttons { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; }
.summary-btn { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; padding: 6px 10px; font-size: 12px; border-radius: 10px; border: 1px solid #e1e0e0; margin: 0px 3px; cursor: pointer; }
.main-price { font-weight: 600; text-align: right; }
.main-price span { display: block; color: #6b7280; font-weight: 400; margin-top: 2px; }
.chevron { width: 20px; height: 20px; fill: none; stroke: #9ca3af; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s ease; }
details[open] .chevron { transform: rotate(180deg); }
.details-content { padding: 0 8px; font-size: 14px; background-color: #ffffff; border-radius: 12px; margin-bottom: 10px; animation: fadeIn 0.3s ease-in-out; }

/* ============================================
   10. СТОИМОСТЬ, ОПЛАТА И БАЛАНС
   ============================================ */
.total-cost-box { position: relative; width: 100%; margin-top: 20px; border-radius: 5px; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center; }
.total-cost-text { color: #c39615; font-weight: 600; width: 100%; }
.total-cost-pay-box { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center; margin: 10px 0; width: 100%; }
.total-cost-pay-box > div { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; width: 100%; min-height: 46px; border: 1px solid gainsboro; border-radius: 5px; padding: 5px; margin: 10px 0; cursor: pointer; box-shadow: 0px 3px 2px rgba(182, 185, 187, 0.2); }
.total-cost-pay-box > div > div { margin: 3px; text-align: center; font-size: 14px;}

.payment-card span.fee-badge { font-size: 10px; color: #b45309; background-color: #ffedd5; padding: 2px 6px; border-radius: 4px; margin-top: 6px; font-weight: 500; }
.payment-radio:checked + .payment-card span.fee-badge { background-color: #fcd34d; color: #92400e; }
.payment-card:hover { border-color: #d0d0d0; background-color: #fafafa; }
.payment-card-span { font-size: 12px; line-height: 1.2; color: #333; }

.b2b-payment-badge { background-color: #f8f9fa; border: 1px solid #e0e0e0; border-radius: 8px; padding: 16px; display: flex; align-items: center; gap: 12px; display: none; }
.b2b-payment-badge.active { display: flex; }
.b2b-payment-badge .icon-box { width: 32px; height: 32px; background-color: #e2e8f0; border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.b2b-payment-badge .icon-box svg { width: 18px; height: 18px; fill: #475569; }
.b2b-text-content { display: flex; flex-direction: column; }
.b2b-title { font-size: 14px; font-weight: 500; color: #333; }
.b2b-subtitle { font-size: 12px; color: #888; margin-top: 2px; }

.payment-radio:disabled + .payment-card { cursor: not-allowed; opacity: 0.6; }
.payment-radio:disabled + .payment-card:hover { background-color: #ffffff; border-color: #e0e0e0; }
.payment-radio:checked:disabled + .payment-card { background-color: #fef1b8; border-color: #fde047; opacity: 0.9; }

.payment-block { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.open .payment-block { padding: 16px; }
.payment-block-inside { background: #d3fbd4; border-radius: 12px; display: flex; justify-content: space-between; align-items: center; width: 100%; max-height: 0px; }
.open .payment-block-inside { padding: 16px; max-height: 1000px; }
.payment-details { flex-grow: 1; }
.payment-label { font-size: 12px; color: #065F46; margin-bottom: 8px; font-weight: 500; }
.inline-edit-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.inline-input-wrapper { display: flex; align-items: center; background: rgba(255, 255, 255, 0.6); border: 1px solid #6EE7B7; border-radius: 6px; padding: 4px 8px; transition: all 0.2s; }
.inline-input-wrapper:focus-within { background: #fff; border-color: #059669; box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2); }
.inline-input { width: 32px; border: none; background: transparent; font-size: 16px; font-weight: 700; color: #064E3B; text-align: right; outline: none; padding: 0; -moz-appearance: textfield; }
.inline-input::-webkit-outer-spin-button, .inline-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.inline-input.w-kms { width: 40px; }
.inline-unit { font-size: 14px; font-weight: 500; color: #065F46; margin-left: 4px; }
.payment-total-box { text-align: right; padding-left: 16px; }
.worktime-cost { font-size: 24px; line-height: 1; }
.currency { font-size: 14px; font-weight: 600; color: #065F46; }

.money-history-input { padding: 8px; border-radius: 5px; border: 1px solid grey; font-size: 16px; margin: 8px 0; width: 100%; }
.money-direction { border-bottom: 4px solid gainsboro; width: 120px; border: 1px solid gainsboro; overflow: hidden; font-size: 90%; text-align: center; color: grey; border-radius: 5px; border-bottom: 4px solid gainsboro; cursor: pointer; height: 36px; }
.money-direction.used { color: black; border: 1px solid black; border-bottom: 1px solid black; border-top: 2px solid grey; }
.money-direction.plus.used { background: #cbe791; }
.money-direction.minus.used { background: #f7cad2; }
.money-history-operation { cursor: pointer; border-bottom: 3px solid grey; overflow: hidden; }
.money-history-operation.used { border-top: 2px solid grey; border-bottom: 1px solid grey; }
.cost-loading { opacity: 0.4; transition: opacity 0.2s; }

/* ============================================
   11. АУКЦИОН И ПОЗЫВНЫЕ
   ============================================ */
.auction-box { width: 100%; display: flex; flex-direction: column; margin: 20px 0; background: #d7edff; padding: 5px; border-radius: 5px; }
.auction-str { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: baseline; font-size: 90%; width: 100%; }
.auction-str > div { margin: 3px; }
.auction-name { text-align: center; width: 100%; }
.auction-title { font-weight: 500; }
.a-t-poz { width: 40px; }
.a-t-cost { min-width: 40px; width: 70px; }
.a-t-comment { flex-grow: 1; max-width: 200px; word-wrap: break-word; word-break: normal; line-break: auto; hyphens: manual; width: 100px; }
.a-t-action {  margin-left: 10px; }
.a-t-action.but {  text-align: center; color: cornflowerblue; font-weight: 500; font-size: 12px; border: 1px solid; overflow: hidden; padding: 6px;}
.auction-opener { width: 100%; text-align: center; font-size: 90%; color: cornflowerblue; padding: 5px; margin-top: 10px; cursor: pointer; }
.delete-from-auction { padding: 5px 0; color: #2b2c2e; font-size: 80%; text-decoration: underline; }

.appoint-wrapper { display: flex; flex-direction: row; align-items: center; }
.search-poz-btn { padding: 0 6px; height: 30px; margin-left: 8px; cursor: pointer; display: flex; justify-content: center; align-items: center; border: 1px solid #ccc; border-radius: 5px; background: #f0f0f0; font-size: 12px; -webkit-user-select: none; -ms-user-select: none; user-select: none; }
.search-poz-btn:hover { background: #e0e0e0; }
.callsign-search-dialog { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1000000; display: flex; justify-content: center; align-items: center; padding: 15px; }
.callsign-search-container { width: 100%; max-width: 400px; background: #fff; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; max-height: 80vh; }
.callsign-search-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 15px; border-bottom: 1px solid #eee; font-weight: 600; font-size: 18px; }
.callsign-search-close { cursor: pointer; font-size: 24px; font-weight: 300; color: #888; }
.callsign-search-body { padding: 15px; display: flex; flex-direction: column; overflow: hidden; }
.callsign-search-input { width: 100%; padding: 12px; font-size: 16px; border: 1px solid #ccc; border-radius: 5px; margin-bottom: 15px; -webkit-appearance: none; }
.callsign-search-results { overflow-y: auto; flex-grow: 1; }
.callsign-result-item { padding: 12px 10px; border-bottom: 1px solid #f0f0f0; cursor: pointer; }
.callsign-result-item:hover { background: #f5f5f5; }
.callsign-result-item:last-child { border-bottom: none; }
.callsign-result-fio { font-weight: 500; font-size: 15px; }
.callsign-result-info { font-size: 13px; color: #666; margin-top: 2px; }
.callsign-no-results { padding: 20px; text-align: center; color: #888; }
.call-to-poz { padding: 4px; text-align: center; box-shadow: 1px 1px 2px #c8c8c8, -1px -1px 2px #ffffff; border-radius: 10px; }
.call-to-poz:active { box-shadow: inset 1px 1px 2px #c8c8c8, inset -1px -1px 2px #ffffff; }

/* ============================================
   12. ПОДСКАЗКИ АДРЕСОВ (DADATA)
   ============================================ */
.suggestions-nowrap { white-space: nowrap; }
.suggestions-input { -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; }
.suggestions-input::-ms-clear { display: none; }
.suggestions-wrapper { position: relative; margin: 0; padding: 0; vertical-align: top; -webkit-text-size-adjust: 100%; }

.suggestions-suggestions { background-color: #F2F2F6; border: none; border-radius: 5px; padding: 8px; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; cursor: default; left: -8%; min-width: 116%; position: absolute; z-index: 9999; -webkit-text-size-adjust: 100%; }
.suggestions-suggestions strong { font-weight: 400; color: #39f; }
.suggestions-suggestions.suggestions-mobile { border-style: none; }
.suggestions-suggestions.suggestions-mobile .suggestions-suggestion { border-bottom: 1px solid #ddd; }

.suggestions-suggestion { margin: 6px; padding: 10px; background: white; border-radius: 5px; overflow: hidden; }
.suggestions-suggestion:hover { background: lightskyblue; }
.suggestions-selected { background: lightskyblue; }
.suggestions-selected:hover { background: lightskyblue; }

.suggestions-hint { padding: 4px 4px; white-space: nowrap; overflow: hidden; color: #777; font-size: 85%; line-height: 20px; display: none; }
.suggestions-subtext { color: #777; }
.suggestions-subtext_inline { display: inline-block; min-width: 6em; vertical-align: bottom; margin: 0 .5em 0 0; }
.suggestions-subtext-delimiter { display: inline-block; width: 2px; }
.suggestions-subtext_label { margin: 0 0 0 .25em; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 0 3px; background: #f5f5f5; font-size: 85%; }
.suggestions-value[data-suggestion-status=LIQUIDATED] { position: relative; }
.suggestions-value[data-suggestion-status=LIQUIDATED]:after { position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid rgba(0, 0, 0, .4); content: ""; }
.suggestions-promo { font-size: 85%; display: none; color: #777; padding: 4px; text-align: center; }
.suggestions-promo a { color: #777; display: block; filter: grayscale(100%); line-height: 20px; text-decoration: none; }
.suggestions-promo a:hover { filter: grayscale(0); }
.suggestions-promo svg { height: 20px; vertical-align: bottom; }
@media screen and (min-width: 600px) { .suggestions-promo { position: absolute; top: 0; right: 0; text-align: left; } }

/* ============================================
   13. РЕЙТИНГ, ОЦЕНКИ И ИНФОГРИД
   ============================================ */
.order-stars-box { width: 100%; max-width: 500px; overflow: hidden; transition: all 0.4s ease; max-height: 0; padding: 0; border: none; }
.order-stars-box.show { max-height: 300px; padding: 15px 5px 15px 10px; margin-top: 0; }
.order-stars { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 8px; width: 100%; padding: 4px; }
.order-star { font-size: 32px; width: 22px; height: 22px; background-image: url(/img/star.svg); background-size: cover; cursor: pointer; transition: color 0.2s; line-height: 1; color: var(--star-inactive); }
.star-1 { margin-left: 0; }
.order-star.on, .order-star:hover, .order-star:hover ~ .order-star { background-image: url("/img/superstar.svg"); color: var(--star-active); }
.order-stars.has-rating .order-star.active, .order-stars.has-rating .order-star.active ~ .order-star { color: var(--star-active); }

.order-star-warning { width: 25px; height: 22px; background-image: url(/img/warning.svg); background-size: cover; margin-left: 10px; cursor: pointer; }
.order-star-warning.on { background-image: url(/img/superwarning.svg); }

.order-estimation-box { width: 100%; overflow: hidden; transition: all 0.4s ease; max-height: 0; padding: 0; margin: 0; animation: fadeIn 0.3s ease; }
.order-estimation-box.show { max-height: 200px; padding: 4px; margin-top: 8px; }
.order-estimation { width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: 8px; padding: 12px; font-family: inherit; font-size: 14px; resize: vertical; min-height: 80px; margin-bottom: 12px; outline: none; transition: border-color 0.2s; }
.order-estimation:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1); }
.order-estimation-ok { width: 100%; background-color: var(--primary); color: white; border: none; border-radius: 8px; padding: 12px; font-size: 15px; font-weight: 600; cursor: pointer; transition: background-color 0.2s; text-align: center; }
.order-estimation-ok:hover { background-color: var(--primary-hover); }
.order-estimation-ok:active { box-shadow: 0 -1px grey inset; }
.order-estimation-opener { font-size: 75%; font-weight: 500; margin-bottom: 10px; cursor: pointer; text-align: center; }
.order-estimation-opener img { position: relative; top: 7px; transition: all 0.2s ease; }
.rating-label { font-size: 14px; font-weight: 600; margin-bottom: 12px; text-align: center; }

.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 2px; background: whitesmoke; border-radius: 8px; padding: 16px; }
.info-block { display: flex; flex-direction: column; gap: 4px; }
.info-label { font-size: 12px; color: var(--text-muted); }
.info-value { font-size: 14px; font-weight: 500; }

/* ============================================
   14. ПАДЖИНАЦИЯ, МЕНЮ И ПРОЧИЕ
   ============================================ */
.page { position: absolute; width: 100%; height: 100%; display: none; padding: 5px; }
.page-close { text-align: right; font-size: 25px; width: 100%; padding: 0 10px; display: flex; justify-content: space-between; cursor: pointer; }
.sub-menu-item { margin-left: 5%; width: 85%; height: 48px; min-height: unset; }

.props-box { display: flex; flex-direction: column; color: grey; font-weight: 400; margin-top: 3px; margin-bottom: 10px; }
.props-str { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; margin-top: 3px; }
.props-str.total-tarif { color: black; font-weight: 500; display: none; }
.props-middle { flex-grow: 1; border-bottom: 1px dashed grey; margin: 10px 6px 0 6px; }
.props-right { }

/* ============================================
   15. АНИМАЦИИ И УВЕДОМЛЕНИЯ
   ============================================ */
@keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes clockwise { to { transform: rotate(360deg) translatez(0); } }

.css-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; }
.price-preloader { position: absolute; top: 0; left: 0; width: 100%; bottom: 0; background: #f7f7f7; opacity: 0.7; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; }

.alarm { font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; position: fixed; top: 0px; width: 70%; left: 15%; overflow: hidden; max-height: 440px; transition: all 0.3s ease; z-index: 9999; text-align: center; background: #90EE90; color: black; border-radius: 8px; transform: translate(0, -250px); padding: 30px 0px; }
.alarm.open { transform: translate(0, -10px); }
.alarm.error { background: pink; color: red; }
.alarm.notice { background: #FFE598; color: black; }
.alarm-new { font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; width: 90%; max-width: 400px; position: fixed; box-sizing: border-box; z-index: 9999; border-radius: 20px; padding: 20px; background: #c9e5c9; bottom: -20px; left: 5%; }
.alarm-new.open { -webkit-box-shadow: 0px -5px 10px 2px rgba(170, 173, 176, 0.2); -moz-box-shadow: 0px -5px 10px 2px rgba(170, 173, 176, 0.2); box-shadow: 0px -5px 10px 2px rgba(170, 173, 176, 0.2); bottom: 20px; }
.alarm-new.error { background: pink; color: red; }
.alarm-new.notice { background: #FFE598; color: black; }
.alarm-box { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; width: 100%; }

.ios-preloader { width: 0; height: 0; animation: clockwise 1s steps(8, end) infinite; margin-right: 10px; }
.ios-preloader div { width: 4px; height: 20px; margin-top: calc(-20px/2); margin-left: calc(-4px/2); position: absolute; }
.ios-preloader div:before, .ios-preloader div:after { background-color: rgba(0, 0, 0, 0.2); display: block; position: absolute; width: 100%; height: 25%; content: ''; box-sizing: border-box; }
.ios-preloader div:before { border-radius: 6px 6px 0 0; top: 0; }
.ios-preloader div:after { border-radius: 0 0 6px 6px; bottom: 0; }
.ios-preloader div:nth-of-type(1):after { background-color: rgba(0, 0, 0, 0.625); }
.ios-preloader div:nth-of-type(2) { transform: rotate(45deg) translatez(0); }
.ios-preloader div:nth-of-type(2):after { background-color: rgba(0, 0, 0, 0.75); }
.ios-preloader div:nth-of-type(3) { transform: rotate(90deg) translatez(0); }
.ios-preloader div:nth-of-type(3):after { background-color: rgba(0, 0, 0, 0.875); }
.ios-preloader div:nth-of-type(4) { transform: rotate(135deg) translatez(0); }
.ios-preloader div:nth-of-type(4):after { background-color: white; }
.menu-div-balance .ios-preloader { margin-right: 0 !important; }
.menu-div-balance .ios-preloader div:before, .menu-div-balance .ios-preloader div:after { background-color: rgba(150, 150, 150, 0.4); }
.menu-div-balance .ios-preloader div:nth-of-type(1):after { background-color: rgba(100, 100, 100, 0.7); }
.menu-div-balance .ios-preloader div:nth-of-type(2):after { background-color: rgba(100, 100, 100, 0.8); }
.menu-div-balance .ios-preloader div:nth-of-type(3):after { background-color: rgba(100, 100, 100, 0.9); }
.menu-div-balance .ios-preloader div:nth-of-type(4):after { background-color: #888; }

/* ============================================
   16. МЕДИАЗАПРОСЫ
   ============================================ */
@media screen and (max-height: 460px) {
    .dialog-done-box { display: none; }
}

@media screen and (max-width: 340px) {
    body { font-size: 90%; }
}

@media screen and (min-width: 867px) {
    body { font-size: 90%; }
    .zakaz-container { max-height: 2500px; }
    .zakaz-container-opener { display: none; }
    .wrap.new-order { flex-direction: column; max-width: 450px; }
}

@media screen and (min-width: 981px) {
    .top-container { margin-right: 80px; }
}