/* AIFA 訂單確認頁面客製化樣式 */
/* 貼心易讀的用戶體驗設計 - 只針對 WooCommerce 內容區域 */
/* 注意：所有樣式僅針對 .woocommerce-order 容器內的元素 */

/* 整體佈局容器 - 只影響內容區域，更精確的選擇器 */
.woocommerce-order .woocommerce-order-received,
body.woocommerce-order-received .woocommerce-order-received {
    max-width: 800px;
    margin: var(--space-xl, 30px) auto;
    background: var(--neutral-ultra-light, white);
    color: var(--neutral-ultra-dark, black);
    padding: var(--space-2xl, 40px);
    border-radius: var(--radius-xl, 16px);
    box-shadow: var(--shadow-4, 0 8px 32px rgba(0, 0, 0, 0.1));
    border: 1px solid var(--neutral-light-trans-40, rgba(0, 0, 0, 0.08));
    position: relative;
    overflow: hidden;
}

/* 移除了導航保護規則 - 讓樣式更精確，只影響訂單內容 */

/* 添加頂部裝飾線 */
.woocommerce-order-received::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, 
        var(--primary, #3498DB) 0%, 
        var(--accent, #27AE60) 50%, 
        var(--secondary, #F1C40F) 100%);
}

/* 成功訊息區塊 - 醒目友善的慶祝樣式 */
.woocommerce-notice--success,
.woocommerce-message {
    background: linear-gradient(135deg, var(--success, #22c55e) 0%, var(--accent, #27AE60) 100%) !important;
    color: var(--neutral-ultra-light, white) !important;
    border: none !important;
    border-radius: var(--radius-xl, 16px);
    padding: var(--space-2xl, 30px);
    font-size: var(--text-xl, 20px);
    font-weight: var(--font-weight-semi-bold, 600);
    text-align: center;
    margin: var(--space-2xl, 30px) 0;
    box-shadow: var(--shadow-4, 0 8px 24px rgba(34, 197, 94, 0.25));
    position: relative;
    transform: translateY(-10px);
}

/* 成功訊息動畫效果 */
.woocommerce-notice--success::after,
.woocommerce-message::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, var(--success, #22c55e), var(--accent, #27AE60));
    border-radius: var(--radius-xl, 16px);
    z-index: -1;
    opacity: 0.3;
    filter: blur(8px);
}

.woocommerce-notice--success::before,
.woocommerce-message::before {
    content: "🎉 ";
    font-size: var(--text-2xl, 28px);
    margin-right: var(--space-s, 12px);
    display: inline-block;
    animation: celebrate 2s ease-in-out infinite;
}

/* 慶祝動畫 */
@keyframes celebrate {
    0%, 100% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(-5deg) scale(1.1); }
    75% { transform: rotate(5deg) scale(1.1); }
}

/* 訂單資訊標題 - 使用 ACSS Primary 主色 */
.woocommerce-order h2,
.woocommerce-thankyou-order-details h2 {
    color: var(--primary, #3b82f6) !important;
    font-size: var(--text-2xl, 28px);
    font-weight: var(--font-weight-bold, 700);
    text-align: center;
    margin-bottom: var(--space-xl, 25px);
    margin-top: var(--space-xl, 25px);
    padding: var(--space-l, 20px);
    background: var(--base-ultra-light, rgba(59, 130, 246, 0.05));
    border-radius: var(--radius-m, 8px);
    border-left: var(--space-xs, 5px) solid var(--primary, #3b82f6);
}

.woocommerce-order h2::before {
    content: "📋 ";
    margin-right: 10px;
}

/* 訂單詳情表格 */
.woocommerce-table--order-details {
    background: var(--neutral-ultra-light, white);
    color: var(--neutral-ultra-dark, black);
    border-radius: var(--radius-l, 10px);
    box-shadow: var(--shadow-2, 0 4px 15px rgba(0, 0, 0, 0.08));
    overflow: hidden;
    margin: var(--space-xl, 25px) 0;
    border: 1px solid var(--neutral-light-trans-40, rgba(0, 0, 0, 0.1)) !important;
}

.woocommerce-table--order-details th {
    background: var(--primary, #3b82f6) !important;
    color: var(--neutral-ultra-light, white) !important;
    font-weight: var(--font-weight-semi-bold, 600);
    padding: var(--space-lg, 18px) var(--space-m, 15px);
    text-align: left;
    border: none !important;
    font-size: var(--text-base, 16px);
}

.woocommerce-table--order-details td {
    padding: var(--space-m, 15px);
    border-bottom: 1px solid var(--neutral-light-trans-40, rgba(0, 0, 0, 0.08));
    border-left: none !important;
    border-right: none !important;
    vertical-align: middle;
    color: var(--neutral-ultra-dark, #374151);
}

.woocommerce-table--order-details tr:last-child td {
    border-bottom: none;
}

.woocommerce-table--order-details tr:nth-child(even) {
    background: var(--base-ultra-light, rgba(0, 0, 0, 0.02));
}

/* 產品名稱美化 */
.woocommerce-table--order-details .product-name {
    font-weight: var(--font-weight-semi-bold, 600);
    color: var(--neutral-ultra-dark, #2c3e50);
}

/* 修正特定文字元素的對比度 - 黑暗模式自動適應 */
.woocommerce-thankyou-order-details,
.woocommerce-thankyou-order-details p,
.woocommerce-thankyou-order-details strong,
.woocommerce-order-overview li,
.woocommerce-order-overview strong,
.woocommerce-customer-details,
.woocommerce-customer-details p,
.woocommerce-customer-details address {
    color: var(--neutral-dark, #343a40) !important;
}

/* 確保金額顯示正確 - 使用中性暗色確保對比度 */
.woocommerce-Price-amount,
.amount,
.woocommerce-table--order-details .amount {
    color: var(--neutral-dark, #343a40) !important;
    font-weight: var(--font-weight-semi-bold, 600);
}

/* 重要文字使用最深色 */
.woocommerce-order-overview strong,
.woocommerce-table--order-details strong,
.order-total .amount {
    color: var(--neutral-ultra-dark, #212529) !important;
}

.woocommerce-table--order-details .product-name::before {
    content: "🏅 ";
    margin-right: 8px;
}

/* 訂單摘要區塊 - 卡片式設計 */
.woocommerce-order-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-xl, 24px);
    margin: var(--space-3xl, 40px) 0;
    padding: 0;
}

.woocommerce-order-overview li {
    background: var(--neutral-ultra-light, white);
    color: var(--neutral-dark, #343a40);
    padding: var(--space-xl, 24px);
    border-radius: var(--radius-xl, 16px);
    box-shadow: var(--shadow-3, 0 4px 12px rgba(0, 0, 0, 0.08));
    list-style: none;
    border: 1px solid var(--neutral-light-trans-40, rgba(0, 0, 0, 0.06));
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* 每個卡片的頂部色帶 */
.woocommerce-order-overview li::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--primary, #3498DB);
    transition: height 0.3s ease;
}

.woocommerce-order-overview li:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-4, 0 8px 25px rgba(0, 0, 0, 0.12));
}

.woocommerce-order-overview li:hover::before {
    height: 5px;
}

.woocommerce-order-overview strong {
    color: var(--neutral, #6c757d) !important;
    font-size: var(--text-xs, 12px);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: var(--font-weight-medium, 500);
    display: block;
    margin-bottom: var(--space-s, 12px);
    opacity: 0.8;
}

.woocommerce-order-overview .amount,
.woocommerce-order-overview li > span:not(strong) {
    color: var(--neutral-ultra-dark, #212529) !important;
    font-size: var(--text-xl, 22px);
    font-weight: var(--font-weight-bold, 700);
    line-height: 1.2;
}

/* 特殊卡片樣式 */
.woocommerce-order-overview li:nth-child(1)::before { background: var(--primary, #3498DB); }
.woocommerce-order-overview li:nth-child(2)::before { background: var(--accent, #27AE60); }
.woocommerce-order-overview li:nth-child(3)::before { background: var(--secondary, #F1C40F); }
.woocommerce-order-overview li:nth-child(4)::before { background: var(--danger, #E74C3C); }

/* 付款方式特殊樣式 */
.woocommerce-order-overview li:has-text("TapPay") {
    border-left-color: var(--accent, #27AE60);
}

/* 地址區塊 */
.woocommerce-customer-details {
    margin-top: var(--space-3xl, 40px);
}

.woocommerce-column h2 {
    color: var(--primary, #3498DB) !important;
    font-size: var(--text-xl, 22px);
    margin-bottom: var(--space-l, 20px);
    padding: var(--space-m, 15px);
    background: var(--primary-ultra-light, rgba(52, 152, 219, 0.05));
    border-radius: var(--radius-m, 8px);
    border-left: var(--space-xs, 4px) solid var(--primary, #3498DB);
}

.woocommerce-column h2::before {
    content: "📍 ";
    margin-right: 10px;
}

.woocommerce-customer-details address {
    background: var(--neutral-ultra-light, white);
    color: var(--neutral-dark, #343a40) !important;
    padding: var(--space-xl, 25px);
    border-radius: var(--radius-l, 10px);
    box-shadow: var(--shadow-2, 0 3px 10px rgba(0, 0, 0, 0.08));
    line-height: var(--line-height-relaxed, 1.8);
    border-left: var(--space-xs, 4px) solid var(--secondary, #F1C40F);
}

/* 總計金額特殊強調 */
.order-total {
    background: var(--danger, #E74C3C) !important;
    color: var(--neutral-ultra-light, white) !important;
}

.order-total th,
.order-total td {
    color: var(--neutral-ultra-light, white) !important;
    font-size: var(--text-xl, 20px) !important;
    font-weight: var(--font-weight-bold, 700) !important;
    padding: var(--space-l, 20px) var(--space-m, 15px) !important;
}

.order-total::before {
    content: "💰 ";
}

/* 響應式設計優化 */
@media (max-width: 768px) {
    .woocommerce-order-received {
        max-width: 100%;
        margin: var(--space-m, 16px);
        padding: var(--space-xl, 24px) var(--space-l, 20px);
        border-radius: var(--radius-l, 12px);
    }
    
    .woocommerce-order-overview {
        grid-template-columns: 1fr;
        gap: var(--space-l, 18px);
        margin: var(--space-xl, 24px) 0;
    }
    
    .woocommerce-order-overview li {
        padding: var(--space-l, 20px);
        border-radius: var(--radius-l, 12px);
    }
    
    .woocommerce-notice--success,
    .woocommerce-message {
        padding: var(--space-xl, 24px);
        font-size: var(--text-lg, 18px);
        border-radius: var(--radius-l, 12px);
        margin: var(--space-xl, 24px) 0;
    }
    
    .woocommerce-order h2 {
        font-size: var(--text-xl, 24px);
        padding: var(--space-m, 12px);
    }
    
    .woocommerce-table--order-details th,
    .woocommerce-table--order-details td {
        padding: var(--space-s, 10px);
        font-size: var(--text-sm, 14px);
    }
    
    .aifa-welcome-message {
        padding: var(--space-xl, 24px);
        margin: var(--space-xl, 24px) 0;
        border-radius: var(--radius-l, 12px);
    }
}

/* 超小螢幕優化 */
@media (max-width: 480px) {
    .woocommerce-order-received {
        margin: var(--space-xs, 8px);
        padding: var(--space-l, 20px) var(--space-m, 16px);
    }
    
    .woocommerce-order-overview .amount,
    .woocommerce-order-overview li > span:not(strong) {
        font-size: var(--text-lg, 18px);
    }
}

/* 添加載入動畫 - 僅限於訂單確認內容 */
.woocommerce-order .woocommerce-order-received,
body.woocommerce-order-received .woocommerce-order-received {
    animation: slideIn 0.6s ease-out;
}

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

/* 卡片進入動畫 */
.woocommerce-order-overview li {
    animation: cardSlideIn 0.6s ease-out forwards;
    opacity: 0;
    transform: translateY(20px);
}

.woocommerce-order-overview li:nth-child(1) { animation-delay: 0.1s; }
.woocommerce-order-overview li:nth-child(2) { animation-delay: 0.2s; }
.woocommerce-order-overview li:nth-child(3) { animation-delay: 0.3s; }
.woocommerce-order-overview li:nth-child(4) { animation-delay: 0.4s; }

@keyframes cardSlideIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 協會品牌元素 - 修正頁首間距，僅限 WooCommerce 容器 */
.woocommerce-order .woocommerce-order::before,
.woocommerce-order::before {
    content: "🏛️ 亞太斷食協會";
    display: block;
    text-align: center;
    font-size: var(--text-xl, 24px);
    font-weight: var(--font-weight-bold, 700);
    color: var(--primary, #3b82f6);
    margin-bottom: var(--space-l, 20px);
    margin-top: 0;
    padding: var(--space-l, 20px);
    background: var(--base-ultra-light, rgba(59, 130, 246, 0.05));
    border-radius: var(--radius-l, 10px);
    border: 1px solid var(--primary-light-trans-40, rgba(59, 130, 246, 0.2));
}

/* 感謝訊息美化 - 使用 ACSS Success 色彩 */
.woocommerce-thankyou-order-received {
    font-size: var(--text-lg, 20px) !important;
    font-weight: var(--font-weight-semi-bold, 600);
    text-align: center;
    color: var(--success, #22c55e) !important;
    background: var(--success-ultra-light, rgba(34, 197, 94, 0.05)) !important;
    padding: var(--space-xl, 25px);
    border-radius: var(--radius-l, 10px);
    border-left: var(--space-xs, 5px) solid var(--success, #22c55e);
    margin-bottom: var(--space-2xl, 30px);
    margin-top: var(--space-l, 20px);
}

.woocommerce-thankyou-order-received::before {
    content: "✅ ";
    font-size: 24px;
    margin-right: 10px;
}

/* AIFA 168 斷食系統四色主題 - 使用 ACSS 變數 */
.aifa-color-eating { color: var(--red-500, #E74C3C) !important; } /* 進食期 - 紅色 */
.aifa-color-fasting { color: var(--blue-500, #3498DB) !important; } /* 斷食期 - 藍色 */  
.aifa-color-success { color: var(--green-500, #27AE60) !important; } /* 成功狀態 - 綠色 */
.aifa-color-hydration { color: var(--yellow-500, #F1C40F) !important; } /* 補水提醒 - 黃色 */

/* AIFA 實用背景色類別 */
.aifa-bg-eating { background-color: var(--red-50, rgba(231, 76, 60, 0.1)) !important; }
.aifa-bg-fasting { background-color: var(--blue-50, rgba(52, 152, 219, 0.1)) !important; }
.aifa-bg-success { background-color: var(--green-50, rgba(39, 174, 96, 0.1)) !important; }
.aifa-bg-hydration { background-color: var(--yellow-50, rgba(241, 196, 15, 0.1)) !important; }

/* AIFA 邊框色類別 */
.aifa-border-eating { border-color: var(--red-500, #E74C3C) !important; }
.aifa-border-fasting { border-color: var(--blue-500, #3498DB) !important; }
.aifa-border-success { border-color: var(--green-500, #27AE60) !important; }
.aifa-border-hydration { border-color: var(--yellow-500, #F1C40F) !important; }

/* 會員歡迎訊息 - 溫暖歡迎設計 */
.aifa-welcome-message {
    background: linear-gradient(135deg, var(--accent, #22c55e) 0%, var(--primary, #3498DB) 100%);
    color: var(--neutral-ultra-light, white);
    padding: var(--space-2xl, 32px);
    border-radius: var(--radius-xl, 18px);
    text-align: center;
    margin: var(--space-3xl, 40px) 0;
    box-shadow: var(--shadow-4, 0 12px 32px rgba(34, 197, 94, 0.2));
    border: 2px solid transparent;
    background-clip: padding-box;
    position: relative;
    overflow: hidden;
}

/* 歡迎訊息閃光效果 */
.aifa-welcome-message::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
    animation: shine 3s ease-in-out infinite;
}

@keyframes shine {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    50% { transform: translateX(100%) translateY(100%) rotate(45deg); }
    100% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
}

.aifa-welcome-message h3 {
    margin: 0 0 var(--space-m, 15px) 0;
    font-size: var(--text-xl, 22px);
    font-weight: var(--font-weight-bold, 700);
}

.aifa-welcome-message p {
    margin: 0;
    font-size: var(--text-base, 16px);
    line-height: var(--line-height-relaxed, 1.6);
    opacity: 0.95;
}