.wcab-auction {
	margin-top: 1em;
}

/*
 * 單一商品頁 active 狀態的倒數：包成一個方框（.wcab-countdown-box），跟狀態方框（下方
 * .wcab-status-banner）共用同一組 --wcab-box-*（底色/框線/標題/內文）變數——0.3.0 三度修訂：
 * 站主要求「這兩種狀態的配色應該一致，要分別調整的是方框裡的文字、內文、底色、框線」，
 * 拿掉原本兩組各自獨立、用 color-mix() 自動算深淺的「主色」設計，改成四個直接對應最終顯示
 * 效果的變數，狀態方框跟倒數方框共用同一組，天生一致。
 */
.wcab-countdown-box {
	background: var( --wcab-box-bg );
	border: 1px solid var( --wcab-box-border );
	border-radius: 6px;
	padding: 0.75em 1em;
	margin: 0.75em 0;
}

.wcab-countdown {
	margin: 0;
}

.wcab-countdown__label {
	display: block;
	font-size: 0.85em;
	color: var( --wcab-box-body );
}

.wcab-countdown__value {
	font-size: 1.6em;
	font-weight: bold;
	color: var( --wcab-box-title );
	font-variant-numeric: tabular-nums;
}

/* 商品彙整頁 loop 的倒數：不做整塊方框（在網格裡太重），只用醒目文字色，跟著標題/價格排下來。
   跟商品頁倒數方框、狀態方框共用同一組 --wcab-box-title。 */
.wcab-countdown--loop {
	font-size: 0.9em;
	font-weight: bold;
	color: var( --wcab-box-title );
	margin: 0.3em 0;
}

.wcab-countdown--loop .wcab-countdown__value {
	font-size: 1em;
}

.wcab-end-datetime,
.wcab-start-datetime,
.wcab-anti-snipe-line {
	font-size: 0.9em;
	color: #666;
	margin-top: 0.15em;
}

/* 倒數方框裡的「加價幅度」一行：比日期再明顯一點，因為出價時要用到。用 --wcab-box-title
   （標題色），不是 --wcab-box-body（內文）——這行是刻意要醒目，不是次要說明文字。 */
.wcab-increment-line {
	font-size: 0.95em;
	font-weight: 600;
	color: var( --wcab-box-title );
	margin-top: 0.35em;
}

.wcab-current-bid {
	font-size: 1.3em;
	margin: 0.5em 0;
}

.wcab-bid-form .form-row {
	margin-bottom: 0.75em;
}

.wcab-bid-label {
	display: block;
	margin-bottom: 0.35em;
}

/* 金額輸入框與出價按鈕並排在同一列，比照一般商品「數量欄位 + 加入購物車」的排法 */
.wcab-bid-row {
	display: flex;
	align-items: stretch;
	gap: 0.5em;
	flex-wrap: wrap;
}

.wcab-bid-row .wcab-bid-amount {
	flex: 0 1 160px;
	width: auto;
	max-width: 160px;
	margin: 0;
}

.wcab-bid-row button[type="submit"] {
	margin: 0;
}

.wcab-bid-hint {
	display: block;
	font-size: 0.85em;
	color: #666;
	margin-top: 0.4em;
}

.wcab-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba( 0, 0, 0, 0.5 );
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100000;
}

/* 跟 .wcab-bid-hint 曾經踩過同一種坑（class 的 display 贏過 [hidden] 特異性打平時後載入的樣式），
   這裡先發制人明確補上，避免關閉後視窗還是顯示 */
.wcab-modal-overlay[hidden] {
	display: none;
}

.wcab-modal {
	position: relative;
	background: #fff;
	border-radius: 6px;
	max-width: 420px;
	width: calc(100% - 2em);
	padding: 1.5em;
	box-shadow: 0 4px 24px rgba( 0, 0, 0, 0.2 );
}

.wcab-modal h3 {
	margin-top: 0;
}

.wcab-modal-close {
	position: absolute;
	top: 0.5em;
	right: 0.5em;
	background: none;
	border: none;
	font-size: 1.5em;
	line-height: 1;
	cursor: pointer;
	color: #666;
	padding: 0.25em;
}

.wcab-modal-actions {
	display: flex;
	justify-content: flex-end;
	gap: 0.75em;
	margin-top: 1.25em;
}

.wcab-bid-message {
	min-height: 1.2em;
}

.wcab-bid-message--error {
	color: #c00;
}

.wcab-bid-message--success {
	color: #2e7d32;
}

.wcab-bid-history__scroll {
	max-height: 400px;
	overflow-y: auto;
	/* 欄位在窄螢幕可能擠不下（使用者名稱/金額都不適合截斷），寬度不夠時整個表格橫向捲動，
	   不強制擠壓欄寬造成內容換行錯位 */
	overflow-x: auto;
}

.wcab-bid-history__list {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95em;
}

.wcab-bid-history__list th,
.wcab-bid-history__list td {
	padding: 0.5em 0.6em;
	text-align: left;
	border-bottom: 1px solid #eee;
	white-space: nowrap;
}

.wcab-bid-history__list thead th {
	font-weight: 600;
	color: #666;
	border-bottom: 2px solid #ddd;
	position: sticky;
	top: 0;
	background: #fff;
}

.wcab-bid-history__empty {
	color: #666;
}

/* 還沒有任何出價紀錄時，表格只剩表頭一列，看起來像多餘的空殼——直接連表格一起藏起來，
   只留上面的「目前還沒有出價紀錄」文字。tbody 只要輪詢收到第一筆紀錄，:has() 條件就不成立，
   表格自動出現，不用另外寫 JS 切換。不支援 :has() 的舊瀏覽器就是表頭常駐顯示，可接受的降級。 */
.wcab-bid-history__list:has( tbody:empty ) {
	display: none;
}

/*
 * .wcab-price* 系列（get_price_html() 輸出的價格文字）跟 .wcab-badge* 系列（商品列表縮圖旁的
 * 「即將開始」徽章）的樣式改放在 ultimate-auction.php 用 wp_add_inline_style() 掛在站台範圍
 * 的 placeholder handle（wcab-inline）——這個檔案只在單一商品頁載入（is_product()），但價格跟
 * 徽章在分類頁/搜尋結果/相關商品等任何商品列表情境都會出現，需要站台範圍都套用得到的樣式。
 */

/*
 * 狀態提示框：原本只有「尚未開始」用寫死的黃色方框（.wcab-scheduled-banner），其餘結標/得標/
 * 流標狀態只是一行純文字。改成所有非進行中的狀態都共用同一個方框外觀（.wcab-status-banner）。
 *
 * 0.3.0 三度修訂：得標／等待付款／尚未開始這三種狀態原本用「主色濃淡 + 邊框樣式」區分
 * （得標最濃、等待付款/尚未開始較淡），主色來源是後台一個「競標狀態方框主色」設定，用
 * color-mix() 自動算出每種狀態的底色/框線深淺。站主要求「這兩種狀態（狀態方框/倒數方框）
 * 的配色應該一致，要分別調整的是方框裡的文字、內文、底色、框線」——拿掉「主色 + 自動算深淺」
 * 這套機制，改成四個直接對應最終顯示效果的變數（`--wcab-box-title`/`--wcab-box-body`/
 * `--wcab-box-bg`/`--wcab-box-border`，定義見 ultimate-auction.php 站台範圍 handler），
 * 狀態方框跟倒數方框共用同一組，天生一致。**得標/等待付款/尚未開始三種狀態現在用完全相同的
 * 底色/框線/文字色**，不再靠濃淡分辨是哪種狀態——只有「尚未開始」還保留虛線邊框（形狀差異，
 * 跟顏色無關）跟其他兩態做區隔；「已結束／流標」維持固定中性灰，不受這四個設定影響。
 */
.wcab-status-banner {
	background: var( --wcab-box-bg );
	border: 1px solid var( --wcab-box-border );
	border-radius: 6px;
	padding: 0.75em 1em;
	margin: 0.75em 0;
}

.wcab-status-banner__title {
	font-weight: bold;
	font-size: 1.1em;
	color: var( --wcab-box-title );
	margin: 0 0 0.3em;
}

/* 方框裡的次要說明文字（例如「請盡快完成結帳…」「流標。」）——0.3.0 前固定吃中性文字色、
   不可調；站主要求「內文」也要能獨立設色，改吃可自訂的 --wcab-box-body（預設值還是主題的
   中性文字色，沒特別設定時外觀不變）。 */
.wcab-status-banner__text {
	margin: 0;
	color: var( --wcab-box-body );
}

.wcab-status-banner .wcab-start-datetime,
.wcab-status-banner .wcab-end-datetime {
	margin: 0.15em 0 0;
}

/* 尚未開始：虛線邊框，純粹是形狀差異（暗示「等待中、還沒開始」），不是顏色差異——顏色
   四個狀態現在共用同一組 --wcab-box-*，不再靠濃淡分辨。 */
.wcab-status-banner--scheduled {
	border-style: dashed;
}

/* 已結束／流標：固定中性灰（收尾、不帶主色），不受上面四個方框配色設定影響，維持既有設計決策 */
.wcab-status-banner--ended {
	background: var( --wcab-neutral-bg );
	border-color: var( --wcab-neutral-border );
}

.wcab-status-banner--ended .wcab-status-banner__title,
.wcab-status-banner--ended .wcab-status-banner__text {
	color: var( --wcab-neutral-text );
}

/* 「開標時通知我」按鈕：跟方框留一點距離，未訂閱時線框樣式（呼應「還沒發生的事」），
   訂閱後改實心主色底，狀態一眼看得出來，不用讀按鈕文字才知道 */
.wcab-start-notify-row {
	margin: 0.6em 0 0;
}

.wcab-start-notify-btn {
	background: transparent !important;
	border: 1px solid var( --wcab-box-title, #1559ed ) !important;
	color: var( --wcab-box-title, #1559ed ) !important;
}

.wcab-start-notify-btn--subscribed {
	background: var( --wcab-box-title, #1559ed ) !important;
	border-color: var( --wcab-box-title, #1559ed ) !important;
	color: #fff !important;
}

/*
 * 輪詢平滑更新：最高價／出價次數／出價紀錄只有在值真的變動時才由 JS 加上 .wcab-flash（見
 * wcab-frontend.js 的 setHtmlIfChanged/setTextIfChanged/renderHistory），閃一下強調色淡底再
 * 淡出，讓使用者注意到「這裡剛更新了」，同時因為沒變就不重寫 DOM，消除原本每輪整段重繪的
 * 閃爍/跳動感。用 --wcab-box-title（方框配色設定裡的「標題文字色」）當閃光色，換設定時閃光
 * 也跟著變。
 */
@keyframes wcab-flash {
	/* 淡淡的強調色（混大量透明），只是提示更新、不會蓋掉底下的文字；不支援 color-mix 的舊瀏覽器
	   會讓這個 from 影格失效、等於不閃光，屬可接受降級 */
	from { background-color: color-mix( in srgb, var( --wcab-box-title ) 22%, transparent ); }
	to   { background-color: transparent; }
}

.wcab-flash {
	animation: wcab-flash 1s ease-out;
	border-radius: 3px;
}

/* 出價成功時清空欄位後的成功訊息加粗 */
.wcab-bid-message--success {
	font-weight: 600;
}

/* 出價中的 loading spinner（按鈕內，文字前面旋轉的小圓圈） */
.wcab-spinner {
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 2px solid rgba( 255, 255, 255, 0.4 );
	border-top-color: #fff;
	border-radius: 50%;
	animation: wcab-spin 0.6s linear infinite;
	vertical-align: middle;
	margin-right: 6px;
}

@keyframes wcab-spin {
	to { transform: rotate( 360deg ); }
}

/* 出價紀錄高亮自己的出價：表格列不能直接用 border-left（左邊界會被表格邊框裁掉），
   改在第一欄的 td 加左邊框，視覺效果跟原本清單版的做法一致。背景直接用方框底色（--wcab-box-bg），
   不用再另外算一次淡底 color-mix——方框配色本身就已經是「淡色調」的設計意圖。 */
.wcab-bid-history__mine td {
	font-weight: 600;
	background: var( --wcab-box-bg );
}

.wcab-bid-history__mine td:first-child {
	border-left: 3px solid var( --wcab-box-title, #1559ed );
	padding-left: 5px;
}

/* 倒數計時最後 60 秒警示：數字變紅、輕微脈搏動畫 */
.wcab-countdown--urgent .wcab-countdown__value {
	color: #c00;
	animation: wcab-pulse 1s ease-in-out infinite;
}

@keyframes wcab-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.6; }
}