/**
 * 台灣縣市鄉鎮市選單前端樣式
 * Version: 1.2.2
 * 
 * 安全性：此檔案應該只能通過 WordPress 載入
 */

/* 台灣欄位容器 */
.taiwan-state-field,
.taiwan-city-field,
.taiwan-postcode-field {
    position: relative;
}

/* 下拉選單樣式增強 */
.taiwan-state-field select,
.taiwan-city-field select {
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: transparent;
    cursor: pointer;
    transition: border-color 0.3s ease;
}

.taiwan-state-field select:focus,
.taiwan-city-field select:focus {
    outline: none;
    border-color: #007cba;
    box-shadow: 0 0 0 1px #007cba;
}

/* 載入狀態樣式 */
.taiwan-city-field select option[value=""]:first-child {
    color: #999;
}

/* 郵遞區號欄位樣式 */
.taiwan-postcode-field input {
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: border-color 0.3s ease;
}

.taiwan-postcode-field input:focus {
    outline: none;
    border-color: #007cba;
    box-shadow: 0 0 0 1px #007cba;
}

/* 欄位標籤樣式 */
.taiwan-state-field label,
.taiwan-city-field label,
.taiwan-postcode-field label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #333;
}

/* 必填欄位標記 */
.taiwan-state-field label .required,
.taiwan-city-field label .required,
.taiwan-postcode-field label .required {
    color: #e2401c;
    text-decoration: none;
    margin-left: 2px;
}

/* 錯誤狀態樣式 */
.taiwan-state-field.woocommerce-invalid select,
.taiwan-city-field.woocommerce-invalid select,
.taiwan-postcode-field.woocommerce-invalid input {
    border-color: #e2401c;
}

.taiwan-state-field.woocommerce-invalid select:focus,
.taiwan-city-field.woocommerce-invalid select:focus,
.taiwan-postcode-field.woocommerce-invalid input:focus {
    box-shadow: 0 0 0 1px #e2401c;
}

/* 驗證訊息樣式 */
.taiwan-state-field .woocommerce-error,
.taiwan-city-field .woocommerce-error,
.taiwan-postcode-field .woocommerce-error {
    color: #e2401c;
    font-size: 0.875em;
    margin-top: 5px;
    display: block;
}

/* 響應式設計 */
@media (max-width: 768px) {
    .taiwan-state-field,
    .taiwan-city-field,
    .taiwan-postcode-field {
        margin-bottom: 15px;
    }
    
    .taiwan-state-field select,
    .taiwan-city-field select,
    .taiwan-postcode-field input {
        min-height: 44px;
        font-size: 16px; /* 防止 iOS 縮放 */
    }
}

/* WooCommerce 特定樣式覆蓋 */
.woocommerce .taiwan-state-field,
.woocommerce .taiwan-city-field,
.woocommerce .taiwan-postcode-field {
    margin-bottom: 20px;
}

.woocommerce .taiwan-state-field:last-child,
.woocommerce .taiwan-city-field:last-child,
.woocommerce .taiwan-postcode-field:last-child {
    margin-bottom: 0;
}

/* 我的帳戶頁面特殊樣式 */
.woocommerce-edit-address .taiwan-state-field,
.woocommerce-edit-address .taiwan-city-field,
.woocommerce-edit-address .taiwan-postcode-field {
    margin-bottom: 1em;
}

/* 載入動畫 */
.taiwan-city-field.loading select {
    background: transparent url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><circle cx="8" cy="8" r="7" stroke="%23999" stroke-width="2" fill="none" stroke-dasharray="10 5" stroke-linecap="round"><animateTransform attributeName="transform" type="rotate" values="0 8 8;360 8 8" dur="1s" repeatCount="indefinite"/></circle></svg>');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px 16px;
}

/* 成功狀態 - 移除綠色邊框 */
.taiwan-state-field.woocommerce-validated select,
.taiwan-city-field.woocommerce-validated select,
.taiwan-postcode-field.woocommerce-validated input {
    border-color: #ddd;
}

/* 隱藏原始的 WooCommerce 驗證圖示，使用自訂樣式 */
.taiwan-state-field .select2-container,
.taiwan-city-field .select2-container {
    width: 100% !important;
}

/* 移除所有驗證相關的視覺回饋 */
.taiwan-state-field select:valid,
.taiwan-city-field select:valid,
.taiwan-postcode-field input:valid,
.taiwan-state-field.woocommerce-valid select,
.taiwan-city-field.woocommerce-valid select,
.taiwan-postcode-field.woocommerce-valid input {
    border-color: #ddd;
    box-shadow: none;
}

/* 確保沒有額外的背景顏色 */
.taiwan-state-field select,
.taiwan-city-field select {
    background: transparent;
    background-image: none;
}

/* 減少載入時的視覺跳閃 */
.woocommerce-billing-fields__field-wrapper {
    transition: all 0.2s ease-in-out;
}

/* 隱藏正在重排的欄位，避免跳閃 */
.field-reordering .woocommerce-billing-fields__field-wrapper > p {
    opacity: 0.3;
    transition: opacity 0.1s ease-in-out;
}

.field-reordering.reorder-complete .woocommerce-billing-fields__field-wrapper > p {
    opacity: 1;
}

/* 只在台灣時隱藏郵遞區號欄位 */
body.taiwan-selected #billing_postcode_field,
body.taiwan-selected #shipping_postcode_field {
    display: none !important;
}

/* 新加坡特殊處理 - 隱藏州/縣市欄位 */
.singapore-hidden-field,
body.singapore-selected #billing_state_field,
body.singapore-selected #shipping_state_field {
    display: none !important;
}

/* 當選擇新加坡時隱藏州/縣市欄位 */
body[data-billing-country="SG"] #billing_state_field,
body[data-shipping-country="SG"] #shipping_state_field {
    display: none !important;
}

/* 防止初始載入時的閃爍 */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.woocommerce-checkout.fields-initialized .woocommerce-billing-fields__field-wrapper {
    opacity: 1;
}

/* 確保台灣欄位在載入時就有正確的樣式 */
.taiwan-state-field select,
.taiwan-city-field select {
    opacity: 1;
    visibility: visible;
}

/* 載入城市時的視覺效果，避免閃爍 */
.taiwan-city-field select.loading-cities {
    opacity: 0.7;
    pointer-events: none;
}

/* 防止重複點擊時的閃爍 */
.taiwan-city-field select[data-loaded-state] {
    transition: none;
}

/* 確保台灣欄位的必填樣式 */
.taiwan-state-field label.required_field,
.taiwan-city-field label.required_field {
    position: relative;
}

/* 移除 CSS 添加的星號，因為已經在 JavaScript 中處理 */

/* 移除必填欄位的預設紅框，使用一般邊框樣式 */
.taiwan-state-field.validate-required select:invalid,
.taiwan-city-field.validate-required select:invalid,
.taiwan-state-field.woocommerce-invalid select,
.taiwan-city-field.woocommerce-invalid select,
.taiwan-state-field.validate-required select,
.taiwan-city-field.validate-required select {
    border-color: #ddd !important;
}

/* 禁用狀態的樣式 */
.taiwan-city-field select:disabled,
.taiwan-state-field select:disabled {
    background-color: #f5f5f5;
    color: #999;
    cursor: not-allowed;
    opacity: 0.6;
}

/* 隱藏不必要的錯誤訊息 */
.woocommerce-error li[style*="display: none"] {
    display: none !important;
}

/* 確保與主題兼容性 */
.woocommerce form .form-row .taiwan-state-field,
.woocommerce form .form-row .taiwan-city-field,
.woocommerce form .form-row .taiwan-postcode-field {
    width: 100%;
}

/* 高對比度支援 */
@media (prefers-contrast: high) {
    .taiwan-state-field select,
    .taiwan-city-field select,
    .taiwan-postcode-field input {
        border-width: 2px;
    }
    
    .taiwan-state-field select:focus,
    .taiwan-city-field select:focus,
    .taiwan-postcode-field input:focus {
        border-width: 3px;
    }
}

/* 減少動畫偏好支援 */
@media (prefers-reduced-motion: reduce) {
    .taiwan-state-field select,
    .taiwan-city-field select,
    .taiwan-postcode-field input {
        transition: none;
    }
}

/* 隱藏所有欄位下方的 inline 錯誤訊息 */
.checkout-inline-error-message,
p[id$="_description"].checkout-inline-error-message,
p[id$="_description"] {
    display: none !important;
}

/* 確保隱藏所有具有 aria-describedby 錯誤描述的元素 */
[id$="_description"][class*="error"],
[id$="_description"][class*="invalid"] {
    display: none !important;
}

/* 特別針對 WooCommerce 結帳頁面的錯誤訊息 */
.woocommerce-checkout .checkout-inline-error-message,
.woocommerce-checkout p[id$="_description"] {
    display: none !important;
}

/* 隱藏我的帳戶頁面的 inline 錯誤訊息 */
.woocommerce-edit-address .checkout-inline-error-message,
.woocommerce-edit-address p[id$="_description"] {
    display: none !important;
}