/* === 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;
}

.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: #292a2c;
    color: #e3e3e3;
}
.wclon-auth-btn.wclon-btn--google-dark:hover,
.wclon-connect-btn.wclon-btn--google-dark:hover {
    border-color: #6e7375;
}

/* ── 綁定狀態區塊（結帳頁 / 帳戶詳細資料頁）── */
/* 帳戶頁綁定區塊並排 flex row */
.wclon-connect-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 20px;
}

.wclon-connect-row > .wclon-connect-box {
    flex: 1 1 220px;
    min-width: 0;
    margin-bottom: 0;
}

.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-desc {
    margin-left: 8px;
    color: #555;
}

.wclon-disconnect-link {
    margin-left: 8px;
    font-size: 13px;
}

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

/* ── 登入 / 註冊頁外框 ── */
.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;
}

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

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

.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;
}

.wclon-btn--outline {
    background: #fff;
    color: #00b300;
    border-color: #00c300;
}
.wclon-btn--outline:hover {
    background: #f5fff5;
    color: #009900;
    border-color: #009900;
}
.wclon-btn--outline svg {
    fill: #00c300;
}
.wclon-btn--outline:hover svg {
    fill: #009900;
}

.wclon-btn--dark {
    background: #222;
    color: #fff;
}
.wclon-btn--dark:hover {
    background: #444;
    color: #fff;
}

/* ── 形狀 ── */
.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%;
}

/* auto：兩個按鈕都縮回自動寬度 */
.wclon-connect-btn.wclon-btn--auto,
.wclon-auth-btn.wclon-btn--auto {
    display: inline-flex;
    width: auto;
}

/* text：純文字連結，所有配色 / 形狀設定無效 */
.wclon-connect-btn.wclon-btn--text,
.wclon-auth-btn.wclon-btn--text {
    display: inline-flex;
    width: auto;
    background: transparent !important;
    border-color: transparent !important;
    border-radius: 0 !important;
    color: #00b300;
    padding: 0;
    font-size: inherit;
    font-weight: normal;
    text-decoration: underline;
}
.wclon-connect-btn.wclon-btn--text:hover,
.wclon-auth-btn.wclon-btn--text:hover {
    background: transparent !important;
    color: #009900;
}
.wclon-connect-btn.wclon-btn--text svg,
.wclon-auth-btn.wclon-btn--text svg {
    fill: #00b300;
}