/* z-index стойностите тук идват от централната скала (виж
   modules/Uixs/resources/css/z-index.css — потребителски feedback "стойности
   9999/1000... хаос... механизъм... 1 до 99") — НИКОГА суров брой директно
   тук, само var(--z-...). */

/* ── Backdrop ─────────────────────────────────────────────────────────────── */

/* position:fixed (не absolute) — виж потребителски feedback "при скролване
   надолу в страницата модалите се изместват" (ElementoLaboratory). Причина:
   ModalStack.getDomContainer() append-ва в document.body при липса на
   [data-modal-container] (виж по-долу) — body/html остават position:static
   там, значи containing block-ът на absolute е ЦЕЛИЯТ ДОКУМЕНТ (не
   viewport-а), затова backdrop-ът/панелите СКРОЛВАТ заедно със страницата
   вместо да останат залепени за екрана. fixed решава го директно.
   Override-ва се обратно на absolute САМО когато е директно дете на
   [data-modal-container] (виж по-долу) — MobileLayout shell-ът (shell.html)
   нарочно контейнира модала В РАМКИТЕ на тесния "телефонен" стълб
   (position-relative), не в целия browser viewport; position:fixed НЕ
   уважава position:relative предшественик като containing block (само
   transform/filter/perspective го правят) — без override-а модалът би
   "избягал" извън тесния стълб и би покрил ЦЕЛИЯ viewport на десктоп,
   счупвайки съществуващия дизайн там. */
.cModal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 20, 30, 0.5);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: var(--z-modal-backdrop);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
}

.cModal-backdrop--visible {
    opacity: 1;
    pointer-events: all;
}

/* ── Wrapper ──────────────────────────────────────────────────────────────── */

.cModal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    pointer-events: none;
    overflow-y: auto;
}

/* MobileLayout shell — виж коментара над .cModal-backdrop по-горе. */
[data-modal-container] > .cModal-backdrop,
[data-modal-container] > .cModal {
    position: absolute;
}

/* ── Dialog ───────────────────────────────────────────────────────────────── */

.cModal-dialog {
    position: relative;
    width: 100%;
    pointer-events: all;
    background: #fff;
    border-radius: 0.625rem;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(0,0,0,.08),
        0 4px 8px rgba(0,0,0,.06),
        0 16px 32px rgba(0,0,0,.14),
        0 32px 64px rgba(0,0,0,.10);
    opacity: 0;
}

.cModal-dialog--xs { max-width: 240px; }
.cModal-dialog--sm { max-width: 360px; }
.cModal-dialog--md { max-width: 520px; }
.cModal-dialog--lg { max-width: 760px; }
.cModal-dialog--xl { max-width: 1000px; }

/* full — edge-to-edge, покрива целия [data-modal-container] (mobile shell-а) */
.cModal-dialog--full {
    position: absolute;
    inset: 0;
    max-width: none;
    width: 100%;
    height: 100%;
    border-radius: 0;
}

.cModal-dialog--full .cModal-content { max-height: none; height: 100%; }

/* ── Animation: drop (default) ───────────────────────────────────────────── */

@keyframes cModal-drop {
    0%   { opacity: 1; transform: translateY(-110vh); }
    60%  { transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes cModal-fall {
    0%   { opacity: 1; transform: translateY(0); }
    22%  { transform: translateY(-18px); }
    100% { opacity: 0; transform: translateY(110vh); }
}

.cModal--open .cModal-dialog--anim-drop {
    animation: cModal-drop 580ms ease forwards;
}

.cModal--closing .cModal-dialog--anim-drop {
    animation: cModal-fall 360ms cubic-bezier(0.4,0,1,1) forwards;
}

/* ── Animation: scene — старт от центъра, разгъва се отвътре навън с лек "flash" ── */

@keyframes cModal-scene-in {
    0%   { opacity: 0; transform: scale(.2);  filter: brightness(2.4); }
    55%  { opacity: 1; transform: scale(1.04); filter: brightness(1.3); }
    100% { opacity: 1; transform: scale(1);   filter: brightness(1); }
}

@keyframes cModal-scene-out {
    0%   { opacity: 1; transform: scale(1);  filter: brightness(1); }
    100% { opacity: 0; transform: scale(.2); filter: brightness(2.2); }
}

.cModal--open .cModal-dialog--anim-scene {
    animation: cModal-scene-in 420ms cubic-bezier(.34, 1.56, .64, 1) forwards;
}

.cModal--closing .cModal-dialog--anim-scene {
    animation: cModal-scene-out 280ms ease-in forwards;
}

/* ── Paused (stack) ───────────────────────────────────────────────────────── */

.cModal--paused {
    display: none;
}

/* ── Shake ────────────────────────────────────────────────────────────────── */

@keyframes cModal-shake {
    0%,  100% { transform: translateX(0); }
    10%        { transform: translateX(-10px); }
    25%        { transform: translateX(9px); }
    40%        { transform: translateX(-7px); }
    55%        { transform: translateX(6px); }
    70%        { transform: translateX(-4px); }
    85%        { transform: translateX(2px); }
}

.cModal--shaking .cModal-dialog {
    animation: cModal-shake 480ms cubic-bezier(0.36,0.07,0.19,0.97);
}

/* ── Content ──────────────────────────────────────────────────────────────── */

/* --bm-safe-top/--bm-safe-bottom — резервираното safe-area разстояние на
 * MobileLayout .bm-app (виж mobilelayout.css) — 0px fallback тук, за модали
 * извън тоя контекст (custom property наследяване, не важи layout позицията
 * fixed/absolute на .cModal). Без тях max-height НЕ отчиташе, че .cModal
 * wrapper-ът реално живее вътре в подложената (padded) safe-area зона на
 * .bm-app — при достатъчно високо съдържание диалогът се разпъваше отвъд
 * реално наличната височина и визуално влизаше в тая запазена зона
 * (потвърдено потребителски feedback — "Редакция на поръчка" модала, Drivers). */
:root {
    --bm-safe-top:    0px;
    --bm-safe-bottom: 0px;
}

.cModal-content {
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - 2rem - var(--bm-safe-top) - var(--bm-safe-bottom));
    overflow: hidden;
}

/* ── Header ───────────────────────────────────────────────────────────────── */

.cModal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    padding: 1rem 1rem .875rem;
    border-bottom: 1px solid #f1f5f9;
}

.cModal-titles { flex: 1; min-width: 0; }

.cModal-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    color: #0f172a;
    letter-spacing: -.01em;
}

.cModal-subtitle {
    margin: .15rem 0 0;
    font-size: .78125rem;
    color: #94a3b8;
    line-height: 1.4;
    transition: opacity 150ms ease;
}

.cModal-subtitle:empty { display: none; }

/* ── Close button ─────────────────────────────────────────────────────────── */

.cModal-close {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.875rem;
    height: 1.875rem;
    padding: 0;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: .375rem;
    color: #94a3b8;
    cursor: pointer;
    transition: background 120ms, color 120ms, border-color 120ms;
    margin-top: -.0625rem;
}

.cModal-close:hover  { background: #f1f5f9; border-color: #cbd5e1; color: #475569; }
.cModal-close:active { background: #e2e8f0; }

/* GroupModal centerClose (default true) — плаващ бутон директно върху
   backdrop-а, затваря ЦЯЛАТА група (не конкретен панел). Досега нямаше
   никакъв CSS — рендваше се като чисто неоформен native бутон в горния
   ляв ъгъл (default block flow позиция на .cModal-backdrop). */
.cModal-center-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: var(--z-modal-overlay);
}

.cModal-center-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    background: #ffffff;
    border: none;
    border-radius: 50%;
    color: #475569;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    transition: background 120ms, color 120ms, transform 120ms;
}

.cModal-center-close-btn:hover  { background: #f1f5f9; color: #1e293b; }
.cModal-center-close-btn:active { transform: scale(0.94); }

.cModal-header-action { flex-shrink: 0; align-self: center; }
.cModal-header-action-left { flex-shrink: 0; align-self: center; }

/* ── Body ─────────────────────────────────────────────────────────────────── */

.cModal-body {
    padding: 1rem;
    overflow-y: auto;
    flex: 1;
}

/* ── Body step transitions ────────────────────────────────────────────────── */

@keyframes cModal-slide-out-fwd  { to { transform: translateX(-24px); opacity: 0; } }
@keyframes cModal-slide-out-bwd  { to { transform: translateX(24px);  opacity: 0; } }
@keyframes cModal-slide-in-fwd   { from { transform: translateX(24px);  opacity: 0; } }
@keyframes cModal-slide-in-bwd   { from { transform: translateX(-24px); opacity: 0; } }

.cModal-body--out-fwd { animation: cModal-slide-out-fwd 200ms ease forwards; overflow: hidden; }
.cModal-body--out-bwd { animation: cModal-slide-out-bwd 200ms ease forwards; overflow: hidden; }
.cModal-body--in-fwd  { animation: cModal-slide-in-fwd  220ms ease forwards; overflow: hidden; }
.cModal-body--in-bwd  { animation: cModal-slide-in-bwd  220ms ease forwards; overflow: hidden; }

/* ── Footer ───────────────────────────────────────────────────────────────── */

.cModal-footer {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .875rem 1rem;
    border-top: 1px solid #f1f5f9;
    background: #f8fafc;
    border-radius: 0 0 0.625rem 0.625rem;
    transition: opacity 150ms ease;
}

.cModal-footer:empty { display: none; }

/* ── Canvas body padding ──────────────────────────────────────────────────── */

.cModal--canvas-left .cModal-body,
.cModal--canvas-right .cModal-body,
.cModal--canvas-top .cModal-body,
.cModal--canvas-bottom .cModal-body {
    padding: 1rem 1.25rem;
}

/* ── Flush body (no padding) ──────────────────────────────────────────────── */

.cModal-body--flush {
    padding: 0;
}

/* ── Scrollbar ────────────────────────────────────────────────────────────── */

.cModal-body::-webkit-scrollbar        { width: 6px; }
.cModal-body::-webkit-scrollbar-track  { background: transparent; }
.cModal-body::-webkit-scrollbar-thumb  { background: #cbd5e1; border-radius: 3px; }
.cModal-body::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ── Canvas (drawer / offcanvas) ──────────────────────────────────────────── */

.cModal--canvas-left,
.cModal--canvas-right,
.cModal--canvas-top,
.cModal--canvas-bottom {
    padding: 0;
    overflow: hidden;
}

.cModal--canvas-left .cModal-footer,
.cModal--canvas-right .cModal-footer { border-radius: 0; }

.cModal--canvas-top .cModal-footer    { border-radius: 0 0 0.625rem 0.625rem; }
.cModal--canvas-bottom .cModal-footer { border-radius: 0; }

/* Side drawers */
.cModal--canvas-left,
.cModal--canvas-right { align-items: stretch; }

.cModal--canvas-left  { justify-content: flex-start; }
.cModal--canvas-right { justify-content: flex-end; }

/* Sheet drawers */
.cModal--canvas-top,
.cModal--canvas-bottom { flex-direction: column; align-items: stretch; }

.cModal--canvas-top    { justify-content: flex-start; }
.cModal--canvas-bottom { justify-content: flex-end; }

/* ── Canvas dialog — side (left / right) ──────────────────────────────────── */

.cModal--canvas-left .cModal-dialog,
.cModal--canvas-right .cModal-dialog {
    max-height: calc(100% - 10px);
    opacity: 1;
    margin-top: 5px;
    margin-bottom: 5px;
}

.cModal--canvas-left .cModal-dialog  { transform: translateX(-100%); border-radius: 0 0.625rem 0.625rem 0; }
.cModal--canvas-right .cModal-dialog { transform: translateX(100%);  border-radius: 0.625rem 0 0 0.625rem; }

.cModal--canvas-left .cModal-content,
.cModal--canvas-right .cModal-content { max-height: 100dvh; }

/* Canvas size overrides */
.cModal--canvas-left .cModal-dialog--xs,
.cModal--canvas-right .cModal-dialog--xs { max-width: 160px; }

.cModal--canvas-left .cModal-dialog--sm,
.cModal--canvas-right .cModal-dialog--sm { max-width: 260px; }

.cModal--canvas-left .cModal-dialog--md,
.cModal--canvas-right .cModal-dialog--md { max-width: 340px; }

.cModal--canvas-left .cModal-dialog--lg,
.cModal--canvas-right .cModal-dialog--lg { max-width: 480px; }

.cModal--canvas-left .cModal-dialog--xl,
.cModal--canvas-right .cModal-dialog--xl { max-width: 640px; }

.cModal--canvas-left .cModal-dialog--wide,
.cModal--canvas-right .cModal-dialog--wide { max-width: 420px; }

/* ── Canvas dialog — sheet (top / bottom) ─────────────────────────────────── */

.cModal--canvas-top .cModal-dialog,
.cModal--canvas-bottom .cModal-dialog {
    width: calc(100% - 10px);
    max-width: calc(100% - 10px);
    max-height: 90dvh;
    opacity: 1;
    margin-left: 5px;
    margin-right: 5px;
}

.cModal--canvas-top .cModal-dialog    { transform: translateY(-100%); border-radius: 0 0 0.625rem 0.625rem; }
.cModal--canvas-bottom .cModal-dialog { transform: translateY(100%);  border-radius: 0.625rem 0.625rem 0 0; }

/* Size override — sheet (top/bottom), огледало на left/right по-горе. Без
   това sheet-овете ВИНАГИ пълнят 100% viewport ширина, независимо от size
   класа (canvas-left/right вече уважава size-а) — same фиксирани стойности
   като center dialog-а (виж .cModal-dialog--xs/sm/md/lg/xl най-горе във
   файла), не % от ширината — еднакво на мобилно и десктоп. max-width е
   само overflow guard за много тесни екрани, не responsive мащабиране. */
.cModal--canvas-top .cModal-dialog--xs,
.cModal--canvas-bottom .cModal-dialog--xs { align-self: center; width: 240px; max-width: calc(100% - 20px); }

.cModal--canvas-top .cModal-dialog--sm,
.cModal--canvas-bottom .cModal-dialog--sm { align-self: center; width: 360px; max-width: calc(100% - 20px); }

.cModal--canvas-top .cModal-dialog--md,
.cModal--canvas-bottom .cModal-dialog--md { align-self: center; width: 520px; max-width: calc(100% - 20px); }

.cModal--canvas-top .cModal-dialog--lg,
.cModal--canvas-bottom .cModal-dialog--lg { align-self: center; width: 760px; max-width: calc(100% - 20px); }

.cModal--canvas-top .cModal-dialog--xl,
.cModal--canvas-bottom .cModal-dialog--xl { align-self: center; width: 1000px; max-width: calc(100% - 20px); }

.cModal--canvas-top .cModal-content,
.cModal--canvas-bottom .cModal-content { max-height: 90dvh; }

/* ── Canvas open animations ───────────────────────────────────────────────── */

@keyframes cModal-canvas-from-left   { to { transform: translateX(0); } }
@keyframes cModal-canvas-from-right  { to { transform: translateX(0); } }
@keyframes cModal-canvas-from-top    { to { transform: translateY(0); } }
@keyframes cModal-canvas-from-bottom { to { transform: translateY(0); } }

.cModal--canvas-left.cModal--open .cModal-dialog   { animation: cModal-canvas-from-left   300ms cubic-bezier(0.25,0.46,0.45,0.94) forwards; }
.cModal--canvas-right.cModal--open .cModal-dialog  { animation: cModal-canvas-from-right  300ms cubic-bezier(0.25,0.46,0.45,0.94) forwards; }
.cModal--canvas-top.cModal--open .cModal-dialog    { animation: cModal-canvas-from-top    300ms cubic-bezier(0.25,0.46,0.45,0.94) forwards; }
.cModal--canvas-bottom.cModal--open .cModal-dialog { animation: cModal-canvas-from-bottom 300ms cubic-bezier(0.25,0.46,0.45,0.94) forwards; }

/* ── Canvas close animations ──────────────────────────────────────────────── */

@keyframes cModal-canvas-to-left   { to { transform: translateX(-100%); } }
@keyframes cModal-canvas-to-right  { to { transform: translateX(100%); } }
@keyframes cModal-canvas-to-top    { to { transform: translateY(-100%); } }
@keyframes cModal-canvas-to-bottom { to { transform: translateY(100%); } }

.cModal--canvas-left.cModal--closing .cModal-dialog   { animation: cModal-canvas-to-left   240ms cubic-bezier(0.4,0,0.6,1) forwards; }
.cModal--canvas-right.cModal--closing .cModal-dialog  { animation: cModal-canvas-to-right  240ms cubic-bezier(0.4,0,0.6,1) forwards; }
.cModal--canvas-top.cModal--closing .cModal-dialog    { animation: cModal-canvas-to-top    240ms cubic-bezier(0.4,0,0.6,1) forwards; }
.cModal--canvas-bottom.cModal--closing .cModal-dialog { animation: cModal-canvas-to-bottom 240ms cubic-bezier(0.4,0,0.6,1) forwards; }

/* ── Modal group — height constraints ────────────────────────────────────── */

.cModal--canvas-top.cModal--grouped .cModal-dialog,
.cModal--canvas-top.cModal--grouped .cModal-content {
    max-height: 30dvh;
}

.cModal--canvas-bottom.cModal--grouped .cModal-dialog,
.cModal--canvas-bottom.cModal--grouped .cModal-content {
    max-height: 65dvh;
}

/* ── Modal group handle ───────────────────────────────────────────────────── */

.cModal-group-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: var(--z-modal-overlay);
    pointer-events: all;
}

.cModal-group-handle--in {
    animation: cModal-group-handle-in 400ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.cModal-group-handle--out {
    animation: cModal-group-handle-out 220ms cubic-bezier(0.4, 0, 1, 1) forwards;
}

@keyframes cModal-group-handle-in {
    from { opacity: 0; transform: translate(-50%, calc(-50% - 52px)); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}

@keyframes cModal-group-handle-out {
    from { opacity: 1; transform: translate(-50%, -50%); }
    to   { opacity: 0; transform: translate(-50%, calc(-50% - 52px)); }
}

.cModal-group-handle-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 10px rgba(0,0,0,.14), 0 0 0 1px rgba(0,0,0,.04);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #64748b;
    transition: background 120ms, color 120ms;
    padding: 0;
}

.cModal-group-handle-btn:hover  { background: #f1f5f9; color: #334155; }
.cModal-group-handle-btn:active { background: #e2e8f0; }