/* ===========================================================================
 * mes789-system / assets/css/social-login.css
 * ---------------------------------------------------------------------------
 * ปุ่ม "เข้าสู่ระบบด้วย Google / Facebook / LINE / LinkedIn / TikTok"
 *
 * แนวคิด: ไม่ใช้สีแบรนด์เต็มพื้นปุ่มแบบเว็บทั่วไป เพราะพื้นเว็บเราเป็นดำ-ทอง
 * ปุ่มสีน้ำเงินสด/เขียวสดเต็มก้อนจะตะโกนแข่งกับปุ่มทองของเราเอง
 * จึงใช้พื้นเข้ม + ขอบและแถบสีแบรนด์บาง ๆ ทางซ้าย เห็นชัดว่าค่ายไหน
 * แต่ยังกลมกลืนกับธีม Sacred Vermilion
 *
 * สีแบรนด์ของแต่ละค่ายส่งมาทางตัวแปร --brand จาก PHP (ดู social-buttons.php)
 * =========================================================================== */

.social-login {
    margin-top: 22px;
}

/* ----- เส้นคั่น "หรือเข้าสู่ระบบด้วย" ----- */
.social-login-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    color: var(--text-mute);
    font-size: .82rem;
}
.social-login-divider::before,
.social-login-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}

/* ----- แถวปุ่ม ----- */
.social-login-buttons {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.social-login-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 15px;
    border: 1px solid var(--line);
    /* แถบสีแบรนด์ทางซ้าย — บอกว่าค่ายไหนโดยไม่ต้องใช้โลโก้ลิขสิทธิ์ */
    border-left: 3px solid var(--brand, var(--gold-dim));
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-weight: 600;
    font-size: .93rem;
    text-decoration: none;
    /* ปุ่มสูงพอให้นิ้วโป้งกดพลาดยาก — หน้านี้คนเข้าจากมือถือเป็นหลัก */
    min-height: 46px;
    transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.social-login-btn:hover {
    background: var(--surface-2);
    border-color: var(--brand, var(--gold-dim));
    color: var(--text);
}
.social-login-btn:active {
    transform: scale(.99);
}

/* ----- สถานะ "เชื่อมต่อแล้ว" ในหน้าตั้งค่า ----- */
.social-login-btn.is-linked {
    cursor: default;
    background: var(--bg-soft);
}
.social-login-btn.is-linked:hover {
    background: var(--bg-soft);
}
.social-login-name {
    color: var(--text-dim);
    font-weight: 600;
}
.social-unlink {
    padding: 6px 13px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    color: var(--text-mute);
    font-size: .8rem;
    font-family: inherit;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}
.social-unlink:hover {
    color: var(--red-soft);
    border-color: var(--red);
}

/* จอเล็ก: ปุ่มเต็มความกว้างอยู่แล้ว แค่ลดตัวอักษรลงนิดให้ชื่อค่ายยาว ๆ ไม่ตัดบรรทัด */
@media (max-width: 400px) {
    .social-login-btn { font-size: .88rem; padding: 11px 13px; }
}