/* @import "tailwindcss/preflight"; */
/* CSS 修復版本 v3.0 - 強制 Light 主題覆蓋 */


/* 防止任何元素自動切換到暗色模式 */
* {
  color-scheme: light !important;
}

/* 強制移除任何可能的暗色背景 */
html, body {
  background-color: #ffffff !important;
  color: #000000 !important;
}

:root {
  /* 主要顏色由後台動態設定 */
  /* --color-primary: #00668c !important; */
  --color-secondary: #808080 !important;
  --color-tertiary: #3b3c3d !important;
}




body {
  margin: 0;
}

.button {
  @apply relative bg-primary hover:bg-[#808080] rounded-[6px] text-white font-normal text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] xl:text-[24px] leading-[22px] tracking-[0.02em] flex items-center justify-center overflow-hidden group py-[9px] px-[21.7px] gap-[8px] transition-all duration-300 cursor-pointer;
}
.footer-map iframe {
  width: 100% !important;
  height: 100% !important;
}

/* 
 * DaisyUI Drawer Scrollbar-Gutter 修復
 * 解決手機版抽屜選單出現額外滾動條空間的問題
 */

/* 移除DaisyUI drawer激活時的scrollbar-gutter */
:root:has(.drawer:not(.drawer-open) > .drawer-toggle:checked) {
  scrollbar-gutter: auto !important;
}

/* 同時修復modal的類似問題 */
:root:has(.modal-open),
:root:has(.modal[open]),
:root:has(.modal:target),
:root:has(.modal-toggle:checked) {
  scrollbar-gutter: auto !important;
}

/* 為了確保在所有情況下都生效，也覆蓋modal自身的規則 */
.modal[open],
.modal-open,
.modal-toggle:checked + .modal {
  scrollbar-gutter: auto !important;
}

/* 
* 可選：如果您想要完全隱藏滾動條而不是使用auto，
* 請取消下面的註釋並註釋上面的規則
*/
/*
:root:has(.drawer:not(.drawer-open) > .drawer-toggle:checked) {
  scrollbar-gutter: stable;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

:root:has(.drawer:not(.drawer-open) > .drawer-toggle:checked)::-webkit-scrollbar {
  display: none !important;
}
*/

/* 
 * 修復手機版抽屜選單的黑色閃爍問題
 * 移除或調整 drawer-overlay 的背景色
 */

/* 選項 1: 完全移除黑色遮罩 - 使用更強的選擇器 */
.drawer-side > .drawer-overlay,
.drawer .drawer-side .drawer-overlay,
label.drawer-overlay,
.drawer-overlay {
  background-color: transparent !important;
  background: transparent !important;
  opacity: 0 !important;
  pointer-events: none !important;
  display: none !important; /* 完全隱藏遮罩層 */
}

/* 強制移除所有可能的黑色背景 */
.drawer:has(.drawer-toggle:checked) .drawer-side,
.drawer-toggle:checked ~ .drawer-side {
  background-color: rgba(0, 0, 0, 0.5) !important;
}

/* 防止 body 滾動鎖定時的黑色背景 */
body:has(.drawer-toggle:checked) {
  background-color: white !important;
}

/* 選項 2: 如果您想保留遮罩但降低透明度，請註釋上面的規則並使用下面的規則 */
/*
.drawer-overlay {
  background-color: oklch(0% 0 0 / 10%) !important;
}
*/

/* 選項 3: 如果您想要白色半透明遮罩，請註釋上面的規則並使用下面的規則 */
/*
.drawer-overlay {
  background-color: rgba(255, 255, 255, 0.1) !important;
}
*/

/* 搜尋面板樣式 */
#search-panel {
  /* 預設隱藏狀態 */
  transform: translateY(-100%) !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

#search-panel.active {
  /* 顯示狀態 */
  transform: translateY(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* 遮罩層樣式 */
.site-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 40;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
  pointer-events: none;
}

.site-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Header 白色背景樣式 */
.site-header.white {
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* .desktop-dropdown-menu li {
 color: var(--color-secondary);
}
.desktop-dropdown-menu li:hover {
  color: var(--color-secondary);
 }
  */
/*PAGENUM*/
.pagenum {
  max-width: 1000px;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 50px;
  padding-bottom: 100px;
  color: var(--bs-gray-500);
  font-size: 0.9rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  gap: 1rem;
}
.pagenum li {
  font-size: 0.9rem;
  color: var(--bs-gray-900);
  text-decoration: none;
  display: inline-block;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
  vertical-align: middle;
  letter-spacing: 0em;
  word-spacing: 0em;
  margin-top: 10px;
  /* border: 1px solid #eff0f2; */
  padding: 5px;
  min-width: 25px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
}
.pagenum .first {
  width: 50px;
  height: 30px;
  background-image: url(../img/all/icon-first.svg);
  background-repeat: no-repeat;
  background-size: 30px auto;
  background-position: right center;
}
.pagenum .pre {
  width: 50px;
  height: 30px;
  background-image: url(../img/all/icon-prev.svg);
  background-repeat: no-repeat;
  background-size: 30px auto;
  background-position: right center;
}
.pagenum .last {
  width: 50px;
  height: 30px;
  background-image: url(../img/all/icon-last.svg);
  background-repeat: no-repeat;
  background-size: 30px auto;
  background-position: left center;
}
.pagenum .next {
  width: 50px;
  height: 30px;
  background-image: url(../img/all/icon-next.svg);
  background-repeat: no-repeat;
  background-size: 30px auto;
  background-position: left center;
}
.pagenum li a {
  color: #172148;
  text-decoration: none;
}
.pagenum li:hover {
  color: #000000;
}
.pagenum .nowp:hover {
  color: #fff;
}
.pagenum .nowp {
  background-color: var(--color-tertiary);
  color: #fff;
  min-width: 30px;
  height: 30px;
  border-radius: 50%;
}

.drawer-overlay {
  background-color:transparent !important;
}


/* 移除菜單項激活時的背景效果 */
.menu li > *:not(ul, .menu-title, details, .btn):active, 
.menu li > *:not(ul, .menu-title, details, .btn).menu-active, 
.menu li > details > summary:active {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
.drawer .menu li > *:not(ul, .menu-title, details, .btn):hover {
    background-color: #f0f4fa !important; /* 想要的 hover BG 顏色 */
  }
  /* 產品分類樣式 */
  .catagory li div{
    background-color:transparent;
    color: #1D1C1C !important;
  }
  .catagory li div:hover {
    background-color: var(--color-secondary) !important;
    color: #fff !important;
  }
  .catagory li div.active {
    background-color: var(--color-secondary) !important;
    color: #fff !important;
  }



  /*TOC 樣式*/
  #toc-btn {
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    padding-right: 30px;
    z-index: 1001;
  }
  
  #toc-btn:hover {
    color: #2D333D;
  }
  
  #toc-btn:after {
    content: '';
    width: 20px;
    height: 20px;
    background-image: url(../img/all/arrow0.svg);
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.3s ease;
  }
  #toc-btn.active:after{
    transform: translateY(-50%) rotate(90deg);
  }
  #toc-content{
    display: none;
    position: absolute;
   top: 100%;
    left: 0; 
    width: 100%;
    background-color:#F5F4F1;
    padding: 10px;
    border-radius:0 0 5px 5px;
    border: 1px solid rgba(45, 51, 61, 0.8);
    z-index: 1000;
  }