/**
 * Theme Name: blocksy-child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */


:root{
	--product-size: 150px;
}

.home-grid .elementor-container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 35px;
	grid-auto-flow: column;
}

.home-grid .elementor-col-50 {
	width: 100%;
}

/* --- 商品卡片固定寬度 & 自動排列 --- */

.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fit, var(--product-size));
  justify-content: center; /* 置中對齊 */
  gap: 20px;
  margin: 0 auto;
  max-width: 100%; /* 讓 grid 寬度自動等於內容寬 */
}

/* 固定商品卡片寬度 */
.woocommerce ul.products li.product {
  width: var(--product-size) !important; /* 固定寬度 */
  margin: 0 !important;
	flex-direction: column !important;
	justify-content: space-between;
}

/* 卡片rating */
.product-rating-number{
	color: var(--theme-palette-color-3) !important;
}

/* 卡片title */
.woocommerce-loop-product__title {
	text-align: left;
	margin-right: auto;
	margin-bottom: auto !important;
}

.product-rating-number{
	text-align: left;
	margin-top: 10px
}


img.wp-post-image {
  width: var(--product-size);
  height: var(--product-size);
  object-fit: cover;       /* 讓圖片自動裁切填滿 */
  object-position: center; /* 讓裁切位置居中 */
}


/* Contact information */
.contact-info {
	margin: 10px 10px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.contact-text {
	margin: auto 0;
}


/* Single Commerce */
.ct-media-container {
  aspect-ratio: 1 / 1 !important;
}

.ct-media-container img.wp-post-image {
  height: 100%;
  object-fit: cover;
}

/* Form Elements */
select {
	background-color: var(--theme-palette-color-2) !important;
}

select:focus {
  background-color: var(--theme-palette-color-2) !important;
}

input[name="quantity"]:focus {
  background-color: var(--theme-palette-color-2) !important;
}

textarea[name="comment"]{
	background-color: var(--theme-palette-color-6) !important;
}

/* My Account Navigation */
.woocommerce-MyAccount-navigation {
    display:none !important;
}


/* Location */
form.customize-unpreviewable input {
	background-color: var(--theme-palette-color-2) !important;
}

form.customize-unpreviewable span{
	background-color: var(--theme-palette-color-2) !important;
}

span.select2-search.select2-search--dropdown{
	background-color: var(--theme-palette-color-2) !important;
}

span.select2-results li{
	background-color: var(--theme-palette-color-2) !important;
}

span.select2-search.select2-search--dropdown > input{
	background-color: var(--theme-palette-color-2) !important;
}

span.select2-search.select2-search--dropdown > input:focus{
	border-color: var(--theme-palette-color-4) !important;
}


div.woocommerce-MyAccount-content button {
	background-color: var(--theme-palette-color-6) !important;
}

div.woocommerce-MyAccount-content button:hover {
	background-color: var(--theme-palette-color-2) !important;
}


/* Add Account */
form.woocommerce-EditAccountForm span{
	background-color: var(--theme-palette-color-2) !important;
}

form.woocommerce-EditAccountForm input{
	background-color: var(--theme-palette-color-2) !important;
}

.xoo-ml-phone-cc + .select2.select2-container .select2-selection__rendered, .xoo-ml-phone-cc + .select2 .selection, .xoo-ml-phone-cc + .select2 .select2-selection 
{
	height: 100% !important;
}
span.select2-container .select2-selection--single .select2-selection__arrow {
	height: auto !important;
}

/* Add Account Dropdown */
.select2-dropdown {
	z-index:4 !important;
}


/* Cart */
.woocommerce-cart-form__contents .coupon input{
	background-color: var(--theme-palette-color-2) !important;
}

button[name="apply_coupon"] {
	background-color: var(--theme-palette-color-6) !important;
}

.woocommerce-message{
	background-color: var(--theme-palette-color-6) !important;
}

.woocommerce-info {
	background-color: var(--theme-palette-color-6) !important;
}

.checkout-button {
	background-color: var(--theme-palette-color-6) !important;
}

.ct-cart-content {
	background-color: var(--theme-palette-color-6) !important;
}

.ct-cart-content .product-title:hover {
	color: var(--theme-palette-color-3) !important;
}

span.onsale {
	background-color: var(--theme-palette-color-6) !important;
	border-radius: 4px;
}

/* Login Page */
.woocommerce-Input {
	background-color: var(--theme-palette-color-2) !important;
}
span.select2-selection.select2-selection--single {
	background-color: var(--theme-palette-color-2) !important;
}

.select2-results__option.select2-results__option--disabled {
	display: none !important;
}

button.woocommerce-button {
	background-color: var(--theme-palette-color-6) !important;
}

button.woocommerce-button:hover {
	background-color: var(--theme-palette-color-2) !important;
}

button.xoo-ml-login-otp-btn{
	background-color: var(--theme-palette-color-2) !important;
} 

button.xoo-ml-login-otp-btn:hover{
	background-color: var(--theme-palette-color-3) !important;
} 

button.xoo-ml-low-back{
	background-color: var(--theme-palette-color-2) !important;
}

button.xoo-ml-low-back:hover{
	background-color: var(--theme-palette-color-3) !important;
}

button.xoo-ml-open-lwo-btn{
	background-color: var(--theme-palette-color-2) !important;
}

button.xoo-ml-open-lwo-btn:hover{
	background-color: var(--theme-palette-color-3) !important;
}


/* Single Product */
input.wapf-input {
	background-color: var(--theme-palette-color-2) !important;
}

/* Select List */
select option{
	color: var(--theme-palette-color-2)!important;
}


/* Checkout Page */
div.woocommerce-billing-fields input{
	background-color: var(--theme-palette-color-2) !important;
}

textarea#order_comments{
	background-color: var(--theme-palette-color-2) !important;
}

button#place_order {
	background-color: var(--theme-palette-color-6) !important;
}

button#place_order:hover {
	background-color: var(--theme-palette-color-3) !important;
}

p.woocommerce-notice--success {
	background-color: var(--theme-palette-color-6) !important;
}


/* Cart Action */
.ct-cart-actions {
	display: none !important;
}

/* Single Product */
.woocommerce-product-gallery {
	display: none !important;
}

.summary.entry-summary.entry-summary-items {
	width: 100%;
    margin-left: 0 !important;
}

.ct-product-divider{
	margin: 0 !important
}


/* 2. 購物車列表卡片化 */
.woocommerce-cart-form {
    background: #ffffff !important;
    padding: 25px !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
    margin-bottom: 30px !important;
    border: none !important;
}

/* 3. 購物車總計卡片化 */
.cart_totals {
    background: #ffffff !important;
    padding: 25px !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    border: none !important;
}

/* 4. 表格細節優化 */
.shop_table.cart {
    border-collapse: separate !important;
    border-spacing: 0 10px !important;
    border: none !important;
}

.shop_table.cart thead th {
    background: transparent !important;
    border-bottom: 2px solid #f1f1f1 !important;
    text-transform: uppercase;
    font-size: 0.85rem;
    color: #888;
    letter-spacing: 1px;
}

/* 5. 數量輸入框美化 */
.quantity input.qty {
    border-radius: 8px !important;
    border: 1px solid #ddd !important;
    padding: 8px !important;
    font-weight: 600 !important;
    width: 60px !important;
}

/* 6. 前往結帳按鈕強化 (CTA) */
.checkout-button {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 18px !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(30, 60, 114, 0.3) !important;
    transition: all 0.3s ease !important;
    margin-top: 15px !important;
}

/* 7. 優惠券與更新按鈕弱化 */
.coupon input#coupon_code {
    text-align: center;
    height: 45px !important;
    border: 1px solid #ddd !important;
	border-radius: 12px;
}

/* 1. 移除按鈕 (Remove Button) 優化 */
.woocommerce-cart-form .product-remove a.remove {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 30px !important;
    height: 30px !important;
    font-size: 18px !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

.woocommerce-cart-form .product-remove a.remove:hover {
    background-color: #ff4d4f !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(255, 77, 79, 0.3) !important;
}

/* 2. 商品圖片 (Product Image) 優化 */
.woocommerce-cart-form .product-thumbnail img {
    max-width: 80px !important; /* 確保大小適中 */
    height: auto !important;
    border-radius: 10px !important; /* 圓角效果 */
    box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
    transition: transform 0.3s ease;
}

.woocommerce-cart-form .product-item:hover .product-thumbnail img {
    transform: scale(1.05); /* 滑過時輕微放大 */
}

/* 3. 數量輸入框 (Quantity Input) 優化 */
.woocommerce-cart-form .product-quantity .quantity {
    display: inline-flex !important;
    align-items: center;
	justify-content: center;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    overflow: hidden;
    background: #f9f9f9;
}

.woocommerce-cart-form .product-quantity .quantity input.qty {
    width: 50px !important;
    height: 40px !important;
    border: none !important;
    background: transparent !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #333 !important;
    text-align: center !important;
    padding: 0 !important;
}

/* 移除瀏覽器預設的數字箭頭，讓畫面更清爽 (選用) */
.woocommerce-cart-form .product-quantity .quantity input::-webkit-outer-spin-button,
.woocommerce-cart-form .product-quantity .quantity input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* 4. 商品名稱樣式微調 */
.woocommerce-cart-form .product-name a {
    font-weight: 600 !important;
    color: #2c3e50 !important;
    text-decoration: none !important;
    font-size: 1.05rem;
}

.woocommerce-cart-form .product-name a:hover {
    color: #1e3c72 !important;
}

/* 5. 小計金額加粗 */
.woocommerce-cart-form .product-subtotal .amount {
    font-weight: 700 !important;
    color: var(--theme-palette-color-6) !important;
}

.woocommerce-Price-amount.amount{
	color: var(--theme-palette-color-6) !important;
	font-weight: 700 !important;
}
.ct-woocommerce-cart-form .woocommerce-cart-form table:first-child{
	margin-top: 0 !important;
}

/* 1. 商品單價顏色 */
.woocommerce-cart-form .product-price .amount {
    font-weight: 600 !important;
    color: #555 !important;
}

/* 2. 購物車總計區塊 - 標籤顏色 */
.cart_totals table th {
    color: #333 !important;
    font-weight: 600 !important;
}

/* 3. 購物車總計區塊 - 金額顏色 */
.cart_totals .order-total .amount,
.cart_totals .shop_table .amount {
    color: #1e3c72 !important; /* 與主按鈕同色系，強調最終金額 */
    font-weight: 700 !important;
    font-size: 1.2em !important; /* 稍微放大總計金額 */
}

.ct-woocommerce-cart-form .cart_totals h2{
	color: var(--theme-palette-color-6);
}

.ct-woocommerce-cart-form .cart_totals table td{
	color: var(--theme-palette-color-6);
}

span.ct-product-multiply-symbol {
    color: var(--theme-palette-color-6);
    font-weight: 900;
}

.quantity[data-type=type-2] .ct-increase:before {
	color: var(--theme-palette-color-6);
	font-weight: 700;
}

.quantity[data-type=type-2] .ct-increase:hover::before {
	color: #fff;
}

div.quantity[data-type] input[type=number] {
	color: var(--theme-palette-color-6);
}

.quantity[data-type=type-2] .ct-decrease:before {
	color: var(--theme-palette-color-6);
	font-weight: 700;
}

.quantity[data-type=type-2] .ct-decrease:hover::before {
	color: #fff;
}

td.actions button{
  border-radius: 12px !important;
}

/* 1. 確保數量選擇器容器為 Flex 佈局並垂直居中 */
.quantity[data-type="type-2"] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    overflow: hidden;
    background: #f9f9f9;
    height: 40px; /* 固定高度防止跑版 */
}

/* 2. 使用 Order 重新排列按鈕順序： 減 -> 數字 -> 加 */
.quantity[data-type="type-2"] .ct-decrease {
    order: 1; /* 減號排第一 */
    width: 35px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.quantity[data-type="type-2"] input.qty {
    order: 2; /* 數字排第二 */
    width: 45px !important;
    height: 100% !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
}

.quantity[data-type="type-2"] .ct-increase {
    order: 3; /* 加號排第三 */
    width: 35px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* 3. 修正 Blocksy 圖標 (::before) 的對齊 */
.quantity[data-type="type-2"] .ct-decrease::before,
.quantity[data-type="type-2"] .ct-increase::before {
    position: static !important; /* 移除絕對定位 */
    font-size: 14px;
    line-height: 1;
    display: block;
}

/* 4. 針對手機版行動區塊的間距優化 */
.product-mobile-actions {
    display: flex;
    align-items: center;
    gap: 10px; /* 增加數量、X、價格之間的間距 */
}

/* --- 1. 結帳頁面整體容器卡片化 --- */
.woocommerce-checkout .ct-customer-details, 
.woocommerce-checkout .ct-order-review {
    background: #ffffff !important;
    padding: 30px !important;
    border-radius: 15px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
    margin-bottom: 30px !important;
    border: none !important;
}

/* --- 2. 標題樣式強化 (帳單資訊 / 您的訂單) --- */
.woocommerce-checkout h3#order_review_heading,
.woocommerce-billing-fields h3 {
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    color: var(--theme-palette-color-6) !important;
    border-bottom: 2px solid #f1f1f1 !important;
    padding-bottom: 15px !important;
    margin-bottom: 25px !important;
    letter-spacing: 1px;
}

/* --- 3. 輸入框與選擇框優化 --- */
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .select2-container--default .select2-selection--single {
    background-color: #f8f9fa !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 10px !important;
    padding: 12px 15px !important;
    height: auto !important;
    transition: all 0.3s ease;
	color: var(--theme-palette-color-2) !important;
}

.woocommerce-checkout .form-row input.input-text:focus {
    border-color: var(--theme-palette-color-6) !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(30, 60, 114, 0.1) !important;
}

/* --- 4. 電話驗證區塊 (OTP) 特別優化 --- */
.wc-otp-row-group {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

#wc-send-otp-btn {
    background-color: var(--theme-palette-color-6) !important;
    border-radius: 10px !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease;
}

#wc-send-otp-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* --- 5. 訂單清單表格美化 --- */
.shop_table.woocommerce-checkout-review-order-table {
    border: none !important;
    border-radius: 0 !important;
}

.shop_table.woocommerce-checkout-review-order-table thead th {
    background: transparent !important;
    color: #888 !important;
    text-transform: uppercase !important;
    font-size: 0.8rem !important;
    border-bottom: 1px solid #eee !important;
}

.shop_table.woocommerce-checkout-review-order-table .cart_item td {
    padding: 15px 0 !important;
    border-bottom: 1px solid #f9f9f9 !important;
}

.shop_table.woocommerce-checkout-review-order-table .product-name {
    font-weight: 500 !important;
    color: #333 !important;
}

.shop_table.woocommerce-checkout-review-order-table .product-total .amount {
    font-weight: 700 !important;
    color: var(--theme-palette-color-6) !important;
}

/* --- 6. 總計區塊強化 --- */
.shop_table.woocommerce-checkout-review-order-table tfoot tr.order-total th,
.shop_table.woocommerce-checkout-review-order-table tfoot tr.order-total td {
    background: #fdfdfd !important;
    padding: 20px 0px !important;
    border-top: 2px solid #f1f1f1 !important;
}

.order-total .amount {
    font-size: 1.5rem !important;
    color: #1e3c72 !important; /* 強調最終金額 */
}

/* --- 7. 下單購買按鈕 (CTA) - 延續購物車漸層風格 --- */
#place_order {
    width: 100% !important;
    padding: 20px !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(30, 60, 114, 0.3) !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    border: none !important;
    margin-top: 20px !important;
    cursor: pointer;
}

#place_order:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 25px rgba(30, 60, 114, 0.4) !important;
}

/* --- 8. 付款方式區塊優化 --- */
.woocommerce-checkout-payment {
    background: #f9f9f9 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin-top: 20px !important;
}

.woocommerce-checkout-payment ul.payment_methods {
    border-bottom: 1px solid #eee !important;
    padding-bottom: 15px !important;
}

.payment_box {
    background: #ffffff !important;
    border-radius: 8px !important;
    font-size: 0.9rem !important;
    color: #666 !important;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.02) !important;
}

#customer_details .col-2{
	margin-top: 0 !important;
}

.woocommerce-checkout .ct-customer-details, .woocommerce-checkout .ct-order-review {
	margin-bottom: 0 !important;
}

table.shop_table tr {
	color: var(--theme-palette-color-2);
}

#payment label {
	color: var(--theme-palette-color-2);
}

#billing_phone_otp_field label {
	color: var(--theme-palette-color-2)
}

/* --- 1. 自訂欄位主容器卡片化 --- */
.customField {
    background: #ffffff !important;
    padding: 25px !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid #f0f0f0 !important;
	margin: 30px 0px !important;
}

/* --- 2. 標題與標籤樣式 (使用主題色 6) --- */
.customField .wapf-field-label label {
    color: var(--theme-palette-color-6) !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    margin-bottom: 10px !important;
    display: block;
}

/* 必填星號顏色 */
.customField .wapf-field-label abbr.required {
    color: #ff4d4f !important;
    text-decoration: none !important;
}

/* --- 3. 輸入框與選擇框樣式優化 --- */
.customField .wapf-input {
    width: 100% !important;
    border-radius: 10px !important;
    border: 2px solid #f0f0f0 !important;
    background-color: #fcfcfc !important;
    font-size: 1rem !important;
    transition: all 0.3s ease !important;
    color: #333 !important;
}

/* 輸入框聚焦 (Focus) 狀態 */
.customField .wapf-input:focus {
    border-color: var(--theme-palette-color-6) !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(var(--theme-palette-color-6-rgb, 30, 60, 114), 0.1) !important;
    outline: none !important;
}

/* 下拉選單 (Select) 特殊處理 */
.customField select.wapf-input {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    padding-right: 40px !important;
}

/* --- 4. 欄位間距與排版 --- */
.customField .wapf-field-container {
    margin-bottom: 20px !important;
}

.customField .wapf-field-container:last-child {
    margin-bottom: 0 !important;
}

.wapf-field-description {
	color: var(--theme-palette-color-2);
}

.woocommerce-MyAccount-content {
	display: none !important;
}

.woocommerce-form-coupon-toggle {
	display: none !important;
}