/* ================================================================
   CTA 按鈕視覺系統
   採 opt-in 設計：新元件用 .cta-btn 系統；既有按鈕保留 + 加 polish
   ================================================================ */

/* ---------- 設計 token（CSS 變數，方便品牌調整） ---------- */
:root {
    --cta-primary:        #ff8a00;       /* 主強調色（橘）*/
    --cta-primary-hover:  #e67900;
    --cta-primary-active: #cf6c00;
    --cta-primary-shadow: rgba(255,138,0,0.25);

    --cta-secondary-bg:     #ffffff;
    --cta-secondary-color:  #444;
    --cta-secondary-border: #d8d8d8;
    --cta-secondary-hover-bg: #f7f7f7;

    --cta-success: #2e8b57;
    --cta-danger:  #d9534f;
    --cta-ghost-color: #ff8a00;

    --cta-radius:      8px;
    --cta-radius-pill: 999px;
}

/* ---------- 基底 ---------- */
.cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 600;
    line-height: 1.2;
    border: 1px solid transparent;
    border-radius: var(--cta-radius);
    cursor: pointer;
    text-decoration: none !important;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition:
        background-color .15s ease-out,
        color            .15s ease-out,
        border-color     .15s ease-out,
        box-shadow       .15s ease-out,
        transform        .10s ease-out;
    /* 桌機尺寸預設：48px 高、16px 字 */
    min-height: 48px;
    padding: 0 22px;
    font-size: 16px;
}

.cta-btn:focus-visible {
    outline: 2px solid var(--cta-primary);
    outline-offset: 2px;
}

/* ---------- 變體：主按鈕 ---------- */
.cta-btn--primary {
    background-color: var(--cta-primary);
    color: #fff;
    box-shadow: 0 2px 8px var(--cta-primary-shadow);
}
.cta-btn--primary:hover {
    background-color: var(--cta-primary-hover);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px var(--cta-primary-shadow);
}
.cta-btn--primary:active {
    background-color: var(--cta-primary-active);
    transform: translateY(0);
    box-shadow: 0 1px 4px var(--cta-primary-shadow);
}

/* ---------- 變體：次按鈕 ---------- */
.cta-btn--secondary {
    background-color: var(--cta-secondary-bg);
    color: var(--cta-secondary-color);
    border-color: var(--cta-secondary-border);
}
.cta-btn--secondary:hover {
    background-color: var(--cta-secondary-hover-bg);
    color: #222;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.cta-btn--secondary:active {
    transform: translateY(0);
}

/* ---------- 變體：幽靈（透明背景、強調色文字） ---------- */
.cta-btn--ghost {
    background-color: transparent;
    color: var(--cta-ghost-color);
    border-color: var(--cta-ghost-color);
}
.cta-btn--ghost:hover {
    background-color: rgba(255,138,0,0.08);
    color: var(--cta-primary-hover);
    border-color: var(--cta-primary-hover);
}

/* ---------- 變體：成功 ---------- */
.cta-btn--success {
    background-color: var(--cta-success);
    color: #fff;
    box-shadow: 0 2px 8px rgba(46,139,87,0.25);
}
.cta-btn--success:hover { background-color: #267148; color: #fff; transform: translateY(-1px); }

/* ---------- 變體：危險（謹用，避免錯誤聯想） ---------- */
.cta-btn--danger {
    background-color: var(--cta-danger);
    color: #fff;
}
.cta-btn--danger:hover { background-color: #c44440; color: #fff; transform: translateY(-1px); }

/* ---------- 尺寸 ---------- */
.cta-btn--sm { min-height: 36px; padding: 0 14px; font-size: 13px; }
.cta-btn--md { /* 預設 */ }
.cta-btn--lg { min-height: 56px; padding: 0 30px; font-size: 17px; }
.cta-btn--xl { min-height: 60px; padding: 0 36px; font-size: 18px; font-weight: 700; }

/* ---------- 形狀 ---------- */
.cta-btn--pill   { border-radius: var(--cta-radius-pill); }
.cta-btn--square { border-radius: 4px; }

/* ---------- 滿版 ---------- */
.cta-btn--block { display: flex; width: 100%; }

/* ---------- 圖示按鈕 ---------- */
.cta-btn i { font-size: 1.05em; }

/* ---------- 狀態 ---------- */
.cta-btn[disabled],
.cta-btn.is-disabled {
    cursor: not-allowed;
    opacity: 0.55;
    pointer-events: none;
}

.cta-btn.is-loading {
    color: transparent !important;
    pointer-events: none;
    position: relative;
}
.cta-btn.is-loading::after {
    content: '';
    position: absolute;
    width: 18px; height: 18px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    color: #fff;
    animation: cta_spin .8s linear infinite;
}
.cta-btn--secondary.is-loading::after,
.cta-btn--ghost.is-loading::after { color: var(--cta-primary); }

@keyframes cta_spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .cta-btn { transition: none; }
    .cta-btn:hover { transform: none; }
    .cta-btn.is-loading::after { animation: none; }
}

/* ---------- 行動版：自動拉到滿版高度 + 字級 ---------- */
@media (max-width: 576px) {
    .cta-btn { min-height: 48px; padding: 0 20px; font-size: 16px; }
    .cta-btn--lg { min-height: 52px; }
    .cta-btn--xl { min-height: 56px; }
    /* 手機時不該太多文字按鈕並排，鼓勵堆疊 */
    .cta-btn--mob-block { display: flex; width: 100%; }
}

/* ================================================================
   Sticky CTA bar（手機底部黏在視窗下緣的條狀 CTA）
   舊有 .cartbtn_mob 已存在；此處新類別 .cta-sticky 給日後其他頁用
   ================================================================ */
.cta-sticky {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9000;
    display: flex;
    gap: 0;
    background-color: #fff;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
    padding: 0;
    /* iOS 底部安全區 */
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.cta-sticky .cta-btn {
    flex: 1;
    border-radius: 0;
    min-height: 56px;
}
.cta-sticky .cta-btn--secondary { border-width: 0; border-right: 1px solid #eee; }

@media (min-width: 992px) {
    /* 桌機隱藏 sticky bar，桌機自有右側 CTA */
    .cta-sticky--mobile-only { display: none; }
}

/* ================================================================
   既有按鈕的安全 polish（純添加 hover/click 回饋，不改色）
   ================================================================ */
.cartaddv3_btn, .cartaddv2_btn,
.sendv2_btn, .cancelv2_btn,
.prodaddv2_btn, .linkv2_btn, .callv2_btn,
.ticket_btn {
    transition:
        background-color .15s ease-out,
        color            .15s ease-out,
        box-shadow       .15s ease-out,
        transform        .10s ease-out;
}
.cartaddv3_btn:hover, .cartaddv2_btn:hover,
.sendv2_btn:hover,
.prodaddv2_btn:hover,
.ticket_btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.10);
}
.cartaddv3_btn:active, .cartaddv2_btn:active,
.sendv2_btn:active,
.prodaddv2_btn:active,
.ticket_btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

@media (prefers-reduced-motion: reduce) {
    .cartaddv3_btn, .cartaddv2_btn,
    .sendv2_btn, .cancelv2_btn,
    .prodaddv2_btn, .linkv2_btn, .callv2_btn,
    .ticket_btn { transition: none; }
    .cartaddv3_btn:hover, .cartaddv2_btn:hover,
    .sendv2_btn:hover, .prodaddv2_btn:hover, .ticket_btn:hover { transform: none; }
}

/* ================================================================
   A/B 測試 hook（給 cta_ab_test.js 用，無樣式副作用）
   data-cta-id="xxx" data-cta-variant="A|B|C"
   ================================================================ */
[data-cta-variant] { /* 純標記，不出視覺 */ }