:root {
  /* 主要品牌色，用于重要元素、链接和按钮 */
  --color-primary: #FF1493;
  /* 主要品牌色的浅色变体，用于悬停状态和次要强调 */
  --color-primary-light: #000000;
  /* 强调色，用于突出显示和特殊效果 */
  --color-accent: #F0F0F0;
  /* 主要文本颜色，用于标题和重要文字 */
  --color-text-main: #000000;
  /* 次要文本颜色，用于描述性文字和辅助信息 */
  --color-text-secondary: #F0F0F0;
  /* 深色文本，用于导航栏和深色背景上的文字 */
  --color-text-dark: #000000;
  /* 背景色，用于页面背景和卡片背景 */
  --color-background: #FF1493;
  --footer-text1: "忙碌女孩的日常變美實驗室";
  --footer-text2: "© Copyright chunibyo Since 2026";
  --logo-url-mobile: url("https://img.shaner.com.tw/玩美實驗室/LOGO/手機.png");
  /* 手機版Logo建議橫版、高約50px */
  --logo-url-pc: url("https://img.shaner.com.tw/玩美實驗室/LOGO/手機.png");
  /* 電腦Logo方形直板高約90px、橫板需測試 */
}

/* 針對圖 2 分頁標籤的修改 */
#navbar123 .btn123 {
    transition: all 0.3s ease; /* 增加平滑過渡效果，選加 */
    display: block;            /* 確保填滿點擊區域 */
    text-decoration: none;     /* 移除超連結底線 */
}

/* 當滑鼠移過去 (Hover) 時的樣式 */
#navbar123 .btn123:hover {
    background-color: #F0F0F0 !important; /* 背景改為您要求的淺灰色 */
    color: #000000 !important;            /* 強制文字變回黑色，解決字看不見的問題 */
}

/* 如果是「目前選中」的狀態 (active) 也要確保字看得到 */
#navbar123 .btn123.active123 {
    background-color: #000000; /* 根據截圖，選中時似乎是黑色背景 */
    color: #FF1493;            /* 選中時的文字顏色 */
}

/* --- 針對 FAQ 摺疊選單的修改 --- */

/* 1. 確保平常狀態字體顏色正確（粉紅色） */
.collapsibleadam {
    color: #FF1493 !important;
    cursor: pointer; /* 讓滑鼠移上去顯示手指形狀 */
    transition: background-color 0.3s; /* 讓變色更平滑 */
}

/* 2. 當滑鼠移過去 (Hover) 時：背景變灰色 #F0F0F0，字變黑色 #000000 */
.collapsibleadam:hover {
    background-color: #F0F0F0 !important;
    color: #000000 !important;
}

/* 3. 修正原本可能存在的變黑問題 */
/* 如果原本版型有設定 summary:hover，這行可以確保它不會變回全黑 */
details summary:hover {
    color: #000000 !important;
}
/* --- 針對提交按鈕的修改 --- */

/* 確保按鈕預設顏色（背景粉紅，字白色或您設定的顏色） */
.btnsubmit {
    background-color: #FF1493;
    color: #FFFFFF; /* 假設預設是白字，若要粉底黑字可改 #000000 */
    border: none;
    transition: all 0.3s ease;
}

/* 當滑鼠移過去 (Hover) 時：背景變灰色 #00FFFF，字變黑色 #000000 */
.btnsubmit:hover {
    background-color: #F0F0F0 !important;
    color: #000000 !important;
    cursor: pointer; /* 增加手型游標 */
}


/* --- 針對導航選單 (圖1區域) 的文字變色修改 --- */

/* 1. PC 版與手機版導航連結：滑鼠移入時文字變白色 */
.navbar-nav .nav-item .each a:hover .text,
.navbar-nav .nav-item .each a:hover,
.sub li a:hover .text {
    color: #FFFFFF !important; /* 強制文字變為白色 */
    transition: color 0.2s ease; /* 增加平滑感 */
}

/* 2. 針對手機版展開後的分類與會員標題 (選加) */
.mobile-menu-title, .mobile-member-menu .text {
    /* 如果您希望手機版選單內的文字平常或移入也變色，可在此調整 */
}

/* 3. 確保圖 1 的背景懸停不要變黑（再次強化） */
.navbar-nav .nav-item .each:hover {
    background-color: transparent !important; /* 確保背景不會變色干擾文字 */
}

/* 確保整個容器背景為白色 */
.containeradam {
  background: #ffffff; /* 白色背景 */
  padding: 30px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  /* 增加一個淡淡的陰影，讓白色容器在頁面上更有層次感 */
  box-shadow: 0px 5px 15px rgba(0,0,0,0.1); 
}

/* 如果你的星星（Font Awesome）原本是白色的，記得改顏色 */
.star-widget label {
  font-size: 40px;
  color: #444; /* 未選中時的深灰色 */
  padding: 10px;
  float: right;
  transition: all 0.2s ease;
  cursor: pointer;
}

/* 選中後的星星顏色（例如金色） */
input:not(:checked) ~ label:hover,
input:not(:checked) ~ label:hover ~ label,
input:checked ~ label,
input:checked ~ label ~ label {
  color: #fd4;
}

/* 文字顏色調整 */
.please, .text {
  color: #333;
  font-weight: 500;
  text-align: center;
}