body {

  margin: 0;

  font-family: Arial, sans-serif;

  background-color: #2f2f2f;

  color: #fff;

}

header {

  background: #1f1f1f;

  padding: 15px;

  text-align: center;

  font-size: 24px;

  font-weight: bold;

  height: 30px;

}

.pos {

  display: grid;

  grid-template-columns: 3fr 1fr;

  /* Adjusted height calculation: 100vh minus header height (approx 60px) */

  height: calc(100vh - 60px);

}

.menu {

  padding: 15px;

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 10px;

  overflow-y: auto;

}



.item {

  background: #ffeb3b;

  color: #000;

  padding: 10px;

  text-align: center;

  font-weight: bold;

  border-radius: 4px;

  cursor: pointer;

  transition: background 0.1s;

}

.item:hover {

    background: #fdd835; /* Darker yellow on hover */

}

.item small {

  display: block;

  font-weight: normal;

}

.sidebar {

  background: #e0e0e0;

  color: #000;

  padding: 10px;

  display: flex;

  flex-direction: column;

}

.screen {

  background: #fff;

  color: #000;

  /* Adjusted height to make room for total and buttons */

  flex-grow: 1;

  padding: 10px;

  margin-bottom: 10px;

  overflow-y: auto;

  border-radius: 4px;

  /* Styling for order list items */

  font-size: 14px;

}

.order-item {

    display: flex;

    justify-content: space-between;

    margin-bottom: 5px;

    border-bottom: 1px dashed #ccc;

    padding-bottom: 2px;

}

.total-area {

    padding: 10px 0;

    font-size: 1.2em;

    font-weight: bold;

    display: flex;

    justify-content: space-between;

}

.btn {

  padding: 15px;

  margin: 5px 0;

  border: none;

  font-weight: bold;

  cursor: pointer;

  border-radius: 4px;

  transition: background 0.2s;

}

.pay { background: #4caf50; color: #fff; }

.pay:hover { background: #43a047; }

.clear { background: #f44336; color: #fff; }

.clear:hover { background: #e53935; }



.item.disabled {

    background: #555 !important;

    color: #999 !important;

    cursor: not-allowed;

}



.menu h3 {

    grid-column: 1 / -1;

    margin: 20px 0 10px 0;

    color: #ffeb3b;

    border-bottom: 1px solid #555;

    font-size: 1.2rem;

    padding-bottom: 5px;

}



.stock-label {

    display: block;

    font-size: 10px;

    color: #d32f2f;

    margin-top: 5px;

}