/* ร้านค้า NPC สำหรับมือถือ — Class4-RO
   ใช้โทเคนเดียวกับ c4-theme.css ทั้งชุด ให้เป็นพี่น้องกับ AI Menu
   ทองใช้เป็นพื้นปุ่มเท่านั้น ไม่ใช้เป็นสีตัวอักษร (ทองบนขาวคอนทราสต์ราว 1.6:1) */

#c4shop {
  position: fixed; inset: 0; z-index: 820;
  display: none; flex-direction: column;
  font-family: 'IBM Plex Sans Thai', Tahoma, sans-serif;
  color: var(--c4-text, #384a5e);
  background: linear-gradient(180deg, #e1f0fa, #cfe6f6);
  -webkit-user-select: none; user-select: none;
}
#c4shop.on { display: flex; }

/* ── หัวแผง ───────────────────────────────────────────────── */
#c4shop .sh-head {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: linear-gradient(180deg, #e6f3fc, #b3d8ef);
  border-bottom: 1px solid var(--c4-line, #acd1e8);
  flex-shrink: 0;
}
#c4shop .sh-ico {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  background: #fff; border: 1px solid var(--c4-line, #acd1e8);
  display: flex; align-items: center; justify-content: center;
}
#c4shop .sh-ttl { flex-grow: 1; min-width: 0 }
#c4shop .sh-ttl b {
  display: block; font-size: 15px; font-weight: 700; line-height: 1.15;
  color: var(--c4-blueDeep, #1f5f93);
}
#c4shop .sh-ttl span { font-size: 11px; color: var(--c4-sub, #4a5e74); line-height: 1.2 }

#c4shop .sh-zeny {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
  padding: 5px 11px; background: #fff;
  border: 1px solid var(--c4-line, #acd1e8); border-radius: 999px;
  font-size: 14px; font-weight: 700;
}
#c4shop .sh-zeny i {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--c4-accent, #ffcb5c); border: 1px solid var(--c4-accentDeep, #f0a52e);
}
#c4shop .sh-x {
  width: 44px; height: 32px; flex-shrink: 0;
  border: 1px solid var(--c4-line, #acd1e8); background: #fff; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}

/* ── แถบค้นหา ─────────────────────────────────────────────── */
#c4shop .sh-tools { display: flex; align-items: center; gap: 8px; padding: 7px 12px 6px; flex-shrink: 0 }
#c4shop .sh-find {
  flex-grow: 1; display: flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 11px; background: #fff;
  border: 1px solid var(--c4-line, #acd1e8); border-radius: 10px;
}
#c4shop .sh-find input {
  border: 0; outline: 0; width: 100%; background: transparent;
  font-family: inherit; font-size: 13px; color: var(--c4-text, #384a5e);
  -webkit-user-select: text; user-select: text;
}
#c4shop .sh-all {
  height: 36px; padding: 0 14px; flex-shrink: 0;
  border: 1px solid var(--c4-line, #acd1e8); background: #fff; border-radius: 999px;
  font-family: inherit; font-size: 12px; font-weight: 600;
  color: var(--c4-blueDeep, #1f5f93); cursor: pointer;
}

/* ── เนื้อหา ──────────────────────────────────────────────── */
#c4shop .sh-body { display: flex; gap: 10px; padding: 0 12px 10px; flex-grow: 1; min-height: 0 }

#c4shop .sh-pane {
  display: flex; flex-direction: column; min-height: 0;
  background: #fff; border: 1px solid var(--c4-line, #acd1e8);
  border-radius: 12px; overflow: hidden;
}
#c4shop .sh-list { flex-grow: 1; min-width: 0 }
#c4shop .sh-cart { width: 268px; flex-shrink: 0 }

#c4shop .sh-cap {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 12px; flex-shrink: 0;
  background: var(--c4-panelHead, #f0f7fc);
  border-bottom: 1px solid var(--c4-lineSoft, #d7e8f5);
  font-size: 12px; font-weight: 600; color: var(--c4-sub, #4a5e74);
}
#c4shop .sh-clear {
  height: 28px; padding: 0 10px; border: 0; background: transparent;
  font-family: inherit; font-size: 12px; font-weight: 600;
  color: var(--c4-blueDeep, #1f5f93); cursor: pointer; text-decoration: underline;
}

#c4shop .sh-scroll { flex-grow: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 0 }
#c4shop .sh-scroll::-webkit-scrollbar { width: 6px }
#c4shop .sh-scroll::-webkit-scrollbar-thumb { background: var(--c4-line, #acd1e8); border-radius: 3px }

#c4shop .sh-row {
  display: flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 6px 12px;
  border-bottom: 1px solid #eef5fa;
}
#c4shop .sh-row.picked { background: #fffaf0 }
#c4shop .sh-txt { flex-grow: 1; min-width: 0 }
#c4shop .sh-txt b {
  display: block; font-size: 13px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#c4shop .sh-txt span { font-size: 11px; color: var(--c4-sub, #4a5e74) }

#c4shop .sh-add {
  height: 34px; min-width: 76px; padding: 0 14px; flex-shrink: 0;
  border: 1px solid var(--c4-accentDeep, #f0a52e);
  background: var(--c4-accent, #ffcb5c); border-radius: 999px;
  font-family: inherit; font-size: 12px; font-weight: 700;
  color: #3a2a08; cursor: pointer;
}
#c4shop .sh-lock {
  display: flex; align-items: center; gap: 5px; flex-shrink: 0;
  height: 30px; padding: 0 11px; border-radius: 999px;
  background: #eef2f6; color: var(--c4-sub, #4a5e74);
  font-size: 11px; font-weight: 600;
}

/* ตัวนับ: ปุ่ม 34px ยังอยู่ในระยะนิ้วเพราะชิดกันเป็นกลุ่มเดียว */
#c4shop .sh-step { display: flex; align-items: center; flex-shrink: 0 }
#c4shop .sh-step button {
  width: 34px; height: 34px; border: 1px solid var(--c4-line, #acd1e8);
  background: #fff; font-family: inherit; font-size: 17px; font-weight: 700;
  color: var(--c4-blueDeep, #1f5f93); cursor: pointer;
}
#c4shop .sh-step .mi { border-radius: 8px 0 0 8px }
#c4shop .sh-step .pl { border-radius: 0 8px 8px 0 }
#c4shop .sh-step .n {
  min-width: 40px; height: 34px; display: flex; align-items: center; justify-content: center;
  border-top: 1px solid var(--c4-line, #acd1e8);
  border-bottom: 1px solid var(--c4-line, #acd1e8);
  background: #f8fcff; font-size: 13px; font-weight: 700;
}

#c4shop .sh-empty {
  padding: 26px 18px; text-align: center;
  color: var(--c4-sub, #4a5e74); font-size: 12px; line-height: 1.6;
}

/* ── ท้ายแผง ──────────────────────────────────────────────── */
#c4shop .sh-foot {
  padding: 9px 12px 11px; flex-shrink: 0;
  border-top: 1px solid var(--c4-lineSoft, #d7e8f5); background: #f8fcff;
}
#c4shop .sh-sum {
  display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px;
}
#c4shop .sh-sum span { font-size: 12px; color: var(--c4-sub, #4a5e74) }
#c4shop .sh-sum b {
  font-size: 22px; font-weight: 700; line-height: 1; color: var(--c4-blueDeep, #1f5f93);
}
#c4shop .sh-sum b.bad { color: #b4342a }
#c4shop .sh-sum b i { font-size: 13px; font-weight: 600; margin-left: 3px; font-style: normal }

#c4shop .sh-go {
  width: 100%; height: 46px; border-radius: 12px;
  border: 1px solid var(--c4-accentDeep, #f0a52e);
  background: linear-gradient(180deg, var(--c4-accentLite, #ffe9a9), var(--c4-accent, #ffcb5c));
  font-family: inherit; font-size: 16px; font-weight: 700;
  color: #3a2a08; cursor: pointer; box-shadow: 0 3px 0 #e2941f;
}
#c4shop .sh-go[disabled] {
  background: #e4ecf3; border-color: var(--c4-off, #c7d6e0);
  color: #7a8ea1; box-shadow: none; cursor: default;
}

/* ── ข้อความผลลัพธ์ ───────────────────────────────────────── */
#c4shopToast {
  position: fixed; left: 50%; bottom: 76px; transform: translateX(-50%);
  z-index: 900; max-width: 86vw;
  padding: 10px 18px; border-radius: 999px;
  font-family: 'IBM Plex Sans Thai', Tahoma, sans-serif;
  font-size: 13px; font-weight: 600; color: #223a4f;
  background: #fff; border: 1px solid var(--c4-line, #acd1e8);
  box-shadow: 0 10px 28px -12px #0b2a4455;
  pointer-events: none;
}
#c4shopToast.bad { color: #7d2a22; border-color: #e0a79f; background: #fff4f2 }

/* ── แนวตั้ง: รายการเต็มจอ ตัวนับอยู่ในแถว สรุปติดขอบล่าง ── */
@media (max-aspect-ratio: 1/1) {
  #c4shop .sh-body { flex-direction: column; gap: 0 }
  #c4shop .sh-cart { width: auto; border: 0; border-radius: 0; background: transparent }
  #c4shop .sh-cart .sh-cap, #c4shop .sh-cart .sh-scroll { display: none }
  #c4shop .sh-cart .sh-foot {
    border: 1px solid var(--c4-line, #acd1e8); border-radius: 12px; margin-top: 10px;
  }
  #c4shop .sh-row { min-height: 62px }
  #c4shop .sh-step button { width: 38px; height: 38px }
  #c4shop .sh-step .n { min-width: 44px; height: 38px; font-size: 15px }
  #c4shop .sh-add { height: 38px }
  #c4shop .sh-go { height: 54px; font-size: 17px }
}