/* wp-scp-frontend.css - WP Secure Captcha Pro 前端样式 */

/* 基础样式 */
.wp-scp-wrap {margin:10px 0;}
.wp-scp-label {display:inline-block;margin-right:10px;vertical-align:middle;font-weight:500;color:#333;}
.wp-scp-img {width:120px;height:45px;cursor:pointer;vertical-align:middle;margin:0 10px;border:1px solid rgba(255,255,255,0.2);border-radius:8px;transition:all 0.3s ease;background:rgba(255,255,255,0.8);backdrop-filter:blur(5px);}
.wp-scp-img:hover {border-color:#3498db;box-shadow:0 0 10px rgba(52,152,219,0.4);transform:scale(1.02);}
.wp-scp-input {padding:8px 12px;width:150px;vertical-align:middle;border:1px solid rgba(255,255,255,0.2);border-radius:8px;font-size:14px;transition:all 0.3s ease;background:rgba(255,255,255,0.8);backdrop-filter:blur(5px);color:#333;}
.wp-scp-input:focus {outline:none;border-color:#3498db;box-shadow:0 0 10px rgba(52,152,219,0.3);background:rgba(255,255,255,0.95);}

/* 毛玻璃风格弹窗遮罩 */
.wp-scp-modal {
    display:none;position:fixed;z-index:9999;left:0;top:0;width:100%;height:100%;
    overflow:auto;background-color:rgba(0,0,0,0.4);backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}

/* 毛玻璃弹窗主体 - 核心样式 */
.wp-scp-modal-content {
    background-color:rgba(255,255,255,0.85); /* 半透明白色 */
    backdrop-filter:blur(15px); /* 毛玻璃模糊效果 */
    -webkit-backdrop-filter:blur(15px); /* 兼容webkit内核 */
    margin:5% auto;padding:0;border:none;border-radius:20px;
    width:420px;box-shadow:0 15px 40px rgba(0,0,0,0.15);
    overflow:hidden;position:relative;
    /* 更流畅的入场动画 */
    animation:wpScpModalFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    border:1px solid rgba(255,255,255,0.2); /* 细边框增强质感 */
}

/* 弹窗背景纹理（可选，增加质感） */
.wp-scp-modal-content::before {
    content:"";position:absolute;top:0;left:0;width:100%;height:100%;
    background-image:linear-gradient(45deg, rgba(52,152,219,0.03) 25%, transparent 25%),
                     linear-gradient(135deg, rgba(52,152,219,0.03) 25%, transparent 25%),
                     linear-gradient(45deg, transparent 75%, rgba(52,152,219,0.03) 75%),
                     linear-gradient(135deg, transparent 75%, rgba(52,152,219,0.03) 75%);
    background-size:20px 20px;opacity:0.7;z-index:-1;
}

@keyframes wpScpModalFadeIn {
    from {opacity:0;transform:translateY(-30px) scale(0.95);}
    to {opacity:1;transform:translateY(0) scale(1);}
}

/* 弹窗头部 - 毛玻璃风格 */
.wp-scp-modal-header {
    padding:20px 24px;background:rgba(52,152,219,0.9);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    color:#fff;display:flex;justify-content:space-between;align-items:center;
    border-bottom:1px solid rgba(255,255,255,0.1);
}
.wp-scp-modal-header h3 {margin:0;font-size:18px;font-weight:600;letter-spacing:0.5px;}
.wp-scp-modal-close {
    color:#fff;float:none;font-size:24px;font-weight:bold;cursor:pointer;
    width:36px;height:36px;display:flex;align-items:center;justify-content:center;
    border-radius:50%;transition:all 0.3s ease;
    background:rgba(255,255,255,0.1);
}
.wp-scp-modal-close:hover {
    color:#fff;background:rgba(255,255,255,0.2);transform:rotate(90deg);
}

/* 弹窗主体 - 核心布局修改 */
.wp-scp-modal-body {
    padding:24px 24px 30px;text-align:center;
}

/* 验证码和输入框同行容器 */
.wp-scp-captcha-row {
    display:flex;align-items:center;justify-content:center;
    gap:12px;margin:20px 0;flex-wrap:nowrap;
}

/* 同行布局的验证码图片 */
.wp-scp-captcha-row .wp-scp-img {
    margin:0;width:140px;height:50px;flex-shrink:0;
}

/* 同行布局的输入框 */
.wp-scp-captcha-row .wp-scp-input {
    margin:0;padding:12px 16px;font-size:16px;
    width:180px;height:50px;box-sizing:border-box;
}

/* 提交按钮容器 */
.wp-scp-button-wrap {
    margin:15px 0 0 0;text-align:center;
}

/* 提交按钮样式 */
.wp-scp-modal-submit {
    padding:12px 40px;background:rgba(46,204,113,0.9);
    color:#fff;border:none;border-radius:10px;cursor:pointer;
    font-size:16px;font-weight:600;
    transition:all 0.3s ease;box-shadow:0 4px 12px rgba(46,204,113,0.2);
    backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,0.2);
    letter-spacing:0.5px;width:100%;max-width:320px;
}
.wp-scp-modal-submit:hover {
    background:rgba(39,174,96,0.95);transform:translateY(-2px);
    box-shadow:0 6px 16px rgba(46,204,113,0.3);
}
.wp-scp-modal-submit:active {
    transform:translateY(0);box-shadow:0 4px 12px rgba(46,204,113,0.2);
}
.wp-scp-modal-submit:disabled {
    background:rgba(189,195,199,0.8);cursor:not-allowed;
    transform:none;box-shadow:none;
}

/* 验证结果提示 - 按钮下方 */
.wp-scp-modal-result {
    margin:12px 0 0 0;font-size:15px;height:22px;line-height:22px;
    font-weight:500;text-align:center;
}
.wp-scp-success {color:#27ae60;}
.wp-scp-error {color:#e74c3c;}

/* 响应式适配 */
@media (max-width: 480px) {
    .wp-scp-modal-content {
        width:90%;margin:10% auto;border-radius:16px;
    }
    .wp-scp-captcha-row {
        flex-direction:column;gap:10px;
    }
    .wp-scp-captcha-row .wp-scp-img,
    .wp-scp-captcha-row .wp-scp-input {
        width:90%;max-width:300px;
    }
    .wp-scp-modal-submit {
        width:90%;
    }
}