/* --- 1. 核心層級與彈窗框架 --- */
#wqo-modal { 
    display: none; position: fixed; z-index: 9000000; 
    left: 0; top: 0; width: 100%; height: 100%; 
    background: rgba(0,0,0,0.65); backdrop-filter: blur(5px); 
    align-items: center; justify-content: center; 
}
/* 必填提示 SweetAlert2 絕對置頂 */
.swal2-container { z-index: 99999999 !important; }

.wqo-content { 
background: #fff; 
    padding: 10px; 
    border-radius: 24px !important; /* 加入 !important 確保優先級 */
    width: 96%; 
    max-width: 420px; 
    max-height: 90vh; 
    display: flex; 
    flex-direction: column; 
    position: relative;
    overflow: hidden; /* 確保內容不會超出圓角邊界 */
    box-shadow: 0 10px 30px rgba(0,0,0,0.2); /* 增加陰影讓質感更好 */
}
.wqo-close-x { position: absolute; top: 10px; right: 10px; font-size: 30px; color: #bbb; cursor: pointer; }
.wqo-scroll-area { overflow-y: auto; flex: 1; padding-right: 8px; }

/* --- 2. 產品資訊：圖片與標題一行顯示 --- */
.wqo-product-info { 
    display: flex; 
    align-items: center; 
    gap: 15px; 
    margin-bottom: 15px; 
    padding-bottom: 15px; 
    border-bottom: 1px dashed #eee; 
}
.wqo-p-img-box img { 
    width: 65px !important; 
    height: 65px !important; 
    border-radius: 12px; 
    object-fit: cover; 
    border: 1px solid #f0f0f0;
}
.wqo-p-details { 
    flex: 1; 
    min-width: 0; 
}
.wqo-p-title { 
    margin: 0 0 4px 0 !important; 
    font-size: 15px !important; 
    font-weight: 700 !important; 
    color: #333; 
    line-height: 1.3 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
    overflow: hidden;
}
#wqo-display-price { color: #d32f2f; font-weight: 800; font-size: 17px; }

/* --- 3. 表單佈局 --- */
.wqo-content input, 
.wqo-content select, 
.wqo-content textarea { 
    width: 100% !important; height: 46px !important; 
    border: 1px solid #ddd !important; border-radius: 12px !important; 
    padding: 10px !important; box-sizing: border-box !important; 
    font-size: 14px !important; line-height: 1.2 !important;
}
.wqo-row-inline { display: flex; gap: 10px; margin-bottom: 12px; }
.wqo-col { flex: 1; min-width: 0; }
#wqo-store-list { height: auto !important; min-height: 46px; }

/* --- 4. 新增：超商品牌按鈕樣式 --- */
.wqo-brand-buttons { 
    display: flex; 
    gap: 10px; 
    margin-bottom: 12px; 
}
.wqo-b-btn { 
    flex: 1; 
    height: 46px; 
    border: 1px solid #ddd; 
    border-radius: 12px; 
    background: #fff; 
    cursor: pointer; 
    font-weight: 600; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    transition: all 0.2s;
    font-size: 14px; 
    color: #333;
    padding: 0;
}
.wqo-b-btn img { 
    width: 22px !important; 
    height: 22px !important; 
    margin-right: 8px !important; 
    object-fit: contain !important; /* 確保圖標比例不變形 */
    vertical-align: middle !important; /* 確保與文字對齊 */
}
/* 按鈕選中狀態 */
.wqo-b-btn.active { 
    border-color: #2e7d32; 
    background: #f1f8f1; 
    color: #2e7d32; 
    box-shadow: 0 0 8px rgba(46,125,50,0.15); 
    border-width: 2px; 
}

/* --- 5. 按鈕美化 --- */
.wqo-action-btns { display: flex; gap: 12px; margin-top: 20px; border-top: 1px solid #eee; padding-top: 15px; }
#wqo-submit { 
    flex: 2; 
    background: linear-gradient(135deg, #43a047 0%, #2e7d32 100%); 
    color: #fff !important; border: none; padding: 14px; 
    border-radius: 14px; font-size: 16px; font-weight: 700; 
    cursor: pointer; transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(46,125,50,0.2);
}
#wqo-submit:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(46,125,50,0.3); }
#wqo-close { 
    flex: 1; background: #f8f8f8; color: #888 !important; 
    border: 1px solid #ddd; border-radius: 14px; font-weight: 600; cursor: pointer; 
}

/* --- 6. 其它 UI 元素 --- */
.wqo-btn-container { margin: 18px 0; width: 100%; max-width: 320px; }
#wqo-open-btn {
    position: relative; display: flex; align-items: center; justify-content: center; width: 100%; padding: 5px 15px; 
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5253 100%); color: #fff !important; border: none; 
    border-radius: 50px; font-size: 19px; font-weight: 800; cursor: pointer; animation: wqo-breath 2.5s infinite;
}
@keyframes wqo-breath { 0% { box-shadow: 0 0 0 0 rgba(238,82,83,0.7); } 70% { box-shadow: 0 0 0 12px rgba(238,82,83,0); } 100% { box-shadow: 0 0 0 0 rgba(238,82,83,0); } }

.wqo-payment-card { background: #f8faff; border: 1px solid #e1e8f5; border-radius: 12px; padding: 15px; margin: 15px 0; }
.wqo-pay-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.wqo-pay-title { font-size: 13px; font-weight: 700; color: #2d3436; }
.wqo-pay-method-tag { background: #e3f2fd; color: #1976d2; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; }
.wqo-badge-free { background: #e8f5e9; color: #2e7d32; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px; }
.wqo-price-val { color: #e65100; font-weight: 800; font-size: 16px; }

.wqo-address-preview { 
    font-size: 13px; 
    color: #e64a19; 
    background: #fff3e0; 
    padding: 12px; 
    border-radius: 12px !important; /* 確保這裡也有圓角 */
    border-left: 5px solid #ff5722; 
    display: none; 
    margin: 10px 0; 
    line-height: 1.5; 
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
}

.wqo-address-preview.active { 
    display: block !important; 
}

.wqo-success-box { margin-top: 15px; background: #ebfbee; border: 2px solid #2ecc71; border-radius: 15px; padding: 12px; display: flex; align-items: center; gap: 12px; }

/* 美化彈窗內的滾動條 */
.wqo-scroll-area::-webkit-scrollbar {
    width: 6px;
}
.wqo-scroll-area::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}
.wqo-scroll-area::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}
.wqo-scroll-area::-webkit-scrollbar-thumb:hover {
    background: #aaa;
}