/**
 * ========================================
 * 自定义光标样式表 (Custom Cursor Styles)
 * ========================================
 * 
 * 功能说明：
 * 1. 隐藏系统光标，显示自定义酒瓶光标
 * 2. 弹窗区域强制显示普通光标
 * 3. 酒瓶倒酒动画
 * 4. 粒子特效样式
 * 5. 统一返回按钮样式
 * 
 * 注意事项：
 * - 光标 z-index 设为最大值，确保始终可见
 * - 弹窗区域使用 !important 强制显示系统光标
 */

/* ================= 自定义光标样式表 (层级修复版) ================= */

/* ============ 1. 全局隐藏系统默认光标 ============ */
body, html, a, button, .modal-box {
    cursor: none !important;
}

/* ============ 弹窗和国家选择区域强制显示正常光标 ============ */
/* 这些区域需要精确点击，使用普通光标 */
#country-modal,
#country-modal *,
#country-trigger,
.country-item,
.modal-close-btn,
.modal-search {
    cursor: pointer !important;
}

/* 输入框显示文本编辑光标 */
#country-modal .modal-search {
    cursor: text !important;
}

/* 2. 酒瓶光标容器 */
#custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    
    /* === 纯代码绘制瓶身 === */
    width: 24px; 
    height: 50px;
    
    /* 瓶身渐变 */
    background: linear-gradient(to bottom, 
        rgba(255,255,255,0.4) 0%,   
        rgba(255,255,255,0.1) 20%, 
        #C5A059 25%,            
        #b8860b 100%                
    );
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 4px 4px 8px 8px; 
    box-shadow: 0 0 10px rgba(197, 160, 89, 0.3);
    
    /* 🔴 核心修复：层级必须高于弹窗 (弹窗是100000) */
    z-index: 2147483647; /* 设置为浏览器允许的最大值，确保永远置顶 */
    
    pointer-events: none; /* 确保点击能穿透光标，点到下面的按钮 */

    /* 初始姿态 */
    transform-origin: center -10px; 
    transform: translate(-50%, -10%) rotate(10deg);
    transition: transform 0.1s ease-out;
}

/* 瓶颈 */
#custom-cursor::before {
    content: ''; 
    position: absolute;
    top: -12px; 
    left: 50%; 
    transform: translateX(-50%);
    width: 8px; 
    height: 12px;
    background: rgba(255,255,255,0.3);
    border: 1px solid rgba(255,255,255,0.6);
    border-bottom: none;
}

/* 3. 倒酒动画 */
.pouring { 
    animation: pour-anim 0.8s cubic-bezier(0.25, 0.1, 0.25, 1) forwards; 
}

@keyframes pour-anim {
    0% { transform: translate(-50%, -10%) rotate(10deg); }
    20% { transform: translate(-50%, -10%) rotate(95deg); } 
    60% { transform: translate(-50%, -10%) rotate(95deg); }
    100% { transform: translate(-50%, -10%) rotate(10deg); }
}

/* 4. 粒子样式 */
.cursor-particle {
    position: fixed; 
    pointer-events: none;
    /* 金色发光粒子 */
    background: radial-gradient(circle, #FFD700 0%, transparent 100%);
    width: 4px; height: 4px; border-radius: 50%; 
    
    /* 粒子层级也要很高，但要在酒瓶下面一点点 */
    z-index: 2147483646; 
    
    box-shadow: 0 0 4px #FFD700;
    mix-blend-mode: screen;
}

/* 5. 统一返回按钮样式（跨页面复用） */

.back-btn, .unified-back-btn {
    /* 主题化返回键：玻璃质感 + 金色高光，统一所有页面 */
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #F5E6C7 !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.08)) !important;
    border: 1px solid rgba(229,197,120,0.25) !important;
    box-shadow: 0 6px 20px rgba(198,166,100,0.06), inset 0 1px 0 rgba(255,255,255,0.03) !important;
    padding: 8px 18px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    cursor: pointer !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
    border-radius: 28px !important;
    z-index: 2147483646 !important;
    pointer-events: auto !important;
}
.back-btn::before, .unified-back-btn::before {
    content: '←' !important;
    display: inline-block !important;
    margin-right: 8px !important;
    font-size: 16px !important;
    color: #E5C578 !important;
    line-height: 1 !important;
}
.back-btn:hover, .unified-back-btn:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 12px 30px rgba(229,197,120,0.12) !important;
    background: linear-gradient(180deg, rgba(229,197,120,0.06), rgba(0,0,0,0.12)) !important;
    color: #fff !important;
    border-color: rgba(229,197,120,0.85) !important;
}
.back-btn:active, .unified-back-btn:active {
    transform: translateY(-1px) scale(0.995) !important;
}

/* 兼容：若页面里仍存在旧的 .back-btn 或 .top-nav，将它们和统一样式一起显示 */
.back-btn.unified-back-btn, .top-nav.unified-back-btn {
    display: inline-flex; justify-content: center; align-items: center;
}