/* 滑块验证码整体遮罩 */
* {
    box-sizing: border-box;
}
.captcha-modal{
	position:fixed;
	left:0;top:0;
	width:100%;height:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	background:rgba(0,0,0,.45);
	z-index:999999;
	backdrop-filter:blur(4px);
}

/* 弹窗盒子：从小到大缩放动画 */
.captcha-box{
    position: relative;
	width:380px;
	height: 360px;
	background:#fff;
	border-radius:7px;
	box-shadow:0 12px 35px rgba(0,0,0,.25);
	padding:10px 14px 12px;
	font-family:"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
	animation:captchaZoom .22s ease-out;
}

@keyframes captchaZoom{
	from{transform:scale(.85);opacity:0;}
	to{transform:scale(1);opacity:1;}
}

/* 错误时的左右摇摆 */
.captcha-wrapper.shake{
	animation:shake .4s ease;
}

@keyframes shake{
	0%{transform:translateX(0);}
	20%{transform:translateX(-10px);}
	40%{transform:translateX(10px);}
	60%{transform:translateX(-8px);}
	80%{transform:translateX(8px);}
	100%{transform:translateX(0);}
}

.captcha-wrapper {
    overflow: hidden; /* 防止整体外溢 */
}
/* 顶部状态条 */
.captcha-topbar {
    margin-top: -10px;
    margin-left: -15px;
    width: 120%;
    height: 7px;
    background: #1e9fff; /* 默认蓝色（layui 蓝 / 极验类似蓝） */
    transition: background 0.25s ease;
}

.captcha-topbar.error {
    background: #ff4d4f;  /* 错误时红色 */
}
.captcha-box {
    overflow: hidden; /* 防止图片左移时露出外部区域 */
}

.captcha-header{
	font-size:18px;
	font-weight:600;
	color:#333;
	padding:4px 4px 0;
	text-align: center;
	margin: 10px 0 10px 0;
}

.captcha-img-area{
	position:relative;
	width:330px;
	height:200px;
	margin:8px auto 6px;
	border-radius:6px;
	overflow:hidden;
	background:#f5f5f5;
}

#captchaMain{
	position:absolute;
	left:0;top:0;
	/* 核心增强：明显的浮动阴影 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.45); /* 提升阴影强度和模糊度 */
    z-index: 10; /* 确保它在 mainCanvas 上方 */
}
#captchaBlock{
	position:absolute;
	left:0;top:0;
	/* 核心增强：明显的浮动阴影 */
    z-index: 10;
    filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .45));
}
/* 切换图片时的轻微左滑动画（错误后） */
	/* 错误时：只左右摇晃，不缩放大小 */
.captcha-box.shake{
	animation: captchaShake .4s ease;
}

@keyframes captchaShake{
	0%{transform:translateX(0);}
	20%{transform:translateX(-10px);}
	40%{transform:translateX(10px);}
	60%{transform:translateX(-8px);}
	80%{transform:translateX(8px);}
	100%{transform:translateX(0);}
}

/* 切换图片时：只让图片区域 + 滑块区域左滑一点 */
.captcha-img-area.swap,
.captcha-slider.swap{
	animation: captchaImgSwap 0.5s ease forwards;
}

@keyframes captchaImgSwap{
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}

/* 提示浮层，从图片底部往上弹 */
.captcha-toast{
	position:absolute;
	left:50%;
	bottom:0px;
	width:103%;
	padding:4px 10px;
	font-size:14px;
	text-align:center;
	color:#fff;
	opacity:0;
	pointer-events:none;
	z-index: 999;
}
/* 将整个 CSS 动画时长延长到 1.4s，与你的新 JS 定时器完全同步 */
.captcha-toast.show{
	animation: toastPop 1.4s ease forwards; /* 加上 forwards 保证动画结束后不闪烁复原 */
}

/* 重新分配时间轴比例，让错误信息静止展示的时间大大延长 */
@keyframes toastPop{
	0%   { transform:translate(-50%,10px); opacity:0; }
	12%  { transform:translate(-50%,0);    opacity:1; }     /* 1.4s * 12% ≈ 0.16s 完成淡入 */
	88%  { transform:translate(-50%,0);    opacity:1; }     /* 88% 之前一直保持清晰显示 */
	100% { transform:translate(-50%,-10px); opacity:0; }    /* 最后 12% 的时间执行淡出飘走 */
}

.captcha-toast.success{
	background:#52c41a;
}
.captcha-toast.error{
	background:#ff4d4f;
}

/* 滑块区域 */
.captcha-slider{
	position:relative;
	width:330px;
	height:40px;
	margin:6px auto 4px;
	border-radius:20px;
	background:#dee3eb;
	overflow:hidden;
}
.slider-track{
	position:absolute;
	left:0;top:0;
	height:100%;
	width:0;
	background:linear-gradient(90deg,#cfe5ff,#e6f0ff);
	transition:width .2s;
}

.slider-bar{
	position:absolute;
	left:0;top:0;
	width:40px;height:40px;
	border-radius:50%;
	background:#4c9dff;
	box-shadow:0 0 12px rgba(76,157,255,.6);
	display:flex;
	align-items:center;
	justify-content:center;
	color:#fff;
	cursor:pointer;
	user-select:none;
	transition:background .2s,box-shadow .2s;
}

.slider-bar.success{
	background:#52c41a;
	box-shadow:0 0 10px rgba(82,196,26,.65);
}
.slider-bar.fail{
	background:#ff4d4f;
	box-shadow:0 0 10px rgba(255,77,79,.65);
}

.slider-arrow{
	font-size:18px;
}
.captcha-footer{
	display:flex;
	align-items:center;
	justify-content:space-between;
	margin-top:17px;
}
.footer-left{
	display:flex;
	gap:10px;
}

.footer-btn{
	width: 25px;
    height: 25px;
    border: none;
    background: #ffffff00;
	}
.footer-btn:hover{
	background:#ffffff00;
}

/* 右下角 Holiday 水印更明显 */
.footer-right .captcha-watermark{
	font-size:14px;
	font-weight:600;
	color:#9c9c9c;
	user-select:none;
}
.captcha-holiday_logo {
    display: inline-block;
    width: 130px;
    height: 25px;
    background-image: url(https://holiday.ailcc.com/static/captcha/image/access/sprite.png);
    background-size: 125% 4034%;
    background-repeat: no-repeat;
    vertical-align: middle;
    background-position: 0% 4.7%;
}
.captcha-holiday_close {
    margin-right: 0;
    background-image: url(https://holiday.ailcc.com/static/captcha/image/access/sprite.png);
    background-size: 1054.1666666667% 6137.5%;
    background-position: 0 29.7446514838%;
}
.captcha-holiday_close:hover {
    margin-right: 0;
    background-image: url(https://holiday.ailcc.com/static/captcha/image/access/sprite.png);
    background-size: 1054.1666666667% 6137.5%;
    background-position: 0 27.3982056591%;
    
}
.captcha-holiday_refresh {
    background-image: url(https://holiday.ailcc.com/static/captcha/image/access/sprite.png);
    background-size: 1054.1666666667% 6137.5%;
    background-position: 0 48.5162180814%;
}
.captcha-holiday_refresh:hover {
    background-image: url(https://holiday.ailcc.com/static/captcha/image/access/sprite.png);
    background-size: 1054.1666666667% 6137.5%;
    background-position: 0 46.1697722567%;
}