/* ============================================================
   css/companionship-banner.css — 主界面陪伴天数横幅
   韩系法式唯美风：暖米纸底 + 细金线 + 花枝 + 花瓣粒子（DESIGN-SYSTEM.md）
   铁律：不凸起果冻感（多层浅阴影而非大投影）；渐变文字禁用（纯色）；
       只靠右上/右侧圆标收展，点击区域仅数字+下行。
   ★ 颜色跟随主题：所有彩色元素用 --accent 系列（主题驱动），
     纸底用 --bg-primary/--bg-secondary（主题驱动）；里程碑日保留金色庆典样式。
   ============================================================ */

#companionship-banner {
    flex-shrink: 0;
    padding: 0 14px 6px;
    z-index: 1;
}

.cp-banner {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    padding: 0;
    height: auto;
    /* 平整纸面（无圆形高光热点=无塑料立体感）：只留极轻微上浅下深的纸色，颜色跟主题 */
    background: linear-gradient(180deg, var(--bg-secondary, #FDFAF6) 0%, var(--bg-primary, #F9F5EF) 100%);
    border: 1px solid var(--border, rgba(180, 170, 155, 0.22));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 1px 2px rgba(30, 28, 26, 0.03),
        0 2px 8px rgba(30, 28, 26, 0.04);
    transition: height 0.45s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease;
    animation: cpBannerIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* 大内容区 */
.cp-full {
    position: relative;
    padding: 16px 20px 18px;
    text-align: center;
    opacity: 1;
    transition: opacity 0.28s ease;
}
.cp-banner.cp-collapsed .cp-full { opacity: 0; pointer-events: none; }

/* ---- 折叠细条：文字贴左，只有右侧圆标可点 ---- */
.cp-collapsed-row {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding-left: 16px;
    color: var(--text-secondary, #8A8278);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
    -webkit-tap-highlight-color: transparent;
}
.cp-banner.cp-collapsed .cp-collapsed-row { opacity: 1; pointer-events: auto; }
.cp-c-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent, #C9A8A8);
    flex-shrink: 0;
}
.cp-banner.cp-milestone .cp-c-dot { background: var(--gold-dark, #A89050); }
.cp-c-text {
    font-family: var(--font-body, 'Noto Serif SC', 'STSong', serif);
    font-size: 13px;
    letter-spacing: 1.5px;
    color: var(--text-secondary, #8A8278);
}
.cp-c-num {
    font-family: var(--font-display, 'Playfair Display', Georgia, serif);
    font-style: italic;
    font-size: 17px;
    font-weight: 500;
    color: var(--accent-hover, var(--accent, #A88080));
    padding: 0 2px;
}
.cp-banner.cp-milestone .cp-c-num { color: var(--gold-dark, #A89050); }

/* ---- 收展圆标（两种状态共用外观） ---- */
.cp-collapse-btn {
    position: absolute;
    width: 24px;
    height: 24px;
    border: 1px solid var(--accent, #C4A86A);
    border: 1px solid color-mix(in srgb, var(--accent, #C4A86A) 50%, transparent);
    border-radius: 50%;
    background: var(--surface-solid, #FFFFFF);
    color: var(--accent, #C4A86A);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 3;
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(30,28,26,0.04));
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.cp-collapse-btn:hover { border-color: var(--accent, #C4A86A); background: color-mix(in srgb, var(--accent, #C4A86A) 8%, transparent); }
.cp-collapse-btn:active { transform: scale(0.88); }
/* 展开态：固定在右上角（贴右缘，甲方要求：就算挡着下面的花枝图案也无所谓） */
.cp-full > .cp-collapse-btn {
    top: 8px;
    right: 10px;
}
/* 折叠态：细条内垂直居中，与展开态同一水平位置（收展按钮固定在同一处，不跳位） */
.cp-collapsed-row .cp-collapse-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}
.cp-collapsed-row .cp-collapse-btn:active { transform: translateY(-50%) scale(0.88); }

@keyframes cpBannerIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- 里程碑日：金色细线描边 + 收敛的纸面金（不做发光体） ---- */
.cp-banner.cp-milestone {
    border-color: rgba(196, 168, 106, 0.5);
    background:
        linear-gradient(180deg, rgba(253, 249, 240, 0.97) 0%, rgba(246, 238, 224, 0.97) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 251, 240, 0.7),
        0 0 16px rgba(196, 168, 106, 0.08),
        0 1px 2px rgba(30, 28, 26, 0.03),
        0 2px 8px rgba(30, 28, 26, 0.04);
}
.cp-banner.cp-milestone::before {
    content: '';
    position: absolute;
    inset: -40%;
    background: radial-gradient(closest-side, rgba(196, 168, 106, 0.07), transparent 70%);
    animation: cpGlow 3.2s ease-in-out infinite;
    pointer-events: none;
}
@keyframes cpGlow {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.04); }
}

/* ---- 顶部装饰区（不响应点击） ---- */
.cp-topbar {
    position: relative;
    padding-top: 2px;
    min-height: 34px;
}
.cp-flower {
    position: absolute;
    top: 4px;
    width: 40px;
    height: 40px;
    color: var(--accent, #C9A8A8);
    pointer-events: none;
}
.cp-flower-l { left: 8px; }
.cp-flower-r { right: 8px; transform: scaleX(-1); }
.cp-banner.cp-milestone .cp-flower { color: var(--gold, #C4A86A); }

.cp-en {
    font-family: var(--font-display, 'Playfair Display', Georgia, serif);
    font-style: italic;
    font-size: 12px;
    letter-spacing: 3px;
    color: var(--accent, #C9A8A8);
    line-height: 1.4;
}
.cp-banner.cp-milestone .cp-en { color: var(--gold, #C4A86A); }

/* ---- 丝带（里程碑） ---- */
.cp-ribbon {
    display: inline-block;
    margin: 8px auto 2px;
    padding: 3px 16px;
    border-radius: 10px;
    background: var(--gold, #C4A86A);
    color: #fff;
    font-family: var(--font-body, 'Noto Serif SC', 'STSong', serif);
    font-size: 11px;
    letter-spacing: 2px;
    box-shadow: var(--shadow-sm, 0 2px 6px rgba(30,28,26,0.06));
    animation: cpRibbonPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s both;
}
@keyframes cpRibbonPop {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}

/* ---- 可点击修改日期区：大数字 + 下面那一排 ---- */
.cp-edit-zone {
    position: relative;
    margin-top: 6px;
    padding: 6px 10px 2px;
    border-radius: 14px;
    cursor: pointer;
    transition: background 0.25s ease;
    -webkit-tap-highlight-color: transparent;
}
.cp-edit-zone:hover { background: color-mix(in srgb, var(--accent, #C9A8A8) 6%, transparent); }
.cp-edit-zone:active { background: color-mix(in srgb, var(--accent, #C9A8A8) 10%, transparent); }
.cp-banner.cp-milestone .cp-edit-zone:hover { background: rgba(196, 168, 106, 0.06); }
.cp-banner.cp-milestone .cp-edit-zone:active { background: rgba(196, 168, 106, 0.10); }

.cp-num-row {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    margin-top: 2px;
}
.cp-num {
    font-family: var(--font-display, 'Playfair Display', Georgia, serif);
    font-size: 58px;
    line-height: 1.05;
    font-weight: 500;
    color: var(--accent-hover, var(--accent, #A88080));
    letter-spacing: 1px;
}
.cp-banner.cp-milestone .cp-num { color: var(--gold-dark, #A89050); }
.cp-unit {
    font-family: var(--font-body, 'Noto Serif SC', 'STSong', serif);
    font-size: 15px;
    color: var(--text-secondary, #8A8278);
    letter-spacing: 2px;
}

/* ---- 分隔细线 ---- */
.cp-line {
    width: 44px;
    height: 1px;
    margin: 8px auto 6px;
    background: linear-gradient(90deg, transparent, var(--accent, #C9A8A8), transparent);
    opacity: 0.6;
}
.cp-banner.cp-milestone .cp-line {
    background: linear-gradient(90deg, transparent, var(--gold, #C4A86A), transparent);
}

/* ---- 中文主句 ---- */
.cp-text {
    font-family: var(--font-body, 'Noto Serif SC', 'STSong', serif);
    font-size: 14px;
    color: var(--text-primary, #4A4238);
    letter-spacing: 2px;
}
.cp-sub {
    margin-top: 4px;
    font-size: 11px;
    color: var(--text-muted, #BFB8AE);
    letter-spacing: 1px;
}

/* ---- 花瓣粒子 ---- */
.cp-petals {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.cp-petal {
    position: absolute;
    top: -18px;
    width: 9px;
    height: 12px;
    border-radius: 60% 60% 50% 50% / 70% 70% 40% 40%;
    opacity: 0;
    animation: cpFall linear infinite;
}
@keyframes cpFall {
    0%   { transform: translateY(-16px) rotate(0deg);   opacity: 0; }
    8%   { opacity: 0.5; }
    50%  { transform: translateY(120px) rotate(220deg); opacity: 0.45; }
    100% { transform: translateY(280px) rotate(440deg); opacity: 0; }
}

/* ---- 隐藏的日期输入（datepicker 锚点） ---- */
.cp-date-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 2px;
    opacity: 0;
    pointer-events: none;
    border: 0;
    padding: 0;
}

/* ---- 首次引导卡 ---- */
.cp-guide-overlay {
    position: absolute;
    inset: 0;
    z-index: 1500;
    background: rgba(74, 66, 56, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: cpGuideFade 0.25s ease both;
}
@keyframes cpGuideFade { from { opacity: 0; } to { opacity: 1; } }
.cp-guide-card {
    width: 280px;
    max-width: 86%;
    border-radius: 18px;
    padding: 26px 22px 20px;
    text-align: center;
    background: var(--surface-solid, #FFFFFF);
    border: 1px solid var(--border, rgba(180, 170, 155, 0.22));
    box-shadow: var(--shadow-lg, 0 8px 32px rgba(30,28,26,0.10));
    animation: cpGuidePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes cpGuidePop { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }
.cp-guide-flower { color: var(--accent, #C9A8A8); margin-bottom: 8px; }
.cp-guide-title {
    font-family: var(--font-body, 'Noto Serif SC', 'STSong', serif);
    font-size: 17px;
    letter-spacing: 3px;
    color: var(--text-primary, #4A4238);
    margin-bottom: 10px;
}
.cp-guide-text {
    font-size: 13px;
    line-height: 1.8;
    color: var(--text-secondary, #8A8278);
    margin-bottom: 18px;
}
.cp-guide-btn {
    border: 0;
    border-radius: 16px;
    padding: 9px 34px;
    background: var(--accent, #C9A8A8);
    color: #fff;
    font-family: var(--font-body, 'Noto Serif SC', 'STSong', serif);
    font-size: 14px;
    letter-spacing: 2px;
    cursor: pointer;
    box-shadow: var(--shadow-sm, 0 2px 6px rgba(30,28,26,0.06));
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease;
}
.cp-guide-btn:hover { background: var(--accent-hover, #BA9696); }
.cp-guide-btn:active { transform: scale(0.95); }

/* ---- 暗色模式适配（跟随主题的 data-theme-mode，而非系统偏好） ---- */
[data-theme-mode="dark"] .cp-banner {
    background:
        linear-gradient(180deg, var(--bg-secondary, #242A3A) 0%, var(--bg-primary, #1E2432) 100%);
    border-color: var(--border, rgba(180, 160, 140, 0.14));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 1px 2px rgba(0, 0, 0, 0.25),
        0 2px 8px rgba(0, 0, 0, 0.28);
}
[data-theme-mode="dark"] .cp-banner.cp-milestone {
    border-color: rgba(196, 168, 106, 0.35);
    background:
        linear-gradient(180deg, rgba(50, 45, 36, 0.96) 0%, rgba(39, 34, 27, 0.96) 100%);
}
[data-theme-mode="dark"] .cp-text { color: var(--text-primary, #D8CFC4); }
[data-theme-mode="dark"] .cp-sub { color: var(--text-muted, #8E8578); }
[data-theme-mode="dark"] .cp-unit { color: var(--text-secondary, #B3A99B); }
[data-theme-mode="dark"] .cp-c-text { color: var(--text-secondary, #B3A99B); }
[data-theme-mode="dark"] .cp-num { color: var(--accent-hover, var(--accent, #D4B8B8)); }
[data-theme-mode="dark"] .cp-banner.cp-milestone .cp-num { color: #D4B86A; }
[data-theme-mode="dark"] .cp-collapse-btn { background: var(--surface-solid, #2A2420); border-color: color-mix(in srgb, var(--accent, #D4B86A) 45%, transparent); color: var(--accent, #D4B86A); }
[data-theme-mode="dark"] .cp-edit-zone:hover { background: color-mix(in srgb, var(--accent, #D4B8B8) 8%, transparent); }
[data-theme-mode="dark"] .cp-guide-card { background: var(--surface-solid, #2A2420); border-color: rgba(180, 160, 140, 0.16); }
[data-theme-mode="dark"] .cp-guide-title { color: var(--text-primary, #E6DDD2); }
[data-theme-mode="dark"] .cp-guide-text { color: var(--text-secondary, #B3A99B); }