/* === Dolly's Bakery 結帳頁加強版 CSS === */

/* 1. 強制設定左右分欄 (針對 Elementor 環境優化) */
@media (min-width: 900px) {
    /* 讓表單變成彈性盒子 */
    .woocommerce-checkout form.checkout {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
    }

    /* 左邊：客戶資料 (加寬一點) */
    .woocommerce-checkout #customer_details {
        width: 47% !important;
        float: none !important;
        margin-right: 0 !important;
    }

    /* 右邊：訂單與付款 (固定寬度) */
    .woocommerce-checkout #order_review_heading,
    .woocommerce-checkout #order_review {
        width: 100% !important;
        float: none !important;
        clear: none !important;
    }

    /* 讓右邊區塊稍微黏在頂部，不用一直往下捲 */
    .woocommerce-checkout #order_review {
        position: sticky;
        top: 30px;
    }
}

/* 2. 輸入框美化 (強制覆蓋預設樣式) */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
    padding: 12px !important;
    border: 1px solid #ccc !important;
    background-color: #fff !important;
    border-radius: 5px !important;
}

/* 3. 右側訂單區塊美化 (白色卡片風格) */
#order_review {
    background-color: #ffffff !important;
    padding: 25px !important;
    border: 2px solid #eee !important;
    border-radius: 10px !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05) !important;
}

/* 4. 下單按鈕 (黑色強烈風格) */
#place_order {
    background-color: #000 !important;
    color: #fff !important;
    width: 100% !important;
    padding: 15px !important;
    font-size: 18px !important;
    border-radius: 10px !important;
    text-transform: uppercase;
    font-weight: bold;
    margin-top: 10px !important;
}
#place_order:hover {
    background-color: #333 !important; /* 滑鼠移上去變深灰 */
}

/* =========================================
   Dolly's Bakery - 字體與尺寸縮小調整
   ========================================= */

/* 1. 縮小標題 (如：帳單資訊、您的訂單) */
#customer_details h3,
#order_review_heading {
    font-size: 18px !important; /* 原本較大，改為 18px */
    margin-bottom: 15px !important;
}

/* 2. 縮小輸入框與文字 */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
    font-size: 13px !important; /* 輸入的字變小 */
    padding: 10px 12px !important; /* 框框的高度變矮一點 */
}

/* 3. 縮小欄位標籤 (如：名字、街道地址) */
.woocommerce form .form-row label {
    font-size: 13px !important;
    margin-bottom: 5px !important;
}

/* 4. 縮小右側訂單內容 (商品名稱、價格) */
#order_review table.shop_table th, 
#order_review table.shop_table td {
    font-size: 13px !important;
    padding: 10px 0 !important; /* 表格行距縮小 */
}

/* 總金額特別保留稍微大一點，但比原本小 */
#order_review table.shop_table tfoot .order-total .amount {
    font-size: 16px !important; 
}

/* 5. 縮小下單按鈕 */
#place_order {
    font-size: 12px !important;
    padding: 12px !important; /* 按鈕變矮一點 */
    margin-top: 12px !important;
}

/* =========================================
   Dolly's Bakery - 小標題加粗加大調整
   ========================================= */

#customer_details h3,
#order_review_heading {
    font-size: 20px !important; /* 稍微加大 (原本18px -> 20px) */
    font-weight: 700 !important; /* 加粗 (Bold) */
    color: #000 !important;      /* 純黑色，增加對比度 */
    letter-spacing: 0.5px !important; /* 稍微增加字距，看起來更像標題 */
    margin-bottom: 20px !important;   /* 增加下方的留白 */
}

/* /* =========================================
   Dolly's Bakery 購物車 - 最終統一修正版
   ========================================= */

/* --- 1. 全局字體控制 (強制統一) --- */
/* 鎖定購物車內所有文字的基礎大小，解決忽大忽小 */
.shop_table.cart, 
.shop_table.cart td, 
.shop_table.cart th, 
.shop_table.cart a, 
.shop_table.cart span,
.shop_table.cart strong,
.shop_table.cart b {
    font-family: 'Lato', sans-serif;
    font-size: 14px !important; /* 統一內文為 14px */
    color: #5D4037 !important;  /* 統一深咖啡色 */
    line-height: 1.5 !important;
}

/* 標題字體稍微大一點點，做區隔 */
.woocommerce-cart h1.entry-title {
    font-family: 'Noto Serif TC', serif;
    font-size: 22px !important; 
    color: #8D6E63 !important;
    text-align: center;
    margin: 20px 0 30px 0 !important;
    letter-spacing: 1px;
}

/* --- 2. 表格樣式優化 --- */
.shop_table.cart {
    border: none !important;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* 讓它看起來像一張卡片 */
    overflow: hidden;
}

/* --- 3. 手機版強制排版 (解決錯位) --- */
@media (max-width: 768px) {
    
    /* 隱藏表頭 */
    .shop_table.cart thead { display: none !important; }

    /* 設定每一行商品的網格佈局 */
    .shop_table.cart tr.cart_item {
        display: grid !important;
        /* 定義三欄：圖片(80px) | 內容(自動填滿) | 移除按鈕(30px) */
        grid-template-columns: 80px 1fr 30px !important;
        /* 定義內容區的垂直排列 */
        grid-template-areas:
            "image name remove"
            "image price remove"
            "image quantity remove"
            "image subtotal remove";
        gap: 5px 15px; /* 欄位間距 */
        padding: 20px !important;
        border-bottom: 1px solid #f0f0f0 !important;
        align-items: center; /* 垂直置中 */
        position: relative;
    }

    /* (A) 圖片區：固定左側 */
    .shop_table.cart td.product-thumbnail {
        grid-area: image;
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        border: none !important;
    }
    .shop_table.cart td.product-thumbnail img {
        width: 80px !important;
        height: 80px !important;
        object-fit: cover;
        border-radius: 6px;
    }

    /* (B) 商品名稱：字體加粗，置頂 */
    .shop_table.cart td.product-name {
        grid-area: name;
        display: block !important;
        padding: 0 !important;
        border: none !important;
    }
    .shop_table.cart td.product-name a {
        font-weight: 700 !important;
        font-size: 15px !important; /* 名稱比內文大 1px */
        text-decoration: none;
    }

    /* (C) 價格與數量：統一格式 */
    .shop_table.cart td.product-price,
    .shop_table.cart td.product-quantity,
    .shop_table.cart td.product-subtotal {
        display: flex !important;
        align-items: center; /* 文字垂直置中 */
        padding: 2px 0 !important;
        border: none !important;
    }

    /* 隱藏多餘的小計 (只顯示單價比較乾淨) */
    .shop_table.cart td.product-subtotal {
        display: none !important; 
    }

    /* 指定位置 */
    .shop_table.cart td.product-price { grid-area: price; }
    .shop_table.cart td.product-quantity { grid-area: quantity; }

    /* (D) 關鍵修正：標籤文字 (如 "價格:") 統一縮小變灰 */
    .shop_table.cart td::before {
        content: attr(data-title) ": "; /* 確保有冒號 */
        font-size: 12px !important; /* 標籤字體縮小 */
        color: #999 !important;     /* 標籤顏色變淡 */
        font-weight: normal !important;
        margin-right: 8px;
        min-width: 35px; /* 對齊用 */
    }
    /* 商品名稱不需要 "商品:" 標籤 */
    .shop_table.cart td.product-name::before { display: none !important; }
    /* 移除按鈕不需要標籤 */
    .shop_table.cart td.product-remove::before { display: none !important; }

    /* (E) 數量輸入框：縮小並對齊 */
    .woocommerce .quantity .input-text.qty {
        width: 40px !important;
        height: 30px !important;
        padding: 0 5px !important;
        font-size: 14px !important;
        text-align: center;
        border: 1px solid #ddd !important;
        border-radius: 4px;
        margin-left: 0 !important;
    }

    /* (F) 移除按鈕 (X)：固定右上角 */
    .shop_table.cart td.product-remove {
        grid-area: remove;
        display: block !important;
        padding: 0 !important;
        border: none !important;
        text-align: right;
        align-self: start; /* 靠上對齊 */
    }
    .shop_table.cart td.product-remove a.remove {
        color: #bbb !important; /* 淺灰色 */
        font-size: 18px !important;
        font-weight: 300 !important;
        background: none !important; /* 移除紅色圈圈 */
    }
    .shop_table.cart td.product-remove a.remove:hover {
        color: #d32f2f !important;
    }
}