/**
 * WP Simple EXIF 样式
 */

/* 容器样式 */
.wp-simple-exif-container {
    position: relative;
    display: inline-block;
    max-width: 100%;
    margin: 0;
    padding: 0;
    line-height: 0;
    overflow: hidden;
}

/* 图片样式 */
.wp-simple-exif-container img {
    display: block;
    max-width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

/* EXIF数据区域 */
.wp-simple-exif-data {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px 12px;
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 12px;
    line-height: 1.4;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    z-index: 2;
    text-align: center;
    max-height: 60%;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #666 #333;
}

/* 鼠标悬停时显示EXIF信息 */
.wp-simple-exif-container:hover .wp-simple-exif-data {
    transform: translateY(0);
}

/* 单独的EXIF信息项 */
.wp-simple-exif-data span {
    display: inline-block;
    margin-right: 8px;
    padding: 2px 6px;
    border-radius: 3px;
    background-color: rgba(255, 255, 255, 0.1);
    white-space: nowrap;
    margin-bottom: 4px;
}

/* EXIF信息颜色方案 */
.wp-simple-exif-data span[class*="wp-simple-exif-"] {
    color: #fff;
}

/* 基本信息 */
.wp-simple-exif-make,
.wp-simple-exif-model {
    background-color: rgba(0, 120, 215, 0.7) !important;
}

.wp-simple-exif-software {
    background-color: rgba(0, 153, 76, 0.7) !important;
}

.wp-simple-exif-dimensions,
.wp-simple-exif-orientation {
    background-color: rgba(126, 115, 95, 0.7) !important;
}

/* 曝光参数 */
.wp-simple-exif-focal-length {
    background-color: rgba(0, 153, 76, 0.7) !important;
}

.wp-simple-exif-aperture {
    background-color: rgba(216, 59, 1, 0.7) !important;
}

.wp-simple-exif-shutter-speed {
    background-color: rgba(230, 113, 184, 0.7) !important;
}

.wp-simple-exif-iso {
    background-color: rgba(209, 72, 65, 0.7) !important;
}

.wp-simple-exif-exposure-bias {
    background-color: rgba(142, 68, 173, 0.7) !important;
}

.wp-simple-exif-exposure-mode {
    background-color: rgba(41, 128, 185, 0.7) !important;
}

/* 其他信息 */
.wp-simple-exif-date-taken {
    background-color: rgba(126, 115, 95, 0.7) !important;
}

.wp-simple-exif-flash {
    background-color: rgba(255, 185, 0, 0.7) !important;
    color: #333;
}

.wp-simple-exif-white-balance {
    background-color: rgba(41, 128, 185, 0.7) !important;
}

.wp-simple-exif-metering-mode {
    background-color: rgba(155, 89, 182, 0.7) !important;
}

.wp-simple-exif-scene-type {
    background-color: rgba(52, 152, 219, 0.7) !important;
}

/* 新增字段样式 */
.wp-simple-exif-lens {
    background-color: rgba(0, 175, 137, 0.7) !important;
}

.wp-simple-exif-gps {
    background-color: rgba(231, 76, 60, 0.7) !important;
}

.wp-simple-exif-copyright {
    background-color: rgba(142, 68, 173, 0.7) !important;
}

.wp-simple-exif-artist {
    background-color: rgba(243, 156, 18, 0.7) !important;
}

.wp-simple-exif-color-space {
    background-color: rgba(52, 73, 94, 0.7) !important;
}

.wp-simple-exif-subject-distance {
    background-color: rgba(22, 160, 133, 0.7) !important;
}

/* 响应式布局 */
@media screen and (max-width: 600px) {
    .wp-simple-exif-data {
        font-size: 10px;
        padding: 6px;
    }
    
    .wp-simple-exif-data span {
        padding: 1px 4px;
        margin-right: 4px;
    }
}

/* 自定义滚动条 */
.wp-simple-exif-data::-webkit-scrollbar {
    width: 5px;
}

.wp-simple-exif-data::-webkit-scrollbar-track {
    background: #333;
}

.wp-simple-exif-data::-webkit-scrollbar-thumb {
    background: #666;
    border-radius: 5px;
}

/* 悬停时放大图片效果 */
.wp-simple-exif-container:hover img {
    transform: scale(1.01);
}

/* 确保容器在各种情况下正常工作 */
.wp-block-image .wp-simple-exif-container {
    display: inline-block;
    position: relative;
}

/* 确保在Gutenberg块中正常工作 */
.wp-block-image .wp-simple-exif-container img {
    margin: 0;
}

/* 确保在图片库中正常工作 */
.gallery .wp-simple-exif-container {
    margin: 0 !important;
    padding: 0 !important;
}