/* ================================================
   INLINE INVOICE DISCOUNTS - Custom Styles
   ================================================ */

/* Discount column styling */
.bill_col_discount {
    min-width: 150px;
}

.bill_col_discount .input-group-append {
    width: 60px;
}

.bill_col_discount .js_item_discount_type {
    font-size: 12px;
    padding: 0.25rem;
}

/* Hide discount column when needed */
.bill_col_discount.hidden {
    display: none !important;
}

/* Disabled button styling */
button.disabled,
a.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ================================================
   TICKETS TABLE FOOTER & PAGINATION
   (works on all themes and devices)
   ================================================ */

/* Client column: full text, no truncation */
#tickets-table-wrapper #tickets-list-table td.tickets_col_client {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    max-width: none;
}

/* Footer row: left spacer | center pagination | right total */
#tickets-table-wrapper .tickets-tfoot-row > div:first-child,
#tickets-table-wrapper .tickets-tfoot-row > div:last-child {
    flex: 1;
}
#tickets-table-wrapper .tickets-tfoot-row > div:last-child {
    display: flex;
    justify-content: flex-end;
}
#tickets-table-wrapper .tickets-tfoot-row .tickets-total {
    margin-right: 200px;
}

/* Ticket pagination: hide page numbers by default (JS shows visible window) */
#tickets-table-wrapper .pagination-containter .js-tickets-pagination .page-num {
    display: none;
}

/* Bar and buttons — только светлые темы (Midnight стилизуется своим style.css) */
html:not(.midnight) #tickets-table-wrapper .pagination-containter .js-tickets-pagination {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 6px 8px;
    background: #e9edf2;
    border: 1px solid #dee2e6;
}
html:not(.midnight) #tickets-table-wrapper .pagination-containter .js-tickets-pagination li {
    margin: 0;
}
html:not(.midnight) #tickets-table-wrapper .pagination-containter .js-tickets-pagination .page-num a,
html:not(.midnight) #tickets-table-wrapper .pagination-containter .js-tickets-pagination .scroll-prev a,
html:not(.midnight) #tickets-table-wrapper .pagination-containter .js-tickets-pagination .scroll-next a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid #dee2e6;
    background: #fff;
    color: #263238;
    font-size: 13px;
    padding: 0;
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}
html:not(.midnight) #tickets-table-wrapper .pagination-containter .js-tickets-pagination .page-num a:hover,
html:not(.midnight) #tickets-table-wrapper .pagination-containter .js-tickets-pagination .scroll-prev a:hover,
html:not(.midnight) #tickets-table-wrapper .pagination-containter .js-tickets-pagination .scroll-next a:hover {
    transform: translateY(-1px);
    border-color: #20aee3;
    background: #e9edf2;
}
html:not(.midnight) #tickets-table-wrapper .pagination-containter .js-tickets-pagination .page-num.active a {
    background: #20aee3;
    border-color: #20aee3;
    color: #fff;
}
html:not(.midnight) #tickets-table-wrapper .pagination-containter .js-tickets-pagination .scroll-prev.disabled a,
html:not(.midnight) #tickets-table-wrapper .pagination-containter .js-tickets-pagination .scroll-next.disabled a {
    opacity: 0.35;
    cursor: default;
    transform: none;
}

/* Responsive: smaller offset and tap targets on small screens */
@media (max-width: 768px) {
    #tickets-table-wrapper .tickets-tfoot-row .tickets-total {
        margin-right: 1rem;
    }
    #tickets-table-wrapper .pagination-containter .js-tickets-pagination {
        padding: 4px 6px;
        gap: 4px;
    }
    #tickets-table-wrapper .pagination-containter .js-tickets-pagination .page-num a,
    #tickets-table-wrapper .pagination-containter .js-tickets-pagination .scroll-prev a,
    #tickets-table-wrapper .pagination-containter .js-tickets-pagination .scroll-next a {
        min-width: 24px;
        height: 24px;
        font-size: 12px;
    }
}

/* ================================================
   AVG CHECK WIDGET - стили по канону income (зелёная полоса)
   Средний чек = приход денег, как income
   ================================================ */
.avgcheck {
    position: relative;
    height: 250px;
}
.avgcheck .ct-series-a .ct-area {
    fill: #24d2b5;
    opacity: 0.5;
}
.avgcheck .ct-series-a .ct-line,
.avgcheck .ct-series-a .ct-point {
    stroke: #24d2b5;
    stroke-width: 2px;
}
.avgcheck .ct-series-a .ct-point {
    stroke-width: 6px;
}

/* Tooltip и оси — по канону income (тёмная тема) */
.avgcheck .chartist-tooltip {
    background: #363636;
    color: #ffffff;
    border-radius: 4px;
    padding: 4px 15px;
    font-size: 12px;
    position: absolute;
    display: none;
    z-index: 10;
}
.avgcheck line {
    stroke: #4f595f;
}
.avgcheck .ct-label {
    fill: #aeb4b7;
    color: #aeb4b7;
}

/* Текст виджета — светлый на тёмном фоне (Midnight) */
html.midnight #dashboard-admin-avg-check .card-body h2,
html.midnight #dashboard-admin-avg-check .card-body h2.font-light {
    color: #ffffff;
}
html.midnight #dashboard-admin-avg-check .card-body small {
    color: #aeb4b7;
}
html.midnight #dashboard-admin-avg-check .card-title {
    color: #ffffff;
}
html.midnight #dashboard-admin-avg-check select,
html.midnight #dashboard-admin-avg-check .select2-container {
    color: #263238;
}

/* ================================================
   ПОСТУПЛЕНИЕ ЗАКАЗОВ (ticket statuses) — приход заказов = зелёная полоса
   ================================================ */
.ticket-statuses-chart .ct-series-a .ct-area {
    fill: #24d2b5;
    opacity: 0.5;
}
.ticket-statuses-chart .ct-series-a .ct-line,
.ticket-statuses-chart .ct-series-a .ct-point {
    stroke: #24d2b5;
    stroke-width: 2px;
}
.ticket-statuses-chart .ct-series-a .ct-point {
    stroke-width: 6px;
}

/* Tooltip, оси — по канону income (тёмная тема) */
.ticket-statuses-chart .chartist-tooltip {
    background: #363636;
    color: #ffffff;
    border-radius: 4px;
    padding: 4px 15px;
    font-size: 12px;
    position: absolute;
    display: none;
    z-index: 10;
}
.ticket-statuses-chart line {
    stroke: #4f595f;
}
.ticket-statuses-chart .ct-label {
    fill: #aeb4b7;
    color: #aeb4b7;
}

/* Текст виджета — светлый на тёмном фоне (Midnight) */
html.midnight #dashboard-admin-tickets-statuses .card-body h2,
html.midnight #dashboard-admin-tickets-statuses .card-body h2.font-light {
    color: #ffffff;
}
html.midnight #dashboard-admin-tickets-statuses .card-body small {
    color: #aeb4b7;
}
html.midnight #dashboard-admin-tickets-statuses .card-title {
    color: #ffffff;
}

/* Прокрутка таймлайна графиков (только «Все»): тёмная, тонкая, в стиле стекла (Midnight) */
html.midnight .chart-timeline-scroll {
    scrollbar-color: rgba(174, 180, 183, 0.35) rgba(40, 44, 52, 0.6);
    scrollbar-width: thin;
}
html.midnight .chart-timeline-scroll::-webkit-scrollbar {
    height: 6px;
}
html.midnight .chart-timeline-scroll::-webkit-scrollbar-track {
    background: rgba(40, 44, 52, 0.5);
    border-radius: 3px;
}
html.midnight .chart-timeline-scroll::-webkit-scrollbar-thumb {
    background: rgba(174, 180, 183, 0.35);
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.04);
}
html.midnight .chart-timeline-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(174, 180, 183, 0.5);
}

/* ================================================
   TICKET SHOW (вход 2) — отключить дёрганье блока
   Дропдаун статуса: только по клику, без transform на hover
   ================================================ */
#ticket #list-page-actions .ticket-status-md-trigger:hover {
    transform: none;
}

/* Пока курсор внутри карточки (дропдаун открыт, наведение на пункты, выбор) —
   карточка не дёргается. Реакция только при входе/выходе курсора в блок. */
#ticket #ticket-left-panel.card.select2-open:hover,
#ticket #ticket-left-panel.card.select2-closing:hover,
#ticket .order-cart-block.card.select2-open:hover,
#ticket .order-cart-block.card.select2-closing:hover,
#ticket .order-delivery-block.card.select2-open:hover,
#ticket .order-delivery-block.card.select2-closing:hover,
#ticket .order-payment-block.card.select2-open:hover,
#ticket .order-payment-block.card.select2-closing:hover {
    transform: none !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}

/* Шапка «Детали заказа»: трубка 32px перед заголовком (без рамки), время в рамке с info 22px */
#ticket #ticket-left-panel .x-top-header-with-icon {
    display: flex;
    align-items: center;
    gap: 10px;
}
#ticket #ticket-left-panel .x-top-header-with-icon .x-top-header-phone-icon {
    flex-shrink: 0;
    margin-right: 2px;
}
#ticket #ticket-left-panel .x-top-header-with-icon .x-top-header-phone-icon .icon-phone .st0 {
    fill: none;
    stroke: #8a94a3;
    stroke-width: 6;
    stroke-linecap: round;
    stroke-miterlimit: 10;
}
#ticket #ticket-left-panel .x-top-header-with-icon .x-top-header-phone-icon .icon-phone .st1 {
    fill: #8a94a3;
}
#ticket #ticket-left-panel .x-top-header-with-icon .x-top-header-phone-icon .icon-phone .first-l {
    animation: phone-wave 1.5s ease-in-out infinite;
}
#ticket #ticket-left-panel .x-top-header-with-icon .x-top-header-phone-icon .icon-phone .second-l {
    animation: phone-wave 1.5s ease-in-out 0.2s infinite;
}
#ticket #ticket-left-panel .x-top-header-with-icon .x-top-header-phone-icon .icon-phone .third-l {
    animation: phone-wave 1.5s ease-in-out 0.4s infinite;
}
@keyframes phone-wave {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

#ticket #ticket-left-panel .x-top-header-with-icon .x-list-date {
    margin-left: auto;
    margin-bottom: 0;
}
#ticket #ticket-left-panel .x-top-header-with-icon .x-list-date .x-details {
    display: flex;
    align-items: center;
    gap: 10px;
}
#ticket #ticket-left-panel .x-top-header-info-icon {
    flex-shrink: 0;
    display: inline-flex;
}
#ticket #ticket-left-panel .x-top-header-info-icon.icon-info .bg { fill: transparent; }
#ticket #ticket-left-panel .x-top-header-info-icon.icon-info .st0 { fill: none; stroke: #8a94a3; stroke-width: 6; stroke-miterlimit: 10; }
#ticket #ticket-left-panel .x-top-header-info-icon.icon-info .st1 { fill: #8a94a3; }
#ticket #ticket-left-panel .x-top-header-info-icon.icon-info .st2 { fill: none; stroke: #8a94a3; stroke-width: 4; stroke-miterlimit: 10; stroke-linecap: round; }
#ticket #ticket-left-panel .x-top-header-info-icon.icon-info .circle {
    transition: 0.5s;
    transform-origin: 50% 50%;
}
#ticket #ticket-left-panel .x-top-header-info-icon.icon-info:hover .circle {
    transform: scale(-1, 1);
}

/* Фамилия и Имя в одном ряду */
#ticket #ticket-left-panel .x-list-row {
    display: flex;
    gap: 12px;
    margin-bottom: 10px;
}
#ticket #ticket-left-panel .x-list-row .x-list {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}

/* Инпуты в блоке Детали заказа — форма подгружается в #ticket-left-panel-form-container */
#ticket #ticket-left-panel-form-container input.form-control,
#ticket #ticket-left-panel-form-container select.form-control,
#ticket #ticket-left-panel-form-container .form-control {
    min-height: 40px !important;
    padding: 10px 14px !important;
    font-size: 15px !important;
    border-radius: 10px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#ticket #ticket-left-panel-form-container input.form-control:focus,
#ticket #ticket-left-panel-form-container select.form-control:focus,
#ticket #ticket-left-panel-form-container .form-control:focus {
    box-shadow: 0 0 0 3px rgba(90, 166, 255, 0.25) !important;
}
#ticket #ticket-left-panel-form-container .select2-container--bootstrap .select2-selection--single {
    min-height: 40px !important;
    padding: 8px 14px !important;
    border-radius: 10px !important;
}
#ticket #ticket-left-panel-form-container .select2-container--bootstrap .select2-selection--single .select2-selection__rendered {
    line-height: 22px;
    font-size: 15px;
}

/* Корзина: поля скидок — те же размеры, цвета и стили, что у поля Возраст в Детали заказа */
#ticket .order-cart-block .ticket-cart-mini-row .ticket-cart-control .form-control {
    min-height: 40px !important;
    padding: 10px 14px !important;
    font-size: 15px !important;
    border-radius: 10px !important;
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(245, 248, 255, 0.88);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
#ticket .order-cart-block .ticket-cart-mini-row .ticket-cart-control .form-control:hover {
    border-color: rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.06);
}
#ticket .order-cart-block .ticket-cart-mini-row .ticket-cart-control .form-control:focus {
    border-color: rgba(90, 166, 255, 0.45);
    box-shadow: 0 0 0 3px rgba(90, 166, 255, 0.25) !important;
    outline: none;
}
#ticket .order-cart-block .ticket-cart-mini-row .ticket-cart-mini-field label {
    font-size: 13px;
    color: rgba(245, 248, 255, 0.78);
    margin-bottom: 6px;
    font-weight: 400;
}

/* Детали заказа: ряд Телефон|Возраст — две колонки по 50%, подпись сверху, инпут на всю ширину (как Фамилия|Имя) */
#ticket #ticket-left-panel-form-container #ticket_edit_additional_info_section .form-group.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -10px;
    margin-right: -10px;
}
#ticket #ticket-left-panel-form-container #ticket_edit_additional_info_section .form-group.row > .col-sm-12.col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
}
#ticket #ticket-left-panel-form-container #ticket_edit_additional_info_section .form-group.row > .col-sm-12.col-md-6 > label.control-label.col-form-label {
    display: block;
    margin-bottom: 6px;
}
#ticket #ticket-left-panel-form-container #ticket_edit_additional_info_section .form-group.row > .col-sm-12.col-md-6 .form-control,
#ticket #ticket-left-panel-form-container #ticket_edit_additional_info_section .form-group.row > .col-sm-12.col-md-6 .x-input-with-icon {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
@media (max-width: 767px) {
    #ticket #ticket-left-panel-form-container #ticket_edit_additional_info_section .form-group.row > .col-sm-12.col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Модель продаж: ширина по самому длинному тексту, без обрезки и прокрутки */
#ticket #ticket-left-panel-form-container .x-sales-model-wrap select,
#ticket #ticket-left-panel-form-container .x-sales-model-wrap .select2-container {
    width: fit-content !important;
    max-width: 100%;
    min-width: min-content;
}
#ticket #ticket-left-panel-form-container .x-sales-model-wrap .select2-selection__rendered {
    overflow: visible;
    text-overflow: unset;
    white-space: nowrap;
}
/* Отступ иконка–текст как у info с датой (10px): gap задаём у контейнера иконки+текста внутри дропдауна */
#ticket #ticket-left-panel-form-container .x-sales-model-wrap .select2-selection__rendered .x-sales-model-selection {
    display: flex !important;
    align-items: center;
    gap: 10px;
}

/* Иконка #demo в поле Модель продаж — как в CodePen zqgbYG, пропорции как у иконки info (22x22), та же анимация */
#ticket #ticket-left-panel-form-container .x-sales-model-wrap .x-sales-model-icon-svg {
    flex-shrink: 0;
}
#ticket #ticket-left-panel-form-container .x-sales-model-wrap .x-sales-model-icon-svg .st0 {
    fill: #464a51;
    stroke: #464a51;
    stroke-width: 8;
    stroke-miterlimit: 10;
}
#ticket #ticket-left-panel-form-container .x-sales-model-wrap .x-sales-model-icon-svg .st3 {
    fill: none;
    stroke: #8a94a3;
    stroke-width: 6;
    stroke-miterlimit: 10;
}
#ticket #ticket-left-panel-form-container .x-sales-model-wrap .x-sales-model-icon-svg .square {
    transform: scale(1);
    transform-origin: 50% 50%;
    transition: transform 0.5s;
}
#ticket #ticket-left-panel-form-container .x-sales-model-wrap .x-sales-model-icon-svg .arrow .st3 {
    transition: stroke-width 0.5s;
}
#ticket #ticket-left-panel-form-container .x-sales-model-wrap:hover .x-sales-model-icon-svg .square {
    transform: scale(0.8);
    transform-origin: 50% 50%;
}
#ticket #ticket-left-panel-form-container .x-sales-model-wrap:hover .x-sales-model-icon-svg .arrow .st3 {
    stroke-width: 8;
}

/* Модель продаж в шапке — тот же приём что инфо с датой: пилл + внутри .x-details.x-top-header-info (flex, gap 8px) */
#ticket #ticket-left-panel .x-top-header .x-top-header-sales-model .x-sales-model-wrap {
    margin: 0;
    padding: 0;
    flex: 1;
    min-width: 0;
}
#ticket #ticket-left-panel .x-top-header .x-sales-model-wrap select,
#ticket #ticket-left-panel .x-top-header .x-sales-model-wrap .select2-container {
    width: 100% !important;
    max-width: 100%;
}
#ticket #ticket-left-panel .x-top-header .x-sales-model-wrap .select2-container--bootstrap .select2-selection--single,
#ticket #ticket-left-panel .x-top-header .x-sales-model-wrap .select2-container--default .select2-selection--single {
    background-color: transparent !important;
    border: none !important;
    color: rgba(245, 248, 255, 0.9);
    min-height: auto;
    padding: 0;
    display: flex !important;
    align-items: center;
}
#ticket #ticket-left-panel .x-top-header .x-sales-model-wrap .select2-selection__rendered {
    overflow: visible;
    text-overflow: unset;
    white-space: nowrap;
    font-size: 13px;
    line-height: 1.35;
    color: inherit;
    padding: 0;
    display: flex !important;
    align-items: center;
}
#ticket #ticket-left-panel .x-top-header .x-sales-model-wrap .select2-selection--single {
    min-height: auto;
    padding: 0;
}
/* Стрелку у дропдауна убираем */
#ticket #ticket-left-panel .x-top-header .x-sales-model-wrap .select2-selection__arrow {
    display: none !important;
}
/* Синюю рамку фокуса при смене значения — убираем */
#ticket #ticket-left-panel .x-top-header .x-sales-model-wrap .select2-container:focus,
#ticket #ticket-left-panel .x-top-header .x-sales-model-wrap .select2-container:focus-within,
#ticket #ticket-left-panel .x-top-header .x-sales-model-wrap .select2-container--bootstrap .select2-selection--single:focus,
#ticket #ticket-left-panel .x-top-header .x-sales-model-wrap .select2-container--default .select2-selection--single:focus,
#ticket #ticket-left-panel .x-top-header .x-sales-model-wrap .select2-container--open .select2-selection--single,
#ticket #ticket-left-panel .x-top-header .x-sales-model-wrap .select2-container .select2-selection--single:focus {
    outline: none !important;
    box-shadow: none !important;
}
#ticket #ticket-left-panel .x-top-header .x-sales-model-wrap .select2-selection__rendered .x-sales-model-selection {
    display: flex !important;
    align-items: center;
    gap: 8px;
}
#ticket #ticket-left-panel .x-top-header .x-sales-model-wrap .x-sales-model-icon-svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
#ticket #ticket-left-panel .x-top-header .x-sales-model-wrap .x-sales-model-icon-svg rect,
#ticket #ticket-left-panel .x-top-header .x-sales-model-wrap .x-sales-model-icon-svg line,
#ticket #ticket-left-panel .x-top-header .x-sales-model-wrap .x-sales-model-icon-svg polyline {
    fill: none !important;
    stroke: rgba(245, 248, 255, 0.65) !important;
    stroke-width: 6;
    stroke-miterlimit: 10;
}
#ticket #ticket-left-panel .x-top-header .x-sales-model-wrap .x-sales-model-icon-svg rect.st0 {
    fill: rgba(245, 248, 255, 0.5) !important;
    stroke: rgba(245, 248, 255, 0.5) !important;
    stroke-width: 8;
}
#ticket #ticket-left-panel .x-top-header .x-sales-model-wrap .x-sales-model-icon-svg .square {
    transform: scale(1);
    transform-origin: 50% 50%;
    transition: transform 0.5s;
}
#ticket #ticket-left-panel .x-top-header .x-sales-model-wrap .x-sales-model-icon-svg .arrow .st3 {
    transition: stroke-width 0.5s;
}
#ticket #ticket-left-panel .x-top-header .x-sales-model-wrap:hover .x-sales-model-icon-svg .square {
    transform: scale(0.8);
    transform-origin: 50% 50%;
}
#ticket #ticket-left-panel .x-top-header .x-sales-model-wrap:hover .x-sales-model-icon-svg .arrow .st3 {
    stroke-width: 8;
}

/* Поле телефон — квадратное место под будущую иконку в начале */
.x-input-phone-wrap.x-input-with-icon {
    display: flex;
    align-items: center;
    gap: 8px;
}
.x-input-phone-wrap .x-input-icon-placeholder {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: hidden;
}
.x-input-phone-wrap .form-control {
    flex: 1;
    min-width: 0;
}
.x-input-phone-wrap .x-input-icon-placeholder .x-operator-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
}
#ticket .x-input-phone-wrap .x-input-icon-placeholder .x-operator-initial {
    color: rgba(255, 255, 255, 0.95);
}
.x-input-phone-wrap .x-input-icon-placeholder.operator-vodafone,
.x-input-phone-wrap .x-input-icon-placeholder.operator-kyivstar,
.x-input-phone-wrap .x-input-icon-placeholder.operator-lifecell,
.x-input-phone-wrap .x-input-icon-placeholder.operator-3mob,
.x-input-phone-wrap .x-input-icon-placeholder.operator-intertelecom {
    background: transparent;
    border: none;
}
.x-input-phone-wrap .x-input-icon-placeholder.operator-kyivstar .x-operator-initial { color: #1a1a1a; }
#ticket .x-input-phone-wrap .x-input-icon-placeholder.operator-kyivstar .x-operator-initial { color: #ffd100; }
.x-input-phone-wrap .form-control.ua-phone-invalid { border-color: rgba(220, 53, 69, 0.6); }
.x-input-phone-wrap .form-control.ua-phone-valid { border-color: rgba(40, 167, 69, 0.5); }
/* Инлайн-SVG: логотип целиком вписывается в ячейку 32×32, не обрезается */
.x-input-phone-wrap .x-input-icon-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}
.x-input-phone-wrap .x-input-icon-placeholder svg {
    width: 100% !important;
    height: 100% !important;
    max-width: 32px !important;
    max-height: 32px !important;
    display: block;
}
.x-input-phone-wrap .x-input-icon-placeholder .x-operator-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.x-input-phone-wrap .x-input-icon-placeholder img.x-operator-img {
    display: block;
}
/* Иконка оператора по номеру (Украина): буква на цветном фоне */
.x-input-phone-wrap .x-input-icon-placeholder .x-operator-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}
#ticket .x-input-phone-wrap .x-input-icon-placeholder .x-operator-initial {
    color: rgba(255,255,255,0.95);
}

/* Вход 1: иконка оператора в списке тикетов (без рамки и фона) */
#tickets-table-wrapper .x-ticket-list-phone {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
#tickets-table-wrapper .x-ticket-list-phone-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
#tickets-table-wrapper .x-ticket-list-phone-icon svg {
    width: 100% !important;
    height: 100% !important;
    max-width: 20px !important;
    max-height: 20px !important;
    display: block;
}
#tickets-table-wrapper .x-ticket-list-phone-icon .x-operator-img,
#tickets-table-wrapper .x-ticket-list-phone-icon img.x-operator-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
#tickets-table-wrapper .x-ticket-list-phone-icon .x-operator-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
}

/* Поле возраст — в форме Детали заказа как остальные инпуты: по левому краю, на всю ширину колонки */
#ticket #ticket-left-panel-form-container #ticket_edit_additional_info_section input.x-age-2digits {
    text-align: left;
    width: 100%;
    min-width: 0;
    max-width: none;
}

/* Gender Toggle CSS only — стили в midnight/style.css */
.js-gender-toggle-wrap .js-gender-checkbox:checked ~ .js-gender-path .js-gender-knob {
    transform: rotateZ(-135deg);
    box-shadow: 0 0 4px rgba(233, 30, 99, 0.35);
}
html.midnight .js-gender-toggle-wrap .js-gender-checkbox:checked ~ .js-gender-path .js-gender-knob {
    box-shadow: 0 0 6px rgba(233, 30, 99, 0.4);
}
/* bow = иконка Ionicons ion-ios-female, строго внутри 40px */
.js-gender-toggle-wrap .js-gender-bow {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 20px;
    margin: 0 auto;
    transition: 0.2s ease color;
}
.js-gender-toggle-wrap .js-gender-bow i {
    display: block;
    font-size: 22px;
    line-height: 1;
}
.js-gender-toggle-wrap .js-gender-bow,
.js-gender-toggle-wrap .js-gender-male span {
    color: #7aa0ff;
}
html.midnight .js-gender-toggle-wrap .js-gender-bow,
html.midnight .js-gender-toggle-wrap .js-gender-male span {
    color: #63b3ed;
}
.js-gender-toggle-wrap .js-gender-checkbox:checked ~ .js-gender-path .js-gender-knob .js-gender-bow {
    color: #e91e63;
}
html.midnight .js-gender-toggle-wrap .js-gender-checkbox:checked ~ .js-gender-path .js-gender-knob .js-gender-bow {
    color: #f687b3;
}
.js-gender-toggle-wrap .js-gender-labels {
    position: absolute;
    top: 50%;
    right: 8px;
    width: 40px;
    font-size: 10px;
    font-weight: 700;
    font-family: Roboto, Helvetica, sans-serif;
    text-align: right;
    line-height: 1;
    margin-top: -5px;
}
.js-gender-toggle-wrap .js-gender-fe {
    position: absolute;
    left: -48px;
    color: #e91e63;
    transition: left 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.js-gender-toggle-wrap .js-gender-male {
    left: 0;
}
.js-gender-toggle-wrap .js-gender-male,
.js-gender-toggle-wrap .js-gender-male span {
    position: relative;
}
.js-gender-toggle-wrap .js-gender-male {
    color: #7aa0ff;
}
html.midnight .js-gender-toggle-wrap .js-gender-male {
    color: #63b3ed;
}
.js-gender-toggle-wrap .js-gender-male span {
    z-index: 1;
}
.js-gender-toggle-wrap .js-gender-male:before {
    content: "MALE";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    color: #e91e63;
    white-space: nowrap;
    overflow: hidden;
    transition: width 0.2s cubic-bezier(0.4, 0, 1, 1);
    z-index: 2;
}
html.midnight .js-gender-toggle-wrap .js-gender-male:before {
    color: #f687b3;
}
.js-gender-toggle-wrap .js-gender-path.gender-fe {
    background-color: #f8f1f7;
}
html.midnight .js-gender-toggle-wrap .js-gender-path.gender-fe {
    background-color: #2d2a3a;
}
.js-gender-toggle-wrap .js-gender-checkbox:checked ~ .js-gender-path .js-gender-fe {
    left: -12px;
}
.js-gender-toggle-wrap .js-gender-checkbox:checked ~ .js-gender-path .js-gender-male.gender-fe:before {
    width: 100%;
}
.js-gender-toggle-wrap .js-gender-checkbox:checked ~ .js-gender-path .js-gender-male {
    animation: gender-move 0.2s ease 0.4s;
}
.js-gender-toggle-wrap .js-gender-male.gender-ma {
    animation: gender-move-l 0.2s ease 0.1s;
}
@keyframes gender-move {
    0% { left: 0; }
    50% { left: 3px; }
    100% { left: 0; }
}
@keyframes gender-move-l {
    0% { left: 0; }
    50% { left: 3px; }
    100% { left: 0; }
}

/* Ticket card phone censorship/reveal */
.ticket-phone-zigzag-reveal {
    position: relative;
    width: 100%;
    min-height: 34px;
    overflow: hidden;
    background: #000;
    color: #fff;
    border-radius: 4px;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
}

.ticket-phone-zigzag-reveal span {
    opacity: 0;
    animation: ticket-phone-show-text 0.9s 1.2s forwards;
    white-space: nowrap;
}

.ticket-phone-zigzag-reveal::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #fff;
    box-shadow: 0 0 20px #fff;
    -webkit-mask:
        conic-gradient(from -45deg at bottom, #0000, #fff 1deg 89deg, #0000 90deg)
        50% / 80px 100% repeat-x;
    mask:
        conic-gradient(from -45deg at bottom, #0000, #fff 1deg 89deg, #0000 90deg)
        50% / 80px 100% repeat-x;
    animation: ticket-phone-slide-out 1.6s ease-out forwards;
}

@keyframes ticket-phone-slide-out {
    from { transform: translateX(0); }
    to { transform: translateX(100%); }
}

@keyframes ticket-phone-show-text {
    to { opacity: 1; }
}

/* Ticket phone input censorship overlay (click to reveal) */
.x-input-phone-wrap {
    position: relative;
}

.x-input-phone-wrap.has-phone-censor #edit_client_phone {
    color: transparent !important;
    text-shadow: none !important;
    caret-color: transparent !important;
}

.x-input-phone-wrap.has-phone-censor #edit_client_phone::selection {
    background: transparent;
    color: transparent;
}

.ticket-phone-censor-overlay {
    position: absolute;
    /* icon(32) + gap(8) + input left padding(~12) */
    left: 52px;
    right: auto;
    top: 50%;
    transform: translateY(-50%);
    height: 1em;
    max-width: calc(100% - 60px);
    border: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    color: var(--phone-mask-color, #007bff);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border-radius: 0;
    cursor: pointer;
    z-index: 5;
    overflow: visible;
    font-size: inherit;
    line-height: 1;
}

.ticket-phone-censor-prefix {
    white-space: nowrap;
    font-weight: inherit;
    color: var(--phone-mask-color, #007bff);
    background: transparent;
    height: 1em;
    line-height: 1em;
    display: inline-flex;
    align-items: center;
    padding: 0;
    z-index: 2;
}

.ticket-phone-censor-zigzag {
    position: relative;
    flex: 0 0 auto;
    width: calc(var(--phone-mask-ch, 7) * 0.68em);
    height: 1em;
    overflow: hidden;
    background: transparent;
    border-radius: 2px;
}

.ticket-phone-censor-zigzag::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--phone-mask-color, #007bff);
    transform: translate3d(0, 0, 0);
    border: 0;
    outline: 0;
    box-shadow: none;
    border-radius: 2px;
}

/* Generic inline phone censorship in lists/cards */
.ticket-phone-censor-inline {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 1.05em;
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    color: inherit;
    font: inherit;
    line-height: 1;
    cursor: pointer;
    vertical-align: baseline;
}

.ticket-phone-censor-inline:focus,
.ticket-phone-censor-inline:active,
.ticket-phone-censor-inline:focus-visible,
.ticket-phone-censor-overlay:focus,
.ticket-phone-censor-overlay:active,
.ticket-phone-censor-overlay:focus-visible {
    outline: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

.ticket-phone-censor-inline.is-phone-revealed .ticket-phone-censor-zigzag::before {
    animation: ticket-phone-mask-slide 0.45s cubic-bezier(.17,.67,.83,.67) forwards;
}

.x-input-phone-wrap.is-phone-revealed .ticket-phone-censor-zigzag::before {
    animation: ticket-phone-mask-slide 0.9s cubic-bezier(.17,.67,.83,.67) forwards;
}

.x-input-phone-wrap.is-phone-revealed .ticket-phone-censor-overlay {
    animation: ticket-phone-input-overlay-hide 0.95s ease-out forwards;
    border-color: transparent;
    box-shadow: none;
}

@keyframes ticket-phone-mask-slide {
    0% { transform: translate3d(-100%, 0, 0); }
    100% { transform: translate3d(110%, 0, 0); }
}

@keyframes ticket-phone-input-overlay-hide {
    0% { opacity: 1; }
    85% { opacity: 1; }
    100% { opacity: 0; visibility: hidden; pointer-events: none; }
}