/* 卡乐售 - ziqidonglai（紫气东来）PC 模板：首页弹窗公告皮肤
 * 公共组件 static/common/css/site-notice.css 是全站共用的蓝色配色，这里只给本模板覆写成紫色系。
 * 注意：header.php 里 $tplCss 在 $commonCss 之前输出，所以每条覆盖都必须比公共样式多一层
 * .sn-wrap 前缀提权，否则会被后加载的公共样式盖掉。取色沿用本模板自己的紫：
 * 主色 #9c27b0、渐变 #c92ee4→#9c27b0、浅底 #fcedff（见 static/pc/ziqidonglai/css/user.css）。 */

/* 弹层出现时轻微缩放淡入（hidden 移除、display 由 none 变 flex 的瞬间触发一次） */
.sn-wrap:not([hidden]) {
    animation: snSkinIn .18s ease-out;
}
.sn-wrap:not([hidden]) .sn-box {
    animation: snSkinBox .18s ease-out;
}
@keyframes snSkinIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes snSkinBox {
    from { opacity: 0; transform: translateY(10px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

/* 遮罩带一点紫调，比纯黑更贴这个模板 */
.sn-wrap .sn-mask {
    background: rgba(58, 22, 82, .52);
}

.sn-wrap .sn-box {
    border-radius: 16px;
    box-shadow: 0 18px 48px rgba(94, 20, 128, .28);
}

.sn-wrap .sn-head {
    padding: 16px 18px;
    background: linear-gradient(135deg, #c92ee4 0%, #9c27b0 100%);
}
.sn-wrap .sn-tag {
    background: rgba(255, 255, 255, .24);
}
.sn-wrap .sn-title {
    letter-spacing: .5px;
}
.sn-wrap .sn-x:hover {
    background: rgba(255, 255, 255, .26);
}

/* 正文：紫色系灰阶，长公告时上下留白更松一点 */
.sn-wrap .sn-body {
    padding: 20px 20px 8px;
    color: #3f3350;
}
.sn-wrap .sn-body p:last-child {
    margin-bottom: 0;
}

.sn-wrap .sn-foot {
    padding: 14px 18px 18px;
    border-top: 1px solid #f3e8fb;
}
.sn-wrap .sn-tip {
    color: #a892b8;
}

.sn-wrap .sn-btn {
    padding: 9px 24px;
    background: linear-gradient(135deg, #c92ee4 0%, #9c27b0 100%);
    box-shadow: 0 6px 16px rgba(156, 39, 176, .26);
    transition: filter .2s, box-shadow .2s, transform .2s;
}
.sn-wrap .sn-btn:hover {
    filter: brightness(1.06);
    box-shadow: 0 8px 20px rgba(156, 39, 176, .32);
    transform: translateY(-1px);
}
.sn-wrap .sn-btn:active {
    transform: none;
    box-shadow: 0 4px 12px rgba(156, 39, 176, .24);
}
.sn-wrap .sn-btn:focus-visible {
    outline: 2px solid #9c27b0;
    outline-offset: 2px;
}