/**
 * 书库选择界面样式
 *
 * 用于 [ac_book_selection] 短代码
 * 移动端优化版本
 *
 * @package ActivationCodes
 * @since 0.6.1
 */

/* ==================== 基础重置 ==================== */
/* 注意：基础重置已在模板中处理，这里只针对book-selection页面特定样式 */

/* 确保book-selection页面有正确的背景色和字体 */
/* Edge兼容: 使用.ac-book-selection-body类，不依赖:has()选择器 */
body.ac-book-selection-body {
    background: linear-gradient(180deg, #f0f4f8 0%, #e8eef3 100%) !important;
    color: #333 !important;
    line-height: 1.5 !important;
    min-height: 100vh !important;
}

/* ==================== 容器 ==================== */
.ac-book-selection-wrapper,
.ac-unified-container.ac-book-selection-page {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 16px !important;
    padding-bottom: 80px !important; /* 底部安全区域 */
}

/* ==================== 页面头部 ==================== */
.ac-page-header {
    background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%) !important;
    color: white !important;
    padding: 24px 20px !important;
    border-radius: 16px !important;
    margin-bottom: 16px !important;
    text-align: center !important;
    box-shadow: 0 4px 20px rgba(40, 167, 69, 0.3) !important;
    position: relative;
    overflow: hidden;
}

.ac-page-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    pointer-events: none;
}

.ac-page-header h1 {
    font-size: 24px !important;
    margin-bottom: 8px !important;
    color: white !important;
    font-weight: 700 !important;
    position: relative;
    z-index: 1;
}

.ac-page-header p {
    opacity: 0.95 !important;
    font-size: 14px !important;
    color: white !important;
    position: relative;
    z-index: 1;
}

/* ==================== 统计信息 ==================== */
.ac-stats-bar {
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    background: white !important;
    padding: 16px 12px !important;
    border-radius: 16px !important;
    margin-bottom: 16px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
}

.ac-stat-item {
    text-align: center !important;
    flex: 1 !important;
}

.ac-stat-value {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #28a745 !important;
    line-height: 1.2 !important;
}

.ac-stat-label {
    font-size: 12px !important;
    color: #888 !important;
    margin-top: 4px !important;
    font-weight: 500 !important;
}

/* ==================== 分类标签页 ==================== */
.ac-category-tabs {
    display: flex !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 4px !important;
    /* 隐藏滚动条但保持可滚动 */
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.ac-category-tabs::-webkit-scrollbar {
    display: none !important;
}

.ac-category-tab {
    /* 移动端最小触摸区域 44px */
    min-height: 48px !important;
    padding: 12px 18px !important;
    border: none !important;
    background: white !important;
    border-radius: 14px !important;
    cursor: pointer !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
    -webkit-tap-highlight-color: transparent !important;
}

.ac-category-tab:active {
    transform: scale(0.96) !important;
}

.ac-category-tab.active {
    background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%) !important;
    color: white !important;
    border-color: transparent !important;
    box-shadow: 0 4px 16px rgba(40, 167, 69, 0.35) !important;
}

.ac-category-tab .ac-count {
    background: rgba(0,0,0,0.08) !important;
    padding: 4px 10px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

.ac-category-tab.active .ac-count {
    background: rgba(255,255,255,0.25) !important;
}

/* ==================== 子分类筛选 ==================== */
.ac-sub-filters {
    display: none !important;
    background: white !important;
    padding: 12px !important;
    border-radius: 14px !important;
    margin-bottom: 16px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
}

.ac-sub-filters.active {
    display: flex !important;
    gap: 10px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 8px !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.ac-sub-filters.active::-webkit-scrollbar {
    display: none !important;
}

.ac-sub-filter-btn {
    /* 移动端最小触摸区域 44px */
    min-height: 40px !important;
    padding: 10px 16px !important;
    border: none !important;
    background: #f5f7fa !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    -webkit-tap-highlight-color: transparent !important;
}

.ac-sub-filter-btn:active {
    transform: scale(0.96) !important;
}

.ac-sub-filter-btn.active {
    background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%) !important;
    color: white !important;
    border-color: transparent !important;
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3) !important;
}

/* ==================== 图书网格 ==================== */
.ac-book-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
}

.ac-book-card {
    background: white !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
}

.ac-book-card:active {
    transform: scale(0.97) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
}

.ac-book-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
    cursor: pointer;
}

.ac-book-cover {
    height: 120px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 42px !important;
    position: relative !important;
}

.ac-book-cover.green {
    background: linear-gradient(135deg, #e8f5e9 0%, #a5d6a7 100%) !important;
}

.ac-book-cover.blue {
    background: linear-gradient(135deg, #e3f2fd 0%, #90caf9 100%) !important;
}

.ac-book-cover.orange {
    background: linear-gradient(135deg, #fff3e0 0%, #ffcc80 100%) !important;
}

.ac-book-cover.purple {
    background: linear-gradient(135deg, #f3e5f5 0%, #ce93d8 100%) !important;
}

.ac-book-cover.red {
    background: linear-gradient(135deg, #ffebee 0%, #ef9a9a 100%) !important;
}

.ac-book-badge {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    padding: 4px 10px !important;
    border-radius: 12px !important;
    font-size: 11px !important;
    background: rgba(255,255,255,0.95) !important;
    color: #666 !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

.ac-book-info {
    padding: 14px 12px !important;
}

.ac-book-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin-bottom: 6px !important;
    line-height: 1.4 !important;
    /* 限制两行 */
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-height: 39px !important;
}

.ac-book-meta {
    font-size: 12px !important;
    color: #888 !important;
    margin-bottom: 8px !important;
}

.ac-book-tags {
    display: flex !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
}

.ac-book-tag {
    padding: 4px 10px !important;
    background: #f5f7fa !important;
    border-radius: 10px !important;
    font-size: 11px !important;
    color: #666 !important;
    font-weight: 500 !important;
}

.ac-book-tag.version {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%) !important;
    color: #2e7d32 !important;
}

.ac-book-tag.grade {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%) !important;
    color: #1565c0 !important;
}

/* ==================== 空状态 ==================== */
.ac-empty-state {
    text-align: center !important;
    padding: 60px 20px !important;
    color: #888 !important;
    grid-column: 1 / -1 !important;
}

.ac-empty-state .ac-icon {
    font-size: 64px !important;
    margin-bottom: 16px !important;
    opacity: 0.6 !important;
    animation: pulse 2s ease-in-out infinite !important;
}

.ac-empty-state p {
    font-size: 16px !important;
    color: #666 !important;
    font-weight: 500 !important;
}

/* ==================== 桌面端适配 ==================== */
@media (min-width: 768px) {
    .ac-book-selection-wrapper {
        padding: 24px !important;
        padding-bottom: 100px !important;
    }

    .ac-page-header {
        padding: 32px !important;
        margin-bottom: 24px !important;
        border-radius: 20px !important;
    }

    .ac-page-header h1 {
        font-size: 28px !important;
    }

    .ac-page-header p {
        font-size: 15px !important;
    }

    .ac-stats-bar {
        padding: 20px 24px !important;
        margin-bottom: 24px !important;
        border-radius: 16px !important;
    }

    .ac-stat-value {
        font-size: 32px !important;
    }

    .ac-stat-label {
        font-size: 13px !important;
    }

    .ac-category-tabs {
        gap: 12px !important;
        margin-bottom: 24px !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        padding-bottom: 0 !important;
    }

    .ac-category-tab {
        min-height: 52px !important;
        padding: 14px 24px !important;
        font-size: 16px !important;
        border-radius: 16px !important;
    }

    .ac-sub-filters {
        padding: 16px 20px !important;
        margin-bottom: 20px !important;
        flex-wrap: wrap !important;
        border-radius: 16px !important;
    }

    .ac-sub-filter-btn {
        min-height: 44px !important;
        padding: 12px 20px !important;
        font-size: 15px !important;
        border-radius: 14px !important;
    }

    .ac-book-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
        gap: 20px !important;
    }

    .ac-book-card:hover {
        transform: translateY(-6px) !important;
        box-shadow: 0 12px 32px rgba(0,0,0,0.12) !important;
    }

    .ac-book-card:active {
        transform: translateY(-2px) !important;
    }

    .ac-book-cover {
        height: 140px !important;
        font-size: 48px !important;
    }

    .ac-book-info {
        padding: 16px !important;
    }

    .ac-book-title {
        font-size: 15px !important;
        min-height: 42px !important;
    }

    .ac-book-meta {
        font-size: 13px !important;
    }

    .ac-book-tag {
        font-size: 12px !important;
    }

    .ac-empty-state {
        padding: 80px 20px !important;
    }

    .ac-empty-state .ac-icon {
        font-size: 80px !important;
    }

    .ac-empty-state p {
        font-size: 18px !important;
    }
}

/* ==================== 大屏优化 ==================== */
@media (min-width: 1200px) {
    .ac-book-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* ==================== 动画 ==================== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.ac-book-card {
    animation: fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
    opacity: 0;
}

/* 卡片依次延迟出现 */
.ac-book-card:nth-child(1) { animation-delay: 0.05s; }
.ac-book-card:nth-child(2) { animation-delay: 0.1s; }
.ac-book-card:nth-child(3) { animation-delay: 0.15s; }
.ac-book-card:nth-child(4) { animation-delay: 0.2s; }
.ac-book-card:nth-child(5) { animation-delay: 0.25s; }
.ac-book-card:nth-child(6) { animation-delay: 0.3s; }
.ac-book-card:nth-child(7) { animation-delay: 0.35s; }
.ac-book-card:nth-child(8) { animation-delay: 0.4s; }
.ac-book-card:nth-child(9) { animation-delay: 0.45s; }
.ac-book-card:nth-child(10) { animation-delay: 0.5s; }

/* 页面加载完成后的入场动画 */
.ac-page-header {
    animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
    opacity: 0;
}

.ac-stats-bar {
    animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
    opacity: 0;
    animation-delay: 0.1s !important;
}

.ac-category-tabs {
    animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
    opacity: 0;
    animation-delay: 0.15s !important;
}

.ac-sub-filters.active {
    animation: fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
    opacity: 0;
}

/* 分类标签依次出现 */
.ac-category-tab:nth-child(1) { animation-delay: 0.2s; }
.ac-category-tab:nth-child(2) { animation-delay: 0.25s; }
.ac-category-tab:nth-child(3) { animation-delay: 0.3s; }

/* 按下时的涟漪效果（如果浏览器支持） */
@media (hover: none) {
    .ac-category-tab:active,
    .ac-sub-filter-btn:active,
    .ac-book-card:active {
        transform: scale(0.95) !important;
    }
}