/* ============================================================
   Диалоги портала в облике «Класса».

   Перекрывает три разнородных слоя, доставшихся от старого кода:
     • bootstrap-dialog (собран под бутстрап 3.x) — окна подтверждений:
       отправка СМС по заказу, «не дозвонился», покупка тарифа;
     • модалки бутстрапа-2 из ModalFactory — «отложить заказ», «дубль»,
       «шаблонные ответы», «отзыв», «все нотификации»;
     • диалоги jQuery UI — логи по заявке, назначение репетитора.

   Грузится последним в наборе bootstrap_dialog (lib/jquery/lib.php), поэтому
   правила равной специфичности перебивают бутстрап порядком подключения.
   Среда враждебная: html{font-size:62.5%} (1rem = 10px, только пиксели),
   у бутстрапа-2 свои клирфиксы и .pull-right.
   ============================================================ */

/* ---------- общий фон под любым диалогом ---------- */

.modal-backdrop,
.modal-backdrop.in,
.modal-backdrop.fade.in,
.ui-widget-overlay {
    opacity: 1;
    background: rgba(15, 23, 42, .38);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* ---------- bootstrap-dialog ---------- */

/* внешний .modal превращаем в прокручиваемый слой на весь экран, карточкой
   становится .modal-content (бутстрап-2 о разметке 3.x ничего не знает) */
/* в styles.css лежит древнее `.modal { width: 610px !important }`,
   поэтому раскладку внешнего слоя приходится задавать с !important */
.modal.bootstrap-dialog {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    max-height: none;
    margin: 0 !important;
    padding: 24px 16px;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.bootstrap-dialog .modal-dialog {
    width: 100%;
    max-width: 560px;
    margin: 8vh auto;
}
.bootstrap-dialog .modal-content {
    position: relative;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(15, 23, 42, .06);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 40px 90px -50px rgba(15, 23, 42, .65),
                0 2px 8px rgba(15, 23, 42, .06);
    overflow: hidden;
    font-family: 'Manrope', 'Inter', var(--dt-font, Arial, Helvetica, sans-serif);
}
.bootstrap-dialog.size-large .modal-dialog { max-width: 820px; }

/* шапка: вместо цветной полосы — заголовок и круглый крестик */
.bootstrap-dialog .modal-header,
.bootstrap-dialog.type-primary .modal-header,
.bootstrap-dialog.type-info .modal-header,
.bootstrap-dialog.type-success .modal-header,
.bootstrap-dialog.type-warning .modal-header,
.bootstrap-dialog.type-danger .modal-header,
.bootstrap-dialog.type-default .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 0;
    padding: 18px 22px 14px;
    border: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
}
.bootstrap-dialog .bootstrap-dialog-header { display: contents; }
/* в разметке плагина крестик идёт перед заголовком — меняем местами */
.bootstrap-dialog .bootstrap-dialog-title { order: 1; }
.bootstrap-dialog .bootstrap-dialog-close-button { order: 2; }
.bootstrap-dialog .bootstrap-dialog-title {
    display: block;
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.01em;
    color: var(--dt-ink, #0f172a);
    text-shadow: none;
}
.bootstrap-dialog .bootstrap-dialog-close-button {
    float: none;
    margin: 0;
    opacity: 1;
    font-size: 0;
}
.bootstrap-dialog .bootstrap-dialog-close-button .close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(226, 232, 240, .9);
    border-radius: 9999px;
    background: #fff;
    opacity: 1;
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
    color: #64748b;
    text-shadow: none;
    cursor: pointer;
    transition: color .16s ease, border-color .16s ease;
}
.bootstrap-dialog .bootstrap-dialog-close-button .close:hover {
    border-color: rgba(10, 132, 255, .35);
    color: var(--dt-accent, #0a84ff);
    opacity: 1;
}

/* тело */
.bootstrap-dialog .modal-body {
    max-height: 62vh;
    margin: 0;
    padding: 4px 22px 18px;
    overflow: auto;
    background: none;
    font-size: 14.5px;
    line-height: 1.6;
    color: #334155;
}
.bootstrap-dialog .bootstrap-dialog-message {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: #334155;
}
.bootstrap-dialog .bootstrap-dialog-body b,
.bootstrap-dialog .bootstrap-dialog-message b { color: var(--dt-ink, #0f172a); }

/* подвал с кнопками */
.bootstrap-dialog .modal-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin: 0;
    padding: 14px 22px 18px;
    border: 0;
    border-top: 1px solid rgba(15, 23, 42, .06);
    border-radius: 0;
    background: #fbfcfe;
    box-shadow: none;
    text-align: right;
}
.bootstrap-dialog .modal-footer .btn,
.bootstrap-dialog .modal-footer .btn + .btn { margin: 0; }
.bootstrap-dialog .bootstrap-dialog-footer { width: 100%; }
.bootstrap-dialog .bootstrap-dialog-footer-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin: 0;
}

/* тот же глобальный `margin: 0 auto` правит текст в теле — задаём поля явно */
.bootstrap-dialog .modal-body p,
.modal:not(.bootstrap-dialog) .modal-body p { margin: 0 0 10px; }
.bootstrap-dialog .modal-body p:last-child,
.modal:not(.bootstrap-dialog) .modal-body p:last-child { margin-bottom: 0; }
.bootstrap-dialog .modal-body input,
.bootstrap-dialog .modal-body select,
.bootstrap-dialog .modal-body textarea,
.modal:not(.bootstrap-dialog) .modal-body input,
.modal:not(.bootstrap-dialog) .modal-body select,
.modal:not(.bootstrap-dialog) .modal-body textarea { margin: 0; }

/* индикатор загрузки в теле диалога */
.bootstrap-dialog .modal-body.loading,
.bootstrap-dialog .bootstrap-dialog-body.loading { opacity: .55; }

/* ---------- модалки бутстрапа-2 (ModalFactory) ---------- */

.modal:not(.bootstrap-dialog) {
    top: 50% !important;
    left: 50% !important;
    width: min(620px, calc(100vw - 32px)) !important;
    max-height: 86vh;
    margin: 0 !important;
    padding: 0;
    border: 1px solid rgba(15, 23, 42, .06);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 40px 90px -50px rgba(15, 23, 42, .65),
                0 2px 8px rgba(15, 23, 42, .06);
    overflow: hidden;
    transform: translate(-50%, -50%);
    font-family: 'Manrope', 'Inter', var(--dt-font, Arial, Helvetica, sans-serif);
}
.modal:not(.bootstrap-dialog) .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 22px 14px;
    border: 0;
    background: #fff;
}
.modal:not(.bootstrap-dialog) .modal-header h3,
.modal:not(.bootstrap-dialog) .modal-header h4 { order: 1; }
.modal:not(.bootstrap-dialog) .modal-header .close { order: 2; }
.modal:not(.bootstrap-dialog) .modal-header h3,
.modal:not(.bootstrap-dialog) .modal-header h4 {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--dt-ink, #0f172a);
    text-shadow: none;
}
.modal:not(.bootstrap-dialog) .modal-header .close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(226, 232, 240, .9);
    border-radius: 9999px;
    background: #fff;
    opacity: 1;
    font-size: 20px;
    line-height: 1;
    color: #64748b;
    text-shadow: none;
}
.modal:not(.bootstrap-dialog) .modal-header .close:hover {
    border-color: rgba(10, 132, 255, .35);
    color: var(--dt-accent, #0a84ff);
}
.modal:not(.bootstrap-dialog) .modal-body {
    max-height: 62vh;
    padding: 4px 22px 18px;
    font-size: 14.5px;
    line-height: 1.6;
    color: #334155;
}
.modal:not(.bootstrap-dialog) .modal-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin: 0;
    padding: 14px 22px 18px;
    border: 0;
    border-top: 1px solid rgba(15, 23, 42, .06);
    border-radius: 0;
    background: #fbfcfe;
    box-shadow: none;
}
.modal:not(.bootstrap-dialog) .modal-footer .btn + .btn { margin: 0; }

/* ---------- кнопки внутри любых диалогов ---------- */

.bootstrap-dialog .btn,
.modal:not(.bootstrap-dialog) .btn,
.ui-dialog .ui-dialog-buttonpane button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    /* в конце index.tpl висит глобальный `* { margin: 0 auto }` — он
       растаскивал кнопки по подвалу, поэтому поля гасим явно */
    margin: 0;
    padding: 8px 18px;
    border: 1px solid rgba(15, 23, 42, .12);
    border-radius: 12px;
    background: #fff;
    background-image: none;
    box-shadow: none;
    font-family: 'Manrope', 'Inter', var(--dt-font, Arial, Helvetica, sans-serif);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    color: #334155;
    text-shadow: none;
    cursor: pointer;
    transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}
.bootstrap-dialog .btn:hover,
.modal:not(.bootstrap-dialog) .btn:hover,
.ui-dialog .ui-dialog-buttonpane button:hover {
    border-color: rgba(10, 132, 255, .35);
    background: #fff;
    color: var(--dt-accent, #0a84ff);
}
.bootstrap-dialog .btn-primary,
.bootstrap-dialog .btn-warning,
.modal:not(.bootstrap-dialog) .btn-primary,
.modal:not(.bootstrap-dialog) .btn-warning,
.ui-dialog .ui-dialog-buttonpane button.ui-state-focus,
.ui-dialog .ui-dialog-buttonpane button:first-child {
    border-color: transparent;
    background: var(--dt-accent, #0a84ff);
    color: #fff;
}
.bootstrap-dialog .btn-primary:hover,
.bootstrap-dialog .btn-warning:hover,
.modal:not(.bootstrap-dialog) .btn-primary:hover,
.modal:not(.bootstrap-dialog) .btn-warning:hover,
.ui-dialog .ui-dialog-buttonpane button:first-child:hover {
    border-color: transparent;
    background: #0a74e0;
    color: #fff;
}
.bootstrap-dialog .btn-danger,
.modal:not(.bootstrap-dialog) .btn-danger {
    border-color: transparent;
    background: #ef4444;
    color: #fff;
}
.bootstrap-dialog .btn-danger:hover,
.modal:not(.bootstrap-dialog) .btn-danger:hover {
    border-color: transparent;
    background: #dc2626;
    color: #fff;
}
.bootstrap-dialog .btn.disabled,
.bootstrap-dialog .btn[disabled] {
    border-color: transparent;
    background: #eef2f7;
    color: #a3adbb;
    opacity: 1;
    cursor: not-allowed;
}

/* поля ввода внутри диалогов */
.bootstrap-dialog input[type="text"],
.bootstrap-dialog input[type="number"],
.bootstrap-dialog select,
.bootstrap-dialog textarea,
.modal:not(.bootstrap-dialog) input[type="text"],
.modal:not(.bootstrap-dialog) input[type="number"],
.modal:not(.bootstrap-dialog) select,
.modal:not(.bootstrap-dialog) textarea {
    height: auto;
    padding: 9px 12px;
    border: 1px solid rgba(15, 23, 42, .1);
    border-radius: 12px;
    background: #f8fafc;
    box-shadow: none;
    font-family: inherit;
    font-size: 14px;
    color: #334155;
}
.bootstrap-dialog input:focus,
.bootstrap-dialog select:focus,
.bootstrap-dialog textarea:focus,
.modal:not(.bootstrap-dialog) input:focus,
.modal:not(.bootstrap-dialog) select:focus,
.modal:not(.bootstrap-dialog) textarea:focus {
    outline: none;
    border-color: rgba(10, 132, 255, .35);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(10, 132, 255, .1);
}

/* ---------- диалоги jQuery UI ---------- */

.ui-dialog {
    padding: 0;
    border: 1px solid rgba(15, 23, 42, .06);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 40px 90px -50px rgba(15, 23, 42, .65),
                0 2px 8px rgba(15, 23, 42, .06);
    font-family: 'Manrope', 'Inter', var(--dt-font, Arial, Helvetica, sans-serif);
    overflow: hidden;
}
.ui-dialog .ui-dialog-titlebar {
    margin: 0;
    padding: 18px 22px 14px;
    border: 0;
    border-radius: 0;
    background: #fff;
    font-family: inherit;
}
.ui-dialog .ui-dialog-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--dt-ink, #0f172a);
}
.ui-dialog .ui-dialog-titlebar-close {
    opacity: 1;
    top: 50%;
    right: 18px;
    width: 34px;
    height: 34px;
    margin: -17px 0 0;
    padding: 0;
    border: 1px solid rgba(226, 232, 240, .9);
    border-radius: 9999px;
    background: #fff;
}
.ui-dialog .ui-dialog-titlebar-close:hover { border-color: rgba(10, 132, 255, .35); }
/* вместо спрайтовой иконки jQuery UI — обычный крестик */
.ui-dialog .ui-dialog-titlebar-close .ui-icon,
.ui-dialog .ui-dialog-titlebar-close .ui-button-text { display: none; }
.ui-dialog .ui-dialog-titlebar-close:after {
    content: '×';
    display: block;
    font-size: 20px;
    font-weight: 500;
    line-height: 32px;
    text-align: center;
    color: #475569;
}
.ui-dialog .ui-dialog-titlebar-close:hover:after { color: var(--dt-accent, #0a84ff); }
/* уголок «потянуть за размер» в новом облике только мусорит */
.ui-dialog .ui-resizable-handle { display: none !important; }
.ui-dialog .ui-dialog-content {
    padding: 4px 22px 18px;
    background: none;
    font-size: 14.5px;
    line-height: 1.6;
    color: #334155;
}
.ui-dialog .ui-dialog-buttonpane {
    margin: 0;
    padding: 14px 22px 18px;
    border: 0;
    border-top: 1px solid rgba(15, 23, 42, .06);
    background: #fbfcfe;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    float: right;
    margin: 0;
}
.ui-dialog .ui-dialog-buttonpane button { margin: 0; }
.ui-dialog .ui-dialog-buttonpane button .ui-button-text { padding: 0; }

/* ---------- адаптив ---------- */

@media (max-width: 640px) {
    .bootstrap-dialog .modal-dialog { margin: 4vh auto; }
    .bootstrap-dialog .modal-content,
    .modal:not(.bootstrap-dialog) { border-radius: 20px; }
    .modal:not(.bootstrap-dialog) { width: calc(100vw - 20px); }
    .bootstrap-dialog .modal-header,
    .modal:not(.bootstrap-dialog) .modal-header { padding: 16px 16px 12px; }
    .bootstrap-dialog .modal-body,
    .modal:not(.bootstrap-dialog) .modal-body { padding: 4px 16px 16px; }
    .bootstrap-dialog .modal-footer,
    .modal:not(.bootstrap-dialog) .modal-footer { padding: 12px 16px 16px; }
    .bootstrap-dialog .modal-footer .btn { flex: 1 1 auto; }
}