/* === 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: 14px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fafafa;
}

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

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

.wclon-connected-status--google {
    color: #1f1f1f;
}

.wclon-connected-status--apple {
    color: #1d1d1f;
}

.wclon-section-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    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: 14px;
    color: #333;
}

.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: #00c300;
}

.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: 13px;
    color: #999;
    text-decoration: underline;
    flex-shrink: 0;
}
.wclon-unlink-text:hover {
    color: #b91c1c;
}

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

.wclon-connect-hint {
    margin-top: 6px;
    color: #777;
    font-size: 13px;
}

/* ── 結帳頁精簡綁定列 ── */
.wclon-checkout-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin: 0 0 20px;
    padding: 10px 14px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fafafa;
}

.wclon-checkout-bar__label {
    font-size: 13px;
    color: #555;
    line-height: 1.4;
    white-space: nowrap;
}

.wclon-checkout-bar__chips {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.wclon-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    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 24px;
    padding: 14px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fafafa;
}

.wclon-account-social__label {
    margin: 0 0 10px;
    font-size: 13px;
    color: #555;
}

.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: 8px 0;
    border-top: 1px solid #ebebeb;
}

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

.wclon-account-social__row-label {
    font-size: 13px;
    color: #333;
    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: #aaa;
    font-size: 12px;
    white-space: nowrap;
}

/* 社交登入按鈕 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%;
}

.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: 15px;
    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;
}
.wclon-auth-btn.wclon-btn--icon,
.wclon-connect-btn.wclon-btn--icon {
    width: auto;
    gap: 0;
    padding: 11px;
}
.wclon-social-row .wclon-auth-btn.wclon-btn--icon {
    width: auto;
}