/* =================================================== */
/* === BASE PRODUCTION STYLES (v=legacy) === */
/* =================================================== */
@font-face {
    font-family: 'Inter18';
    src: url('inter.ttf') format('truetype');
}

html,
body {
    font-family: 'Inter18', 'Inter', sans-serif;
    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('../media/mw_orders_background.png');
    background-size: cover;
    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); /* Overlay for readability */
}


/* =================================================== */
/* === 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('../media/mw_orders_background.png');
    background-size: cover;
    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: rgba(35, 35, 35, 0); 
}

/* 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%;
}

/* Target the number's direct container (.name) ONLY inside the "Ready" boxes.
   Make it slightly narrower than its parent green box (.item).
   The flexbox properties on .item will automatically center it, creating the padding effect. */
body.enhanced .done #orders2 .item .name {
    width: 90%;
    box-sizing: border-box; 
    padding: 0.2em 0.2em; 
}

body.enhanced #bgbottom {
    /* Make the element fluid and set its height to match our generated image */
    width: 100%;
    height: 33px; /* This is 1/3 the height used in the convert command */

    /* Remove the old gradient */
    background: none;

    /* seamless fade image: height: 33px is 100px/3 from 3840x100
    convert www/media/mw_orders_background.png -gravity South -crop 3840x100+0+0 www/media/temp_slice.png
    convert -size 3840x100 gradient:black-white www/media/temp_gradient.png
    convert www/media/temp_slice.png www/media/temp_gradient.png -alpha off -compose CopyOpacity -composite www/media/bottom_fade.png
    */
    background-image: url('../media/bottom_fade.png');
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 100% 100%; /* Stretch the image to fill the element */
}