/* ASPIRIN UI V145 */


/* ======================================================
   СТАРЫЙ РЕДАКТОР УСЛУГ СКРЫВАЕМ
   ====================================================== */

.a3-create-service {
    display:none !important;
}


/* ======================================================
   УСЛУГИ — ТОЛЬКО ДВЕ СТРОКИ
   ====================================================== */

.a145-services {
    display:grid;
    gap:8px;
}

.a145-row {
    display:flex;
    gap:7px;

    overflow-x:auto;

    padding:1px 0 3px;

    scrollbar-width:none;
}

.a145-row::-webkit-scrollbar {
    display:none;
}

.a145-group {
    flex:0 0 auto;

    min-height:38px;

    padding:0 13px;

    border:1px solid var(--line);
    border-radius:13px;

    background:rgba(255,255,255,.04);
    color:#8e929a;

    font-size:10px;
    font-weight:900;

    white-space:nowrap;
}

.a145-group.active {
    color:var(--accent);

    border-color:
        rgba(217,255,67,.35);

    background:
        rgba(217,255,67,.09);
}

.a145-count {
    margin-left:5px;
    opacity:.75;
}

.a145-service {
    flex:0 0 auto;

    display:flex;

    min-height:42px;

    overflow:hidden;

    border:1px solid var(--line);
    border-radius:13px;

    background:
        rgba(255,255,255,.045);
}

.a145-service.selected {
    border-color:
        rgba(217,255,67,.42);

    background:
        rgba(217,255,67,.11);
}

.a145-service-name {
    padding:0 11px;

    border:0;

    background:transparent;
    color:#d7d9dd;

    font-size:10px;
    font-weight:850;

    white-space:nowrap;
}

.a145-service.selected
.a145-service-name {
    color:var(--accent);
}

.a145-service-edit {
    width:36px;

    border:0;
    border-left:
        1px solid rgba(255,255,255,.06);

    background:
        rgba(255,255,255,.025);

    color:#999da5;

    font-size:14px;
}

.a145-new-service {
    flex:0 0 auto;

    min-height:42px;

    padding:0 13px;

    border:1px dashed
        rgba(217,255,67,.30);

    border-radius:13px;

    background:
        rgba(217,255,67,.05);

    color:var(--accent);

    font-size:10px;
    font-weight:900;

    white-space:nowrap;
}


/* ======================================================
   РЕДАКТОР УСЛУГ
   ====================================================== */

.a145-modal {
    position:fixed;
    inset:0;

    z-index:4000;

    display:none;
    align-items:flex-end;

    background:
        rgba(0,0,0,.72);

    backdrop-filter:blur(8px);
}

.a145-modal.visible {
    display:flex;
}

.a145-sheet {
    width:100%;

    padding:
        20px
        16px
        calc(
            22px
            + env(safe-area-inset-bottom)
        );

    border-radius:
        27px 27px 0 0;

    border-top:
        1px solid var(--line);

    background:#111316;
}

.a145-sheet-head {
    display:flex;
    align-items:center;

    margin-bottom:16px;
}

.a145-sheet-title {
    flex:1;

    font-size:19px;
    font-weight:900;
}

.a145-close {
    width:39px;
    height:39px;

    border:1px solid var(--line);
    border-radius:12px;

    background:var(--card);
    color:white;

    font-size:18px;
}

.a145-editor-buttons {
    display:grid;
    grid-template-columns:1fr auto;
    gap:8px;
}

.a145-save {
    height:49px;

    border:0;
    border-radius:15px;

    background:var(--accent);
    color:#080908;

    font-weight:900;
}

.a145-delete {
    display:none;

    width:52px;

    border:1px solid
        rgba(255,80,80,.25);

    border-radius:15px;

    background:
        rgba(255,80,80,.07);

    color:#ff7979;
}

.a145-delete.visible {
    display:block;
}


/* ======================================================
   ПРИЁМКА — КОМПАКТНАЯ ШАПКА
   ====================================================== */

.a145-reception {
    display:grid;
    gap:12px;
}

.a145-summary {
    padding:15px;

    border:1px solid var(--line);
    border-radius:20px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(217,255,67,.07),
            transparent 42%
        ),
        rgba(255,255,255,.03);
}

.a145-car {
    font-size:22px;
    font-weight:950;
}

.a145-plate {
    margin-top:3px;

    color:var(--accent);

    font-size:14px;
    font-weight:900;
}

.a145-client {
    margin-top:9px;

    color:#a0a4ac;

    font-size:10px;
}

.a145-meta {
    display:flex;
    align-items:center;
    gap:7px;

    margin-top:11px;

    font-size:9px;
}

.a145-meta-main {
    flex:1;

    min-width:0;

    padding:8px 10px;

    border-radius:11px;

    background:
        rgba(255,255,255,.045);

    color:#c8cbd0;
}

.a145-status {
    flex:0 0 auto;

    padding:8px 9px;

    border-radius:11px;

    background:
        rgba(255,255,255,.05);

    color:#999da5;

    font-size:8px;
    font-weight:900;
}

.a145-status.in_progress {
    color:#ffd45f;

    background:
        rgba(255,204,77,.10);
}

.a145-status.done {
    color:#6ce59b;

    background:
        rgba(90,225,140,.10);
}

.a145-order-services {
    margin-top:9px;

    color:#8f939b;

    font-size:9px;
    line-height:1.4;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;

    overflow:hidden;
}


/* ======================================================
   СЕКЦИИ ПРИЁМКИ
   ====================================================== */

.a145-section {
    padding:14px;

    border:1px solid var(--line);
    border-radius:20px;

    background:
        rgba(255,255,255,.028);
}

.a145-title {
    font-size:13px;
    font-weight:900;
}

.a145-sub {
    margin-top:4px;

    color:#81858d;

    font-size:9px;
    line-height:1.4;
}


/* ======================================================
   СХЕМА АВТО
   ====================================================== */

.a145-car-map {
    width:100%;
    max-width:290px;

    display:block;

    margin:12px auto 5px;
}

.a145-body {
    fill:
        rgba(255,255,255,.035);

    stroke:
        rgba(255,255,255,.16);

    stroke-width:2;
}

.a145-wheel {
    fill:#33363a;
}

.a145-window {
    fill:
        rgba(100,165,195,.12);

    stroke:
        rgba(125,185,210,.22);

    stroke-width:1.5;
}

.a145-zone {
    cursor:pointer;

    fill:
        rgba(255,255,255,.025);

    stroke:
        rgba(255,255,255,.10);

    stroke-width:2;
}

.a145-zone.selected {
    fill:
        rgba(217,255,67,.17);

    stroke:var(--accent);
}

.a145-zone.issue {
    fill:
        rgba(255,90,75,.13);

    stroke:
        rgba(255,100,85,.75);
}

.a145-zone.issue.selected {
    fill:
        rgba(217,255,67,.18);

    stroke:var(--accent);
}

.a145-zone-label {
    pointer-events:none;

    fill:#858992;

    font-size:8px;

    text-anchor:middle;
}

.a145-selected-zone {
    margin-top:8px;

    min-height:35px;

    display:flex;
    align-items:center;

    padding:0 10px;

    border-radius:11px;

    background:
        rgba(217,255,67,.06);

    color:var(--accent);

    font-size:9px;
    font-weight:850;
}

.a145-issue-buttons {
    display:grid;
    grid-template-columns:1fr auto;
    gap:7px;

    margin-top:7px;
}

.a145-issue-save {
    height:43px;

    border:0;
    border-radius:13px;

    background:var(--accent);
    color:#080908;

    font-size:10px;
    font-weight:900;
}

.a145-reset {
    width:48px;

    border:1px solid var(--line);
    border-radius:13px;

    background:var(--card);
    color:#92969e;
}


/* ======================================================
   ЗАМЕЧАНИЯ
   ====================================================== */

.a145-issues {
    display:grid;
    gap:7px;

    margin-top:11px;
}

.a145-issue {
    display:grid;
    grid-template-columns:1fr auto;
    gap:7px;

    padding:9px 10px;

    border:1px solid var(--line);
    border-radius:12px;

    background:
        rgba(255,255,255,.035);
}

.a145-issue-zone {
    color:var(--accent);

    font-size:9px;
    font-weight:850;
}

.a145-issue-text {
    margin-top:3px;

    color:#c6c9ce;

    font-size:10px;
}

.a145-tools {
    display:flex;
    gap:4px;
}

.a145-tool {
    width:29px;
    height:29px;

    border:0;
    border-radius:9px;

    background:
        rgba(255,255,255,.06);

    color:#a0a4ac;
}

.a145-tool.delete {
    color:#ff7979;
}


/* ======================================================
   РУЧНОЙ КОММЕНТАРИЙ
   ====================================================== */

.a145-note-save {
    width:100%;
    height:43px;

    margin-top:7px;

    border:1px solid
        rgba(217,255,67,.25);

    border-radius:13px;

    background:
        rgba(217,255,67,.065);

    color:var(--accent);

    font-size:10px;
    font-weight:900;
}


/* ======================================================
   ФОТО И ВИДЕО
   ====================================================== */

.a145-upload {
    position:relative;

    min-height:49px;

    display:grid;
    place-items:center;

    margin-top:10px;

    overflow:hidden;

    border:1px dashed
        rgba(217,255,67,.28);

    border-radius:14px;

    background:
        rgba(217,255,67,.045);

    color:var(--accent);

    font-size:10px;
    font-weight:900;
}

.a145-upload input {
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    opacity:0;
}

.a145-upload-status {
    min-height:16px;

    padding-top:6px;

    color:#858990;

    font-size:8px;

    text-align:center;
}

.a145-media {
    display:grid;
    grid-template-columns:
        repeat(3,1fr);

    gap:7px;

    margin-top:7px;
}

.a145-media-item {
    position:relative;

    aspect-ratio:1;

    overflow:hidden;

    border:1px solid var(--line);
    border-radius:13px;

    background:
        rgba(255,255,255,.045);
}

.a145-media-item img {
    width:100%;
    height:100%;

    object-fit:cover;
}

.a145-video {
    width:100%;
    height:100%;

    display:grid;
    place-items:center;

    color:#bcc0c6;

    font-size:25px;
}

.a145-media-delete {
    position:absolute;

    right:4px;
    top:4px;

    z-index:2;

    width:27px;
    height:27px;

    border:0;
    border-radius:9px;

    background:
        rgba(0,0,0,.72);

    color:#ff7d7d;
}


/* ======================================================
   ПРОСМОТР ФОТО / ВИДЕО
   ====================================================== */

.a145-viewer {
    position:fixed;
    inset:0;

    z-index:5000;

    display:none;
    align-items:center;
    justify-content:center;

    padding:18px;

    background:
        rgba(0,0,0,.94);
}

.a145-viewer.visible {
    display:flex;
}

.a145-viewer img,
.a145-viewer video {
    max-width:100%;
    max-height:82vh;

    border-radius:14px;
}

.a145-viewer-close {
    position:absolute;

    right:15px;

    top:calc(
        15px
        + env(safe-area-inset-top)
    );

    width:43px;
    height:43px;

    border:0;
    border-radius:14px;

    background:
        rgba(255,255,255,.12);

    color:white;

    font-size:20px;
}