/* ============================================================
   购物车抽屉 & 购物车页 兜底样式
   背景：购物车抽屉(#cart-drawer / #cart-overlay / #cart-content)定义在 footer.php，
   使用了 bg-gray-900/30、z-[100] 等「任意值 Tailwind 类」。
   若 tailwind-output.css 构建时未扫描 footer.php，这些类会缺失，
   导致遮罩无色、层级不对、甚至抽屉一直盖屏表现为「空白」。
   本文件用显式规则兜底，保证购物车在任何情况下都正常显示。
   选择器均为 #id 或 .cart-item（仅购物车使用），不会与主题其它页面冲突。
   ============================================================ */

/* 抽屉容器：默认隐藏，.visible 时显示 */
#cart-drawer {
    position: fixed;
    inset: 0;
    z-index: 100;
    visibility: hidden;
    opacity: 0;
    transition: visibility .3s, opacity .3s;
}
#cart-drawer.visible { visibility: visible; opacity: 1; }

/* 遮罩层（兜底 Tailwind 缺失的 bg-gray-900/30 + backdrop-blur-sm） */
#cart-overlay {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, 0.3);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity .3s;
}
#cart-drawer.visible #cart-overlay { opacity: 1; }

/* 右侧抽屉面板（兜底 Tailwind 缺失的 max-w-sm / translate-x-full / shadow-2xl / z-[100]） */
#cart-content {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 384px;
    height: 100%;
    background: #fff;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
    transform: translateX(100%);
    transition: transform .3s;
    display: flex;
    flex-direction: column;
}
#cart-drawer.visible #cart-content { transform: translateX(0); }

/* AI 聊天窗兜底（footer.php 同样用了 z-[95] 任意值类） */
#ai-chat-window {
    z-index: 95;
}

/* 购物车页(route-cart.php)商品卡片兜底：防止 Tailwind 类缺失时整块空白 */
.cart-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #f9fafb;
    border-radius: 12px;
}