/* ============================================================
 *  PharmDecision v2 — Frontend cards (v2.1.0)
 *  支援 8 個 preset + 徽章列
 * ============================================================ */

.pd2-card {
    box-sizing: border-box;
    max-width: 100%;
    color: #1a2420;
    font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.7;
}
.pd2-card *, .pd2-card *::before, .pd2-card *::after { box-sizing: border-box; }

/* ── Prose（內容區）排版 ──────────────────── */
.pd2-prose > *:first-child { margin-top: 0; }
.pd2-prose > *:last-child  { margin-bottom: 0; }

.pd2-prose h1 { font-size: 26px; font-weight: 700; margin: 14px 0 10px; line-height: 1.3; }
.pd2-prose h2 { font-size: 22px; font-weight: 700; margin: 22px 0 10px; line-height: 1.35; }
.pd2-prose h3 { font-size: 18px; font-weight: 600; margin: 18px 0 8px; }
.pd2-prose h4 {
    font-size: 14px; font-weight: 600; margin: 16px 0 6px;
    color: #6b8078; text-transform: uppercase; letter-spacing: .04em;
}

.pd2-prose p  { margin: 0 0 12px; font-size: 15px; }
.pd2-prose ul, .pd2-prose ol { margin: 0 0 12px; padding-left: 24px; }
.pd2-prose li { margin: 4px 0; }

.pd2-prose blockquote {
    border-left: 3px solid var(--pd2-accent, #54BE74);
    padding: 8px 16px; margin: 14px 0;
    background: rgba(0, 0, 0, .03);
    color: inherit;
    border-radius: 0 6px 6px 0;
}

.pd2-prose code {
    background: rgba(0, 0, 0, .06); padding: 2px 6px; border-radius: 4px;
    font-size: .9em; font-family: ui-monospace, monospace;
}
.pd2-prose pre {
    background: #1a2420; color: #e7f3ec;
    padding: 14px 18px; border-radius: 8px; overflow-x: auto; margin: 14px 0;
}
.pd2-prose pre code { background: transparent; padding: 0; color: inherit; }

.pd2-prose hr { border: none; border-top: 1px solid rgba(0, 0, 0, .1); margin: 22px 0; }
.pd2-prose a {
    color: var(--pd2-accent, #54BE74);
    text-decoration: underline;
}
.pd2-prose mark { background: #fff3a8; padding: 0 2px; border-radius: 2px; }

/* ── 表格 ─────────────────────────────────── */
.pd2-prose .pd2-table {
    width: 100%;
    border-collapse: collapse;
    margin: 14px 0;
    font-size: 14px;
    overflow-x: auto;
    display: table;
}
.pd2-prose .pd2-table th,
.pd2-prose .pd2-table td {
    border: 1px solid rgba(0,0,0,.1);
    padding: 8px 12px;
    text-align: left;
    vertical-align: top;
    line-height: 1.5;
}
.pd2-prose .pd2-table th {
    background: rgba(0,0,0,.04);
    font-weight: 600;
    color: rgba(0,0,0,.8);
}
.pd2-prose .pd2-table tr:nth-child(even) td {
    background: rgba(0,0,0,.02);
}
.pd2-prose .pd2-table .pd2-th-align-center,
.pd2-prose .pd2-table .pd2-td-align-center { text-align: center; }
.pd2-prose .pd2-table .pd2-th-align-right,
.pd2-prose .pd2-table .pd2-td-align-right { text-align: right; }
/* 在小螢幕用 wrapper 滾動 */
@media (max-width: 600px) {
    .pd2-prose .pd2-table {
        font-size: 13px;
    }
    .pd2-prose .pd2-table th,
    .pd2-prose .pd2-table td {
        padding: 6px 8px;
    }
}

/* ── 徽章列（給 header / bottom_line 用） ──── */
.pd2-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0;
}
.pd2-badge {
    display: inline-flex;
    align-items: stretch;
    border-radius: 999px;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 500;
    border: 1px solid transparent;
}
.pd2-badge-label,
.pd2-badge-value {
    padding: 4px 10px;
    display: inline-flex;
    align-items: center;
}
.pd2-badge-label {
    background: rgba(0,0,0,.08);
    color: rgba(0,0,0,.6);
    font-weight: 600;
}
.pd2-badge-value {
    background: rgba(0,0,0,.04);
    color: rgba(0,0,0,.85);
}
/* badge variant 顏色 */
.pd2-badge--default { /* 上面 default 已設定 */ }
.pd2-badge--green   .pd2-badge-value { background: #d0e8d8; color: #1d6f3a; }
.pd2-badge--green   .pd2-badge-label { background: #b5e0c5; color: #1d6f3a; }
.pd2-badge--amber   .pd2-badge-value { background: #fef3c7; color: #92400e; }
.pd2-badge--amber   .pd2-badge-label { background: #fde68a; color: #92400e; }
.pd2-badge--red     .pd2-badge-value { background: #fee2e2; color: #991b1b; }
.pd2-badge--red     .pd2-badge-label { background: #fecaca; color: #991b1b; }
.pd2-badge--gray    .pd2-badge-value { background: #e5e7eb; color: #374151; }
.pd2-badge--gray    .pd2-badge-label { background: #d1d5db; color: #374151; }
.pd2-badge--blue    .pd2-badge-value { background: #dbeafe; color: #1e40af; }
.pd2-badge--blue    .pd2-badge-label { background: #bfdbfe; color: #1e40af; }

/* ── Preset：header（封面卡） ──────────────── */
.pd2-preset-header {
    position: relative;
}
/* 底部漸層分隔線 — 視覺上「這是開頭」的錨點 */
.pd2-preset-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    height: 3px;
    margin: 0 var(--pd2-pad, 28px);
    background: linear-gradient(90deg, var(--pd2-accent, #54BE74) 0%, transparent 80%);
    border-radius: 2px;
    pointer-events: none;
}
/* H1 在 header 卡上略大，視覺份量更顯眼 */
.pd2-preset-header .pd2-prose h1:first-child {
    font-size: 30px;
    margin-top: 0;
    line-height: 1.2;
    letter-spacing: -0.01em;
}
/* 徽章列在 header 上方多一點氣息 */
.pd2-preset-header .pd2-prose .pd2-badge-row {
    margin-top: 18px;
}

/* ── Preset：bottom_line（結論卡） ─────────── */
.pd2-preset-bottom_line {
    position: relative;
    overflow: hidden;
}
/* 右上角光暈裝飾 */
.pd2-preset-bottom_line::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 120px; height: 120px;
    background: radial-gradient(circle, rgba(255,255,255,.08) 0%, transparent 70%);
    pointer-events: none;
}
/* 左上大型引號裝飾，營造「金句」感 */
.pd2-preset-bottom_line::after {
    content: '“';
    position: absolute;
    top: -14px;
    left: 12px;
    font-size: 90px;
    line-height: 1;
    font-family: Georgia, "Times New Roman", serif;
    color: rgba(255,255,255,.18);
    pointer-events: none;
    z-index: 0;
}
/* 內容置上層 */
.pd2-preset-bottom_line .pd2-prose {
    position: relative;
    z-index: 1;
}
/* 深底白字 — 讓所有元素繼承文字色 */
.pd2-preset-bottom_line .pd2-prose,
.pd2-preset-bottom_line .pd2-prose * {
    color: inherit;
}
/* 標題層次跟一般卡片一致，不做角色翻轉 */
.pd2-preset-bottom_line .pd2-prose h1,
.pd2-preset-bottom_line .pd2-prose h2,
.pd2-preset-bottom_line .pd2-prose h3,
.pd2-preset-bottom_line .pd2-prose h4 {
    color: inherit;
}
.pd2-preset-bottom_line .pd2-prose h1:first-child,
.pd2-preset-bottom_line .pd2-prose h2:first-child,
.pd2-preset-bottom_line .pd2-prose h3:first-child {
    margin-top: 0;
}
/* 深底上的對比強化 */
.pd2-preset-bottom_line .pd2-prose strong { color: #fff; font-weight: 700; }
.pd2-preset-bottom_line .pd2-prose blockquote {
    background: rgba(255,255,255,.1);
    border-left-color: rgba(255,255,255,.5);
    color: inherit;
}
.pd2-preset-bottom_line .pd2-prose a { color: #a8e0bd; }
/* 深底上的分隔線 — 用半透明白色才看得見 */
.pd2-preset-bottom_line .pd2-prose hr {
    border-top-color: rgba(255,255,255,.25);
}
.pd2-preset-bottom_line .pd2-prose code {
    background: rgba(255,255,255,.15);
    color: #fff;
}
/* H4 副標題在深底上的色彩 */
.pd2-preset-bottom_line .pd2-prose h4 {
    color: rgba(255,255,255,.7);
}
.pd2-preset-bottom_line .pd2-badge-label {
    background: rgba(255,255,255,.18);
    color: rgba(255,255,255,.85);
}
.pd2-preset-bottom_line .pd2-badge-value {
    background: rgba(255,255,255,.95);
    color: #1d6f3a;
}

/* ── Preset：numbered（流程卡） — v2.5 升級視覺 ─── */
.pd2-preset-numbered .pd2-prose h3:first-child {
    /* 標題保持普通標題樣式（不要色塊），跟截圖一致 */
    background: transparent;
    color: var(--pd2-text, #1a2420);
    padding: 0;
    border-radius: 0;
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 22px;
    letter-spacing: 0;
    display: block;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(0,0,0,.06);
}
.pd2-preset-numbered .pd2-prose ol {
    counter-reset: pd2-num;
    list-style: none;
    padding-left: 0;
    margin: 0;
    position: relative;
}
.pd2-preset-numbered .pd2-prose ol > li {
    counter-increment: pd2-num;
    position: relative;
    padding-left: 52px;
    padding-bottom: 14px;
    margin-bottom: 10px;
    min-height: 36px;
    border-bottom: 1px solid rgba(0,0,0,.06);
}
.pd2-preset-numbered .pd2-prose ol > li:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}
/* 數字圈圈 — 圓潤、明確、有質感 */
.pd2-preset-numbered .pd2-prose ol > li::before {
    content: counter(pd2-num);
    position: absolute;
    left: 0;
    top: 2px;
    width: 30px;
    height: 30px;
    background: #d0e8d8;
    color: var(--pd2-accent, #1d6f3a);
    border-radius: 50%;
    font-weight: 700;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* numbered 不再用垂直連線（依截圖風格修正） */
.pd2-preset-numbered .pd2-prose ol > li::after {
    display: none;
}
/* 第一個 paragraph：用 strong 標示的關鍵詞會更強調 */
.pd2-preset-numbered .pd2-prose ol > li > p {
    margin: 0 0 4px;
    line-height: 1.6;
}
.pd2-preset-numbered .pd2-prose ol > li > p strong {
    color: var(--pd2-accent, #1d6f3a);
    font-weight: 700;
}

/* ── Preset：rating（評級卡） ─────────────────── */
.pd2-preset-rating {
    position: relative;
    text-align: left;
}
/* 頂端彩色橫條（顏色取自 accent_color） */
.pd2-preset-rating::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 4px;
    background: var(--pd2-accent, #54BE74);
    border-radius: var(--pd2-radius-top, 10px) var(--pd2-radius-top, 10px) 0 0;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}
.pd2-preset-rating .pd2-prose {
    padding-top: 4px;
}
/* H4 = 標籤（小字、灰色、上方） */
.pd2-preset-rating .pd2-prose h4:first-child {
    margin-top: 0;
    margin-bottom: 8px;
    text-transform: none;
    letter-spacing: 0;
    color: rgba(0,0,0,.55);
    font-size: 13px;
    font-weight: 500;
}
/* H2 = 主結果（大字、強調色） */
.pd2-preset-rating .pd2-prose h2 {
    margin: 0 0 6px;
    font-size: 24px;
    font-weight: 700;
    color: var(--pd2-accent, #54BE74);
    line-height: 1.2;
    letter-spacing: -0.01em;
}
/* P = 副說明（小字、灰色、下方） */
.pd2-preset-rating .pd2-prose p {
    margin: 0;
    font-size: 13px;
    color: rgba(0,0,0,.55);
    line-height: 1.5;
}

/* ── Preset：metric（數據卡） ─────────────────── */
.pd2-preset-metric {
    text-align: left;
}
/* H4 = 上方標籤 */
.pd2-preset-metric .pd2-prose h4:first-child {
    margin-top: 0;
    margin-bottom: 8px;
    text-transform: none;
    letter-spacing: 0;
    color: var(--pd2-accent, #1d6f3a);
    font-size: 13px;
    font-weight: 600;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0,0,0,.06);
}
/* H1 = 大數字 */
.pd2-preset-metric .pd2-prose h1 {
    margin: 0 0 6px;
    font-size: 36px;
    font-weight: 800;
    color: var(--pd2-accent, #1d6f3a);
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-family: Georgia, "Times New Roman", "Noto Serif TC", serif;
}
/* P = 副資訊（小字） */
.pd2-preset-metric .pd2-prose p {
    margin: 0;
    font-size: 13px;
    color: rgba(0,0,0,.6);
    line-height: 1.5;
}

/* ── Preset：red（警告卡） ─────────────────────── */
.pd2-preset-red {
    position: relative;
    /* 左側紅色粗條紋 */
    background-image: repeating-linear-gradient(
        135deg,
        transparent 0,
        transparent 8px,
        rgba(220, 38, 38, .06) 8px,
        rgba(220, 38, 38, .06) 12px
    );
    background-size: 12px 100%;
    background-repeat: no-repeat;
    background-position: left top;
}
/* 右上角的大型 ⚠ icon */
.pd2-preset-red::before {
    content: '⚠';
    position: absolute;
    top: 14px;
    right: 16px;
    width: 36px;
    height: 36px;
    background: #dc2626;
    color: #fff;
    border-radius: 50%;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(220,38,38,.3);
    pointer-events: none;
}
.pd2-preset-red .pd2-prose h1,
.pd2-preset-red .pd2-prose h2,
.pd2-preset-red .pd2-prose h3 {
    color: #991b1b;
}
.pd2-preset-red .pd2-prose h1:first-child,
.pd2-preset-red .pd2-prose h2:first-child,
.pd2-preset-red .pd2-prose h3:first-child {
    margin-top: 0;
    padding-right: 52px; /* 留位置給警示 icon */
}
.pd2-preset-red .pd2-prose strong {
    color: #991b1b;
    font-weight: 700;
}
.pd2-preset-red .pd2-prose ul li::marker,
.pd2-preset-red .pd2-prose ol li::marker {
    color: #dc2626;
}
.pd2-preset-red .pd2-prose blockquote {
    border-left-color: #dc2626;
    background: rgba(220, 38, 38, .04);
}

/* ── 版式：列／欄 ─────────────────────────── */
.pd2-layout {
    display: flex; flex-direction: column; gap: 24px;
}
.pd2-layout-row {
    display: grid; align-items: stretch;
}
.pd2-layout-row[data-cols="1"] { grid-template-columns: 1fr; }
.pd2-layout-row[data-cols="2"] { grid-template-columns: 1fr 1fr; }
.pd2-layout-row[data-cols="3"] { grid-template-columns: 1fr 1fr 1fr; }

.pd2-layout-row[data-gap="sm"] { gap: 12px; }
.pd2-layout-row[data-gap="md"] { gap: 24px; }
.pd2-layout-row[data-gap="lg"] { gap: 40px; }

/* RWD 兩段折疊：3 欄 → 2 欄 → 1 欄 */
@media (max-width: 1023px) {
    .pd2-layout-row[data-cols="3"] {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 767px) {
    .pd2-layout-row[data-cols="2"],
    .pd2-layout-row[data-cols="3"] {
        grid-template-columns: 1fr;
    }
}

.pd2-layout-cell { display: flex; }
.pd2-layout-cell > .pd2-card,
.pd2-layout-cell > .pd2-edit-target,
.pd2-layout-cell > .pd2-block {
    flex: 1;
    width: 100%;
}
.pd2-layout-cell > .pd2-edit-target {
    display: flex;
}
.pd2-layout-cell > .pd2-edit-target > .pd2-card,
.pd2-layout-cell > .pd2-edit-target > .pd2-block {
    flex: 1;
    width: 100%;
}
.pd2-layout-cell--empty {
    background: rgba(0,0,0,.02); border: 1px dashed #d4dbd7;
    border-radius: 8px; min-height: 80px;
}

/* ── 缺漏處理 ───────────────────────────── */
.pd2-missing {
    padding: 16px; border: 1px dashed #d4a83a;
    background: #fffbeb; color: #8a6300; border-radius: 6px;
    font-size: 13px;
}

/* ============================================================
 *  非卡片 block 類型（v2.4.0+）
 *  text / image / divider — 共用 .pd2-block 命名空間
 * ============================================================ */

.pd2-block {
    box-sizing: border-box;
    max-width: 100%;
    font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ── image block ─────────────────────────────── */
.pd2-block-image {
    margin: 0;
    padding: 0;
    display: flex;
}
.pd2-block-image--align-left   { justify-content: flex-start; }
.pd2-block-image--align-center { justify-content: center; }
.pd2-block-image--align-right  { justify-content: flex-end; }
.pd2-block-image img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}
.pd2-block-image--empty {
    width: 100%;
    padding: 32px;
    text-align: center;
    color: #9aa39e;
    background: rgba(0,0,0,.02);
    border: 1px dashed #d4dbd7;
    border-radius: 8px;
    font-size: 13px;
}

/* ============================================================
 *  v2.5.0+ 內容鎖定（前台禁複製 / 禁右鍵）
 *  搭配 lock-content.js 一起作用
 * ============================================================ */
.pd2-card,
.pd2-card *,
.pd2-block,
.pd2-block * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
/* 圖片也禁止拖曳 */
.pd2-card img,
.pd2-block img {
    -webkit-user-drag: none;
    user-drag: none;
    pointer-events: auto; /* 但保留點擊（讓 Elementor 的「✎ 編輯」按鈕仍可運作） */
}
/* 編輯器內反過來：要能選取編輯（這個只在 admin 後台才有） */
body.wp-admin .pd2-card,
body.wp-admin .pd2-card *,
body.wp-admin .pd2-block,
body.wp-admin .pd2-block * {
    -webkit-user-select: auto;
    -moz-user-select: auto;
    -ms-user-select: auto;
    user-select: auto;
}
/* Elementor 編輯模式（preview iframe）內也要能選取（為了就地編輯可用） */
body.elementor-editor-active .pd2-card,
body.elementor-editor-active .pd2-card *,
body.elementor-editor-active .pd2-block,
body.elementor-editor-active .pd2-block * {
    -webkit-user-select: auto;
    -moz-user-select: auto;
    -ms-user-select: auto;
    user-select: auto;
}

/* ── divider block ───────────────────────────── */
.pd2-block-divider {
    width: 100%;
    margin: 12px 0;
    border: 0;
    align-self: center;
}
.pd2-block-divider--thin {
    border-top: 1px solid var(--pd2-divider-color, #d4dbd7);
    height: 0;
}
.pd2-block-divider--thick {
    border-top: 3px solid var(--pd2-divider-color, #d4dbd7);
    height: 0;
}
.pd2-block-divider--dashed {
    border-top: 2px dashed var(--pd2-divider-color, #d4dbd7);
    height: 0;
}

/* ── 多欄並列下，分隔線轉「垂直分隔條」 ─────────────
 * 在版式內、且該列有 ≥ 2 欄時，把 divider 改成垂直線
 * 手機版折成 1 欄時自動恢復或隱藏
 * ────────────────────────────────────────────────── */
.pd2-layout-row[data-cols="2"] .pd2-block-divider,
.pd2-layout-row[data-cols="3"] .pd2-block-divider {
    /* 桌機：垂直線 */
    border-top: none;
    height: 100%;
    min-height: 60px;
    width: auto;
    margin: 0;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pd2-layout-row[data-cols="2"] .pd2-block-divider::before,
.pd2-layout-row[data-cols="3"] .pd2-block-divider::before {
    content: '';
    width: 1px;
    height: 80%;
    background: var(--pd2-divider-color, #d4dbd7);
}
.pd2-layout-row[data-cols="2"] .pd2-block-divider--thick::before,
.pd2-layout-row[data-cols="3"] .pd2-block-divider--thick::before {
    width: 3px;
}
.pd2-layout-row[data-cols="2"] .pd2-block-divider--dashed::before,
.pd2-layout-row[data-cols="3"] .pd2-block-divider--dashed::before {
    width: 0;
    border-left: 2px dashed var(--pd2-divider-color, #d4dbd7);
    height: 80%;
}

/* 手機版折成 1 欄：分隔線在多欄時直接隱藏（避免無意義橫線） */
@media (max-width: 767px) {
    .pd2-layout-row[data-cols="2"] .pd2-block-divider,
    .pd2-layout-row[data-cols="3"] .pd2-block-divider {
        display: none;
    }
}