/**
 * 小程序码区块样式（扫码跳转小程序）
 *
 * 与主题既有设计语言保持一致：深色卡片、圆角、轻阴影，复用主题 CSS 变量。
 * 仅新增类，不改动任何现有布局/选择器。
 */

/* ============================================================
   1) 详情页小程序码：居中卡片区块
   ============================================================ */
.pose-mini-qrcode {
    margin: var(--spacing-xl) auto 0;
    max-width: 280px;
    padding: var(--spacing-lg);
    text-align: center;
    background: var(--bg-card);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.pose-mini-qrcode__img {
    width: 160px;
    height: 160px;
    margin: 0 auto;
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.pose-mini-qrcode__tip {
    margin: var(--spacing-sm) 0 0;
    font-size: var(--text-sm, 13px);
    color: var(--text-secondary);
    text-align: center;
}

.pose-mini-qrcode__error {
    display: none;
    margin: var(--spacing-sm) 0 0;
    font-size: var(--text-sm, 13px);
    color: #e0604f;
    text-align: center;
}
.pose-mini-qrcode__error:not([hidden]) {
    display: block;
}

/* ============================================================
   2) 页脚全局小程序码：嵌在 footer-widget 内
   ============================================================ */
.footer-mini-qrcode {
    text-align: center;
}

.footer-mini-qrcode__img {
    width: 120px;
    height: 120px;
    margin: var(--spacing-sm) auto 0;
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.footer-mini-qrcode__tip {
    margin: var(--spacing-sm) 0 0;
    font-size: var(--text-sm, 13px);
    /* 页脚为深色背景，使用次级浅色文字保证可读 */
    color: var(--text-secondary);
    text-align: center;
}

.footer-mini-qrcode__error {
    display: none;
    margin: var(--spacing-sm) 0 0;
    font-size: var(--text-sm, 13px);
    color: #f08a7c;
    text-align: center;
}
.footer-mini-qrcode__error:not([hidden]) {
    display: block;
}

/* ============================================================
   3) 加载中 spinner（两个区块共用）
   ============================================================ */
.pose-mini-qrcode__spinner,
.footer-mini-qrcode__spinner {
    display: block;
    width: 28px;
    height: 28px;
    margin: 0 auto var(--spacing-sm);
    border: 3px solid rgba(201, 168, 76, 0.25);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: pose-qrcode-spin 0.8s linear infinite;
}
.pose-mini-qrcode__spinner[hidden],
.footer-mini-qrcode__spinner[hidden] {
    display: none;
}

@keyframes pose-qrcode-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================================
   4) 响应式：移动端适当缩小二维码
   ============================================================ */
@media (max-width: 768px) {
    .pose-mini-qrcode__img {
        width: 140px;
        height: 140px;
    }
    .footer-mini-qrcode__img {
        width: 104px;
        height: 104px;
    }
}