/* =============== 弹出框整体背景（半透明遮罩） =============== */
.domain-popup {
    position: fixed;           /* 固定定位覆盖全屏 */
    z-index: 9999;             /* 最高层级显示 */
    left: 0;
    top: 0;
    width: 100%;               /* 宽度占满视口 */
    height: 100%;              /* 高度占满视窗 */
    display: none;             /* 默认隐藏 */
    background-color: rgba(0, 0, 0, 0.7); /* 黑色半透明遮罩 */
}
.domain-popup.show {
    display: block;            /* 显示弹窗 */
}

/* =============== 弹出框主体内容 =============== */
.domain-popup-content {
    position: relative;        /* 相对定位，用于子元素定位 */
    width: 380px;              /* 容器宽度 */
    height: 500px;             /* 固定高度，可滚动 */
    margin: 100px auto 0;      /* 上方60px间距，左右自动居中 */
    padding: 25px;             /* 内边距 */
    background-color: #ffffff; /* 白色背景 */
    border-radius: 12px;       /* 较大圆角 */
    box-shadow: 0 10px 20px rgba(0,0,0,0.15); /* 阴影效果 */
    overflow-y: auto;          /* 内容超出时滚动条显示 */
    transition: transform 0.3s ease-in-out; /* 出现动画 */
    transform: scale(0.9);
}

.domain-popup.show .domain-popup-content {
    transform: scale(1);
}

/* =============== 标题文字样式 =============== */
.domain-popup-content h1 {
    font-size: 22px;           /* 字体大小22px */
    margin-bottom: 16px;       /* 下方间距16px */
    text-align: center;        /* 居中 */
    background: linear-gradient(90deg, #007bff, #00bcd4); /* 渐变色背景 */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;        /* 字体透明，显示渐变色 */
    animation: textFlow 8s infinite alternate; /* 流动动画 */
}

@keyframes textFlow {
    from { background-position: 0% center; }
    to { background-position: 100% center; }
}

/* =============== 右上角关闭按钮 =============== */
.domain-popup-close {
    position: absolute;        /* 绝对定位 */
    top: 6px;
    right: 6px;
    font-size: 18px;           /* 字体大小 */
    color: #aaa;               /* 默认颜色浅灰色 */
    cursor: pointer;           /* 手形鼠标指针 */
    transition: color 0.2s;
}

.domain-popup-close:hover {
    color: #333;               /* 鼠标悬停变深色 */
}

/* =============== 输入框样式 =============== */
#domainSearchInput {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    font-size: 16px;
    margin-bottom: 10px;
    transition: border-color 0.2s;
}

#domainSearchInput:focus {
    border-color: #00bcd4;
    outline: none;
}

/* =============== 粘贴按钮与确认按钮样式 =============== */
/* 按钮容器样式 - 横排布局，便于整体调整 */
.button-container {
    display: flex;                /* 启用flex布局 */
    justify-content: center;      /* 横向居中 */
    align-items: center;          /* 纵向居中对齐 */
    gap: 10px;                    /* 按钮之间的间距 */
    margin-top: 5px;             /* 与输入框的间距 */
}

/* 粘贴按钮与确认按钮基础样式 */
#pasteButton, 
#confirmButton {
    flex: 1;                      /* 按钮自适应宽度，自动填充容器 */
    max-width: 150px;             /* 按钮最大宽度，可自由调整 */
    padding: 8px 12px;            /* 按钮内边距，自由控制大小 */
    font-size: 14px;              /* 字体大小 */
    cursor: pointer;              /* 鼠标手型指针 */
    border: none;                 /* 去除默认边框 */
    border-radius: 6px;           /* 圆角按钮 */
    color: white;                 /* 字体白色 */
    transition: background-color 0.2s; /* 鼠标悬停过渡效果 */
}

/* 粘贴按钮特有颜色 */
#pasteButton {
    background-color: #00bcd4;    /* 蓝绿色背景 */
}

/* 鼠标悬停粘贴按钮 */
#pasteButton:hover {
    background-color: #008c9e;    /* 悬停颜色变深 */
}

/* 确认按钮特有颜色 */
#confirmButton {
    background-color: #4caf50;    /* 绿色背景 */
}

/* 鼠标悬停确认按钮 */
#confirmButton:hover {
    background-color: #43a047;    /* 悬停颜色变深 */
}

/* =============== 结果展示区域 Flex布局控制 =============== */
.search-result-box {
    display: none;                        
    text-align: center;
    padding: 15px 0;
    margin-top: 15px;
    border-top: 1px solid #f0f0f0;

    display: flex;                        /* 启用Flex布局 */
    flex-direction: column;               /* 纵向排列 */
    align-items: center;                  /* 水平居中 */
    justify-content: center;              /* 垂直居中（可选） */
    gap: 10px;                            /* 子元素之间的统一间距10px */
}

/* 图片通用基础样式（不需额外margin） */
.result-image {
    display: block;
    background-size: cover;
    background-position: center;
}

/* 成功状态图片单独尺寸（居中） */
.success .result-image {
    width: 100px;
    height: 50px;
    background-image: url('../images/dd.png');
    margin: 0 auto;                    /* 图片水平居中 */
    background-position: center;       /* 背景图居中 */
}

/* 失败状态图片单独样式（居中） */
.fail .result-image {
    width: 120px;
    height: 120px;
    background-image: url('../images/sb.png');
    margin: 0 auto;                    /* 图片水平居中 */
    background-position: center;       /* 背景图居中 */
}

/* 成功状态匹配域名样式 */
.search-result-box.success .matched-domain {
    font-size: 30px;
    font-weight: bold;
    color: #28a745;
    animation: blink 1.5s ease-in-out infinite alternate;
    margin: 0; /* 移除负边距，避免干扰Flex布局 */
}

/* 成功状态辅助提示文字样式 */
.search-result-box.success .matched-tips {
    font-size: 16px;
    color: #555;
    margin: 0;  /* 通过Flex布局统一控制间距 */
}

/* 失败状态提示文字样式 */
.search-result-box.fail .fail-message {
    font-size: 20px;
    color: #dc3545;
    margin: 0; /* 使用Flex间距 */
}

.search-result-box.fail .fail-subtext {
    font-size: 12px;
    color: #555;
    margin: 0;
}

/* =============== 进入访问按钮样式 =============== */
.visit-domain-btn {
    display: inline-block;
    padding: 5px 10px;             /* 调整为更合适的按钮大小 */
    font-size: 16px;               /* 调整此处以改变字体大小 */
    color: #fff;
    background-color: #007bff;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.2s;
    margin-top: 2px;              
}

.visit-domain-btn:hover {
    background-color: #005bb5;
}


/* =============== 关闭按钮统一样式 =============== */
.close-button {
    padding: 8px 12px;           /* 更易点击 */
    font-size: 12px;
    background-color: #ccc;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-top: 5px;            /* 略微间隔 */
}

.close-button:hover {
    background-color: #aaa;
}

/* 闪烁动画效果 */
@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}