/* Thin 100 */
@font-face {
  font-family: "Poppins";
  src: url("/label-system/fonts/Poppins-Thin.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("/label-system/fonts/Poppins-ThinItalic.woff2") format("woff2");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

/* ExtraLight 200 */
@font-face {
  font-family: "Poppins";
  src: url("/label-system/fonts/Poppins-ExtraLight.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("/label-system/fonts/Poppins-ExtraLightItalic.woff2") format("woff2");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

/* Light 300 */
@font-face {
  font-family: "Poppins";
  src: url("/label-system/fonts/Poppins-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("/label-system/fonts/Poppins-LightItalic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

/* Regular 400 */
@font-face {
  font-family: "Poppins";
  src: url("/label-system/fonts/Poppins-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("/label-system/fonts/Poppins-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Medium 500 */
@font-face {
  font-family: "Poppins";
  src: url("/label-system/fonts/Poppins-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("/label-system/fonts/Poppins-MediumItalic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

/* SemiBold 600 */
@font-face {
  font-family: "Poppins";
  src: url("/label-system/fonts/Poppins-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("/label-system/fonts/Poppins-SemiBoldItalic.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

/* Bold 700 */
@font-face {
  font-family: "Poppins";
  src: url("/label-system/fonts/Poppins-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("/label-system/fonts/Poppins-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ExtraBold 800 */
@font-face {
  font-family: "Poppins";
  src: url("/label-system/fonts/Poppins-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("/label-system/fonts/Poppins-ExtraBoldItalic.woff2") format("woff2");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

/* Black 900 */
@font-face {
  font-family: "Poppins";
  src: url("/label-system/fonts/Poppins-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("/label-system/fonts/Poppins-BlackItalic.woff2") format("woff2");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Calibri";
  src: url("/label-system/fonts/calibri-bold-italic.woff2") format("woff2");
  font-display: swap;
}


body{
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    background: linear-gradient(90deg, #8aac20, #018a3a);
    background-color: #f5f5f5;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
}
body {
  font-family: "Poppins", sans-serif;
}
#old_password:-webkit-autofill,
#old_password:-webkit-autofill:hover,
#old_password:-webkit-autofill:focus,
#old_password:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #eaeaea inset !important; /* your background */
  -webkit-text-fill-color: #565656 !important; /* text color */
  transition: background-color 9999s ease-in-out 0s;
}

#loginForm #password:-webkit-autofill,
#loginForm #password:-webkit-autofill:hover,
#loginForm #password:-webkit-autofill:focus,
#loginForm #password:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #f5f5f5 inset !important; /* your background */
  -webkit-text-fill-color: #565656 !important; /* text color */
  transition: background-color 9999s ease-in-out 0s;
}





.input-group input:-webkit-autofill,
.input-group input:-webkit-autofill:hover,
.input-group input:-webkit-autofill:focus,
.input-group input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #f5f5f5 inset !important; /* your background */
  -webkit-text-fill-color: #565656 !important; /* text color */
  transition: background-color 9999s ease-in-out 0s;
}


h1,h2,h3,h4,h5,h6,p{
    line-height: 1.4 !important;
}








.subway-logo-container{
    width: 100%;
    height: auto;
    place-content: center;
    align-items: center;
    display: flex;
    transition: 0.3s ease;
    transition: 0.3s ease;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.subway-logo-container svg{
    width: 60%;
    transition: 0.3s ease;
    position: relative;
    display: flex;
    transition: 0.3s ease;
    opacity: 0;
    animation: fadeInDelayed 0.6s ease 0.5s forwards;
    height: auto;
}
.first-page-container{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.first-page-container .img-loader-container{
    width: 100%;
    height: 80%;
    display: flex;
    flex-direction: column;
    place-content: end;
    align-items: center;
}
.green-circle-cover{
    width: 100%;
    height: 20%;
    display: flex;
    position: relative;
    place-content: center;
    align-items: end;
    opacity: 0;
    animation: fadeInDelayed 0.6s ease 0.5s forwards;
}
.green-circle-cover > button{
    position: absolute;
    background: transparent;
    border: none;
    z-index: 66;
    cursor: pointer;
    bottom: 5%;
}
.green-circle-cover > button > h1{
    margin: 0;
    padding: 1rem;
    font-family: 'poppins';
    font-size: 1.4rem;
    font-weight: 500;
    color: white;
}
.sp-log-sc{
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;

    display: flex;
    flex-direction: column;

    position: relative;
    transition: 0.3s ease;
    opacity: 1;

    overflow-x: hidden;
    overflow-y: auto;

    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}
#login {
    bottom: 0%;
    border-radius: 0px;
    height: 100%;
    place-self: end;
    transition: 0.3s ease;
}
.top-dev{
    height: 100%;
    width: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow: hidden;
    transition: 0.3s ease;
    place-content: start;
    align-items: center;
    border-radius: 0px 0px 0px 0px;
    background: #f5f5f5;
    padding: 0rem 1.5rem 0rem 1.5rem;
}
.dot-loader {
    position: relative;
    width: 40px;
    height: 40px;
    opacity: 0;
    animation: fadeInDelayed 0.6s ease 0.5s forwards;
}

.dot-loader span {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #018a3a;
  border-radius: 50%;
  animation: scaleSpin 1.2s linear infinite;
}

/* dot positions */
.dot-loader span:nth-child(1) { top: 0; left: 17.5px; animation-delay: 0s; }
.dot-loader span:nth-child(2) { top: 5px; right: 5px; animation-delay: 0.15s; }
.dot-loader span:nth-child(3) { top: 17.5px; right: 0; animation-delay: 0.3s; }
.dot-loader span:nth-child(4) { bottom: 5px; right: 5px; animation-delay: 0.45s; }
.dot-loader span:nth-child(5) { bottom: 0; left: 17.5px; animation-delay: 0.6s; }
.dot-loader span:nth-child(6) { bottom: 5px; left: 5px; animation-delay: 0.75s; }
.dot-loader span:nth-child(7) { top: 17.5px; left: 0; animation-delay: 0.9s; }
.dot-loader span:nth-child(8) { top: 5px; left: 5px; animation-delay: 1.05s; }

@keyframes scaleSpin {
  0%   { transform: scale(0.4); opacity: 0.3; }
  50%  { transform: scale(1);   opacity: 1; }
  100% { transform: scale(0.4); opacity: 0.3; }
}

.bottom-dev{
    height: 100%;
    width: 100%;
    display: flex;
    overflow: hidden;
    background: #f5f5f5;
    position: relative;
    top: 0%;
}
.green-circle-container{
    width: 100%;
    position: relative;
    place-content: center;
    align-items: center;
    display: flex;
    height: 100%;
    transition: 0.3s ease;
}
.green-circle{
    width: 100%;
    border-radius: 50%;
    background-color: #018a3a;
    top: 100%;
    position: relative;
    aspect-ratio: 1/1;
    display: flex;
}
.button-container{
    width: 100%;
    position: absolute;
    place-content: center;
    align-items: end;
    display: flex;
    height: 100%;
}
.button-container button{
    border: none;
    background: transparent;
}
.button-container button h2{
    font-family: 'poppins';
    font-size: 1.2rem;
    color: white;
    font-weight: 500;
    margin: 0;
    padding: 0;
}

/* LOADER */
#loader {
  transition: transform 1s ease, opacity 1s ease;
  display: flex;
}

.hello-text-login{
    display: none;
    flex-direction: column;
    height: 0%;
    opacity: 0;
    padding: 0rem 1.5rem;
    overflow: hidden;
    place-content: center;
    transition: 0.3s ease;
}
.hello-text-login h1{
    color: white;
    font-size: 2.5rem;
    font-family: 'poppins';
    margin: 0;
    font-weight: 500;
    letter-spacing: -1px;
    transition: transform 0.3s ease;
    line-height: 1.2;
}
.hello-text-login h1 span{
    color: #ffe37b;
}
.login-hello{
    transition: 0.3s ease;
    flex-direction: column;
}
.app-img-title{
    display: none;
    opacity: 0;
    height: 0%;
    padding: 0rem 1.5rem;
    transition:  0.3s ease;
    flex-direction: column;
}
.buttons-and-webname-container{
    width: 100%;
    display: flex;
    place-content: space-between;
    height: 100%;
    align-items: center;
}

/* LOGIN FORM CONTAINER */
.login-form{
    display:none;
    width:100%;
    flex-direction:column;
    gap:1.3rem;
    padding:3rem 1.5rem 0rem 1.5rem;
    background:transparent;
    opacity:0;
    transition:0.3s ease;
}
/* Splash screen slides out to the left */
.slide-out-left {
    animation: slideOutDown 0.35s ease forwards;
}
@keyframes slideOutDown {
    0%   { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(60px); }
}
@keyframes slideOutLeft {
    0%   { opacity: 1; transform: translateX(0); }
    100% { opacity: 0; transform: translateX(-60px); }
}

/* Login form slides in from the right */
.login-form.slide-in-right {
    animation: slideInRight 0.35s ease forwards;
}

@keyframes slideInRight {
    0%   { opacity: 0; transform: translateX(60px); }
    100% { opacity: 1; transform: translateX(0); }
}
@keyframes slideInLeft {
    from { transform: translateX(-60px); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}
/* Hello text fades in */
.hello-text-login {
    animation: none;
}
.hello-text-login[style*="flex"] {
    animation: fadeIn 0.35s ease forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes fadeInDelayed {
    from { opacity: 0; }
    to   { opacity: 1; }
}







































.admin-panel-btn, .arrow-back-btn{
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    margin: 0;
    transition: 0.3s ease;
}
.admin-panel-btn svg, .arrow-back-btn svg{
    width: 50px;
    height: auto;
    display: flex;  
    transition:  0.3s ease;
    fill: white;
}
.admin-panel-btn:hover svg, .arrow-back-btn:hover svg{
    opacity: 0.55;
}



/* INPUT GROUP */
.input-group{
    display: flex;
    width: 100%;
    flex-direction: column;
    flex-wrap: wrap;
}

/* LABEL */
.input-group label{
    font-size: 1.2rem;
    color: #018a3a;
    font-weight: 600;
}
.input-group h2{
    margin: 0;
    padding: 0;
    font-size: 1.2rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
    font-weight: 400;
    font-family: 'poppins';
    width: 100%;
    height: auto;
    color: rgb(131, 131, 131);
    border-bottom: 1px solid #e7e7e7;
}
/* INPUT FIELD */
.input-group input{
    width: 100%;
    border-radius: 0px;
    font-size: 1.1rem;
    outline: none;
    background: transparent;
    transition: all 0.25s ease;
    border: none;
        border-bottom-width: medium;
        border-bottom-style: none;
        border-bottom-color: currentcolor;
    border-bottom: 1px solid #d5d5d5;
    color: #565656;
    font-family: 'poppins';
}

/* INPUT FOCUS */
.input-group input:focus{
    border-color:#018a3a;
    outline: none;
}

/* FORGOT PASSWORD */
.login-options{
    display:flex;
    justify-content:flex-end;
    font-size:0.85rem;
}

.forgot{
    text-decoration:none;
    font-size: 1.2rem;
    color: #018a3a;
    cursor: pointer;
    font-weight: 500;
}

.forgot:hover{
    opacity:0.7;
}

/* LOGIN BUTTON */
.login-btn{
    width: 100%;
    padding: 0.95rem;
    border: none;
    border-radius: 100px;
    background: #018a3a;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 3rem;
}
.login-btn h1{
    color: white;
    font-size: 1.4rem;
    font-weight: 500;
    font-family: 'poppins';
    margin: 0;
    transition: 0.3s ease;
    padding: 0;
}

/* BUTTON HOVER */
.login-btn:hover{
    background:#fdca0b;
    color: black;
}
.login-btn:hover h1{
    color: black;
}
input::placeholder{
    color: #d5d5d5;
}

.password-wrapper{
    width:100%;
    position:relative;
    display:flex;
    align-items:center;
}

.password-wrapper input{
    width:100%;
    padding-right:35px;
}

.password-toggle{
    position:absolute;
    right:0;
    width:20px !important;
    height:20px !important;
    cursor:pointer;
    opacity:0.6;
    transition:opacity 0.2s ease;
}

.password-toggle:hover{
    opacity:1;
}

.app-title{
    position:relative;
    color: white;
    font-family: 'poppins';
    font-weight: 400;
    font-size: 1.2rem;
}
.top-icon{
    position:absolute;
    right:15px;
    width:26px;
    transform:translateX(40px);
    transition:0.3s ease;
}
/* hide welcome section */

.welcome-area{
    display:none;
    opacity:0;
    transition:  0.3s ease;
    flex-direction: column;
    width: 100%;
    padding: 3rem 1.5rem 0rem 1.5rem;
    gap: 3rem;
}

.welcome-text h1{
    font-weight: 600;
    font-size: 2rem;
    font-family: 'poppins';
    color: black;
    padding: 0;
    margin: 0;
    text-shadow: 1px 1px 0px white;
    line-height: 1;
    max-width: min(100%, 12ch);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#userName{
    color: #fdca0b;
}

.dashboard-buttons{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:1rem;
}

.dashboard-buttons button{
    padding: 1rem;
    border: none;
    border-radius: 12px;
    background: #018a3a;
    color: white;
    opacity: 1;
    cursor: pointer;
    transition: 0.3s ease;
    align-items: center;
    place-content: center;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.dashboard-buttons button:hover{
    background: #fdca0b;
    color:black;
}
.dashboard-buttons button h2{
    font-size: 1.2rem;
    font-family: 'poppins';
    font-weight: 400;
    margin: 0;
    padding: 0;
}
.dashboard-buttons button svg{
    width: 50px;
    height: 50px;
    fill: white;
    transition: 0.3s ease;
}
.vls-1, .vls-3, .vls-2, .vls-4, .rls-1, .rls-2{
    transition: 0.3s ease;
}
.dashboard-buttons button:hover svg{
    fill : black;
}
.dashboard-buttons button:nth-child(2):hover .vls-1, .dashboard-buttons button:nth-child(2):hover .vls-3{
    stroke: #000;
}
.dashboard-buttons button:nth-child(2):hover .vls-2, .dashboard-buttons button:nth-child(2):hover .vls-4{
    fill: #000;
}
.dashboard-buttons button:nth-child(3):hover .rls-1, .dashboard-buttons button:nth-child(3):hover .rls-2{
    fill: none;
    stroke: #000;
}
.dashboard-buttons button:nth-child(4):hover .rls-1, .dashboard-buttons button:nth-child(4):hover .rls-2{
    fill: none;
    stroke: #000;
}
.login-hello h1 {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.top-icon {
    /* keep them in layout but offscreen */
    display: flex;          /* important: do NOT use display:none */
    opacity: 0;
    transform: translate(-50%, -140px); /* start above */
    transition: opacity 0.3s ease, transform 0.3s ease;
}


.home-setting-bar{
    height: 0%;
    background: #e9e9e9;
    display: none;
    position: absolute;
    width: 100%;
    bottom: 0;
    opacity: 0;
    z-index: 9;
    transition: 0.3s ease;
}

.home-setting-button{
    place-content: center;
    align-items: center;
    display: flex;
    width: 100%;
    gap: 1rem;
    height: fit-content;
    padding-top: 1rem;
}
.hs-button svg{
    width: 40px;
    height: 40px;
    fill: none;
    transition: fill 0.3s ease;
    stroke: #018a3a;
}
.hs-button h2{
    margin: 0;
    padding: 0;
    line-height: 1;
    font-size: 1.2rem;
    font-weight: 500;
    font-family: 'poppins';
    color: #018a3a;
}

.hs-button{
    width: 35%;
    border: none;
    background: transparent;
    border-radius: 14px;
    margin: 0;
    padding: 0.7rem;
    transition: 0.3s ease;
    cursor: pointer;
}
.hs-button:hover{
    background: #f5f5f5ab;
}
.hs-button.active{
    background: #f5f5f5;
    fill: #018a3a;
}
.hs-button.active svg{
    fill: #018a3a;
}






.x7design-logo{
    position: absolute;
    width: 100%;
    bottom: -10%;
    z-index: 10;
    opacity: 0;
    place-content: center;
    align-items: end;
    gap: 0.3rem;
    transition: bottom 0.3s ease, opacity 0.3s ease;
    display: none;
}
.x7design-logo h4{
    font-size: 0.8rem;
    font-family: 'poppins';
    color: #787878;
    font-weight: 400;
    padding: 0;
    margin: 0;
}
.x7design-logo svg{
    width: 20px;
    height: 20px;
    fill: #787878;
}



.setting-page{
    width: 90%;
  place-content: start;
  display: none;
  height: 70%;
  opacity: 0;
  padding: 40px 0px 0px 0px;
  transform: translateX(100%);
  transition: 0.3s ease;
  position: absolute;
  flex-direction: column;
  gap: 4rem;
}
.setting-up{
    width: 100%;
    gap: 2rem;
  position: relative;
  display: flex;
  flex-direction: column;
}
.setting-down{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:1rem;
}
.setting-down button{
    padding:1rem;
    border:none;
    border-radius:12px;
    cursor:pointer;
    opacity:1;
    flex-direction: column;
    transition: 0.3s ease;
    align-items: center;
    place-content: center;
    display: flex;
    gap: 0rem;
}
#bluetooth-connection-btn{
    background:#8a8a8a;
    color:white;
    transition: 0.3s ease;
}
#printer-connection-btn{
    background:#8a8a8a;
    color:white;
    transition: 0.3s ease;
}
#bluetooth-connection-btn:hover{
    background: #696969 ;
}
#printer-connection-btn:hover{
    background: #696969 ;
}
#bluetooth-connection-btn.active{
    background: #018a3a;
}
#printer-connection-btn.active{
    background: #018a3a;
}


.change-pass{
    background: #fdca0b !important;
    transition: 0.3s ease;
    color: black !important;
}
.change-pass img{
    filter: brightness(0);
}
.change-pass:hover{
    background: #fde487 !important;
}
.logout-btn{
    background: #ee3f3f !important;
    transition: 0.3s ease;
    color: white;
}
.logout-btn:hover{
    background: #a72626 !important;
}
.setting-down button h2{
    font-size: 1.2rem;
    font-family: 'poppins';
    font-weight: 400;
    margin: 0;
    line-height: 1.2;
    padding: 0;
}
.setting-down button svg{
    width: 50px;
    height: 50px;
}




.arrow-back{
    width: 50px;
    height: auto;
}
.arrow-back-btn{
    transition: 0.3s ease;
}


/* PAGES BASE */
.welcome-area,
.setting-page{
    transition: 0.3s ease;
}

/* SETTING hidden initially */
.setting-page{
    transform: translateX(100%);
    opacity:0;
}

/* HOME → leaving left */
.home-leave{
    transform: translateX(-100%);
    opacity:0;
}
.logo-leave{
    transform: translateY(120%);
    opacity: 0;
}
/* SETTING → entering */
.setting-enter{
    transform: translateX(0);
    opacity:1;
}

/* SETTING → leaving right */
.setting-leave{
    transform: translateX(100%);
    opacity:0;
}

/* HOME → entering */
.home-enter{
    transform: translateX(0);
    opacity:1;
}
.logo-enter{
    transform: translateY(0);
    opacity: 1;
}




.change-password-tab{
    width: 100%;
    height: 100%;
    position: absolute;
    backdrop-filter: blur(10px);
    display: flex;
    transform: translateY(-50%);
    top: 50%;
    place-self: center;
    z-index: 15;
    background: #00000059;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    will-change: opacity;
    place-content: center;
    align-items: center;
}
.password-tab-elements-container{
    width: 90%;
    height: 50%;
    display: flex;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    align-items: center;
    border-radius: 20px;
    place-content: space-evenly;
    background: #f5f5f5;
    flex-direction: column;
}
.title-svg-pass-tab-container{
    display: flex;
    width: 90%;
    place-content: space-between;
    align-items: center;
}
.title-svg-pass-tab-container h2{
    margin: 0;
    padding: 0;
    font-family: 'poppins';
    font-size: 1.2rem;
    font-weight: 450;
}


.change-pass-inputs-container{
    width: 90%;
}

.change-pass-inputs-container .child1{
    background: #eaeaea;
    width: fit-content;
    padding: 1rem 0.5rem;
    border-radius: 15px;
    gap: 0.5rem;
}
.change-pass-inputs-container .child2{
    background: #eaeaea;
    width: fit-content;
    padding: 1rem 0.5rem;
    border-radius: 15px 15px 0px 0px;
    margin-top: 1rem;
    gap: 0.5rem;
}
.change-pass-inputs-container .child3{
    background: #eaeaea;
    width: fit-content;
    padding: 1rem 0.5rem;
    border-radius: 0px 0px 15px 15px;
    gap: 0.5rem;
}
.password-tab-elements-container > button{
    background: #018a3a;
    border-radius: 100px;
    width: 90%;
    display: flex;
    border: none;
    place-content: center;
    flex-direction: row;
    position: relative;
    cursor: pointer;
    gap: 0.5rem;
    align-items: center;
    transition: 0.3s ease;
    padding: 0;
    margin: 0;
}
.password-tab-elements-container > button:hover{
    background: #fdca0b;
}
.password-tab-elements-container > button > svg{
    width: 30px;
    height: auto;
    fill: white;
    transition: 0.3s ease;
}
.password-tab-elements-container > button > h2{
    color: white;
    font-weight: 400;
    font-family: 'poppins';
    font-size: 1.2rem;
    transition: 0.3s ease;
}
.password-tab-elements-container > button:hover > h2{
    color: black;
}
.password-tab-elements-container > button:hover > svg{
    fill: black;
}

.close-password-tab-button{
    border: none;
    background: transparent;
    width: fit-content;
    cursor: pointer;
    padding: 0;
    margin: 0;
}
.close-password-tab-button svg{
    width: 40px;
    height: auto;
    fill: #ee3f3f;
    stroke: #ee3f3f;
    transition: 0.3s ease;
}
.close-password-tab-button:hover svg{
    fill: #a72626;
    stroke: #a72626;
}





























.connect-printer-tab{
    width: 100%;
    height: 100%;
    position: absolute;
    backdrop-filter: blur(10px);
    display: flex;
    transform: translateY(-50%);
    top: 50%;
    place-self: center;
    z-index: 15;
    background: #00000059;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    will-change: opacity;
    place-content: center;
    align-items: center;
}
.printer-tab-elements-container{
    width: 90%;
    height: 50%;
    display: flex;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    align-items: center;
    border-radius: 20px;
    place-content: space-evenly;
    background: #f5f5f5;
    flex-direction: column;
}
.title-svg-printer-tab-container{
    display: flex;
    width: 90%;
    height: 12%;
    place-content: space-between;
    align-items: center;
}
.title-svg-printer-tab-container h2{
    margin: 0;
    padding: 0;
    font-family: 'poppins';
    font-size: 1.2rem;
    font-weight: 450;
}
.close-printer-tab-button, .reload-printer-button{
    border: none;
    background: transparent;
    width: fit-content;
    cursor: pointer;
    padding: 0;
    margin: 0;
    transition:  0.3s ease;
}
.close-printer-tab-button svg{
    width: 40px;
    height: auto;
    fill: #ee3f3f;
    stroke: #ee3f3f;
    transition: 0.3s ease;
}
.close-printer-tab-button:hover svg{
    fill: #a72626;
    stroke: #a72626;
}
.reload-printer-button svg{
    width: 40px;
    height: auto;
    fill: none;
    stroke: #000;
    transition: stroke 0.3s ease, rotate 0.55s ease;
}
.reload-printer-button:hover svg{
    stroke: #969696;
    rotate: -360deg;
}

.printer-tab-elements-container > button{
    background: #018a3a;
    border-radius: 100px;
    width: 90%;
    height: 12%;
    display: flex;
    border: none;
    place-content: center;
    flex-direction: row;
    position: relative;
    cursor: pointer;
    gap: 0.5rem;
    align-items: center;
    transition: 0.3s ease;
    padding: 0;
    margin: 0;
}
.printer-tab-elements-container > button:hover{
    background: #fdca0b;
}
.printer-tab-elements-container > button > svg{
    width: 30px;
    height: auto;
    fill: white;
    transition: 0.3s ease;
}
.printer-tab-elements-container > button > h2{
    color: white;
    font-weight: 400;
    font-family: 'poppins';
    font-size: 1.2rem;
    margin: 0;
    padding: 0;
    transition: 0.3s ease;
}
.printer-tab-elements-container > button:hover > h2{
    color: black;
}
.printer-tab-elements-container > button:hover > svg{
    fill: black;
}
.printer-lists {
    display: flex;
    flex-direction: column;
    width: 90%;
    padding: 1rem;
    gap: 0.6rem;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
    max-height: 100%; /* adjust this to fit your layout */
}

.printer-lists::-webkit-scrollbar {
    display: none;
}
.printer-list-container{
    width: 90%;
    height: 60%;
    border-radius: 10px;
    background-color: #eaeaea;
    box-shadow: inset 0px 0px 10px 0px #00000017;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.printer-lists > button{
    border: none;
    border-radius: 100px;
    background: #f5f5f5;
    box-shadow: -5px 5px 10px 0px #00000021;
    padding: 1rem;
    cursor: pointer;
    margin: 0px;
    width: 100%;
    transition: 0.3s ease;
    left: 50%;
    transform: translateX(-50%);
    position: relative;
    display: flex;
    place-content: space-between;
    align-items: center;
}
.printer-lists > button.active{
    background: #fdca0b;
}

.printer-lists > button > svg{
    width: 20px;
    height: auto;
    fill: none;
    transition: 0.3s ease;
    stroke: #8a8a8a;
}
.printer-lists > button.active svg{
    stroke: #000;
    fill: #000;
}
.printer-name{
    color: #8a8a8a;
    transition: 0.3s ease;
    font-family: 'poppins';
    font-weight: 500;
    font-size: 1.2rem;
    line-height: 1;
    margin: 0;
    padding: 0;
    transition: 0.3s ease;
}
.printer-lists > button.active .printer-name{
    color: #000;
}










.error-msg{
    width: fit-content;
    max-width: 80%;
    background: #f5f5f5;
    border-radius: 30px;
    position: absolute;
    display: none;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0px 0px 20px 0px #0000001f;
    margin: 1rem 0rem 0rem 0rem;
    opacity: 0;
    transition: opacity 0.1s ease;
    place-self: end;
    z-index: 999999999;
}
.error-timeline{
    width: 100%;

  background: #ee3f3f;
  z-index: 66;
  position: absolute;
  display: flex;
}
.error-container{
    width: 100%;

  display: flex;
  align-items: center;
  place-content: start;
  position: relative;
  padding: 0.5rem 0.75rem;
  gap: 8px;
}
.error-container button{
    border: none;
    background-color: transparent;
    cursor: pointer;
    padding: 0;
    margin: 0;
}
.error-container svg{
    width: 30px;
    height: auto;
    fill: #ee3f3f;
    stroke: #ee3f3f;
    transition: 0.3s ease;
}
.error-container h2{
    line-height: 1 !important;
    padding: 0;
    margin: 0;
    font-family: 'poppins';
    font-weight: 400;
    font-size: 1.2rem;
    color: #ee3f3f;
    width: 80%;
}


.success-msg{
    max-width: 80%;
    width: fit-content;
    background: #f5f5f5;
    border-radius: 30px;
    position: absolute;
    display: none;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0px 0px 20px 0px #0000001f;
    margin: 1rem 0rem 0rem 0rem;
    opacity: 0;
    transition: opacity 0.1s ease;
    place-self: end;
    z-index: 999999999;
}
.success-timeline{
    width: 100%;

  background: #018a3a;
  z-index: 66;
  position: absolute;
  display: flex;
}
.success-container{
    width: 100%;

  display: flex;
  align-items: center;
  place-content: start;
  position: relative;
  padding: 0.5rem;
  gap: 8px;
}
.success-container button{
    border: none;
    background-color: transparent;
    cursor: pointer;
}
.success-container svg{
    width: 30px;
    height: auto;
    fill: #018a3a;
    stroke: #018a3a;
    transition: 0.3s ease;
}
.success-container h2{
    line-height: 1 !important;
    padding: 0;
    margin: 0;
    font-family: 'poppins';
    font-weight: 400;
    font-size: 1.2rem;
    color: #018a3a;
    width: 80%;
}
/* ---------- shared show/hide behaviour ---------- */
.error-msg.active,
.success-msg.active {
  display: flex;
  opacity: 1;
}

/* timelines animate width */
.error-msg.active .error-timeline,
.success-msg.active .success-timeline {
  animation: shrinkBar 5s linear forwards;
}

/* shared keyframes */
@keyframes shrinkBar {
  from { width: 100%; }
  to { width: 0%; }
}



.error-timeline,
.success-timeline {
  width: 100%;
  height: 4px;       /* ✅ fixed height */
  position: relative;
  flex-shrink: 0;
}










.searchbar-container{
    display: none;
    place-content: space-between;
    position: relative;
    width: 100%;
    gap: 1rem;
    height: 0%;
    overflow: hidden;
    opacity:0;
    transform: translateY(0);
    z-index: 5;
    transition: height 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}
.searchbar-container.hide {
    transform: translateY(100px); /* move left */
    opacity: 0;
    height: 0;
}
.searchbar-container > button{
    background: #f5f5f5;
    border: none;
    display: flex;
    border-radius: 15px;
    gap: 0.3rem;
    padding: 0.1rem 0.7rem;
    margin: 0;
    align-items: center;
}
.searchbar-container button svg{
    width: 30px;
    height: auto;
    stroke: #018a3a;
    fill: #018a3a;
}
.searchbar-container button:first-child {
    transition: opacity 0.3s ease;
}
.searchbar-container h2{
    font-family: 'poppins';
    font-size: 1.2rem;
    font-weight: 500;
    color: #018a3a;
    line-height: 1;
    padding: 0;
    margin: 0;
}
.search-container {
    display: flex;
    align-items: center;
    transition: 0.3s ease;
    background: transparent;
    border-radius: 15px;
    padding: 0.5rem;
    gap: 0.3rem;
    flex-direction: row-reverse;
    border: 1px solid #ffffff;
}

#search-input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 1.2rem;
  color: white;
  font-family: 'poppins';
  width: 100%;
}

#search-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
}
#search-btn > svg{
    fill: none;
    width: 30px;
    height: auto;
    stroke: #ffffff;
}
#search-input::placeholder{
    color: #ffffff;
}


















.defrost-page{
    width: 100%;
    height: 100%;
    place-content: start;
    align-items: start;
    display: none;
    opacity: 0;
    transform: translateY(50%);
    transition: 0.3s ease;
    gap: 1.5rem;
    flex-direction: column;
    margin: 2rem 0rem 0rem 0rem;
}
.defrost-category-container{
    width: 100%;
    display: flex;
    place-content: start;
    align-items: center;
    background: #d7d7d7;
    border-radius: 15px;
    height: 8%;
}
.defrost-category-container div{
    width: 100%;
    height: 100%;
    display: flex;
    place-content: start;
    align-items: stretch;
    gap: 0.5rem;
    padding: 0.5rem;
    background: #d7d7d7;
    border-radius: 15px;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.defrost-category-container div::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.defrost-category-container div button{
    padding: 0.5rem 1rem;
    margin: 0;
    border: none;
    border-radius: 10px;
    background: #282828;
    display: flex;
    cursor: pointer;
    transition: 0.3s ease;
    flex-shrink: 0;
    align-items: center;
    place-content: center;
}
.defrost-category-container div button:hover, .defrost-category-container div button.active{
    background: #fdca0b;
}
.defrost-category-container div button h2{
    margin: 0;
    color: white;
    font-weight: 400;
    font-size: 1.2rem;
    font-family: 'poppins';
    transition: 0.3s ease;
    max-width: 10ch;
    line-height: 1.2;
    word-break: break-word;
    overflow-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.defrost-category-container div button:hover h2, .defrost-category-container div button.active h2{
    color: #000;
}
.defrost-products-container{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: auto;
    width: 100%;
    gap: 1rem;
    place-content: start;
    height: 83%;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.defrost-products-container button{
    border: none;
    padding: 0.5rem;
    border-radius: 15px;
    transition: 0.3s ease;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}
.defrost-products-container button div{
    background: transparent;
    border-radius: 10px;
    padding: 0;
    height: 6rem;
    width: 100%;
    overflow: hidden;
    cursor: pointer;
}
.defrost-products-container button div img{
    width: 100%;
  height: 100%;
  object-fit: cover;
}
.defrost-products-container button h2{
    padding: 0.8rem 0.5rem;
    margin: 0;
    font-family: 'poppins';
    font-size: 1.2rem;
    font-weight: 500;
    color: #282828;
    cursor: pointer;
}



.defrost-page2{
    width: 100%;
    height: 100%;
    place-content: start;
    align-items: start;
    display: none;
    gap: 1.5rem;
    transform: translateX(100%);
    flex-direction: column;
    margin: 2rem 0rem 0rem 0rem;
    opacity: 0;
    transition: 0.3s ease;
}
.defrost-page3{
    width: 100%;
    height: 100%;
    place-content: start;
    align-items: start;
    display: none;
    gap: 1.5rem;
    flex-direction: column;
    transform: translateX(100%);
    margin: 2rem 0rem 0rem 0rem;
    opacity: 0;
    transition: 0.3s ease;
}
.defrost-page2-part1{
    width: 100%;
  display: flex;
  flex-direction: column;
}
.defrost-page2-part1-h1-container{
    width: 100%;
  height: fit-content;
}
.defrost-page2-part1-h1-container h1{
    font-size: 1.4rem;
    font-weight: 500;
    font-family: 'poppins';
    color: black;
    padding: 0;
    margin: 0;
}
.defrost-page2-part1-other-container{
    width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
}
.defrost-page2-part1-img{
    width: 50%;
}
.defrost-page2-part1-img div{
    width: 95%;
    height: 9rem;
    overflow: hidden; 
    display: flex;
}
.defrost-page2-part1-img-details{
    width: 50%;
    display: flex;
    flex-direction: column;
    place-content: space-between;
}
.defrost-page2-part1-img-details :nth-child(2){
    display: flex;
    flex-direction: column;
    place-content: start;
    align-items: start;
    gap: 0rem;
    line-height: 1.4 !important;
}
.defrost-page2-part1-img-details :nth-child(2) h3{
    max-width: 15ch;   /* about 15 characters */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4 !important;
    
}
#clerk-selected-name{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline;
    position: relative;
}

.defrost-page2-part1-img div img{
    width: 100%;
    height: auto;
    border-radius: 15px;
    object-fit: cover;
}
.defrost-method-h2-h3{
    display: flex;
    flex-direction: row;
    align-items: end;
    place-content: start;
    gap: 0.3rem;
}
.defrost-method-h2-h3 h2{
    font-size: 1.2rem;
    font-weight: 600;
    color: #018a3a;
}
.defrost-method-h2-h3 h3{
    font-size: 1rem;
  font-weight: 600;
}
.defrost-method-h2-h3 h2, .defrost-method-h2-h3 h3{
    margin: 0;
    padding: 0;
    line-height: 1 !important;
    font-family: 'poppins';
}
.clerk-container{
    width: 100%;
    height: 7rem;
    background: #d7d7d7;
    border-radius: 15px;
    align-items: center;
    place-content: start;
    display: flex;
    overflow: hidden;
}
.clerk-buttons {
    width: 100%;
    height: 100%;
    padding: 0.6rem;
    place-content: start;
    align-items: center;
    gap: 0.5rem;
    display: flex;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
    cursor: grab;
}
.clerk-buttons::-webkit-scrollbar {
    display: none;
}
.clerk-buttons button {
    border: none;
    background: #282828;
    margin: 0;
    border-radius: 15px;
    height: 85%;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    place-content: space-between;
    transition: 0.3s ease;
    align-items: center;
    cursor: pointer;
    padding: 0.8rem;
}
.clerk-buttons svg {
    width: 35px;
    fill: none;
    stroke: white;
    padding: 0;
    margin: 0;
    height: auto;
    transition: 0.3s ease;
}

.clerk-buttons h2 {
    margin: 0;
    padding: 0;
    font-family: 'poppins';
    font-size: 1.2rem;
    color: white;
    transition: 0.3s ease;
    font-weight: 400;
    max-width: 10ch;
    min-width: 7ch;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.clerk-buttons button:hover{
    background: #525252;
}
/* ── active replaces hover ───────────────────────────────────── */
.clerk-buttons button.active {
    background: #fdca0b;
}

.clerk-buttons button.active svg {
    fill: black;
    stroke: black;
}

.clerk-buttons button.active h2 {
    color: black;
}





.copies-counter{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    place-content: start;
}
.copies-counter button svg{
    width: 40px;
    height: auto;
    fill: white;
}
.copies-counter button{
    border: none;
    border-radius: 15px;
    background: #282828;
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 0.7rem;
    place-content: center;
    transition: 0.3s ease;
}
.copies-counter button:nth-child(2){
    background: #d7d7d7;
    cursor: default;
    padding: 0.5rem 5rem;
    width: 6rem;
    display: flex;
    justify-content: center;
}

.copies-counter button:nth-child(1):hover, .copies-counter button:nth-child(3):hover{
    background: #474747;
}
.copies-counter button h1{
    margin: 0;
    padding: 0;
    font-family: 'poppins';
    font-size: 1.4rem;
    font-weight: 500;
    color: #282828;
    line-height: 0;
}
.copies-counter button:disabled{
    opacity: 0.4;
    cursor: not-allowed;
}


.submitBtn{
    background: #018a3a;
    border-radius: 100px;
    width: 100%;
    display: flex;
    border: none;
    place-content: center;
    flex-direction: row;
    position: relative;
    cursor: pointer;
    gap: 0.5rem;
    align-items: center;
    transition: 0.3s ease;
    padding: 0;
    margin: 0;
    margin-top: 3rem;
    place-self: center;
}
.submitBtn:hover{
    background: #fdca0b;
}
.submitBtn svg{
    width: 30px;
    height: auto;
    fill: white;
    transition: 0.3s ease;
}
.submitBtn h2{
    color: white;
    font-weight: 400;
    font-family: 'poppins';
    font-size: 1.2rem;
    transition: 0.3s ease;
}
.submitBtn:hover h2{
    color: black;
}
.submitBtn:hover svg{
    fill: black;
}
.printer-svg{
    transition: 0.3s ease;
}
.submitBtn:hover .printer-svg{
    filter: brightness(0);
}
hr{
    width: 100%;
    height: 0px;
    border-top: 1px solid #6f6f6f;
    border-bottom: transparent;
    border-right: transparent;
    border-left: transparent;
    box-shadow: 0px 1px 0px 0px white;
}




.defrost-page3 .defrost-page2-part1-h1-container{
    display: flex;
    flex-direction: row;
    align-items: center;
    place-content: start;
    gap: 0.5rem;
}
.defrost-page3 .defrost-page2-part1-h1-container > svg{
    width: 30px;
    height: auto;
    stroke: none;
    fill: #018a3a;
}

.defrost-page2-part1-h1-container h2{
    font-size: 1.2rem;
    font-weight: 500;
    font-family: 'poppins';
    color: black;
    padding: 0;
    margin: 0;
}
.print-label-container{
    width: 100%;
    height: fit-content;
    display: flex;
    place-content: center;
    align-items: center;
}
.print-label-preview{
    width: 70%;
    height: auto;
    aspect-ratio: 1/1;
    background: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    place-content: space-between;
    padding: 1rem;
    box-shadow: 0px 0px 60px 0px #00000014;
}
.h1-product-name-on-label-preview-container{
    width: 100%;
    height: auto;
    display: flex;
    place-content: center;
}
.h1-product-name-on-label-preview-container h1{
    margin: 0;
    padding: 0;
    color: black;
    font-family: 'poppins';
    font-size: 1.4rem;
    font-weight: 600;
}
.label-preview-details-container{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    place-content: start;
    padding-top: 1.5rem;
    flex: 1;
    align-items: center;
    gap: 0.5rem;
}
.label-preview-details-container div{
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}
.label-preview-details-container div h2{
    margin: 0;
    padding: 0;
    color: black;
    font-family: 'poppins';
    font-size: 1.2rem;
    font-weight: 500;
}
.label-preview-details-container div h3{
    margin: 0;
    padding: 0;
    color: black;
    font-family: 'poppins';
    font-size: 1rem;
    font-weight: 400;
}
.week-day-sbw-label-preview-container{
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: row;
    place-content: space-between;
    align-items: center;
}
.week-day-sbw-label-preview-container h1{
    margin: 0;
    padding: 0;
    color: black;
    font-family: 'poppins';
    font-size: 1.4rem;
    font-weight: 600;
    max-width: 70%;
}
.week-day-sbw-label-preview-container div{
    max-width: 30%;
    display: flex;
    flex-direction: row;
}
.week-day-sbw-label-preview-container h4{
    font-size: 0.8rem;
    font-family: 'poppins';
    color: black;
    font-weight: 400;
    padding: 0;
    margin: 0;
}
.bluetooth-status, .printer-status{
    display: flex;
    align-items: center;
    gap: 8px;
}
.bluetooth-status h2, .printer-status h2{
    font-size: 1.2rem;
    font-family: 'poppins';
    font-weight: 400;
    margin: 0;
    padding: 0;
    color: black;
}
.bluetooth-status.ready h2 span, .printer-status.ready h2 span {
    color: #018a3a; 
    font-weight: 500;
}
.bluetooth-status.ready svg, .printer-status.ready svg{
    fill: #018a3a;
}
.bluetooth-status.not-ready svg, .printer-status.not-ready svg{
    stroke: #ee3f3f;
}
.bluetooth-status.not-ready h2 span, .printer-status.not-ready h2 span{
    color: #ee3f3f; 
}

.bluetooth-status.not-ready h4, .printer-status.not-ready h4{
    cursor: pointer;
    text-decoration: underline;
    font-size: 0.8rem;
    font-family: 'poppins';
    font-weight: 400;
    margin: 0;
    padding: 0;
    color: #ee3f3f;
}

.bluetooth-status svg, .printer-status svg{
    width: 30px;
    height: auto;
}



























/*-------------------------------- Prepped Page ---------------------------------*/
/* ═══════════════════════════════════════════════════════════════
   PREPPED FLOW — exact duplicate of defrost CSS (name changes only)
   ═══════════════════════════════════════════════════════════════ */

.prepped-page {
    width: 100%;
  height: 100%;
  place-content: start;
  align-items: start;
  display: none;
  opacity: 0;
  transform: translateY(50%);
  transition: 0.3s ease;
  gap: 1.5rem;
  flex-direction: column;
  margin: 2rem 0rem 0rem 0rem;
}

.prepped-category-container {
    width: 100%;
  display: flex;
  place-content: start;
  align-items: center;
  background: #d7d7d7;
  border-radius: 15px;
  height: 8%;
}
.prepped-category-container div{
    width: 100%;
  height: 100%;
  display: flex;
  place-content: start;
  align-items: stretch;
  gap: 0.5rem;
  padding: 0.5rem;
  background: #d7d7d7;
  border-radius: 15px;
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.prepped-category-container div button {
    padding: 0.5rem 1rem;
  margin: 0;
  border: none;
  border-radius: 10px;
  background: #282828;
  display: flex;
  cursor: pointer;
  transition: 0.3s ease;
  flex-shrink: 0;
  align-items: center;
  place-content: center;
}
.prepped-category-container div button h2{
    margin: 0;
  color: white;
  font-weight: 400;
  font-size: 1.2rem;
  font-family: 'poppins';
  transition: 0.3s ease;
  max-width: 10ch;
  line-height: 1.2;
  word-break: break-word;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.prepped-category-container div button:hover{
    background: #fdca0b;
}
.prepped-category-container div button:hover h2{
    color: #000;
}
.prepped-category-container button h2 {
    margin: 0;
    padding: 0;
    font-family: 'poppins';
    font-size: 1rem;
    color: white;
    transition: 0.3s ease;
    font-weight: 400;
}
.prepped-category-container button:hover {
    background: #525252;
}

.prepped-category-container button.active {
    background: #fdca0b;
}

.prepped-category-container button.active svg {
    fill: black;
    stroke: black;
}

.prepped-category-container button.active h2 {
    color: black;
}

.prepped-products-container {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: auto;
    width: 100%;
    gap: 1rem;
    place-content: start;
    height: 83%;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.prepped-products-container button{
    border: none;
    padding: 0.5rem;
    border-radius: 15px;
    transition: 0.3s ease;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}
.prepped-products-container button div{
    background: transparent;
    border-radius: 10px;
    padding: 0;
    height: 6rem;
    width: 100%;
    overflow: hidden;
    cursor: pointer;
}
.prepped-products-container button div img{
    width: 100%;
  height: 100%;
  object-fit: cover;
}
.prepped-products-container button h2{
    padding: 0.8rem 0.5rem;
    margin: 0;
    font-family: 'poppins';
    font-size: 1.2rem;
    font-weight: 500;
    color: #282828;
    cursor: pointer;
}
.prepped-products-container button svg {
    width: 25px;
    fill: none;
    stroke: white;
    padding: 0;
    margin: 0;
    height: auto;
    transition: 0.3s ease;
}
.prepped-products-container button:hover {
    background: #d7d7d7;
}

.prepped-products-container button.active {
    background: #fdca0b;
}

.prepped-products-container button.active svg {
    stroke: black;
}

.prepped-products-container button.active h2 {
    color: black;
}

/* ── Prepped Page 2 ─────────────────────────────────────────── */

.prepped-page2 {
    width: 100%;
  height: 100%;
  place-content: start;
  align-items: start;
  display: none;
  gap: 1.5rem;
  transform: translateX(100%);
  flex-direction: column;
  margin: 2rem 0rem 0rem 0rem;
  opacity: 0;
  transition: 0.3s ease;
}

.prepped-page2-part1 {
    width: 100%;
  display: flex;
  flex-direction: column;
}
.prepped-page2-part1-h1-container {
    width: 100%;
  height: fit-content;
}

.prepped-page2-part1-h1-container h1{
    font-size: 1.4rem;
  font-weight: 500;
  font-family: 'poppins';
  color: black;
  padding: 0;
  margin: 0;
}
.prepped-page2-part1-other-container{
    width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
}
.prepped-page2-part1-img{
    width: 50%;
}
.prepped-page2-part1-img div{
    width: 95%;
  height: 9rem;
  overflow: hidden;
  display: flex;
}
.prepped-page2-part1-img div img{
    width: 100%;
  height: auto;
  border-radius: 15px;
  object-fit: cover;
}
.prepped-page2-part1-img-details{
width: 50%;
  display: flex;
  flex-direction: column;
  place-content: space-between;
}
.prepped-method-h2-h3{
    display: flex;
  flex-direction: row;
  align-items: end;
  place-content: start;
  gap: 0.3rem;
}
.prepped-method-h2-h3 h2, .prepped-method-h2-h3 h3{
margin: 0;
  padding: 0;
  line-height: 1;
  font-family: 'poppins';
}
.prepped-method-h2-h3 h2{
font-size: 1.2rem;
  font-weight: 600;
  color: #018a3a;
}
.prepped-method-h2-h3 h3 {
  font-size: 1rem;
  font-weight: 600;
}
.prepped-page2-part1-img-details :nth-child(2){
    display: flex;
  flex-direction: column;
  place-content: start;
  align-items: start;
}
.prepped-page2-part1-img-details :nth-child(2) h3{
    max-width: 15ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prepped-page2-part1-h1-container{
    width: 100%;
  height: fit-content;
}
.prepped-page2-part1-h1-container h1{
    font-size: 1.4rem;
  font-weight: 500;
  font-family: 'poppins';
  color: black;
  padding: 0;
  margin: 0;
}


/* ── Prepped Page 3 ─────────────────────────────────────────── */

.prepped-page3 {
    width: 100%;
  height: 100%;
  place-content: start;
  align-items: start;
  display: none;
  gap: 1.5rem;
  flex-direction: column;
  transform: translateX(100%);
  margin: 2rem 0rem 0rem 0rem;
  opacity: 0;
  transition: 0.3s ease;
}

.prepped-page3 .prepped-page2-part1-h1-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    place-content: start;
    gap: 0.5rem;
}

.prepped-page3 .prepped-page2-part1-h1-container > svg {
    width: 30px;
    height: auto;
    stroke: none;
    fill: #018a3a;
}

.prepped-page2-part1-h1-container h2 {
    font-size: 1.2rem;
    font-weight: 500;
    font-family: 'poppins';
    color: black;
    padding: 0;
    margin: 0;
}



















/*--------------------------- ORDERS ---------------------------*/
#app{
    order: 1;
}
.hello-text-login{
    order: 2;
}
.app-img-title{
    order: 3;
}
.top-dev{
    order: 4;
}
.calendar-overlay{
    order: 5;
}
.subway-logo-container{
    order: 1;
}
.first-page-container{
    order: 2;
}
.login-form{
    order: 3;
}
.error-msg{
    order: 4;
}
.success-msg{
    order: 5;
}
.welcome-area{
    order: 6;
}
.setting-page{
    order: 7;
}
.defrost-page{
    order: 8;
}
.defrost-page2{
    order: 9;
}
.defrost-page3{
    order: 10;
}
.prepped-page{
    order: 11;
}
.prepped-page2{
    order: 12;
}
.prepped-page3{
    order: 13;
}

























/*-------------------------------Date and Time---------------------------------*/
.datetime-row{
    display:flex;
    gap:10px;
    align-items:center;
}

.date-btn{
    padding:10px 14px;
    border-radius:8px;
    border:1px solid #ddd;
    background:white;
    cursor:pointer;
}
.calendar-overlay{
    position:absolute;
    inset:0;
    width: 100%;
    height: 100%;
    display:none;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,0.35);
    backdrop-filter:blur(8px);
    opacity:0;
    pointer-events:none;
    transition: 0.3s ease;
    transition:.25s;
    z-index:999;
}

.calendar-overlay.open{
    opacity:1;
    pointer-events:auto;
    display: flex;
}

.calendar-modal{
    background:white;
    padding:24px;
    border-radius:14px;
    width:340px;
    box-shadow:0 20px 60px rgba(0,0,0,0.25);
}
.calendar-modal > h2{
    color: black;
    margin: 0;
    padding: 0;
    line-height: 1;
    font-family: 'poppins';
    font-size: 1.2rem;
    font-weight: 600;
}
.picker-row{
    display:flex;
    gap:0.5rem;
    font-family: 'poppins';
    margin: 1rem 0rem;
}

.picker{
    position:relative;
    flex:1;
}

.picker-display{
    padding: 0.7rem;
    border-radius:12px;
    border:1px solid #ddd;
    background:#fafafa;
    cursor:pointer;
    text-align:center;
    transition: 0.3s ease;
}
.picker-display:hover{
    background:#e9e9e9;
}
.picker-menu{
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
    max-height: 180px;
    overflow: auto;
    background: #282828;
    border-radius: 12px;
    display: none;
    box-shadow: 0 10px 30px rgba(0,0,0,.15);
    z-index: 5;
    padding: 0.5rem;
}

.picker-menu.open{
    display:block;
}

.picker-item{
    padding:8px;
    cursor:pointer;
    text-align:center;
    color: white;
    flex-shrink: 0;
    font-weight: 500;
    border-radius: 8px;
    font-size: 1rem;
    transition: 0.3s ease;
    font-family: 'poppins';
}

.picker-item:hover{
    background:#525252;
}

.calendar-actions{
    display: flex;
    place-content: start;
    gap: 0.5rem;
    margin: 2rem 0rem 0rem 0rem;
}

.calendar-actions button{
    padding: 0.7rem;
    border-radius: 12px;
    border: none;
    cursor: pointer;
}

#ok-date{
    background:#018a3a;
    transition: 0.3s ease;
    font-family: 'poppins';
    flex: 1;
}
#ok-date h2{
    color: white;
    margin: 0;
    padding: 5px;
    line-height: 1;
    font-family: 'poppins';
    font-size: 1.2rem;
    font-weight: 400;
    display: flex;
    transition: 0.3s ease;
    place-content: center;
    align-items: center;
}
#ok-date:hover{
    background:#fdca0b;
}
#ok-date:hover h2{
    color: black;
}
#cancel-date{
    background:#e4e4e4;
    transition: 0.3s ease;
    font-family: 'poppins';
    flex: 1;
}
#cancel-date h2{
    color: black;
    margin: 0;
    padding: 5px;
    line-height: 1;
    font-family: 'poppins';
    place-content: center;
    align-items: center;
    font-size: 1.2rem;
    font-weight: 400;
    display: flex;
    transition: 0.3s ease;
}
#cancel-date:hover{
    background: #c5c5c5;
}
.picker-display h2{
    margin:0;
    padding: 0;
    color: black;
    font-size: 1.2rem;
    font-weight:500;
    font-family: 'poppins';
}
.picker h3{
    font-size: 1rem;
    font-family: 'poppins';
    color: #3d3d3d;
    font-weight: 400;
    padding: 0;
    margin: 0;
    position: absolute;
    top: -25%;
    left: 0%;
    backdrop-filter: blur(2px);
    padding: 0rem 0.6rem;
    border-radius: 50px;
}
.calendar-modal h2:nth-child(2){
    padding-top: 10px;
}
#date-display{
    padding: 0.7rem 1rem;
    border-radius: 12px;
    background: #d7d7d7;
    cursor: pointer;
    border: none;
    align-items: center;
    place-content: center;
    display: flex;
    transition: 0.3s ease;
}
#date-display:hover{
    background: #282828;
}
#date-display h2{
    margin: 0;
    padding: 0;
    font-family: 'poppins';
    font-size: 1.2rem;
    color: #282828;
    transition: 0.3s ease;
    font-weight: 500;
    line-height: 1;
    height: 40px;
    align-items: center;
    place-content: center;
    display: flex;
    transition: 0.3s ease;
}
#date-display:hover h2{
    color: #d7d7d7;
}
#time-display{
    padding: 0.7rem 1rem;
    border-radius: 12px;
    background: #282828;
    cursor: pointer;
    border: none;
    align-items: center;
    place-content: center;
    display: flex;
    transition: 0.3s ease;
}
#time-display h2{
    margin: 0;
    padding: 0;
    font-family: 'poppins';
    font-size: 1.2rem;
    color: #d7d7d7;
    transition: 0.3s ease;
    font-weight: 500;
    line-height: 1;
    height: 40px;
    align-items: center;
    place-content: center;
    display: flex;
    transition: 0.3s ease;
}
#time-display:hover{
    background: #d7d7d7;
}
#time-display:hover h2{
    color: #282828;
}