@font-face {
    font-family: 'Mercury114';
    src: url('fonts/font.eot');
    src: url('fonts/font.eot') format('embedded-opentype'),
        url('fonts/font.woff2') format('woff2'),
        url('fonts/font.woff') format('woff'),
        url('fonts/font.ttf') format('truetype'),
        url('fonts/font.svg#font') format('svg');
}

html, body {
    font-family: 'Mercury114';
    margin: 0;
    padding: 0;
    background: #ececec;
    color: #000;
    height: 100vh;
    overflow: hidden;
}

#app_table {
    width: 100vw;
    height: 100vh;
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: stretch;
    position: relative;
    overflow: hidden;
    background: #ececec !important;
}

#app_table.mini {
    /* В мини-режиме - то же */
}

/* Основной контейнер меню - 75% ширины слева, полная высота */
#menuList {
    display: flex;
    height: 100vh;
    width: 75vw;
    flex-flow: row nowrap;
    justify-content: space-between;
    gap: clamp(1.5vh, 3.5vw, 2vh);
    padding: clamp(1.5vh, 2.5vw, 2vh) clamp(2.5vh, 4.5vw, 3.5vh);
    box-sizing: border-box;
    flex: 3;
    overflow: hidden;
    align-self: stretch;
}

/* Колонки меню - равные, без скролла, полная высота */
.menuList {
    display: flex;
    flex-flow: column nowrap;
    flex: 1;
    min-width: 0;
    position: relative;
    overflow: hidden;
    min-height: 100%;
}

/* Контейнеры для разных колонок */
#menuList1,
#menuList2,
#menuList3 {
    flex: 1;
}

/* Категории - шрифт адаптивно от vh */
.catTitle {
    font-family: 'Mercury114';
    font-size: clamp(2vh, 3vw, 2.5vh);
    text-transform: uppercase;
    margin: clamp(0.8vh, 1.5vh, 1vh) 0 clamp(0.3vh, 1.2vh, 0.5vh) 0;
    padding: clamp(0.15vh, 0.5vh, 0.25vh) 0;
    line-height: 1.1;
}

.catTitleMain {
    position: absolute;
    margin: 0;
    top: clamp(1vh, 2vh, 1.5vh);
    left: calc(-1 * clamp(2.5vh, 4.5vw, 3vh));
    font-family: 'Mercury114';
    font-size: clamp(2.5vh, 4vw, 3vh);
    z-index: 1;
    transform: scale(-1, -1) translate(100%) rotate(90deg);
    transform-origin: right;
    line-height: 1.1;
    height: clamp(1.5vh, 3.5vh, 2vh);
    display: flex;
    align-items: end;
    text-align: right;
    text-transform: uppercase;
}

/* ВАЖНОЕ ИЗМЕНЕНИЕ: Заголовки объемов над ценами */
.sizeCont {
    display: flex;
    justify-content: flex-end;
    margin: clamp(0.4vh, 1.2vh, 0.6vh) 0 clamp(0.15vh, 0.6vh, 0.25vh) 0;
    padding: 0;
}

.price-header {
    display: flex;
    gap: clamp(0.8vh, 2vw, 1.2vh);
    min-width: clamp(6vh, 12vw, 7vh);
    justify-content: flex-end;
    margin-left: clamp(0.5vh, 1.2vw, 0.8vh);
}

.size-label {
    min-width: clamp(2.8vh, 5vw, 3.2vh);
    text-align: right;
    font-size: clamp(1.5vh, 2.5vw, 1.8vh);
    text-transform: uppercase;
    font-family: 'Mercury114';
}

/* Специфичные отступы для заголовков объемов в разных колонках */
#menuList1 .price-header {
    margin-left: clamp(1.2vh, 2.5vw, 1.8vh);
}

#menuList2 .price-header {
    margin-left: clamp(1vh, 1.8vw, 1.5vh);
}

#menuList3 .price-header {
    margin-left: clamp(0.8vh, 1.2vw, 1.2vh);
}

/* Позиции меню - цены в строку */
.item {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin: 0;
    padding: clamp(0.08vh, 0.4vh, 0.2vh) clamp(1vh, 12px, 1.5vh);
    min-height: auto;
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.item .name {
    flex: 1;
    min-width: 0;
    padding-right: clamp(1vh, 2.5vw, 1.5vh);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
}

.item .name span {
    font-size: clamp(1.5vh, 3vw, 1.8vh);
    line-height: 1.1;
    text-transform: uppercase;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    display: block;
    width: 100%;
}

.item .leader-dots {
    display: none;
    width: 100%;
    height: 0.15vh;
    background: repeating-linear-gradient(
        to right,
        transparent 0%,
        #ccc 0%,
        #ccc 0.15vh,
        transparent 0.15vh,
        transparent 0.3vh
    );
    opacity: 0.5;
    margin-top: 0.25vh;
    align-self: flex-start;
}

.itemDesc {
    font-size: clamp(1.2vh, 2.2vw, 1.5vh);
    line-height: 1.1;
    margin: 0 0 0 0;
    color: #666;
    font-style: italic;
    text-transform: none;
    font-family: 'Mercury114';
}

/* Цены в строку */
.item .price {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-end;
    min-width: clamp(6vh, 12vw, 7vh);
    gap: clamp(0.8vh, 2vw, 1.2vh);
    flex-shrink: 0;
    margin-left: clamp(0.5vh, 1.2vw, 0.8vh);
}

.item .price span {
    min-width: clamp(2.8vh, 5vw, 3.2vh);
    text-align: right;
    font-size: clamp(1.5vh, 3vw, 1.8vh);
    white-space: nowrap;
    line-height: 1;
}

/* Специфичные стили для колонок */
#menuList1 .item .price {
    margin-left: clamp(1.2vh, 2.5vw, 1.8vh);
}

#menuList2 .item .price {
    margin-left: clamp(1vh, 1.8vw, 1.5vh);
}

#menuList3 .item .price {
    margin-left: clamp(0.8vh, 1.2vw, 1.2vh);
}

/* QR коды */
.qr-row {
    display: flex;
    justify-content: center;
    width: 100%;
    overflow: hidden;
}

.qr-img {
    max-width: 80%;
    height: auto;
    flex: 1;
    clip-path: inset(33% 0 0 0);
}

/* Media queries для меньших экранов */
@media (max-height: 800px) {
    #menuList {
        gap: 1.5vh;
        padding: 1vh 2vh;
    }
    
    .catTitle {
        font-size: 1.5vh;
        margin: 0.6vh 0 0.4vh 0;
    }
    
    .catTitleMain {
        font-size: 2vh;
        top: 1vh;
        left: -2.5vh;
    }
    
    .sizeCont {
        margin: 0.4vh 0 0.25vh 0;
    }
    
    .price-header {
        min-width: 6vh;
        gap: 0.8vh;
        margin-left: 0.5vh;
    }
    
    .size-label {
        min-width: 2.8vh;
        font-size: 1.2vh;
    }
    
    .item .name span {
        font-size: 1.2vh;
        line-height: 1.05;
    }
    
    .itemDesc {
        font-size: 1vh;
        line-height: 1.05;
    }
    
    .item .price span {
        font-size: 1.2vh;
        min-width: 2.8vh;
    }
    
    .item .price {
        min-width: 6vh;
        gap: 0.8vh;
    }
    
    .qr-img {
        max-width: 75%;
    }
}

/* Остальные стили остаются без изменений */
.order-panel {
    opacity: 1;
    position: relative;
    z-index: 999;
    width: 25vw;
    height: 100vh;
    background: #1D1D1B;
    color: #fff;
    padding: clamp(1.5vh, 4vh, 2.5vh) 0;
    transition: all 1.5s 1.2s;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    flex: 1;
}

.order-container {
    flex: 1;
    overflow: hidden;
}

.order-panel .order-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.order-panel .placeholder-text {
    white-space: nowrap;
    text-align: center;
    color: #fff;
    font-family: 'Mercury114';
    font-size: clamp(1.8vh, 4.5vh, 2.5vh);
}

.order-panel .order-info {
    font-family: 'Mercury114';
    font-size: clamp(1.8vh, 4.5vh, 2.5vh);
    color: #fff;
    padding: 0 clamp(1.5vh, 6vw, 2.5vh);
}

.order-panel .order-info-changed {
    animation: fadeIn 0.3s ease-out;
}

.order-panel .items-container {
    margin-top: 0.4vh;
    display: flex;
    flex-direction: column;
}

.order-panel .items-container .order-item:nth-child(even) {
    background: #232323;
}

.order-panel .order-item {
    display: flex;
    height: clamp(4vh, 8vh, 6vh);
    padding: clamp(1vh, 2.5vh, 1.5vh) clamp(1.5vh, 6vw, 2.5vh);
    font-family: 'Mercury114';
}

.order-panel .order-item-new {
    animation: slideIn 0.3s ease-out;
}

.order-panel .order-item-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-left: clamp(1vh, 2.5vw, 1.5vh);
}

.order-panel .order-item-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: clamp(1.3vh, 3vh, 1.8vh);
}

.order-panel .order-comment {
    color: #9b9b9b;
    font-size: clamp(1.2vh, 2.5vh, 1.5vh);
    margin: 0.15vh 0 0 0;
}

.order-panel .order-item-price-info {
    margin-top: auto;
    display: flex;
    align-items: center;
    width: 100%;
}

.order-panel .price {
    flex: 1;
    text-align: left;
    font-size: clamp(1.3vh, 3vh, 1.8vh);
}

.order-panel .quantity {
    flex: 1;
    text-align: center;
    font-size: clamp(1.3vh, 3vh, 1.8vh);
}

.order-panel .quantity-changed {
    animation: scaleHighlight 0.2s ease;
}

.order-panel .total {
    flex: 1;
    text-align: right;
    font-size: clamp(1.3vh, 3vh, 1.8vh);
}

.order-panel .order-item-image {
    width: clamp(6vh, 12vw, 7vh);
    height: 100%;
    object-fit: cover;
    border-radius: 0.375rem;
    background-color: #e5e7eb;
}

.order-panel .image-loading {
    background-color: #e5e7eb;
}

.order-panel .order-total {
    margin-top: 0.5vh;
    font-weight: 0;
}

.order-panel .order-total-container {
    display: flex;
    justify-content: space-between;
    margin: 0 0 clamp(1vh, 2.5vh, 1.5vh) 0;
}

.order-panel .order-total-details {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0 clamp(1.5vh, 6vw, 2.5vh);
}

.order-panel .order-total-details > span {
    font-size: clamp(2.5vh, 6vh, 3.5vh);
    position: absolute;
    right: clamp(1.5vh, 6vw, 2.5vh);
    bottom: clamp(5vh, 8vh, 7vh);
    line-height: clamp(1.5vh, 3.5vh, 2vh);
    font-family: 'Mercury114';
}

.order-panel .customer-changed {
    animation: fadeIn 0.3s ease-out;
}

.order-panel .order-total-final {
    text-align: right;
    font-size: clamp(1.6vh, 3.5vh, 2.2vh);
}

.order-panel .order-total-final-changed {
    animation: scaleHighlight 0.2s ease;
}

.order-panel .qr-container {
    height: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background-color: #f9fafb;
    padding: 1rem;
}

.order-panel .qr-image {
    width: clamp(7vh, 18vw, 9vh);
    height: clamp(7vh, 18vw, 9vh);
}

.order-panel .spacer {
    height: 0.5vh;
}

.order-panel .loading-indicator {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f3f4f6;
    opacity: 0.75;
}

.order-panel .spinner {
    width: 2.8vh;
    height: 2.8vh;
    border: 0.3vh solid #e5e7eb;
    border-top: 0.3vh solid #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.poditog {
    text-align: right;
    font-size: clamp(1.5vh, 3.5vh, 2.2vh);
    margin: clamp(1.5vh, 5vh, 2.5vh) clamp(1.5vh, 6vw, 2.5vh) 0 0;
    font-family: 'Mercury114';
}

.skidka {
    font-size: clamp(1.6vh, 4vh, 2.5vh);
    margin: clamp(2.5vh, 7vh, 4vh) 0 0 0;
    font-family: 'Mercury114';
}

.client {
    font-size: clamp(1.5vh, 3.5vh, 2.2vh);
    margin: clamp(0.8vh, 2.5vh, 1.2vh) 0 0 0;
    font-family: 'Mercury114';
}

.ordinf {
    display: block;
    font-size: clamp(1.2vh, 2.5vh, 1.5vh);
    margin: 0 0 clamp(0.15vh, 0.5vh, 0.25vh) 0;
    font-family: 'Mercury114';
}

/* Анимации */
@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleHighlight {
    0% { transform: scale(1); color: inherit; }
    50% { transform: scale(1.2); color: #3b82f6; }
    100% { transform: scale(1); color: inherit; }
}

@keyframes slideIn {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Специфичные цвета */
.item .name span[style*="color:#ff0000"] {
    color: #ff0000 !important;
    font-weight: bold;
}