/* noSafari.css - 最終完美修正版 */
/* 目標：重置 Safari/iOS 樣式，但保留 Checkbox，並手動補回 Select 箭頭 */

/* ==========================================================================
   1. 精準鎖定：只重置「文字輸入類」 (絕對不碰 checkbox/radio/select)
   ========================================================================== */
input[type="text"], 
input[type="password"], 
input[type="date"], 
input[type="datetime-local"], 
input[type="month"], 
input[type="week"], 
input[type="time"], 
input[type="number"], 
input[type="email"], 
input[type="url"], 
input[type="search"], 
input[type="tel"],
textarea {
    /* 移除 iOS/Safari 的圓角與內陰影，讓它們變平 */
    -webkit-appearance: none !important;
    appearance: none !important;
    
    border-radius: 0;
    box-shadow: none !important;
    background-clip: padding-box;
    
    font-family: inherit;
    color: inherit;
}

/* ==========================================================================
   2. 針對 Select 下拉選單的「重建工程」 (修復箭頭消失問題)
   ========================================================================== */
select {
    /* 1. 先殺掉原生樣式 (包含原生箭頭) */
    -webkit-appearance: none !important;
    appearance: none !important;
    
    border-radius: 0;
    box-shadow: none !important;
    /* 注意：不要強制設定 background-color，以免蓋掉必填欄位的顏色 */
    
    font-family: inherit;
    color: inherit;
    line-height: 1.3;
    
    /* 2. 🔥 關鍵修復：用 !important 強制畫上一個深灰色的實心箭頭 */
    /* 這張圖是 SVG 向量圖，不管放大縮小都很清晰 */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333333' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
    
    /* 3. 設定箭頭位置：靠右對齊，垂直置中 */
    background-repeat: no-repeat !important;
    background-position: right 0.5em center !important;
    background-size: 0.65em auto !important; /* 調整一下大小，讓它看起來更像原生 */
    
    /* 4. 預留空間：右邊一定要留白，不然字會疊在箭頭上 */
    padding-right: 1.8em !important; 
}

/* 特別修正：如果是「多選 (multiple)」的 select，不需要箭頭 */
select[multiple] {
    background-image: none !important;
}

/* ==========================================================================
   3. 針對按鈕的矯正
   ========================================================================== */
button, 
input[type="button"], 
input[type="submit"], 
input[type="reset"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    margin: 0;
    padding: 0;
    background-color: transparent;
    border-radius: 0;
}

/* ==========================================================================
   4. 保護區：強制 Checkbox 與 Radio 使用系統預設
   ========================================================================== */
input[type="checkbox"],
input[type="radio"] {
    -webkit-appearance: auto !important;
    appearance: auto !important;
    box-shadow: none; 
    margin: 0;
    cursor: pointer;
}

/* ==========================================================================
   5. 日期選擇器 (Date) 優化
   ========================================================================== */
input[type="date"] {
    /* 1. 統一高度 */
    min-height: 2.25em; 
    
    /* 2. 🔥 關鍵修復：把 Flex 加回來，讓文字垂直置中 */
    display: flex; 
    align-items: center;
    
    width: 100%;
    
    /* 3. 背景與內距設定 */
    background-color: #fff;
    padding: 0 0.5em; 
    
    /* 移除 line-height 限制，讓 flex 決定垂直位置 */
    line-height: normal;
    
    /* 4. 自定義日曆圖示 (SVG) */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E") !important;
    
    background-repeat: no-repeat !important;
    background-position: right 0.5em center !important;
    background-size: 1.2em auto !important;
    
    /* 5. 確保父層是相對定位，讓子元素(隱形按鈕)可以對齊 */
    position: relative;
    
    /* 6. 預留空間給圖示 */
    padding-right: 2.5em !important;
}

/* === 針對桌機版原生圖示的特殊處理 (隱形感應區) === */
input[type="date"]::-webkit-calendar-picker-indicator {
    /* 讓它完全透明 */
    opacity: 0; 
    cursor: pointer;
    
    /* 🔥 關鍵修復：加大感應區寬度！ */
    /* 直接設為 4em (原本是 3em)，保證覆蓋到那個 SVG 圖示 */
    /* 甚至您可以設為 100% 讓整個輸入框都能點，但通常 4em 就很夠用且符合直覺 */
    width: 4em; 
    
    /* 絕對定位，填滿右側高度 */
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    
    margin: 0;
    padding: 0;
    
    /* 確保它浮在最上層 */
    z-index: 10; 
}

/* ==========================================================================
   6. 全局行為修正
   ========================================================================== */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
* {
    -webkit-tap-highlight-color: transparent;
}

/* ==========================================================================
   7. 停用狀態 (Disabled) 修正
   ========================================================================== */
input:disabled, 
button:disabled, 
select:disabled, 
textarea:disabled {
    opacity: 0.6 !important;
    -webkit-text-fill-color: currentColor;
    color: currentColor !important;
    cursor: not-allowed !important;
}