/* ================================================================
   弹窗广告 · 二次元 / 玻璃质感
   public/plugins/addons/cart_popup/assets/cart_ad.css
   ================================================================ */

#mfc-ad,
#mfc-ad * { box-sizing: border-box; }

#mfc-ad {
    --mfc-a: #ff8fc7;
    --mfc-b: #a78bfa;
    --mfc-c: #7dd3fc;
    --mfc-text: #3b2b47;
    --mfc-adw: 380px;
    position: fixed;
    inset: 0;
    z-index: 99995;
    display: none;
    align-items: center;
    justify-content: center;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
    color: var(--mfc-text);
}
#mfc-ad.mfc-ad-open { display: flex; }

/* 配色主题 */
#mfc-ad.mfc-style-sakura { --mfc-a: #ff8fc7; --mfc-b: #c084fc; --mfc-c: #ffd6e8; }
#mfc-ad.mfc-style-miku   { --mfc-a: #39d0d8; --mfc-b: #6ea8fe; --mfc-c: #d6f6ff; }
#mfc-ad.mfc-style-galaxy { --mfc-a: #a78bfa; --mfc-b: #60a5fa; --mfc-c: #e9e2ff; }
#mfc-ad.mfc-style-mint   { --mfc-a: #6ee7b7; --mfc-b: #38bdf8; --mfc-c: #dcfff1; }
#mfc-ad.mfc-style-amber  { --mfc-a: #fbbf24; --mfc-b: #fb7185; --mfc-c: #ffe9d1; }

/* 位置 */
#mfc-ad.mfc-ad-center      { align-items: center; justify-content: center; }
#mfc-ad.mfc-ad-bottom-right { align-items: flex-end; justify-content: flex-end; padding: 26px; }
#mfc-ad.mfc-ad-bottom-left  { align-items: flex-end; justify-content: flex-start; padding: 26px; }
#mfc-ad.mfc-ad-top          { align-items: flex-start; justify-content: center; padding: 40px 26px 26px; }

/* 遮罩 */
#mfc-ad .mfc-ad-mask {
    position: absolute;
    inset: 0;
    background: rgba(38, 26, 56, .38);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity .3s ease;
}
#mfc-ad[data-mask="0"] .mfc-ad-mask { display: none; }
#mfc-ad.mfc-ad-open .mfc-ad-mask { opacity: 1; }

/* 面板 */
#mfc-ad .mfc-ad-panel {
    position: relative;
    width: var(--mfc-adw);
    max-width: calc(100vw - 32px);
    max-height: 82vh;
    overflow-y: auto;
    padding: 24px 22px 20px;
    border-radius: 24px;

    background: linear-gradient(150deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .66));
    backdrop-filter: blur(20px) saturate(1.8);
    -webkit-backdrop-filter: blur(20px) saturate(1.8);
    border: 1px solid rgba(255, 255, 255, .9);
    box-shadow: 0 30px 70px -20px rgba(80, 60, 120, .5), 0 10px 30px rgba(0, 0, 0, .1), inset 0 1px 0 #fff;

    opacity: 0;
    transform: translateY(18px) scale(.92);
    transition: opacity .3s ease, transform .38s cubic-bezier(.34, 1.5, .64, 1);
}
#mfc-ad.mfc-ad-open .mfc-ad-panel { opacity: 1; transform: translateY(0) scale(1); }

/* 装饰 */
#mfc-ad .mfc-ad-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(26px);
    pointer-events: none;
}
#mfc-ad .mfc-ad-blob-a { width: 150px; height: 150px; background: var(--mfc-a); top: -50px; right: -40px; opacity: .55; }
#mfc-ad .mfc-ad-blob-b { width: 130px; height: 130px; background: var(--mfc-c); bottom: -50px; left: -40px; opacity: .6; }

#mfc-ad .mfc-ad-spark {
    position: absolute;
    color: var(--mfc-a);
    font-size: 14px;
    animation: mfc-ad-twinkle 2.2s ease-in-out infinite;
    pointer-events: none;
}
#mfc-ad .mfc-ad-spark.s1 { top: 16px; left: 18px; }
#mfc-ad .mfc-ad-spark.s2 { top: 34px; right: 30px; animation-delay: .7s; color: var(--mfc-b); }
#mfc-ad .mfc-ad-spark.s3 { bottom: 60px; right: 22px; animation-delay: 1.3s; }
@keyframes mfc-ad-twinkle {
    0%, 100% { opacity: .3; transform: scale(.8) rotate(0deg); }
    50%      { opacity: 1; transform: scale(1.2) rotate(30deg); }
}

/* 关闭按钮 */
#mfc-ad .mfc-ad-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .95);
    background: rgba(255, 255, 255, .7);
    color: var(--mfc-text);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    transition: transform .2s, background .2s;
}
#mfc-ad .mfc-ad-close:hover { transform: rotate(90deg); background: #fff; }

#mfc-ad .mfc-ad-body {
    position: relative;
    z-index: 1;
    /* 内容区给足高度，内容少时弹窗也不会缩成一条细条 */
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ---- 广告内容：人工客服卡片（样式内置，广告 HTML 里不用再写 style） ---- */
#mfc-ad .kf-wrap { text-align: center; }
#mfc-ad .kf-title {
    font-size: 19px;
    font-weight: 900;
    letter-spacing: .5px;
    background: linear-gradient(100deg, #ff8fc7, #a78bfa 55%, #7dd3fc);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
#mfc-ad .kf-sub { margin: 6px 0 14px; font-size: 13px; color: #6f6379; }
#mfc-ad .kf-sub b { color: #ff5d8f; }
#mfc-ad .kf-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 10px;
    border-radius: 16px;
    text-align: left;
    background: rgba(255, 255, 255, .68);
    border: 1px solid rgba(255, 255, 255, .95);
    box-shadow: 0 8px 20px -14px rgba(90, 70, 130, .7);
}
#mfc-ad .kf-label { font-size: 12px; color: #8b8098; }
#mfc-ad .kf-num {
    font-size: 19px;
    font-weight: 900;
    letter-spacing: 1px;
    color: #3b2b47;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    -webkit-user-select: text;
    user-select: text;
    cursor: text;
}
#mfc-ad .kf-btns { display: flex; gap: 6px; flex-shrink: 0; }
#mfc-ad .kf-btn {
    display: inline-block;
    padding: 8px 12px;
    border: none;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: transform .16s, filter .16s;
}
#mfc-ad .kf-btn:active { transform: scale(.96); }
#mfc-ad .kf-primary {
    color: #fff;
    background: linear-gradient(135deg, #ff8fc7, #a78bfa);
    box-shadow: 0 8px 16px -9px #ff8fc7;
}
#mfc-ad .kf-ghost {
    color: #6f6379;
    background: rgba(255, 255, 255, .9);
    border: 1px solid rgba(255, 255, 255, 1);
}
#mfc-ad .kf-tip { margin-top: 10px; font-size: 11.5px; line-height: 1.7; color: #a396ad; }

@media (max-width: 640px) {
    #mfc-ad .kf-card { flex-direction: column; align-items: flex-start; }
    #mfc-ad .kf-btns { width: 100%; }
    #mfc-ad .kf-btn { flex: 1; text-align: center; }
}
.mfc-ad-open-btn {
    --mfc-a: #ff8fc7;
    --mfc-b: #a78bfa;
    position: fixed;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    z-index: 99994;
    padding: 10px 20px;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
    background: linear-gradient(135deg, var(--mfc-a), var(--mfc-b));
    box-shadow: 0 10px 24px -10px var(--mfc-a), inset 0 1px 0 rgba(255, 255, 255, .6);
    animation: mfc-ad-bounce 2.6s ease-in-out infinite;
}
.mfc-ad-open-btn.mfc-style-miku   { --mfc-a: #39d0d8; --mfc-b: #6ea8fe; }
.mfc-ad-open-btn.mfc-style-galaxy { --mfc-a: #a78bfa; --mfc-b: #60a5fa; }
.mfc-ad-open-btn.mfc-style-mint   { --mfc-a: #6ee7b7; --mfc-b: #38bdf8; }
.mfc-ad-open-btn.mfc-style-amber  { --mfc-a: #fbbf24; --mfc-b: #fb7185; }
.mfc-ad-open-btn:hover { filter: brightness(1.07); }
@keyframes mfc-ad-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(-4px); }
}

@media (max-width: 640px) {
    #mfc-ad.mfc-ad-bottom-right,
    #mfc-ad.mfc-ad-bottom-left { padding: 14px; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
    #mfc-ad.mfc-ad-top { padding: calc(14px + env(safe-area-inset-top)) 14px 14px; }
    /* 居中弹窗在手机上占满宽度、高度足够 */
    #mfc-ad.mfc-ad-center { padding: 16px; align-items: center; }

    #mfc-ad .mfc-ad-panel {
        width: 100%;
        max-width: calc(100vw - 28px);
        max-height: 84vh;
        min-height: 42vh;
        padding: 22px 16px calc(16px + env(safe-area-inset-bottom));
        border-radius: 20px;
    }
    #mfc-ad .mfc-ad-body {
        min-height: 34vh;
        font-size: 14.5px;
    }
    #mfc-ad .mfc-ad-close {
        width: 36px; height: 36px; font-size: 21px;
        top: 8px; right: 8px;
    }
    #mfc-ad .mfc-ad-body { font-size: 14px; }
    .mfc-ad-open-btn {
        bottom: calc(22px + env(safe-area-inset-bottom));
        padding: 11px 22px;
        font-size: 14px;
    }
}