/*
 * Zibll Additional Joy - 前台样式
 *
 * 收货地址闪烁提示效果
 * 当用户没有收货地址时，地址区域会闪烁提示
 */

/* ========================================
   闪烁动画定义 - 多颜色支持
   ======================================== */

/* 橙色（默认） - 加深颜色 */
@keyframes zaj-blink-orange {
    0%, 100% { opacity: 1; box-shadow: inset 0 0 0 3px rgba(230, 120, 0, 0); }
    50% { opacity: 0.7; box-shadow: inset 0 0 0 3px rgba(230, 120, 0, 1); }
}

/* 红色 - 加深颜色 */
@keyframes zaj-blink-red {
    0%, 100% { opacity: 1; box-shadow: inset 0 0 0 3px rgba(211, 47, 47, 0); }
    50% { opacity: 0.7; box-shadow: inset 0 0 0 3px rgba(211, 47, 47, 1); }
}

/* 蓝色 - 加深颜色 */
@keyframes zaj-blink-blue {
    0%, 100% { opacity: 1; box-shadow: inset 0 0 0 3px rgba(21, 101, 192, 0); }
    50% { opacity: 0.7; box-shadow: inset 0 0 0 3px rgba(21, 101, 192, 1); }
}

/* 绿色 - 加深颜色 */
@keyframes zaj-blink-green {
    0%, 100% { opacity: 1; box-shadow: inset 0 0 0 3px rgba(46, 125, 50, 0); }
    50% { opacity: 0.7; box-shadow: inset 0 0 0 3px rgba(46, 125, 50, 1); }
}

/* 紫色 - 加深颜色 */
@keyframes zaj-blink-purple {
    0%, 100% { opacity: 1; box-shadow: inset 0 0 0 3px rgba(123, 31, 162, 0); }
    50% { opacity: 0.7; box-shadow: inset 0 0 0 3px rgba(123, 31, 162, 1); }
}

/* ========================================
   启用闪烁效果时的样式
   ======================================== */

/* 应用闪烁到地址框（默认橙色） */
.zaj-address-blink-enabled .order-address-box {
    animation: zaj-blink-orange 1.5s ease-in-out infinite;
    border-radius: var(--main-radius, 8px);
}

/* 颜色选择 */
.zaj-address-blink-enabled.zaj-color-orange .order-address-box {
    animation-name: zaj-blink-orange;
}
.zaj-address-blink-enabled.zaj-color-red .order-address-box {
    animation-name: zaj-blink-red;
}
.zaj-address-blink-enabled.zaj-color-blue .order-address-box {
    animation-name: zaj-blink-blue;
}
.zaj-address-blink-enabled.zaj-color-green .order-address-box {
    animation-name: zaj-blink-green;
}
.zaj-address-blink-enabled.zaj-color-purple .order-address-box {
    animation-name: zaj-blink-purple;
}

/* ========================================
   停止闪烁效果
   ======================================== */

/* 禁用状态或用户已点击 */
.zaj-address-blink-disabled .order-address-box,
.zaj-address-clicked .order-address-box {
    animation: none !important;
    opacity: 1 !important;
}

/* ========================================
   不同速度设置
   ======================================== */

/* 慢速 - 2秒 */
.zaj-speed-slow .order-address-box {
    animation-duration: 2s !important;
}

/* 快速 - 1秒 */
.zaj-speed-fast .order-address-box {
    animation-duration: 1s !important;
}

/* ========================================
   响应式优化
   ======================================== */

@media (max-width: 768px) {
    /* 移动端稍微放慢动画 */
    .zaj-address-blink-enabled .order-address-box {
        animation-duration: 2s;
    }
}

/* ========================================
   订单地址弹窗样式补充 (v1.0.8)
   使用主题 Bootstrap Modal，仅补充少量样式
   ======================================== */

/* 地址项激活标签样式 */
#zaj-tag-list .tag-item.active {
    background: var(--theme-color, #2196f3);
    color: #fff;
}

/* 地址列表项悬停效果 */
#zaj-address-list .address-item:hover {
    border-color: var(--theme-color, #2196f3);
}

/* 地址内容区域点击提示 */
#zaj-address-list .address-content {
    cursor: pointer;
}

#zaj-address-list .address-content:hover {
    color: var(--theme-color, #2196f3);
}

/* 当前订单地址高亮显示 */
#zaj-address-list .address-item.zaj-current-address {
    border: 2px solid var(--theme-color, #2196f3) !important;
}

/* 地址操作按钮布局 */
#zaj-address-list .address-actions .action-btns {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* 设为默认按钮换行样式 */
#zaj-address-list .zaj-set-default {
    line-height: 1.2;
    padding-top: 4px;
    padding-bottom: 4px;
}

/* ========================================
   多包裹物流弹窗选项卡样式
   ======================================== */

/* 选项卡容器 */
.zaj-package-tabs {
    gap: 0;
    padding: 0 10px;
}

/* 选项卡项 - 基础样式 */
.zaj-package-tabs .zaj-tab-item {
    padding: 10px 16px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
    font-size: 14px;
    color: var(--muted-2-color, #888);
    background: transparent;
}

/* 未选中状态 - 增强可见性 */
.zaj-package-tabs .zaj-tab-item:not(.active) {
    color: var(--muted-color, #666);
    opacity: 0.85;
}

/* 悬停状态 */
.zaj-package-tabs .zaj-tab-item:hover {
    color: var(--theme-color, #2196f3);
    background: var(--muted-border-color, rgba(0,0,0,0.03));
}

/* 激活状态 */
.zaj-package-tabs .zaj-tab-item.active {
    color: var(--theme-color, #2196f3);
    border-bottom-color: var(--theme-color, #2196f3);
    font-weight: 500;
    opacity: 1;
}

/* ========================================
   深色模式适配
   ======================================== */

/* 深色模式 - 未选中选项卡增强可见性 */
[data-theme="dark"] .zaj-package-tabs .zaj-tab-item:not(.active),
.theme-dark .zaj-package-tabs .zaj-tab-item:not(.active),
body.dark-theme .zaj-package-tabs .zaj-tab-item:not(.active) {
    color: rgba(255, 255, 255, 0.7);
    opacity: 1;
}

/* 深色模式 - 悬停状态 */
[data-theme="dark"] .zaj-package-tabs .zaj-tab-item:hover,
.theme-dark .zaj-package-tabs .zaj-tab-item:hover,
body.dark-theme .zaj-package-tabs .zaj-tab-item:hover {
    color: var(--theme-color, #2196f3);
    background: rgba(255, 255, 255, 0.08);
}

/* 深色模式 - 激活状态 */
[data-theme="dark"] .zaj-package-tabs .zaj-tab-item.active,
.theme-dark .zaj-package-tabs .zaj-tab-item.active,
body.dark-theme .zaj-package-tabs .zaj-tab-item.active {
    color: var(--theme-color, #2196f3);
}

/* ========================================
   封面视频播放按钮描边优化
   ======================================== */

/* 播放按钮添加白色描边，增强视觉识别 */
.dplayer-poster .play-icon .toggle-radius {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8);
}

/* ========================================
   封面视频播放文字提示
   ======================================== */

/* 播放按钮容器改为纵向布局 */
.dplayer-poster .play-icon {
    flex-direction: column;
    align-items: center;
}

/* 文字提示 - 使用伪元素 */
.dplayer-poster .play-icon::after {
    content: var(--zaj-video-tip-text, "点击播放视频");
    color: var(--zaj-video-tip-color, #fff);
    font-size: var(--zaj-video-tip-size, 12px);
    margin-top: 8px;
    padding: 4px 12px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 12px;
    white-space: nowrap;
}

/* ========================================
   封面滑动提示
   ======================================== */

/* 滑动提示容器 - 显示在轮播图底部 */
.product-cover-slider.zaj-multi-slides .zaj-slide-tip {
    position: absolute;
    bottom: var(--zaj-slide-tip-bottom, 60px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    pointer-events: none;
}

/* 滑动提示背景层 - 使用 ::before */
.product-cover-slider.zaj-multi-slides .zaj-slide-tip::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
    /* 默认样式：半透明黑 */
    background: #000;
    opacity: var(--zaj-slide-tip-bg-opacity, 0.4);
}

/* 滑动提示文字 - 使用 ::after */
.product-cover-slider.zaj-multi-slides .zaj-slide-tip::after {
    content: var(--zaj-slide-tip-text, "左右滑动查看更多");
    position: relative;
    color: var(--zaj-slide-tip-color, #fff);
    font-size: var(--zaj-slide-tip-size, 12px);
    padding: 4px 12px;
    white-space: nowrap;
}

/* 滑动提示 - 主题色背景 */
.zaj-slide-tip-theme .product-cover-slider.zaj-multi-slides .zaj-slide-tip::before {
    background: var(--theme-color, #2196f3);
}

/* 滑动提示 - 渐变背景 */
.zaj-slide-tip-gradient .product-cover-slider.zaj-multi-slides .zaj-slide-tip::before {
    background: linear-gradient(90deg, var(--theme-color, #2196f3), var(--theme-color-s1, #64b5f6));
}

/* 视频播放时隐藏滑动提示 */
.product-cover-slider:has(.slide-dplayer-played) .zaj-slide-tip {
    display: none;
}

/* 呼吸灯效果 */
@keyframes zaj-breathing {
    0%, 100% {
        opacity: var(--zaj-slide-tip-bg-opacity, 0.4);
    }
    50% {
        opacity: calc(var(--zaj-slide-tip-bg-opacity, 0.4) * 0.3);
    }
}

.zaj-slide-tip-breathing .product-cover-slider.zaj-multi-slides .zaj-slide-tip::before {
    animation: zaj-breathing 2s ease-in-out infinite;
}

/* ========================================
   地区运费提示标签
   ======================================== */

/* 地区运费提示 - 与后台物流跟踪"已签收"标签样式一致 */
.zaj-region-tip {
    color: #409eff;
    font-size: 13px;
    font-weight: 500;
    margin-left: 8px;
    background: rgba(64, 158, 255, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
}