#kitchenPlanContainer {max-width:100%;width:100%; }
#kitchenPlanContainer [data-section="buttons"] { display: flex; gap: 8px; flex-wrap: wrap; }

#kitchenPlanContainer  svg { width: 100%; max-width: 520px; display: block; }
#kitchenPlanContainer rect[data-3d] {outline: none;  stroke: #9ca3af; stroke-width: 2; fill:#f1f1f1;}
#kitchenPlanContainer rect[data-key]{cursor: pointer; outline: none;  stroke: #9ca3af; stroke-width: 2; fill:url(#checkerboard)}

#kitchenPlanContainer rect.is-selected { fill: url(#diagonalstripes); stroke: orange; stroke-width: 5; }
#kitchenPlanContainer rect.is-selected.is-on2 { fill: var(--selected-alt, white); /* or a pattern */ }

#kitchenPlanContainer rect.hide { display:none; }

#kitchenPlan input {
  position: absolute;
  border: 0;
  width: 100%;
  height: 100%;
  display:flex;
  align-items: center;;
  box-sizing: border-box;
  border-radius:6px;
  font: 16px system-ui, sans-serif;
  text-align: left;
  padding-left: 22px;  /* space for arrow */
  padding-right: 22px; /* space for "cm" */
}

#kitchenPlan .inputArrow {
  position: absolute;
  left: 6px;
  top: 56%;
  display:flex;
  align-items: center;

  transform: translateY(-50%);
  font: bold 14px Arial, sans-serif;
  color: #444;
  pointer-events: none; /* make it click-through */
}

#kitchenPlan .inputArrow.vertical {
  transform: translateY(-50%) rotate(90deg);
}


.kitchenChooseCon {padding:20px 20px;margin:2rem 0rem;border-radius:10px;border:2px solid #efefef}
.kitchenChooseTitle {font-weight:bold;font-size:1.1rem;display:flex;gap:5px;align-items: center;gray;padding-bottom:4px;}
.kitchenChooseCon .kitchenChooseTitle {border-bottom: 4px solid;border-image: linear-gradient(to right,#F7BF29 18px, #efefef 0) 1;margin-bottom:0.7rem;}

.kitchenChoices {
    display: flex;
    flex-direction: column;
    gap: 12px;margin-top:16px;
    align-items:flex-start;
}
.kitchenChoice {display: flex; flex-direction: row;padding:5px 10px;border-radius:5px;gap:10px;min-width: 150px;;border:2px solid #efefef;border-radius:5px;cursor:pointer;position: relative;height:32px;}


.kitchenChoice button[data-label="itemid"] {cursor:pointer;display:flex;align-items: center;justify-content: left;background-color:transparent;border:0px;font-size:0.825rem;;font-weight:bold;text-transform:capitalize;font-weight:bold;position:absolute;left:0px;right:0px;top:0px;bottom:0px;}


.kitchenChoice[data-status="true"] {border:2px solid black}
.kitchenChoice[data-status="true"]::after {position:absolute;top:0px;right:5px;width:24px;bottom:0px;content:' ';display: flex;align-items: center;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"><path d="M9 22l-10-10.598 2.798-2.859 7.149 7.473 13.144-14.016 2.909 2.806z"/></svg>');background-repeat: no-repeat;background-position: center;}



.kitchenChoicesRow {
    display: flex;
    flex-direction: row !important;
    gap: 12px; flex-wrap: wrap;
}






.kitchenExtraInfo {display:flex;width:16px;height:16px;background-image: url('data:image/svg+xml,<svg style="width:16px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-.001 5.75c.69 0 1.251.56 1.251 1.25s-.561 1.25-1.251 1.25-1.249-.56-1.249-1.25.559-1.25 1.249-1.25zm2.001 12.25h-4v-1c.484-.179 1-.201 1-.735v-4.467c0-.534-.516-.618-1-.797v-1h3v6.265c0 .535.517.558 1 .735v.999z"/></svg>');
}

/* ========== Invoice-style pricing table ========== */
.kitchenPrice {
  --ink: #1f2937;          /* text */
  --muted: #6b7280;        /* subtle text */
  --line: #e5e7eb;         /* row separators */
  --accent: #111827;       /* total accent line */

  width: 100%;
  background: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  color: var(--ink);
  overflow: hidden;
}



/* Rows */
.kitchenPriceItem {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 4px;
}

.kitchenPriceItem:not(:last-child) {
  border-bottom: 1px solid var(--line);
}

/* Labels */
.kitchenPriceLabel {
  flex: 0 0 150px; /* fixed width for labels */
  font-weight: 500;
}
.kitchenPriceItems {
  flex: 1 1 auto;
}
/* Values (right column) */
.kitchenPriceValue {
      font-weight: 500;
  flex:  0 0 230px; /* fixed width for price */
  min-width: 10ch;
  text-align: right;
  font-variant-numeric: tabular-nums lining-nums; /* aligns digits neatly */
}

/* Total row (last item) */
.kitchenPriceItem:last-child {
  border-top: 2px solid var(--accent);
  font-weight: 700;
  padding-block: 16px;
}
.kitchenPriceItem:last-child * {font-weight:bold;}
/* --------- Responsive tweaks --------- */

  .kitchenButtons {display:flex;gap:40px;margin-top:1rem;}

  @media (max-width: 480px) {

  [data-section="buttons"] {flex-direction: row;}
  .kitchenButtons {flex-direction: column !important;}
  .kitchenChooseCon {padding:20px 0px;border:0px;border-right:0px;border-radius:0;box-shadow:0px;}
  .kitchenPriceItem {gap:0px;

    padding:0px;
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 columns */
  margin-top:1rem;
  position: relative;
  padding-bottom:4px;
border:0px !important;

  }



.kitchenPriceItem:last-child {
  border-top: 2px dashed black !important; 
}


  .kitchenPriceItem .kitchenPriceLabel{
  grid-column: 1;
  grid-row: 1;
  display: grid; place-items: left;font-weight: bold;;

  }  
  .kitchenPriceItems{
  grid-column: 1 / 3;             /* spans both columns */
  grid-row: 2;
  display: flex; place-items: left;gap:5px;flex-wrap: wrap;color:#888888
  }
    .kitchenPriceItems::before {content: "-";}
  .kitchenPriceItems div{gap:0px;
font-style: italic;color:#888888}
  .kitchenPriceValue {
  grid-column: 2;font-weight:bold;
  grid-row: 1;
  display: grid; place-items: right;
  }

  
}