/* WordPress微信引流插件样式 - 仅添加圆角+保留后台配色功能 */

/* ===================== 配色变量定义（后台选择生效） ===================== */
:root {
    /* 绿色（默认） */
    --green-primary: #22c55e !important;    /* 按钮主色/边框色 - 可修改 */
    --green-secondary: #16a34a !important; /* 按钮hover色 - 可修改 */
    --green-border: #22c55e !important;    /* 边框色 - 可修改 */
    --green-bg: #ffffff !important;        /* 背景色 - 可修改 */
    
    /* 蓝色 */
    --blue-primary: #3b82f6 !important;     /* 按钮主色/边框色 - 可修改 */
    --blue-secondary: #2563eb !important;   /* 按钮hover色 - 可修改 */
    --blue-border: #3b82f6 !important;      /* 边框色 - 可修改 */
    --blue-bg: #ffffff !important;          /* 背景色 - 可修改 */
    
    /* 橙色 */
    --orange-primary: #f97316 !important;   /* 按钮主色/边框色 - 可修改 */
    --orange-secondary: #ea580c !important; /* 按钮hover色 - 可修改 */
    --orange-border: #f97316 !important;    /* 边框色 - 可修改 */
    --orange-bg: #ffffff !important;        /* 背景色 - 可修改 */
    
/* 灰色 */
--red-primary: #6b7280 !important;      /* 按钮主色/边框色 - 可修改 */
--red-secondary: #4b5563 !important;    /* 按钮hover色 - 可修改 */
--red-border: #6b7280 !important;       /* 边框色 - 可修改 */
--red-bg: #f9fafb !important;           /* 背景色 - 可修改 */
    
    /* 默认使用绿色（后台选择后会覆盖） */
    --primary-color: var(--green-primary) !important;
    --secondary-color: var(--green-secondary) !important;
    --border-color: var(--green-border) !important;
    --bg-color: var(--green-bg) !important;
}

/* ===================== 基础样式重置 ===================== */
.wechat-verification-box,
.wechat-verification-box *,
.wechat-verification-box *::before,
.wechat-verification-box *::after {
    all: initial;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* ===================== 主容器样式（仅添加圆角，保留配色） ===================== */
.wechat-verification-box {
    margin: 15px 0 !important;
    padding: 20px !important;
    background: var(--bg-color) !important; /* 背景色 - 跟随选中的配色 */
    border: 1px solid var(--border-color) !important; /* 边框色 - 跟随选中的配色 */
    border-radius: 8px !important; /* 外框圆角 - 可修改数值（如4px/10px/12px） */
    box-shadow: none !important;
    position: relative !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important; /* 垂直居中 */
    justify-content: flex-start !important; /* 水平靠左 */
    gap: 20px !important;
    min-height: 140px !important;
}

/* ===================== 二维码区域 ===================== */
.wechat-verification-qrcode {
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important; /* 垂直居中 */
    justify-content: center !important; /* 水平居中 */
    width: 100px !important;
    height: 100px !important;
}

.wechat-verification-qrcode img {
    width: 100% !important;
    height: 100% !important;
    border: 1px solid var(--border-color) !important; /* 二维码边框色 - 跟随选中的配色 */
    padding: 5px !important;
    background-color: white !important;
    margin: 0 !important;
    display: block !important;
    border-radius: 4px !important; /* 二维码圆角 - 可修改数值 */
    box-shadow: none !important;
}

/* ===================== 内容区域 ===================== */
.wechat-verification-content {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    align-items: flex-start !important;
    justify-content: center !important; /* 垂直居中 */
    height: 100px !important; /* 与二维码等高 */
}

/* ===================== 输入框区域 ===================== */
.wechat-verification-input-area {
    display: flex !important;
    align-items: center !important; /* 垂直居中 */
    justify-content: flex-start !important; /* 水平靠左 */
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

/* 输入框样式 */
.wechat-verification-input-area input[type="text"] {
    padding: 8px 12px !important;
    border: 1px solid var(--border-color) !important; /* 输入框边框色 - 跟随选中的配色 */
    border-radius: 4px 0 0 4px !important; /* 输入框左侧圆角 - 可修改数值 */
    font-size: 14px !important;
    transition: border-color 0.3s !important;
    flex: 1 !important;
    min-width: 0 !important;
    height: 36px !important;
    background-color: #ffffff !important; /* 输入框背景色 - 白色 */
    color: #333333 !important; /* 输入框文字色 - 深灰色 */
    border-right: none !important;
}

.wechat-verification-input-area input[type="text"]:focus {
    outline: none !important;
    border-color: var(--secondary-color) !important; /* 输入框聚焦色 - 跟随选中的配色 */
    box-shadow: none !important;
}

.wechat-verification-input-area input[type="text"]::placeholder {
    color: #999999 !important; /* 占位符文字色 - 浅灰色 */
}

/* ===================== 提交按钮样式 ===================== */
.wechat-verification-input-area button {
    padding: 8px 20px !important;
    background-color: var(--primary-color) !important; /* 按钮背景色 - 跟随选中的配色 */
    color: white !important; /* 按钮文字色 - 白色 */
    border: none !important;
    border-radius: 0 4px 4px 0 !important; /* 按钮右侧圆角 - 可修改数值 */
    cursor: pointer !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: background-color 0.3s !important;
    white-space: nowrap !important;
    height: 36px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.wechat-verification-input-area button:hover {
    background-color: var(--secondary-color) !important; /* 按钮hover色 - 跟随选中的配色 */
    transform: none !important;
    box-shadow: none !important;
}

/* ===================== 提示文本 ===================== */
.wechat-verification-text {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

.wechat-verification-text p {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: #666666 !important; /* 提示文字色 - 中灰色 */
    padding: 0 !important;
}

/* ===================== 响应式设计（保留圆角） ===================== */
@media (max-width: 768px) {
    .wechat-verification-box {
        flex-direction: column !important;
        align-items: center !important; /* 垂直居中 */
        justify-content: center !important; /* 水平居中 */
        text-align: center !important;
        padding: 20px !important;
        min-height: auto !important;
        border-radius: 8px !important; /* 移动端外框圆角 - 与PC端一致 */
    }
    
    .wechat-verification-qrcode {
        margin-bottom: 15px !important;
    }
    
    .wechat-verification-content {
        height: auto !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
    }
    
    .wechat-verification-input-area {
        flex-direction: column !important;
        width: 100% !important;
    }
    
    .wechat-verification-input-area input[type="text"] {
        border-right: 1px solid var(--border-color) !important;
        border-bottom: none !important;
        width: 100% !important;
        border-radius: 4px 4px 0 0 !important; /* 移动端输入框上圆角 */
    }
    
    .wechat-verification-input-area button {
        width: 100% !important;
        border-radius: 0 0 4px 4px !important; /* 移动端按钮下圆角 */
    }
    
    .wechat-verification-text {
        justify-content: center !important;
    }
}

@media (max-width: 480px) {
    .wechat-verification-box {
        padding: 15px !important;
        margin: 10px 0 !important;
        border-radius: 6px !important; /* 小屏移动端圆角稍小 */
    }
    
    .wechat-verification-qrcode {
        width: 80px !important;
        height: 80px !important;
    }
}

/* ===================== 强制覆盖主题样式 ===================== */
.wechat-verification-box {
    --tw-shadow: none !important;
    --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/) !important;
    --tw-ring-offset-width: 0px !important;
    --tw-ring-offset-color: #fff !important;
    --tw-ring-color: rgba(59, 130, 246, 0.5) !important;
    --tw-ring-offset-shadow: 0 0 #0000 !important;
    --tw-ring-shadow: 0 0 #0000 !important;
}

.wechat-verification-box {
    flex: none !important;
    grid: none !important;
}

.wechat-verification-box > * {
    float: none !important;
}