/* --- General --- */
.apb-style-box, .apb-underline, .apb-highlighter {
    /* Common styles if any */
}

/* --- 智慧資訊框 (Style Box) --- */
.apb-style-box {
    margin: 1em 0;
    position: relative;
}

.apb-style-box .apb-box-title {
    display: flex;
    align-items: center;
    font-size: var(--apb-title-font-size, 1.2em);
    font-weight: bold;
    color: var(--apb-title-color, inherit);
}

.apb-style-box .apb-box-title .apb-title-icon {
    margin-right: 10px;
    font-size: 1em;
}

.apb-style-box .apb-box-title .apb-title-text {
    flex-grow: 1;
}

.apb-style-box .apb-box-content > :first-child {
    margin-top: 0;
}

.apb-style-box .apb-box-content > :last-child {
    margin-bottom: 0;
}

/* Layout: 資訊框 (萬用框) */
.apb-layout-info {
    border: var(--apb-border-width, 2px) var(--apb-border-line-style, solid) var(--apb-box-color, #ddd);
    border-radius: 4px;
}

.apb-layout-info .apb-box-title {
    background-color: var(--apb-box-color, #ddd);
    color: var(--apb-title-color, #333);
    padding: 10px 15px;
}

.apb-layout-info .apb-box-content {
    padding: 15px;
    background-color: #fff;
}

/* Layout: 提醒框 (底色框) */
.apb-layout-alert {
    padding: 1rem;
    border: 1px solid transparent;
    border-radius: 0.375rem;
}

.apb-layout-alert .apb-box-title,
.apb-layout-alert .apb-box-content {
    padding: 0;
    background: transparent;
}

.apb-layout-alert .apb-box-title {
    margin-bottom: 0.5rem;
}

/* Bootstrap Alert Types */
.apb-layout-alert.apb-alert-type-custom {
    background-color: var(--apb-box-color, #cfe2ff);
    border-color: var(--apb-border-color, #9ec5fe);
    border-width: var(--apb-border-width, 1px);
    border-style: var(--apb-border-line-style, solid);
    color: var(--apb-title-color, #333);
}

.apb-layout-alert.apb-alert-type-custom .apb-box-title {
    color: var(--apb-title-color, #333);
}

.apb-layout-alert.apb-alert-type-info {
    color: #0a58ca;
    background-color: #cfe2ff;
    border-color: #9ec5fe;
}

.apb-layout-alert.apb-alert-type-info .apb-box-title {
    color: var(--apb-title-color, #0a58ca);
}

.apb-layout-alert.apb-alert-type-success {
    color: #146c43;
    background-color: #d1e7dd;
    border-color: #a3cfbb;
}

.apb-layout-alert.apb-alert-type-success .apb-box-title {
    color: var(--apb-title-color, #146c43);
}

.apb-layout-alert.apb-alert-type-warning {
    color: #664d03;
    background-color: #fff3cd;
    border-color: #ffecb5;
}

.apb-layout-alert.apb-alert-type-warning .apb-box-title {
    color: var(--apb-title-color, #664d03);
}

.apb-layout-alert.apb-alert-type-danger {
    color: #842029;
    background-color: #f8d7da;
    border-color: #f1aeb5;
}

.apb-layout-alert.apb-alert-type-danger .apb-box-title {
    color: var(--apb-title-color, #842029);
}

/* Layout: 提示框 (Morandi 提醒框) */
.apb-layout-morandi-alert {
    background-color: var(--apb-box-color, #F7F4EB);
    border-left: var(--apb-border-width, 4px) solid var(--apb-border-color, #D9D2C6);
    padding: 1rem;
    border-radius: 0.375rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.apb-layout-morandi-alert .apb-box-title {
    color: var(--apb-title-color, #2D3748);
    font-weight: 700;
    margin-bottom: 0.25rem;
    font-size: var(--apb-title-font-size, 1em);
    padding: 0;
    background: transparent;
}

.apb-layout-morandi-alert .apb-box-content {
    color: #4A5568;
    padding: 0;
    background: transparent;
}

/* Layout: 文字置中框 (線條框) - [修正] */
.apb-layout-centered-title {
    border: var(--apb-border-width, 2px) var(--apb-border-line-style, solid) var(--apb-box-color, #ddd);
    border-radius: 4px;
    padding: 25px 15px 15px;
    margin-top: 1.5em;
    background-color: #ffffff; /* 確保容器有白色背景 */
    position: relative; /* 設定相對定位 */
}

.apb-layout-centered-title .apb-box-title {
    position: absolute; /* 設定絕對定位 */
    top: -0.8em; /* 向上移動以覆蓋邊框 */
    left: 20px;
    background: var(--apb-title-bg-color, #fff); /* 標題背景，遮蓋邊框 */
    padding: 0 10px;
    font-size: var(--apb-title-font-size, 1.2em);
    color: var(--apb-title-color, var(--apb-box-color, #333));
}

.apb-layout-centered-title .apb-box-content {
    padding: 0;
    background: transparent; /* 內容區塊背景為透明 */
}


/* ===== 程式碼框樣式 ===== */
.wp-block-achang-pencil-box-code-box {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    border-radius: 8px;
    overflow: hidden;
    margin: 1.5em 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: relative;

    /* 程式碼框標題列 */
    .apb-code-box-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 16px;
        font-weight: 500;
        font-size: 13px;
        border-bottom: 1px solid;
        position: relative;

        .apb-code-language {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }
    }

    /* [修正] 程式碼內容容器佈局 */
    .apb-code-content-wrapper {
        display: flex;
        margin: 0;
        min-height: 200px;
    }

    /* [修正] 行號區域樣式 */
    .apb-line-numbers {
        border-right: 1px solid;
        flex-shrink: 0;
        font-size: 14px;
        line-height: 1.5;
        min-width: 60px;
        overflow-y: hidden;
        padding: 24px 12px;
        text-align: right;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .apb-line-numbers::-webkit-scrollbar {
        display: none;
    }

    .apb-line-number {
        display: block;
        height: 21px;
        white-space: nowrap;
    }

    /* [修正] 程式碼內容樣式 */
    .apb-code-box-content {
        flex: 1;
        margin: 0;
        padding: 24px 16px;
        font-size: 14px;
        line-height: 1.5;
        white-space: pre !important;
        background: transparent;
        overflow: auto;
        min-width: 0;
        min-height: 160px;
    }

    .apb-code-box-content code {
        background: transparent;
        font-family: inherit;
        font-size: inherit;
        line-height: inherit;
        padding: 0;
        margin: 0;
        border: none;
        display: block;
    }

    /* 複製按鈕 */
    .apb-copy-button {
        background: transparent;
        border: 1px solid;
        border-radius: 4px;
        padding: 6px 12px;
        font-size: 12px;
        cursor: pointer;
        transition: all 0.2s ease;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }

    .apb-copy-button:hover {
        opacity: 0.8;
    }

    .apb-copy-button:active {
        transform: scale(0.95);
    }

    /* 手機端複製成功/失敗狀態 */
    .apb-copy-button.apb-copy-success {
        animation: copySuccess 0.6s ease;
        background-color: #d4edda !important;
        border-color: #28a745 !important;
        color: #155724 !important;
    }

    .apb-copy-button.apb-copy-error {
        animation: copyError 0.6s ease;
        background-color: #f8d7da !important;
        border-color: #dc3545 !important;
        color: #721c24 !important;
    }

    /* 複製動畫 */
    @keyframes copySuccess {
        0% { transform: scale(1); }
        50% { transform: scale(1.1); background-color: #28a745; color: white; }
        100% { transform: scale(1); }
    }

    @keyframes copyError {
        0% { transform: scale(1); }
        25% { transform: translateX(-5px); }
        75% { transform: translateX(5px); }
        100% { transform: scale(1); }
    }

    /* 獨立複製按鈕（當沒有標題列時） */
    .apb-copy-button-standalone {
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 1;
    }
}

/* 淺色主題 (style-1) */
.apb-code-style-style-1 {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
}

.apb-code-style-style-1 .apb-code-box-header {
    background: #ffffff;
    color: #495057;
    border-bottom-color: #dee2e6;
}

.apb-code-style-style-1 .apb-line-numbers {
    background: #f1f3f4;
    color: #6c757d;
    border-right-color: #dee2e6;
}

.apb-code-style-style-1 .apb-code-box-content {
    background: #ffffff;
    color: #212529;
    text-shadow: none;
}

.apb-code-style-style-1 .apb-code-box-content code[class*="language-"] {
    text-shadow: none;
    color: #212529; /* 確保文字在淺色背景上清晰可見 */
}

.apb-code-style-style-1 .apb-copy-button {
    color: #495057;
    border-color: #6c757d;
    background: rgba(255, 255, 255, 0.8);
}

.apb-code-style-style-1 .apb-copy-button:hover {
    background: #f8f9fa;
    border-color: #495057;
}

.apb-code-style-style-1 .apb-copy-button.apb-copy-success {
    background: #d4edda;
    border-color: #28a745;
    color: #155724;
}

.apb-code-style-style-1 .apb-copy-button.apb-copy-error {
    background: #f8d7da;
    border-color: #dc3545;
    color: #721c24;
}

/* 深色主題 (style-2) */
.apb-code-style-style-2 {
    background: #1e1e1e;
    border: 1px solid #333;
}

.apb-code-style-style-2 .apb-code-box-header {
    background: #2d2d30;
    color: #cccccc;
    border-bottom-color: #3e3e42;
}

.apb-code-style-style-2 .apb-line-numbers {
    background: #252526;
    color: #858585;
    border-right-color: #3e3e42;
}

.apb-code-style-style-2 .apb-code-box-content {
    background: #1e1e1e;
    color: #f0f0f0;
}

.apb-code-style-style-2 .apb-code-box-content code[class*="language-"] {
    color: #f0f0f0; /* 確保文字在深色背景上清晰可見 */
}

.apb-code-style-style-2 .apb-copy-button {
    color: #cccccc;
    border-color: #6c6c6c;
    background: rgba(45, 45, 48, 0.8);
}

.apb-code-style-style-2 .apb-copy-button:hover {
    background: #3e3e42;
    border-color: #cccccc;
}

.apb-code-style-style-2 .apb-copy-button.apb-copy-success {
    background: #0e5132;
    border-color: #28a745;
    color: #d4edda;
}

.apb-code-style-style-2 .apb-copy-button.apb-copy-error {
    background: #58151c;
    border-color: #dc3545;
    color: #f8d7da;
}

/* --- 程式碼框語法高亮 --- */
/* 淺色主題語法高亮 (預設和 style-1) */
.wp-block-achang-pencil-box-code-box .apb-keyword,
.wp-block-achang-pencil-box-code-box.apb-code-style-style-1 .apb-keyword {
    color: #0000ff;
    font-weight: bold;
}

.wp-block-achang-pencil-box-code-box .apb-string,
.wp-block-achang-pencil-box-code-box.apb-code-style-style-1 .apb-string {
    color: #008000;
}

.wp-block-achang-pencil-box-code-box .apb-comment,
.wp-block-achang-pencil-box-code-box.apb-code-style-style-1 .apb-comment {
    color: #6a9955;
    font-style: italic;
}

.wp-block-achang-pencil-box-code-box .apb-number,
.wp-block-achang-pencil-box-code-box.apb-code-style-style-1 .apb-number {
    color: #098658;
}

.wp-block-achang-pencil-box-code-box .apb-builtin,
.wp-block-achang-pencil-box-code-box.apb-code-style-style-1 .apb-builtin {
    color: #795e26;
}

.wp-block-achang-pencil-box-code-box .apb-variable,
.wp-block-achang-pencil-box-code-box.apb-code-style-style-1 .apb-variable {
    color: #001080;
}

.wp-block-achang-pencil-box-code-box .apb-tag,
.wp-block-achang-pencil-box-code-box.apb-code-style-style-1 .apb-tag {
    color: #800000;
}

.wp-block-achang-pencil-box-code-box .apb-attribute,
.wp-block-achang-pencil-box-code-box.apb-code-style-style-1 .apb-attribute {
    color: #ff0000;
}

.wp-block-achang-pencil-box-code-box .apb-selector,
.wp-block-achang-pencil-box-code-box.apb-code-style-style-1 .apb-selector {
    color: #800000;
    font-weight: bold;
}

.wp-block-achang-pencil-box-code-box .apb-property,
.wp-block-achang-pencil-box-code-box.apb-code-style-style-1 .apb-property {
    color: #ff0000;
}

.wp-block-achang-pencil-box-code-box .apb-value,
.wp-block-achang-pencil-box-code-box.apb-code-style-style-1 .apb-value {
    color: #0451a5;
}

/* 深色主題的語法高亮 */
.wp-block-achang-pencil-box-code-box.apb-code-style-style-2 .apb-keyword {
    color: #569cd6;
    font-weight: bold;
}

.wp-block-achang-pencil-box-code-box.apb-code-style-style-2 .apb-string {
    color: #ce9178;
}

.wp-block-achang-pencil-box-code-box.apb-code-style-style-2 .apb-comment {
    color: #6a9955;
    font-style: italic;
}

.wp-block-achang-pencil-box-code-box.apb-code-style-style-2 .apb-number {
    color: #b5cea8;
}

.wp-block-achang-pencil-box-code-box.apb-code-style-style-2 .apb-builtin {
    color: #dcdcaa;
}

.wp-block-achang-pencil-box-code-box.apb-code-style-style-2 .apb-variable {
    color: #9cdcfe;
}

.wp-block-achang-pencil-box-code-box.apb-code-style-style-2 .apb-tag {
    color: #569cd6;
}

.wp-block-achang-pencil-box-code-box.apb-code-style-style-2 .apb-attribute {
    color: #92c5f8;
}

.wp-block-achang-pencil-box-code-box.apb-code-style-style-2 .apb-selector {
    color: #d7ba7d;
    font-weight: bold;
}

.wp-block-achang-pencil-box-code-box.apb-code-style-style-2 .apb-property {
    color: #92c5f8;
}

.wp-block-achang-pencil-box-code-box.apb-code-style-style-2 .apb-value {
    color: #ce9178;
}

/* Prism.js 語法高亮支援 */
.wp-block-achang-pencil-box-code-box code[class*="language-"],
.wp-block-achang-pencil-box-code-box pre[class*="language-"] {
    color: inherit;
    background: transparent;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    line-height: 1.5;
    tab-size: 4;
    hyphens: none;
}

.wp-block-achang-pencil-box-code-box .apb-code-box-content code {
    color: inherit;
    background: transparent;
}

/* 淺色主題 Prism.js 語法高亮 */
.wp-block-achang-pencil-box-code-box.apb-code-style-style-1 code[class*="language-"],
.wp-block-achang-pencil-box-code-box.apb-code-style-style-1 pre[class*="language-"] {
    color: #212529;
}

/* 深色主題 Prism.js 語法高亮 */
.wp-block-achang-pencil-box-code-box.apb-code-style-style-2 code[class*="language-"],
.wp-block-achang-pencil-box-code-box.apb-code-style-style-2 pre[class*="language-"] {
    color: #f0f0f0;
}

/* --- 特色螢光筆 (Highlighter) --- */
.apb-highlighter {
    background: linear-gradient(to top, var(--apb-highlighter-color, #fff59d) 60%, transparent 60%);
}

.apb-highlighter-highlight {
    background: linear-gradient(to top, var(--apb-highlighter-color, #fff59d) 60%, transparent 60%);
}

.apb-highlighter-line {
    background: linear-gradient(transparent 40%, rgba(255, 255, 255, 0) 40%, var(--apb-highlighter-color, #CCFF90) 50%, transparent 70%);
    padding: 2px 1px;
}

/* --- 特色底線 (Underline) --- */
.apb-underline {
    text-decoration: none;
    background: transparent;
    padding-bottom: 2px;
}

.apb-underline-normal {
    border-bottom: 2px solid var(--apb-underline-color, red);
}

.apb-underline-wavy {
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-color: var(--apb-underline-color, red);
    text-decoration-skip-ink: none;
}

.apb-underline-dashed {
    border-bottom: 2px dashed var(--apb-underline-color, red);
}

.apb-underline-crayon {
    background: linear-gradient(transparent 40%, rgba(255, 255, 255, 0) 40%, var(--apb-underline-color, red) 90%, transparent 95%);
    padding: 2px 1px;
    border-radius: 2px;
}