/* 
  Reset & Basic Styles 
*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent; /* 移除手機點擊閃爍 */
}

body {
    font-family: "Inter", "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: #f1f5f9; /* 電腦版較有質感的淺灰藍背景 */
    color: #334155;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased; /* 讓字體更平滑專業 */
    -moz-osx-font-smoothing: grayscale;
}

/* 
  手機版長圖容器
  在電腦上會置中並限制最大寬度 (例如 500px)
  在手機上則是 100% 滿版
*/
.mobile-landing-page {
    max-width: 500px; /* 您可以依據設計圖寬度調整，通常 500~600px 之間 */
    margin: 0 auto;   /* 電腦版置中 */
    background-color: #ffffff;
    min-height: 100vh;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.05); /* 電腦版加一點陰影讓邊界明顯 */
    padding-bottom: 80px; /* 預留空間給底部懸浮按鈕，避免最下面的圖被遮住 */
}

/* 
  圖片切片設定
  確保圖片無縫拼接，沒有空白間隙
*/
.img-slice {
    display: block;
    width: 100%;
    height: auto;
    border: none;
    margin: 0;
    padding: 0;
    vertical-align: bottom; /* 消除圖片下方的預設間隙 */
}

/* 如果圖片外面包了連結 <a>，也要把連結變成區塊，消除間隙 */
.mobile-landing-page a {
    display: block;
    text-decoration: none;
}

/* 
  底部懸浮按鈕 (Sticky Bottom CTA)
*/
.sticky-bottom-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(5px);
    padding: 12px 16px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
    z-index: 100;
    display: flex;
    justify-content: center;
    transition: bottom 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.sticky-bottom-cta.is-hidden {
    bottom: -100px;
    opacity: 0;
    pointer-events: none;
}

.btn-sticky {
    display: block;
    width: 100%;
    max-width: 468px; /* 配合上方容器寬度 500px 扣掉 padding */
    background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%); /* 藍色漸層按鈕 */
    color: white;
    text-align: center;
    padding: 16px;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(13, 110, 253, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-sticky:active {
    transform: scale(0.98);
    box-shadow: 0 2px 8px rgba(13, 110, 253, 0.2);
}

/* 平板/電腦端，如果需要，可以將懸浮按鈕也限制在置中區域內 */
@media (min-width: 500px) {
    .sticky-bottom-cta {
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        max-width: 500px; /* 與上方容器寬度一致 */
        padding: 15px 20px;
    }
}

/* =========================================
   結帳互動區塊 (Checkout Section) - 專業科技感排版
   ========================================= */
.checkout-section {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 16px 10px;
    color: #0f172a;
}

.checkout-title {
    font-size: 1.3rem;
    font-weight: 800;
    text-align: center;
    margin-bottom: 12px;
    letter-spacing: 1px;
    color: #0f172a;
}

.checkout-subtitle {
    font-size: 0.95rem;
    color: #64748b;
    text-align: center;
    margin-bottom: 16px;
    font-weight: 500;
}

/* 折扣碼輸入框塊 (互動狀態設計) */
.special-discount-box {
    background-color: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    padding: 12px 14px;
    text-align: center;
    margin-bottom: 16px;
    transition: all 0.3s ease;
}

/* 解鎖後，解鎖條會變成綠色成功狀態 */
.checkout-section.is-unlocked .special-discount-box {
    background-color: #f0fdf4;
    border: 1px solid #86efac;
}

.discount-header {
    font-size: 0.95rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 2px;
}

.discount-header.unlocked-text {
    color: #166534;
    font-size: 1rem;
}

.discount-subheader {
    font-size: 0.8rem;
    color: #475569;
    margin-bottom: 8px;
}

.discount-subheader strong {
    color: #2563eb;
    font-size: 1rem;
}

.checkout-section.is-unlocked .discount-subheader {
    color: #166534;
    margin-bottom: 0; /* 解鎖後不需要輸入框的間距 */
}

.discount-input-group {
    display: flex;
    gap: 6px;
    max-width: 400px;
    margin: 0 auto;
}

.discount-input-group input {
    flex: 1;
    padding: 8px 12px;
    font-size: 0.9rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    outline: none;
    transition: all 0.2s;
}

.discount-input-group input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

.btn-apply-discount {
    background-color: #0f172a;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0 16px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-apply-discount:hover {
    background-color: #1e293b;
}

/* =========================================
   卡片內的價格區塊設計 (互動切換)
   ========================================= */
.price-block {
    margin-bottom: 16px;
    background-color: #f8fafc;
    border-radius: 8px;
    padding: 12px 10px;
    text-align: center;
}

/* 待解鎖狀態視覺 */
.price-locked-state {
    padding: 4px 0;
    text-align: center;
}

.locked-simple-text {
    font-size: 0.85rem;
    color: #64748b;
}

/* 已解鎖狀態視覺 (非常高級的排版) */
.price-unlocked-state {
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}

.unlocked-label {
    display: none;
}

.unlocked-price {
    font-size: 2rem;
    font-weight: 900;
    color: #dc2626; /* 改為紅色 */
    line-height: 1;
    margin-bottom: 0;
    letter-spacing: -1px;
}

.unlocked-compare {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.original-price {
    font-size: 1rem;
    color: #94a3b8;
    text-decoration: line-through;
}

.save-price {
    font-size: 0.8rem;
    font-weight: 700;
    color: #b91c1c;
    background-color: #fef2f2;
    padding: 2px 6px;
    border-radius: 4px;
}

/* JS 切換顯示邏輯：當父層 .checkout-section 加上 .is-unlocked 時 */
.checkout-section.is-unlocked .state-locked,
.checkout-section.is-unlocked .price-locked-state {
    display: none !important;
}

.checkout-section.is-unlocked .state-unlocked,
.checkout-section.is-unlocked .price-unlocked-state {
    display: block !important;
    animation: fadeInPrice 0.5s ease forwards;
}

@keyframes fadeInPrice {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 方案選擇卡片 - 直向排版 */
.plan-selection {
    display: flex;
    flex-direction: row; 
    align-items: flex-start;
    gap: 16px; 
    margin-bottom: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 12px; /* 留給陰影的空間 */
    /* 隱藏捲軸 */
    scrollbar-width: none; /* Firefox */
}

.plan-selection::-webkit-scrollbar {
    display: none; /* Safari and Chrome */
}

.plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    background: #FFFFFF;
    border-radius: 16px;
    padding: 16px 14px 14px 14px;
    flex: 0 0 88%; /* 讓下一張卡片露出一小角暗示可以滑動 */
    scroll-snap-align: center;
    text-align: left;
    border: 1px solid #E6EBF2;
    transition: all 0.3s ease;
}

.plan-card .card-content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* 主推卡 (28天) 預設陰影較深一點點 */
.card-main {
    box-shadow: 0 8px 24px rgba(22, 40, 90, 0.08);
}

/* 點擊選中時的高級狀態 */
.plan-card.selected {
    border: 1.5px solid #4D7CFE !important;
    background-color: #fcfdff;
    box-shadow: 0 6px 20px rgba(77, 124, 254, 0.12) !important;
}

/* 一般卡 */
.card-normal {
    border: 1px solid #E6EBF2;
    box-shadow: 0 4px 16px rgba(16, 24, 40, 0.04);
    padding: 16px 14px;
}

/* 針對一般卡進行內部元素壓縮 */
.card-normal .plan-name {
    font-size: 1.35rem;
    margin-bottom: 2px;
}

.card-normal .plan-desc {
    margin-bottom: 8px;
    font-size: 0.85rem;
}

.card-normal .price-block {
    margin-bottom: 12px;
}

.card-normal .unlocked-price {
    font-size: 1.8rem;
}

.card-normal .plan-inline-tags,
.card-normal .plan-mini-notice {
    margin-bottom: 12px;
}

.card-normal .fake-btn {
    padding: 12px 10px;
    margin-top: auto;
}

.plan-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* 內建小標籤列 */
.internal-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.badge-hot {
    background: #ef4444; /* 橘紅底 */
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px; /* 小膠囊狀 */
}

.badge-sub {
    background: #f1f5f9;
    color: #475569;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px; /* 小膠囊狀 */
    border: 1px solid #e2e8f0;
}

/* 卡片層次樣式 */
.plan-name {
    font-size: 1.35rem;
    font-weight: 800;
    margin-bottom: 2px;
    color: #0f172a;
}

.plan-desc {
    font-size: 0.85rem;
    color: #475569;
    line-height: 1.4;
    margin-bottom: 8px;
}

/* 卡片上半部：標題 + 圖片 */
.card-top-row {
    margin-bottom: 12px;
    padding-bottom: 0;
    border-bottom: none;
}

.card-top-text {
    margin-bottom: 8px;
}

.card-top-text .plan-name {
    margin-bottom: 4px;
}

.card-top-text .plan-desc {
    margin-bottom: 0;
    font-size: 0.85rem;
}

/* 商品圖片 - 全寬展示 */
.card-top-image {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
}

.card-top-image img {
    width: 100%;
    height: auto;
    display: block;
}

.plan-features-title {
    display: none;
}

.plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 12px 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
}

.plan-features li {
    font-size: 0.82rem;
    color: #475569;
    display: flex;
    align-items: flex-start;
    gap: 4px;
    line-height: 1.3;
}

.plan-features li i {
    color: #10b981;
    margin-top: 0;
    flex-shrink: 0;
}

.plan-features li i::before {
    content: "✓" !important;
    font-family: system-ui, -apple-system, sans-serif !important;
    font-weight: 900;
    font-size: 1.1em;
}

/* 長期卡 - 一行標籤 */
.plan-inline-tags {
    font-size: 0.85rem;
    color: #64748b;
    margin-bottom: 20px;
    line-height: 1.5;
}
.plan-inline-tags span {
    color: #334155;
    font-weight: 600;
}

/* 14天小卡 - 一行小提醒 */
.plan-mini-notice {
    font-size: 0.85rem;
    color: #94a3b8;
    margin-bottom: 20px;
    line-height: 1.4;
}

/* 模擬按鈕階層設計 */
.fake-btn {
    display: block;
    width: 100%;
    padding: 12px 10px;
    border-radius: 12px;
    font-size: 1.05rem;
    font-weight: 700;
    text-align: center;
    transition: all 0.2s ease;
    cursor: pointer;
    margin-top: auto;
}

/* 所有方案按鈕 - 預設白底 */
.btn-primary-card,
.btn-secondary-card,
.btn-tertiary-card {
    background: #FFFFFF;
    color: #475569;
    border: 1.5px solid #CBD5E1;
}

.btn-primary-card:active,
.btn-secondary-card:active,
.btn-tertiary-card:active {
    background: #f8fafc;
}

/* 被選中的卡片 → 按鈕變藍色 */
.plan-card.selected .fake-btn {
    background: #4D7CFE !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 4px 10px rgba(77, 124, 254, 0.2);
}

/* (選中狀態樣式已移至上方) */

/* 價格區塊互動邏輯維持不變 */

/* 送出按鈕 (最下方真正的確認購買按鈕) */
.btn-submit {
    display: block;
    width: 100%;
    background: #0f172a; /* 極致深藍/近黑，極具高級感 */
    color: white;
    text-align: center;
    padding: 18px;
    border-radius: 8px; /* 捨棄大圓角，改用俐落的科技感微圓角 */
    font-size: 1.15rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.2);
    transition: all 0.2s ease;
}

.btn-submit:active {
    transform: scale(0.98);
    background: #1e293b;
}

.checkout-note {
    text-align: center;
    font-size: 0.75rem;
    color: #888;
    margin-top: 12px;
}

/* =========================================
   通用互動區塊設定
   ========================================= */
.interactive-section {
    padding: 24px 16px;
    background-color: #fff;
}

.section-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: #0f172a;
    text-align: center;
    margin-bottom: 20px;
}

/* =========================================
   HTML 2: 見證回饋區 (6分頁 + 展開更多)
   ========================================= */
#feedback-tabs {
    background-color: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

.tab-buttons {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    margin-bottom: 25px;
    padding-bottom: 4px;
    scrollbar-width: none; /* Firefox 隱藏捲軸 */
}

.tab-buttons::-webkit-scrollbar {
    display: none; /* Chrome/Safari 隱藏捲軸 */
}

.tab-btn {
    padding: 10px 16px;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #475569;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap; /* 不換行 */
    flex-shrink: 0; /* 不被壓縮 */
}

.tab-btn.active {
    background: #0f172a;
    color: #fff;
    border-color: #0f172a;
    box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.1);
}

.tab-content {
    display: none;
    animation: fadeIn 0.3s ease;
}

.tab-content.active {
    display: block;
}

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

/* 見證卡片 */
.testimonial-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 10px;
    transition: all 0.3s ease;
}

/* 名字 + 標籤同一行 */
.tc-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
}

.tc-name {
    font-size: 0.9rem;
    font-weight: 800;
    color: #0f172a;
}

.tc-tag {
    display: inline-block;
    background: linear-gradient(135deg, #4D7CFE, #3b5bdb);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
}

.tc-usage {
    font-size: 0.78rem;
    color: #94a3b8;
    margin-bottom: 8px;
}

.tc-body {
    font-size: 0.9rem;
    color: #334155;
    line-height: 1.65;
    margin-bottom: 0;
}

/* 馬賽克遮蔽（類似截圖打碼效果） */
.blur {
    display: inline-block;
    background: #c8cdd3;
    color: transparent;
    border-radius: 3px;
    padding: 0 2px;
    user-select: none;
    -webkit-user-select: none;
    filter: blur(0px);
    position: relative;
    vertical-align: baseline;
    min-width: 2em;
}

/* 區塊副標與免責 */
.section-subtitle {
    text-align: center;
    font-size: 0.9rem;
    color: #64748b;
    margin-top: -20px;
    margin-bottom: 6px;
}

.section-disclaimer {
    text-align: center;
    font-size: 0.78rem;
    color: #94a3b8;
    margin-bottom: 25px;
}

/* 分頁說明文字 */
.tab-desc {
    font-size: 0.82rem;
    color: #94a3b8;
    margin-bottom: 16px;
    padding-left: 4px;
}

/* 底部免責 */
.section-bottom-note {
    text-align: center;
    font-size: 0.72rem;
    color: #b0b8c4;
    line-height: 1.5;
    margin-top: 16px;
    margin-bottom: 0;
}

/* 隱藏的卡片 (預設不顯示) */
.tc-hidden {
    display: none;
}

/* 查看更多按鈕 */
.btn-show-more {
    display: block;
    width: 100%;
    padding: 14px;
    margin-top: 8px;
    background: transparent;
    border: 1.5px solid #cbd5e1;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-show-more:active {
    background: #f1f5f9;
}

/* =========================================
   HTML 3: 常見問題 FAQ
   ========================================= */
.faq-section {
    background-color: #fff;
}

.faq-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-item {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.faq-item:hover {
    border-color: #cbd5e1;
}

.faq-question {
    width: 100%;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: transparent;
    border: none;
    font-size: 1.05rem;
    font-weight: 700;
    color: #1e293b;
    cursor: pointer;
    text-align: left;
    transition: color 0.2s ease;
}

.faq-question i {
    color: #94a3b8;
    transition: transform 0.3s ease;
}

.faq-question.active i {
    transform: rotate(180deg);
    color: #2563eb;
}

.faq-question.active {
    color: #2563eb;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: #f8fafc;
}

.faq-answer p {
    padding: 0 20px 20px 20px;
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.6;
}

/* =========================================
   HTML 4: Final CTA
   ========================================= */
.final-cta-section {
    text-align: center;
    background: #0f172a; /* 底部使用深藍色塊，營造穩重收尾 */
    padding: 60px 20px 80px 20px; 
    color: #fff;
}

.final-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 12px;
    letter-spacing: 0.5px;
}

.final-desc {
    font-size: 1.05rem;
    color: #94a3b8;
    margin-bottom: 35px;
}

/* 底部 CTA 按鈕改為高亮對比色 */
.final-cta-section .btn-submit {
    max-width: 320px;
    margin: 0 auto;
    background: #2563eb; 
    color: white;
}

.final-cta-section .btn-submit:active {
    background: #1d4ed8;
}