/**
 * Requests List Styles
 * 用于所有请求列表页面：首页、我的请求、搜索结果等
 */

/* ==================== 卡片样式 ==================== */
.cursor-pointer {
    cursor: pointer;
}

.cursor-pointer:hover {
    background-color: #f8f9fa;
    transition: background-color 0.2s ease;
}

/* Dark mode hover 背景色 */
[data-bs-theme="dark"] .cursor-pointer:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* ==================== 进度条级别颜色 ==================== */

/* 进度条容器背景颜色 - 不同级别 (100%, 200%, 300%...) */
.progress-1 {
    background-color: #67e89e !important;
}

.progress-2 {
    background-color: #ff74c7 !important;
}

.progress-3 {
    background-color: #ffe100 !important;
}

.progress-4 {
    background-color: #ff4747 !important;
}

.progress-5 {
    background-color: #000000 !important;
}

.progress-6 {
    background-color: #711fff !important;
}

/* 进度条条纹颜色 - 不同级别 */
.progress-bar-1 {
    background-color: #ff74c7 !important;
}

.progress-bar-2 {
    background-color: #ffe100 !important;
}

.progress-bar-3 {
    background-color: #ff4747 !important;
}

.progress-bar-4 {
    background-color: #000000 !important;
}

.progress-bar-5 {
    background-color: #da8d00 !important;
}

.progress-bar-6 {
    background-color: #e5ff61 !important;
}

/* 0级别且成功的进度条（刚好100%） */
.progress-bar-0.progress-bar-bg-success {
    background-color: #67e89e !important;
}

/* ==================== 进度条动画效果 ==================== */
.progress-bar {
    transition: width 0.6s ease;
}

/* ==================== 进度条状态透明度 ==================== */
/* confirmed 和 completed 状态的进度条透明度降低 */
.progress-status-confirmed,
.progress-status-completed {
    opacity: 0.5;
}

/* ==================== 请求卡片布局 ==================== */
.request-card-title {
    display: inline-block;
    margin-bottom: 0;
}

.request-card-badge {
    vertical-align: middle;
}

/* ==================== Badge换行间隔 ==================== */
.request-card-title .h5,
.request-card-title .badge {
    margin-bottom: 0.5rem;
}

/* ==================== 类型Badge颜色 (vt = video type) ==================== */
.vt-line {
    color: #ffffff !important;
    background-color: #ff5868 !important;
}

.vt-screen {
    color: #ffffff !important;
    background-color: #33e75d !important;
}

.vt-center {
    color: #ffffff !important;
    background-color: #18d5ff !important;
}

.vt-hw {
    color: #ffffff !important;
    background-color: #983dff !important;
}

.vt-outfit {
    color: #ffffff !important;
    background-color: #ff49aa !important;
}

.vt-album {
    color: #ffffff !important;
    background-color: #ff9500 !important;
}

.vt-albumshort {
    color: #ffffff !important;
    background-color: #ff5900 !important;
}

.vt-aicover {
    color: #ffffff !important;
    background-color: #0040ff !important;
}

.vt-structure {
    color: #ffffff !important;
    background-color: #3d3d3d !important;
}

/* ==================== 浮动New Request按钮 ==================== */
/* 参考 Vuexy 官网的 "Hire Us" 按钮样式 */
.btn-new-request {
    position: fixed;
    bottom: 2.5rem;
    right: 2.5rem;
    z-index: 1050;
    padding: 0.875rem 2rem;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: 0.375rem;
    background: linear-gradient(270deg, #f40068 0%, #ff0059 100%);
    border: none;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 0.25rem 0.525rem rgb(255 0 76 / 66%);
    transition: all 0.2s ease-in-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-new-request:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1.5rem rgb(255, 0, 72);
    color: #fff;
}

.btn-new-request:active {
    transform: translateY(0);
}

/* ==================== 响应式设计 ==================== */
@media (max-width: 576px) {
    .request-card-title {
        font-size: 1rem;
    }
    
    .badge {
        font-size: 0.75rem;
    }
    
    /* 小屏幕上调整浮动按钮 */
    .btn-new-request {
        bottom: 1.5rem;
        right: 1.5rem;
        padding: 0.75rem 1.5rem;
        font-size: 0.875rem;
    }
}