/* 分頁籤樣式 */
.login-tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #e0e0e0;
}
.tab-item {
    flex: 1;
    text-align: center;
    padding: 12px;
    cursor: pointer;
    font-size: 15px;
    color: #999;
    border-bottom: 3px solid transparent;
    transition: all 0.3s;
}
.tab-item.active {
    color: #d4af37; /* 金色 */
    border-bottom: 3px solid #d4af37;
    font-weight: bold;
}
/* 登入模式切換 */
.login-mode-box { display: none; }
.login-mode-box.active { display: block; animation: fadeIn 0.3s; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
/* 驗證碼按鈕 */
.btn-send-code-custom {
    position: absolute; right: 5px; top: 5px; bottom: 5px; width: 100px; 
    background: #333; color: #d4af37; border: none; border-radius: 20px; 
    font-size: 13px; cursor: pointer; z-index: 10;
}
.btn-send-code-custom:disabled { background: #ccc; color: #666; }
/* 條款彈窗專用樣式 */
.policy-modal-overlay {
    display: none; /* 預設隱藏 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* 半透明黑色背景 */
    z-index: 9999; /* 確保在最上層 */
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.policy-modal-content {
    background: #fff;
    
    /* 修改寬度設定 */
    width: 95%;      /* 手機版左右留一點邊距，比較美觀 */
    max-width: 480px; /* 電腦版最大鎖定在 480px */
    
    height: 80vh; 
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    position: relative;
}

/* 修改後的 .policy-header */
.policy-header {
    padding: 15px;
    border-bottom: 1px solid #5a4616;
    
    display: flex;
    /* 修改 1：將 space-between 改為 center，讓內容置中 */
    justify-content: center; 
    align-items: center;
    
    /* 修改 2：加入 relative，作為按鈕絕對定位的參考點 */
    position: relative; 
    
    background: linear-gradient(to right, #000000 0%, #000000 25%, #c4a15b 85%, #dabe81 100%);
    border-radius: 10px 10px 0 0;
}

/* 修改標題顏色 */
.policy-title {
    font-size: 18px;
    font-weight: bold;
    color: #fff; 
    /* 修改 3：確保文字水平置中 */
    text-align: center;
    width: 100%;
}

/* 修改關閉按鈕顏色 */
.policy-close-btn {
    /* 修改 4：改為絕對定位，固定在右側 */
    position: absolute;
    right: 15px; 
    
    background: none;
    border: none;
    font-size: 24px;
    color: #fff; 
    cursor: pointer;
    line-height: 1;
    opacity: 0.8;
    transition: opacity 0.2s;
    z-index: 10; /* 確保按鈕在最上層 */
}

.policy-close-btn:hover {
    opacity: 1;
}

.policy-body {
    flex: 1; /* 填滿剩餘空間 */
    overflow: hidden;
    position: relative;
}

.policy-iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}
/* ----------------------------------
   忘記密碼 Modal
---------------------------------- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    z-index: 3000;
    
    /* 預設隱藏 */
    display: none; 
    opacity: 0;
    
    align-items: center;
    justify-content: center;
    padding: 20px;
    
    /* 加上 transition */
    transition: opacity 0.3s ease;
}

/* 當加上 active class 時 */
.modal-overlay.active {
    opacity: 1;
    /* display 由 JS 控制，這裡不用寫 */
}
.modal-card {
    background: #fff;
    width: 100%;
    max-width: 320px;
    border-radius: 12px;
    padding: 25px 20px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    color: #333;
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.modal-overlay.active .modal-card {
    transform: translateY(0);
}

.modal-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #000;
}

.modal-desc {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
    line-height: 1.5;
}

.modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.btn-modal-cancel {
    flex: 1;
    background: #ccc;
    color: #333;
    border: none;
    padding: 10px;
    border-radius: 20px;
    font-weight: bold;
    cursor: pointer;
}

.btn-modal-send {
    flex: 1;
    background: var(--gold-main);
    color: #fff;
    border: none;
    padding: 10px;
    border-radius: 20px;
    font-weight: bold;
    cursor: pointer;
}

/* ----------------------------------
   頁尾客服資訊
---------------------------------- */
.footer-customer-info {
    text-align: center;
    padding: 10px 0 20px 0; 
    
    /* 👉 這裡加上 20px (數值越大，線條離上面越遠) */
    margin-top: 10px; 
    
    border-top: 1px solid rgba(0, 0, 0, 0.1); 
    font-size: 13px;
    color: #333; 
    font-weight: 500; 
}

.footer-customer-info p {
    margin-bottom: 8px;
    line-height: 1.5;
}

.footer-customer-info p:last-child {
    margin-bottom: 0;
}

.footer-customer-info a {
    /*color: #d4af37;*/
    color: #d39e00; 
    text-decoration: none;
    font-weight: bold;
    font-size: 15px;
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
}

.footer-customer-info a:hover {
    color: #000; 
    text-decoration: underline;
}

/* 橘色 (適合：等待中、特殊提醒) */
.label-orange { background-color: #fd7e14; }
.label-orange[href]:hover, .label-orange[href]:focus { background-color: #e26300; }

/* 藍綠色/湖水綠 (適合：新功能、進階項目) */
.label-teal { background-color: #20c997; }
.label-teal[href]:hover, .label-teal[href]:focus { background-color: #1ba87e; }

/* 桃紅色 (適合：女性客群、促銷活動) */
.label-pink { background-color: #e83e8c; }
.label-pink[href]:hover, .label-pink[href]:focus { background-color: #d62576; }

/* 深灰色/黑色 (適合：已作廢、停用、隱藏) */
.label-dark { background-color: #343a40; }
.label-dark[href]:hover, .label-dark[href]:focus { background-color: #1d2124; }

/* 淺灰色帶深色字 (適合：草稿、尚未開始) */
.label-light { background-color: #e9ecef; color: #333; }
.label-light[href]:hover, .label-light[href]:focus { background-color: #dae0e5; color: #333; }

/* 棕色 (適合：特殊分類、VIP) */
.label-brown { background-color: #795548; }
.label-brown[href]:hover, .label-brown[href]:focus { background-color: #5d4037; }