/* ============================================================
   MC-THEME — Minecraft Overworld Design System (ตาม PROJECT.md)
   โทนสว่าง อบอุ่น กระดาษ/หิน + ปุ่มหญ้า 3 มิติ + เงาบล็อกแข็ง
   ============================================================ */

:root {
  --font: "Kanit", system-ui, "Segoe UI", sans-serif;

  /* พื้น/พาเนล (โทนกระดาษ-หิน อุ่น) */
  --paper: #efe6d0;
  --panel: #fbf7ec;
  --panel-2: #f2ead6;
  --edge: #cdb98d;
  --edge-d: #a88f60;
  --edge-sh: #d8c8a0;

  /* ตัวอักษร */
  --ink: #3a2e1b;
  --ink-soft: #6b5a3e;

  /* วัสดุ Minecraft */
  --grass: #6cbf45;
  --grass-l: #7ecf58;
  --grass-d: #4e9531;
  --grass-dd: #3c7a24;
  --dirt: #a97143;
  --dirt-d: #8f5d34;
  --wood: #7d5836;
  --wood-d: #5a3f26;
  --gold: #f2a72e;
  --gold-d: #c98a12;
  --sky: #8fcdf3;
  --danger: #d9534f;
  --danger-d: #b03e3a;
}

/* ---------- ฐานหน้าเว็บ ---------- */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  background-color: var(--paper);
  /* ลายจุดกระดาษจางๆ ให้พื้นมีเนื้อ ไม่แบนเรียบ */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64'><rect x='6' y='10' width='3' height='3' fill='%23e3d7b9'/><rect x='40' y='6' width='3' height='3' fill='%23e7dcc2'/><rect x='24' y='30' width='3' height='3' fill='%23e3d7b9'/><rect x='52' y='44' width='3' height='3' fill='%23e7dcc2'/><rect x='12' y='52' width='3' height='3' fill='%23e3d7b9'/></svg>");
  color: var(--ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

::selection {
  background: rgba(108, 191, 69, 0.35);
}

::-webkit-scrollbar {
  width: 12px;
}
::-webkit-scrollbar-track {
  background: var(--paper);
}
::-webkit-scrollbar-thumb {
  background: var(--edge-d);
  border: 3px solid var(--paper);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--dirt);
}

/* ---------- พาเนลกระดาษ GUI (คงชื่อ .glass-panel เป็น hook เดิม) ---------- */
.glass-panel,
.panel {
  background: var(--panel) !important;
  border: 2px solid var(--edge) !important;
  border-radius: 14px !important;
  box-shadow:
    0 6px 0 var(--edge-sh),
    0 16px 26px -16px rgba(60, 40, 10, 0.4) !important;
  backdrop-filter: none !important;
  color: var(--ink);
}

/* การ์ดที่อยากให้เด้งเมื่อ hover */
.mc-hover {
  transition:
    transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.2s;
}
.mc-hover:hover {
  transform: translateY(-6px);
  border-color: var(--edge-d) !important;
  box-shadow:
    0 12px 0 var(--edge-sh),
    0 26px 40px -18px rgba(60, 40, 10, 0.45) !important;
}

/* แถบหญ้าคาดหัวพาเนล (คงชื่อ .mc-strip) */
.mc-strip {
  height: 8px;
  width: 100%;
  background: linear-gradient(180deg, var(--grass) 0 5px, var(--grass-dd) 5px);
  border-radius: 0;
}

/* ป้ายกำกับตัวเล็ก */
.tile-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- ปุ่มบล็อก 3 มิติ ---------- */
.btn-mc {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font);
  font-weight: 700;
  border-radius: 9px !important;
  cursor: pointer;
  transition:
    transform 0.08s,
    filter 0.15s;
  text-decoration: none;
}
.btn-mc:hover {
  filter: brightness(1.06);
}
.btn-mc:active {
  transform: translateY(2px);
}

/* ปุ่มหญ้า (หลัก/ซื้อ) */
.btn--grass {
  color: #fff !important;
  background: linear-gradient(180deg, var(--grass), var(--grass-d)) !important;
  border-bottom: 4px solid var(--grass-dd) !important;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
}
.btn--grass:active {
  border-bottom-width: 1px !important;
}

/* ปุ่มทอง (รอง/เติมเงิน) */
.btn--gold {
  color: #fff !important;
  background: linear-gradient(180deg, var(--gold), #e0951e) !important;
  border-bottom: 4px solid var(--gold-d) !important;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.22);
}
.btn--gold:active {
  border-bottom-width: 1px !important;
}

/* ปุ่มไม้ (เมนู/ทั่วไป) */
.btn--wood {
  color: #ffedc2 !important;
  background: linear-gradient(180deg, #8a6340, var(--wood)) !important;
  border-bottom: 4px solid var(--wood-d) !important;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.18);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
}
.btn--wood:active {
  border-bottom-width: 1px !important;
}

/* =========================================================
   สไตล์ปุ่มเพิ่มเติม (วางต่อท้าย .btn--wood)
   ========================================================= */

/* ปุ่มเพชร (VIP / พรีเมียม / สินค้าพิเศษ) */
.btn--diamond {
  color: #fff !important;
  background: linear-gradient(
    180deg,
    var(--diamond, #3be5d8),
    var(--diamond-d, #1ca39b)
  ) !important;
  border-bottom: 4px solid var(--diamond-dd, #106b65) !important;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
}
.btn--diamond:active {
  border-bottom-width: 1px !important;
}

/* ปุ่มเรดสโตน (อันตราย / ลบ / ยกเลิก / เร่งด่วน) */
.btn--redstone {
  color: #fff !important;
  background: linear-gradient(
    180deg,
    var(--redstone, #ff5252),
    var(--redstone-d, #c61a1a)
  ) !important;
  border-bottom: 4px solid var(--redstone-dd, #870e0e) !important;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
}
.btn--redstone:active {
  border-bottom-width: 1px !important;
}

/* ปุ่มเหล็ก / หิน (ปุ่มรอง / ปิดหน้าต่าง / รีเซ็ต) */
.btn--iron {
  color: #ffffff !important;
  background: linear-gradient(
    180deg,
    var(--iron, #bcc6d0),
    var(--iron-d, #8491a0)
  ) !important;
  border-bottom: 4px solid var(--iron-dd, #576370) !important;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
}
.btn--iron:active {
  border-bottom-width: 1px !important;
}

/* ปุ่มมรกต (กิจกรรม / แลกของรางวัล / โปรโมชั่น) */
.btn--emerald {
  color: #fff !important;
  background: linear-gradient(
    180deg,
    var(--emerald, #1fdf6c),
    var(--emerald-d, #11ad4e)
  ) !important;
  border-bottom: 4px solid var(--emerald-dd, #0a7333) !important;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
}
.btn--emerald:active {
  border-bottom-width: 1px !important;
}

/* ปุ่มลาพิส (ข้อมูล / กฎระเบียบ / ลิงก์ Discord / ข่าวสาร) */
.btn--lapis {
  color: #fff !important;
  background: linear-gradient(
    180deg,
    var(--lapis, #3f7bfb),
    var(--lapis-d, #2252c7)
  ) !important;
  border-bottom: 4px solid var(--lapis-dd, #133385) !important;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
}
.btn--lapis:active {
  border-bottom-width: 1px !important;
}

/* ปุ่มออบซิเดียน / เนเธอร์ไรต์ (ดำดุดัน / แรร์ไอเทม / ลับ) */
.btn--obsidian {
  color: #ded6ed !important;
  background: linear-gradient(
    180deg,
    var(--obsidian, #463a59),
    var(--obsidian-d, #292036)
  ) !important;
  border-bottom: 4px solid var(--obsidian-dd, #16101f) !important;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.2);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
}
.btn--obsidian:active {
  border-bottom-width: 1px !important;
}

/* ปุ่มอเมทิสต์ (กาชาปอง / กล่องสุ่ม / เวทมนตร์) */
.btn--amethyst {
  color: #fff !important;
  background: linear-gradient(
    180deg,
    var(--amethyst, #b96bf8),
    var(--amethyst-d, #8529d4)
  ) !important;
  border-bottom: 4px solid var(--amethyst-dd, #581691) !important;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
}
.btn--amethyst:active {
  border-bottom-width: 1px !important;
}

/* ปุ่มกระดาษ (secondary เบาๆ) */
.btn--soft {
  color: var(--ink) !important;
  background: var(--panel) !important;
  border: 2px solid var(--edge) !important;
  border-bottom-width: 4px !important;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6);
}
.btn--soft:hover {
  background: var(--panel-2) !important;
}
.btn--soft:active {
  border-bottom-width: 2px !important;
}

/* ปุ่มแดง (ออกจากระบบ/ลบ) */
.btn--danger {
  color: #fff !important;
  background: linear-gradient(180deg, #e2645f, var(--danger)) !important;
  border-bottom: 4px solid var(--danger-d) !important;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.22);
}
.btn--danger:active {
  border-bottom-width: 1px !important;
}

/* ปุ่มถูกปิดใช้งาน */
.btn--disabled,
.btn-mc:disabled {
  color: #9c8c6d !important;
  background: var(--panel-2) !important;
  border: 2px solid var(--edge) !important;
  cursor: not-allowed;
  text-shadow: none;
  box-shadow: none;
  filter: none !important;
  transform: none !important;
}

/* ---------- ป้ายไม้ (เลข/แท็ก มุมภาพ) ---------- */
.woodtag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 800;
  font-size: 0.74rem;
  color: #ffedc2;
  padding: 4px 11px;
  border-radius: 7px;
  background: var(--wood);
  border: 2px solid var(--wood-d);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
}

/* ---------- ป้ายสถานะ Online/Offline ---------- */
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 0.74rem;
  padding: 4px 11px;
  border-radius: 7px;
  color: #fff;
  border: 2px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}
.status--on {
  background: #5fbb3a;
}
.status--off {
  background: #9aa0a6;
}
.status__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
}
.status--on .status__dot {
  animation: mcPulse 1.8s infinite;
}
@keyframes mcPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

/* ---------- หัวข้อ Section (บล็อกไอคอนนำหน้า) ---------- */
.sec-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
  color: var(--ink);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
}
.sec-title__ic {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  background: var(--panel);
  border: 2px solid var(--edge);
  border-radius: 9px;
  box-shadow: 0 3px 0 var(--edge-sh);
  flex: none;
}

/* ---------- ไอคอนพิกเซล ---------- */
.ic {
  image-rendering: pixelated;
  display: inline-block;
  vertical-align: middle;
}
.pixelated {
  image-rendering: pixelated;
}

/* ---------- ชิปกระดาษ (คงชื่อ .mc-chip) ---------- */
.mc-chip {
  border-radius: 9px !important;
  background: var(--panel);
  border: 2px solid var(--edge);
  box-shadow: 0 2px 0 var(--edge-sh);
  color: var(--ink);
}

/* ---------- ลิงก์เมนูบน (คงชื่อ .nav-link) ---------- */
.nav-link {
  position: relative;
  color: var(--ink-soft) !important;
  font-weight: 600;
  transition: color 0.2s ease;
}
.nav-link::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  width: 0;
  height: 4px;
  background: linear-gradient(180deg, var(--grass) 0 2px, var(--grass-dd) 2px);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: width 0.22s ease;
}
.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}
.nav-link:hover,
.nav-link.active {
  color: var(--ink) !important;
}

/* ---------- ช่องกรอกข้อมูล ---------- */
.input-mc {
  width: 100%;
  background: #fffdf5;
  border: 2px solid var(--edge);
  border-radius: 9px;
  padding: 10px 14px;
  color: var(--ink);
  font-family: var(--font);
  outline: none;
  box-shadow: inset 0 2px 0 rgba(60, 40, 10, 0.06);
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.input-mc::placeholder {
  color: #b3a27f;
}
.input-mc:focus {
  border-color: var(--grass-d);
  box-shadow: 0 0 0 3px rgba(108, 191, 69, 0.25);
}
.input-mc[readonly] {
  background: var(--panel-2);
  color: var(--ink-soft);
}

/* ---------- ปุ่มหมวดหมู่ (shop / point shop — hook: .category-button/.active-category) ---------- */
.category-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 9px;
  border: 2px solid var(--edge);
  background: var(--panel);
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--edge-sh);
  transition:
    transform 0.1s,
    background 0.15s,
    color 0.15s;
}
.category-button:hover {
  background: var(--panel-2);
  color: var(--ink);
}
.category-button:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--edge-sh);
}
.category-button.active-category {
  background: linear-gradient(180deg, var(--grass), var(--grass-d));
  border-color: var(--grass-dd);
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
  box-shadow:
    0 3px 0 var(--grass-dd),
    inset 0 2px 0 rgba(255, 255, 255, 0.35);
}
.cat-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 800;
  background: rgba(0, 0, 0, 0.12);
}
.category-button:not(.active-category) .cat-count {
  background: var(--panel-2);
  border: 1px solid var(--edge);
  color: var(--ink-soft);
}

/* ---------- แท็บโปรไฟล์ (hook: .history-tab) ---------- */
.history-tab {
  color: var(--ink-soft);
  border: 2px solid transparent;
  border-radius: 9px;
}
.history-tab:hover {
  background: var(--panel-2);
  color: var(--ink);
}
.history-tab.active {
  background: linear-gradient(180deg, var(--grass), var(--grass-d));
  border-color: var(--grass-dd);
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
  box-shadow:
    0 3px 0 var(--grass-dd),
    inset 0 2px 0 rgba(255, 255, 255, 0.35);
}

/* ---------- แท็บหน้าเติมเงิน (hook: .tab-button) ---------- */
.tab-button {
  color: var(--ink-soft);
  font-weight: 600;
}
.tab-button.tab-active {
  color: var(--grass-dd);
  font-weight: 800;
}

/* ---------- ชิปสถานะ (เวลาขาย/จำกัดซื้อ) ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 7px;
  border: 2px solid;
  width: fit-content;
}
.chip--amber {
  background: #fdf3d9;
  color: #9a6b12;
  border-color: #ecd9a3;
}
.chip--green {
  background: #e9f6df;
  color: #3c7a24;
  border-color: #c4e3ab;
}
.chip--gray {
  background: var(--panel-2);
  color: var(--ink-soft);
  border-color: var(--edge);
}
.chip--red {
  background: #fbe4e2;
  color: #a83f3b;
  border-color: #efc2be;
}

/* ---------- แถบความคืบหน้า ---------- */
.prog {
  width: 100%;
  background: var(--panel-2);
  border: 2px solid var(--edge);
  border-radius: 9px;
  overflow: hidden;
  box-shadow: inset 0 2px 3px rgba(60, 40, 10, 0.15);
}
.prog__fill {
  height: 100%;
  background: linear-gradient(180deg, var(--grass-l) 0 40%, var(--grass) 40%);
  border-right: 2px solid var(--grass-dd);
  border-radius: 0 5px 5px 0;
  transition: width 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.prog__fill--gold {
  background: linear-gradient(180deg, #ffc95e 0 40%, var(--gold) 40%);
  border-right-color: var(--gold-d);
}

/* ---------- Hero ฉากโลก Minecraft ---------- */
.hero {
  position: relative;
  min-height: 470px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    url("../img/hero.svg") center bottom / cover no-repeat,
    var(--sky);
  box-shadow:
    inset 0 90px 120px -60px rgba(10, 40, 70, 0.45),
    inset 0 -3px 0 var(--grass-dd);
  border-radius: 0 0 18px 18px;
  overflow: hidden;
}
/* โหมดรูปพื้นหลังจากหลังบ้าน: จัดรูปกึ่งกลาง + เงาทับให้ข้อความ/ปุ่มอ่านชัดบนรูปอะไรก็ได้ */
.hero--custom {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.hero--custom::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(20, 14, 6, 0.5),
    rgba(20, 14, 6, 0.22) 45%,
    rgba(20, 14, 6, 0.5)
  );
  pointer-events: none;
}

.hero__title {
  color: #fff;
  font-weight: 800;
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.28);
  line-height: 1.1;
}
.hero__sub {
  color: #f2fbff;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
  font-weight: 500;
}
/* ชื่อร้านสไตล์โลโก้เกม: ฟอนต์ display หนากลม (Titan One / ไทยใช้ Chonburi)
   หน้าอักษรสีครีม + เส้นขอบไม้ + นูน 3 มิติแบบชั้นบล็อก (extrude) + เอียงเล็กน้อยให้มีพลัง */
.hero__logo {
  display: inline-block;
  font-family: "Titan One", "Chonburi", "Kanit", sans-serif;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.15;
  color: #fffdf5;
  transform: rotate(-1.5deg);
  -webkit-text-stroke: 1.5px #7d5836;
  text-shadow:
    0 2px 0 #d9c294,
    0 3px 0 #b78c52,
    0 5px 0 #8a5f33,
    0 6px 0 #5f3f22,
    0 11px 18px rgba(40, 24, 8, 0.35);
}
@media (min-width: 768px) {
  .hero__logo {
    -webkit-text-stroke-width: 2px;
    text-shadow:
      0 2px 0 #d9c294,
      0 4px 0 #b78c52,
      0 6px 0 #8a5f33,
      0 8px 0 #5f3f22,
      0 14px 22px rgba(40, 24, 8, 0.35);
  }
}

/* ป้ายไม้ใต้ชื่อร้าน: คำโปรยอ่านชัดบนฟ้าสว่าง */
.hero__board {
  position: relative;
  display: inline-block;
  background: linear-gradient(180deg, #8a6340, #7d5836);
  border: 3px solid #5a3f26;
  border-radius: 10px;
  padding: 10px 26px;
  color: #ffedc2;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35);
  box-shadow:
    0 5px 0 rgba(0, 0, 0, 0.25),
    inset 0 2px 0 rgba(255, 255, 255, 0.15);
}
/* หมุดตะปูสองข้างของป้าย */
.hero__board::before,
.hero__board::after {
  content: "";
  position: absolute;
  top: 8px;
  width: 6px;
  height: 6px;
  background: #4a3016;
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.hero__board::before {
  left: 8px;
}
.hero__board::after {
  right: 8px;
}

.hero__mc {
  display: inline-block;
  background: linear-gradient(180deg, var(--grass), var(--grass-d));
  color: #fff5cf;
  padding: 2px 16px;
  border-radius: 10px;
  border-bottom: 5px solid var(--grass-dd);
  box-shadow:
    0 5px 0 rgba(0, 0, 0, 0.18),
    inset 0 2px 0 rgba(255, 255, 255, 0.35);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
}

/* ---------- Footer แถบดิน ---------- */
.foot__grass {
  height: 10px;
  background: linear-gradient(180deg, var(--grass) 0 6px, var(--grass-dd) 6px);
}
.foot__in {
  background: url("../img/dirt.svg") repeat;
  background-size: 90px;
  box-shadow: inset 0 40px 60px -40px rgba(0, 0, 0, 0.5);
  color: #ffe9c9;
}
.foot__in a {
  color: #ffe9c9;
}
.foot__in a:hover {
  color: #ffd77a;
}
.foot-link {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.18);
  border: 2px solid rgba(0, 0, 0, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: background 0.15s;
}
.foot-link:hover {
  background: rgba(0, 0, 0, 0.32);
}

/* ---------- ตาราง ---------- */
.mc-table {
  width: 100%;
  text-align: left;
  color: var(--ink);
}
.mc-table thead {
  color: var(--grass-dd);
  border-bottom: 2px solid var(--edge);
}
.mc-table tbody tr {
  border-bottom: 1px solid var(--panel-2);
  transition: background 0.12s;
}
.mc-table tbody tr:hover {
  background: var(--panel-2);
}

/* ---------- SweetAlert2 → พาเนลกระดาษ (กันทุกจุดที่ยังส่งพารามิเตอร์สีเดิม) ---------- */
.swal2-popup {
  background: var(--panel) !important;
  color: var(--ink) !important;
  border: 2px solid var(--edge) !important;
  border-radius: 14px !important;
  box-shadow:
    0 6px 0 var(--edge-sh),
    0 16px 26px -16px rgba(60, 40, 10, 0.4) !important;
  font-family: var(--font) !important;
}
.swal2-title {
  color: var(--ink) !important;
}
.swal2-html-container {
  color: var(--ink-soft) !important;
}
.swal2-confirm {
  background: linear-gradient(180deg, var(--grass), var(--grass-d)) !important;
  border-bottom: 4px solid var(--grass-dd) !important;
  border-radius: 9px !important;
  font-weight: 700 !important;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4) !important;
}
.swal2-cancel {
  background: var(--panel-2) !important;
  color: var(--ink) !important;
  border: 2px solid var(--edge) !important;
  border-bottom-width: 4px !important;
  border-radius: 9px !important;
  font-weight: 700 !important;
}
.swal2-deny {
  border-radius: 9px !important;
}
.swal2-input,
.swal2-textarea {
  background: #fffdf5 !important;
  border: 2px solid var(--edge) !important;
  border-radius: 9px !important;
  color: var(--ink) !important;
}
.swal2-validation-message {
  background: #fbe4e2 !important;
  color: #a83f3b !important;
  border-radius: 9px;
}
.swal2-toast {
  border-width: 2px !important;
}

/* ---------- เบ็ดเตล็ด ---------- */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ป้ายรูปสินค้า: เงาไล่จางขอบล่างเบาๆ ให้ตัวหนังสือ/ป้ายบนรูปอ่านชัด */
.img-fade::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 34%;
  background: linear-gradient(to top, rgba(58, 46, 27, 0.35), transparent);
  pointer-events: none;
}

/* ปุ่มตะกร้าลอย */
.cart-fab {
  background: linear-gradient(180deg, #8a6340, var(--wood)) !important;
  border: 2px solid var(--wood-d) !important;
  border-bottom-width: 5px !important;
  border-radius: 12px !important;
  box-shadow:
    0 6px 0 rgba(0, 0, 0, 0.2),
    0 14px 22px -10px rgba(60, 40, 10, 0.5) !important;
  color: #ffedc2 !important;
}
.cart-fab:active {
  transform: translateY(3px);
  border-bottom-width: 2px !important;
}
.cart-fab--full {
  background: linear-gradient(180deg, var(--grass), var(--grass-d)) !important;
  border-color: var(--grass-dd) !important;
  color: #fff !important;
}

/* ลดการเคลื่อนไหวตามระบบ */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}