/* SPDX-License-Identifier: AGPL-3.0-only */
  html, body {
    font-family: sans-serif;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }

  .main-container-style {
    display: flex;
    position: fixed;
    flex-direction: column;
    width: 100%;
    height: 100%;
  }

  .main-container-style.blurred {
    filter: blur(3px);
    pointer-events: none;
    touch-action: none;
    scroll-behavior: auto;
  }

  .overlay-style {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.15);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 999;
  }

  .overlay-style.active {
    display: flex;
  }

  .popup-style {
    width: 70%;
    height: 70%;
    display: flex;
    flex-direction: column;
    align-items: right;
    background: white;
    border: 2px solid black;
    box-sizing: border-box;
  }
  
  .search-background {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 7.5%;
  }

  .search-bar {
    display: flex;
    justify-content: center;
    width: 50%;  
  }

  .lateral-space-search {
    display: flex;
    justify-content: center;
    align-content: center;
    width: 25%;
  }

  .search-container {
    border: 4px solid black; /* The thick border */
    padding: 8px 12px;
    align-items: center;
    width: 80%; /* width of the black rectangle parent of the search-input styled input element*/
    height: 100%; /* matches the full height of the parent search-background styled container */
    background: white;
    box-sizing: border-box;
  }

  .search-input-style {
    display: flex;
    outline: none;
    border: none;
    padding: none;
    width: 100%;
    font-family: sans-serif;
    font-size: 33px;
    background: transparent;
  }

  /* Optional: subtle feedback when clicking */
  .search-container:focus-within {
    background: #dedede;
  }

  .filter-background-style {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    height: 20%;
  }

  .filter_row-style {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    min-height: 33%;
  }

  .search-del-background-style {
    display: flex;
    justify-content: centered;
    width: 20%;
    height: 100%;
  }

  .invert-btn {
    background-color: white;
    color: black;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 24px;
    width: 12%;
    height: 85%;
    border: 4px solid black;
    padding: 5px 20px;
    cursor: pointer;
    transition: all 0.2s ease; /* Makes the inversion smooth */
  }

  .invert-btn.active {
    background-color: black;
    color: white;
  }

  .del-button-style {
    padding: 5px 20px;
    border: 4px solid black;
    border-left: none;

    background-color: black;
    color: white;
    font-weight: bold;
    font-size: 30px;

    cursor: pointer;
  }

  .del-button-style.active {
    background-color: white;
    color: black;
  }

  .result-container-style {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    flex-direction: column;
    width: 95%;
    height: 70%;
    overflow-y: auto;
  }

  .result-item {
    display: flex;
    padding: 12px;
    font-family: sans-serif;
    font-size: 30px;
    border-bottom: 3px solid black;
  }

  .result_subitem_name {
    display: flex;
    justify-content: left;
    font-size: 30px;
    font-family: sans-serif;
    width: 80%;
  }

  .result_subitem_price {
    display: flex;
    justify-content: left;
    font-size: 30px;
    font-family: sans-serif;
    width: 20%;
  }

  .top_order_popup-style {
    display: flex;
    justify-content: right;
    width: 100%;
    height: 15%;
    box-sizing: border-box;
    border-bottom: 2px solid black;
  }

  
  .title_popup-style {
    width: 81%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: sans-serif;
    font-size: 60px;
  }

  .top_order_x_button-style {
    display: flex;
    background-color: black;
    justify-content: center;
    align-items: center;
    width: 9%;
    border: 4px solid black;
    box-sizing: border-box;
  }

  .x_button-style {
    display: flex;
    pointer-events: none;
    height: 70%;
  }

  .center_order_popup-style {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 70%;
  }

  .center_order_div-style {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 40%;
  }

  .write_popup-style {
    font-size: 40px;
    font-family: sans-serif;
    color: black;
  }

  .spacer-style {
    width: 100px;
    height: 100%;
  }

  .one_fourth_spacer-style {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25%;
  }

  .qty_button-style {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    width: 60px;
    height: 60px;
    font-size: 40px;
    font-weight: bold;
    background: white;
    color: black;
    border: 4px solid black;
    line-height: 1;
  }

  .qty_button-style.active {
    background: black;
    color: white;
  }

  .qty_var-style {
    width: 180px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: sans-serif;
    font-size: 50px;
    font-weight: bold;
    
  }
  
  .bottom_order_popup-style {
    width: 100%;
    height: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .tot_order_popup-style {
    width: 30%;
    height: 100%;
    display: flex;
    font-size: 50px;
    font-family: sans-serif;
    justify-content: center;
    align-items: center
  }
  
  .bottom_order_send_button-style {
    width: 90%;
    height: 70%;
    background: black;
    color: white;
    font-size: 50px;
    font-family: sans-serif;
    font-weight: bold;
    border: 4px solid black;
    box-sizing: border-box;
  }

  .picker-style {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scroll-behaviour: smooth;
    scrollbar-width: none;
    height: 120px;
    width: 100px;
    border: 4px solid black;
  }

  .picker-style.locked {
    scroll-snap-type: none;
    scroll-behaviour: auto;
    scrollbar-width: none;
    pointer-events: none;
    touch-action: none;
    user-select: none;
    overscroll-behavior: none;
  }
  
  .picker_item-style {
    height: 60px;
    flex: 0 0 auto;
    font-family: sans-serif;
    font-size: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    scroll-snap-align: center;
  }

  .picker_item-style.focused {
    font-weight: bold;
    font-size: 50px;
  }

  .picker_spacer_top-style {
    flex: 0 0 calc(50% - 30px);
    border-top: 8px solid black;
    box-sizing: border-box;
  }

  .picker_spacer_bottom-style {
    flex: 0 0 calc(50% - 30px);
    border-bottom: 8px solid black;
    box-sizing: border-box;
  }

  .locker-style {
    width: 25%;
    display: none;
    jusitfy-content: center;
    align-items: center;
  }

  .locker-style.active {
    display: flex; 
  }

  .top_icon-style {
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    width: 100%;
    height: 100%;
  }

  .top_icon_wrapper-style {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    border: 4px solid black;
    box-sizing: border-box;
    aspect-ratio: 1 / 1;
    width: 15%;
  }

  .top_icon_wrapper-style.has-notification::after {
    display: flex;
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 15px;
    height: 15px;
    background-color: red;
    border-radius: 58%;
    transform: trnslate(50%, -50%);
    border: 3px solid white; /* optional: gives it a clean cutout look */ 
  }

  .overlay_2-style {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.15);
    justify-content: center;
    align-items: center;
    z-index: 1000;
  }

  .overlay_2-style.active {
    display: flex;
  }

  .overlay_2-style.blurred {
    filter: blur(3px);
    pointer-events: none;
    touch-action: none;
    scroll-behavior: auto;
  }
  

  .popup_2-style {
    width: 90%;
    height: 90%;
    display: flex;
    flex-direction: column;
    align-items: right;
    background: white;
    border: 2px solid black;
    box-sizing: border-box;
  }

  .top_cart_popup-style {
    display: flex;
    width: 100%;
    height: 10%;
    box-sizing: border-box;
    border-bottom: 2px solid black;
  }

  .top_cart_spacer-style {
    display: flex;
    width: 9%;
  }

  .title_cart_popup-style {
    display: flex;
    width: 82%;
    justify-content: center;
    align-items: center;
  }

  .top_cart_room-style {
    display: flex;
    font-family: sans-serif;
    font-size: 60px;
    height: 100%;
  }

  .top_title_spacer-style {
    display: flex;
    width: 5%;
  }
  
  .top_cart_number-style {
    display: flex;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 60px;
    height: 100%;
  }
  
  .center_cart_popup-style {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 78%;
  }

  .center_left_popup-style {
    display: flex;
    flex-direction: column;
    width: 70%;
    height: 100%;
  }

  .entry-style {
    display: flex;
    height: 11%;
    width: 100%;
    border-bottom: 3px solid black;
  }

  .entry_number-style {
    display: flex;
    font-size: 30px;
    font-family: sans-serif;
    justify-content: center;
    align-items: center;
    width: 8%;
    height: 100%;
  }

  .entry_multiply-style {
    display: flex;
    font-size: 30px;
    font-family: sans-serif;
    justify-content: center;
    align-items: center;
    width: 5%;
    height: 100%;
  }

  .entry_price-style {
    display: flex;
    font-size: 30px;
    font-family: sans-serif;
    justify-content: center;
    align-items: center;
    width: 12%;
    height: 100%;
  }

  .entry_name-style {
    display: flex;
    font-size: 30px;
    font-family: sans-serif;
    justify-content: left;
    align-items: center;
    width: 40%;
    height: 100%;
  }

  .entry_totline-style {
    display: flex;
    font-size: 30px;
    font-family: sans-serif;
    justify-content: right;
    align-items: center;
    width: 20%;
    height: 100%;
  }

  .entry_tot_div-style {
    display: flex;
    width: 100%;
    height: 11%;
  }

  .tot_text_div-style {
    display: flex;
    font-size: 40px;
    font-family: sans-serif;
    font-weight: bold;
    justify-content: right;
    align-items: center;
    width: 65%;
    height: 100%;
  }

  .tot_price_div-style {
    display: flex;
    font-size: 40px;
    font-family: sans-serif;
    justify-content: right;
    align-items: center;
    width: 20%;
    height: 100%;
  }
  
  .center_right_popup-style {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 30%;
    height: 100%;
    border-left: 4px solid black;
  }

  .controls_canvas-style {
    display: flex;
    justify-content: right;
    align-items: center;
    width: 80%;
    height: 10%;
  }

  .center_right_spacer-style {
    display: flex;
    width: 100%;
    height: 5%;
  }

  .clearBtn-style {
    display: flex;
    height: 100%;
    background-color: white;
    border: 4px solid black;
  }

  .eraser_icon-style {
    pointer-events: none;
  }
   
  .canvas_container-style {
    display: flex;
    border: 4px solid black;
  }

  .canvas_cart-style {
    display: block;
    cursor: crosshair;
  }

  .bottom_cart_popup-style {
    width: 100%;
    height: 12%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .bottom_cart_popup_div-style {
    width: 50%;
    display: flex;
    justify-content: center;
    alugn-items: center;
  }

  .bottom_cart_send_button-style {
    width: 80%;
    height: 90%;
    background: black;
    color: white;
    font-size: 50px;
    font-family: sans-serif;
    font-weight: bold;
    border: 4px solid black;
    box-sizing: border-box;
  }

  .overlay_3-style {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.15);
    justify-content: center;
    align-items: center;
    z-index: 1001;
  }

  .overlay_3-style.active {
    display: flex;
  }

  .popup_3-style {
    display: flex;
    flex-direction: column;
    width: 50%;
    height: 50%;
    background-color: white;
    border: 2px solid black;
    box-sizing: border-box;
  }

  .alert_top_div-style {
    display: flex;
    width: 100%;
    height: 20%;
    justify-content: right;
    border-bottom: 2px solid black;
    box-sizing: border-box;
  }

  .alert_top_x_button-style {
    display: flex;
    width: 15%;
    height: 100%;
    justify-content: center;
    align-items: center;
    background-color: black;
  }
  
  .alert_title-style {
    width: 81%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: sans-serif;
    font-size: 50px;
  }

  .alert_text_div-style {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: sans-serif;
    font-size: 40px;
    width: 100%;
    height: 40%;
  }

  .alert_button_div-style {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    font-family: sans-serif;
    font-size: 40px;
    width: 100%;
    height: 40%;
  }

  .button_alert-style {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30%;
    height: 50%;
    font-family: sans-serif;
    font-size: 40px;
    font-weight: bold;
    background-color: black;
    color: white;
  }

  .top_queue_div_left-style {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30%;
    height: 100%;    
  }

  .sync_button-style {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: sans-serif;
    font-size: 40px;
    font-weight: bold;
    background-color: black;
    color: white;
    width: 35%;
    height: 80%;
  }

  .title_queue_popup-style {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: sans-serif;
    font-size: 60px;
    width: 40%;
    height: 100%;
  }
  
  .top_queue_spacer_right-style {
    display: flex;
    width: 21%;
    height: 100%;
  }

  .queue_container-style {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 90%;
    overflow-y: auto;
  }