/* === WC LINE Order Notify — 前台樣式 === */

/* ── Google 官方配色 ── */
.wclon-btn--google-light {
    background: #ffffff;
    color: #1f1f1f;
}
/* 複合選擇器確保邊框優先度高於基底 border: transparent */
.wclon-auth-btn.wclon-btn--google-light,
.wclon-connect-btn.wclon-btn--google-light {
    border-color: #dadce0;
}
.wclon-btn--google-light:hover {
    background: #f8fafe;
    color: #1f1f1f;
}
.wclon-auth-btn.wclon-btn--google-light:hover,
.wclon-connect-btn.wclon-btn--google-light:hover {
    border-color: #4285f4;
}

/* ── Google 官方配色（深色）── */
.wclon-btn--google-dark {
    background: #131314;
    color: #e3e3e3;
}
.wclon-auth-btn.wclon-btn--google-dark,
.wclon-connect-btn.wclon-btn--google-dark {
    border-color: #8e918f;
}
.wclon-btn--google-dark:hover {
    background: #2d2e2f;
    color: #e3e3e3;
}

/* ── Apple 官方配色 ── */
.wclon-btn--apple-black {
    background: #000000;
    color: #ffffff;
}
.wclon-btn--apple-black:hover {
    background: #333333;
    color: #ffffff;
}
.wclon-btn--apple-white {
    background: #ffffff;
    color: #000000;
}
.wclon-auth-btn.wclon-btn--apple-white,
.wclon-connect-btn.wclon-btn--apple-white {
    border-color: #000000;
}
.wclon-btn--apple-white:hover {
    background: #f2f2f2;
    color: #000000;
}

/* ── 綁定狀態區塊（短代碼完整版）── */
.wclon-connect-box {
    margin: 0 0 20px;
    padding: 0;
    border: none;
    background: none;
}

.wclon-connected-status {
    font-weight: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.wclon-connected-status--line {
    color: #00b300;
}

.wclon-connected-status--google {
    color: inherit;
}

.wclon-connected-status--apple {
    color: inherit;
}

.wclon-section-title {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    margin: 28px 0 12px;
    padding-top: 24px;
    border-top: 1px solid #e0e0e0;
}

.wclon-ios-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #ebebeb;
}

.wclon-ios-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.wclon-ios-row:first-child {
    padding-top: 0;
}

.wclon-ios-label {
    font-size: inherit;
    color: inherit;
}

.wclon-ios-row--action {
    justify-content: flex-start;
}

.wclon-notify-toggle {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    flex-shrink: 0;
}

.wclon-notify-toggle__track {
    position: relative;
    width: 44px;
    height: 24px;
    border-radius: 12px;
    background: #ccc;
    transition: background 0.2s;
}

.wclon-notify-toggle--on .wclon-notify-toggle__track {
    background: var(--theme-palette-color-1, #2271b1);
}

.wclon-notify-toggle__thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.wclon-notify-toggle--on .wclon-notify-toggle__thumb {
    transform: translateX(20px);
}

/* 解除綁定：純文字連結，不用按鈕外觀 */
.wclon-unlink-text {
    font-size: inherit;
    color: inherit;
    text-decoration: underline;
    flex-shrink: 0;
    opacity: 0.7;
}
.wclon-unlink-text:hover {
    color: #b91c1c;
    opacity: 1;
}

/* 綁定帳號：純文字連結，與解除綁定同排版但不帶警示色（非破壞性動作） */
.wclon-link-text {
    font-size: inherit;
    color: inherit;
    text-decoration: underline;
    flex-shrink: 0;
    opacity: 0.7;
}
.wclon-link-text:hover {
    color: inherit;
    opacity: 1;
}

.wclon-connect-hint {
    margin-top: 6px;
    color: inherit;
    font-size: inherit;
    opacity: 0.7;
}

/* ── 結帳頁精簡綁定列 ── */
/* v1.38.0：綁定列改放進購物車右側欄／結帳頁訂單摘要，樣式比照終極電商的「點數／儲值金折抵」
   區塊（.twshop-points-redemption）：無底色、無外框，只用下緣分隔線區隔；標題粗體、按鈕高度
   跟主題表單元件一致，兩個區塊（LINE／Google+Apple）一律直排。 */
.wclon-checkout-bar-group {
    display: block;
    clear: both;
    margin: 0 0 1em;
}

.wclon-checkout-bar {
    display: block;
    padding: 0 0 15px;
    margin: 0 0 15px;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    background: none;
}

.wclon-checkout-bar__label {
    display: block;
    margin: 0 0 8px;
    font-size: inherit;
    font-weight: inherit;
    line-height: 1.4;
    color: inherit;
}

.wclon-checkout-bar__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
}

.wclon-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 120px;
    gap: 6px;
    min-height: var(--theme-form-field-height, 40px);
    padding: 0 14px;
    font-size: inherit;
    font-weight: bold;
    line-height: 1;
    text-decoration: none;
    border: 1px solid transparent;
    box-sizing: border-box;
    white-space: nowrap;
}

.wclon-chip svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.wclon-chip--line {
    background: #00c300;
    color: #fff;
}
.wclon-chip--line:hover {
    background: #00a800;
    color: #fff;
}

.wclon-chip--google {
    background: #fff;
    color: #1f1f1f;
    border-color: #dadce0;
}
.wclon-chip--google:hover {
    border-color: #4285f4;
    color: #1f1f1f;
}

.wclon-chip--apple {
    background: #000;
    color: #fff;
}
.wclon-chip--apple:hover {
    background: #333;
    color: #fff;
}

/* 已綁定標記（結帳頁精簡 chip 使用，帳戶詳細資料頁改用獨立一行 + 解除綁定按鈕，見 .wclon-account-social__row） */
.wclon-chip--done {
    background: #f0fdf4;
    color: #15803d;
    border-color: #bbf7d0;
    cursor: default;
}

.wclon-chip__check {
    font-weight: 700;
}

/* ── 帳戶詳細資料頁：社交帳號綁定 / 通知設定，各平台 / 各設定獨立一行 ── */
.wclon-account-social,
.wclon-account-notify {
    margin: 0 0 2em;
    padding: 0;
    border: none;
    background: none;
}

/* 區塊標題是 <h3>，字型／字級／字重／顏色全部交給主題的標題樣式，這裡只清掉邊距 */
.wclon-account-social__label {
    margin: 0 0 10px;
}

.wclon-account-social__rows {
    display: flex;
    flex-direction: column;
}

.wclon-account-social__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.wclon-account-social__row:first-child {
    border-top: none;
    padding-top: 0;
}

.wclon-account-social__row-label {
    font-size: inherit;
    color: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ── 登入 / 註冊頁外框 ── */
.wclon-auth-wrap {
    margin: 16px 0;
}

.wclon-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.wclon-divider hr {
    flex: 1;
    border: none;
    border-top: 1px solid #ddd;
    margin: 0;
}

.wclon-divider span {
    color: inherit;
    font-size: inherit;
    white-space: nowrap;
    opacity: 0.7;
}

/* 社交登入按鈕 flex 橫排（空間不足時自動折行） */
.wclon-social-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: stretch;
    margin-top: 24px;
    margin-bottom: 20px;
}

.wclon-social-row > .wclon-divider {
    flex: 0 0 100%;
}

/* v1.29.0：按鈕改放在帳密表單「上方」時，分隔線是這一列的最後一個元素（緊貼著下面的帳號
   密碼欄位），原本為了跟按鈕隔開而設的 margin-bottom 要換到 margin-top；整列的上邊距也
   收掉——它現在是表單裡的第一個元素，24px 會在表單頂端多出一段空白。
   v1.31.2：margin-bottom 補 !important，理由見下方踩坑——Blocksy 帳號彈窗有一條
   `.ct-account-modal form > :last-of-type { margin-bottom: 0 }`，選擇器特異度比單一 class
   高，above 模式下這個 <div> 是表單裡唯一的 div（等於天生是「該類型裡最後一個」），會被那條
   規則誤中，把下面這行的 20px 蓋成 0，導致分隔線緊貼著帳號欄位。below 模式時這顆 div 本來
   就是表單真正的最後一個元素，被歸零反而是對的，所以不能直接拿掉 Blocksy 那條規則、只能在
   above 這個 modifier 補 !important 蓋回來。 */
.wclon-social-row--above {
    margin-top: 0;
    margin-bottom: 20px !important;
}

.wclon-social-row--above > .wclon-divider {
    margin-top: 12px;
    margin-bottom: 0;
}

.wclon-social-row > .wclon-auth-wrap {
    flex: 1 1 auto;
    min-width: max-content;
    margin: 0;
}

.wclon-social-row .wclon-auth-btn {
    width: 100%;
    white-space: nowrap;
}

/* ── 按鈕基底（結構，不含配色 / 形狀）── */
.wclon-connect-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    text-decoration: none;
    font-weight: bold;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    box-sizing: border-box;
    border: 2px solid transparent;
    cursor: pointer;
}

.wclon-auth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 11px 18px;
    text-decoration: none;
    font-weight: bold;
    font-size: inherit;
    width: 100%;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    box-sizing: border-box;
    border: 2px solid transparent;
    cursor: pointer;
}

/* ── 配色 ── */
.wclon-btn--green {
    background: #00c300;
    color: #fff;
}
.wclon-btn--green:hover {
    background: #00a800;
    color: #fff;
}

/* ── 形狀（全域統一，套用至按鈕與結帳頁 chip）── */
.wclon-btn--rounded { border-radius: 6px; }
.wclon-btn--pill    { border-radius: 999px; }
.wclon-btn--square  { border-radius: 0; }

/* ── 版型 ── */
/* full：auth-btn 預設已是全寬，connect-btn 需額外設定 */
.wclon-connect-btn.wclon-btn--full {
    display: flex;
    width: 100%;
}

/* icon：只留品牌圖示，隱藏文字，按鈕縮回方形 */
.wclon-btn--icon .wclon-btn-label {
    display: none;
}

/* v1.30.2：寬度從 auto 改成 max-content。`.wclon-auth-btn` 是 display:flex 的**區塊層級**
   flex 容器，width:auto 對它的意思是「撐滿容器」而不是「縮到內容大小」，所以純 ICON 版型
   以前仍是一條一條的長按鈕、只是中間放一顆小圖示；max-content 才會真的縮成方形。
   左右 auto 邊距讓按鈕在任何容器裡都自己置中（後台預覽的直排、綁定卡片皆適用）。 */
.wclon-auth-btn.wclon-btn--icon,
.wclon-connect-btn.wclon-btn--icon {
    display: flex; /* .wclon-connect-btn 預設是 inline-flex，行內盒的 auto 邊距會算成 0，置不了中 */
    width: max-content;
    margin-left: auto;
    margin-right: auto;
    gap: 0;
    padding: 11px;
}

/* v1.31.0：靠左時把左邊的 auto 邊距收掉（右邊留著才會把按鈕推到左邊）。
   置中是預設值，不需要另外的規則——上面那條的左右 auto 邊距就是置中。 */
.wclon-auth-btn.wclon-btn--icon.wclon-btn--align-left,
.wclon-connect-btn.wclon-btn--icon.wclon-btn--align-left {
    margin-left: 0;
}

/* 純 ICON 版型的登入／註冊列（v1.30.2）：預設 full 版型時每個 .wclon-auth-wrap 都
   `flex: 1 1 auto` 平分整列寬度，套在圖示按鈕上會讓三顆圖示各自被推到自己那一格裡、
   彼此離很遠；icon 版型改成 wrap 縮到按鈕本身的寬度、整列併成一組。對齊方式（置中／靠左）
   自 v1.31.0 起由後台設定 `btn_align` 決定。分隔線仍是 `flex: 0 0 100%` 的整列元素，不受影響。 */
.wclon-social-row--icon {
    justify-content: center;
}

.wclon-social-row--icon.wclon-social-row--align-left {
    justify-content: flex-start;
}

.wclon-social-row--icon > .wclon-auth-wrap {
    flex: 0 0 auto;
    min-width: 0;
}

/* Cloudflare Turnstile 容器樣式 v1.41.0 起改由 WCLON_Turnstile::enqueue_assets() 以內嵌樣式輸出，
   社交登入模組關閉（本檔不載入）時仍然有效。 */