/* ============================================================
   NewBooks.css
   ============================================================ */

/* ── 自訂色彩變數 ── */
:root {
  --gdNavy-05   : rgba(26, 46, 90, 0.05);
  --gdNavy-10   : rgba(26, 46, 90, 0.10);
  --gdNavy-40   : rgba(26, 46, 90, 0.40);
  --gdNavy-50   : rgba(26, 46, 90, 0.50);
}


/* ============================================================
   外層容器
   ============================================================ */

/* w-full shadow-sm overflow-hidden relative */
.nb-wrap {
  width: 100%;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
  overflow: hidden;
  position: relative;
}


/* ============================================================
   背景分色區塊
   ============================================================ */

/* absolute inset-0 z-0 */
.nb-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

/* h-[55%] bg-[#ffe4ae] */
.nb-bg-top {
  height: 55%;
}

/* h-[45%] bg-[#f1fff1] */
.nb-bg-bottom {
  height: 45%;
  background-color: #f1ece0;border-radius: 2rem 2rem 0 0;
}

/* relative z-10 */
.nb-fg {
  position: relative;
  z-index: 10;
}


/* ============================================================
   Section / Container
   ============================================================ */

/* container mx-auto px-6 pt-6 pb-10 */
.nb-section {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 2.5rem;position: relative;
}


/* ============================================================
   標題列
   ============================================================ */

/* flex flex-col md:flex-row justify-between items-center mb-8 */
.nb-header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;border-top: dashed 1px #b0aba1;padding-top: 1rem;
}
@media (min-width: 768px) {
  .nb-header { flex-direction: row; }
}

/* flex items-center gap-3 mb-1 */
.nb-title-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.25rem;
}

/* flex gap-1 (三顆圓點) */
.nb-dots {
  display: flex;
  gap: 0.25rem;
}

/* w-4 h-4 rounded-full animate-bounce */
@keyframes nb-bounce {
  0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(.8,0,1,1); }
  50%       { transform: translateY(0);   animation-timing-function: cubic-bezier(0,0,.2,1); }
}
.nb-dot {
  width: 1rem;
  height: 1rem;
  border-radius: 9999px;
  animation: nb-bounce 1s infinite;
}
.nb-dot-red    { background-color: #1cb0c1; animation-delay: 0.1s; }
.nb-dot-yellow { background-color: #2c9357; animation-delay: 0.3s; }
.nb-dot-black  { background-color: #f07d4c; animation-delay: 0.5s; }

/* text-2xl md:text-4xl font-black uppercase tracking-widest hover:text-gdNavy transition-colors */
.nb-title-link {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  color: inherit;
  transition: color 150ms cubic-bezier(.4,0,.2,1);color: #112240;
}
.nb-title-link:hover { color: #1a2e5a; }
@media (min-width: 768px) {
  .nb-title-link { font-size: 2.25rem; line-height: 2.5rem; }
}


/* ============================================================
   Tab 切換列
   ============================================================ */

/* flex bg-white p-1 rounded-2xl shadow-sm border border-gdNavy/5 mt-4 md:mt-0 gap-1.5 */
.nb-tab-bar {
  display: flex;padding: 0.25rem;
  /*background-color: #fff;
  
  border-radius: 1rem;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
  border: 1px solid var(--gdNavy-05);*/
  margin-top: 1rem;
  gap: 0.375rem;
}
@media (min-width: 768px) {
  .nb-tab-bar { margin-top: 0; }
}

/* tab-btn-left px-4 py-1.5 rounded-xl text-sm font-bold transition-all duration-300 whitespace-nowrap */
.nb-tab-btn {
  padding: 0.375rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 700;
  white-space: nowrap;
  border: none;
  cursor: pointer;
  background: transparent;
  transition: all 300ms cubic-bezier(.4,0,.2,1);
}

/* ---- Tab 顏色系統 ---- */
/* 預設彩色背景樣式 (未選中時) */
.tab-color-1 { background-color: #1cb0c1; color: white; border: 1px solid transparent; }
.tab-color-2 { background-color: #2c9357; color: white; border: 1px solid transparent; }
.tab-color-3 { background-color: #f07d4c; color: white; border: 1px solid transparent; }
.tab-color-4 { background-color: var(--menu-purple); color: white; border: 1px solid transparent; }
.tab-color-5 { background-color: #1a2b4b; color: white; border: 1px solid transparent; }

/* 反白樣式 (點選中時) */
.tab-active-1 { background-color: white !important; color: #1cb0c1 !important; border: 1px solid #1cb0c1 !important; }
.tab-active-2 { background-color: white !important; color: #2c9357 !important; border: 1px solid #2c9357 !important; }
.tab-active-3 { background-color: white !important; color: #f07d4c !important; border: 1px solid #f07d4c !important; }
.tab-active-4 { background-color: white !important; color: var(--menu-purple) !important; border: 1px solid var(--menu-purple) !important; }
.tab-active-5 { background-color: white !important; color: #1a2b4b !important; border: 1px solid #1a2b4b !important; }

.tab-btn {
    background-color: rgb(204, 214, 227) !important;
    color: #1e293b !important;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    margin-right: 2px;
    transition: all 0.3s ease;
}

.tab-btn.active {
    background-color: rgba(234,179,8,0.5) !important;
    color: #1e293b !important;
    border-bottom-color: transparent !important;
    box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.05);
}


/* ============================================================
   Tab 內容區
   ============================================================ */

/* px-4 */
.nb-content-wrap { padding: 0 1rem; }

/* tab-content-left grid grid-cols-2 lg:grid-cols-8 gap-4 */
.nb-tab-panel {
  display: none;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1rem;
}
.nb-tab-panel.active {
  display: grid;
}
@media (min-width: 1024px) {
  .nb-tab-panel { grid-template-columns: repeat(8, minmax(0,1fr)); }
}


/* ============================================================
   書籍卡片
   ============================================================ */

/* group cursor-pointer */
.nb-book {
  cursor: pointer;
}

/* relative mb-3 */
.nb-book-img-wrap { position: relative; margin-bottom: 0.75rem; }


/* rounded-2xl overflow-hidden bg-slate-100 shadow-lg transition-all duration-500 */
.nb-book-img-box {
  border-radius: 1rem;
  overflow: hidden;
  background-color: #f1f5f9;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  transition: all 500ms cubic-bezier(.4,0,.2,1);
}
.nb-book:hover .nb-book-img-box {
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.25);
}


/* w-full h-auto object-cover transition-transform duration-700 */
.nb-book-img {
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(.4,0,.2,1);
}
.nb-book:hover .nb-book-img {
  transform: scale(1.03);
}

/* font-bold text-gdNavy transition-colors line-clamp-1 */
.nb-book-title {
  font-weight: 700;
  color: #1a2e5a;
  transition: color 150ms cubic-bezier(.4,0,.2,1);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.nb-book:hover .nb-book-title { color: #ef7d1a; }

/* text-xs text-gdNavy/50 mt-1 font-medium */
.nb-book-author {
  font-size: 0.75rem;
  color: var(--gdNavy-50);
  margin-top: 0.25rem;
  font-weight: 500;
}

/* text-lg font-black text-gdNavy mt-2 */
.nb-book-price {
  font-size: 1.125rem;
  font-weight: 900;
  color: #1a2e5a;
  margin-top: 0.5rem;
}

/* text-gdNavy/40 line-through ml-2 text-sm */
.nb-book-price-orig {
  color: var(--gdNavy-40);
  text-decoration: line-through;
  margin-left: 0.5rem;
  font-size: 0.875rem;
}

.font-montserrat { font-family: 'Montserrat', sans-serif; }


/* ============================================================
   「看更多」按鈕列
   ============================================================ */

/* flex justify-end mt-6 */
.nb-more-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.5rem;
}

/* group flex items-center gap-2 bg-gdNavy text-xs text-white
   px-4 py-2 rounded-full font-bold shadow-lg
   hover:bg-black transition-all duration-300 hover:translate-x-2 */
.nb-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: #1a2e5a;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  text-decoration: none;
  transition: all 300ms cubic-bezier(.4,0,.2,1);
}
.nb-more-btn:hover {
  background-color: var(--menu-brand);
  transform: translateX(0.5rem);
}

/* w-4 h-4  transition-transform */
.nb-more-icon {
  width: 1rem;
  height: 1rem;
  transition: transform 150ms cubic-bezier(.4,0,.2,1);
}
.nb-more-btn:hover .nb-more-icon {
  transform: translateX(0.25rem);
}