/* Coirle SSO Plugin Styles */

.coirle-sso-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 240px;
    margin: 20px auto;
    width: 100%;
}

.coirle-sso-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    border: 2px solid #e1e5e9;
    border-radius: 8px;
    background-color: #ffffff;
    color: #333333;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.3s ease;
    position: relative;
    min-height: 44px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.coirle-sso-button:hover {
    border-color: #d1d5db;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    text-decoration: none;
    color: #333333;
    transform: translateY(-1px);
}

.coirle-sso-button:focus {
    outline: 2px solid #4285f4;
    outline-offset: 2px;
}

.coirle-sso-icon {
    width: 20px;
    height: 20px;
    margin-right: 12px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

.coirle-sso-google-icon {
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMiIgZGF0YS1uYW1lPSJMYXllciAyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNy45NyIgaGVpZ2h0PSIyNy45NyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZpZXdCb3g9IjAgMCAyNy45NyAyNy45NyI+CiAgPGRlZnM+CiAgICA8Y2xpcFBhdGggaWQ9ImNsaXBwYXRoIj4KICAgICAgPHJlY3Qgd2lkdGg9IjI3Ljk3IiBoZWlnaHQ9IjI3Ljk3IiBzdHlsZT0iZmlsbDogbm9uZTsiLz4KICAgIDwvY2xpcFBhdGg+CiAgPC9kZWZzPgogIDxnIGlkPSJMYXllcl8xLTIiIGRhdGEtbmFtZT0iTGF5ZXIgMSI+CiAgICA8ZyBzdHlsZT0iY2xpcC1wYXRoOiB1cmwoI2NsaXBwYXRoKTsiPgogICAgICA8Zz4KICAgICAgICA8cGF0aCBkPSJNMjcuNDEsMTQuM2MwLS45OS0uMDktMS45NC0uMjUtMi44NmgtMTMuMTd2NS40MWg3LjUzYy0uMzIsMS43NS0xLjMxLDMuMjMtMi43OSw0LjIydjMuNTFoNC41MmMyLjY0LTIuNDMsNC4xNy02LjAyLDQuMTctMTAuMjhaIiBzdHlsZT0iZmlsbDogIzQyODVmNDsiLz4KICAgICAgICA8cGF0aCBkPSJNMTMuOTgsMjcuOTdjMy43OCwwLDYuOTQtMS4yNSw5LjI1LTMuMzlsLTQuNTItMy41MWMtMS4yNS44NC0yLjg1LDEuMzMtNC43NCwxLjMzLTMuNjQsMC02LjcyLTIuNDYtNy44Mi01Ljc3SDEuNDl2My42MmMyLjMsNC41Nyw3LjAzLDcuNywxMi41LDcuN1oiIHN0eWxlPSJmaWxsOiAjMzRhODUzOyIvPgogICAgICAgIDxwYXRoIGQ9Ik02LjE2LDE2LjY0Yy0uMjgtLjg0LS40NC0xLjc0LS40NC0yLjY2cy4xNi0xLjgyLjQ0LTIuNjZ2LTMuNjJIMS40OWMtLjk1LDEuODktMS40OSw0LjAyLTEuNDksNi4yOHMuNTQsNC4zOSwxLjQ5LDYuMjhsNC42Ny0zLjYyWiIgc3R5bGU9ImZpbGw6ICNmYmJjMDQ7Ii8+CiAgICAgICAgPHBhdGggZD0iTTEzLjk4LDUuNTZjMi4wNSwwLDMuOS43MSw1LjM1LDIuMDlsNC4wMS00LjAxYy0yLjQyLTIuMjYtNS41OS0zLjY0LTkuMzYtMy42NEM4LjUyLDAsMy43OSwzLjEzLDEuNDksNy43bDQuNjcsMy42MmMxLjEtMy4zMSw0LjE4LTUuNzcsNy44Mi01Ljc3WiIgc3R5bGU9ImZpbGw6ICNlOTQyMzU7Ii8+CiAgICAgIDwvZz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPg==")
}

.coirle-sso-microsoft-icon {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjkiIGhlaWdodD0iOSIgZmlsbD0iI0Y3NTMwNiIvPgo8cmVjdCB4PSIxMSIgd2lkdGg9IjkiIGhlaWdodD0iOSIgZmlsbD0iIzAwQTFGMSIvPgo8cmVjdCB5PSIxMSIgd2lkdGg9IjkiIGhlaWdodD0iOSIgZmlsbD0iIzAwQkE2QyIvPgo8cmVjdCB4PSIxMSIgeT0iMTEiIHdpZHRoPSI5IiBoZWlnaHQ9IjkiIGZpbGw9IiNGRkIzMDAiLz4KPC9zdmc+Cg==');

}

.coirle-sso-google {
    border-color: #4285f4;
}

.coirle-sso-google:hover {
    background-color: #4285f4;
    color: #ffffff;
    border-color: #4285f4;
}

.coirle-sso-microsoft {
    border-color: #00a1f1;
}

.coirle-sso-microsoft:hover {
    background-color: #00a1f1;
    color: #ffffff;
    border-color: #00a1f1;
}

/* Minimal style */
.coirle-sso-style-minimal .coirle-sso-button {
    padding: 8px 16px;
    border: 1px solid #e1e5e9;
    font-size: 13px;
    min-height: 36px;
}

.coirle-sso-style-minimal .coirle-sso-icon {
    width: 16px;
    height: 16px;
    margin-right: 8px;
}

/* Large style */
.coirle-sso-style-large .coirle-sso-button {
    padding: 16px 24px;
    font-size: 16px;
    min-height: 52px;
}

.coirle-sso-style-large .coirle-sso-icon {
    width: 24px;
    height: 24px;
    margin-right: 16px;
}

/* Responsive design */
@media (max-width: 480px) {
    .coirle-sso-buttons {
        max-width: 100%;
    }
    
    .coirle-sso-button {
        padding: 12px 16px;
        font-size: 14px;
    }
    
    .coirle-sso-text {
        font-size: 14px;
    }
}

/* Loading state */
.coirle-sso-button.loading {
    opacity: 0.7;
    pointer-events: none;
}

.coirle-sso-button.loading::after {
    content: '';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border: 2px solid #ccc;
    border-top: 2px solid #333;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: translateY(-50%) rotate(0deg); }
    100% { transform: translateY(-50%) rotate(360deg); }
}

/* Error state */
.coirle-sso-error {
    color: #dc3545;
    background-color: #f8d7da;
    border-color: #f5c6cb;
    padding: 12px;
    border-radius: 4px;
    margin: 10px 0;
    font-size: 14px;
}

/* Success state */
.coirle-sso-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
    padding: 12px;
    border-radius: 4px;
    margin: 10px 0;
    font-size: 14px;
}