/* 社交媒體圖標樣式 */
.sll-social-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 15px;
    margin: 5px 0;
    border-radius: 4px;
    color: #fff;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: center;
}

.sll-social-button:hover {
    opacity: 0.9;
    color: #fff;
}

/* 前台圖標樣式 */
.sll-icon-google, .sll-icon-facebook, .sll-icon-yahoo, .sll-icon-microsoft, .sll-icon-github {
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    display: inline-block;
    vertical-align: middle;
}

/* 後台圖標樣式 */
.sll-provider-icon.google, .sll-provider-icon.facebook, .sll-provider-icon.yahoo, .sll-provider-icon.microsoft, .sll-provider-icon.github,
.sll-provider-icon.sll-google-icon, .sll-provider-icon.sll-facebook-icon, .sll-provider-icon.sll-yahoo-icon, .sll-provider-icon.sll-microsoft-icon, .sll-provider-icon.sll-github-icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    display: inline-block;
    vertical-align: middle;
}

/* Facebook 圖標和按鈕 */
.sll-facebook-button {
    background-color: #1877F2;
}
.sll-icon-facebook, .sll-provider-icon.facebook, .sll-provider-icon.sll-facebook-icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="%231877F2" d="M24,4C12.954,4,4,12.954,4,24s8.954,20,20,20s20-8.954,20-20S35.046,4,24,4z"/><path fill="%23FFFFFF" d="M26.707,29.301h5.176l0.813-5.258h-5.989v-2.874c0-2.184,0.714-4.121,2.757-4.121h3.283V12.46 c-0.577-0.078-1.797-0.248-4.102-0.248c-4.814,0-7.636,2.542-7.636,8.334v3.498H16.06v5.258h4.948v14.452 C22.001,43.9,22.981,44,24,44c0.921,0,1.82-0.084,2.707-0.204V29.301z"/></svg>');
}

/* Google 圖標和按鈕 */
.sll-icon-google, .sll-provider-icon.google, .sll-provider-icon.sll-google-icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="%23EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"/><path fill="%234285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"/><path fill="%23FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"/><path fill="%2334A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"/><path fill="none" d="M0 0h48v48H0z"/></svg>');
}

/* Yahoo 圖標和按鈕 */
.sll-yahoo-button {
    background-color: #6001D2;
}
.sll-icon-yahoo, .sll-provider-icon.yahoo, .sll-provider-icon.sll-yahoo-icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="%236001D2" d="M24,4C12.954,4,4,12.954,4,24s8.954,20,20,20s20-8.954,20-20S35.046,4,24,4z"/><path fill="%23FFFFFF" d="M13.91,12.5l5.891,0.02l5.731,9.219l5.671-9.239h5.771l-8.811,13.5L36.5,35.5h-5.93l-5.971-9.65L18.5,35.5h-5.77l9.09-13.5L13.91,12.5z"/></svg>');
}

/* Microsoft 圖標和按鈕 */
.sll-microsoft-button {
    background-color: #00A4EF;
}
.sll-icon-microsoft, .sll-provider-icon.microsoft, .sll-provider-icon.sll-microsoft-icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="%23FF5722" d="M22,22H6V6h16V22z"/><path fill="%2303A9F4" d="M42,22H26V6h16V22z"/><path fill="%23FFEB3B" d="M22,42H6V26h16V42z"/><path fill="%238BC34A" d="M42,42H26V26h16V42z"/></svg>');
}

/* GitHub 圖標和按鈕 */
.sll-github-button {
    background-color: #24292E;
}
.sll-icon-github, .sll-provider-icon.github, .sll-provider-icon.sll-github-icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="%23333333" d="M24,4C12.954,4,4,12.954,4,24c0,8.887,5.801,16.411,13.82,19.016c1.018,0.187,1.345-0.434,1.345-0.966 c0-0.477-0.012-1.743-0.012-3.421c-5.628,1.221-6.813-2.406-6.813-2.406C11.58,34.691,10.35,34,10.35,34 c-1.837-1.258,0.138-1.233,0.138-1.233c2.036,0.142,3.108,2.087,3.108,2.087c1.808,3.094,4.74,2.201,5.889,1.682 c0.184-1.308,0.711-2.201,1.29-2.709c-4.491-0.51-9.214-2.245-9.214-9.98c0-2.204,0.788-4.009,2.078-5.421 c-0.207-0.509-0.901-2.564,0.195-5.352c0,0,1.699-0.544,5.556,2.066c1.613-0.45,3.341-0.676,5.064-0.682 c1.723,0.008,3.45,0.232,5.064,0.682c3.857-2.609,5.556-2.066,5.556-2.066c1.098,2.787,0.405,4.842,0.196,5.352 c1.29,1.412,2.078,3.217,2.078,5.421c0,7.756-4.723,9.47-9.234,9.97c0.725,0.623,1.372,1.853,1.372,3.729 c0,2.709-0.025,4.891-0.025,5.552c0,0.54,0.35,1.169,1.357,0.972C38.205,40.405,44,32.884,44,24C44,12.954,35.046,4,24,4z"/><path fill="%23FFFFFF" d="M15.134,31.319c-0.04,0.093-0.186,0.12-0.317,0.056c-0.136-0.06-0.213-0.187-0.168-0.279 c0.04-0.093,0.184-0.12,0.317-0.056C15.102,31.1,15.178,31.227,15.134,31.319L15.134,31.319z M14.989,31.199"/><path fill="%23FFFFFF" d="M15.568,31.818c-0.089,0.082-0.263,0.044-0.377-0.086c-0.122-0.13-0.143-0.303-0.054-0.385 c0.092-0.082,0.262-0.044,0.381,0.086C15.64,31.564,15.66,31.736,15.568,31.818L15.568,31.818z M15.461,31.699"/><path fill="%23FFFFFF" d="M15.987,32.464c-0.115,0.08-0.301,0.005-0.417-0.162c-0.115-0.166-0.115-0.366,0.002-0.446 c0.117-0.08,0.301-0.007,0.419,0.161C16.105,32.186,16.105,32.386,15.987,32.464L15.987,32.464z M15.987,32.464"/><path fill="%23FFFFFF" d="M16.591,33.089c-0.103,0.114-0.319,0.082-0.479-0.07c-0.162-0.149-0.207-0.367-0.104-0.48 c0.103-0.114,0.321-0.082,0.483,0.07C16.654,32.759,16.704,32.977,16.591,33.089L16.591,33.089z M16.591,33.089"/><path fill="%23FFFFFF" d="M17.447,33.439c-0.045,0.146-0.258,0.211-0.472,0.149c-0.214-0.063-0.354-0.232-0.309-0.379 c0.044-0.147,0.258-0.213,0.473-0.149C17.353,33.123,17.493,33.292,17.447,33.439L17.447,33.439z M17.447,33.439"/><path fill="%23FFFFFF" d="M18.384,33.529c0.005,0.154-0.176,0.282-0.4,0.285c-0.226,0.005-0.408-0.12-0.411-0.273 c0-0.156,0.177-0.283,0.402-0.286C18.2,33.251,18.384,33.375,18.384,33.529L18.384,33.529z M18.384,33.529"/><path fill="%23FFFFFF" d="M19.246,33.352c0.029,0.15-0.13,0.306-0.35,0.347c-0.218,0.04-0.418-0.053-0.447-0.203 c-0.03-0.151,0.131-0.306,0.349-0.347C19.018,33.111,19.217,33.202,19.246,33.352L19.246,33.352z M19.246,33.352"/></svg>');
}

/* 社交連接頁面樣式 */
.sll-social-connections {
    margin-bottom: 30px;
}

.sll-social-connections-list {
    margin-top: 20px;
}

.sll-social-connection-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border: 1px solid #ddd;
    margin-bottom: 10px;
    border-radius: 4px;
}

.sll-provider-info {
    display: flex;
    align-items: center;
}



.sll-provider-name {
    font-weight: bold;
    margin-right: 10px;
}

.sll-connection-status {
    font-size: 0.9em;
    padding: 3px 8px;
    border-radius: 3px;
}

.sll-connection-status.connected {
    background-color: #e7f9e7;
    color: #2e7d32;
}

.sll-connection-status.not-connected {
    background-color: #f9e7e7;
    color: #c62828;
}

.sll-provider-actions {
    text-align: right;
}

.sll-connect-button {
    background-color: #4CAF50 !important;
    color: white !important;
}

.sll-disconnect-button {
    background-color: #f44336 !important;
    color: white !important;
}