/* ==============================================
   广告组件统一样式（top/footer/pop 三组件通用+专属）
   与ad.js完美联动，保留所有原有设计细节
   ============================================== */
/* ---------------------- 全局通用基础样式（所有广告共用） ---------------------- */
/* 所有广告外层容器基础标识：JS统一识别控制显示/隐藏 */
.ad-wrapper {
    margin: 0;
    padding: 0;
    transition: all 0.3s ease-in-out !important;
}
/* 所有广告关闭按钮基础重置：清除默认样式，避免浏览器兼容问题 */
.ad-close-btn {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    cursor: pointer !important;
    z-index: 9999 !important; /* 按钮层级最高，不被遮挡 */
    transition: all 0.3s ease-in-out !important;
}
/* 按钮内容容器：统一居中布局，适配旋转/普通展示 */
.ad-close-btn .btn-content {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
/* 广告隐藏通用类：JS添加后触发平滑隐藏，三组件通用动画逻辑 */
.ad-hide {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: all 0.3s ease-in-out !important;
}

/* ---------------------- 头部广告（top-ad）专属样式 ---------------------- */
/* 外层容器：绝对定位父级+100%宽度+溢出隐藏+专属层级 */
.top-ad-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    z-index: 9998; /* 高于底部广告，低于弹窗 */
}
/* 广告主体容器：居中+背景+栅格重置 */
.ad-container--top {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    background-color: #fff;
    transition: all 0.3s ease;
    overflow: hidden;
}
/* 重置栅格样式：取消默认边距padding，保证图片居中无偏移 */
.ad-container--top .row,
.ad-container--top .col-lg-12 {
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    justify-content: center;
}
/* 广告链接：inline-block适配图片原宽+居中，不强制拉伸 */
.ad-container--top a {
    display: inline-block !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 auto !important;
}
/* 广告图片：不拉伸+自适应+居中，保留原比例 */
.ad-container--top img {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 0 auto !important;
}
/* 关闭按钮：右侧垂直居中+旋转90度+黑底白字+30px宽度 */
.top-ad-wrapper .ad-close-btn.fixed-right {
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 100%;
    background-color: #000;
    color: #fff;
    border-radius: 0;
    /* 初始隐藏：JS添加ad-close-visible后显示 */
    opacity: 0;
    pointer-events: none;
}
/* 按钮显示类：强制覆盖初始隐藏，JS动态添加 */
.top-ad-wrapper .ad-close-btn.fixed-right.ad-close-visible {
    opacity: 1 !important;
    pointer-events: auto !important;
}
/* 按钮内容旋转90度，文字不换行 */
.top-ad-wrapper .ad-close-btn.fixed-right .btn-content {
    transform: rotate(90deg);
    transform-origin: center center;
    white-space: nowrap;
}
/* 叉号样式优化：更大字号+右侧间距 */
.top-ad-wrapper .ad-close-btn .close-icon {
    font-size: 16px;
    margin-right: 4px;
}
/* 按钮hover效果：深灰背景+半透明，丝滑过渡 */
.top-ad-wrapper .ad-close-btn.fixed-right:hover {
    background-color: #333;
    opacity: 0.8 !important;
    transition: all 0.2s ease;
}
/* 头部广告隐藏专属：高度归0+清除内边距，实现折叠效果 */
.ad-container--top.ad-hide {
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ---------------------- 底部广告（footer-ad）专属样式 ---------------------- */
/* 外层容器：绝对定位父级+100%宽度+溢出隐藏+底部固定+专属层级 */
.footer-ad-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    bottom: 0;
    left: 0;
    z-index: 9997; /* 低于头部广告，避免遮挡 */
    background: #fff; /* 防止透明穿透页面内容 */
    border-top: 1px solid #eee; /* 顶部边框，区分页面 */
}
/* 广告主体容器：和头部通用，仅继承样式 */
.ad-container--footer {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    background-color: #fff;
    transition: all 0.3s ease;
    overflow: hidden;
}
/* 重置栅格样式：和头部完全一致，保证样式统一 */
.ad-container--footer .row,
.ad-container--footer .col-lg-12 {
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    justify-content: center;
}
/* 广告链接+图片：和头部通用，保证图片展示效果一致 */
.ad-container--footer a {
    display: inline-block !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 auto !important;
}
.ad-container--footer img {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 0 auto !important;
}
/* 关闭按钮：和头部完全一致，旋转90度+黑底白字 */
.footer-ad-wrapper .ad-close-btn.fixed-right {
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 100%;
    background-color: #000;
    color: #fff;
    border-radius: 0;
    opacity: 0;
    pointer-events: none;
}
.footer-ad-wrapper .ad-close-btn.fixed-right.ad-close-visible {
    opacity: 1 !important;
    pointer-events: auto !important;
}
.footer-ad-wrapper .ad-close-btn.fixed-right .btn-content {
    transform: rotate(90deg);
    transform-origin: center center;
    white-space: nowrap;
}
.footer-ad-wrapper .ad-close-btn .close-icon {
    font-size: 16px;
    margin-right: 4px;
}
.footer-ad-wrapper .ad-close-btn.fixed-right:hover {
    background-color: #333;
    opacity: 0.8 !important;
    transition: all 0.2s ease;
}
/* 底部广告隐藏专属：高度归0+清除内边距，折叠效果 */
.ad-container--footer.ad-hide {
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* 页面页脚兜底：避免底部广告遮挡页面内容，保留原有85px内边距 */
footer {
    padding-bottom: 85px !important;
}

/* ---------------------- 弹窗广告（pop-ad）专属样式 ---------------------- */
/* 外层遮罩容器：全屏固定+居中+半透明黑底+默认隐藏（JS控制显示） */
.pop-ad-wrapper {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99999; /* 弹窗层级最高，覆盖所有页面内容 */
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    align-items: center;
    justify-content: center;
}
/* 弹窗图片容器：850*500固定尺寸+相对定位（按钮锚点）+溢出隐藏 */
.pop-ad-wrapper .ad-container--pop {
    width: 850px;
    height: 500px;
    overflow: hidden;
    position: relative !important; /* 强制作为按钮绝对定位父级，优先级最高 */
    margin: 0;
    padding: 0;
    z-index: 1; /* 低于按钮，保证按钮可点击 */
}
/* 弹窗图片：撑满容器+不变形，保留cover效果（原有设计） */
.pop-ad-wrapper .ad-container--pop img {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
}
/* 弹窗关闭按钮：30*30纯黑圆形+图片内部右上角10px+白字叉号 */
.pop-ad-wrapper .ad-close-btn {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    width: 30px !important;
    height: 30px !important;
    line-height: 30px !important;
    text-align: center !important;
    background: #000000 !important;
    border-radius: 50% !important;
    font-size: 18px !important;
    color: #ffffff !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}
/* 弹窗按钮：仅显示叉号，隐藏close文字（不破坏DOM结构） */
.pop-ad-wrapper .ad-close-btn .btn-content span:not(.close-icon) {
    display: none !important;
}
/* 弹窗叉号样式优化：加粗，保证视觉效果 */
.pop-ad-wrapper .ad-close-btn .close-icon {
    font-weight: bold !important;
    font-size: 18px !important;
}
/* 弹窗按钮hover效果：深灰背景，轻量优化 */
.pop-ad-wrapper .ad-close-btn:hover {
    background: #333333 !important;
}
/* 弹窗隐藏专属动画：缩放+渐变，比普通隐藏更有层次感 */
.pop-ad-wrapper.ad-hide {
    transform: translate(-50%, -50%) scale(0.95) !important;
}

/* ---------------------- 广告动画特效+兜底样式（可选保留） ---------------------- */
/* 弹窗淡入动画：可选，若需要弹窗显示时有淡入效果，JS可添加该类 */
@keyframes adFadeIn {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
/* 弹窗淡出动画：和ad-hide联动，强化隐藏效果 */
@keyframes adFadeOut {
    from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    to { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
}
.ad-fade-out {
    animation: adFadeOut 0.3s ease-in-out forwards !important;
}
/* 清除fixed-right样式干扰：仅针对弹窗，避免头部/底部按钮旋转失效 */
.pop-ad-wrapper .fixed-right {
    all: unset !important;
    position: absolute !important;
}