/* ============================================================================
   Lazzy 元件樣式 (components.css) — 對應 _components.html 的 Jinja macros
   所有數值皆引用 theme.css 變數；改 theme.css 即全站套用。
   ============================================================================ */

/* ---- VIP 徽章（管理後台「設為 VIP」授予；用於個人頁、揪團卡片） ---- */
.lz-vip-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 9px; border-radius: 999px;
    font-size: 0.7rem; font-weight: 800; letter-spacing: 0.4px;
    color: #7a5200; line-height: 1.3; white-space: nowrap; vertical-align: middle;
    background: linear-gradient(135deg, #ffe08a 0%, #ffc93c 50%, #f6a800 100%);
    box-shadow: 0 1px 3px rgba(246, 168, 0, 0.45);
}
.lz-vip-badge i { font-size: 0.68rem; }

/* ---- 按鈕 ---- */
.lz-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--font-chinese); font-weight: 700; font-size: var(--text-base);
    padding: 12px 24px; border: none; cursor: pointer; text-decoration: none;
    border-radius: var(--btn-primary-radius); transition: var(--transition-base);
    line-height: 1; white-space: nowrap;
}
.lz-btn i { font-size: .95em; }
.lz-btn--primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); box-shadow: var(--btn-primary-glow); }
.lz-btn--primary:hover { background: var(--btn-primary-bg-hover); transform: translateY(-2px); }
.lz-btn--primary:active { transform: translateY(0); }
.lz-btn--secondary { background: var(--btn-secondary-bg); color: var(--btn-secondary-fg); border: 1.5px solid var(--btn-secondary-border); }
.lz-btn--secondary:hover { border-color: var(--color-accent); color: var(--color-accent); }
.lz-btn--block { width: 100%; }

/* ---- 卡片 ---- */
.lz-card {
    background: var(--card-bg); border-radius: var(--card-radius);
    box-shadow: var(--card-shadow); padding: var(--card-pad);
}

/* ---- 空狀態 ---- */
.lz-empty { text-align: center; padding: 40px 20px; }
.lz-empty__icon {
    width: 88px; height: 88px; margin: 0 auto 16px; border-radius: var(--radius-full);
    background: var(--empty-icon-bg); color: var(--empty-icon-fg);
    display: flex; align-items: center; justify-content: center; font-size: 36px;
}
.lz-empty__title { font-family: var(--font-chinese); font-weight: 700; font-size: var(--text-lg); color: var(--empty-title); margin-bottom: 6px; }
.lz-empty__subtitle { font-size: var(--text-sm); color: var(--empty-subtitle); margin-bottom: 20px; }
.lz-empty__cta { display: flex; justify-content: center; }

/* ---- 特色漸層卡 ---- */
.lz-feature {
    display: flex; align-items: center; gap: 12px; text-decoration: none;
    border-radius: var(--card-radius); padding: 18px 20px; color: #fff;
    box-shadow: var(--shadow-md); position: relative; overflow: hidden;
}
.lz-feature--hero { background: var(--hero-gradient); }
.lz-feature--feature { background: var(--feature-gradient); }
.lz-feature__body { flex: 1; min-width: 0; }
.lz-feature__title { font-family: var(--font-chinese); font-weight: 800; font-size: var(--text-lg); }
.lz-feature__subtitle { font-size: var(--text-sm); opacity: .85; margin-top: 2px; }
.lz-feature__icon {
    width: 44px; height: 44px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; border-radius: 50%;
    background: rgba(255,255,255,.18);
}
.lz-feature__arrow { opacity: .7; font-size: 14px; }

/* ---- 全幅頁面橫幅 Hero ---- */
.lz-hero {
    position: relative; overflow: hidden;
    background: var(--hero-gradient);
    border-radius: var(--radius-xl);
    padding: 24px 20px 28px; margin: 0 0 12px; color: #fff;
}
.lz-hero::before {
    content: ''; position: absolute; top: -40px; right: -40px;
    width: 200px; height: 200px; border-radius: 50%;
    background: rgba(255,107,53,.12); pointer-events: none;
}
.lz-hero::after {
    content: ''; position: absolute; bottom: -60px; left: -20px;
    width: 160px; height: 160px; border-radius: 50%;
    background: rgba(0,180,216,.08); pointer-events: none;
}
.lz-hero__title {
    position: relative; z-index: 1; margin: 0 0 4px;
    font-family: var(--font-primary); font-weight: 800;
    font-size: 1.6rem; letter-spacing: -.5px; line-height: 1.2;
}
.lz-hero__accent { color: var(--color-accent); }
.lz-hero__subtitle {
    position: relative; z-index: 1; margin: 0;
    font-size: var(--text-sm); color: rgba(255,255,255,.65);
}

/* ---- 篩選膠囊 ---- */
.lz-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.lz-pill {
    font-family: var(--font-chinese); font-weight: 600; font-size: var(--text-sm);
    padding: 8px 18px; border-radius: var(--radius-full); cursor: pointer;
    background: var(--color-surface); color: var(--color-text-secondary);
    border: 1.5px solid var(--color-border); transition: var(--transition-fast);
}
.lz-pill.is-active { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
body.dark-mode .lz-pill { background: var(--dark-surface-elevated); color: var(--dark-text-secondary); border-color: var(--dark-border); }
body.dark-mode .lz-pill.is-active { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }