/* =================================================== */
/* === BASE PRODUCTION STYLES (v=legacy) === */
/* =================================================== */

/* Убрал @font-face для Inter18 — используем Google Fonts 'Inter' */

html,
body {
    font-family: 'Inter', sans-serif;  /* Google Fonts Inter вместо 'Inter18' */
    margin: 0;
    padding: 0;
    background-color: #000000;
    color: #ffffff;
}

#app {
    width: 1920px;
    height: 1080px;
    background: #232323;
    overflow: hidden;
    position: relative;
}

.items {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    justify-content: flex-start;
}

.items .item {
}

.orders {
    display: flex;
}

.work {
    width: 36%;
}

.done {
    width: 64%;
}

.orders .items .progress {
    position: absolute;
    background: #e501cf;
    height: 106px;
    z-index: 1;
    left: 0;
    top: 0;
    -webkit-transition: all 2.5s;
    -moz-transition: all 2.5s;
    -o-transition: all 2.5s;
    transition: all 2.5s;
    border-radius: 16px;
    /* width: 60% !important; */
}

.orders .item {
    opacity: 0;
    transition: 1s;
}

.orders .items .item {
    /* overflow: hidden; */
    position: relative;
    white-space: nowrap;
    width: 46%;
    margin: 0 2% 16px 2%;
    height: 116px;
}

.orders .items .item .name {
    position: absolute;
    z-index: 2;
    align-items: center;
    justify-content: space-between;
    height: 106px;
    text-align: center;
    width: 100%;
    border-radius: 16px;
}

.items .back {
    /* opacity: 0; */
    background: #424242;
    width: 100%;
    height: 106px;
    border-radius: 16px;
}

.orders .items .item .name span:nth-child(1) {
    text-align: center;
    /* min-width: 50px; */
    font-size: 80px;
    line-height: 106px;
}

.orders .items .item .name span:nth-child(2) {
    /* min-width: 53px; */
    padding: 0 0px 0 4px;
    width: 100%;
    /* text-align: center; */
}

.orders .items {
    margin: 0 0 0 0;
    padding: 0 10px 0 40px;
    /* height: 132px; */
    display: flex;
    flex-wrap: wrap;
    font-size: 0.75em;
    justify-content: flex-start;
}

.name.muted {
    color: #888;
}

.work .ordersTitle {}

.done .ordersTitle {}

.orders .items#orders2 .item {
    width: 31%;
    margin: 0px 1% 25px 1%;
    height: 160px;
}

.orders .items#orders2 .item .name {
    height: 160px;
    /* color: #232323; */
}

.items#orders2 .back {
    height: 160px;
}

.orders .items#orders2 .progress {
    height: 160px;
    background: #00bd43;
}

.orders .items#orders2 .item .name span:nth-child(1) {
    line-height: 160px;
    font-size: 96px;
    font-weight: bold;
}

.work .orderTitle {
    font-size: 54px;
    text-transform: uppercase;
    line-height: 80px;
    margin: 22px 0 22px 50px;
}

.orders .items#orders2 {
    padding: 0 30px 0 20px;
}

.done .orderTitle {
    font-size: 72px;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 80px;
    margin: 22px 0 22px 30px;
}

#bgbottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 1920px;
    height: 58px;
    z-index: 1000;
    background: rgb(35, 35, 35);
    background: linear-gradient(0deg, rgba(35, 35, 35, 1) 0%, rgba(35, 35, 35, 0) 100%);
}

.showIfItems {
    opacity: 0;
}

.orders .items .item .back span {
    opacity: 0;
    text-align: center;
    /* min-width: 50px; */
    font-size: 80px;
    line-height: 106px;
}

/* =================================================== */
/* === TIER 2: ADD BACKGROUND ONLY (v=with-bg) === */
/* Applied ONLY when the body has class="with-background" */
/* =================================================== */
body.with-background {
    background-image: url('./mw_orders_background.png');
    background-size: 100% 100%; /* Растягивает на весь экран без обрезки */
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Make the #app container fluid and add a semi-transparent overlay */
body.with-background #app {
    width: 100vw; /* Use 100% of the viewport width */
    height: 100vh; /* Use 100% of the viewport height */
    padding: 40px; /* Add some space around the edges */
    box-sizing: border-box; /* Ensures padding is included in the total width/height */
    background-color: rgba(0, 0, 0, 0.2); /* Уменьшил opacity до 0.2 для меньшего затемнения */
}

/* =================================================== */
/* === TIER 3: ENHANCED VERSION (v=enhanced) === */
/* This is the Legacy style + Background + Swapped Column Layout */
/* =================================================== */

/* 1. Add the background image */
body.enhanced {
    background-image: url('./mw_orders_background.png');
    background-size: 100% 100%; /* Растягивает на весь экран без обрезки */
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* 2. Make the #app container fluid and add an overlay for readability */
body.enhanced #app {
    width: 100vw;
    height: 100vh;
    padding: 40px;
    box-sizing: border-box;
    background: none; /* Убрал оверлей полностью — фон чистый, цвета яркие */
}

/* 3. Swap the main column widths */
body.enhanced .work {
    width: 60%;
}

body.enhanced .done {
    width: 40%;
}

/* 4. Swap the item widths and margins to create the new grid */

/* "Cooking" items (in #orders) will have 3 columns. */
body.enhanced .work #orders .item {
    width: 31%;
    margin: 0 1% 25px 1%;
}

/* "Ready" items (in #orders2) will have 2 columns.
   This selector is now specific enough to override the original style. */
body.enhanced .done #orders2 .item {
    width: 46%;
    margin: 0 2% 16px 2%;
}