.sp-hidden{display:none!important}
.sp-visible{display:block!important}

#site-page-layer{
	position:fixed;top:0;left:0;width:100%;height:100%;
	background:rgba(0,0,0,.6);display:none;z-index:2147483646!important
}

#site-interaction-wrapper{
	position:fixed;top:50%;left:50%;
	transform:translate(-50%,-50%) scale(0.95);
	-webkit-transform:translate(-50%,-50%) scale(0.95);
	background:#fff;width:95%;max-width:520px;border-radius:16px;
	box-shadow:0 15px 35px rgba(0,0,0,.25);
	opacity:0;visibility:hidden;
	transition:all .3s cubic-bezier(0.175,0.885,0.32,1.275);
	z-index:2147483647!important
}

#site-interaction-wrapper.active-state{
	opacity:1;visibility:visible;
	transform:translate(-50%,-50%) scale(1);
	-webkit-transform:translate(-50%,-50%) scale(1)
}

.box-accent-bar{
	height:4px;background:#2271b1;
	border-radius:16px 16px 0 0
}

.box-header-text{flex:1}

.box-label{
	margin:0 0 5px 0;font-size:11px;color:#999;
	font-weight:600;text-transform:uppercase;letter-spacing:0.5px
}

.box-divider{
	height:1px;background:#f0f0f0;margin:0 26px
}

.box-header{
	padding:20px 26px 16px;border-bottom:none;
	display:flex;justify-content:space-between;align-items:flex-start;
	background:#fff;border-radius:0
}

.box-header h3{
	margin:0;font-size:18px;color:#333;font-weight:700
}

#action-close-trigger{
	width:32px;height:32px;min-width:32px;
	border-radius:50%;background:#f0f0f0;
	display:flex;align-items:center;justify-content:center;
	cursor:pointer;font-size:20px;color:#555;
	line-height:1;transition:background .2s,color .2s;
	padding:0;margin-top:2px;flex-shrink:0
}

#action-close-trigger:hover{background:#ffebeb;color:#ff4d4f}

.box-body{padding:20px 26px 24px}

.box-actions{display:flex;gap:12px;margin-bottom:15px}

.box-actions button{
	flex:1;padding:14px;font-size:15px;border:none;
	border-radius:10px;cursor:pointer;color:#fff;font-weight:600;
	transition:transform .1s,opacity .2s;
	display:flex;align-items:center;justify-content:center;gap:7px
}

.box-actions button:active{transform:scale(0.98)}
.box-actions button:hover{opacity:0.9}
.box-actions button:first-child{background:#2271b1}
.box-actions button:last-child{background:#00a32a}

.box-notes{
	border-top:1px solid #f5f5f5;padding-top:11px;margin-top:4px
}

.box-footer-note{
	font-size:12px;text-align:center;margin:0 0 6px 0;
	color:#888;font-style:italic
}

.box-privacy-note{
	font-size:11px;text-align:center;color:#bbb;margin:0;
	display:flex;align-items:center;justify-content:center;gap:5px
}

body.interaction-active{overflow:hidden}

#page-bottom-notice{
	position:fixed;bottom:0;left:0;width:100%;
	background:#fff;border-top:4px solid #2271b1;
	box-shadow:0 -4px 20px rgba(0,0,0,0.1);
	padding:12px 20px;z-index:2147483647!important;
	display:flex;justify-content:space-between;align-items:center;
	transform:translateY(120%);-webkit-transform:translateY(120%);
	transition:transform 0.4s ease-out;box-sizing:border-box
}

#page-bottom-notice.is-visible{
	transform:translateY(0);-webkit-transform:translateY(0)
}

.notice-inner{
	display:flex;align-items:center;
	justify-content:center;width:100%;gap:15px
}

.notice-text{font-weight:700;color:#333;font-size:15px}

.notice-btn{
	background:#d63638;color:#fff;padding:8px 20px;
	border-radius:4px;text-decoration:none;font-weight:bold;
	font-size:14px;border:none;cursor:pointer;transition:background .2s
}

.notice-btn:hover{background:#b32d2e}

#notice-close-trigger{
	font-size:22px;color:#aaa;cursor:pointer;
	margin-left:15px;line-height:1;padding:10px
}

#notice-close-trigger:hover{color:#333}

@media (max-width:480px){
	#site-interaction-wrapper{max-width:90%}
	.box-header{padding:14px 18px 12px}
	.box-header h3{font-size:16px}
	.box-body{padding:16px 18px 18px}
	.box-divider{margin:0 18px}
	.box-actions{flex-direction:column;gap:10px}
	.box-actions button{width:100%;padding:12px;font-size:14px}
	.notice-text{font-size:13px}
	.notice-btn{padding:6px 12px;font-size:12px}
	.notice-inner{flex-direction:column;gap:8px}
	#notice-close-trigger{margin-left:0;position:absolute;top:5px;right:5px}
}