/* 
 * assets/css/psp-styles.css 
 * 推广系统插件 - 最终全功能整合版 v5.2.1
 */

/* =================================================================== */
/* ======== 1. 导航栏样式 (修复 .nav-text 消失问题) =================== */
/* =================================================================== */
.nav-item { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    text-decoration: none; 
    color: #333; 
    padding: 5px 0;
}
.nav-icon-wrapper { 
    width: 24px; 
    height: 24px; 
    margin-bottom: 4px; 
    display: flex;
    align-items: center;
    justify-content: center;
}
.nav-icon { 
    width: 100%; 
    height: 100%; 
    fill: currentColor; 
}
.nav-text { 
    font-size: 12px; 
    color: #666; 
    line-height: 1.2; 
    font-weight: 500;
}

/* =================================================================== */
/* ======== 2. 基础登录/注册弹窗 (Popup) ============================= */
/* =================================================================== */
.login-popup-wrapper { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    z-index: 10000; display: none; align-items: center; justify-content: center; 
}
.login-popup-wrapper.is-visible { display: flex; }
.login-popup-overlay { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    background-color: rgba(0, 0, 0, 0.6); cursor: pointer; 
}
.login-popup-content { 
    position: relative; z-index: 1; background-color: #ffffff; 
    padding: 40px 30px; border-radius: 16px; width: 400px; max-width: 90%; 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); text-align: center; 
}
.close-popup { 
    position: static; top: 10px; right: 15px; background: none; 
    border: none; font-size: 28px; color: #aaa; cursor: pointer; padding: 5px; 
}
.logo-container { margin-bottom: 25px; }
.logo-container img { max-width: 80px; height: auto;border-radius: 10px; }

/* =================================================================== */
/* ======== 3. wp-login.php 页面美化 ================================= */
/* =================================================================== */
body.login { background-color: #f0f2f5; display: flex; align-items: center; min-height: 100vh; }
body.login #login { width: 400px; padding: 0; }
body.login #login h1 a { 
    background-size: contain; background-position: center; 
    background-repeat: no-repeat !important; width: 100%; height: 80px; 
}
body.login #loginform, body.login #registerform, body.login #lostpasswordform { 
    padding: 30px; border-radius: 16px; border: none; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.05); background: #fff; 
}
/* 隐藏默认 Label 以适配 Placeholder 风格 */
.login-popup-content label, body.login label:not(.forgetmenot label) {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;
}

/* =================================================================== */
/* ======== 4. 通用表单元素 (Inputs & Buttons) ======================= */
/* =================================================================== */
form input[type="text"], form input[type="password"], 
form input[type="tel"], form select.input {
    width: 100%; padding: 12px 15px; border: 2px solid transparent;
    background-color: #f0f2f5 !important; border-radius: 8px;
    font-size: 15px !important; margin-bottom: 15px; transition: all 0.2s;
}
form input:focus, form select.input:focus { border-color: #0052ff; outline: none; background-color: #fff !important; }

.mobile-verify-wrapper { display: flex; gap: 10px; margin-bottom: 15px; }
.mobile-verify-wrapper input { margin-bottom: 0 !important; flex: 1; }
.mobile-verify-wrapper .button { 
    white-space: nowrap; height: 48px; background: #0073aa; color: #fff; 
    border: none; border-radius: 8px; padding: 0 15px; cursor: pointer; 
}
form input[type="submit"], .button-primary {
    width: 100%; padding: 12px; background-color: #0052ff; color: #fff;
    border: none; border-radius: 8px; font-weight: bold; cursor: pointer;
}

/* =================================================================== */
/* ======== 5. 分享菜单 (Share Modal) ================================ */
/* =================================================================== */
.app-share-modal-overlay { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(0, 0, 0, 0.5); display: none; justify-content: center; 
    align-items: flex-end; z-index: 10000; opacity: 0; transition: all 0.3s; 
}
.app-share-modal-overlay.is-visible { display: flex; opacity: 1; }
.app-share-modal-content { 
    background: #fff; width: 100%; border-radius: 20px 20px 0 0; 
    padding: 20px; transform: translateY(100%); transition: transform 0.3s; 
}
.app-share-modal-overlay.is-visible .app-share-modal-content { transform: translateY(0); }
.app-share-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin: 20px 0; }
.app-share-options a { text-decoration: none; color: #333; font-size: 12px; display: flex; flex-direction: column; align-items: center; }
.share-icon-wrapper { 
    width: 55px; height: 55px; border-radius: 50%; background: #f8f9fa; 
    display: flex; justify-content: center; align-items: center; 
    margin-bottom: 8px; font-size: 24px; 
}
.share-icon-wrapper svg { width: 28px; height: 28px; }
#app-share-modal-close { width: 100%; background: #f1f3f5; border: none; padding: 12px; border-radius: 12px; color: #666; }

/* =================================================================== */
/* ======== 6. 二维码弹窗 (QR Code Modal) ============================ */
/* =================================================================== */
.app-qrcode-modal-overlay { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(0, 0, 0, 0.7); display: none; justify-content: center; 
    align-items: center; z-index: 10001; opacity: 0; transition: opacity 0.3s; 
}
.app-qrcode-modal-overlay.is-visible { display: flex; opacity: 1; }
.app-qrcode-modal-content { 
    background: #fff; padding: 25px; border-radius: 16px; 
    text-align: center; width: 280px; box-shadow: 0 5px 25px rgba(0,0,0,0.2); 
}
#app-qrcode-container { 
    margin: 15px auto; padding: 10px; border: 1px solid #eee; 
    border-radius: 8px; display: inline-block; background: #fff;
}
#app-qrcode-container canvas, #app-qrcode-container img { max-width: 100%; height: auto; }
#app-qrcode-modal-close { width: 100%; background: #f8f9fa; border: none; padding: 10px; border-radius: 8px; color: #666; cursor: pointer; }

/* =================================================================== */
/* ======== 7. 海报生成结果预览 (Result Modal) ======================= */
/* =================================================================== */
#psp-result-modal { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(0,0,0,0.95); z-index: 10002; display: none; 
    flex-direction: column; align-items: center; justify-content: center; 
}
#psp-result-scroll { 
    width: 100%; height: 75%; overflow-y: auto; text-align: center; padding: 30px 0; 
}
#psp-result-scroll img { 
    width: 85%; max-width: 500px; border-radius: 12px; 
    margin-bottom: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); 
}
.psp-action-bar { 
    height: 25%; display: flex; flex-direction: column; align-items: center; 
    justify-content: center; background: rgba(0,0,0,0.8); width: 100%; gap: 15px; 
}
.psp-btn-group { display: flex; gap: 15px; }
.psp-btn { 
    padding: 12px 30px; border: none; border-radius: 30px; 
    font-weight: bold; cursor: pointer; font-size: 15px; 
}
.psp-btn-save { background: #07C160; color: #fff; }
.psp-btn-close { background: #fff; color: #333; }
.psp-btn-print { 
    background: #f59e0b; color: #fff; padding: 8px 20px; 
    font-size: 13px; border-radius: 20px; 
}

/* =================================================================== */
/* ======== 8. Toast 提示 & 消息通知 ================================= */
/* =================================================================== */
.app-toast-message { 
    position: fixed; bottom: -100px; left: 50%; transform: translateX(-50%); 
    background: rgba(0,0,0,0.85); color: #fff; padding: 12px 24px; 
    border-radius: 30px; font-size: 14px; z-index: 20000; 
    transition: all 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28); opacity: 0; 
}
.app-toast-message.show { bottom: 15%; opacity: 1; }

.registration-error, body.login #login_error, body.login .message {
    background-color: #fff5f5; border-left: 4px solid #f56565; 
    color: #c53030; padding: 12px; border-radius: 4px; 
    margin-bottom: 15px; font-size: 13px; text-align: left;
}
body.login .message.register, body.login .message.reset-pass {
    background-color: #f0fff4; border-left-color: #48bb78; color: #276749;
}