/* =========================================================================
   BLM48 Membership — Shared styles used across multiple pages.
   Loaded via <link rel="stylesheet" href="assets/css/common.css">.
   Only rules confirmed byte-identical across the pages that use them are
   kept here, so removing the duplicated copy from each page is a safe,
   no-visual-change cleanup.
   ========================================================================= */

/* Bottom tab bar (floating nav) — used by shop.html, notification.html, profile.html */
.bottom-tab-bar {
  /* 👑 Layer 1: ชั้นโปร่งใสล่างสุด ขยายความสูงรวมเพิ่มขึ้นเป็น 110px ให้ Nav ดูสูงเด่น */
  height: calc(110px + env(safe-area-inset-bottom, 0px));
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  background: transparent;
  display: flex;
  justify-content: space-around;
  align-items: flex-end; /* ยึดฐานปุ่มจากขอบล่างสุด */
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-sizing: border-box;
  /* 🐛 แก้บัค iOS Safari: fixed element เลื่อนตามจอระหว่าง momentum scroll เพราะ WebKit
     วาด layer ใหม่ทุกครั้งที่ scroll — บังคับให้ขึ้น GPU layer ของตัวเองค้างไว้เลย */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.bottom-tab-bar::before {
  content: "";
  position: absolute;
  /* 👑 Layer 2: ขยับท็อปลงมาที่ 60px เพื่อให้เหลือเนื้อผ้าสีขาวหนา 50px (เกือบครึ่งหนึ่งของความสูงรวม 110px) */
  top: 60px;
  left: 0;
  right: 0;
  bottom: 0;
  /* ✨ Glassmorphism: กระจกฝ้าโปร่งแสงแทนแท่งทึบเดิม ให้กลืนกับพื้นหลังแทนที่จะตัดขอบแข็ง */
  background: var(--glass-bg-strong, rgba(255, 255, 255, 0.46));
  -webkit-backdrop-filter: blur(var(--glass-blur-lg, 42px));
  backdrop-filter: blur(var(--glass-blur-lg, 42px));
  border-top: 1px solid var(--glass-border, rgba(255, 255, 255, 0.4));
  border-radius: 28px 28px 0 0; /* เพิ่มความโค้งมนให้ดูละมุนรับกับบาร์ที่สูงขึ้น */
  box-shadow: 0 -4px 24px rgba(120, 90, 60, 0.10);
  z-index: 1;
}

.tab-item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20%;
  height: 50px; /* ปรับความสูงบล็อกกดให้บาลานซ์กับ Layer สีขาว */
  position: relative;
  z-index: 2;
  text-decoration: none;
  color: #8e8e93;

  /* 🚀 ดันไอคอนให้เลื่อนสูงขึ้นไปข้างบน 30px ทะลุเลเยอร์สีขาวขึ้นไปลอยเด่นอยู่บนชั้นโปร่งใสครึ่งตัวพอดี */
  transform: translateY(-30px);
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* ปรับสปริงให้เด้งนุ่มนวลขึ้น */
}

/* 🌟 เอฟเฟกต์ตอนเอานิ้วจิ้มปุ่มปกติ */
.tab-item:active {
  transform: translateY(-30px) scale(0.85);
  opacity: 0.8;
}

/* 👑 ปุ่มสถานะ Active (หน้าปัจจุบัน): ดีดตัวลอยสูงเด่นขึ้นไปอีกที่ 45px กลายเป็นปุ่มฮีโร่ลอยเด่นสะดุดตา */
.tab-item.active {
  color: #ffb3c1;
  transform: translateY(-45px);
}
/* เอฟเฟกต์ตอนเอานิ้วจิ้มปุ่มที่ Active อยู่ */
.tab-item.active:active {
  transform: translateY(-45px) scale(0.85);
}

/* ------------------------------------------------------------- */
/* 🔥 ตั้งค่าให้ไอคอนและรูปภาพขยายใหญ่ขึ้นตอน Active เท่านั้น */
/* ------------------------------------------------------------- */

.tab-item.active i {
  font-size: 45px; /* 🚀 ขยายขนาดฟอนต์ไอคอนจากเดิม 34px เป็น 45px ให้ใหญ่เด่นสะใจ */
}

.tab-item.active img {
  width: 58px;    /* 🚀 ขยายขนาดรูปจากเดิม 44px เป็น 58px */
  height: 58px;
}

.tab-item.active #tab-profile-img {
  width: 50px !important;  /* 🚀 ขยายขนาดรูปโปรไฟล์จากเดิม 38px เป็น 50px */
  height: 50px !important;
}
/* ------------------------------------------------------------- */

/* ขยายขนาดไอคอน FontAwesome (✨ ลบเงาออกแล้ว) */
.tab-item i {
  font-size: 34px;
  /* ลบ filter: drop-shadow ออกเพื่อให้ปุ่มดูคลีนเรียบเนียน */
  transition: font-size 0.2s ease;
}

/* ขยายขนาดรูปไอคอนแชมป์สั่งทำ (✨ ลบเงาออกแล้ว) */
.tab-item img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  /* ลบ filter: drop-shadow ออกเพื่อให้ปุ่มดูคลีนเรียบเนียน */
  transition: width 0.2s ease, height 0.2s ease;
}

/* ปรับแต่งวงกลมรูปโปรไฟล์ให้ลอยขึ้นมาอย่างสมดุล */
#tab-profile-img {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50%;
  border: 2px solid #ffb3c1;
  box-sizing: border-box;
  transition: width 0.2s ease, height 0.2s ease;
}