.elementor-9 .elementor-element.elementor-element-4af35791{--display:flex;border-style:none;--border-style:none;--padding-top:50px;--padding-bottom:50px;--padding-left:0px;--padding-right:0px;}@media(max-width:767px){.elementor-9 .elementor-element.elementor-element-4af35791{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}}/* Start custom CSS for container, class: .elementor-element-4af35791 *//* 針對 WooCommerce 登入與註冊表單的輸入框進行樣式修正 */
.woocommerce .u-columns.col2-set .input-text {
    border: 1px solid #cccccc !important; /* 加上淺灰色邊框，強制生效 */
    background-color: #ffffff; /* 確保背景是白色 */
    padding: 10px 15px; /* 增加內距，讓文字不會黏在框線上，增加點擊範圍 */
    border-radius: 4px; /* 加上一點圓角，視覺較柔和 */
    box-sizing: border-box; /* 確保邊框不會撐破版面 */
    height: auto; /* 避免高度被主題鎖死 */
    min-height: 45px; /* 設定最小高度，讓手機版容易點擊 */
}

/* 當滑鼠點擊輸入框時的樣式（Focus 狀態） */
.woocommerce .u-columns.col2-set .input-text:focus {
    border-color: #556B2F !important; /* 點擊時變為深綠色（參考你按鈕的色系） */
    outline: none; /* 移除瀏覽器預設的醜藍框 */
    box-shadow: 0 0 5px rgba(85, 107, 47, 0.3); /* 增加一點陰影光暈效果 */
}

/* --- 左側導覽選單樣式優化 --- */

/* 1. 幫整個選單列表加上外框 */
.woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid #e5e5e5; /* 淺灰外框 */
    border-radius: 5px; /* 圓角 */
    overflow: hidden; /* 確保圓角不被子元素蓋住 */
}

/* 2. 幫每一個選項加上底部分隔線 */
.woocommerce-MyAccount-navigation li {
    border-bottom: 1px solid #e5e5e5;
    margin: 0 !important; /* 強制移除預設間距 */
}

/* 移除最後一個選項的底部線條，比較美觀 */
.woocommerce-MyAccount-navigation li:last-child {
    border-bottom: none;
}

/* 3. 設定連結的內距與文字樣式 */
.woocommerce-MyAccount-navigation li a {
    display: block; /* 讓整條都能點擊 */
    padding: 15px 20px; /* 增加點擊範圍，舒適閱讀 */
    text-decoration: none;
    color: #333; /* 深色文字 */
    transition: all 0.3s ease; /* 滑鼠移過去的平滑效果 */
}

/* 4. 滑鼠移過去的效果 */
.woocommerce-MyAccount-navigation li a:hover {
    background-color: #f9f9f9; /* 淺灰背景 */
    color: #556B2F; /* 深綠色文字 */
}

/* 5. 「目前所在頁面」的高亮樣式 (關鍵) */
.woocommerce-MyAccount-navigation li.is-active a {
    background-color: #556B2F; /* 深綠色背景 */
    color: #ffffff; /* 白色文字 */
    font-weight: bold;
}

/* --- 右側內容區樣式優化 --- */

/* 幫右邊的歡迎詞與內容加上外框與內距 */
.woocommerce-MyAccount-content {
    border: 1px solid #e5e5e5;
    padding: 30px; /* 內容與邊框保持距離 */
    border-radius: 5px;
    background-color: #ffffff;
}

/* 修正手機版時的排列 (變成上下疊加) */
@media (max-width: 768px) {
    .woocommerce-MyAccount-navigation, 
    .woocommerce-MyAccount-content {
        width: 100% !important;
        margin-bottom: 20px;
        float: none;
    }
}

/* --- 登入/註冊 區塊卡片化設計 --- */

/* 1. 設定左右兩個區塊變成「卡片」 */
.woocommerce .u-columns.col2-set .u-column1, 
.woocommerce .u-columns.col2-set .u-column2 {
    background-color: #ffffff; /* 背景白 */
    padding: 40px; /* 內部留白，讓內容不會貼邊 */
    border-radius: 10px; /* 圓角設計 */
    border: 1px solid #f0f0f0; /* 極淡的邊框 */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05); /* 加上一點點漂浮陰影，增加層次感 */
    margin-bottom: 20px; /* 手機版時上下保持距離 */
    transition: transform 0.3s ease; /* 讓滑鼠移上去有微互動 */
}

/* 2. 滑鼠移到卡片上時，稍微浮起（可選） */
.woocommerce .u-columns.col2-set .u-column1:hover, 
.woocommerce .u-columns.col2-set .u-column2:hover {
    transform: translateY(-3px); /* 微微上浮 */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); /* 陰影加深 */
}

/* 3. 標題美化 */
.woocommerce .u-columns.col2-set h2 {
    text-align: center; /* 標題置中 */
    font-size: 24px; /* 字體大小 */
    margin-bottom: 30px; /* 與下方表單的距離 */
    color: #333; /* 深色字 */
    letter-spacing: 1px; /* 增加字距，看起來比較高級 */
    font-weight: 600;
}

/* 4. 按鈕優化（讓按鈕滿版，更有氣勢） */
.woocommerce .u-columns.col2-set .button {
    width: 100%; /* 按鈕寬度填滿 */
    padding: 15px 0; /* 增加按鈕高度 */
    font-size: 16px;
    border-radius: 5px; /* 按鈕圓角 */
    margin-top: 10px;
}

/* 5. 欄位標籤優化 */
.woocommerce form .form-row label {
    font-weight: 500;
    margin-bottom: 8px;
    color: #444;
    display: block; /* 確保標籤獨佔一行 */
}

/* 6. 調整左右兩欄的間距（避免黏太近） */
@media (min-width: 769px) {
    .woocommerce .col2-set {
        display: flex;
        justify-content: space-between; /* 左右分散 */
        gap: 30px; /* 中間增加間隙 */
    }
    .woocommerce .col2-set .col-1, 
    .woocommerce .col2-set .col-2 {
        float: none; /* 取消舊版浮動 */
        width: 48%; /* 設定寬度 */
        flex: 0 0 48%;
    }
}/* End custom CSS */