/* ============================================
   Purple Theme Patch for JHNovel H5
   ============================================
   此文件用于将网站主题色从粉色系系统性地更换为紫色系
   仅修改颜色属性，不改变布局、尺寸、背景色等其他样式
   ============================================ */

/* ============================================
   1. CSS 变量覆盖
   ============================================ */
:root {
  --primary-color: #6A0DAD; /* 主品牌色 */
  --primary-color-dark: #580A94; /* 悬停/深色变体 */
  --primary-color-light: #7B1FA2; /* 浅色变体 */
  --primary-gradient-start: #7B1FA2; /* 渐变起始色 */
  --primary-gradient-end: #9B5DE5; /* 渐变结束色 */
  --primary-rgba-light: rgba(106, 13, 173, 0.1); /* 浅色背景 */
  --primary-rgba-medium: rgba(106, 13, 173, 0.05); /* 中等透明度 */
}

/* ============================================
   2. 文本颜色覆盖
   ============================================ */

/* 页面顶部标题 - 统一为紫色 */
.header-box .logo-text,
.header-box #headerTitle,
.book-detail-header .title {
    color: #6A0DAD !important;
}

/* 列表区块标题 - 统一为紫色 */
.title-box p {
    color: #6A0DAD !important;
}

/* 标题和链接 */
.title-box .right,
.books_tag_box .tag,
.tabBar_item span.active,
.tabBar_item.active span,
.topup_vip_card .vip_price,
.chapter_select .chapter_list_item.active,
.amount-item.active .amount,
.amount-item.active .coins,
.balance-amount,
.package-item-price,
.package-item.active .package-item-price,
.vip-expired,
.reading-history-item .book-title,
.contact-us-item a,
.category-item.active,
.category-detail-header,
.search-result-item .book-title,
.library-result-item .book-title,
.reader-directory-item.active {
    color: #6A0DAD !important;
}

/* 搜索按钮等特殊文本 */
.header-box div[style*="color: #FF1979"],
.header-box div[style*="color: #FF394D"] {
    color: #6A0DAD !important;
}

/* ============================================
   3. 按钮样式覆盖
   ============================================ */

/* 主要按钮 - 渐变背景 */
.btn,
.unlock_btn,
.pay_now_btn,
.topup_pay_btn,
.recharge-btn,
.paypal_pay_btn,
.my_wallet_btn {
    background: linear-gradient(135deg, #7B1FA2 0%, #9B5DE5 100%) !important;
    color: #FFFFFF !important;
}

/* 按钮悬停状态 */
.btn:hover,
.unlock_btn:hover,
.pay_now_btn:hover,
.topup_pay_btn:hover,
.recharge-btn:hover,
.paypal_pay_btn:hover,
.my_wallet_btn:hover {
    background: linear-gradient(135deg, #580A94 0%, #7B1FA2 100%) !important;
}

/* 按钮激活状态 */
.btn:active,
.unlock_btn:active,
.pay_now_btn:active,
.topup_pay_btn:active,
.recharge-btn:active,
.paypal_pay_btn:active,
.my_wallet_btn:active {
    background: linear-gradient(135deg, #580A94 0%, #7B1FA2 100%) !important;
    opacity: 0.9 !important;
}

/* ============================================
   4. 背景色覆盖（浅色背景，不改变白色/灰色背景）
   ============================================ */

/* 标签背景 */
.books_tag_box .tag,
.chapter_select .chapter_list_item.active,
.topup_vip_card.selected,
.payment_method.active,
.amount-item.active,
.package-item.active,
.theme_set_item.active {
    background: rgba(106, 13, 173, 0.1) !important;
}

/* 特殊背景（如解锁卡片） */
div[style*="background: rgba(255, 25, 121, 0.05)"],
div[style*="background: rgba(255, 25, 121, 0.1)"] {
    background: rgba(106, 13, 173, 0.05) !important;
}

/* 顶部渐变背景（如 me.html 头部） */
.personal_center_header,
.topup-header,
.category-detail-header {
    background: linear-gradient(135deg, #7B1FA2 0%, #9B5DE5 100%) !important;
}

/* 顶部渐变背景（半透明版本） */
.topup-header[style*="rgba(255, 57, 77, 0.1)"] {
    background: linear-gradient(135deg, rgba(123, 31, 162, 0.1) 0%, rgba(155, 93, 229, 0.1) 100%) !important;
}

.topup-header::before,
.topup-header::after {
    background: linear-gradient(135deg, rgba(123, 31, 162, 0.05) 0%, rgba(155, 93, 229, 0.05) 100%) !important;
}

/* ============================================
   5. 边框颜色覆盖
   ============================================ */

/* 选中状态边框 */
.topup_vip_card.selected,
.payment_method.active,
.theme_set_item.active,
.amount-item.active,
.package-item.active,
.chapter_select .chapter_list_item.active {
    border-color: #6A0DAD !important;
}

/* 特殊边框样式 */
div[style*="border: 2px solid #FF1979"],
div[style*="border-color: #FF1979"],
div[style*="outline: 1px solid #FF1979"] {
    border-color: #6A0DAD !important;
    outline-color: #6A0DAD !important;
}

/* ============================================
   6. 内联样式覆盖（通过属性选择器）
   ============================================ */

/* 内联样式中的颜色值 */
[style*="color: #FF1979"],
[style*="color: #FF394D"],
[style*="color: #FF398F"],
[style*="color: #32343A"][class*="logo-text"],
[style*="color: #222222"][id*="headerTitle"],
[style*="color: #222222"][class*="title"] {
    color: #6A0DAD !important;
}

/* 内联样式中的渐变背景 */
[style*="linear-gradient"][style*="#FF394D"],
[style*="linear-gradient"][style*="#FF398F"],
[style*="linear-gradient"][style*="#FF1979"] {
    background: linear-gradient(135deg, #7B1FA2 0%, #9B5DE5 100%) !important;
}

/* 内联样式中的边框颜色 */
[style*="border-color: #FF1979"],
[style*="border: 2px solid #FF1979"],
[style*="outline: 1px solid #FF1979"] {
    border-color: #6A0DAD !important;
    outline-color: #6A0DAD !important;
}

/* ============================================
   7. 特殊元素覆盖
   ============================================ */

/* 阅读器中的解锁按钮 */
.reader_container .unlock_btn {
    background: linear-gradient(90deg, #7B1FA2 0%, #9B5DE5 100%) !important;
}

/* 阅读器中的主题选择器 */
.reader_container .theme_set_item.active {
    outline: 1px solid #6A0DAD !important;
}

/* 阅读器中的章节列表 */
.reader_container .chapter_list_item.active {
    color: #6A0DAD !important;
    background: rgba(106, 13, 173, 0.1) !important;
}

/* SVIP 页面特殊样式 */
.svip-container .package-item.active {
    border-color: #6A0DAD !important;
    background: rgba(106, 13, 173, 0.05) !important;
}

.svip-container .package-item-price {
    color: #6A0DAD !important;
}

/* 充值页面特殊样式 */
.topup-container .balance-amount {
    color: #6A0DAD !important;
}

.topup-container .amount-item.active {
    border-color: #6A0DAD !important;
    background: rgba(106, 13, 173, 0.05) !important;
}

.topup-container .amount-item.active .amount,
.topup-container .amount-item.active .coins {
    color: #6A0DAD !important;
}

/* 我的页面特殊样式 */
.personal_center .vip-expired {
    color: #6A0DAD !important;
}

/* 搜索页面标签 */
.search-result-item .tag[style*="color: #FF1979"] {
    color: #6A0DAD !important;
    background: rgba(106, 13, 173, 0.1) !important;
}

/* ============================================
   8. 确保背景色保持不变
   ============================================ */

/* 确保页面、卡片、按钮默认背景保持白色或浅灰色 */
.header-box,
.tabBar_box,
.card,
.page-container,
.personal_center,
.topup-container,
.svip-container,
.reader_container,
.reader_content {
    background-color: inherit !important;
}

/* 确保白色背景不被覆盖 */
.header-box,
.tabBar_box,
.card,
.vip-info-box,
.package-list,
.benefits-box {
    background: #FFFFFF !important;
}

/* ============================================
   9. JavaScript 动态生成的内容覆盖
   ============================================ */

/* 动态生成的标签 */
.tag[style*="color: #FF1979"],
.tag[style*="background: rgba(255, 25, 121"] {
    color: #6A0DAD !important;
    background: rgba(106, 13, 173, 0.1) !important;
}

/* 动态生成的价格显示 */
[style*="color: #FF1979"][style*="font-size: 20px"],
[style*="color: #FF1979"][style*="font-weight: 600"] {
    color: #6A0DAD !important;
}

/* ============================================
   10. 响应式和交互状态
   ============================================ */

/* 悬停状态 */
.title-box .right:hover,
.books_tag_box .tag:hover,
.tabBar_item:hover span.active {
    color: #580A94 !important;
}

/* 激活状态 */
.title-box .right:active,
.books_tag_box .tag:active {
    opacity: 0.8;
}

/* ============================================
   11. 底部标签栏选中状态增强
   ============================================ */

/* 确保选中状态的文字是紫色 */
.tabBar_item.active span,
.tabBar_item span.active {
    color: #6A0DAD !important;
}

/* 选中状态的图标（SVG 图标本身已经是紫色，这里确保样式正确） */
.tabBar_item.active img {
    /* SVG 图标文件本身已经使用紫色 stroke，这里不需要额外处理 */
    opacity: 1;
}

/* 选中状态的悬停效果 */
.tabBar_item.active:hover span,
.tabBar_item:hover span.active {
    color: #580A94 !important; /* 深紫色悬停 */
}

/* 确保 active 图标正确显示 */
.tabBar_item.active img[src*="icon-home-active"],
.tabBar_item.active img[src*="icon-library-active"],
.tabBar_item.active img[src*="icon-me-active"] {
    filter: none; /* 确保不使用任何滤镜，保持 SVG 原始紫色 */
}

/* ============================================
   完成
   ============================================ */