@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('bootstrap.css');
@import url('icons.css');
@import url('cropper.min.css');

:root {
  --bg-main-color: #17212b;
  --icon-color: #454753;
  --bg-map: #17212b;
  --box-shadow: 0 12px 16px -4px rgba(36, 57, 117, .08), 0 0 12px -4px rgba(36, 57, 117, .12);
  --input-bg: #111921;
  --input-bg-hover: #111921;
  --input-text: #e9eaea;
  --text-color: #e9eaea;
  --btn-order: #ffe13b;
  --btn-order-dark: #eed339;
  --btn-order-text: #33353c;
  --tariff-checked: #ffc700;
  --tariff-checked-bg: rgba(255, 248, 221, 0.1);
  --btn-input: #834cf1;
  --btn-input-text: #ffffff;
  --close-input: #cfcfcf;
  --radio-bg: #d4e5ff;
  --border-color: #111921;
}

body, html {margin: 0;padding: 0;height: 100%;overflow: hidden;font-family: 'Roboto', sans-serif;font-size: 1rem;color: var(--text-color);background: var(--bg-main-color);}

.container-page {display: flex;flex-direction: column;height: 100%;}
#map {flex: 1;flex-shrink: 0;width: 100%;background-color: var(--bg-map)!important;}
#map .gm-style .gm-style-cc {display: none !important;}
.order {flex-shrink: 0;background: var(--bg-main-color);padding: 1.5rem;overflow-y: auto;box-sizing: border-box;box-shadow: var(--box-shadow);max-height: calc(100vh - 150px);margin-top: -1.5rem;border-top-left-radius: 1rem;border-top-right-radius: 1rem;position: relative;}
.order-address {flex-shrink: 0;background: var(--bg-main-color);padding: 1.5rem;overflow-y: auto;box-sizing: border-box;z-index: 1;max-height: 100%;}
.order-address .address-title {margin-bottom: 1.5rem;}
.order-address .map-icon-address {background: var(--input-bg);border: 0px;color: #834cf1;}
.order-address .address-list p {margin-bottom: 0rem;font-size: 0.8rem;font-weight: 400;color: #708499;}
.order-address .address-list .name-address {font-size: 0.95rem;font-weight: 500;}
.order-address .address-list .icon-address {margin-right: 1rem;background: var(--input-bg);padding: 0.6rem 0.8rem;border-radius: 0.5rem;color: #708499;}
.google-maps-street-list {margin-top: 1rem;}
.google-maps-street-list p {margin-bottom: 0rem;font-size: 0.75rem;}
.google-maps-street-list .name-address {font-size: 0.9rem;}
.google-maps-street-list .icon-address {margin-right: 1rem;background: var(--input-bg);padding: 0.6rem 0.8rem;border-radius: 0.5rem;color: #708499;}
.google-maps-street-list .list-address {border-bottom: 1px solid var(--input-bg);padding-bottom: 1rem;margin-bottom: 1rem;}
.google-maps-street-list .list-address:last-child {border: 0px;padding-bottom: 0px;margin-bottom: 0px;}
.input-street .mapline {height: 51px;position: absolute;z-index: 1;margin-left: 7px;margin-top: -82px;border-right: 1px dashed var(--icon-color);}
.input-street .map-icon-address i {color: var(--icon-color);}
.input-street .form-control {border-radius: 0.5rem!important;font-weight: 500;}
.input-street .map-icon-address {padding-left: 0px!important;}
.input-street .input-group-text {background: var(--bg-main-color);border: none;}
.btn {box-shadow: none !important;border: 0px;}
.form-control:disabled {background: var(--border-color);}
.form-control, .btn-close, .form-check-input {box-shadow: none !important;border: 0px;}
.form-select, .form-check-input, .form-range {box-shadow: none !important;}
.btn:focus, .form-control:focus, .form-range:focus {box-shadow: none !important;border: 0px;}
.form-control {background: var(--input-bg);border: none;color: var(--input-text)!important;}
.form-control:focus {background: var(--input-bg-hover);border: 0px;}
.form-floating>.form-control-plaintext~label::after,.form-floating>.form-control:focus~label::after,.form-floating>.form-control:not(:placeholder-shown)~label::after,.form-floating>.form-select~label::after {background-color: var(--input-bg);}
.form-floating label {color: var(--input-text)!important;}
.input-street-stop .form-control {border-top-right-radius: 0px!important;border-bottom-right-radius: 0px!important;}
.nav-menu {position: absolute;top: 0;left: 0;right: 0;z-index: 1;padding: 1.5rem;display: flex;align-items: center;}

.btn-menu, .btn-menu:hover, .btn-menu:focus {background: #17212b!important;color: var(--input-text)!important;box-shadow: var(--box-shadow)!important;margin-right: 1.5rem;}
.btn-menu-right, .btn-menu-right:hover, .btn-menu-right:focus {background: #17212b!important;color: var(--input-text)!important;box-shadow: var(--box-shadow)!important;margin-left: 1.5rem;}
.btn-taximeter, .btn-taximeter:hover, .btn-taximeter:focus {background: var(--bg-main-color)!important;color: var(--input-text)!important;box-shadow: var(--box-shadow)!important;}
.btn-taximeter.active {background: #26af4f!important;color: #fff!important;}
.btn-stop-del, .btn-stop-del:hover, .btn-stop-del:focus {background: var(--input-bg-hover)!important;color: #708499;}
.btn-stop, .btn-stop:hover, .btn-stop:focus {background: var(--input-bg-hover)!important;border-radius: 0.5rem!important;margin-left: 1rem!important;color: #708499;}
.btn-order, .btn-order:hover, .btn-order:focus {background: var(--btn-order)!important;border-radius: 0.5rem!important;color: var(--btn-order-text)!important;font-size: 1.1rem;font-weight: 500;}
.btn-entrance {background: var(--input-bg);padding: 0.4rem 0.7rem;border-radius: 0.5rem;font-size: 0.75rem;color: var(--input-text)!important;}
.btn-plus {background: rgba(137, 80, 252, 0.1)!important;color: #834cf1!important;border: 0px;margin: 0rem 0.5rem!important;padding: 0.3rem 0.9rem;border-radius: 0.5rem!important;}
.btn-plus:disabled {background: #111921!important;color: #454753!important;}
.btn-order-now, .btn-order-now:hover, .btn-order-now:focus {background: var(--btn-order)!important;color: var(--btn-order-text)!important;font-size: 1.1rem;font-weight: 500;border-right: 1px solid var(--btn-order-dark)!important;padding: 1rem 0.5rem;}
.btn-order-time, .btn-order-time:hover, .btn-order-time:focus {background: var(--btn-order)!important;color: var(--btn-order-text)!important;font-size: 1.1rem;font-weight: 500;border-left: 1px solid var(--btn-order-dark)!important;padding: 1rem;}
.close-address, .close-address:hover, .close-address:focus {background: var(--input-bg)!important;color: var(--input-text)!important;}
.btn-input, .btn-input:hover, .btn-input:focus {background: var(--btn-input)!important;color: var(--btn-input-text)!important;}
.btn-input:disabled {background: var(--input-bg)!important;color: var(--input-text)!important;}
.close-input, .close-input:hover, .close-input:focus {background: var(--input-bg)!important;color: #708499!important;}

.btn-geo, .btn-geo:hover, .btn-geo:focus {background: rgba(137, 80, 252, 0.1)!important;color: #834cf1!important;font-size: 0.85rem;padding: 0.7rem 0.5rem;border-radius: 0.5rem;}
.btn-map, .btn-map:hover, .btn-map:focus {background: rgba(255, 248, 221, 0.1)!important;color: #ffc700!important;font-size: 0.85rem;padding: 0.7rem 0.5rem;border-radius: 0.5rem;}

.order-street .input-group-text {background: var(--input-bg);}
.order-street .map-icon-address {padding-left: 1rem!important;}
.order-street .mapline {height: 34px;position: relative;z-index: 1;left: -5px;margin-top: -34px;border-right: 2px dashed var(--icon-color);}
.order-street i {color: var(--icon-color);}
.order-street .street {font-size: 0.9rem;font-weight: 400;}
.order-street .city {font-size: 0.85rem;font-weight: 500;}
.order-price {border-bottom: 1px solid var(--input-bg);padding-bottom: 1rem;}
.order-price .form-control, .order-price .input-group-text {border: 0px;padding: 0px;background: none;color: var(--text-color);font-size: 1.5rem;font-weight: bold;}
.order-price .input-group-text {margin-left: -0.5rem!important;}
@supports (-webkit-overflow-scrolling: touch) {
  .order-price .input-group-text {
    margin-left: 0.75rem !important;
  }
}

.order-info .info-list {font-size: 0.95rem;}
.order-info .info-list i {color: #834cf1;margin-right: 0.3rem;}
.order-info .info-price {background: #111921;padding: 0.5rem;border-radius: 0.5rem;font-size: 0.7rem;}
.order-pay .btn {border-radius: 0.5rem;padding: 0.5rem;font-size: 0.7rem;color: var(--text-color);border: 1px solid var(--input-bg);}
.order-pay .btn-check:checked+.btn {background: var(--input-bg);border: 1px solid var(--input-bg);z-index: 0;}
.order-pay .btn-check+.btn:hover {border: 1px solid var(--input-bg);color: var(--text-color);}
.btn-order-plus {width: 100%;padding: 0.5rem;background: var(--input-bg)!important;font-size: 0.8rem;color: var(--input-text);}
.btn-order-plus p {margin-bottom: 0px;}

.tariffs-container { overflow-x: auto; padding: 1.5rem; margin: 0 -1.5rem; padding-bottom: 0; }
.tariffs-container::-webkit-scrollbar { display: none; }
.tariffs-container .d-flex { flex-wrap: nowrap; gap: 1rem; position: relative; }
.tariffs-container .d-flex::after { content: ""; flex: 0 0 0.5rem; }
.tariff-label { display: flex; align-items: center; text-align: left; flex: 0 0 auto; max-width: 100%; cursor: pointer; border: 1px solid var(--border-color); border-radius: 0.5rem; overflow: hidden; transition: border-color .3s, box-shadow .3s; padding: 0.5rem 1rem; }
.tariff-label img { flex: 0 0 60px; width: 60px; height: auto; object-fit: contain; margin-right: .5rem; }
.tariff-label .card-body { flex: 1; padding: .5rem 0; }
.tariff-label .card-title { font-size: .9rem; margin-bottom: .25rem; }
.tariff-label .card-text { margin: 0; font-size: .8rem; }
.passenger-count { font-size: .7rem; }
.btn-check:checked + .tariff-label { border-color: var(--tariff-checked); background-color: var(--tariff-checked-bg);color: #fff;}
.btn-check:disabled + .tariff-label { opacity: 0.5; cursor: not-allowed; }
.btn-check:disabled + .tariff-label * { pointer-events: none; }

.alert-yellow {background: #ffc700;padding: 0.45rem;flex: 1;min-width: 0;font-size: 0.9rem;border-radius: 0.5rem;box-shadow: var(--box-shadow) !important;color: #33353c;}
.alert-yellow i {margin-right: 0.3rem;}

.custom-label {position: absolute;background: #232e3c;color: var(--input-text)!important;padding: 0.5rem;border-radius: 0.5rem;font-size: 0.8rem;white-space: nowrap;transform: translate(-50%, 10%);pointer-events: none;box-shadow: var(--box-shadow)!important;}
.custom-label h6 {margin: 0;font-size: 0.7rem;font-weight: bold;}
.custom-label p {margin: 0;font-size: 0.65rem;}
.form-select, .form-select:focus {border-color: var(--input-bg);}
.modal-title {font-size: 1.1rem;}
.modal-content {border: 0px;border-radius: 0.5rem;box-shadow: var(--box-shadow)!important;}
.modal-close {background: var(--input-bg)!important;color: var(--input-text)!important;}
.col-address {padding: 0px;}
.radio-item input[type="radio"] {display: none;}
.radio-label {display: block;width: 100%;padding: 1rem;border: 2px solid var(--border-color);border-radius: 0.5rem;transition:background-color 0.2s,color 0.2s,border-color 0.2s;cursor: pointer;color: var(--input-text)!important;}
.radio-label i {color: var(--icon-color)!important;}
.radio-title {font-size: 1rem;font-weight: bold;margin-bottom: 0.25rem;}
.radio-subtitle {font-size: 0.875rem;}
.radio-item input[type="radio"]:checked + .radio-label {background-color: rgba(137, 80, 252, 0.1)!important;border-color: var(--btn-input)!important;color: var(--btn-input)!important;}
.radio-item input[type="radio"]:checked + .radio-label i {color: var(--btn-input)!important;}
.radio-label:disabled {opacity: 0.1;}
.radio-item input[type="radio"]:disabled + .radio-label {cursor: not-allowed;opacity: 0.65;}
.btn-group.w-100 {display: flex;}
.btn-group.w-100 > .btn-order-now {flex: 1 1 auto;}
.btn-group.w-100 > .btn-order-time {flex: 0 0 auto;border-top-right-radius: 0.5rem!important;border-bottom-right-radius: 0.5rem!important;}
.date-options {display: flex;gap: 0.5rem;width: 100%;}
.date-item {flex: 1;}
.date-input {display: none;}
.date-label {display: block;text-align: center;padding: 0.75rem 1rem;border: 2px solid var(--border-color);border-radius: 0.5rem;cursor: pointer;transition: background-color 0.2s, border-color 0.2s;user-select: none;font-size: 0.9rem;}
.date-input:checked + .date-label {border-color: var(--btn-input);background-color: rgba(137, 80, 252, 0.1) !important;color: #834cf1 !important;}
.time-container {margin-top: 1rem;}
.time-container label {display: block;font-weight: 600;margin-bottom: 0.25rem;}
.time-input {width: 100%;padding: 0.75rem 1rem;font-size: 1rem;border: 2px solid var(--input-bg);border-radius: 0.5rem;background-color: var(--input-bg)!important;color: var(--input-text)!important;box-sizing: border-box;transition: border-color 0.2s;}
.time-input:focus {outline: none;}

.custom-label .label-flex {display: flex;align-items: center;gap: 0.5rem;}
.custom-label .label-square {width: 24px;height: 24px;display: flex;align-items: center;justify-content: center;border-radius: 0.5rem;font-size: 0.7rem;font-weight: bold;color: #fff;flex-shrink: 0;}
.custom-label .type-1 { background-color: #27c155; } /* початок маршруту */
.custom-label .type-2 { background-color: #fec100; } /* зупинка */
.custom-label .type-3 { background-color: #178def; } /* кінець маршруту */
.custom-label .label-text h6, .custom-label .label-text p {margin: 0;line-height: 1.2;}

.col-address {min-width: 0;}
.street {display: flex;white-space: nowrap;}
.street__text {flex: 0 1 auto;min-width: 0;overflow: hidden;text-overflow: ellipsis;}
.street__entrance {flex: 0 0 auto;margin-left: 0.25rem;white-space: nowrap;}

.alert-search {text-decoration: none;display: inline-block;position: relative;overflow: hidden;background: #27c155!important;color: #fff!important;border-radius: 0.5rem;width: 100%;padding: 0.5rem;box-shadow: var(--box-shadow)!important;}
.alert-search .text {position: relative;z-index: 2;font-size: 0.9rem;}
.alert-search .progress {position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-color: #29a950;z-index: 1;transform-origin: left;transform: scaleX(1);height: 100%;border-radius: 0px;}
.driver-order {background: var(--bg-main-color);color: var(--text-color);padding: 1.5rem;box-shadow: var(--box-shadow);}
.driver-order .avatar {background: var(--input-bg);width: 60px;height: 60px;border-radius: 50%;}
.driver-order .rating {font-size: 0.95rem;font-weight: bold;}
.driver-order .rating i {color: #ecb100;}
.driver-order .no-rating {color: var(--icon-color)!important;}
.driver-order .no-rating i {color: var(--icon-color)!important;}
.driver-order p {margin-bottom: 0px;font-size: 0.9rem;}
.driver-order .number {display: inline-block;white-space: nowrap;border: 1px solid var(--input-text);padding: 0rem 0.3rem;border-radius: 0.3rem;color: var(--input-text);}
.driver-order h5 {margin-bottom: 0px;}
.car-fluid {border-radius: 0.5rem;}
.total-price {color: var(--text-color);font-size: 1.5rem;font-weight: bold;}
.btn-chat, .btn-chat:focus, .btn-chat:focus {background: var(--input-bg)!important;color: var(--input-text)!important;padding: 0.5rem 0.5rem;border-radius: 0.5rem;}
.btn-order-cancel, .btn-order-cancel:focus, .btn-order-cancel:focus {background: #ea3943!important;color: #fff!important;padding: 0.5rem 0.5rem;border-radius: 0.5rem;}
.alert-cancel {color: #ffc700!important;background: rgba(255, 248, 221, 0.1) !important;font-size: 0.8rem;padding: 0.5rem;border-radius: 0.5rem;margin-bottom: 1rem;}
.modal-body .form-select {background-color: var(--input-bg);color: var(--text-color);}
.img-status-order {width: 10rem;}
.order .completed {color: #26af4f;font-weight: normal;font-size: 1.3rem;}
.order .cancelled {color: #ea3943;font-weight: normal;font-size: 1.3rem;}
.order .rating i {font-size: 2rem;cursor: pointer;color: #ccc;}
.order .rating i.active {color: #ffc107;}
.order .rating i.hover {color: #ffc107;}
.rating-text {font-size: 0.9rem;color: #ccc;}
.review-now {background: var(--input-bg);color: var(--input-text);padding: 0.5rem;border-radius: 0.5rem;}

.chat-bottom {flex-shrink: 0;background: var(--bg-main-color);padding: 1.5rem;overflow-y: auto;box-sizing: border-box;box-shadow: var(--box-shadow);position: relative;}
.chat-box {flex: 1;flex-shrink: 0;width: 100%;background-color: var(--input-bg);padding: 1.5rem;height: auto;overflow: hidden;overflow-y: scroll;scrollbar-width: none;-ms-overflow-style: none;}
.chat-box::-webkit-scrollbar {display: none;}
.message {margin-bottom: 1rem;}
.message:last-child {margin-bottom: 0rem;}
.message a {color: #834cf1;}
.message.out {text-align: left;}
.chat-box .out .bg-message {border-radius: 0.5rem 0.5rem 0.5rem 0rem;}
.chat-box .in .bg-message {border-radius: 0.5rem 0rem 0.5rem 0.5rem;}
.chat-box .admin .bg-message {border-radius: 0.5rem 0.5rem 0.5rem 0rem;}
.chat-box .system .bg-message {border-radius: 0.5rem;}

.message.in {text-align: right;}
.message.admin {text-align: left;}
.admin .bg-message {color: #ffc700;background: rgba(255, 248, 221, 0.1);}
.system .bg-message {color: var(--text-color);background: rgba(255, 248, 221, 0.1);padding: 0.5rem;width: 100%;text-align: center;}

.bg-message {background: rgba(137, 80, 252, 0.1);padding: 0.7rem;color: #fff;}
.time-message {font-size: 0.7rem;color: var(--text-color);margin-top: 0.3rem;}
.user {background: #151d25;padding: 1.5rem;}
.user .avatar {width: 100px;height: 100px;border-radius: 50px;margin-bottom: 1.5rem;}
.user p {margin-bottom: 0px;}
.user-menu {padding: 0 1rem;}
.user-menu h6 {margin-top: 1rem;margin-bottom: 0;}
.user-menu .nav-link {padding: 1rem 0;color: var(--text-color);}
.user-menu .nav-link i {margin-right: 0.5rem;color: var(--btn-input);}
.user-menu .nav-item {border-bottom: 1px solid var(--border-color);}
.user-menu .nav-item:last-child {border: 0px;}
.user-menu  p {margin-bottom: 0rem;font-size: 0.8rem;font-weight: 400;}
.user-menu .name-address {font-size: 0.95rem;font-weight: 500;}
.user-menu .icon-address {margin-right: 1rem;background: var(--input-bg);padding: 0.6rem 0.8rem;border-radius: 0.5rem;}
.user-menu a {color: var(--text-color);text-decoration: none;}
.custom-address {margin-top: 1rem;}
.nav-add {background: var(--input-bg);margin-top: 1rem;border-radius: 0.5rem;margin-bottom: 1rem;}
.nav-add .nav-link {padding: 0.5rem;color: var(--text-color);}
.page-menu {flex: 1;flex-shrink: 0;overflow-y: auto;box-sizing: border-box;;max-height: calc(100vh - 10px);position: relative;}
#croppedResult {max-width: 100%;max-height: 300px;border: 1px solid #dee2e6;margin-top: .5rem;}
.img-container {max-height: 80vh;overflow: hidden;}
.form-avatar {padding: 0.5rem .75rem;background: var(--input-bg);border-radius: 0.5rem;padding-bottom: 0.75rem;}
.form-avatar label {font-size: 0.85rem;margin-bottom: 0.2rem;}
.form-avatar .form-control::file-selector-button, .form-avatar .form-control::file-selector-button:hover {background-color: var(--btn-input)!important;color: #fff!important;border: none;border-radius: .5rem;padding: .375rem .75rem;margin-right: 0.5rem;cursor: pointer;}
.btn-geo-marker, .btn-geo-marker:hover, .btn-geo-marker:focus {background: var(--input-bg-hover)!important;border-radius: 0.5rem!important;margin-left: 1rem!important;color: var(--btn-input)!important;padding: 0 1.2rem;}
.title-page {padding: 1.3rem;border-bottom: 1px solid var(--border-color);}
.title-page h3 {margin-bottom: 0px;}
.promocode {margin: 1.5rem;border-bottom: 1px solid var(--border-color);padding-bottom: 1.5rem;}
.promocode:last-child {border: 0;padding-bottom: 0;}
.promocode .discount {width: 6rem;padding: 1.23rem 0;font-weight: bold;font-size: 1.2rem;border: 2px dashed var(--border-color);color: #26af4f;margin-right: 1.5rem;}
.discount-info .time {font-size: 0.85rem;color: var(--btn-order-dark);}
.discount-info .time-end {color: var(--text-color);font-size: 0.85rem;}
.discount-info .promo {background: var(--input-bg);text-align: center;padding: 0.3rem 0;font-weight: 500;border: 1px solid var(--border-color);border-radius: 0.5rem;margin-bottom: 1rem;width: 100%;}
.used-code {opacity: 0.3;}
.discount-button {padding: 1.5rem;}
.alert {background: rgba(255, 248, 221, 0.1) !important;color: #ffc700 !important;}

.order-list {flex: 1;flex-shrink: 0;overflow-y: auto;box-sizing: border-box;position: relative;}
.order-list a {text-decoration: none;color: var(--input-text);}
.order-now {border-bottom: 1px solid var(--border-color);}
.order-now:last-child {border: 0;}
.order-now .title {background: var(--input-bg);padding: 1rem 1.5rem;}
.order-now .address-order {padding: 1rem 1.5rem;}
.order-now .time {font-size: 0.9rem;}
.order-now .status {font-size: 0.9rem;font-weight: 500;}
.order-now .progress-order, .order-now .progress-order i {color: var(--btn-input);}
.order-now .canceled-order, .order-now .canceled-order i {color: #ea3943;}
.order-now .completed-order, .order-now .completed-order i {color: #26af4f;}

.order-now .order-info {padding: 0 1.5rem;padding-bottom: 1.5rem;}
.order-now .display-rating i {font-size: 1.3rem;color: var(--border-color);}
.order-now .display-rating i.active {color: #ffc107;}
.order-now  .btn-order-again {padding: 0;padding-left: 0.5rem;}
.order-now  .btn-order-again i {color: var(--icon-color)!important;}
.order-now .dropdown-menu {border: 0;box-shadow: var(--box-shadow);color: var(--input-text);background: #151d25;}
.order-now .dropdown-menu i {color: var(--btn-input)!important;}

.alert-page {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(17, 25, 33, 0.85);z-index: 1000;display: flex;align-items: center;  justify-content: center;}
.alert-content {color: var(--text-color);padding: 1.5rem;}
.alert-content .img-nodriver {width: 8rem;margin-bottom: 1.5rem;}
.alert-content .img-banned {width: 12rem;margin-bottom: 1.5rem;}
.alert-content .img-welcome {width: 8rem;margin-bottom: 1.5rem;}
.alert-content .link {text-decoration: none;color: var(--input-text);border-bottom: 1px solid var(--input-text);}
.alert-content .img-fluid {border-radius: 0.5rem;}
.alert-content p {margin-bottom: 0;}

.modal-content {background-color: var(--bg-main-color);}
.modal-header {border-color: var(--border-color);}
input[type="time"]::-webkit-calendar-picker-indicator {filter: invert(1);}
.form-control::placeholder {color: var(--input-text);}
.modal-footer {border-color: var(--border-color);}
.dropdown-item.active, .dropdown-item:active, .dropdown-item:hover, .dropdown-item:focus {background: var(--input-bg)!important;color: var(--text-color)!important;}

.alert-red {background: #ea3943;padding: 1.5rem;min-width: 0;font-size: 0.9rem;box-shadow: var(--box-shadow) !important;color: #fff;}
.alert-red i {margin-right: 1.5rem;}

.btn-pause, .btn-pause:hover, .btn-pause:focus, .btn-pause:active, .btn-pause-on, .btn-pause-on:hover, .btn-pause-on:focus, .btn-pause-on:active {text-decoration: none;display: inline-block;position: relative;overflow: hidden;background: #232e3c!important;color: #fff!important;border: 0px;}
.btn-pause .btn-text {position: relative;z-index: 2;}
.btn-pause .progress {position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-color: #834cf1;z-index: 1;transform-origin: left;transform: scaleX(1);height: 100%;border-radius: 0px;}
.btn-menu-right i {margin-right: 0.3rem;}
.driver-number {background: var(--input-bg);color: var(--input-text);font-size:0.8rem;padding: 0.3rem 0.5rem;border-radius: 0.5rem;margin-left: 0.3rem;}
.form-select {background-color: #0f1318;color: #e9eaea!important;}
.form-floating label {color: #e9eaea!important;z-index: 0;}

.driver-car {background: var(--bg-main-color);color: var(--text-color);border-bottom: 1px solid var(--border-color);padding-bottom: 1.5rem;margin-bottom: 1.5rem;}
.driver-car:last-child {border: 0px;}
.driver-car .avatar {background: var(--input-bg);width: 60px;height: 60px;border-radius: 50%;}
.driver-car p {margin-bottom: 0px;font-size: 0.9rem;}
.driver-car .number {display: inline-block;white-space: nowrap;border: 1px solid var(--input-text);padding: 0rem 0.3rem;border-radius: 0.3rem;color: var(--input-text);}
.driver-car a {text-decoration: none;color: var(--text-color);}
.driver-list {padding: 1.5rem;}
.order-type {text-decoration: none;color: var(--text-color);margin-right: 0.5rem;}
.order-type:last-child {margin-right: 0;}
.order-type.active {background: var(--input-bg);padding: 0.5rem 0.75rem;border-radius: 0.5rem;}
.nav-scroller {position: relative;z-index: 2;overflow-y: hidden;}
.nav-scroller {position: relative;z-index: 2;overflow-y: hidden;}
.nav-scroller .nav {display: -ms-flexbox;display: flex;-ms-flex-wrap: nowrap;flex-wrap: nowrap;padding-bottom: 0px;margin-top: -1px;overflow-x: auto;color: rgba(255, 255, 255, .75);text-align: center;white-space: nowrap;-webkit-overflow-scrolling: touch;}
.nav-scroller .nav-link {padding: 1rem 0.5rem;color: var(--text-color);}
.nav-scroller .nav-link i {margin-right: 0.3rem;}
.nav-underline .nav-link.active {color: var(--btn-input);border-bottom-color:var(--btn-input)!important;}
.nav-underline .nav-link.hot-order {color:#ff6e6e;}
.nav-underline .hot-order.active {border-bottom-color:#ff6e6e!important;}
.nav-underline .nav-link:focus,.nav-underline .nav-link:hover {border-bottom-color: var(--bg-main-color);}
.nav-underline {scrollbar-width: none;-ms-overflow-style: none;padding: 0rem 1rem;}
.nav-underline::-webkit-scrollbar {width: 0;height: 0;}
.btn-contact {background: rgba(137, 80, 252, 0.1);color: #8950FC;border: 0px;font-size: 0.75rem;padding: 0.5rem;}
.btn-contact:hover, .btn-contact:focus {background: rgba(137, 80, 252, 0.1)!important;color: #8950FC!important;}
.balance_bonus {font-size: 0.9rem;color: #50cd89;background: rgba(232, 255, 243, 0.1);}
.balance_taximeter {font-size: 0.9rem;color: #ffc700;background: rgba(255, 248, 221, 0.1);}
.btn-finish, .btn-finish:hover, .btn-finish:focus {background: var(--btn-order)!important;border-radius: 0.5rem!important;color: var(--btn-order-text)!important;padding: 0.5rem 0.5rem;}
.btn-order-plus.active {background: #0d1216!important;}
.form-select:disabled {background-color: #0f1318!important;color: #e9eaea !important;}
.order-now .info {font-size: 0.85rem;}
.order-now .info span {border-right: 1px solid var(--border-color);padding-right: 0.5rem;margin-right: 0.5rem;display: inline-block;white-space: nowrap;}
.order-now .info .distanse {margin-right: 0.3rem!important;}
.order-now .info span:last-child {border: 0px;padding-right: 0;margin-right: 0;}
.order-now .info i {margin-right: 0.25rem;}
.info-type {margin-top: -0.5rem;}
.info-type .type {margin-right: 0.5rem;background: var(--border-color);font-size: 0.8rem;padding: 0.35rem 0.5rem;margin-top: 0.5rem;border-radius: 0.25rem;}
.balance-order {border-bottom: 1px solid var(--border-color);padding-bottom: 1rem;margin-bottom: 1rem;}
.balance-order:last-child {border: 0px;padding-bottom: 0px;margin-bottom: 0px;}
.balance-order a {text-decoration: none;color: var(--text-color);}
.balance-order span {font-size: 0.8rem;color: var(--icon-color);}
.balance-order .price-minus {color: #F64E60;background: rgba(255, 226, 229, 0.1);padding: 5px 10px;border-radius: 0.5rem;font-size: 0.9rem;}
.balance-order .price-plus {color: #50cd89;background: rgba(232, 255, 243, 0.1);padding: 5px 10px;border-radius: 0.5rem;font-size: 0.9rem;}
.balance-history {padding: 1.5rem;}

@font-face {
  font-family: 'Calculatrix7Regular';
  src: url('../fonts/Calculatrix7Regular.ttf') format('truetype');
}
.container-taximeter {display: flex;flex-direction: column;height: 100%;}
.container-taximeter .price {font-family: 'Calculatrix7Regular', Arial, sans-serif;background: #151d25;font-size: 6rem;text-align: center;padding-top: 40px;flex: 1;flex-shrink: 0;height: 100vh;padding-left: 12px;}
.container-taximeter .price .value {color: var(--btn-input);position: absolute;}
.container-taximeter .price .value-bg {color: var(--bg-main-color);}
.container-taximeter .price .null {opacity: 0;}
.container-taximeter .info {padding: 1.5rem;text-align: center;background: #151d25;}
.container-taximeter .info i {color: var(--icon-color);margin-right: 0.25rem;}
.container-taximeter .info span {margin-right: 7px;border-right: 1px solid var(--bg-main-color);padding-right: 10px;}
.container-taximeter .info span:last-child {margin: 0px;border:0px;padding: 0px;}
.container-taximeter .taximeter-panel {flex-shrink: 0;overflow-y: auto;box-sizing: border-box;}
.container-taximeter .button {padding: 1.5rem;}
.container-taximeter .button .btn {background: #232e3c !important;color: var(--input-text) !important;padding: 1rem;border-radius: 0.5rem;}
.container-taximeter .button .btn p {margin-bottom: 0px;font-size: 0.9rem;}
.container-taximeter .button .start {padding: 1rem;background: var(--btn-input)!important;color: #fff!important;font-size: 1.7rem;border-radius: 0.5rem;}
.container-taximeter .button .finish {padding: 1rem;background: #ff3b3b!important;color: #fff!important;font-size: 1.7rem;border-radius: 0.5rem;}
.container-taximeter .button i {margin-right: 10px;color: var(--icon-color);}
.container-taximeter .button .pl i {margin-left: 10px;}
.container-taximeter .button .btn-on {background: var(--border-color)!important;}
.container-taximeter .button .btn-on i {color: var(--btn-input);}
.container-taximeter .button .container {padding: 0px;}
.container-taximeter .button .container .pr {padding-right: 0.75rem;}
.container-taximeter .button .container .pl {padding-left: 0.75rem;}
.container-taximeter .title-page {background: #151d25;border: 0;}
.container-taximeter .title-page .menu i {margin-right: 0.25rem;}
.container-taximeter .title-page .menu a {margin-right: 0.5rem;}
.container-taximeter .title-page .menu a:last-child {margin-right: 0;}
.container-taximeter .title-page .modal-close {background: var(--bg-main-color)!important;}
.address-order .time {font-size: 0.7rem;color: var(--input-text);}
.order-info .timer {border-right: 1px solid var(--border-color);padding-right: 0.5rem;margin-right: 0.318rem;}
.taximeter-info {font-size: 0.9rem;}
.taximeter-info i {margin-bottom: 1.5rem;color: var(--btn-input);}

.taximeter-order {background: var(--input-bg);padding: 1.5rem;border-radius: 0.5rem;padding-bottom: 0.5rem;}
.taximeter-order a {text-decoration: none;color: var(--text-color);}
.taximeter-distance {margin-top: 0.33rem;}
.taximeter-distance i {margin-right: 0.5rem;color: var(--icon-color);}
.taximeter-order .taximeter-price {font-family: 'Calculatrix7Regular', Arial, sans-serif;font-size: 2rem;text-align: center;}
.taximeter-order .taximeter-price .value {color: var(--btn-input);position: absolute;}
.taximeter-order .taximeter-price .value-bg {color: var(--bg-main-color);}
.taximeter-order .taximeter-price .null {opacity: 0;}
.driver-radius {border: 0;padding-bottom: 0;}

.driver-map-list {background: var(--bg-main-color);color: var(--text-color);margin-bottom: 1rem;border-bottom: 1px solid var(--border-color);padding-bottom: 1rem;}
.driver-map-list .avatar {background: var(--input-bg);width: 60px;height: 60px;border-radius: 50%;}
.driver-map-list p {margin-bottom: 0px;font-size: 0.9rem;}
.driver-map-list .number {display: inline-block;white-space: nowrap;border: 1px solid var(--input-text);padding: 0rem 0.3rem;border-radius: 0.3rem;color: var(--input-text);}
.driver-map-list h5 {margin-bottom: 0px;}
.driver-map-list .status-green {color: #50cd89;background: rgba(232, 255, 243, 0.1);padding: 0.5rem;border-radius: 0.5rem;font-size: 0.85rem;}
.driver-map-list .status-orange {color: #ffc700;background: rgba(255, 248, 221, 0.1);padding: 0.5rem;border-radius: 0.5rem;font-size: 0.85rem;}
.driver-map-list .status-pause {color: #e9eaea;background: rgb(221 245 255 / 10%);padding: 0.5rem;border-radius: 0.5rem;font-size: 0.85rem;}
.driver-map-list:last-child {margin-bottom: 0;border-bottom: 0;padding-bottom: 0;}

.qr-code {text-align: center;margin: 1.5rem;margin-bottom: 0;}
.qr-code img, .qr-code canvas {max-width: 15rem;background: #fff;padding: 1rem;border-radius: 0.5rem;}
.qr-info {margin: 1.5rem;border-bottom: 1px solid var(--border-color);padding-bottom: 1.5rem;margin-bottom: 0;}
.qr-info .button-block {max-width: 23rem;margin: auto;}
.qr-info .form-control {background: var(--input-bg);}
.qr-info .btn-contact {font-size: 1rem;}
.qr-info .btn-contact:disabled {background: rgba(137, 80, 252, 0.1);color: #8950FC;}
.referal-list {padding: 1.5rem;}
.referal-count {margin-top: 1.5rem;}
.page-menu .driver-map-list .col {min-width:0;}
.page-menu .name-referal {display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.qr-code #referal-qr {display: flex;justify-content: center;}

.taxi-bonus .promocode-balance {border:1px dashed var(--icon-color);border-radius: 0.5rem;padding: 1rem;margin: 1.5rem;}
.taxi-bonus .title {font-size: 1rem;}
.taxi-bonus .title b {color:var(--btn-order);}
.taxi-bonus .title i {color: var(--btn-input);margin-left: 0.25rem;}

.taxi-bonus .tokens{ display:flex; align-items:center; gap:.35rem;margin-top: 1rem;margin-bottom: 1.5rem;}
.taxi-bonus .token{ width:28px; height:28px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,.08); color:var(--icon-color); font-weight:800; border:1px solid rgba(255,255,255,.12); }
.taxi-bonus .token.is-filled{ background:var(--btn-order);color: var(--input-bg);}

.taxi-bonus .btn-order {margin-top: 1.5rem;}
.taxi-bonus .vz-wheelWrap{ display:grid; place-items:center; }
.taxi-bonus .vz-wof{ display:inline-block; position:relative; overflow:hidden; }
.taxi-bonus .vz-wheel{ display:block; width:300px; height:300px; border-radius:50%;}
.taxi-bonus .vz-spin{user-select:none; cursor:pointer; display:flex; align-items:center; justify-content:center; text-align:center;position:absolute; top:50%; left:50%; width:30%; height:30%; margin:-15%;background:#fff; color:#fff; border-radius:50%;box-shadow:0 0 0 8px currentColor, 0 0 15px 5px rgba(0,0,0,.6);font-weight:900; font-size:1.6rem; letter-spacing:.2px;}
.taxi-bonus .vz-spin::after{content:""; position:absolute; top:-17px;border:10px solid transparent; border-bottom-color:currentColor; border-top:none;}

.link-promo {color: var(--text-color);text-decoration: none;border-bottom: 1px dashed var(--text-color);font-weight: 500;padding-bottom: 0.15rem;}
.bonus-list {padding: 1.5rem;padding-top: 0;}
.bonus-banner {margin: 1.5rem;background: var(--border-color);padding: 1.5rem;border-radius: 0.5rem;cursor: pointer;}
.bonus-banner .name {margin-left: 1rem;}
.bonus-banner .fa-circle-dollar {color: var(--btn-order);}
.bonus-banner .fa-users {color: var(--btn-input);}
.bonus-banner-link {color: var(--text-color);text-decoration: none;}

.btn-city-app, .btn-city-app:hover {background: var(--border-color)!important;color: var(--text-color)!important;border-radius: 0.5rem;}
.btn-city-app i {margin-right: 0.25rem;color: var(--icon-color);}
.user .dropdown-menu {border: 0;color: var(--input-text);background: var(--border-color);}
.user .dropdown-menu i {color: var(--btn-input)!important;margin-right: 0.25rem;}
.user .dropdown-item {color: var(--text-color);}
.user .dropdown-item.active, .user .dropdown-item:active, .user .dropdown-item:hover, .user .dropdown-item:focus {background: var(--bg-map)!important;color: var(--text-color)!important;}
.user .rating-profile {color: var(--icon-color);}
.user .rating-profile-active {color: var(--text-color);}
.user .rating-profile-active i {color: var(--btn-order);margin-right: 0.25rem;}

.btn-order-now:disabled {border-right: 1px solid #2b2814 !important;}
.driver-code {background: var(--input-bg);;padding: 0.35rem 0.75rem;border-radius: 0.5rem;font-size: 0.9rem!important;width: fit-content;}
.timer-icon {color: var(--icon-color);}

.move-info {margin-top: -1rem;margin-bottom: 0.5rem;cursor: pointer;}
#order-now {transition: max-height 0.25s ease;}
* {scrollbar-width: none;}
*::-webkit-scrollbar {width: 0 !important;height: 0 !important;}
* {
    user-select: none; /* Запрещает выделение текста */
    -webkit-user-select: none; /* Для Safari */
    -moz-user-select: none; /* Для Firefox */
    -ms-user-select: none; /* Для Internet Explorer/Edge */
    -webkit-touch-callout: none; /* Отключает всплывающее меню на iOS */
    touch-action: manipulation;
}

* {
    pointer-events: auto; 
}

a, img, div, span {
    -webkit-user-drag: none; 
    user-drag: none;
    draggable: false;
}

  /* Контейнер-кнопка */
  .slider-btn {
    position: relative;
    overflow: hidden;
    padding: 0;
  }

  .slider-btn .slider-track {
    position: relative;
    width: 100%;
    height: 48px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .slider-btn .slider-thumb {
    position: absolute;
    left: 0;
    top: 0;
    width: 48px;
    height: 48px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(4px);
    cursor: pointer;
    touch-action: none;
    transition: transform 0.2s ease;
    z-index: 2;
  }

  .slider-btn .slider-thumb i {
    pointer-events: none;
  }

  .slider-btn .slider-label {
    position: relative;
    z-index: 1;
    font-weight: 500;
    white-space: nowrap;
    transition: opacity 0.2s ease;
  }

  .slider-btn .progress {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    transform-origin: left center;
    z-index: 0;
  }

  .slider-btn.slider-complete .slider-label {
    opacity: 0;
  }
  .slider-btn.slider-complete .slider-thumb {
    cursor: default;
  }

/* Слайдер "Замовлення виконано" */
.finish-slider-btn {
  position: relative;
  padding: 0;
  border: none;
  border-radius: 0.5rem;
  overflow: hidden;
  background: transparent;
}

.finish-slider-track {
  position: relative;
  width: 100%;
  min-height: 3rem;
  border-radius: 0.5rem;
  border: 2px solid #ffe13b;
  background: #ffe13b;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0.5rem 0;
}

.finish-slider-label {
  position: relative;
  z-index: 1;
  font-weight: 500;
  pointer-events: none;
  white-space: nowrap;
  color:var(--btn-order-text);
  font-size: 1.3rem;

}

/* Жёлтый бегунок */
.finish-slider-thumb {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #c9c33b;
  color:var(--btn-order-text);
  border-radius: 0.5rem;
  will-change: transform;
  transition: transform 0.2s ease;
}

/* Состояние завершения — можно чуть усилить эффект */
.finish-slider-complete .finish-slider-track {
  background: #c9c33b;
  border: 2px solid #c9c33b;
}


.finish-slider-track,
.finish-slider-thumb {
  touch-action: pan-y; /* Разрешаем вертикальный скролл, но даём горизонтальный свайп */
}
.user-info-list {margin-top: -0.5rem;}
.user-info-list .list-group-item {color: var(--text-color);}
.user-info-list .list-group-item {padding: 0.75rem 0;}
.user-info-list .list-group-item i {color: var(--icon-color);}
#userProfileModal .list-group-item {background-color: transparent;border-color: var(--border-color);}

.btn-balance {background: rgba(137, 80, 252, 0.1);color: #8950FC;border: 0px;font-size: 0.8rem;padding: 0.5rem 0.75rem;}
.btn-balance:hover, .btn-balance:focus {background: rgba(137, 80, 252, 0.1)!important;color: #8950FC!important;}
/* Chrome, Edge, Safari, Opera */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield; /* на всякий случай для новых браузеров */
}
.form-control-bonus {border-radius: 0.5rem!important;}