/* 
   前端页面全局样式表
   包含：响应式布局、SSL 提示条、二维码容器、联系按钮及浮窗提示样式
*/

* {
    box-sizing: border-box; /* 防止内边距撑开宽度导致横向滚动条 */
    -webkit-tap-highlight-color: transparent;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden; /* 彻底禁止横向滚动 */
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 100vh;
    background-color: #f5f7fa;
    color: #333;
    padding-top: 40px; /* 为固定顶部的 SSL 提示条留出空间 */
}

/* SSL 提示样式 */
.ssl_tips_container {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    background-color: #f0f9eb;
    border-bottom: 1px solid #e1f3d8;
    padding: 8px 0;
}

.ssl_tips {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.ssl_logo {
    display: inline-block;
    width: 14px;
    height: 16px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="%2327ae60" d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"/></svg>') no-repeat center;
    background-size: contain;
}

.ssl_text {
    font-size: 12px;
    color: #27ae60;
    font-weight: 500;
}

.container {
    position: relative;
    overflow: hidden; /* 确保装饰不超出圆角 */
    text-align: center;
    background: white;
    padding: 3rem 1.5rem 2rem; /* 增加顶部内边距，为装饰留出空间 */
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
    width: 90%;
    max-width: 450px;
    margin: 10px auto 30px;
}

/* 卡片顶部波浪装饰 - 增加层叠感 */
.card-header-accent {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 90px;
    background: linear-gradient(135deg, rgba(0, 122, 255, 0.1), rgba(0, 198, 255, 0.05));
    clip-path: ellipse(85% 50% at 50% 0%);
    z-index: 0;
}

/* 增加一个次级装饰波纹，形成层叠效果 */
.container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background: linear-gradient(135deg, rgba(0, 122, 255, 0.05), transparent);
    clip-path: ellipse(70% 40% at 30% 0%);
    z-index: 0;
    pointer-events: none;
}

/* 添加一些精致的小圆点装饰，增加设计感 */
.card-dots {
    position: absolute;
    top: 15px;
    right: 20px;
    width: 40px;
    height: 20px;
    background-image: radial-gradient(#007aff 1px, transparent 1px);
    background-size: 8px 8px;
    opacity: 0.2;
    z-index: 1;
}

/* 修改容器顶部线条，使其更有渐变质感 */
.container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(to right, #007aff, #00c6ff, #007aff);
    background-size: 200% auto;
    animation: gradient-flow 5s linear infinite;
    z-index: 2;
}

@keyframes gradient-flow {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

.image-wrapper {
    margin: 25px 0;
    position: relative;
    background: #fff;
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 15px;
}

img {
    width: 100%;
    height: auto;
    max-width: 300px;
    border-radius: 10px;
    display: block;
    margin: 0 auto;
}

.btn-group {
    display: flex;
    flex-direction: row; /* 横向排列 */
    gap: 10px;
    margin-top: 30px;
}

.contact-btn {
    flex: 1; /* 平分空间 */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 5px; /* 减小内边距 */
    font-size: 1rem; /* 减小字体大小 */
    font-weight: bold;
    text-decoration: none;
    border-radius: 12px;
    transition: all 0.2s ease;
    color: white;
    -webkit-tap-highlight-color: transparent; /* 移除移动端点击高亮 */
    gap: 8px; /* 图标和文字之间的间距 */
}

.btn-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    margin: 0;
}

.btn-qq {
    background: linear-gradient(135deg, #00c6ff, #0072ff);
}

.btn-qq:hover {
    background: linear-gradient(135deg, #00d4ff, #0082ff);
}

.btn-wecom {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
}

.btn-wecom:hover {
    background: linear-gradient(135deg, #34e89e, #2ecc71);
}

.contact-btn:active {
    transform: scale(0.96);
}

h1 {
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
    color: #1a1a1a;
    margin-bottom: 8px;
    font-size: 1.5rem;
    font-weight: 800;
}

.sub-title {
    font-weight: bold;
    color: #555;
    margin-top: 0;
    font-size: 1rem;
}

.tip {
    color: #888;
    font-size: 0.95rem;
    margin-top: 10px;
    line-height: 1.6;
}

.wechat-id {
    font-family: "SimHei", "黑体", sans-serif;
    font-weight: bold;
    color: #333;
    margin: 0 2px;
}

.copy-btn {
    display: inline-block;
    margin-top: 8px;
    padding: 6px 20px;
    background-color: #007aff; /* 蓝色背景 */
    color: #ffffff; /* 白色字体 */
    font-weight: bold; /* 加粗 */
    border-radius: 20px;
    font-size: 0.85rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
}

.copy-btn:active {
    background-color: #0056b3;
    transform: scale(0.95);
}

/* 复制成功提示浮窗 */
.toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.9rem;
    z-index: 2000;
    display: none;
    pointer-events: none;
}

p {
    color: #666;
    margin: 0 0 10px 0;
    font-size: 1.1rem;
}

/* 针对超小屏幕优化 */
@media (max-width: 350px) {
    h1 { font-size: 1.5rem; }
    .contact-btn { font-size: 1rem; }
}

/* 电话联系表单样式 */
.contact-form {
    margin-top: 25px;
    padding: 20px 0;
    border-top: 2px dashed #ccc;
    border-bottom: 2px dashed #ccc;
    text-align: left;
    margin-bottom: 25px;
}

.form-title {
    font-size: 1.1rem;
    color: #333;
    margin-bottom: 15px;
    text-align: left;
    font-weight: bold;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

.form-hint {
    font-size: 0.9rem;
    color: #999;
    font-weight: normal;
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 15px;
}

.input-group input {
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.2s;
}

.input-group input:focus {
    border-color: #007aff;
}

.submit-btn {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #007aff, #00c6ff);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden; /* 为流光效果准备 */
}

/* 流光闪烁效果 */
.submit-btn::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -60%;
    width: 20%;
    height: 200%;
    background: rgba(255, 255, 255, 0.4);
    transform: rotate(30deg);
    transition: none;
    animation: shine-sweep 3s infinite;
}

@keyframes shine-sweep {
    0% { left: -60%; }
    20% { left: 120%; }
    100% { left: 120%; }
}

.submit-btn:hover {
    background: linear-gradient(135deg, #0086ff, #00d6ff);
}

.submit-btn:active {
    transform: scale(0.95); /* 点击缩放反馈 */
}

/* 提交中状态 */
.submit-btn.loading {
    background: #ccc;
    pointer-events: none;
    animation: none;
}

.submit-btn.loading::after {
    display: none;
}