/* styles.css */

/* 左侧面板和右侧内容区域的基础样式 */
#sidebar {
    transition: all 0.3s ease;
    position: fixed; /* 改为fixed，使其在手机端浮动到图片显示区域之上 */
    top: 0;
    left: 0;
    width: 25%; /* 初始宽度 */
    height: 100vh;
    border-right: 1px solid #dee2e6;
    background-color: #f8f9fa; /* 调整背景色 */
    z-index: 999; /* 保证浮动在右侧内容区域之上 */
     overflow-x: hidden; /* 当内容超出高度时显示垂直滚动条 */
   max-width: 400px;  
    overflow-y: auto; /* 禁用垂直滚动条 */

}

#contentArea {
    transition: all 0.3s ease;
    margin-left: 25%; /* 与左侧面板对应的初始偏移 */
    padding: 20px;
    width: 75%; /* 与左侧面板对应的初始宽度 */
}
/* 滚动条样式（仅对 Webkit 浏览器） */
#sidebar::-webkit-scrollbar {
    width: 5px; /* 滚动条宽度 */
}

#sidebar::-webkit-scrollbar-thumb {
    background-color: #999; /* 滚动条滑块颜色 */
    border-radius: 2px;
}

#sidebar::-webkit-scrollbar-track {
    background-color: #f1f1f1; /* 滚动条轨道颜色 */
}
/* 左侧面板收缩状态 */
#sidebar.collapsed {
    width: 0;
    overflow: hidden;
}

#sidebar.collapsed .toggle-btn {
    left: 0; /* 收缩后按钮依然可见 */
}

/* 内容区在面板收缩时占据整个屏幕 */
#contentArea.expanded {
    margin-left: 0;
    width: 100%;
}

/* 响应式设计：适配手机端 */
@media (max-width: 768px) {
    #sidebar {
        width: 80%; /* 在平板或手机端，展开宽度调整为80% */
        height: 100%;
    }

    #contentArea {
        margin-left: 0;
        width: 100%; /* 内容区占用剩余空间 */
    }

    /* 收缩状态下按钮保持可见 */
    #sidebar.collapsed .toggle-btn {
        left: 0;
    }
    
    /* 为右侧20%的区域增加点击事件 */
    #rightOverlay {
        position: fixed;
        top: 0;
        right: 0;
        width: 20%;
        height: 100%;
        z-index: 998; /* 在sidebar下，contentArea上 */
        display: none; /* 初始隐藏 */
    }

    /* 当sidebar展开时显示遮罩 */
    #sidebar:not(.collapsed) + #rightOverlay {
        display: block;
    }
}

/* 伸缩按钮样式 */
.toggle-btn {
    position: fixed;
    top: 50%;
    left: 24%;
    transform: translateY(-50%);
    width: 18px;
    height: 66px;
    background-color: #999999;
    color: white;
    text-align: center;
    line-height: 66px;
    font-size: 12px;
    border-radius: 5px 0px 0px 5px;
    border: none;
    cursor: pointer;
    z-index: 1000;
    transition: all 0.3s ease;
}


/* 左侧面板收缩状态 */
#sidebar.collapsed .toggle-btn {
    left: 0; /* 收缩后按钮紧贴在左边 */
    border-radius: 5px 0 0 5px; /* 收缩后的圆角调整 */
}

/* 模型详情展示区样式 */
#modelDetails {
    background-color: #ebebeb;
    border: 1px solid #dee2e6;
    padding: 15px;
    border-radius: 5px;
}
.model-card {
    cursor: pointer;
}

.card-img-top {
    height: 100%;
    transition: filter 0.3s ease-in-out;
}

.card-img-top.bg-blur {
    filter: blur(5px);
}

.model-icon {
    transition: opacity 0.3s ease-in-out;
    opacity: 0;
}

.model-icon.show {
    opacity: 1;
}

.card-title {
    z-index: 10; /* 确保文字在模糊背景的上方 */
}
.model-icon {
    z-index: 20; /* 确保图标在最上层 */
}
.btn-size-option {
    border: 1px solid #007bff;
    text-align: center;
    padding: 10px;
    border-radius: 5px;
    position: relative;
}

.btn-size-option img {
    max-width: 100%;
    height: auto;
}

.btn-check:checked + .btn-size-option {
    border-color: #007bff;
    background-color: #007bff;
    color: #fff;
}

/* 自定义滑块轨道样式 */
.form-range {
    -webkit-appearance: none;
    width: 100%;
    height: 8px;
    background: #ddd; /* 背景颜色 */
    border-radius: 5px;
    outline: none;
    position: relative;
}

.form-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #007bff; /* 滑块颜色 */
    cursor: pointer;
}

.form-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #007bff; /* 滑块颜色 */
    cursor: pointer;
}

.form-range::-ms-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #007bff; /* 滑块颜色 */
    cursor: pointer;
}

.form-range::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    background: #ddd; /* 轨道背景颜色 */
    border-radius: 5px;
}

.form-range::-moz-range-track {
    width: 100%;
    height: 8px;
    background: #ddd; /* 轨道背景颜色 */
    border-radius: 5px;
}

.form-range::-ms-track {
    width: 100%;
    height: 8px;
    background: transparent; /* 必须透明，以便显示轨道背景 */
    border-color: transparent;
    color: transparent;
}

/* 提示框样式 */
.form-control {
    resize: vertical; /* 允许垂直调整大小 */
}

/* 提交按钮样式 */
.btn-submit {
    background-color: #007bff; /* 蓝色 */
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-submit:hover {
    background-color: #0056b3; /* 蓝色的较深色调 */
}

.btn-submit:focus {
    outline: none; /* 去掉默认的焦点样式 */
}
/* 确保 form-check-inline 的元素在同一行显示 */
.form-check-inline {
    display: inline-flex; /* 使用 inline-flex 使其成为内联块元素，并水平排列 */
    align-items: center; /* 垂直居中对齐 */
    margin-right: 10px; /* 添加右边距以分隔元素 */
}

/* 调整 form-check-input 的位置 */
.form-check-input {
    margin-right: 5px; /* 输入框与标签之间的间距 */
}

/* 选中模型卡片的样式 */
.model-card.selected {
    border: 2px solid #007bff; /* 选中时边框颜色 */
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.5); /* 选中时阴影效果 */
}

.model-card.selected .model-icon {
    display: block; /* 显示选中的图标 */
}
 /* 卡片基本样式 */
.card {
    box-shadow: 0 1px 2px -2px rgba(0, 0, 0, .08), 
                0 3px 6px 0 rgba(0, 0, 0, .06), 
                0 5px 12px 4px rgba(0, 0, 0, .04); /* 卡片阴影效果 */
    transition: box-shadow 0.3s ease; /* 动画效果 */
}

/* 悬停时加深阴影 */
.card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* 悬停时阴影 */
}

/* 卡片内图片样式 */
.card-img-top {
    object-fit: cover; /* 保持图片比例 */
    height: 260px; /* 图片高度 */
    width: 100%; /* 图片宽度 */
    transition: transform 0.3s ease; /* 动画效果 */
    border-radius: 5px;
}
    .card-img-container {
        position: relative;
        overflow: hidden; /* 确保内容不会溢出 */
    }

    .card-overlay {
        background-color: rgba(0, 0, 0, 0.5); /* 半透明灰色背景 */
        color: #fff; /* 文字颜色 */
        font-size: 0.8rem; /* 减小文字大小 */
        text-align: center; /* 文本居中 */
        border-radius: 5px; /* 圆角效果 */

    }

    .card-title {
        margin: 0; /* 移除默认 margin */
    }

.need-vip {
    position: absolute;
    color: #f03256;
    font-weight: 700;
    top: -15px;
    right: 0px;
    background-color: rgb(252 206 16 / 80%);
    padding: 2px 5px;
    border-radius: 3px;
    z-index: 1;
    font-size: smaller;}

/* 鼠标悬停时图片放大 */
.card-img-top:hover {
    transform: scale(1.05); /* 微微放大 */
}

/* 选中模型卡片的样式 */
/* 选中卡片的边框和光点动画 */
/* 选中卡片的样式 */
.model-card.selected {
    position: relative;
    border: 3px solid #007bff; /* 更粗的边框 */
    box-shadow: 0 0 15px rgba(0, 123, 255, 0.7); /* 更明显的阴影 */
    transform: scale(1.05); /* 稍微放大卡片 */
    z-index: 10; /* 让选中的卡片更突出 */
    transition: box-shadow 0.3s ease-in-out; /* 平滑过渡阴影 */
}

/* 创建一个围绕卡片边框旋转的光点 */
.model-card.selected::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    background-color: #007bff;
    border-radius: 50%; /* 圆形光点 */
    animation: rotateAroundBorder 4s linear infinite; /* 旋转动画 */
    z-index: 100;
}

/* 定义旋转光点的动画 */
@keyframes rotateAroundBorder {
    0% {
        top: 0;
        left: 0;
        transform: translateY(-50%) translateX(-50%); /* 初始位置 */
    }
    25% {
        top: 0;
        left: 93%;
        transform: translateY(-50%) translateX(50%); /* 右上角 */
    }
    50% {
        top: 93%;
        left: 93%;
        transform: translateY(50%) translateX(50%); /* 右下角 */
    }
    75% {
        top: 93%;
        left: 0;
        transform: translateY(50%) translateX(-50%); /* 左下角 */
    }
    100% {
        top: 0;
        left: 0;
        transform: translateY(-50%) translateX(-50%); /* 回到左上角 */
    }
}


        .btn-custom {
            height: 22px;
            font-size: 12px;
            padding: 0 6px;
            border-radius: 10px;
            overflow: hidden;
        }

        .btn-success-custom {
            color: #fff;
            border-color: #18a058;
                min-width: 55px;

        }

        .btn-success-custom:hover {
            color: #36ad6a;
            border-color: #36ad6a;
        }

        .btn-primary-custom {
            color: #fff;
            border-color: #009BFF;
        }

        .btn-primary-custom:hover {
            color: #0078D5;
            border-color: #0078D5;
        }

        .btn-error-custom {
            color: #fff;
            border-color: #d03050;
        }

        .btn-error-custom:hover {
            color: #de576d;
            border-color: #de576d;
        }
        .badge {
     background-color: #b6e5ff;
    color: #004085;
    font-size: 0.75rem;
    padding: 0.4em;
    border-radius: 2rem;
        max-width: 120px;
    overflow: hidden;
}
/* 分页容器固定到底部右侧 */
.page {
    position: fixed;
    bottom: 20px; /* 调整距离底部的距离 */
    right: 20px;  /* 调整距离右侧的距离 */
    z-index: 900; /* 确保分页在其他内容之上 */
}

/* 自定义分页样式 */
.custom-pagination {
    display: flex;
    gap: 5px; /* 分页项之间的间距 */
}

.custom-pagination .page-item {
    border-radius: 5px; /* 圆角效果 */
    margin: 0; /* 去除默认外边距 */
}

.custom-pagination .page-link {
    padding: 10px 15px; /* 内边距 */
    border: 1px solid #ddd; /* 边框样式 */
    border-radius: 5px; /* 圆角效果 */
    color: #007bff; /* 链接颜色 */
    text-align: center; /* 文本居中 */
    background-color: #fff; /* 背景颜色 */
    transition: background-color 0.3s, color 0.3s; /* 平滑过渡效果 */
}

.custom-pagination .page-link:hover {
    background-color: #007bff; /* 悬停背景颜色 */
    color: #fff; /* 悬停文本颜色 */
}

.custom-pagination .page-item.disabled .page-link {
    color: #6c757d; /* 禁用状态颜色 */
    pointer-events: none; /* 禁用点击事件 */
    background-color: #e9ecef; /* 禁用状态背景颜色 */
    border-color: #e9ecef; /* 禁用状态边框颜色 */
}

.page-link:hover {
    background-color: #e9ecef;
    border-color: #ddd;
}
/* 当前页码的高亮样式 */
.page-item.active .page-link {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

.page-item.active .page-link:hover {
    background-color: #0056b3;
    border-color: #004085;
}
#contentArea .card img {
    height: 300px;
    width: 100%;
    object-fit: cover;
    display: block;
}

@media (min-width: 1600px) {
    #contentArea {
        margin-left: 400px;
    }
    .toggle-btn {
   
    left:380px; /* 调整为紧贴sidebar的右侧，根据sidebar的宽度微调 */
  
}
}
@media (max-width: 768px) {
   
    .toggle-btn {
   left:75%; /* 调整为紧贴sidebar的右侧，根据sidebar的宽度微调 */
}
}


 .tooltip-custom {
            position: absolute;
            z-index: 1000;
            background-color: #000;
            color: #fff;
            border-radius: .25rem;
            padding: .5rem;
            font-size: .875rem;
            box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
        }
     textarea::placeholder {
    font-size: 14px; /* 调整 placeholder 字体大小 */
    color: #6c757d; /* 可选，修改 placeholder 颜色 */
  }
  
  .upload-area {
      position: relative;
      width: 100%;
      border: 1px dashed #a5a5a5 !important; /* Dashed border */
      border-radius: .25rem; /* Rounded corners */
      background-color: #f8f9fa; /* Background color */
      text-align: center;
      cursor: pointer;
      padding: 10px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Light shadow */
    }

    .upload-area input[type="file"] {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0; /* Hide file input */
      cursor: pointer;
    }

    .upload-area i {
      font-size: 28px; /* Increased icon size */
    }

    .upload-area p {
      margin: 0;
      font-size: 14px;
    }

    .upload-area a {
      color: #007bff;
      text-decoration: none;
    }

    .upload-area a:hover {
      text-decoration: underline;
    }
      .image-title-container {
      display: flex;
      align-items: flex-end;
          margin-bottom: 10px;

      gap: 15px; /* Space between image and title */
    }

    /* 基本样式设置 */
    .style-card {
      position: relative;
      width: 100%; /* Full width of the container */
      height: 100px; /* Fixed height */
      border-radius: .5rem; /* Rounded corners */
      overflow: hidden;
      cursor: pointer;
      transition: box-shadow 0.3s ease, border-color 0.3s ease;
      border: 2px solid transparent; /* Default border */
          transition: transform 0.3s ease;

    }

    /* 图片设置 */
    .style-card img {
      width: 100%;
      height: 100%;
      object-fit: cover; /* Cover the container without distortion */
    }

    /* 卡片文字样式 */
    .style-card .card-body {
      position: absolute;
      bottom: 0;
      width: 100%;
      padding: 5px;
      background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent background */
      color: #fff;
      text-align: center;
      font-size: 0.875rem;
          transition: opacity 0.3s ease;

    }

    /* 隐藏默认的 radio 按钮 */
    .style-card input[type="radio"] {
      display: none;
    }
.style-card:hover .card-body {
    opacity: 0; /* 鼠标悬停时文字渐隐 */
}
    /* 鼠标悬停效果 */
    .style-card:hover {
      border-color: #007bff !important; /* Blue border on hover */
      box-shadow: 0 0 20px rgba(0, 123, 255, 0.6); /* Add shadow effect */
          transform: scale(1.05); /* 放大效果 */
    }

    /* 选中效果 */
    .style-card.selected {
    border-color: #19a9ff !important;
    border: 3px solid #19a9ff !important;
    box-shadow: 0 0 30px rgb(6 60 105) inset, 0 0 20px rgb(18 143 255 / 89%);
    background-color: rgb(5 65 130 / 15%);
    transform: scale(1.05);
    }
 .selected {
    background-color: #007bff; /* Bootstrap primary color */
    color: #fff; /* White text */
  }
/* 基础按钮样式：去除边框，无背景，无阴影 */
.filter-btn {
    background-color: #e3ebf3;
    border: none;
    color: #007bff; /* 默认字体颜色 */
    padding: 8px 5px;
    margin-bottom: 5px;
    cursor: pointer;
    transition: all 0.3s ease; /* 添加过渡效果 */
    border-radius: 0.25rem !important; /* 圆角 */

}

/* 鼠标悬停时的样式变化：背景颜色变化，字体颜色加深 */
.filter-btn:hover {
    background-color: rgba(0, 123, 255, 0.1); /* 轻微背景高亮 */
    color: #0056b3; /* 深色字体 */
}

/* 激活状态的样式：背景高亮，无边框，字体颜色加深 */
.filter-btn.active {
    background-color: #618acf; /*  */
    color: #fff; /* 选中时字体颜色 */
    
}


 @media (max-width: 576px) { /* 适用于移动设备 */
        .filter-btn {
            padding: 8px 3px; /* 移动端设置为 5px */
        }
}

.btn-submit:disabled {
    border: 2px solid #007bff; /* 这里是你想要的边框颜色 */
    opacity: 1; /* 确保不透明 */
    background-color: #f8f9fa; /* 可以根据需要设置背景色 */
}


body.border-light .filter-btn {
    background-color: #f8f9fa;
} 
    /* 自定义样式确保模态框居中 */
  body.theme-dark {
            background-color: #343a40!important;
            color: #b3b3b3!important;
        }
body.theme-dark  #sidebar{
     background-color: #343a40 !important;
     color: #b3b3b3 !important;
}   
body.theme-dark  .card{
    background-color: #002141 !important;
  }
body.theme-dark .btn{
     color: #b3b3b3!important;
}
body.theme-dark .filter-btn {
    background-color: #002141;
}  
body.theme-dark  .card-body{
         color: #b3b3b3 !important;

}
body.theme-light {
            background-color: #f8f9fa;
            color: #000000;
        }
body.theme-dark .form-control,body.theme-dark .upload-area {
    background-color: #afafaf !important;
    color: #ffffff !important;
}