/* ============================================
   BunnyLink 方案類型說明（可收合）
   商品頁短描述之後，對應下方方案選擇器的三個 Tab
   配色沿用 sc-icg-esim-plan-selector 的設計 token
   每張卡片的標題、強調字、熱點標記統一使用該方案的主色
   ============================================ */

.bl-plan-notes {
    --bl-note-text: #334155;
    --bl-note-strong: #0f172a;
    --bl-note-toggle: #2563eb;

    margin: 0 0 1.5em;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC",
        "Noto Sans TC", "Microsoft JhengHei", sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ---- 收合開關 ---- */
.bl-plan-notes__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    color: var(--bl-note-strong);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.5;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

/* 移除瀏覽器預設的展開三角形 */
.bl-plan-notes__toggle::-webkit-details-marker {
    display: none;
}

.bl-plan-notes__toggle::marker {
    content: "";
}

.bl-plan-notes__toggle:hover,
.bl-plan-notes__toggle:focus-visible {
    border-color: var(--bl-note-toggle);
    background: #eff6ff;
    color: var(--bl-note-toggle);
}

.bl-plan-notes[open] .bl-plan-notes__toggle {
    border-color: var(--bl-note-toggle);
    background: #eff6ff;
    color: var(--bl-note-toggle);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.bl-plan-notes__toggle-text {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

/* 標題前的資訊圖示 */
.bl-plan-notes__toggle-text::before {
    content: "i";
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: var(--bl-note-toggle);
    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 12px;
    font-style: italic;
    font-weight: 700;
    line-height: 1;
}

/* 展開箭頭 */
.bl-plan-notes__toggle-arrow {
    flex: none;
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.2s ease;
}

.bl-plan-notes[open] .bl-plan-notes__toggle-arrow {
    transform: translateY(1px) rotate(-135deg);
}

/* ---- 展開內容 ---- */
.bl-plan-notes__panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--bl-note-toggle);
    border-top: 0;
    border-radius: 0 0 10px 10px;
    background: #fff;
}

/* 支援的瀏覽器加上展開動畫（漸進增強，不支援也不影響功能） */
@supports selector(::details-content) {
    .bl-plan-notes {
        interpolate-size: allow-keywords;
    }

    .bl-plan-notes::details-content {
        height: 0;
        overflow: hidden;
        opacity: 0;
        transition: height 0.25s ease, opacity 0.25s ease, content-visibility 0.25s allow-discrete;
    }

    .bl-plan-notes[open]::details-content {
        height: auto;
        opacity: 1;
    }
}

/* ---- 卡片 ---- */
.bl-plan-note {
    padding: 11px 14px 11px 15px;
    border: 1px solid var(--bl-note-border);
    border-left: 3px solid var(--bl-note-accent);
    border-radius: 8px;
    background: var(--bl-note-bg);
}

/* ---- 三種方案的色彩身分 ---- */
.bl-plan-note--unlimited {
    --bl-note-accent: #2563eb;
    --bl-note-bg: #eff6ff;
    --bl-note-border: #dbeafe;
    --bl-note-badge-bg: #dbeafe;
}

.bl-plan-note--light {
    --bl-note-accent: #0891b2;
    --bl-note-bg: #ecfeff;
    --bl-note-border: #cffafe;
    --bl-note-badge-bg: #cffafe;
}

.bl-plan-note--fixed {
    --bl-note-accent: #7c3aed;
    --bl-note-bg: #f5f3ff;
    --bl-note-border: #ede9fe;
    --bl-note-badge-bg: #ede9fe;
}

/* ---- 標題 ---- */
.bl-plan-note__title {
    margin: 0 0 4px;
    color: var(--bl-note-accent);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.01em;
}

/* ---- 說明內文 ---- */
.bl-plan-note__body {
    margin: 0;
    color: var(--bl-note-text);
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.75;
}

.bl-plan-note__body strong {
    color: var(--bl-note-strong);
    font-weight: 700;
}

/* ---- 熱點分享標記（顏色跟隨所屬方案，狀態靠 ✓ / ✕ 區分） ---- */
.bl-plan-note__hotspot {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 7px;
    padding: 2px 9px;
    border: 1px solid var(--bl-note-accent);
    border-radius: 999px;
    background: var(--bl-note-badge-bg);
    color: var(--bl-note-accent);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.7;
    white-space: nowrap;
}

.bl-plan-note__hotspot::before {
    content: "✓";
    font-size: 11px;
    font-weight: 700;
}

/* 不可分享：同色系改為留白底，僅以符號與填色深淺區分 */
.bl-plan-note__hotspot.is-off {
    background: transparent;
    border-style: dashed;
}

.bl-plan-note__hotspot.is-off::before {
    content: "✕";
}

/* ---- 手機 ---- */
@media (max-width: 689.98px) {
    .bl-plan-notes__toggle {
        padding: 10px 12px;
        font-size: 14px;
    }

    .bl-plan-notes__panel {
        padding: 8px;
        gap: 7px;
    }

    .bl-plan-note {
        padding: 10px 12px 10px 13px;
    }

    .bl-plan-note__title {
        font-size: 14.5px;
    }

    .bl-plan-note__body {
        font-size: 13px;
        line-height: 1.7;
    }
}