@charset "utf-8";
/* ============================================================================
 * 手機版「PC 同款卡片風」皮膚  2026-09-27
 * 需求（反饋第 12 項）：mobile 的會員中心，請跟 pc 一樣風格美化。
 * 做法：在 Mobile/head.html 最後引入本檔，用比 jQuery Mobile 更具體的選擇器
 *       覆蓋預設的灰色框線（#DDD）、灰色分段標題（#E9E9E9），
 *       改成 PC 公告同款：暖色卡邊 #f0e4d8 + 8px 圓角 + 柔和投影 +
 *       漸層標題條（#fff8f2→#ffeedd，字色 #c2410c）+ 虛線分隔。
 * 注意：只動「卡片/清單/標題條」的皮，不動版面結構與 jQM 的行為。
 * ========================================================================== */

/* ---------- 1. 清單卡片 ---------- */
.ui-content .ui-listview.ui-listview-inset{
	border:1px solid #f0e4d8;border-radius:8px;
	box-shadow:0 2px 10px rgba(150,110,90,.08);
	overflow:hidden;background:#fff;margin:0 0 12px;}
.ui-content .ui-listview.ui-listview-inset > li,
.ui-content .ui-listview.ui-listview-inset li > a,
.ui-content .ui-listview.ui-listview-inset li > .ui-btn{
	border-color:#f0e4d8;background-color:#fff;}

/* ---------- 2. 分段標題 → PC 公告同款的漸層標題條 ---------- */
.ui-content .ui-listview.ui-listview-inset > li.ui-li-divider{
	background-color:#ffeedd !important;
	background-image:linear-gradient(180deg,#fff8f2,#ffeedd) !important;
	color:#c2410c !important;font-weight:bold;font-size:13px;
	border:0 !important;border-bottom:1px solid #f7e5d3 !important;
	height:auto;line-height:20px;padding:7px 12px;
	text-shadow:none;}
.ui-content .ui-listview.ui-listview-inset > li.ui-li-divider a,
.ui-content .ui-listview.ui-listview-inset > li.ui-li-divider span a{
	color:#b08968 !important;font-weight:normal;text-shadow:none;}

/* ---------- 3. 資料列：暖色虛線分隔 ---------- */
.ui-content .ui-listview.ui-listview-inset > li{
	border:0;border-bottom:1px dashed #f3e7dc;background:#fff;
	text-shadow:none;}
.ui-content .ui-listview.ui-listview-inset > li:last-child{border-bottom:0;}
.ui-content .ui-listview.ui-listview-inset > li.ui-li-static{
	padding:9px 12px;font-size:13px;color:#3b3b3b;}
.ui-content .ui-listview.ui-listview-inset > li a{color:#c2410c;}

/* ---------- 4. 內容區 / 頁首頁尾 ---------- */
.ui-content{padding:10px;background:#f6f3f0;}
.ui-header.ui-bar-a{background-color:#ffeedd;
	background-image:linear-gradient(180deg,#fff8f2,#ffeedd);
	border-bottom:1px solid #f7e5d3;color:#c2410c;text-shadow:none;}
.ui-header.ui-bar-a .ui-title{color:#c2410c;font-weight:bold;}

/* ---------- 5. 「領取I幣」等卡片內的小標籤 ---------- */
.ui-content .ui-listview.ui-listview-inset .ui-btn{text-shadow:none;}

/* ---------- 6. 其餘 jQuery Mobile 灰塊（#F6F6F6 / 邊框 #DDD）→ 暖色
   2026-09-27 反饋第 14 項：移動端其他頁面（訂單／優惠券／財務／付款…）也統一皮膚。
   掃描後剩下的灰塊就是這三類：可折疊標題、頁尾條、導航格按鈕。 ---------- */
.ui-collapsible-heading-toggle,
.ui-collapsible-heading a.ui-btn{
	background-color:#fffaf5 !important;
	background-image:linear-gradient(180deg,#fffdfa,#fff3e8) !important;
	border-color:#f0e4d8 !important;color:#8a5a3a !important;text-shadow:none;}
.ui-collapsible-content{background:#fff;border-color:#f0e4d8;}
/* ---------- 6.1 頁腳（2026-09-27 反饋第 20 項）----------
   上一輪「統一暖色皮膚」把頁腳一起蓋掉了：`.ui-footer`／`.ui-footer .ui-btn`／`.ui-footer a`
   被套上近白底 #fff8f2 + 淡棕字 #b08968 → 整排按鈕看起來發白發淡（實測原貌是灰底 #f6f6f6 + 深灰字 #333 + 邊框 #ddd）。
   這一項改回原本灰底深灰字，另外補 hover／按下高亮（暖底橙字），手指點得下去也看得出來。 */
.ui-footer{color:#333;text-shadow:none;}
.ui-footer .ui-btn,.ui-footer a.ui-btn,.ui-footer a.ui-link,.ui-bar.ui-footer .ui-btn,
.ui-footer h4 a,.ui-footer h5 a,.ui-footer h6 a{
	background-color:#f6f6f6;background-image:none;
	border-color:#ddd;color:#333;text-shadow:none;
	-webkit-transition:background-color .15s ease,color .15s ease,border-color .15s ease;
	transition:background-color .15s ease,color .15s ease,border-color .15s ease;}
/* Hover／按下高亮（手機沒有 hover，:active 與 jQM 的 .ui-btn-active 同步給觸控回饋） */
.ui-footer .ui-btn:hover,.ui-footer a:hover,.ui-footer h4 a:hover,
.ui-footer .ui-btn:active,.ui-footer a:active,
.ui-footer .ui-btn.ui-btn-active,.ui-footer a.ui-btn-active{
	background-color:#ffeedd !important;background-image:none !important;
	border-color:#f0c9a8 !important;color:#c2410c !important;text-decoration:none;}
.ui-navbar a.ui-btn,.ui-navbar .ui-btn,
.ui-grid a.ui-btn,.ui-grid-solo a.ui-btn,.ui-grid-c a.ui-btn,.ui-grid-b a.ui-btn{
	background-color:#fffaf5 !important;
	background-image:linear-gradient(180deg,#fffdfa,#fff3e8) !important;
	border-color:#f0e4d8 !important;color:#8a5a3a !important;text-shadow:none;}
.ui-navbar a.ui-btn:hover,.ui-grid a.ui-btn:hover,.ui-collapsible-heading-toggle:hover{background-color:#fff2e6 !important;}
.ui-navbar .ui-btn-active,.ui-grid .ui-btn-active{background-color:#ffeedd !important;color:#c2410c !important;}
/* 表單按鈕（例如訂單頁的「合並付款」）與頁首其餘邊框 */
.ui-input-btn,input.ui-btn,button.ui-btn{
	background-color:#fffaf5 !important;
	background-image:linear-gradient(180deg,#fffdfa,#fff3e8) !important;
	border-color:#f0e4d8 !important;color:#8a5a3a !important;text-shadow:none;}
.ui-header.ui-bar-a,.ui-header.ui-bar-a *{border-color:#f7e5d3 !important;}

/* ---------- 7. 手機版連結美化（2026-09-27 反饋第 15 項） ----------
   手機 bundle 原本也是 .underline{color:#009933;text-decoration:underline}（綠字＋純實線），
   統一改成暖色字 + 半透明細底線，hover 才轉深。 */
.underline,a.underline{color:#c2410c;
	text-decoration:underline;text-decoration-color:rgba(194,65,12,.38);
	text-decoration-thickness:1px;text-underline-offset:2px;}
.underline:hover,a.underline:hover{color:#e2431f;text-decoration-color:#e2431f;}

/* ---------- 8. 手機版訂單／財務列表配色（2026-09-27 反饋第 16 項） ----------
   問題：skin.css §3 的 `.ui-listview-inse t > li a{color:#c2410c}` 讓整行文字都變橙紅色，
         加上模板本身的 .red（純紅 #F00）與 <font color=#d80000>，看起來「整排都是紅字」。
   對策：① 行內文回到深灰 #333（可讀性優先）；② 只有狀態／金額保留強調色，但換成柔和暖色。 */
.ui-content .ui-listview.ui-listview-inset > li a,
.ui-content .ui-listview.ui-listview-inset > li a:hover{color:#333 !important;text-shadow:none;}
.ui-content .ui-listview.ui-listview-inset > li .deep_blue{color:#3b639f;}
.ui-content .ui-listview.ui-listview-inset > li .gray{color:#9a9a9a;}
/* 模板用 <font color="#d80000"> 包住狀態（如「交易中」）→ CSS 可覆蓋 presentational 屬性 */
.ui-content .ui-listview.ui-listview-inset > li font[color]{color:#c2410c;}
.ui-content .ui-listview.ui-listview-inset > li .red{color:#d33a20;}
.ui-content .ui-listview.ui-listview-inset > li .green{color:#217e00;}

/* ---------- 9. 手機版表單「選擇賬號」浮窗（2026-09-27 反饋第 19 項） ----------
   原狀：模板 inline `position:absolute;z-index:200;width:100%;height:350px`。
         實測（390×844）：浮窗 top=819、高 352 → 幾乎整個落在螢幕下方；
         往下捲又會被 jQM 固定表頭（position:fixed、z-index:1000）壓住 → 被遮擋。
   對策：改成固定定位的置中彈窗（上下各留 9vh），z-index 拉到表頭之上。
         因為 inline style 優先權最高，這裡必須用 !important。
   關閉方式沿用 iframe 內的「取消」鈕（Info/lists.html → parent.info_select_close()）。 */
#infoSelHtml{
	position:fixed !important;left:4% !important;right:4% !important;
	top:9vh !important;bottom:9vh !important;
	width:auto !important;height:auto !important;margin:0 !important;
	z-index:2000 !important;
	border:1px solid #eadfd2 !important;border-radius:12px !important;
	background:#fff !important;overflow:hidden !important;
	box-shadow:0 12px 36px rgba(120,85,60,.32) !important;}
#infoSelHtml iframe{display:block;width:100% !important;height:100% !important;border:0;}